@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');
:root{--ink:#14112b;--mute:#6b6889;--line:#ebe8f7;--bg:#faf9ff;--card:#ffffff;
--vio:#7c3aed;--ind:#4f46e5;--sky:#0ea5e9;--teal:#10b981;--lime:#84cc16;--amber:#f59e0b;--coral:#f43f5e;--pink:#ec4899}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:radial-gradient(1200px 500px at 0% 0%,#efe9ff 0,transparent 60%),radial-gradient(900px 400px at 100% 100%,#e0f7ff 0,transparent 60%),var(--bg);padding:22px 20px;-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(90deg,var(--vio),var(--sky));-webkit-background-clip:text;color:transparent}
h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:4px 0 4px}
.sub{color:var(--mute);font-size:13.5px;margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:0 1px 2px rgba(20,17,43,.04),0 8px 28px -12px rgba(79,70,229,.18)}
.grid{display:grid;gap:12px}
.mono{font-family:'JetBrains Mono',monospace}
.ax{fill:var(--mute);font-size:10.5px;font-family:Inter}
.gl{stroke:var(--line)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--mute);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bar{transform-box:fill-box;transform-origin:bottom;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hbar{transform-origin:left;animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
.fade{animation:fade .7s ease both}
@media (max-width:640px){h1{font-size:21px}}