@property --spot{syntax:"<number>";inherits:false;initial-value:0}.proto-grid{pointer-events:none;background:linear-gradient(#ffffff0e 1px,#0000 1px) 0 0/48px 48px,linear-gradient(90deg,#ffffff0e 1px,#0000 1px) 0 0/48px 48px;position:absolute;inset:0;-webkit-mask:radial-gradient(60% 55% at 55% 68%,#000 30%,#0000 100%);mask:radial-gradient(60% 55% at 55% 68%,#000 30%,#0000 100%)}:is(.glass-c,.glass-f,.glass-k){isolation:isolate;position:relative}:is(.glass-c,.glass-f,.glass-k):before,:is(.glass-c,.glass-f,.glass-k):after{content:"";z-index:1;border-radius:inherit;pointer-events:none;position:absolute;inset:0}:is(.glass-c,.glass-f,.glass-k):after,.glass-f:before{padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.glass-c{background:radial-gradient(50% 140px at 50% 0%, color-mix(in oklab, var(--color-blue-400) 18%, transparent), transparent), linear-gradient(180deg, #0c1e2cd6, #050f17eb);box-shadow:inset 0 1px #ffffff12,0 0 0 1px #ffffff12,0 1px 2px #0006,0 28px 64px -12px #000000bf}.glass-c:before{background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-blue-300) 95%, transparent) 28%, #ffcd29d9 55%, color-mix(in oklab, var(--color-azure-300) 85%, transparent) 78%, transparent);height:1px;box-shadow:0 0 14px .5px color-mix(in oklab, var(--color-blue-300) 45%, transparent);border-radius:0;inset:0 12% auto}.glass-c:after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), color-mix(in oklab, var(--color-blue-300) calc(95% * var(--spot)), transparent), transparent 70%);transition:--spot .3s cubic-bezier(.23,1,.32,1)}.glass-f{background:linear-gradient(135deg, color-mix(in oklab, var(--color-blue-300) 13%, transparent), transparent 38%, transparent 62%, color-mix(in oklab, var(--color-azure-300) 9%, transparent)), linear-gradient(180deg, #0b1e2ca3, #06131dc7);box-shadow:-1px -1px 0 color-mix(in oklab, var(--color-blue-300) 35%, transparent), 1px 1px 0 color-mix(in oklab, var(--color-azure-300) 28%, transparent), inset 0 1px 0 #ffffff1f, 0 26px 60px -16px #000000b3, 0 0 60px -18px color-mix(in oklab, var(--color-blue-400) 35%, transparent)}.glass-f:before{background:conic-gradient(from 210deg at var(--mx,30%) var(--my,0%), color-mix(in oklab, var(--color-blue-300) 95%, transparent), color-mix(in oklab, var(--color-azure-300) 80%, transparent), #ffcd29bf, #fff9, color-mix(in oklab, var(--color-blue-300) 95%, transparent))}.glass-f:after{background:radial-gradient(220px circle at var(--mx,30%) var(--my,0%), rgb(255 255 255/calc(.35 + .55 * var(--spot))), transparent 70%);transition:--spot .3s cubic-bezier(.23,1,.32,1)}.glass-k{background:radial-gradient(120% 80% at 20% 0,#ffffff1a,#0000 60%),#aab0be26;box-shadow:inset 0 1px #fff3,0 30px 70px -24px #0000008c}.glass-k:after{background:linear-gradient(#ffffff57,#ffffff1f 40%,#ffffff1a 70%,#ffffff38);padding:1.5px}.glass-k .text-fog-500{color:var(--color-fog-300)}@media (hover:hover) and (pointer:fine){.glass-c:not(.glass-solid){-webkit-backdrop-filter:blur(40px)saturate(1.4);backdrop-filter:blur(40px)saturate(1.4)}.glass-f{-webkit-backdrop-filter:blur(20px)saturate(1.5);backdrop-filter:blur(20px)saturate(1.5)}.glass-k{-webkit-backdrop-filter:blur(56px)saturate(1.7)brightness(.72);backdrop-filter:blur(56px)saturate(1.7)brightness(.72)}[data-spotlight]:hover :is(.glass-c,.glass-f):after{--spot:1}}