
:root {
  --ink:#102a43; --muted:#64748b; --line:#e2e8f0; --bg:#f7f9fc;
  --panel:#fff; --teal:#0891b2; --teal-dark:#0f5f70; --teal-soft:#e8f6f8;
  --blue:#2563eb; --amber:#b45309; --amber-soft:#fff7e8; --red:#b42318;
  --shadow:0 10px 28px rgba(15, 47, 68, 0.07);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; line-height:1.5; }
a { color:var(--teal-dark); text-underline-offset:3px; }
a:hover { color:var(--teal); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:3px solid rgba(31,111,102,.30); outline-offset:3px; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; border-radius:0 0 8px 8px; }
.skip-link:focus { top:0; }
.wrap { width:min(1180px, calc(100% - 32px)); margin-inline:auto; }
header { background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); }
.topbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.65fr); gap:24px; align-items:center; padding:24px 0 16px; }
.eyebrow { margin:0 0 4px; color:var(--teal); font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.06em; }
h1 { margin:0; font-size:clamp(30px,4vw,48px); line-height:1.05; letter-spacing:-.025em; }
h2 { margin:0 0 12px; font-size:clamp(22px,2.5vw,28px); line-height:1.2; letter-spacing:-.015em; }
h3 { margin:18px 0 8px; font-size:18px; }
p { margin:0 0 12px; color:var(--muted); }
li { margin-bottom:6px; }
.subtitle { margin-top:8px; max-width:760px; font-size:16px; }
.badges { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.badges span, .pill, .status-chip { display:inline-flex; min-height:28px; align-items:center; border:1px solid var(--line); border-radius:999px; background:#f5f8f7; padding:4px 10px; font-size:12px; color:var(--ink); }
.nav { display:flex; flex-wrap:wrap; gap:6px; padding:0 0 15px; }
.nav a { color:var(--ink); text-decoration:none; border:1px solid transparent; border-radius:7px; padding:7px 10px; font-weight:700; font-size:14px; }
.nav a:hover { background:#f1f6f5; }
.nav a.active { color:var(--teal-dark); border-color:#a9cbc5; background:var(--teal-soft); }
main { padding:30px 0 52px; }
section + section { margin-top:34px; }
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:28px; align-items:start; }
.hero-copy { padding:8px 0; }
.hero-copy h2 { font-size:clamp(28px,4vw,46px); max-width:780px; }
.lede { font-size:18px; max-width:760px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.button { display:inline-flex; align-items:center; min-height:42px; padding:9px 14px; border-radius:7px; background:var(--teal); color:#fff; text-decoration:none; font-weight:750; }
.button:hover { background:var(--teal-dark); color:#fff; }
.button.secondary { background:#fff; color:var(--teal-dark); border:1px solid #a9cbc5; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.card { border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:17px; min-height:120px; box-shadow:0 1px 0 rgba(20,45,43,.02); overflow-wrap:anywhere; }
.grid > a.card { color:inherit; text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.grid > a.card:hover { color:inherit; border-color:#9ec6bf; transform:translateY(-1px); }
.card.emphasis { border-color:#a9cbc5; box-shadow:var(--shadow); }
.card.audit-contrast { border-color:#d4a34a; background:linear-gradient(145deg,#fffdf8,#fff6df); box-shadow:inset 0 3px 0 #c98210; }
.card.audit-contrast .metric { color:#8c4d00; }
.metric { margin:4px 0 6px; font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.03em; }
.label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.045em; font-weight:700; }
.notice { border-left:4px solid var(--amber); background:var(--amber-soft); padding:13px 15px; margin:16px 0; border-radius:0 8px 8px 0; color:#4a3b22; }
.notice p:last-child { margin-bottom:0; }
.pass { color:#246b4f; font-weight:750; }
.fail { color:var(--red); font-weight:750; }
.search-panel { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px; box-shadow:var(--shadow); }
.field-label { display:block; margin-bottom:7px; font-weight:750; color:var(--ink); }
.searchbox, .filter-input, select { width:100%; min-height:46px; border:1px solid #b9c6ca; border-radius:7px; background:#fff; padding:10px 12px; font:inherit; color:var(--ink); }
.search-hint, .search-status { margin:8px 0 0; font-size:13px; color:var(--muted); }
.search-results { margin-top:10px; }
.result { display:block; color:inherit; text-decoration:none; border:1px solid var(--line); border-radius:8px; background:#fff; padding:12px; margin:8px 0; }
.result:hover { border-color:#9ec6bf; background:#f8fcfb; }
.result strong { display:block; font-size:17px; }
.result span { display:block; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.result small { color:var(--teal-dark); font-weight:700; }
.result .result-priority { display:inline-flex; width:max-content; margin-top:7px; border:1px solid var(--line); border-radius:999px; background:#f4f8f7; padding:2px 8px; color:var(--ink); font-size:11px; font-weight:750; }
.quick-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.quick-link { display:inline-flex; align-items:center; border:1px solid #a9cbc5; border-radius:999px; padding:5px 10px; background:#f8fcfb; text-decoration:none; font-size:13px; font-weight:750; }
.demo-card { border:1px solid #9fc8c1; border-radius:12px; background:linear-gradient(145deg,#fff,#edf8f5); padding:20px; box-shadow:var(--shadow); }
.demo-card h3 { margin-top:4px; font-size:24px; }
.demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:14px 0; }
.demo-field { border:1px solid rgba(31,111,102,.16); border-radius:8px; background:rgba(255,255,255,.82); padding:9px; }
.demo-field span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.demo-field strong { display:block; margin-top:4px; font-size:14px; }
.evidence-level { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:9px; padding:11px 12px; margin:12px 0 16px; background:#f8faf9; }
.evidence-level::before { content:""; flex:0 0 12px; width:12px; height:12px; margin-top:5px; border-radius:50%; background:#7c8990; box-shadow:0 0 0 4px rgba(124,137,144,.12); }
.evidence-level.direct::before { background:#25845f; box-shadow:0 0 0 4px rgba(37,132,95,.14); }
.evidence-level.context::before { background:#d18a16; box-shadow:0 0 0 4px rgba(209,138,22,.15); }
.evidence-level.unsupported::before { background:#b74c4c; box-shadow:0 0 0 4px rgba(183,76,76,.14); }
.evidence-level strong { display:block; }
.evidence-level span { display:block; color:var(--muted); font-size:13px; }
.table-wrap { width:100%; max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:9px; background:#fff; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; min-width:720px; border-collapse:collapse; background:#fff; font-size:13px; }
.data-table.compact { min-width:940px; }
.data-table caption { text-align:left; padding:10px 12px; font-weight:750; color:var(--ink); background:#f7faf9; border-bottom:1px solid var(--line); }
.data-table th, .data-table td { border-bottom:1px solid var(--line); padding:9px 10px; vertical-align:top; text-align:left; overflow-wrap:anywhere; }
.data-table th { background:#f2f7f6; color:#34424a; white-space:nowrap; }
.data-table thead th { position:sticky; top:0; z-index:2; box-shadow:0 1px 0 var(--line); }
.data-table tbody tr:hover { background:#fbfdfc; }
.sticky-evidence-table .data-table th:first-child, .sticky-evidence-table .data-table td:first-child { position:sticky; left:0; z-index:1; background:inherit; box-shadow:1px 0 0 var(--line); }
.sticky-evidence-table .data-table thead th:first-child { z-index:3; background:#f2f7f6; }
.status-list { display:grid; gap:8px; padding:0; list-style:none; }
.status-list li { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:8px; background:#fff; padding:10px 12px; }
.status-list .status-chip { flex:0 0 auto; font-weight:800; }
.status-chip.pending { border-color:#d8b46c; background:#fff7e8; color:#7d520c; }
.status-chip.pass { border-color:#9fc8b5; background:#edf8f2; color:#246b4f; }
.sort-button { appearance:none; border:0; background:transparent; color:inherit; font:inherit; font-weight:inherit; padding:0; cursor:pointer; text-align:left; }
.sort-button:hover { color:var(--teal-dark); }
.priority-chip { display:inline-flex; border:1px solid #a9cbc5; border-radius:999px; background:var(--teal-soft); padding:3px 8px; font-size:11px; font-weight:750; white-space:nowrap; }
.candidate-warning { background:#fff8e8; box-shadow:inset 4px 0 0 #c98210; }
.candidate-warning:hover { background:#fff3d5!important; }
.warning-icon { display:inline-block; margin-right:5px; color:#a95f00; font-size:16px; }
.low-expression { color:#7d4600; background:#fff4dc; }
.cell-note { display:block; margin-top:4px; color:#765c32; font-size:11px; line-height:1.35; }
.fusion-not-assessed { color:#7a858b; font-style:italic; background:#f7f8f8; }
.fusion-assessed { color:var(--ink); font-style:normal; }
.fusion-legend { display:flex; flex-wrap:wrap; gap:12px; margin:10px 0 14px; font-size:13px; color:var(--muted); }
.fusion-legend span { display:inline-flex; align-items:center; gap:6px; }
.legend-swatch { width:13px; height:13px; border:1px solid var(--line); border-radius:3px; background:#fff; }
.legend-swatch.unassessed { background:#ecefef; }
.ablation-key { background:#fff4dc; box-shadow:inset 4px 0 0 #c98210; }
.data-section { margin:12px 0; }
.data-section > summary { font-size:17px; background:#f7faf9; }
.gate-matrix { min-width:760px; }
.gate-cell { font-weight:800; white-space:nowrap; }
.gate-cell.pass { background:#eaf7f0; }
.gate-cell.fail { background:#fff0f0; }
.endpoint-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0 18px; }
.endpoint-card { border:1px solid var(--line); border-radius:9px; background:#f8faf9; padding:13px; }
.endpoint-card strong { display:block; margin-bottom:5px; color:var(--ink); }
.endpoint-card span { display:block; color:var(--muted); font-size:13px; }
.depmap-callout { border:1px solid #d8b46c; border-radius:10px; background:#fff8e8; padding:14px 16px; margin:16px 0; }
.depmap-callout h3 { margin:0 0 7px; }
.depmap-callout p:last-child { margin-bottom:0; }
.model-selector { border:1px solid var(--line); border-radius:10px; background:#fff; padding:14px 16px; margin:16px 0; }
.model-selector legend { font-weight:800; padding:0 6px; }
.model-options { display:flex; flex-wrap:wrap; gap:8px 16px; }
.model-options label { display:inline-flex; align-items:center; gap:6px; font-size:13px; }
.ci-table { min-width:900px; }
.ci-value { min-width:280px; }
.ci-value > span { display:block; font-size:12px; color:var(--muted); }
.ci-plot { position:relative; height:24px; margin-top:5px; border-radius:4px; background:linear-gradient(to right,#f7f9f8 0 49.5%,#edf1f0 49.5% 50.5%,#f7f9f8 50.5%); }
.ci-zero { position:absolute; left:50%; top:2px; bottom:2px; border-left:1px dashed #6d777d; }
.ci-range { position:absolute; top:11px; height:3px; background:var(--blue); border-radius:4px; }
.ci-dot { position:absolute; top:7px; width:10px; height:10px; margin-left:-5px; border:2px solid #fff; border-radius:50%; background:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.key-table { min-width:0; }
.key-table th { width:34%; white-space:normal; }
.two { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.58fr); gap:22px; align-items:start; }
.figure { display:block; width:100%; border:1px solid var(--line); border-radius:9px; background:#fff; padding:10px; box-shadow:var(--shadow); }
.figure-note { margin-top:8px; font-size:12px; }
.key-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin:14px 0; }
.key-item { background:#f6f9f8; border:1px solid var(--line); border-radius:8px; padding:11px; overflow-wrap:anywhere; }
.key-item dt { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.key-item dd { margin:4px 0 0; font-weight:700; }
details { margin:14px 0; border:1px solid var(--line); border-radius:8px; background:#fff; }
summary { cursor:pointer; padding:12px 14px; font-weight:750; }
details > .detail-body { padding:0 14px 14px; }
.filters { display:grid; grid-template-columns:minmax(240px,1fr) minmax(200px,.35fr); gap:10px; margin:12px 0; }
.recommended { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.download-card { display:flex; flex-direction:column; }
.download-card .button { margin-top:auto; align-self:flex-start; }
.code-block { position:relative; }
code { background:#edf2f1; padding:2px 5px; border-radius:4px; overflow-wrap:anywhere; }
pre { max-width:100%; overflow:auto; background:#172026; color:#f7fbfb; padding:15px; border-radius:8px; }
.footer { border-top:1px solid var(--line); padding:20px 0 34px; }
.footer p { font-size:13px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:900px) {
  .topbar, .hero, .two { grid-template-columns:1fr; }
  .endpoint-grid { grid-template-columns:1fr; }
  .badges { justify-content:flex-start; }
  .hero .figure { max-width:680px; }
}
@media (max-width:620px) {
  .wrap { width:min(100% - 22px,1180px); }
  .topbar { padding-top:18px; }
  .nav { flex-wrap:nowrap; overflow-x:auto; padding-bottom:12px; scrollbar-width:thin; }
  .nav a { white-space:nowrap; }
  main { padding-top:22px; }
  .grid { grid-template-columns:1fr; }
  .filters { grid-template-columns:1fr; }
  .data-table { min-width:680px; }
  .key-table { min-width:0; }
  .actions .button { width:100%; justify-content:center; }
  .demo-grid { grid-template-columns:1fr; }
}
