:root{--ink:#e7f6ee;--muted:#9fb8aa;--line:rgba(231,246,238,.14);--green:#39a96b}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);font-family:Manrope,sans-serif;background:#07110d}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0}
header,main{position:relative;z-index:1;width:min(1100px,calc(100% - 32px));margin:0 auto}
header{display:flex;justify-content:space-between;gap:18px;padding:28px 0 8px}
header a{color:#b7f3cf;text-decoration:none}
h1{font-family:Fraunces,serif;font-size:clamp(36px,5vw,62px);margin:0;letter-spacing:-.04em}
.kicker{letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--green)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.metric,.panel{background:rgba(8,22,16,.72);border:1px solid var(--line);border-radius:18px;padding:16px;backdrop-filter:blur(8px)}
.metric b{display:block;font-family:Fraunces,serif;font-size:32px}
.metric span{color:var(--muted);font-size:13px}
.stage{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
.wide{margin:12px 0 40px}
.chart{min-height:180px}
.chart svg{width:100%;height:200px;overflow:visible}
.chart text{fill:#9fb8aa;font-size:11px;font-family:Manrope,sans-serif}
.donut{width:180px;height:180px}
.waffle{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.waffle i{display:block;aspect-ratio:1;border-radius:3px;background:#173d27;animation:pop .4s ease both}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#173d27,#39a96b);animation:grow 1.2s ease forwards}
@keyframes grow{to{width:var(--w)}}
ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}
ol li{opacity:0;transform:translateY(8px);animation:in .5s ease forwards;animation-delay:var(--d)}
@keyframes in{to{opacity:1;transform:none}}
.rec{display:grid;grid-template-columns:1.4fr .8fr .6fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);opacity:0;animation:in .45s ease forwards;animation-delay:var(--d)}
@media(max-width:800px){.metrics,.stage,.rec,header{grid-template-columns:1fr;display:grid}}
@media(prefers-reduced-motion:reduce){#field{display:none}ol li,.rec,.bar i{animation:none;opacity:1;transform:none;width:var(--w)}}