:root { color-scheme: light dark; --ink: #1d1d1f; --paper: #ffffff; --line: #c7c7cc; --arm-0: #8e8e93; --arm-1: #3a6ea5; --arm-2: #a5673a; --arm-3: #5a8a3a; }
@media (prefers-color-scheme: dark) { :root { --ink: #f2f2f7; --paper: #1c1c1e; --line: #48484a; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border-top: 1px solid var(--line); padding: 0.5rem; text-align: left; vertical-align: top; }
td { overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.headline { font-size: 1.15rem; }
.value { margin-bottom: 0.25rem; }
.metric, .scenario { font-weight: 600; }
.scroll { overflow-x: auto; }
.n, .range, .certainty, .delta, .holdout { font-size: 0.85rem; }
.badge, .holdout { border: 1px solid var(--line); border-radius: 0.25rem; padding: 0 0.25rem; }
.outcome { font-weight: 600; }
.chart { width: 100%; height: auto; }
.chart text { fill: var(--ink); font-size: 11px; }
.axis, .whisker { stroke: var(--ink); stroke-width: 1; }
.bar { stroke: var(--ink); stroke-width: 1; }
.hatch { stroke: var(--paper); stroke-width: 2; }
.swatch { stroke: var(--ink); stroke-width: 1; }
.arm-0 { fill: var(--arm-0); }
.arm-1 { fill: var(--arm-1); }
.arm-2 { fill: var(--arm-2); }
.arm-3 { fill: var(--arm-3); }