:root{--card-hue-cyan:190;--card-hue-purple:270;--card-border:1px;--card-radius:24px;--card-ease:cubic-bezier(.5,1,.89,1)}.glassy-card{border-radius:var(--card-radius);border:var(--card-border)solid hsl(var(--card-hue)12% 20%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .3s var(--card-ease);position:relative}.glassy-card-cyan{--card-hue:var(--card-hue-cyan)}.glassy-card-purple{--card-hue:var(--card-hue-purple)}.card-shine{pointer-events:none;border-radius:0;border-top-right-radius:var(--card-radius);border-bottom-left-radius:var(--card-radius);aspect-ratio:1;z-index:1;background:conic-gradient(from -45deg at center in oklch,transparent 12%,hsl(var(--card-hue),80%,60%),transparent 50%)border-box;opacity:0;border:1px solid transparent;width:75%;height:auto;display:block;position:absolute;top:-1px;right:-1px;-webkit-mask-image:linear-gradient(transparent),linear-gradient(#000);mask-image:linear-gradient(transparent),linear-gradient(#000);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:source-out;mask-composite:subtract;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.card-shine:before,.card-shine:after{content:"";border-radius:inherit;border:inherit;position:absolute;top:-2px;bottom:-2px;left:-2px;right:-2px}.card-shine:after{z-index:2;background:conic-gradient(from -45deg at center in oklch,transparent 17%,hsl(var(--card-hue),80%,85%),transparent 33%)}.card-shine-bottom{background:conic-gradient(from 135deg at center in oklch,transparent 12%,hsl(var(--card-hue),80%,60%),transparent 50%)border-box;top:auto;bottom:-1px;left:-1px;right:auto}.card-shine-bottom:after{background:conic-gradient(from 135deg at center in oklch,transparent 17%,hsl(var(--card-hue),80%,85%),transparent 33%)}.card-glow{pointer-events:none;border-top-right-radius:calc(var(--card-radius)*2.5);border-bottom-left-radius:calc(var(--card-radius)*2.5);border:calc(var(--card-radius)*1.25)solid transparent;inset:calc(var(--card-radius)*-2);aspect-ratio:1;width:75%;height:auto;right:calc(var(--card-radius)*-2);top:calc(var(--card-radius)*-2);opacity:0;filter:blur(12px)saturate(1.25)brightness(.5);mix-blend-mode:plus-lighter;z-index:3;background:conic-gradient(from -45deg at center in oklch,transparent 0%,hsl(var(--card-hue),95%,60%),transparent 50%)border-box;display:block;position:absolute;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1Ii8+PC9zdmc+) 0 0/29%;-webkit-mask-source-type:luminance;mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1Ii8+PC9zdmc+) 0 0/29% luminance}.card-glow:before,.card-glow:after{content:"";border:inherit;border-radius:inherit;background:conic-gradient(from -45deg at center in oklch,transparent 0%,hsl(var(--card-hue),95%,60%),transparent 50%)border-box;filter:saturate(2)brightness();position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:linear-gradient(transparent),linear-gradient(#000);mask-image:linear-gradient(transparent),linear-gradient(#000);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:source-out;mask-composite:subtract;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.card-glow:after{--lit:70%;--sat:100%;border-width:calc(var(--card-radius)*1.75);border-radius:calc(var(--card-radius)*2.75);inset:calc(var(--card-radius)*-.25);z-index:4;opacity:.75;background:conic-gradient(from -45deg at center in oklch,transparent 15%,hsl(var(--card-hue),100%,70%),transparent 35%)border-box}.card-glow-bottom{inset:calc(var(--card-radius)*-2);top:auto;right:auto;left:calc(var(--card-radius)*-2);bottom:calc(var(--card-radius)*-2);background:conic-gradient(from 135deg at center in oklch,transparent 0%,hsl(var(--card-hue),95%,60%),transparent 50%)border-box}.card-glow-bottom:before,.card-glow-bottom:after{background:conic-gradient(from 135deg at center in oklch,transparent 0%,hsl(var(--card-hue),95%,60%),transparent 50%)border-box}.card-glow-bottom:after{background:conic-gradient(from 135deg at center in oklch,transparent 15%,hsl(var(--card-hue),100%,70%),transparent 35%)border-box}.card-glow-bright{border-radius:calc(var(--card-radius) + 2px);filter:blur(2px)brightness(.66);background:conic-gradient(from -45deg at center in oklch,transparent 13%,hsl(var(--card-hue),100%,80%),transparent 37%)border-box;border-width:5px;top:-7px;bottom:-7px;left:-7px;right:-7px}.card-glow-bright:after{content:none}.card-glow-bright.card-glow-bottom{background:conic-gradient(from 135deg at center in oklch,transparent 13%,hsl(var(--card-hue),100%,80%),transparent 37%)border-box;top:-7px;bottom:-7px;left:-7px;right:-7px}.glassy-card:hover .card-shine,.glassy-card:hover .card-shine-bottom{animation:glow 1s var(--card-ease)both}.glassy-card:hover .card-shine-bottom{animation-duration:1.8s;animation-delay:.1s}.glassy-card:hover .card-glow{animation:glow 1s var(--card-ease)both;animation-delay:.2s}.glassy-card:hover .card-glow-bottom{animation:glow 1s var(--card-ease)both;animation-delay:.3s}.glassy-card:hover .card-glow-bright{animation:glow 1.5s var(--card-ease)both;animation-delay:.1s}.glassy-card:hover .card-glow-bright.card-glow-bottom{animation:glow 1.1s var(--card-ease)both;animation-delay:.3s}@keyframes glow{0%{opacity:0}3%{opacity:1}10%{opacity:0}12%{opacity:.7}16%{opacity:.3;animation-timing-function:var(--card-ease)}to{opacity:1;animation-timing-function:var(--card-ease)}}@keyframes glowoff{to{opacity:0}}.glassy-card:not(:hover) .card-shine,.glassy-card:not(:hover) .card-shine-bottom,.glassy-card:not(:hover) .card-glow,.glassy-card:not(:hover) .card-glow-bottom,.glassy-card:not(:hover) .card-glow-bright{opacity:0;animation:glowoff .25s var(--card-ease)both}