:root {
  --ink: #171a17;
  --paper: #f4f2ec;
  --panel: #fff;
  --line: #d7d5cd;
  --muted: #686b65;
  --lime: #d9ff5b;
  --coral: #ff725c;
  --blue: #3c6df0;
  --green: #177a51;
  --yellow: #a36800;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; }
button, input { font: inherit; }
.site-header {
  height: 62px; border-bottom: 1px solid var(--ink); display: flex; align-items: center;
  justify-content: space-between; padding: 0 max(20px, calc((100vw - 1180px) / 2));
  background: var(--paper); position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.site-nav { display: flex; gap: 18px; align-items: center; font-size: 14px; }
.site-nav a { text-decoration: none; }
.button {
  display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none;
  padding: 0 14px; border-radius: 5px; cursor: pointer; font-weight: 700;
}
.button.secondary { background: transparent; color: var(--ink); }
.home-main { max-width: 1180px; margin: 0 auto; padding: 62px 20px 80px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: 64px; align-items: start; }
.hero > * { min-width: 0; }
.eyebrow { font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
h1 { margin: 12px 0 22px; font-size: clamp(52px, 8vw, 102px); line-height: .91; letter-spacing: 0; max-width: 760px; }
.lead { max-width: 650px; font-size: 20px; line-height: 1.5; color: #454944; }
.install { margin-top: 32px; display: flex; align-items: stretch; max-width: 660px; }
.install code {
  min-width: 0; overflow-x: auto; white-space: nowrap; flex: 1; background: var(--ink); color: #f8f8f4;
  border-radius: 5px 0 0 5px; padding: 15px 16px; font-size: 14px;
}
.copy { border: 0; border-left: 1px solid #5d615b; border-radius: 0 5px 5px 0; background: var(--ink); color: var(--lime); width: 50px; cursor: pointer; }
.lookup { border: 1px solid var(--ink); background: var(--lime); padding: 24px; border-radius: 6px; }
.lookup h2 { margin: 0 0 18px; font-size: 22px; }
.lookup form { display: flex; gap: 8px; }
.lookup input { min-width: 0; flex: 1; height: 40px; border: 1px solid var(--ink); border-radius: 4px; padding: 0 10px; background: #fff; }
.home-product { margin-top: 92px; border-top: 1px solid var(--ink); padding-top: 24px; }
.home-section-head { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 28px; }
.home-section-head h2, .home-report h2 { margin: 8px 0 0; font-size: 38px; line-height: 1.08; max-width: 650px; }
.home-section-head > p { max-width: 460px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.home-section-head.compact { margin: 0; padding: 26px 0 12px; }
.home-section-head.compact h2 { font-size: 27px; }
.demo-board { border: 1px solid var(--ink); background: #fff; overflow-x: auto; }
.demo-board-bar {
  min-width: 900px; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--ink);
}
.demo-board-bar > div { display: flex; gap: 14px; align-items: baseline; }
.demo-board-bar strong { font-size: 18px; }
.demo-board-bar span { color: var(--muted); font: 12px ui-monospace, monospace; }
.demo-live { display: flex; gap: 7px; align-items: center; }
.demo-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.demo-stats {
  min-width: 900px; display: grid; grid-template-columns: 2fr repeat(3, 1fr);
  background: var(--ink); gap: 1px; border-bottom: 1px solid var(--ink);
}
.demo-stats > div { background: #fff; padding: 14px 18px; }
.demo-stats small { display: block; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.demo-stats strong { font: 800 20px ui-monospace, monospace; }
.demo-stats .demo-warning { background: #fff0c7; }
.demo-table-head, .demo-experiment {
  min-width: 900px; display: grid; grid-template-columns: minmax(320px, 2fr) 130px 230px 100px 100px;
  gap: 12px; align-items: center;
}
.demo-table-head { padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: 700 10px ui-monospace, monospace; text-transform: uppercase; }
.demo-experiment { padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.demo-experiment:last-child { border-bottom: 0; }
.demo-experiment small { display: block; color: var(--muted); margin-top: 4px; font: 11px ui-monospace, monospace; }
.demo-experiment code { font-size: 11px; }
.demo-badge { display: inline-flex; padding: 3px 7px; border-radius: 3px; font: 700 10px ui-monospace, monospace; }
.demo-badge.merged { background: #d9f3e6; color: #126542; }
.demo-badge.candidate { background: #dce7ff; color: #214ba9; }
.demo-badge.stale { background: var(--coral); color: var(--ink); }
.home-report {
  display: grid; grid-template-columns: minmax(300px, .75fr) minmax(500px, 1.25fr);
  gap: 60px; align-items: center; margin-top: 96px; padding: 60px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.report-copy > p { color: var(--muted); line-height: 1.6; font-size: 16px; }
.benefit-list { margin-top: 30px; border-top: 1px solid var(--line); }
.benefit-list > div { display: grid; grid-template-columns: 28px 1fr; gap: 7px 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.benefit-list span { grid-row: 1 / 3; color: var(--blue); font: 800 11px ui-monospace, monospace; }
.benefit-list small { color: var(--muted); }
.home-report-preview { border: 1px solid var(--ink); background: #fff; padding: 25px; }
.preview-kicker { color: var(--blue); font: 800 11px ui-monospace, monospace; text-transform: uppercase; }
.home-report-preview h3 { margin: 7px 0 4px; font-size: 38px; }
.preview-summary { color: var(--muted); font-size: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.preview-chart-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; padding-top: 18px; }
.preview-chart-head small { display: block; color: var(--muted); font-weight: 700; }
.preview-chart-head strong { display: block; color: var(--green); font: 800 28px ui-monospace, monospace; margin-top: 4px; }
.preview-chart-head > b { color: var(--green); font: 800 14px ui-monospace, monospace; }
.preview-chart { display: block; width: 100%; height: auto; }
.preview-chart line { stroke: #dedcd5; stroke-width: 1; }
.preview-chart path { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.preview-chart circle { fill: var(--green); stroke: var(--ink); stroke-width: 2; }
.preview-chart .baseline-point { fill: var(--lime); }
.preview-chart .revert-point { fill: var(--coral); }
.preview-chart .experiment-marker {
  stroke: var(--coral); stroke-width: 2; stroke-dasharray: 5 6;
}
.preview-chart .marker-label {
  fill: #b83d2e; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 5px;
  stroke-linejoin: round;
}
.preview-chart text { fill: var(--muted); font: 11px ui-monospace, monospace; }
.preview-footer { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 13px; color: var(--muted); font-size: 11px; }
.workflow { margin-top: 86px; border-top: 1px solid var(--ink); }
.workflow-row {
  display: grid; grid-template-columns: 42px 190px 1fr; gap: 22px; padding: 22px 0;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.workflow-row strong { font-size: 18px; }
.workflow-row code { font-size: 14px; overflow-wrap: anywhere; }
.step { color: var(--blue); font: 800 13px ui-monospace, monospace; }
.skill-band {
  margin-top: 64px; background: var(--ink); color: #fff; padding: 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.skill-band h2 { margin: 0 0 8px; }
.skill-band p { margin: 0; color: #bec3bc; }
.skill-band .button { background: var(--lime); color: var(--ink); }
.dashboard { max-width: 1440px; margin: 0 auto; padding: 30px 24px 70px; }
.project-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 28px; }
.project-actions { display: flex; align-items: center; gap: 16px; }
.project-head h1 { font-size: clamp(36px, 5vw, 68px); margin: 7px 0 0; overflow-wrap: anywhere; }
.sync { display: flex; gap: 8px; align-items: center; font: 12px ui-monospace, monospace; color: var(--muted); }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.baseline-band {
  display: grid; grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(130px, 1fr));
  border: 1px solid var(--ink); background: var(--ink); gap: 1px; margin-bottom: 12px;
}
.baseline-band > div { background: var(--panel); padding: 15px 18px; min-height: 82px; }
.baseline-band small { display: block; color: var(--muted); font-weight: 700; margin-bottom: 9px; }
.baseline-band strong { font: 800 19px ui-monospace, monospace; }
.baseline-stat strong { font-size: 25px; }
.baseline-band .needs-attention { background: #fff0c7; }
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--ink); background: var(--ink); gap: 1px; margin-bottom: 28px; }
.metric-summary { background: var(--panel); padding: 18px; min-height: 112px; }
.metric-summary small { color: var(--muted); font-weight: 700; }
.metric-value { margin-top: 13px; font: 800 27px ui-monospace, monospace; }
.metric-best { color: var(--green); }
.table-shell { border: 1px solid var(--ink); background: var(--panel); overflow-x: auto; }
.table-toolbar { min-width: 940px; display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--ink); }
.table-toolbar h2 { margin: 0; font-size: 17px; }
.filters { display: flex; gap: 4px; }
.filter {
  border: 1px solid var(--line); background: #fff; height: 30px; padding: 0 10px;
  border-radius: 4px; font-size: 12px; cursor: pointer;
}
.filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }
table { min-width: 940px; width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font: 700 11px ui-monospace, monospace; text-transform: uppercase; }
td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #faf9f5; }
.experiment-title { font-weight: 750; margin-bottom: 5px; max-width: 360px; }
.experiment-id { font: 12px ui-monospace, monospace; color: var(--muted); }
.badge { display: inline-flex; padding: 3px 7px; border-radius: 3px; font: 700 11px ui-monospace, monospace; background: #ecece7; }
.badge.blend { background: #dce7ff; color: #214ba9; }
.badge.ablation { background: #ffe0da; color: #963322; }
.badge.completed, .badge.merged { background: #d9f3e6; color: #126542; }
.badge.running, .badge.open { background: #fff0c7; color: #795000; }
.badge.reverted, .badge.abandoned { background: #ffe0da; color: #963322; }
.badge.needs-rebase { background: var(--coral); color: var(--ink); }
.run-state { margin-top: 6px; color: var(--muted); font-size: 11px; }
.commit-cell { font: 700 12px ui-monospace, monospace; white-space: nowrap; }
.metric-cell { font: 700 13px ui-monospace, monospace; white-space: nowrap; }
.missing { color: #a3a69e; font-weight: 400; }
.pr-link { color: var(--blue); font-weight: 700; text-decoration: none; }
.empty { padding: 62px 24px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); margin-bottom: 8px; }
.footer-note { margin-top: 18px; color: var(--muted); font-size: 12px; }
.timeline-section { margin-top: 32px; border-top: 1px solid var(--ink); }
.timeline-head { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 10px; }
.timeline-head h2 { margin: 0; font-size: 18px; }
.timeline-head span { color: var(--muted); font-size: 12px; }
.timeline-row {
  display: grid; grid-template-columns: 170px 170px 82px minmax(240px, 1fr) 190px;
  gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--line); font-size: 12px;
}
.timeline-row time, .timeline-row code, .event-id { font-family: ui-monospace, monospace; }
.timeline-row time { color: var(--muted); }
.timeline-row code { text-align: right; white-space: nowrap; }
.event-id { color: var(--blue); }
.report-page { max-width: 1280px; margin: 0 auto; padding: 46px 24px 90px; }
.report-hero { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--ink); }
.report-hero h1 { margin: 8px 0; font-size: clamp(46px, 6vw, 80px); }
.report-hero p { margin: 0; color: var(--muted); }
.report-hero code { font-weight: 800; color: var(--ink); }
.report-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.report-kpis { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); border: 1px solid var(--ink); gap: 1px; margin-top: 24px; }
.report-kpis > div { background: #fff; padding: 20px; min-height: 105px; }
.report-kpis small { display: block; color: var(--muted); font-weight: 700; margin-bottom: 12px; }
.report-kpis strong { font: 800 30px ui-monospace, monospace; }
.executive-summary { padding: 52px 0; max-width: 980px; }
.executive-summary h2 { font-size: 34px; line-height: 1.2; margin: 10px 0 16px; }
.executive-summary p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.report-section { border-top: 1px solid var(--ink); padding-top: 20px; margin-top: 18px; }
.report-section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.report-section-head h2 { margin: 5px 0 0; font-size: 26px; }
.report-section-head > span { color: var(--muted); font-size: 12px; }
.reconciliation { margin-bottom: 50px; }
.reconciliation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.reconciliation-grid article { border: 1px solid var(--ink); background: #fff; padding: 20px; }
.reconciliation-grid small { display: block; color: var(--muted); font-weight: 700; }
.reconciliation-grid article > div {
  display: flex; justify-content: space-between; gap: 18px; margin: 18px 0;
}
.reconciliation-grid span { color: var(--muted); }
.reconciliation-grid span strong { color: var(--ink); font-family: ui-monospace, monospace; }
.reconciliation-grid b { font: 800 22px ui-monospace, monospace; }
.reconciliation-grid b.positive { color: var(--green); }
.reconciliation-grid b.negative { color: #b83d2e; }
.report-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.report-metric { background: #fff; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
.report-metric header { display: flex; justify-content: space-between; gap: 20px; padding: 18px 20px 12px; }
.report-metric header small { display: block; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.report-metric header strong { font: 800 27px ui-monospace, monospace; }
.metric-delta { align-self: center; font: 800 15px ui-monospace, monospace; color: var(--muted); }
.metric-delta.positive { color: var(--green); }
.metric-delta.negative { color: #b83d2e; }
.report-chart { height: 230px; padding: 0 10px; }
.report-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: #e3e1da; stroke-width: 1; }
.chart-labels text { fill: var(--muted); font: 11px ui-monospace, monospace; }
.chart-marker { stroke: var(--coral); stroke-width: 1.5; stroke-dasharray: 4 5; }
.chart-marker-label {
  fill: #b83d2e; font: 700 9px ui-monospace, monospace; paint-order: stroke; stroke: #fff;
  stroke-width: 5px; stroke-linejoin: round;
}
.chart-gain { fill: #cf4938; font: 800 10px ui-monospace, monospace; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.chart-line { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: var(--coral); stroke: var(--ink); stroke-width: 2; }
.chart-point.merged { fill: var(--green); }
.chart-point.reverted { fill: var(--coral); }
.chart-point.candidate { fill: var(--blue); }
.chart-point.baseline { fill: var(--lime); }
.chart-point.checkpoint { fill: var(--ink); }
.chart-empty { display: grid; height: 100%; place-items: center; color: var(--muted); font: 700 13px ui-monospace, monospace; }
.report-metric footer { display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding: 12px 20px; color: var(--muted); font-size: 11px; }
.report-metric footer strong { color: var(--ink); }
.decision-list { border: 1px solid var(--ink); background: #fff; }
.decision-row { display: grid; grid-template-columns: 90px minmax(220px, 1fr) 220px minmax(260px, 1fr); gap: 18px; padding: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.decision-row:last-child { border-bottom: 0; }
.decision-row > div > strong { display: block; }
.decision-row small { display: block; color: var(--muted); margin-top: 4px; font-family: ui-monospace, monospace; }
.decision-row code { font-size: 12px; }
.decision-metrics { display: flex; justify-content: flex-end; gap: 18px; font-size: 11px; color: var(--muted); }
.decision-metrics strong { color: var(--ink); font-family: ui-monospace, monospace; }
.social-preview { border-top: 1px solid var(--ink); padding-top: 20px; margin-top: 48px; }
.social-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); }
@media (max-width: 760px) {
  .site-header { padding: 0 16px; }
  .site-nav a:first-child { display: none; }
  .home-main { padding-top: 36px; }
  .hero { grid-template-columns: 1fr; gap: 42px; }
  h1 { font-size: 52px; }
  .home-product { margin-top: 72px; }
  .home-section-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .home-section-head h2, .home-report h2 { font-size: 31px; }
  .demo-board { overflow: hidden; }
  .demo-board-bar { min-width: 0; }
  .demo-stats { min-width: 0; grid-template-columns: 1fr 1fr; }
  .demo-table-head { display: none; }
  .demo-experiment {
    min-width: 0; grid-template-columns: 1fr 1fr; gap: 13px 10px; align-items: end;
    padding: 16px 18px;
  }
  .demo-experiment > div { grid-column: 1 / -1; }
  .demo-experiment > code { justify-self: end; color: var(--muted); }
  .demo-experiment > strong { font-family: ui-monospace, monospace; }
  .demo-experiment > strong::before {
    display: block; margin-bottom: 4px; color: var(--muted);
    font: 700 9px ui-monospace, monospace; text-transform: uppercase;
  }
  .demo-experiment > strong:nth-of-type(1)::before { content: "Accuracy"; }
  .demo-experiment > strong:nth-of-type(2)::before { content: "Latency"; }
  .demo-experiment > strong:nth-of-type(2) { justify-self: end; }
  .home-report { grid-template-columns: 1fr; gap: 38px; margin-top: 72px; padding: 48px 0; }
  .home-report-preview { padding: 18px; }
  .preview-footer { flex-wrap: wrap; }
  .workflow-row { grid-template-columns: 32px 1fr; }
  .workflow-row code { grid-column: 2; }
  .skill-band { align-items: flex-start; flex-direction: column; }
  .dashboard { padding: 24px 14px 60px; }
  .project-head { align-items: flex-start; flex-direction: column; }
  .project-actions { width: 100%; justify-content: space-between; }
  .baseline-band { grid-template-columns: 1fr 1fr; }
  .head-commit { grid-column: 1 / -1; }
  .timeline-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .timeline-row time { grid-column: 1 / -1; }
  .timeline-row > span:not(.event-id) { grid-column: 1 / -1; }
  .report-page { padding: 28px 14px 60px; }
  .report-hero { align-items: flex-start; flex-direction: column; }
  .report-actions { justify-content: flex-start; }
  .report-kpis { grid-template-columns: 1fr 1fr; }
  .executive-summary h2 { font-size: 26px; }
  .report-section-head { align-items: flex-start; flex-direction: column; }
  .report-metrics { grid-template-columns: 1fr; }
  .reconciliation-grid { grid-template-columns: 1fr; }
  .decision-row { grid-template-columns: 90px minmax(0, 1fr); align-items: start; }
  .decision-row code, .decision-metrics { grid-column: 2; }
  .decision-metrics { justify-content: flex-start; flex-wrap: wrap; }
  .report-metric footer { flex-wrap: wrap; }
}
@media print {
  .site-header, .report-actions, .social-preview { display: none; }
  body { background: #fff; }
  .report-page { max-width: none; padding: 0; }
  .report-metric { break-inside: avoid; }
}