@layer theme,base;@layer components{.navbar{--nav-ease:cubic-bezier(.22, 1, .36, 1);z-index:50;pointer-events:none;height:4rem;position:sticky;top:12px}.navbar__bar{pointer-events:auto;--p:var(--nav-p,0);height:calc(4rem - var(--p) * .5rem);max-width:calc(100% - var(--p) * max(0px, 100% - 1080px));padding-inline:calc(16px - var(--p) * 2px) calc(10px - var(--p) * 4px);border-radius:var(--r-nav);background-color:color-mix(in oklab, var(--panel) calc(72% + var(--p) * 12%), transparent);-webkit-backdrop-filter:blur(calc(18px + var(--p) * 10px)) saturate(calc(1.4 + var(--p) * .4));backdrop-filter:blur(calc(18px + var(--p) * 10px)) saturate(calc(1.4 + var(--p) * .4));box-shadow:var(--shadow-elevation), 0 40px 80px -40px rgba(0, 0, 0, calc(var(--p) * .75));transition:height .18s ease-out, max-width .18s ease-out, padding .18s ease-out, translate .55s var(--nav-ease), opacity .4s ease;justify-content:space-between;align-items:center;gap:12px;margin-inline:auto;animation:.9s cubic-bezier(.16,1,.3,1) 50ms backwards navbar-drop;display:flex;position:relative}@media (min-width:1024px){.navbar__bar{grid-template-columns:1fr auto 1fr;display:grid}}.navbar__hairline{inset-inline:48px;pointer-events:none;background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--violet) 45%, transparent), color-mix(in oklab, var(--magenta) 45%, transparent), transparent);height:1px;bottom:0;inset-inline:calc(48px + var(--nav-p,0) * (28% - 48px));opacity:calc(.7 + var(--nav-p,0) * .3);transition:inset .18s ease-out;position:absolute}.navbar__home{border-radius:var(--r-icon);justify-self:start;align-items:center;min-height:44px;display:inline-flex}.navbar__home svg{transition:filter .3s ease, translate .3s var(--nav-ease)}.navbar__home:hover svg{filter:drop-shadow(0 0 10px color-mix(in oklab, var(--violet) 65%, transparent));translate:0 -1px}.navbar__links{display:none}@media (min-width:1024px){.navbar__links{align-items:center;gap:4px;display:flex}}.navbar__pill{z-index:-1;border-radius:var(--r-pill);background:color-mix(in oklab, var(--fg) 7%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--fg) 7%, transparent), inset 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent);position:absolute;inset:0}.navbar__actions{justify-self:end;align-items:center;gap:6px;display:flex}@media (min-width:640px){.navbar__actions{gap:8px}}.navbar__item{animation:.75s cubic-bezier(.16,1,.3,1) backwards navbar-item-in;animation-delay:calc(.2s + var(--i,0) * 55ms)}.navbar[data-hidden] .navbar__bar{opacity:0;pointer-events:none;transition-duration:.18s,.18s,.18s,.4s,.3s;transition-timing-function:ease-out,ease-out,ease-out,cubic-bezier(.4,0,1,1),ease-in;translate:0 calc(-100% - 20px)}.navbar__swap-in{animation:.5s cubic-bezier(.22,1,.36,1) navbar-swap-in}.navbar__pop{animation:.45s cubic-bezier(.34,1.56,.64,1) navbar-pop}.sheet.navbar__sheet[open]{transform-origin:100% 0;animation:.36s cubic-bezier(.16,1,.3,1) navbar-sheet-in}.sheet.navbar__sheet[open] .navbar__sheet-item{animation:.5s cubic-bezier(.16,1,.3,1) backwards navbar-item-in;animation-delay:calc(50ms + var(--i,0) * 45ms)}.sheet.navbar__sheet[data-closing]{pointer-events:none;animation:.2s cubic-bezier(.4,0,1,1) forwards navbar-sheet-out}.sheet.navbar__sheet[data-closing]::backdrop{animation:.2s forwards navbar-fade-out}@keyframes navbar-drop{0%{opacity:0;transform:translateY(-18px)scale(.98)}}@keyframes navbar-item-in{0%{opacity:0;filter:blur(4px);transform:translateY(-6px)}}@keyframes navbar-sheet-in{0%{opacity:0;transform:translateY(-10px)scale(.97)}}@keyframes navbar-sheet-out{to{opacity:0;transform:translateY(-8px)scale(.98)}}@keyframes navbar-fade-out{to{opacity:0}}@keyframes navbar-swap-in{0%{opacity:0;rotate:-90deg;scale:.5}}@keyframes navbar-pop{0%{scale:.4}}}@layer utilities;@media (prefers-reduced-motion:reduce){.navbar__bar,.navbar__item,.navbar__swap-in,.navbar__pop,.sheet.navbar__sheet[open],.sheet.navbar__sheet[open] .navbar__sheet-item{animation:none}.navbar__bar,.navbar__hairline,.navbar__home svg{transition:none}}