.spotlight-card{--spot-x: 50%;--spot-y: 0px;--spot-size: 440px;--spot-ease: cubic-bezier(.22, 1, .36, 1);position:relative;isolation:isolate;border-radius:16px}.spotlight-card__halo{position:absolute;top:-28px;right:-28px;bottom:-28px;left:-28px;z-index:-1;border-radius:44px;pointer-events:none;background:radial-gradient(var(--spot-size) circle at calc(var(--spot-x) + 28px) calc(var(--spot-y) + 28px),hsl(var(--neon) / .42),hsl(var(--neon) / .16) 38%,transparent 72%);opacity:.4;transition:opacity .45s var(--spot-ease)}.spotlight-card__surface{position:relative;height:100%;border-radius:inherit;background-color:hsl(var(--card));background-image:radial-gradient(calc(var(--spot-size) * 1.2) circle at var(--spot-x) var(--spot-y),hsl(var(--neon) / .07),transparent 60%);box-shadow:0 1px 2px #0000000d,0 24px 56px -32px hsl(var(--neon) / .45);transition:box-shadow .45s var(--spot-ease)}.spotlight-card__rim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(calc(var(--spot-size) * .7) circle at var(--spot-x) var(--spot-y),hsl(var(--neon)),hsl(var(--neon) / .35) 45%,hsl(var(--border)) 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.65;transition:opacity .45s var(--spot-ease)}.spotlight-card[data-spot=on] .spotlight-card__halo,.spotlight-card:focus-within .spotlight-card__halo{opacity:1}.spotlight-card[data-spot=on] .spotlight-card__rim,.spotlight-card:focus-within .spotlight-card__rim{opacity:1}.spotlight-card[data-spot=on] .spotlight-card__surface{box-shadow:0 1px 2px #0000000d,0 32px 72px -28px hsl(var(--neon) / .6)}