.lq-scope{--lq-bg:var(--ui-white);--lq-fg:var(--ui-near-black)}@property --lq-a1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --lq-a2{syntax:"<angle>";inherits:false;initial-value:-45deg}.lq-glass{--lq-time:var(--duration-fast);--lq-ease:var(--ease-standard);--lq-border:var(--glass-edge);isolation:isolate;color:oklch(from var(--lq-fg) l c h / 90%);-webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(var(--glass-blur-liquid));backdrop-filter:blur(var(--glass-blur-liquid));transition:all var(--lq-time) var(--lq-ease);background:linear-gradient(-75deg, oklch(from var(--lq-bg) l c h / 5%), oklch(from var(--lq-bg) l c h / 20%), oklch(from var(--lq-bg) l c h / 5%));box-shadow:inset 0 .125em .125em oklch(from var(--lq-fg) l c h / 5%), inset 0 -.125em .125em oklch(from var(--lq-bg) l c h / 50%), 0 .25em .125em -.125em oklch(from var(--lq-fg) l c h / 20%), 0 0 .1em .25em inset oklch(from var(--lq-bg) l c h / 20%);position:relative}.lq-glass:where(button){font:inherit;text-align:inherit;border:0}.lq-glass:where(a){text-decoration:none}.lq-glass:where(a,button){cursor:pointer}.lq-pill{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-pill);min-height:var(--target-min);padding:var(--space-2) var(--space-5);display:inline-flex}.lq-panel{border-radius:var(--lq-radius,var(--radius-card));display:block}.lq-glass:before{content:"";z-index:1;inset:calc(var(--lq-border) / -2);border-radius:inherit;padding:var(--lq-border);box-sizing:border-box;background:conic-gradient(from var(--lq-a1) at 50% 50%, oklch(from var(--lq-fg) l c h / 50%) 0%, transparent 5% 40%, oklch(from var(--lq-fg) l c h / 50%) 50%, transparent 60% 95%, oklch(from var(--lq-fg) l c h / 50%) 100%), linear-gradient(180deg, oklch(from var(--lq-bg) l c h / 50%), oklch(from var(--lq-bg) l c h / 50%));transition:all var(--lq-time) var(--lq-ease), --lq-a1 var(--duration-base) var(--lq-ease);box-shadow:inset 0 0 0 calc(var(--lq-border) / 2) oklch(from var(--lq-bg) l c h / 50%);pointer-events:none;position:absolute;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.lq-glass:after{content:"";z-index:-1;inset:calc(var(--lq-border) / 2);border-radius:inherit;background:linear-gradient(var(--lq-a2), transparent 0%, oklch(from var(--lq-bg) l c h / 50%) 40% 50%, transparent 55%);mix-blend-mode:screen;pointer-events:none;transition:background-position calc(var(--lq-time) * 1.25) var(--lq-ease), --lq-a2 calc(var(--lq-time) * 1.25) var(--lq-ease);background-position:0%;background-size:200% 200%;position:absolute;overflow:clip}.lq-glass:hover:before,.lq-glass:focus-visible:before{--lq-a1:-125deg}.lq-glass:hover:after,.lq-glass:focus-visible:after{background-position:25%}.lq-glass:where(a,button):hover{-webkit-backdrop-filter:blur(.01em);backdrop-filter:blur(.01em);box-shadow:inset 0 .125em .125em oklch(from var(--lq-fg) l c h / 5%), inset 0 -.125em .125em oklch(from var(--lq-bg) l c h / 50%), 0 .15em .05em -.1em oklch(from var(--lq-fg) l c h / 25%), 0 0 .05em .1em inset oklch(from var(--lq-bg) l c h / 50%);transform:scale(.985)}.lq-glass:where(a,button):active{transform:scale(.97)}.lq-glass:where(a,button):active:before{--lq-a1:-75deg}.lq-glass:where(a,button):active:after{--lq-a2:-15deg;background-position:50% 15%}.lq-glass:focus-visible{outline:var(--stroke-focus) solid color-mix(in srgb, var(--lq-fg) 45%, transparent);outline-offset:var(--stroke-focus)}@media (hover:none) and (pointer:coarse){.lq-glass:before,.lq-glass:hover:before,.lq-glass:where(a,button):active:before{--lq-a1:-75deg}.lq-glass:after,.lq-glass:where(a,button):active:after{--lq-a2:-45deg}}@media (prefers-reduced-motion:reduce){.lq-glass,.lq-glass:before,.lq-glass:after{transition-duration:10ms}.lq-glass:where(a,button):hover,.lq-glass:where(a,button):active{transform:none}}
