:root { --bg:#08111f; --panel:#101d31; --panel-2:#142641; --text:#eef5ff; --muted:#9eb0c9; --line:#29405f; --accent:#67e8f9; --accent-2:#a78bfa; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--text); background:radial-gradient(circle at 15% 0%,#17365b 0,#08111f 42%,#050b14 100%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.page { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:42px 0 56px; }
.topbar { display:flex; justify-content:space-between; gap:24px; align-items:center; margin-bottom:56px; }
.brand { color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.02em; }
.brand span { color:var(--accent); }
nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
nav a { color:var(--muted); text-decoration:none; font-size:.85rem; padding:8px 11px; border:1px solid transparent; border-radius:999px; }
nav a:hover,nav a.active { color:var(--text); border-color:var(--line); background:rgba(255,255,255,.05); }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; }
h1 { margin:12px 0 10px; max-width:850px; font-size:clamp(2rem,5vw,4.35rem); line-height:1.02; letter-spacing:-.055em; }
.lede { color:var(--muted); max-width:720px; font-size:1.05rem; line-height:1.65; margin:0; }
.card { margin-top:34px; padding:24px; border:1px solid rgba(149,190,235,.18); border-radius:24px; background:linear-gradient(145deg,rgba(20,38,65,.96),rgba(10,20,36,.96)); box-shadow:0 24px 80px rgba(0,0,0,.3); }
.card-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:18px; }
.card-head h2 { margin:0; font-size:1rem; letter-spacing:.02em; }
.card-head p { margin:6px 0 0; color:var(--muted); font-size:.88rem; }
.badge { flex:0 0 auto; color:var(--accent); border:1px solid rgba(103,232,249,.3); border-radius:999px; padding:7px 11px; font-size:.72rem; font-weight:700; }
.chart-wrap { overflow:hidden; border:1px solid rgba(149,190,235,.13); border-radius:18px; background:rgba(4,10,20,.42); }
svg { display:block; width:100%; height:auto; min-height:360px; }
.axis path,.axis line { stroke:var(--line); }
.axis text { fill:var(--muted); font-size:12px; }
.grid line { stroke:rgba(158,176,201,.15); }
.grid path { stroke-width:0; }
.label { fill:var(--muted); font-size:12px; }
.tooltip { position:fixed; z-index:10; pointer-events:none; opacity:0; transform:translate(14px,14px); padding:10px 12px; border:1px solid rgba(103,232,249,.28); border-radius:12px; background:#0b1628; color:var(--text); box-shadow:0 14px 32px rgba(0,0,0,.35); font-size:.78rem; line-height:1.45; transition:opacity .12s ease; }
.tooltip.show { opacity:1; }
.bar { fill:url(#barGradient); transition:filter .15s,opacity .15s; }
.bar:hover,.dot:hover,.tile:hover,.county:hover { filter:brightness(1.3); stroke:#fff; stroke-width:1.5; }
.dot { stroke:#07101d; stroke-width:1.5; opacity:.9; }
.legend { display:flex; flex-wrap:wrap; gap:14px; margin:14px 0 0; color:var(--muted); font-size:.78rem; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.footer { margin-top:24px; color:var(--muted); font-size:.82rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer a { color:var(--accent); }
@media (max-width:700px) { .page{width:min(100% - 20px,1180px);padding-top:22px}.topbar{align-items:flex-start;flex-direction:column;margin-bottom:34px}nav{justify-content:flex-start}.card{padding:12px;border-radius:18px}.card-head{flex-direction:column}.badge{align-self:flex-start}svg{min-height:300px}.axis text{font-size:10px} }