/* ================= tokens ================= */
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;   /* chart surface */
  --plane:     #f9f9f7;   /* page plane */
  --ink:       #0b0b0b;
  --ink-2:     #52514e;
  --muted:     #898781;
  --grid:      #e1e0d9;
  --baseline:  #c3c2b7;
  --ring:      rgba(11,11,11,0.10);
  --series-1:  #2a78d6;   /* baseline line — blue */
  --series-2:  #eb6834;   /* config line — orange */
  --status-critical: #d03b3b;
  --status-warning:  #fab219;
  --status-good:     #0ca30c;
  --accent-wash: rgba(42,120,214,0.08);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --plane:     #0d0d0d;
    --ink:       #ffffff;
    --ink-2:     #c3c2b7;
    --muted:     #898781;
    --grid:      #2c2c2a;
    --baseline:  #383835;
    --ring:      rgba(255,255,255,0.10);
    --series-1:  #3987e5;
    --series-2:  #d95926;
    --accent-wash: rgba(57,135,229,0.12);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --plane:     #0d0d0d;
  --ink:       #ffffff;
  --ink-2:     #c3c2b7;
  --muted:     #898781;
  --grid:      #2c2c2a;
  --baseline:  #383835;
  --ring:      rgba(255,255,255,0.10);
  --series-1:  #3987e5;
  --series-2:  #d95926;
  --accent-wash: rgba(57,135,229,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--plane); }
body { overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--plane); }
#siteScroll { height: 100dvh; overflow-y: auto; scroll-behavior: smooth; }

a { color: var(--series-1); }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.01em; }
p { line-height: 1.6; }
em { font-style: italic; }

/* ================= topbar ================= */
.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--plane) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--grid); }
.topbar-inner { max-width: 1080px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.wordmark { font-weight: 700; font-size: 15px; }
.topnav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; }
.topnav a { color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.topnav a:hover { color: var(--ink); }
.theme-toggle { background: none; border: 1px solid var(--grid); border-radius: 8px; color: var(--ink-2); width: 32px; height: 32px; cursor: pointer; font-size: 15px; }
.theme-toggle:hover { color: var(--ink); }

/* ================= hero ================= */
.hero { max-width: 1080px; margin: 0 auto; padding: 72px 20px 56px; }
.kicker { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 14px; }
.hero h1 { font-size: clamp(30px, 5vw, 52px); max-width: 780px; }
.lede { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); max-width: 720px; }

