*{margin:0;padding:0;box-sizing:border-box}body{background-image:url(./background.avif);background-size:cover;background-position:center;min-height:300vh;font-family:Roboto,sans-serif}.fixBox{position:fixed;top:0;left:50%;transform:translate(-50%);width:100%;height:100vh;padding:48px;display:grid;grid-template:repeat(auto-fill,80px) / repeat(auto-fill,320px);gap:48px}button{appearance:none;background:none;border:none}.material-symbols-rounded{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 48}.rect{width:320px;height:80px;padding:0 36px;--radius: 40px;--strength: 30px;--blur: 0px;background-color:#5050501a;display:flex;align-items:center;justify-content:space-between;button{display:flex;flex-direction:column;color:#fff;font-size:14px;&.current{color:#fe365f}.icon{font-size:36px}}}.circle{--blur: 10px;width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-size:36px;color:#333;background-color:#fff6;.icon{font-size:48px}}@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);&:before{content:"";display:block;position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border-radius:var(--radius);backdrop-filter:blur(var(--strength));pointer-events:none;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 100%),linear-gradient(to left,#000 0 100%),linear-gradient(to top,#000 0 100%),linear-gradient(to right,#000 0 100%),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-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-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-repeat:no-repeat;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)}&:after{content:"";position:absolute;z-index:-2;width:100%;height:100%;backdrop-filter:blur(var(--blur));border-radius:var(--radius);pointer-events:none}}.cfz-liquid-glass-circle{position:relative;border-radius:50%;&:before{content:"";display:block;position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border-radius:50%;backdrop-filter:blur(var(--strength));pointer-events:none;mask-image:linear-gradient(to bottom,#000 0 100%),radial-gradient(circle closest-side at center,#000 0,#000 calc(100% - var(--expand)),transparent 100%);mask-repeat:no-repeat;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)}&:after{content:"";position:absolute;z-index:-2;top:1px;left:1px;width:calc(100% - 2px);height:calc(100% - 2px);backdrop-filter:blur(var(--blur));border-radius:50%;pointer-events:none}}