*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-m); line-height: var(--leading-body);
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--weight-medium); line-height: var(--leading-tight); margin: 0 0 var(--space-s); }
h1 { font-size: var(--text-4xl); max-width: 18ch; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); margin-top: var(--space-m); }
p { margin: 0 0 var(--space-s); max-width: var(--measure); }
a { color: var(--color-primary); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-s); }
.skip { position: absolute; left: var(--space-s); top: calc(-1 * var(--space-xl)); background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-s); z-index: 10; }
.skip:focus { top: var(--space-s); }

.site-header { border-bottom: var(--border-width) solid var(--color-border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--tap) + var(--space-s)); }
.brand { display: flex; align-items: center; gap: var(--space-2xs); color: var(--color-text); text-decoration: none; min-height: var(--tap); }
.brand-name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-medium); }
.brand-sub { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: .04em; margin-left: var(--space-3xs); }
.theme-toggle {
  width: var(--tap); height: var(--tap); display: inline-grid; place-items: center;
  background: transparent; color: var(--color-text); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m); cursor: pointer; transition: background var(--transition);
}
.theme-toggle:hover { background: var(--color-surface); }
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

main > section { padding-block: var(--space-l); }
.intro { padding-top: var(--space-xl); }
.eyebrow { font-size: var(--text-s); color: var(--color-accent); font-weight: var(--weight-medium); margin-bottom: var(--space-2xs); }
.lede { font-size: var(--text-l); color: var(--color-text-muted); }

.panel { background: var(--color-surface); border-radius: var(--radius-l); padding: var(--space-m) var(--space-s); }
#model.panel { padding-block: var(--space-m); }
.controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-s); align-items: center; margin-bottom: var(--space-m); }
.controls label { grid-column: 1 / -1; font-size: var(--text-s); color: var(--color-text-muted); margin-top: var(--space-2xs); }
.controls > span:empty { display: none; }
.controls select {
  grid-column: 1 / -1; justify-self: start; min-height: var(--tap); min-width: 10rem;
  font: inherit; color: var(--color-text); background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-m); padding-inline: var(--space-xs);
}
.controls input[type="range"] { width: 100%; min-height: var(--tap); accent-color: var(--color-primary); margin: 0; }
.controls output { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin-bottom: var(--space-m); }
.stat { background: var(--color-surface-raised); border-radius: var(--radius-m); padding: var(--space-s); display: flex; flex-direction: column; gap: var(--space-3xs); }
.stat-label { font-size: var(--text-s); color: var(--color-text-muted); }
.stat-value { font-family: var(--font-heading); font-size: var(--text-2xl); font-variant-numeric: tabular-nums lining-nums; }
.stat-note { font-size: var(--text-xs); color: var(--color-text-muted); }

.bar-label { font-size: var(--text-s); color: var(--color-text-muted); margin-bottom: var(--space-2xs); }
.bar { display: flex; gap: calc(var(--space-3xs) / 2); height: var(--space-s); border-radius: var(--radius-s); overflow: hidden; margin-bottom: var(--space-2xs); }
.bar-seg { display: block; transition: width var(--transition); }
.seg-withdrawn { background: var(--flow-withdrawn); width: 60%; }
.seg-ggr { background: var(--flow-ggr); width: 40%; }

.key { list-style: none; padding: 0; margin: 0 0 var(--space-xs); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); font-size: var(--text-s); color: var(--color-text-muted); }
.key li { display: flex; align-items: center; gap: var(--space-2xs); }
.key strong { color: var(--color-text); font-weight: var(--weight-medium); }
.sw { display: inline-block; width: var(--space-xs); height: var(--space-xs); border-radius: calc(var(--radius-s) / 2); flex: none; }
.sw-withdrawn { background: var(--flow-withdrawn); }
.sw-ggr { background: var(--flow-ggr); }
.sw-ngr { background: var(--flow-ngr); }
.sw-txn { background: var(--flow-txn); }
.sw-fix { background: var(--flow-fix); }
.sw-onward { background: var(--flow-onward); }
.warn { color: var(--color-warning); font-size: var(--text-s); min-height: 1.5em; margin: 0; }

