.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: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 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:light-dark(hsl(0 0% 100% / var(--glass-frost, 0)),hsl(0 0% 0% / var(--glass-frost, 0)));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: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 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--static{background:light-dark(hsl(0 0% 100% / calc(.08 + var(--glass-frost, 0))),hsl(0 0% 100% / calc(.04 + var(--glass-frost, 0))));box-shadow:inset 0 0 0 1px light-dark(hsl(0 0% 100% / .32),hsl(0 0% 100% / .18))}.glass-surface__sheen,.glass-surface__rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none}.glass-surface__sheen{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,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: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:light-dark(color-mix(in oklch,black,transparent 90%),color-mix(in oklch,white,transparent 85%))}.glass-surface--fallback .glass-surface__line{background:light-dark(color-mix(in oklch,black,transparent 88%),color-mix(in oklch,white,transparent 72%))}.glass-surface--fallback .glass-surface__glow{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:light-dark(hsl(0 0% 100% / .72),hsl(0 0% 12% / .72))}}.glass-surface:focus-visible{outline:2px solid light-dark(#007aff,#0a84ff);outline-offset:2px}