.chroma-grid{grid-template-columns:repeat(var(--cols,3),1fr);-webkit-user-select:none;user-select:none;background:#000;border-radius:1.5rem;gap:1.5rem;padding:1rem;display:grid;position:relative;overflow:hidden}.chroma-card{z-index:1;background:#111;border:1px solid #ffffff0d;border-radius:1rem;flex-direction:column;gap:1.25rem;padding:1.5rem;transition:transform .3s,border-color .3s;display:flex;position:relative;overflow:hidden}.chroma-card:before{content:"";background:var(--card-gradient,linear-gradient(145deg,#333,#000));opacity:.1;z-index:-1;position:absolute;inset:0}.chroma-card:hover{border-color:var(--card-border);transform:translateY(-4px)}.chroma-img-wrapper{aspect-ratio:1;border:1px solid #ffffff1a;border-radius:.75rem;width:100%;overflow:hidden}.chroma-img-wrapper img{object-fit:cover;width:100%;height:100%}.chroma-info{flex-direction:column;gap:.25rem;display:flex}.chroma-info .name{color:#fff;margin:0;font-size:1.25rem;font-weight:700}.chroma-info .handle{color:var(--card-border);opacity:.8;font-size:.875rem;font-weight:500}.chroma-info .role{color:#ccc;margin:.5rem 0 0;font-size:.875rem}.chroma-overlay{pointer-events:none;background:radial-gradient(var(--r)circle at var(--x)var(--y),transparent 0%,#000000d9 100%);z-index:2;position:absolute;inset:0}.chroma-fade{pointer-events:none;opacity:0;z-index:3;background:#000;position:absolute;inset:0}@media (max-width:1024px){.chroma-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.chroma-grid{grid-template-columns:1fr}}