.nav{--nav-font: var(--font-display, "Fredoka", system-ui, sans-serif);--nav-ease: var(--ease, cubic-bezier(.34, 1.56, .64, 1));--nav-height: 50px;position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;height:calc(var(--nav-height) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 28px 0;box-sizing:border-box;transition:color .4s ease}.nav:before{content:"";position:fixed;top:0;left:0;right:0;height:calc(var(--nav-height) + env(safe-area-inset-top,0px));background:var(--nav-bg, rgba(255, 255, 255, .5));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:-1;transition:background .4s ease}.brand{justify-self:start;display:flex;align-items:center}.brand-logo{height:34px;width:auto;display:block;opacity:0;transition:opacity .9s ease}.brand-logo.show{opacity:1}.nav-links,.lang-switch{opacity:0;transition:opacity .9s ease}.nav-links.show,.lang-switch.show{opacity:1}.nav-links{justify-self:center;display:flex;align-items:center;gap:24px;font-family:var(--nav-font);font-weight:500}.nav-links a{color:var(--nav-text, #2b565b);text-decoration:none;transition:color .4s ease,opacity .2s ease}.nav-links a:hover{opacity:.65}.lang-switch{justify-self:end;display:inline-flex;align-items:center;gap:7px;font-family:var(--nav-font);font-weight:600;font-size:.9rem;color:var(--nav-text, #2b565b);background:transparent;border:1.5px solid currentColor;border-radius:999px;padding:7px 16px;cursor:pointer;transition:color .4s ease,background .2s ease,transform .2s var(--nav-ease),opacity .9s ease}.lang-switch:hover{background:color-mix(in srgb,currentColor 12%,transparent);transform:translateY(-1px)}.lang-switch:active{transform:translateY(0) scale(.97)}.lang-switch-label{line-height:1}.nav[data-nav-mood=light]{--nav-text: #2b565b;--nav-bg: rgba(255, 255, 255, .55)}.nav[data-nav-mood=dark]{--nav-text: #fff8ef;--nav-bg: rgba(27, 34, 38, .55)}.nav[data-nav-mood=hero]{--nav-text: #ffffff;--nav-bg: rgba(41, 160, 163, .5)}.nav[data-nav-mood=water]{--nav-text: #eafaff;--nav-bg: rgba(2, 30, 70, .45)}@media (max-width: 720px){.nav{padding-left:18px;padding-right:18px}.nav-links{gap:14px;font-size:.9rem}.lang-switch{font-size:.85rem;padding:6px 14px}}@media (max-width: 560px){.nav-links{display:none}}@media (prefers-reduced-motion: reduce){.brand-logo,.nav-links,.lang-switch{opacity:1}}
