:root {
  color-scheme: dark light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kx-color-canvas, #0d0d0e);
  color: var(--kx-color-text-primary, #f4f4f2);
  font-family: var(--kx-font-family-sans, Inter, system-ui, sans-serif);
}

.proof-page,
.proof-page section,
.proof-page footer { background: var(--kx-color-canvas, #0d0d0e); }

.proof-nav { display: flex; align-items: center; gap: var(--kx-space-4, 16px); }
.proof-nav a { color: var(--kx-color-text-secondary, #b7b7b4); font-size: var(--kx-font-size-sm, 14px); font-weight: var(--kx-font-weight-medium, 500); text-decoration: none; }
.proof-nav a:hover { color: var(--kx-color-text-primary, #f4f4f2); }

.proof-hero-inner { grid-template-columns: minmax(0, 760px); }
.proof-hero .kx-lede { max-width: 720px; }
.proof-actions { padding-top: var(--kx-space-3, 12px); }

.proof-rail { width: min(100% - (2 * var(--kx-container-gutter, 24px)), var(--kx-container-max, 1180px)); margin-inline: auto; }
.proof-facts { border-block: 1px solid var(--kx-color-border-default, #313131); }
.proof-facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-facts-grid > div { min-height: 146px; padding: var(--kx-space-7, 32px) var(--kx-space-6, 24px); border-inline-start: 1px solid var(--kx-color-border-default, #313131); display: grid; align-content: center; gap: 10px; }
.proof-facts-grid > div:first-child { border-inline-start: 0; }
.proof-facts strong { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em; }
.proof-facts span, .proof-note { color: var(--kx-color-text-muted, #90908c); font-size: var(--kx-font-size-sm, 14px); }

.proof-section { padding: clamp(56px, 8vw, 112px) 0; }
.proof-section-bordered { border-top: 1px solid var(--kx-color-border-default, #313131); }
.proof-two-column { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr); gap: clamp(32px, 7vw, 112px); align-items: start; }
.proof-heading { max-width: 720px; margin: 0; color: var(--kx-color-text-primary, #f4f4f2); font-size: clamp(1.75rem, 3.5vw, 3.1rem); font-weight: 560; letter-spacing: -0.045em; line-height: 1.06; }
.proof-copy { max-width: 660px; color: var(--kx-color-text-secondary, #b7b7b4); font-size: 1rem; line-height: 1.7; }
.proof-code { min-height: 250px; margin: 0; overflow: auto; white-space: pre-wrap; }

.proof-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--kx-color-border-default, #313131); border-left: 1px solid var(--kx-color-border-default, #313131); }
.proof-capabilities article { min-height: 180px; padding: 28px; border-right: 1px solid var(--kx-color-border-default, #313131); border-bottom: 1px solid var(--kx-color-border-default, #313131); }
.proof-capabilities h3 { margin: 0 0 12px; color: var(--kx-color-text-primary, #f4f4f2); font-size: 1rem; }
.proof-capabilities p { margin: 0; color: var(--kx-color-text-secondary, #b7b7b4); font-size: .94rem; line-height: 1.55; }
.proof-note { margin: 20px 0 0; line-height: 1.5; }

.proof-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.proof-panel { min-width: 0; padding: 24px; border: 1px solid var(--kx-color-border-default, #313131); background: var(--kx-color-surface-subtle, #171717); }
.proof-panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 22px; }
.proof-panel-heading h3 { margin: 0; font-size: 1rem; }
.proof-panel-heading span, .proof-panel label { color: var(--kx-color-text-muted, #90908c); font-size: .78rem; }
.proof-panel label { display: grid; gap: 8px; font-weight: 600; }
.proof-panel textarea { width: 100%; min-height: 300px; resize: vertical; padding: 14px; border: 1px solid var(--kx-color-border-default, #313131); border-radius: var(--kx-radius-md, 7px); background: var(--kx-color-canvas, #0d0d0e); color: var(--kx-color-text-primary, #f4f4f2); font: .78rem/1.55 var(--kx-font-family-mono, ui-monospace, monospace); }
.proof-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.proof-text-button { display: inline-flex !important; width: auto; cursor: pointer; color: var(--kx-color-text-secondary, #b7b7b4) !important; background: none; border: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.proof-text-button input { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); }
.proof-result { min-height: 1.25rem; margin-top: 18px; color: var(--kx-color-text-secondary, #b7b7b4); font-size: .85rem; line-height: 1.5; }
.proof-result p { margin: 6px 0 0; }
.proof-result[data-state="error"] { color: var(--kx-color-status-danger, #ef7770); }
.proof-result[data-state="success"] strong { color: var(--kx-color-status-success, #8ac18a); }

.proof-filter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .35fr) auto; align-items: end; gap: 16px; margin-top: 32px; }
.proof-filter-row label { display: grid; gap: 8px; color: var(--kx-color-text-muted, #90908c); font-size: .78rem; font-weight: 600; }
.proof-filter-row input, .proof-filter-row select { width: 100%; min-height: 42px; padding-inline: 12px; border: 1px solid var(--kx-color-border-default, #313131); border-radius: var(--kx-radius-md, 7px); background: var(--kx-color-surface-subtle, #171717); color: var(--kx-color-text-primary, #f4f4f2); }
#adapter-count { color: var(--kx-color-text-muted, #90908c); font-size: .85rem; white-space: nowrap; }
.proof-adapter-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; border-top: 1px solid var(--kx-color-border-default, #313131); border-left: 1px solid var(--kx-color-border-default, #313131); }
.proof-adapter-results article { min-height: 156px; padding: 20px; border-right: 1px solid var(--kx-color-border-default, #313131); border-bottom: 1px solid var(--kx-color-border-default, #313131); }
.proof-adapter-results h3 { margin: 0 0 10px; font: .84rem var(--kx-font-family-mono, ui-monospace, monospace); color: var(--kx-color-text-primary, #f4f4f2); }
.proof-adapter-results p { margin: 0; color: var(--kx-color-text-secondary, #b7b7b4); font-size: .86rem; line-height: 1.5; }
.proof-adapter-results span { display: block; margin-top: 14px; color: var(--kx-color-text-muted, #90908c); font-size: .74rem; }

.proof-flow { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--kx-color-border-default, #313131); }
.proof-flow li { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--kx-color-border-default, #313131); }
.proof-flow span { color: var(--kx-color-text-muted, #90908c); font-family: var(--kx-font-family-mono, ui-monospace, monospace); font-size: .78rem; }
.proof-flow strong { font-size: 1rem; }
.proof-flow p { margin: 6px 0 0; color: var(--kx-color-text-secondary, #b7b7b4); line-height: 1.5; }
.proof-final { text-align: left; }
.proof-final .kx-button { margin-top: 30px; }
.proof-footer { border-top: 1px solid var(--kx-color-border-default, #313131); padding: 24px 0; }
.proof-footer .proof-rail { display: flex; justify-content: space-between; gap: 16px; color: var(--kx-color-text-muted, #90908c); font-size: var(--kx-font-size-sm, 14px); }

@media (max-width: 760px) {
  .proof-nav a:not(:last-child) { display: none; }
  .proof-facts-grid, .proof-capabilities, .proof-two-column, .proof-workspace, .proof-adapter-results { grid-template-columns: 1fr; }
  .proof-filter-row { grid-template-columns: 1fr; align-items: stretch; }
  .proof-facts-grid > div { min-height: 100px; border-inline-start: 0; border-top: 1px solid var(--kx-color-border-default, #313131); }
  .proof-facts-grid > div:first-child { border-top: 0; }
  .proof-footer .proof-rail { align-items: flex-start; flex-direction: column; }
}