.spectrum { margin-top: 44px; }
.spectrum-track { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 2px; border-radius: 14px; overflow: hidden; border: 1px solid var(--grid); }
.spectrum-zone { padding: 20px 18px 22px; background: var(--surface-1); }
.zone-title { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.zone-desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.zone-left .zone-title::before { content: "🫥 "; }
.zone-right .zone-title::before { content: "🌀 "; }
.zone-mid { background: var(--accent-wash); border-top: 3px solid var(--series-1); }
.zone-mid .zone-title::before { content: "🎯 "; }

/* ================= sections ================= */
.section { max-width: 1080px; margin: 0 auto; padding: 64px 20px; }
.section-alt { position: relative; }
.section-alt::before { content: ""; position: absolute; inset: 0 -100vw; background: var(--surface-1); z-index: -1; }
.section h2 { font-size: clamp(24px, 3.6vw, 36px); }
.section-lede { margin-top: 12px; color: var(--ink-2); max-width: 720px; font-size: 15.5px; }
.sub-h { margin-top: 40px; margin-bottom: 16px; font-size: 19px; }

/* pipeline */
.pipeline { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 28px; }
.pipe-stage { flex: 1 1 150px; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.pipe-role { font-weight: 700; font-size: 13.5px; }
.pipe-desc { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.pipe-arrow { align-self: center; color: var(--muted); font-size: 16px; }
.pipe-reviewers { border-color: var(--series-1); border-width: 1.5px; flex-basis: 220px; }

/* severity cards */
.sev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sev-card { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; padding: 16px; font-size: 14px; color: var(--ink-2); }
.sev-card p { line-height: 1.55; }
.sev-card strong { color: var(--ink); }
.sev-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sev-icon { font-size: 15px; }
.sev-name { font-weight: 800; font-size: 14px; color: var(--ink); letter-spacing: 0.03em; }
.sev-tag { margin-left: auto; font-size: 11px; color: var(--muted); border: 1px solid var(--grid); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.sev-major   { border-top: 3px solid var(--status-critical); }
.sev-moderate{ border-top: 3px solid var(--status-warning); }
.sev-minor   { border-top: 3px solid var(--baseline); }

/* callouts */
.rule-callout { margin-top: 28px; display: flex; gap: 14px; align-items: baseline; background: var(--accent-wash); border: 1px solid var(--grid); border-left: 3px solid var(--series-1); border-radius: 12px; padding: 16px 18px; }
.rule-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--series-1); white-space: nowrap; }
.rule-text { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.rule-text strong { color: var(--ink); }
.callout-bonus { border-left-color: var(--status-good); }
.callout-bonus .rule-label { color: var(--status-good); }

/* right-grid */
.right-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.right-card { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; padding: 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.right-card strong { color: var(--ink); display: block; margin-bottom: 4px; }

/* failure modes */
.fail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 30px; }
.fail-card { background: var(--plane); border: 1px solid var(--grid); border-radius: 12px; padding: 18px; }
.fail-num { font-size: 12px; font-weight: 700; color: var(--status-critical); letter-spacing: 0.06em; }
.fail-card h3 { font-size: 17px; margin: 8px 0 8px; }
.fail-card p { font-size: 13.5px; color: var(--ink-2); }

/* upgrades */
.upgrade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 30px; }
.upgrade-card { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; padding: 18px; }
.upgrade-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.upgrade-head h3 { font-size: 16.5px; }
.upgrade-chip, .toggle-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; border-radius: 7px; font-size: 11.5px; font-weight: 800; color: #fff; padding: 0 6px; }
.chip-1 { background: var(--series-1); }
.chip-2 { background: var(--series-2); }
.chip-3 { background: #4a3aa7; }
.chip-4 { background: #1baf7a; }
:root[data-theme="dark"] .chip-3 { background: #9085e9; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .chip-3 { background: #9085e9; } }
.upgrade-rule { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.upgrade-why { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.upgrade-why strong { color: var(--ink); }

/* ================= lab ================= */
.lab { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-top: 32px; align-items: start; }
@media (max-width: 860px) { .lab { grid-template-columns: 1fr; } }

.lab-controls { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 70px; }
@media (max-width: 860px) { .lab-controls { position: static; } }
.control-group { background: var(--plane); border: 1px solid var(--grid); border-radius: 12px; padding: 16px; }
.control-group h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 12px; }

.slider-row { display: block; margin-bottom: 14px; }
.slider-row:last-child { margin-bottom: 0; }
.slider-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.slider-label em { display: block; font-weight: 400; font-style: normal; font-size: 11.5px; color: var(--muted); }
.slider-row input[type="range"] { width: calc(100% - 46px); vertical-align: middle; accent-color: var(--series-1); }
.slider-row output { display: inline-block; width: 40px; text-align: right; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 7px 0; cursor: pointer; }
.toggle-row input { accent-color: var(--series-1); width: 16px; height: 16px; cursor: pointer; }

.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.preset-btn { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.preset-btn:hover { border-color: var(--series-1); }
.reseed-btn { width: 100%; background: none; border: 1px dashed var(--baseline); border-radius: 8px; padding: 7px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.reseed-btn:hover { color: var(--ink); border-color: var(--muted); }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.tile { background: var(--plane); border: 1px solid var(--grid); border-radius: 12px; padding: 14px; }
.tile-label { font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.tile-value { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; }
.tile-delta { font-size: 12px; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.delta-good { color: var(--status-good); }
:root:not([data-theme="dark"]) .delta-good { color: #006300; }
.delta-bad { color: var(--status-critical); }
.delta-flat { color: var(--muted); }

/* chart */
.chart-card, .trace-card { background: var(--plane); border: 1px solid var(--grid); border-radius: 12px; padding: 16px; margin-top: 12px; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.chart-head h4 { font-size: 14.5px; }
.chart-sub { font-weight: 400; font-size: 12px; color: var(--muted); }
.legend { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.legend-key { width: 16px; height: 2px; border-radius: 2px; display: inline-block; position: relative; }
.legend-key::after { content: ""; position: absolute; right: -2px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: inherit; box-shadow: 0 0 0 2px var(--plane); }
.key-baseline { background: var(--series-1); }
.key-config { background: var(--series-2); }
.chart-wrap { position: relative; }
#convChart { width: 100%; height: 260px; display: block; }
.chart-tip { position: absolute; pointer-events: none; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--ink-2); box-shadow: 0 4px 14px rgba(0,0,0,0.08); white-space: nowrap; z-index: 5; }
.chart-tip .tip-round { font-weight: 700; color: var(--ink); margin-bottom: 3px; display: block; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px; }
.tip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* trace */
.trace { list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.trace li { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; padding: 8px 10px; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 8px; }
.trace .t-round { font-weight: 700; color: var(--ink); }
.trace .t-ev { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.trace .t-end { border-left: 3px solid var(--status-good); }
.trace .t-esc { border-left: 3px solid var(--status-warning); }
.trace .t-stuck { border-left: 3px solid var(--status-critical); }

/* table view */
.table-view { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.table-view summary { cursor: pointer; padding: 6px 0; }
.table-view table { border-collapse: collapse; margin-top: 8px; width: 100%; max-width: 420px; }
.table-view th, .table-view td { text-align: right; padding: 5px 12px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
.table-view th:first-child, .table-view td:first-child { text-align: left; }
.table-view th { color: var(--muted); font-weight: 600; font-size: 12px; }

/* footer */
.footer { max-width: 1080px; margin: 0 auto; padding: 48px 20px 64px; border-top: 1px solid var(--grid); font-size: 13px; color: var(--ink-2); }
.footer .sig { margin-top: 12px; color: var(--muted); }
.footer code { font-size: 12px; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 5px; padding: 1px 6px; }

/* ================= semantic contracts ================= */
.contract-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 30px; }
.contract-card { background: var(--plane); border: 1px solid var(--grid); border-radius: 12px; padding: 18px; }
.contract-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.contract-head h3 { font-size: 16px; }
.copy-btn { margin-left: auto; background: var(--surface-1); border: 1px solid var(--grid); border-radius: 7px; padding: 5px 12px; font-size: 12px; color: var(--ink); cursor: pointer; }
.copy-btn:hover { border-color: var(--series-1); }
.copy-btn.copied { color: var(--status-good); border-color: var(--status-good); }
.contract { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6; color: var(--ink); background: var(--surface-1); border: 1px solid var(--grid); border-left: 3px solid var(--baseline); border-radius: 8px; padding: 12px 14px; }
.contract-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.contract-note code { font-size: 11.5px; }
.schema { font-size: 11.5px; margin-top: 8px; }

/* ================= caveat ================= */
.caveat { margin-top: 24px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); background: var(--surface-1); border: 1px dashed var(--baseline); border-radius: 12px; padding: 14px 16px; }
.caveat strong { color: var(--ink); }

/* ================= empirical ================= */
.emp { display: grid; grid-template-columns: 340px 1fr; gap: 20px; margin-top: 32px; align-items: start; }
@media (max-width: 860px) { .emp { grid-template-columns: 1fr; } }
.emp-input textarea { width: 100%; height: 220px; resize: vertical; background: var(--plane); color: var(--ink); border: 1px solid var(--grid); border-radius: 12px; padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; }
.emp-input textarea:focus { outline: 2px solid var(--series-1); outline-offset: 1px; }
.emp-actions { display: flex; gap: 8px; margin-top: 10px; }
.emp-analyze { border-color: var(--series-1); color: var(--series-1); font-weight: 600; }
.emp-error { font-size: 13px; color: var(--status-critical); margin-bottom: 10px; }
#empChart { width: 100%; height: 220px; display: block; }
.flag-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--status-warning); display: inline-block; }
.ledger { border-collapse: collapse; width: 100%; font-size: 13px; color: var(--ink-2); }
.ledger th, .ledger td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
.ledger th:first-child, .ledger td:first-child, .ledger th:last-child, .ledger td:last-child { text-align: left; }
.ledger th { color: var(--muted); font-weight: 600; font-size: 12px; }
.ledger .hot { color: var(--status-critical); font-weight: 600; }
.ledger .ok { color: var(--status-good); }
.emp .rule-callout { margin-top: 12px; }

/* ================= validation run ================= */
.run-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 30px; }
.round-card { background: var(--surface-1); border: 1px solid var(--grid); border-radius: 12px; padding: 16px; }
.round-red { border-top: 3px solid var(--status-critical); }
.round-mid { border-top: 3px solid var(--baseline); }
.round-green { border-top: 3px solid var(--status-good); }
.round-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.round-num { font-weight: 800; font-size: 15px; }
.round-count { margin-left: auto; font-size: 11.5px; color: var(--muted); border: 1px solid var(--grid); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.count-red { color: var(--status-critical); border-color: var(--status-critical); }
.count-green { color: var(--status-good); border-color: var(--status-good); }
.gate-lines { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.gate-lines li { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.gate-lines strong { color: var(--ink); }
.gate-chip { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1px 7px; color: #fff; vertical-align: 1px; }
.gc-machine { background: var(--muted); }
.gc-a { background: var(--series-1); }
.gc-b { background: #4a3aa7; }
.gc-c { background: #1baf7a; }
.gc-ref { background: var(--series-2); }
:root[data-theme="dark"] .gc-b { background: #9085e9; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .gc-b { background: #9085e9; } }
.punchline { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 28px; }
@media (max-width: 700px) { .punchline { grid-template-columns: 1fr; } .punch-arrow { transform: rotate(90deg); justify-self: center; } }
.punch-col { background: var(--plane); border: 1px solid var(--grid); border-radius: 12px; padding: 16px; }
.punch-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
.punch-col p { font-size: 14px; color: var(--ink-2); font-style: italic; }
.punch-col strong { color: var(--ink); }
.punch-arrow { font-size: 22px; color: var(--muted); }
.punch-note { margin-top: 12px; font-size: 13px; color: var(--muted); max-width: 720px; }
.run-cta { margin-top: 28px; padding: 10px 18px; font-size: 13.5px; }