@layer ui{
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.tile{position:relative;border-radius:var(--r);padding:1.6rem;background:var(--k2);border:1px solid #ffffff1a;overflow:hidden;min-width:0}
.tile h3{font:500 .74rem var(--m);text-transform:uppercase;letter-spacing:.06em;color:#bfae9d;margin-bottom:1rem;line-height:1.2}
.tile .num{font:800 clamp(3.5rem,8vw,7rem)/.85 var(--d);letter-spacing:-.07em}
.t-rec{grid-column:span 5;background:var(--o);color:var(--k)}.t-rec h3{color:#3b1a05}
.t-rec .num{font-size:clamp(5rem,13vw,10rem)}
.t-spark{grid-column:span 7}
.t-lead{grid-column:span 5}.t-streak{grid-column:span 4;background:var(--cream);color:var(--ink)}.t-streak h3{color:var(--mut)}
.t-pp{grid-column:span 3}
@media(max-width:900px){.t-rec,.t-spark,.t-lead,.t-streak,.t-pp{grid-column:1/-1}}
.lb{display:grid;gap:.55rem}.lb a{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.7rem;align-items:center;text-decoration:none}
.lb .n{font:800 1.3rem var(--d);color:var(--o)}.lb .bar{height:.7rem;border-radius:99px;background:#ffffff14;overflow:hidden}.lb .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--o2),var(--o));border-radius:inherit;width:0;animation:grow 1.2s cubic-bezier(.2,.8,.2,1) forwards;animation-timeline:view();animation-range:entry 10% cover 40%}
.lb .v{font:500 .78rem var(--m)}.lb .nm{font-weight:700;display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}
.pill{display:inline-block;font:500 .68rem var(--m);text-transform:uppercase;letter-spacing:.05em;padding:.25rem .6rem;border-radius:99px;background:var(--k);color:#fff}
.pill.o{background:var(--o);color:var(--k)}
.spark{width:100%;height:auto;overflow:visible}.spark text{font:500 10px var(--m);fill:#bfae9d}
.spark .bar{fill:var(--o);transition:opacity .2s}.spark .bar.z{fill:#ffffff22}.spark a:hover .bar{opacity:.7}
.big-stat{font:800 clamp(2.6rem,5vw,4rem)/.9 var(--d);letter-spacing:-.06em}
}