.liquid-glass-nav-container{position:fixed;bottom:1rem;left:50%;z-index:60}.liquid-glass-nav{position:relative;display:flex;align-items:center;height:64px;padding:8px;gap:4px;border-radius:99em;background-color:color-mix(in srgb,var(--c-glass) 12%,transparent);backdrop-filter:blur(8px) saturate(var(--saturation));-webkit-backdrop-filter:blur(8px) saturate(var(--saturation));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 10%),transparent),inset 1.8px 3px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 90%),transparent),inset -2px -2px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 80%),transparent),inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 60%),transparent),inset -.3px -1px 4px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 12%),transparent),inset -1.5px 2.5px 0 -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 0 3px 4px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 2px -6.5px 1px -4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 1px 5px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 6px 16px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 8%),transparent)}.liquid-glass-nav-indicator{position:absolute;left:8px;top:8px;width:68px;height:calc(100% - 16px);border-radius:99em;z-index:0;background-color:color-mix(in srgb,var(--c-glass) 36%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 10%),transparent),inset 2px 1px 0 -1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 90%),transparent),inset -1.5px -1px 0 -1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 80%),transparent),inset -2px -6px 1px -5px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 60%),transparent),inset -1px 2px 3px -1px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 0 -4px 1px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 3px 6px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 8%),transparent);translate:calc(var(--active-index, 0) * (68px + 4px)) 0;transition:translate .4s cubic-bezier(.65,0,.35,1)}.liquid-glass-nav[data-direction=left] .liquid-glass-nav-indicator{transform-origin:right}.liquid-glass-nav[data-direction=right] .liquid-glass-nav-indicator{transform-origin:left}.liquid-glass-nav-indicator.animating{animation:nav-squash .4s cubic-bezier(.65,0,.35,1)}.liquid-glass-nav-item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:68px;height:100%;border-radius:99em;color:hsl(var(--muted-foreground));transition:color .3s}.liquid-glass-nav-item.is-active,.liquid-glass-nav-item:hover{color:hsl(var(--foreground))}.liquid-glass-nav-icon{width:20px;height:20px}.liquid-glass-nav-label{font-size:11px;font-weight:500}@keyframes nav-squash{50%{scale:1.3 1}}.liquid-glass-elevated-button{position:relative;display:flex;align-items:center;justify-content:center;padding:0 16px;height:100%;border-radius:99em;border:none;cursor:pointer;background-color:color-mix(in srgb,var(--c-glass) 36%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 10%),transparent),inset 2px 1px 0 -1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 90%),transparent),inset -1.5px -1px 0 -1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 80%),transparent),inset -2px -6px 1px -5px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 60%),transparent),inset -1px 2px 3px -1px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 0 -4px 1px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 3px 6px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 8%),transparent);color:hsl(var(--foreground));transition:all .2s cubic-bezier(.4,0,.2,1)}.liquid-glass-elevated-button:hover{background-color:color-mix(in srgb,var(--c-glass) 45%,transparent)}.liquid-glass-elevated-button:active{transform:scale(.97);transition-duration:.1s}.liquid-glass-elevated-button.icon-only{padding:0}.dark .liquid-glass-elevated-button.dark-style,.liquid-glass-elevated-button.dark-style{background-color:color-mix(in srgb,hsl(var(--foreground)) 85%,transparent);color:hsl(var(--background))}.liquid-glass-button{--foreground:hsl(222.2 84% 4.9%);--c-glass:#bbbbbc;--c-light:#fff;--c-dark:#000;--glass-reflex-light:1;--glass-reflex-dark:1;--saturation:150%;position:relative;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 24px;border:none;border-radius:99em;font-weight:300;color:hsl(var(--foreground));background-color:color-mix(in srgb,var(--c-glass) 12%,transparent);backdrop-filter:blur(8px) saturate(var(--saturation));-webkit-backdrop-filter:blur(8px) saturate(var(--saturation));transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 10%),transparent),inset 1.8px 3px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 90%),transparent),inset -2px -2px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 80%),transparent),inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 60%),transparent),inset -.3px -1px 4px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 12%),transparent),inset -1.5px 2.5px 0 -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 0 3px 4px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 2px -6.5px 1px -4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 1px 5px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 6px 16px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 8%),transparent)}.liquid-glass-button:hover{background-color:color-mix(in srgb,var(--c-glass) 20%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 15%),transparent),inset 1.8px 3px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 95%),transparent),inset -2px -2px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 85%),transparent),inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 65%),transparent),inset -.3px -1px 4px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 15%),transparent),inset -1.5px 2.5px 0 -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 25%),transparent),inset 0 3px 4px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 25%),transparent),inset 2px -6.5px 1px -4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 15%),transparent),0 2px 8px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 15%),transparent),0 8px 20px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 12%),transparent)}.liquid-glass-button:active{transform:scale(.96)}.liquid-glass-button:disabled{opacity:.5;cursor:not-allowed;transform:scale(1)}.liquid-glass-button:focus,.liquid-glass-button:focus-visible{outline:none}.dark .liquid-glass-button{--foreground:0 0% 98%;--c-glass:hsl(0 0% 16%/0.7);--c-light:hsl(0 0% 100%);--c-dark:hsl(0 0% 0%);--glass-reflex-light:0.65;--glass-reflex-dark:1;--saturation:90%}:where(.liquid-glass-button--dark,.dark .liquid-glass-button){--foreground:0 0% 98%;--c-glass:hsl(0 0% 16%/0.7);--c-light:hsl(0 0% 100%);--c-dark:hsl(0 0% 0%);--glass-reflex-light:0.65;--glass-reflex-dark:1;--saturation:90%}.dark .liquid-glass-button,.liquid-glass-button--dark{color:hsl(var(--foreground));background-color:color-mix(in srgb,var(--c-glass) 30%,transparent);backdrop-filter:blur(8px) saturate(var(--saturation));-webkit-backdrop-filter:blur(8px) saturate(var(--saturation));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 10%),transparent),inset 1.8px 3px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 90%),transparent),inset -2px -2px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 80%),transparent),inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 60%),transparent),inset -.3px -1px 4px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 12%),transparent),inset -1.5px 2.5px 0 -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 0 3px 4px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 20%),transparent),inset 2px -6.5px 1px -4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 1px 5px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 10%),transparent),0 6px 16px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 8%),transparent)}.dark .liquid-glass-button:hover,.liquid-glass-button--dark:hover{background-color:color-mix(in srgb,var(--c-glass) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 15%),transparent),inset 1.8px 3px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 95%),transparent),inset -2px -2px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 85%),transparent),inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 65%),transparent),inset -.3px -1px 4px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 15%),transparent),inset -1.5px 2.5px 0 -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 25%),transparent),inset 0 3px 4px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 25%),transparent),inset 2px -6.5px 1px -4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 15%),transparent),0 2px 8px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 15%),transparent),0 8px 20px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 12%),transparent)}.dark .liquid-glass-button:active,.liquid-glass-button--dark:active{transform:scale(.96)}.dark .liquid-glass-button:disabled,.liquid-glass-button--dark:disabled{opacity:.5;cursor:not-allowed;transform:none}.dark .liquid-glass-button:focus,.dark .liquid-glass-button:focus-visible,.liquid-glass-button--dark:focus,.liquid-glass-button--dark:focus-visible{outline:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 15%),transparent),inset 1.8px 3px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 95%),transparent),inset -2px -2px 0 -2px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 85%),transparent),inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--glass-reflex-light) * 65%),transparent),inset -.3px -1px 4px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 15%),transparent),inset -1.5px 2.5px 0 -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 25%),transparent),inset 0 3px 4px -2px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 25%),transparent),inset 2px -6.5px 1px -4px color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 15%),transparent),0 2px 8px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 15%),transparent),0 8px 20px 0 color-mix(in srgb,var(--c-dark) calc(var(--glass-reflex-dark) * 12%),transparent)}