@layer components{.chroma-grid{--x:50%;--y:50%;--r:360px}.chroma-card{--mouse-x:50%;--mouse-y:50%}.chroma-card>*{z-index:1;position:relative}.chroma-card:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(260px circle at var(--mouse-x) var(--mouse-y), color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%);opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1);display:none;position:absolute;inset:0}.chroma-card:hover:before{opacity:1}.chroma-overlay{z-index:3;pointer-events:none;-webkit-backdrop-filter:grayscale();backdrop-filter:grayscale();-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0%, transparent 15%, #0000001a 30%, #00000038 45%, #00000059 60%, #00000080 75%, #000000ad 88%, white 100%);mask-image:radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0%, transparent 15%, #0000001a 30%, #00000038 45%, #00000059 60%, #00000080 75%, #000000ad 88%, white 100%);display:none;position:absolute;inset:0}@media (hover:hover) and (pointer:fine){.chroma-overlay,.chroma-card:before{display:block}}@media (prefers-reduced-motion:reduce){.chroma-overlay,.chroma-card:before{display:none!important}}}
@layer components{.operator-wrap{--tilt-x:0deg;--tilt-y:0deg;--px:50%;--py:50%;perspective:900px;position:relative}.operator-card{transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .18s ease-out;position:relative}.operator-glow{z-index:-1;pointer-events:none;background:radial-gradient(240px circle at var(--px) var(--py), color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%);opacity:0;border-radius:28px;transition:opacity .4s cubic-bezier(.16,1,.3,1);position:absolute;inset:-28px}.operator-sheen{pointer-events:none;background:linear-gradient(115deg, transparent 25%, color-mix(in oklab, var(--accent) 28%, transparent) 42%, #5eead438 50%, color-mix(in oklab, var(--green) 16%, transparent) 58%, transparent 75%);background-size:250% 250%;background-position:var(--px) var(--py);mix-blend-mode:screen;opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}@supports (color:lab(0% 0 0)){.operator-sheen{background:linear-gradient(115deg, transparent 25%, color-mix(in oklab, var(--accent) 28%, transparent) 42%, lab(84.7233% -43.5003 -1.21515/.22) 50%, color-mix(in oklab, var(--green) 16%, transparent) 58%, transparent 75%)}}@media (hover:hover) and (pointer:fine){.operator-wrap:hover .operator-card{will-change:transform}.operator-wrap:hover .operator-glow{opacity:1}.operator-wrap:hover .operator-sheen{opacity:.5}}@media (hover:none),(prefers-reduced-motion:reduce){.operator-card{transition:none;transform:none!important}.operator-glow,.operator-sheen{display:none}}}