.glass-surface{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .26s ease-out}.glass-surface__filter{width:100%;height:100%;pointer-events:none;position:absolute;inset:0;opacity:0;z-index:-1}.glass-surface__content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:inherit;position:relative;z-index:1}.glass-surface--svg{background:hsl(0 0% 0% / var(--glass-frost, 0));background:light-dark(hsl(0 0% 100% / var(--glass-frost, 0)),hsl(0 0% 0% / var(--glass-frost, 0)));backdrop-filter:var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));box-shadow:0 0 2px 1px #ffffff59 inset,0 0 10px 4px #ffffff26 inset,0 4px 16px #11111a0d,0 8px 24px #11111a0d,0 16px 56px #11111a0d,0 4px 16px #11111a0d inset,0 8px 24px #11111a0d inset,0 16px 56px #11111a0d inset;box-shadow:0 0 2px 1px light-dark(color-mix(in oklch,black,transparent 85%),color-mix(in oklch,white,transparent 65%)) inset,0 0 10px 4px light-dark(color-mix(in oklch,black,transparent 90%),color-mix(in oklch,white,transparent 85%)) inset,0 4px 16px #11111a0d,0 8px 24px #11111a0d,0 16px 56px #11111a0d,0 4px 16px #11111a0d inset,0 8px 24px #11111a0d inset,0 16px 56px #11111a0d inset}.glass-surface--webgl{box-shadow:0 4px 16px #11111a0d,0 8px 24px #11111a0d,0 16px 56px #11111a0d}.glass-surface__canvas,.glass-surface__frame{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}.glass-surface__frame{background:hsl(0 0% 0% / var(--glass-frost, 0));background:light-dark(hsl(0 0% 100% / var(--glass-frost, 0)),hsl(0 0% 0% / var(--glass-frost, 0)));box-shadow:0 0 2px 1px #ffffff59 inset,0 0 10px 4px #ffffff26 inset,0 4px 16px #11111a0d inset,0 8px 24px #11111a0d inset,0 16px 56px #11111a0d inset;box-shadow:0 0 2px 1px light-dark(color-mix(in oklch,black,transparent 85%),color-mix(in oklch,white,transparent 65%)) inset,0 0 10px 4px light-dark(color-mix(in oklch,black,transparent 90%),color-mix(in oklch,white,transparent 85%)) inset,0 4px 16px #11111a0d inset,0 8px 24px #11111a0d inset,0 16px 56px #11111a0d inset}.glass-surface--fallback{background:hsl(0 0% 100% / calc(.04 + var(--glass-frost, 0) * .3));background:light-dark(hsl(0 0% 100% / calc(.12 + var(--glass-frost, 0) * .5)),hsl(0 0% 100% / calc(.04 + var(--glass-frost, 0) * .3)));-webkit-backdrop-filter:blur(12px) saturate(calc(var(--glass-saturation, 1) * 1.4)) brightness(1.04);backdrop-filter:blur(12px) saturate(calc(var(--glass-saturation, 1) * 1.4)) brightness(1.04);box-shadow:inset 0 1px #ffffff4d,inset 0 -1px #ffffff14,0 0 2px 1px #ffffff47 inset,0 0 12px 3px #ffffff1a inset,0 4px 16px #11111a0f,0 8px 24px #11111a0f,0 16px 56px #11111a0f;box-shadow:inset 0 1px 0 0 light-dark(hsl(0 0% 100% / .85),hsl(0 0% 100% / .3)),inset 0 -1px 0 0 light-dark(hsl(0 0% 100% / .35),hsl(0 0% 100% / .08)),0 0 2px 1px light-dark(color-mix(in oklch,black,transparent 88%),color-mix(in oklch,white,transparent 72%)) inset,0 0 12px 3px light-dark(color-mix(in oklch,white,transparent 72%),color-mix(in oklch,white,transparent 90%)) inset,0 4px 16px #11111a0f,0 8px 24px #11111a0f,0 16px 56px #11111a0f}.glass-surface__sheen,.glass-surface__rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.glass-surface__sheen{background:linear-gradient(135deg,hsl(0 0% 100% / .14) 0%,transparent 42%,transparent 64%,hsl(0 0% 100% / .05) 100%);background:linear-gradient(135deg,light-dark(hsl(0 0% 100% / .42),hsl(0 0% 100% / .14)) 0%,transparent 42%,transparent 64%,light-dark(hsl(0 0% 100% / .18),hsl(0 0% 100% / .05)) 100%)}.glass-surface__rim{padding:3px;background:linear-gradient(150deg,#ffffff57,#ffffff08 45%,#ffffff05 60%,#ffffff2e);background:linear-gradient(150deg,light-dark(hsl(0 0% 100% / .7),hsl(0 0% 100% / .34)),light-dark(hsl(0 0% 100% / .1),hsl(0 0% 100% / .03)) 45%,light-dark(hsl(0 0% 100% / .08),hsl(0 0% 100% / .02)) 60%,light-dark(hsl(0 0% 100% / .42),hsl(0 0% 100% / .18)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.glass-surface__line,.glass-surface__glow{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}.glass-surface--svg .glass-surface__line,.glass-surface--webgl .glass-surface__line{background:#ffffff59;background:light-dark(color-mix(in oklch,black,transparent 85%),color-mix(in oklch,white,transparent 65%))}.glass-surface--svg .glass-surface__glow,.glass-surface--webgl .glass-surface__glow{background:#ffffff26;background:light-dark(color-mix(in oklch,black,transparent 90%),color-mix(in oklch,white,transparent 85%))}.glass-surface--fallback .glass-surface__line{background:#ffffff47;background:light-dark(color-mix(in oklch,black,transparent 88%),color-mix(in oklch,white,transparent 72%))}.glass-surface--fallback .glass-surface__glow{background:#ffffff1a;background:light-dark(color-mix(in oklch,white,transparent 72%),color-mix(in oklch,white,transparent 90%))}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.glass-surface--fallback{background:#1f1f1fb8;background:light-dark(hsl(0 0% 100% / .72),hsl(0 0% 12% / .72))}}.glass-surface:focus-visible{outline:2px solid #0a84ff;outline:2px solid light-dark(#007aff,#0a84ff);outline-offset:2px}.glass-surface--svg,.glass-surface--fallback{background:rgba(0,0,0,var(--glass-frost, .1));-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.glass-surface--svg:before,.glass-surface--fallback:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}.glass-surface--svg:before{backdrop-filter:var(--filter-id) saturate(var(--glass-saturation, 1))}.glass-surface--fallback:before{-webkit-backdrop-filter:blur(1.2px) saturate(calc(var(--glass-saturation, 1) * 1.2)) brightness(1.04);backdrop-filter:blur(1.2px) saturate(calc(var(--glass-saturation, 1) * 1.2)) brightness(1.04)}.glass-surface__frame{background:transparent;box-shadow:inset 0 0 2px 1px #ffffff59,inset 0 0 10px 4px #ffffff26,inset 0 4px 16px #11111a0d,inset 0 8px 24px #11111a0d,inset 0 16px 56px #11111a0d}.glass-surface--fallback>.glass-surface__rim{padding:2px;background:linear-gradient(150deg,#ffffff80,#ffffff14 38%,#ffffff0d 60%,#ffffff52)}.glass-surface__lens{display:none}@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){html[data-glass-lens] .glass-surface--fallback>.glass-surface__lens{display:block;position:absolute;inset:0;padding:var(--glass-lens, 11px);border-radius:inherit;pointer-events:none;-webkit-backdrop-filter:blur(9px) saturate(1.9) brightness(1.3);backdrop-filter:blur(9px) saturate(1.9) brightness(1.3);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}}.glass-surface--fallback>.glass-surface__frame{box-shadow:inset 0 0 2px 1px #ffffff59,inset 0 0 14px 6px #ffffff1a,inset 0 1px #ffffff38,inset 0 -1px #ffffff0f,inset 0 4px 16px #11111a0d,inset 0 8px 24px #11111a0d}.glass-surface--fallback>.glass-surface__sheen{opacity:.22}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.glass-surface--fallback{background:#0f161de6}}
