.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1200px,94%);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.4rem;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);border-radius:999px;box-shadow:var(--shadow)}
.logo{display:flex;flex-direction:column;font:900 .95rem/1 var(--font-head);font-stretch:125%;letter-spacing:.04em}
.logo span:last-child{color:var(--accent)}
.nav__menu{display:flex;align-items:center;gap:.6rem}
.nav__link{font-weight:700;padding:.55rem 1.1rem;border-radius:999px;transition:background .2s,color .2s}
.nav__link:hover{background:var(--ink);color:var(--bg)}
.nav__link.is-active{background:var(--accent);color:var(--accent-ink)}
.nav__burger{display:none;font-size:1.8rem;background:none;border:0;color:var(--ink);cursor:pointer}
@media (max-width:820px){
 .nav{border-radius:28px}
 .nav__burger{display:block}
 .nav__menu{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;padding:1rem;background:var(--surface);border-radius:24px;box-shadow:var(--shadow);display:none}
 .nav__menu.is-open{display:flex}
 .nav__menu .btn-icon{align-self:flex-start}
}

.logo{display:flex;align-items:center}
.logo__img{height:30px;width:auto;display:block}
.logo__img--dark{display:none}
[data-theme="dark"] .logo__img--light{display:none}
[data-theme="dark"] .logo__img--dark{display:block}
@media (max-width:820px){.logo__img{height:25px}}