.glass-circle{--frost:14px;--edge-inner:#ffffff2e;--shadow:#00000047;--bg:#ffffff14;--edge:#ffffff8c;--inner-shadow:#00000047;--gloss:#ffffff40;--gloss-2:#ffffff1f;position:relative;display:grid;place-items:center;border-radius:50%;width:72px;height:72px;background:var(--bg);backdrop-filter:blur(var(--frost)) saturate(1.25) contrast(1.05);-webkit-backdrop-filter:blur(var(--frost)) saturate(1.25) contrast(1.05);border:1px solid var(--edge);isolation:isolate;overflow:hidden;box-shadow:0 4px 8px -12px var(--shadow),0 6px 6px #00000026,inset 0 1px 2px var(--edge-inner),inset 0 8px 18px -8px var(--inner-shadow);transition:transform .2s ease}.glass-circle:after{background:conic-gradient(from 120deg,transparent 0 20%,rgba(198,198,249,.12) 20% 40%,transparent 40% 60%,rgba(248,137,127,.1) 60% 80%,transparent 80% 100%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));opacity:.55}.glass-circle:after,.glass-circle:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}.glass-circle:before{background:linear-gradient(to bottom,var(--gloss) 0,transparent 55%) top/100% 60% no-repeat,linear-gradient(135deg,var(--gloss-2) 0,transparent 55%);mix-blend-mode:screen}.glass-circle:hover{transform:scale(1.07)}.glass-circle:active{transform:scale(.93);transition:transform .1s ease}