:root{
    color-scheme: light;
    --surface-1:#fcfcfb; --page:#f7f7f4; --card:#ffffff;
    --ink-1:#0b0b0b; --ink-2:#52514e; --ink-muted:#898781;
    --grid-line:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,0.10);
    --series-installed:#2a78d6; --series-feas:#eb6834; --series-balance:#1baf7a;
    --seq-100:#cde2fb; --seq-200:#9ec5f4; --seq-300:#6da7ec; --seq-400:#3987e5; --seq-500:#256abf; --seq-600:#184f95; --seq-700:#0d366b;
    --accent:#2a78d6;
    --good:#0ca30c;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --surface-1:#1a1a19; --page:#0d0d0d; --card:#202020;
      --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
      --grid-line:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,0.10);
      --series-installed:#3987e5; --series-feas:#d95926; --series-balance:#199e70;
      --seq-100:#184f95; --seq-200:#1c5cab; --seq-300:#256abf; --seq-400:#3987e5; --seq-500:#5598e7; --seq-600:#86b6ef; --seq-700:#b7d3f6;
      --accent:#3987e5;
      --good:#0ca30c;
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --surface-1:#1a1a19; --page:#0d0d0d; --card:#202020;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
    --grid-line:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,0.10);
    --series-installed:#3987e5; --series-feas:#d95926; --series-balance:#199e70;
    --seq-100:#184f95; --seq-200:#1c5cab; --seq-300:#256abf; --seq-400:#3987e5; --seq-500:#5598e7; --seq-600:#86b6ef; --seq-700:#b7d3f6;
    --accent:#3987e5;
    --good:#0ca30c;
  }

  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--page); color:var(--ink-1);
    font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    padding: 0 20px;
  }
  .wrap{ max-width:1240px; margin:0 auto; padding-block: 28px 48px; }

  .demo-bar{ position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--border); margin:0 -20px; }
  .demo-nav{ max-width:1240px; margin:0 auto; padding:10px 20px; display:flex; gap:16px; }
  .demo-nav__link{ display:inline-flex; align-items:center; gap:5px; color:var(--ink-2); text-decoration:none; font-size:13px; }
  .demo-nav__link:hover{ color:var(--ink-1); }
  .demo-nav__link svg{ flex-shrink:0; }

  header.top{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; margin-bottom:20px; }
  .eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 6px; }
  h1{ font-size:clamp(24px,3.4vw,34px); margin:0 0 6px; text-wrap:balance; letter-spacing:-0.01em; }
  .sub{ color:var(--ink-2); font-size:14.5px; max-width:56ch; line-height:1.5; margin:0;}
  .asof{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-muted); text-align:right; white-space:nowrap; }

  .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin: 22px 0 26px; }
  .stat{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
  .stat .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:6px; }
  .stat .value{ font-family:"IBM Plex Mono",monospace; font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; }
  .stat .value small{ font-size:13px; font-weight:500; color:var(--ink-2); margin-left:3px;}
  .stat.installed .value{ color:var(--series-installed); }
  .stat.feas .value{ color:var(--series-feas); }
  .stat.balance .value{ color:var(--series-balance); }

  .layout{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,0.85fr); gap:22px; align-items:start; }
  @media (max-width: 880px){ .layout{ grid-template-columns: 1fr; } }

  .panel{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 18px 14px; }
  .panel h2{ font-size:14px; margin:0 0 4px; letter-spacing:.02em; }
  .panel .hint{ font-size:12.5px; color:var(--ink-muted); margin:0 0 10px; }

  .map-controls{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
  .seg{ display:inline-flex; background:var(--page); border:1px solid var(--border); border-radius:8px; padding:2px; gap:2px; }
  .seg button{ appearance:none; border:0; background:transparent; color:var(--ink-2); font-family:inherit; font-size:12.5px; padding:6px 10px; min-height:40px; border-radius:6px; cursor:pointer; }
  .seg button[aria-pressed="true"]{ background:var(--card); color:var(--ink-1); box-shadow:0 1px 0 var(--border); font-weight:600; }
  .seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

  #mapHolder{ position:relative; width:100%; }
  #mapSvg{ width:100%; height:auto; display:block; }
  .district-path{ stroke:var(--card); stroke-width:1.1; cursor:pointer; transition:opacity .12s ease; }
  .district-path:hover, .district-path.active{ stroke:var(--ink-1); stroke-width:1.6; }
  .district-path.dim{ opacity:.35; }
  .pie-group{ cursor:pointer; }
  .pie-group path{ stroke:var(--card); stroke-width:1; }
  .pie-group .ring{ fill:none; stroke:var(--card); stroke-width:1.5; }
  .pie-group.dim{ opacity:.3; }
  .dlabel{ font-family:"IBM Plex Mono",monospace; font-size:8.5px; fill:var(--ink-1); paint-order:stroke; stroke:var(--card); stroke-width:2.5px; pointer-events:none; font-weight:600; }
  @media (max-width: 880px){ .dlabel{ font-size:13px; stroke-width:3px; } }
  @media (max-width: 480px){ .dlabel{ font-size:17px; stroke-width:3.5px; } }

  .legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--grid-line); font-size:12px; color:var(--ink-2); }
  .legend .item{ display:flex; align-items:center; gap:6px; }
  .legend .swatch{ width:10px; height:10px; border-radius:2px; display:inline-block; flex:none; }
  .legend .ramp{ display:flex; align-items:center; gap:6px; }
  .legend .ramp .bar{ width:90px; height:8px; border-radius:4px; background:linear-gradient(to right, var(--seq-100), var(--seq-700)); }

  #tooltip{ position:fixed; top:0; left:0; pointer-events:none; z-index:40; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:12.5px; box-shadow:0 6px 20px rgba(0,0,0,.18); max-width:240px; opacity:0; transform:translate(-9999px,-9999px); transition:opacity .08s ease; }
  #tooltip.show{ opacity:1; }
  #tooltip .t-name{ font-weight:700; margin-bottom:6px; font-size:13.5px; }
  #tooltip .t-row{ display:flex; justify-content:space-between; gap:14px; padding:2px 0; }
  #tooltip .t-row .k{ color:var(--ink-2); display:flex; align-items:center; gap:5px;}
  #tooltip .t-row .v{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
  #tooltip .dot{ width:7px;height:7px;border-radius:2px;display:inline-block; }
  #tooltip .t-foot{ margin-top:6px; padding-top:6px; border-top:1px solid var(--grid-line); color:var(--ink-muted); font-size:11.5px; }

  table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  thead th{ text-align:right; font-weight:600; color:var(--ink-muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; padding:6px 8px; border-bottom:1px solid var(--grid-line); cursor:pointer; white-space:nowrap; }
  thead th:first-child, tbody td:first-child{ text-align:left; }
  thead th.sorted{ color:var(--ink-1); }
  tbody td{ text-align:right; padding:7px 8px; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; border-bottom:1px solid var(--grid-line); }
  tbody tr{ cursor:pointer; }
  tbody tr:hover, tbody tr.active{ background:var(--page); }
  tbody td:first-child{ font-family:"IBM Plex Sans",sans-serif; font-weight:500; }
  .bar-cell{ position:relative; }
  .mini-bar{ height:6px; border-radius:3px; background:var(--seq-400); }
  .table-wrap{ max-height:520px; overflow:auto; margin-top:8px;}

  .detail{ margin-top:14px; padding-top:12px; border-top:1px solid var(--grid-line); font-size:12.5px; }
  .detail .dn{ font-weight:700; font-size:15px; margin-bottom:8px; }
  .detail .drow{ display:flex; justify-content:space-between; padding:3px 0; }
  .detail .drow .k{ color:var(--ink-2); }
  .detail .drow .v{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
  .detail .empty{ color:var(--ink-muted); font-style:italic; }

  footer{ margin-top:26px; font-size:11.5px; color:var(--ink-muted); line-height:1.6; }
  a{ color:var(--accent); }