@layer components {
  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .nav.scrolled { border-bottom-color: var(--line-2); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent); }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
  }
}