.filters { margin-block: var(--space-s); }
.filters-label { font-size: var(--text-s); color: var(--color-text-muted); margin-bottom: var(--space-2xs); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  min-height: var(--tap); padding-inline: var(--space-xs); font: inherit; font-size: var(--text-s);
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  color: var(--color-text-muted); background: transparent; border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-m); cursor: pointer; transition: background var(--transition), color var(--transition);
}
.chip::before { content: ""; width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-s); border: var(--border-width) solid currentColor; flex: none; }
.chip[aria-pressed="true"] { color: var(--color-text); background: var(--color-surface); border-style: solid; border-color: var(--color-primary); }
.chip[aria-pressed="true"]::before { background: var(--color-primary); border-color: var(--color-primary); }
.chip-val { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-s); margin-top: var(--space-2xs); }
.btn-link { min-height: var(--tap); padding: 0; font: inherit; font-size: var(--text-s); color: var(--color-primary); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.filter-status { font-size: var(--text-s); color: var(--color-text-muted); }
.chart-empty { padding: var(--space-l) var(--space-s); color: var(--color-text-muted); text-align: center; margin: 0 auto; }
.chart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); margin-block: var(--space-s) var(--space-xs); }
.btn {
  min-height: var(--tap); padding-inline: var(--space-s); font: inherit; font-size: var(--text-s);
  color: var(--color-text); background: transparent; border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m); cursor: pointer; transition: background var(--transition);
}
.btn:hover { background: var(--color-surface); }
.swipe-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-xs); background: var(--color-surface-raised); }
#sk { display: block; min-width: var(--chart-min-width); }
#sk text { font-family: var(--font-body); font-size: var(--text-2xs); fill: var(--color-text); }
#sk .val { fill: var(--color-text-muted); }
#sk .node { cursor: default; }
#sk .node.is-cat { cursor: pointer; }
#sk .node:focus { outline: none; }
#sk .node:focus-visible rect { stroke: var(--color-focus); stroke-width: 2px; }
#sk path { transition: stroke-opacity var(--transition); }

.details { margin-top: var(--space-xs); padding: var(--space-s); border-radius: var(--radius-m); background: var(--color-surface); min-height: 6.5rem; font-size: var(--text-s); }
.details p { margin: 0 0 var(--space-3xs); }
.details-empty { color: var(--color-text-muted); }
.details .d-title { font-weight: var(--weight-medium); font-size: var(--text-m); }
.details .d-basis { color: var(--color-primary); }
.details .d-desc { color: var(--color-text-muted); }

.prose p { font-size: var(--text-m); }
.bases { display: grid; gap: var(--space-s); margin: 0; }
.bases div { padding: var(--space-s); background: var(--color-surface); border-radius: var(--radius-m); }
.bases dt { display: flex; align-items: center; gap: var(--space-2xs); font-weight: var(--weight-medium); margin-bottom: var(--space-3xs); }
.bases dd { margin: 0; color: var(--color-text-muted); font-size: var(--text-s); }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-s); }
th, td { text-align: left; padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0; border-bottom: var(--border-width) solid var(--color-border); vertical-align: top; }
th { font-weight: var(--weight-medium); color: var(--color-text-muted); }

.site-footer { border-top: var(--border-width) solid var(--color-border); margin-top: var(--space-l); padding-block: var(--space-m); font-size: var(--text-s); color: var(--color-text-muted); }
.footer-inner p { margin: 0 0 var(--space-3xs); }

@media (min-width: 48rem) {
  .wrap { padding-inline: var(--space-m); }
  .panel { padding: var(--space-l); }
  .controls { grid-template-columns: 12rem minmax(0, 1fr) 3.5rem; gap: var(--space-xs) var(--space-s); }
  .controls label { grid-column: auto; margin-top: 0; }
  .controls select { grid-column: 2 / -1; }
  .controls > span:empty { display: none; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .swipe-hint { display: none; }
  .bases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { display: flex; justify-content: space-between; gap: var(--space-m); }
}