@property --radius{syntax: "<length>"; inherits: true; initial-value: 16px;}@property --strength{syntax: "<length>"; inherits: true; initial-value: 20px;}@property --expand{syntax: "<length>"; inherits: true; initial-value: 8px;}@property --blur{syntax: "<length>"; inherits: true; initial-value: 2px;}.cfz-liquid-glass-rect{position:relative;border-radius:var(--radius)}.cfz-liquid-glass-rect:before{content:"";display:block;position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border-radius:var(--radius);-webkit-backdrop-filter:blur(var(--strength));backdrop-filter:blur(var(--strength));pointer-events:none;-webkit-mask-image:radial-gradient(circle at 0% 0%,#000 0,#000 calc(var(--radius) - var(--expand)),transparent var(--radius),transparent 100%),radial-gradient(circle at 100% 0%,#000 0,#000 calc(var(--radius) - var(--expand)),transparent var(--radius),transparent 100%),radial-gradient(circle at 0% 100%,#000 0,#000 calc(var(--radius) - var(--expand)),transparent var(--radius),transparent 100%),radial-gradient(circle at 100% 100%,#000 0,#000 calc(var(--radius) - var(--expand)),transparent var(--radius),transparent 100%),linear-gradient(to bottom,#000 0,#000),linear-gradient(to left,#000 0,#000),linear-gradient(to top,#000 0,#000),linear-gradient(to right,#000 0,#000),linear-gradient(to bottom,#000 0,transparent var(--expand)),linear-gradient(to left,#000 0,transparent var(--expand)),linear-gradient(to top,#000 0,transparent var(--expand)),linear-gradient(to right,#000 0,transparent var(--expand));mask-image:radial-gradient(circle at 0% 0%,#000 0,#000 calc(var(--radius) - var(--expand)),transparent var(--radius),transparent 100%),radial-gradient(circle at 100% 0%,#000 0,#000 calc(var(--radius) - var(--expand)),transparent var(--radius),transparent 100%),radial-gradient(circle at 0% 100%,#000 0,#000 calc(var(--radius) - var(--expand)),transparent var(--radius),transparent 100%),radial-gradient(circle at 100% 100%,#000 0,#000 calc(var(--radius) - var(--expand)),transparent var(--radius),transparent 100%),linear-gradient(to bottom,#000 0,#000),linear-gradient(to left,#000 0,#000),linear-gradient(to top,#000 0,#000),linear-gradient(to right,#000 0,#000),linear-gradient(to bottom,#000 0,transparent var(--expand)),linear-gradient(to left,#000 0,transparent var(--expand)),linear-gradient(to top,#000 0,transparent var(--expand)),linear-gradient(to right,#000 0,transparent var(--expand));-webkit-mask-size:var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),100% 100%,100% 100%,100% 100%,100% 100%;mask-size:var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),var(--radius) var(--radius),100% 100%,100% 100%,100% 100%,100% 100%;-webkit-mask-position:100% 100%,0 100%,100% 0,0% 0,0 0,100% 0,0 100%,100% 100%,0 0,0 0,0 0,0 0;mask-position:100% 100%,0 100%,100% 0,0% 0,0 0,100% 0,0 100%,100% 100%,0 0,0 0,0 0,0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:xor,xor,xor,xor,source-over,source-over,source-over,source-over,source-over,source-over,source-over;mask-composite:exclude,exclude,exclude,exclude,add,add,add,add,add,add,add;box-shadow:inset 2px 2px var(--expand) 0 #ffffff4d,inset -2px -2px var(--expand) 0 #0000001a;filter:contrast(1.2) brightness(.95)}.cfz-liquid-glass-rect:after{content:"";position:absolute;z-index:-2;width:100%;height:100%;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border-radius:var(--radius);pointer-events:none}.cfz-liquid-glass-circle{position:relative;border-radius:50%}.cfz-liquid-glass-circle:before{content:"";display:block;position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border-radius:50%;-webkit-backdrop-filter:blur(var(--strength));backdrop-filter:blur(var(--strength));pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000),radial-gradient(circle closest-side at center,#000 0,#000 calc(100% - var(--expand)),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000),radial-gradient(circle closest-side at center,#000 0,#000 calc(100% - var(--expand)),transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-out;mask-composite:subtract;box-shadow:inset 2px 2px var(--expand) 0 #ffffff4d,inset -2px -2px var(--expand) 0 #0000001a;filter:contrast(1.2) brightness(.95)}.cfz-liquid-glass-circle:after{content:"";position:absolute;z-index:-2;top:1px;left:1px;width:calc(100% - 2px);height:calc(100% - 2px);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border-radius:50%;pointer-events:none}
