:root{--gradient:conic-gradient(from 90deg at 50% 50%,rgb(59,130,246),rgb(147,51,234),rgb(236,72,153),rgb(239,68,68),rgb(245,158,11),rgb(34,197,94),rgb(6,182,212),rgb(59,130,246));--card-radius:0.75rem}.card{--start:0;position:relative;display:flex;flex-direction:column;overflow:hidden;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--card-radius);transition:border-color .2s ease}.card:hover{border-color:var(--color-border-strong)}.card:before{content:"";border-radius:var(--card-radius);border:2px solid transparent;background:var(--gradient);background-attachment:fixed;mask:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start) - (20 * 1.1)) * 1deg),#ffffff1f 0deg,white,#ffffff00 120deg);mask-composite:intersect;mask-clip:padding-box,border-box;opacity:0;transition:opacity .6s cubic-bezier(.4,0,.2,1)}.card:before,.glow{position:absolute;z-index:1;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.glow{filter:blur(14px)}.glow:before{position:absolute;content:"";width:98%;height:98%;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:var(--card-radius);border:12px solid transparent;background:var(--gradient);background-attachment:fixed;mask:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--start) - (20 * 1.1)) * 1deg),#ffffff1f 0deg,white,#ffffff00 120deg);mask-composite:intersect;mask-clip:padding-box,border-box;opacity:0;transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}.card:hover>.glow:before{opacity:.6}.card:hover:before{opacity:.8}