.card-spotlight{--mouse-x:50%;--mouse-y:50%;--spotlight-color:#6366f180;background-color:#0d1117;border:1px solid #ffffff1a;border-radius:1rem;transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden}.card-spotlight:before{content:"";background:radial-gradient(600px circle at var(--mouse-x)var(--mouse-y),var(--spotlight-color),transparent 70%);opacity:0;pointer-events:none;z-index:1;transition:opacity .4s;position:absolute;inset:0}.card-spotlight:after{content:"";background:radial-gradient(400px circle at var(--mouse-x)var(--mouse-y),var(--spotlight-color),transparent 60%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;opacity:0;pointer-events:none;z-index:2;border-radius:1rem;padding:1.5px;transition:opacity .3s;position:absolute;inset:-1px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)}.card-spotlight:hover:before,.card-spotlight:focus-within:before{opacity:.8}.card-spotlight:hover:after,.card-spotlight:focus-within:after{opacity:1}.card-spotlight:hover{box-shadow:0 0 25px -5px var(--spotlight-color)}.card-spotlight.spotlight-active-step:before{opacity:.95}.card-spotlight.spotlight-active-step:after{opacity:1}