@property --glass-angle{syntax:"<angle>";initial-value:-45deg;inherits:true}@property --color-ring-alpha{syntax:"<number>";initial-value:0;inherits:false}.-glass{background:transparent;box-shadow:0 8px 32px rgba(0,0,20,.3);color:#fff;overflow:hidden;position:relative;--glass-angle:-45deg;backdrop-filter:blur(10px) saturate(2.2) contrast(1.12);transition:--glass-angle 1.6s ease-in-out}.-glass.cl-button{border-width:0}.-glass.cl-button:focus-visible,.-glass.cl-button:hover{background:transparent;border-color:transparent;color:var(--cl-text-color)}.-glass:before{background:linear-gradient(calc(var(--light, -45deg) + 180deg),rgb(255 255 255/calc(var(--specular, .1)*.3)) 0,rgb(255 255 255/calc(var(--specular, .1)*.05)) 38%,hsla(0,0%,100%,0) 60%),linear-gradient(135deg,rgba(255,180,60,.07) 0,transparent 40%,transparent 60%,rgba(60,160,255,.07) 100%),rgba(0,0,0,var(--glass-tint,.4));z-index:-1}.-glass:after,.-glass:before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.-glass:after{background:conic-gradient(from var(--glass-angle),hsla(0,0%,100%,.58) 0deg,hsla(0,0%,100%,.25) 42deg,hsla(0,0%,100%,.03) 112deg,hsla(0,0%,100%,.08) 148deg,hsla(0,0%,100%,.54) 180deg,hsla(0,0%,100%,.22) 222deg,hsla(0,0%,100%,.03) 292deg,hsla(0,0%,100%,.09) 328deg,hsla(0,0%,100%,.58) 1turn);display:none;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1.5px;z-index:2}.-stroke:after{display:block}.-stroke.-color:after{background:conic-gradient(from var(--glass-angle),rgba(50,25,134,.5) 0deg,rgba(13,7,17,.2) 80deg,rgba(255,72,0,.45) 160deg,rgba(13,7,17,.15) 240deg,rgba(50,25,134,.35) 320deg,rgba(50,25,134,.5) 1turn)}.-stroke.-color-hover:after{--color-ring-alpha:0;background:conic-gradient(from var(--glass-angle),rgb(50 25 134/calc(var(--color-ring-alpha)*.5)) 0deg,rgb(13 7 17/calc(var(--color-ring-alpha)*.2)) 80deg,rgb(255 72 0/calc(var(--color-ring-alpha)*.45)) 160deg,rgb(13 7 17/calc(var(--color-ring-alpha)*.15)) 240deg,rgb(50 25 134/calc(var(--color-ring-alpha)*.35)) 320deg,rgb(50 25 134/calc(var(--color-ring-alpha)*.5)) 1turn),conic-gradient(from var(--glass-angle),rgb(255 255 255/calc((1 - var(--color-ring-alpha))*.58)) 0deg,rgb(255 255 255/calc((1 - var(--color-ring-alpha))*.25)) 42deg,rgb(255 255 255/calc((1 - var(--color-ring-alpha))*.03)) 112deg,rgb(255 255 255/calc((1 - var(--color-ring-alpha))*.08)) 148deg,rgb(255 255 255/calc((1 - var(--color-ring-alpha))*.54)) 180deg,rgb(255 255 255/calc((1 - var(--color-ring-alpha))*.22)) 222deg,rgb(255 255 255/calc((1 - var(--color-ring-alpha))*.03)) 292deg,rgb(255 255 255/calc((1 - var(--color-ring-alpha))*.09)) 328deg,rgb(255 255 255/calc((1 - var(--color-ring-alpha))*.58)) 1turn);transition:--color-ring-alpha .4s ease}.-stroke.-color-hover:focus-visible:after,.-stroke.-color-hover:hover:after{--color-ring-alpha:1}.-glass>*{position:relative;z-index:3}.-glass.-interactive:focus-visible,.-glass.-interactive:hover{--glass-angle:135deg}.-glass:not(.-active).-interactive:focus-visible,.-glass:not(.-active).-interactive:hover{background-color:transparent}.-glass.-color.-interactive:focus-visible,.-glass.-color.-interactive:hover{--glass-angle:360deg}.-interactive:focus-visible .-glass,.-interactive:hover .-glass{--glass-angle:135deg}@media (prefers-reduced-motion:reduce){.-glass{transition:none}}