.glassnav{--opt-w:clamp(44px, 17vw, 64px);--opt-h:48px;--opt-gap:2px;--pad:5px;--active:0;align-items:center;gap:var(--opt-gap);padding:var(--pad);isolation:isolate;background:color-mix(in srgb, var(--background) 52%, transparent);border:1px solid color-mix(in srgb, var(--foreground) 10%, transparent);-webkit-backdrop-filter:blur(12px)saturate(180%);backdrop-filter:blur(12px)saturate(180%);border-radius:999px;display:inline-flex;position:relative;box-shadow:inset 0 1px #ffffff5c,0 10px 30px -12px #00000080}@supports ((-webkit-backdrop-filter:url(#lg)) or (backdrop-filter:url(#lg))){.glassnav{-webkit-backdrop-filter:url(#lg)blur(3px)saturate(180%);backdrop-filter:url(#lg)blur(3px)saturate(180%)}}@media (prefers-reduced-transparency:reduce){.glassnav{background:var(--background);-webkit-backdrop-filter:none;backdrop-filter:none}}.glassnav__thumb{top:var(--pad);left:var(--pad);width:var(--opt-w);height:var(--opt-h);background:color-mix(in srgb, var(--primary) 18%, transparent);border:1px solid color-mix(in srgb, var(--primary) 22%, transparent);-webkit-backdrop-filter:blur(8px)saturate(160%);backdrop-filter:blur(8px)saturate(160%);transform:translateX(calc((var(--opt-w) + var(--opt-gap)) * var(--active)));pointer-events:none;border-radius:999px;transition:transform .38s cubic-bezier(.22,1,.36,1);position:absolute;box-shadow:inset 0 1px #ffffff5c,0 4px 12px -4px #00000059}@supports ((-webkit-backdrop-filter:url(#lg)) or (backdrop-filter:url(#lg))){.glassnav__thumb{-webkit-backdrop-filter:url(#lg)blur(2px)saturate(160%);backdrop-filter:url(#lg)blur(2px)saturate(160%)}}.glassnav__item{z-index:1;width:var(--opt-w);height:var(--opt-h);color:color-mix(in srgb, var(--foreground) 65%, transparent);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:2px;transition:color .2s,transform .16s cubic-bezier(.23,1,.32,1);display:flex;position:relative}.glassnav__item:hover{color:color-mix(in srgb, var(--foreground) 75%, transparent)}.glassnav__item:active{transform:scale(.9)}.glassnav__item[data-active=true]{color:var(--foreground)}.glassnav__item:focus-visible{outline:2px solid var(--ring);outline-offset:3px}.glassnav__item svg{width:20px;height:20px}.glassnav__label{letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:9px;font-weight:500;line-height:1;overflow:hidden}.glassnav__item[data-active=true] .glassnav__label{font-weight:600}@media (prefers-reduced-motion:reduce){.glassnav__thumb{transition:none}}