:root {
  --bg: #f6f7f5; --surface: #ffffff; --ink: #1b2a2f; --muted: #4f5f64;
  --line: #d5dbd8; --accent: #0072b2;            /* Okabe-Ito blue */
  --warn: #d55e00; --ok: #009e73; --focus: #e69f00;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #11181b; --surface: #1a2428; --ink: #e8eeee; --muted: #a9b8bb;
          --line: #2c3a3f; --accent: #56b4e9; }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem 1rem; z-index: 10; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.top, main { max-width: 64rem; margin: 0 auto; padding: 1.25rem 1rem; }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.sub, .note { color: var(--muted); margin: .25rem 0 .75rem; }
.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 1rem; display: flex; flex-direction: column; }
.val { font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.lbl { color: var(--muted); }
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 1rem; height: 18rem; position: relative; }
details { margin-top: .75rem; }
table { border-collapse: collapse; margin-top: .5rem; }
th, td { border: 1px solid var(--line); padding: .35rem .75rem; text-align: left; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }