.cg-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(168px,auto);gap:16px;display:grid}.cg-card{isolation:isolate;text-align:left;cursor:pointer;border:1px solid var(--line);color:var(--fg);font:inherit;background:linear-gradient(155deg,color-mix(in srgb,var(--c) 11%,#fff) 0%,#fff 58%);border-radius:20px;flex-direction:column;justify-content:space-between;gap:18px;padding:20px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;display:flex;position:relative;overflow:hidden;box-shadow:0 1px #18161d08}.cg-card:before{content:"";background:var(--c);transform-origin:0;z-index:2;height:4px;transition:transform .45s cubic-bezier(.2,.7,.2,1);position:absolute;inset:0 0 auto;transform:scaleX(0)}.cg-card:after{content:"";opacity:0;pointer-events:none;z-index:1;background:linear-gradient(100deg,#0000,#ffffff8c,#0000);width:40%;position:absolute;top:-20%;bottom:-20%;left:-60%;transform:skew(-18deg)}.cg-card:hover,.cg-card:focus-visible{border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 22px 40px -24px color-mix(in srgb,var(--c) 70%,#000),0 2px 6px #18161d0d;transform:translateY(-5px)}.cg-card:hover:before,.cg-card:focus-visible:before{transform:scaleX(1)}.cg-card:hover:after{animation:.9s cgSweep}.cg-card:focus-visible{outline:3px solid color-mix(in srgb,var(--c) 60%,var(--ink));outline-offset:3px}.cg-spot{z-index:-1;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c) 26%,transparent),transparent 70%);transition:opacity .3s;position:absolute;inset:0}.cg-card:hover .cg-spot{opacity:1}.cg-code{z-index:-1;font:900 6.2rem/1 var(--f-display);letter-spacing:-.04em;color:var(--c);opacity:.13;pointer-events:none;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s;position:absolute;bottom:-22px;right:-6px}.cg-card:hover .cg-code{opacity:.22;transform:translate(-8px,-6px)scale(1.06)}.cg-art{background:var(--c);width:56px;height:56px;color:var(--cf);box-shadow:0 10px 18px -10px var(--c);border-radius:16px;place-items:center;transition:transform .45s cubic-bezier(.3,1.5,.5,1);display:grid}.cg-art svg{width:32px;height:32px}.cg-card:hover .cg-art{transform:rotate(-8deg)scale(1.08)}.cg-body{flex-direction:column;gap:.35rem;min-width:0;display:flex}.cg-name{font:800 1.05rem/1.25 var(--f-display);letter-spacing:-.01em}.cg-blurb{opacity:.85;max-width:44ch;font-size:.95rem;line-height:1.5}.cg-tags{flex-wrap:wrap;gap:.35rem;margin-top:.2rem;display:flex}.cg-tags i{background:#ffffff38;border:1px solid #ffffff59;border-radius:999px;padding:.25rem .6rem;font-size:.78rem;font-style:normal;font-weight:600}.cg-meta{color:var(--muted);justify-content:space-between;align-items:center;gap:.5rem;margin-top:.15rem;font-size:.8rem;display:flex}.cg-go{color:var(--ink);opacity:0;white-space:nowrap;align-items:center;gap:.25rem;font-weight:700;transition:opacity .3s,transform .3s;display:inline-flex;transform:translate(-6px)}.cg-card:hover .cg-go,.cg-card:focus-visible .cg-go{opacity:1;transform:none}.cg-card.big{color:var(--cf);background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--c) 70%,#fff) 0%,transparent 55%),linear-gradient(150deg,var(--c) 0%,color-mix(in srgb,var(--c) 78%,#18161d) 100%);border-color:#0000;grid-area:span 2/span 2;padding:28px}.cg-card.big .cg-art{width:84px;height:84px;color:var(--cf);background:#ffffff2e;border-radius:22px;box-shadow:inset 0 0 0 1px #ffffff4d}.cg-card.big .cg-art svg{width:50px;height:50px}.cg-card.big .cg-name{font-size:clamp(1.5rem,2.4vw,2.1rem)}.cg-card.big .cg-code{color:var(--cf);opacity:.12;font-size:13rem;bottom:-40px}.cg-card.big .cg-meta,.cg-card.big .cg-go{color:var(--cf)}.cg-card.big .cg-go{opacity:1;background:#fff3;border-radius:999px;padding:.4rem .8rem;transform:none}.cg-card.big:before{background:var(--cf);opacity:.5}.cg-card.big .cg-spot{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#ffffff38,transparent 70%)}.cg-grid:not(.in) .cg-card{opacity:0;transform:translateY(22px)}.cg-grid.in .cg-card{animation:.6s cubic-bezier(.2,.7,.2,1) both cgIn;animation-delay:calc(var(--i) * 55ms)}@keyframes cgIn{0%{opacity:0;transform:translateY(22px)scale(.98)}to{opacity:1;transform:none}}@keyframes cgSweep{0%{opacity:1;left:-60%}to{opacity:0;left:130%}}@media (max-width:1060px){.cg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:760px){.cg-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:10px}.cg-card{border-radius:16px;gap:12px;padding:14px}.cg-card.big{grid-row:span 1;padding:20px}.cg-card.big .cg-art{width:64px;height:64px}.cg-card.big .cg-art svg{width:38px;height:38px}.cg-card.big .cg-code{font-size:8rem}.cg-art{border-radius:13px;width:46px;height:46px}.cg-art svg{width:26px;height:26px}.cg-name{font-size:.95rem}.cg-code{font-size:4.6rem;bottom:-16px}.cg-go{display:none}.cg-card.big .cg-go{display:inline-flex}}@media (prefers-reduced-motion:reduce){.cg-card,.cg-card:before,.cg-art,.cg-code,.cg-go{transition:none}.cg-card:hover{transform:none}.cg-card:hover:after{animation:none}.cg-card:hover .cg-art{transform:none}.cg-grid.in .cg-card{animation:none}.cg-grid:not(.in) .cg-card{opacity:1;transform:none}}
