@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&display=swap');
:root{--bg:#171418;--surface:rgba(41,40,40,.82);--surface-strong:#252127;--ink:#f9f0ff;--muted:rgba(249,240,255,.62);--line:rgba(126,23,182,.30);--primary:#7e17b6;--primary-dark:#57267a;--primary-soft:#d9a8f3;--green:#31bc82;--orange:#e59a25;--red:#df5b70;--shadow:0 20px 60px rgba(0,0,0,.3)}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{min-height:100vh;margin:0;background:radial-gradient(circle at 8% -10%,rgba(126,23,182,.30),transparent 34rem),radial-gradient(circle at 96% 8%,rgba(87,38,122,.24),transparent 28rem),var(--bg);background-attachment:fixed;color:var(--ink);font-family:'Exo 2',Inter,system-ui,sans-serif}.topline{position:fixed;z-index:20;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--primary-dark),var(--primary),#b54bee,var(--primary-dark))}::selection{background:rgba(126,23,182,.42)}
header{max-width:1440px;margin:auto;padding:52px 5vw 30px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:19px}.brand-mark{width:64px;height:64px;flex:0 0 auto;display:grid;place-items:center;border:1px solid rgba(217,168,243,.2);border-radius:20px;background:rgba(41,40,40,.72);box-shadow:0 12px 32px rgba(87,38,122,.3);backdrop-filter:blur(18px)}.brand-mark svg{width:34px;fill:var(--primary-soft)}h1{margin:5px 0 7px;font-size:clamp(30px,4vw,48px);font-weight:700;line-height:1;letter-spacing:-.04em}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--primary-soft)}p,.title span{color:var(--muted);font-size:12px}header p{margin:0}button{border:1px solid rgba(217,168,243,.16);background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:white;padding:13px 19px;border-radius:999px;font:600 13px 'Exo 2';box-shadow:0 10px 24px rgba(87,38,122,.3);cursor:pointer;transition:transform .16s,box-shadow .16s}button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(126,23,182,.4)}button span{font-size:16px;margin-right:5px}button:disabled{opacity:.5;transform:none}
main{max-width:1440px;margin:auto;padding:8px 5vw 65px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.card,article,.oldest{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:23px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.card{min-height:135px;transition:transform .18s,border-color .18s}.card:hover{transform:translateY(-3px);border-color:rgba(217,168,243,.42)}.card:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-42px;top:-45px;background:rgba(126,23,182,.1)}.card:first-child{background:linear-gradient(125deg,rgba(126,23,182,.24),var(--surface) 65%)}.card small{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.card strong{display:block;margin-top:20px;font-size:39px;line-height:1;font-weight:700;letter-spacing:-.04em}.card:nth-child(2) strong{color:var(--primary-soft)}.card:nth-child(3) strong{color:var(--green)}.card:nth-child(4) strong{color:var(--orange)}
.grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}.title{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.title h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em}.title span{text-transform:uppercase;letter-spacing:.1em;font-size:9px}.bars{display:grid;gap:16px}.bar-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}.bar-head span{color:rgba(249,240,255,.85)}.bar-head b{color:var(--primary-soft)}.track{height:8px;background:rgba(249,240,255,.07);border-radius:9px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,var(--primary-dark),var(--primary),#a744da);border-radius:9px;box-shadow:0 0 14px rgba(126,23,182,.3)}.compact .fill{background:linear-gradient(90deg,#5e267f,#9d4bc9)}.donut-row{display:flex;align-items:center;justify-content:center;gap:32px;min-height:160px}.donut{width:138px;height:138px;border-radius:50%;display:grid;place-items:center;filter:drop-shadow(0 10px 25px rgba(0,0,0,.24))}.donut:after{content:"";width:84px;height:84px;border-radius:50%;background:var(--surface-strong);box-shadow:inset 0 0 0 1px var(--line)}.legend{display:grid;gap:15px}.legend div{font-size:13px;color:var(--muted)}.legend b{color:var(--ink);font-size:16px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;box-shadow:0 0 10px currentColor}.oldest{margin-top:16px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.12em}th,td{padding:15px 11px;border-bottom:1px solid rgba(249,240,255,.07)}tbody tr{transition:background .16s}tbody tr:hover{background:rgba(126,23,182,.10)}tbody tr:last-child td{border-bottom:0}td:first-child,a{font-weight:700;color:var(--primary-soft);text-decoration:none}td small{color:var(--muted)}.pill{display:inline-block;background:rgba(126,23,182,.16);border:1px solid rgba(217,168,243,.14);padding:5px 9px;border-radius:99px;white-space:nowrap;color:#e9c8fa}.age{font-weight:700;color:var(--orange)}#error{padding:15px 18px;background:rgba(214,69,93,.15);border:1px solid rgba(214,69,93,.35);color:#ff9ead;border-radius:14px;margin-bottom:16px}footer{padding:22px;text-align:center;color:var(--muted);font-size:10px;border-top:1px solid rgba(249,240,255,.07);letter-spacing:.04em}footer b{color:var(--primary-soft)}footer span{color:var(--primary);margin:0 6px}
@media(max-width:850px){.cards{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}header{padding-top:38px}.card strong{font-size:34px}}@media(max-width:560px){header{align-items:flex-start;flex-direction:column}.brand-mark{width:52px;height:52px;border-radius:16px}.brand-mark svg{width:28px}.cards{grid-template-columns:1fr 1fr;gap:10px}.card,article,.oldest{padding:18px;border-radius:16px}.card{min-height:112px}.card strong{font-size:30px;margin-top:15px}button{width:100%}.donut-row{gap:20px}.donut{width:116px;height:116px}.donut:after{width:70px;height:70px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}