:root {
  color-scheme: light;
  --surface-0: #f4f3ef;
  --surface-1: #fcfcfb;
  --surface-2: #ecebe6;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --border: #d6d5cf;
  --grid: #e4e3df;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #b37a00;
  --band-outer: rgba(42, 120, 214, 0.14);
  --band-inner: rgba(42, 120, 214, 0.28);
  --warning-bg: #fff4e0;
  --warning-ink: #6b4500;
  --focus: #1c5cab;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #121211;
    --surface-1: #1a1a19;
    --surface-2: #252523;
    --text-primary: #f0efec;
    --text-secondary: #c3c2b7;
    --border: #3a3a37;
    --grid: #2e2e2b;
    --series-1: #5598e7;
    --series-2: #f07f50;
    --series-3: #2fc48f;
    --series-4: #e0a62a;
    --band-outer: rgba(85, 152, 231, 0.16);
    --band-inner: rgba(85, 152, 231, 0.32);
    --warning-bg: #3a2c10;
    --warning-ink: #f5d9a4;
    --focus: #86b6ef;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #121211;
  --surface-1: #1a1a19;
  --surface-2: #252523;
  --text-primary: #f0efec;
  --text-secondary: #c3c2b7;
  --border: #3a3a37;
  --grid: #2e2e2b;
  --series-1: #5598e7;
  --series-2: #f07f50;
  --series-3: #2fc48f;
  --series-4: #e0a62a;
  --band-outer: rgba(85, 152, 231, 0.16);
  --band-inner: rgba(85, 152, 231, 0.32);
  --warning-bg: #3a2c10;
  --warning-ink: #f5d9a4;
  --focus: #86b6ef;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface-1); padding: 8px; z-index: 10; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

header.site, footer.site { background: var(--surface-1); border-bottom: 1px solid var(--border); }
footer.site { border-top: 1px solid var(--border); border-bottom: 0; margin-top: 32px; padding: 8px 0; font-size: 14px; color: var(--text-secondary); }
h1 { margin: 16px 0 4px; font-size: 28px; }
h2 { font-size: 20px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 24px 0 8px; }
.muted { color: var(--text-secondary); font-weight: 400; }
.lede { max-width: 70ch; margin: 0 0 8px; }
.disclaimer { display: inline-block; margin: 0 0 16px; padding: 6px 10px; background: var(--surface-2); border-radius: 6px; font-size: 14px; }

.layout { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 24px; padding-top: 24px; align-items: start; }
.sources { grid-column: 1 / -1; }
.panel, .results { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px; min-width: 0; }

fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field.inline label { font-weight: 600; }
label { font-size: 14px; }
input[type="number"], select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-0); color: var(--text-primary); width: 100%; min-height: 44px;
}
input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--series-1); }
.radio { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.hint { font-size: 13px; color: var(--text-secondary); margin: 4px 0 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 14px; padding: 6px 12px; min-height: 36px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-0); color: var(--text-primary); cursor: pointer;
}
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--series-1); border-color: var(--series-1); color: #fff; }

.status { color: var(--text-secondary); font-size: 14px; margin: 0 0 8px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.card { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--surface-0); border-top: 4px solid var(--accent, var(--series-1)); min-width: 0; }
.card.reference { opacity: 0.85; border-style: dashed; border-top-style: solid; }
.card .label { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.card .value { font-size: 32px; font-weight: 700; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.cards.small .value { font-size: 22px; }
.card .sub { font-size: 13px; color: var(--text-secondary); margin: 6px 0 0; }
.spread { font-size: 15px; margin: 12px 0 4px; max-width: 75ch; }
.engine-note { font-size: 13px; color: var(--text-secondary); margin: 0 0 8px; max-width: 75ch; }

.switch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; }
.chart { margin: 16px 0 0; }
.chart figcaption { font-size: 15px; margin-bottom: 6px; }
.svg-host { width: 100%; }
.svg-host svg { display: block; width: 100%; height: auto; overflow: visible; }
.explain { font-size: 14px; color: var(--text-secondary); max-width: 75ch; }
details { font-size: 14px; margin-top: 4px; }
summary { cursor: pointer; min-height: 32px; }

table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); }
th:first-child, td:first-child { text-align: left; }
.table-scroll { overflow-x: auto; }
table.text { min-width: 560px; }
table.text th, table.text td { text-align: left; vertical-align: top; }

.warning { background: var(--warning-bg); color: var(--warning-ink); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 8px; }
.tooltip {
  position: fixed; pointer-events: none; z-index: 20; background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  font-variant-numeric: tabular-nums; max-width: 260px;
}
.axis text { fill: var(--text-secondary); font-size: 12px; }
.axis line, .axis path { stroke: var(--border); }
.gridline { stroke: var(--grid); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .card .value { font-size: 26px; }
  h1 { font-size: 24px; }
}