/* Shared top navigation for pages built on style.css (documentation). Mirrors the nav in landing.css. */
.nav-bar {
  --n-fg: #f0f0f0; --n-fg-2: #a1a4a8; --n-fg-3: #6b6f76; --n-line: rgb(255 255 255 / 12%);
  --n-bg: rgb(0 0 0 / 70%); --n-pill-bg: #f0f0f0; --n-pill-fg: #000;
  position: sticky; top: 0; z-index: 50; background: var(--n-bg); border-bottom: 1px solid transparent;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-theme="light"] .nav-bar { --n-fg: #0b0b0c; --n-fg-2: #52565d; --n-fg-3: #80848b; --n-line: rgb(0 0 0 / 12%); --n-bg: rgb(255 255 255 / 75%); --n-pill-bg: #0b0b0c; --n-pill-fg: #fff; }
.nav-bar .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .nav-bar .container { padding: 0 20px; } }
.nav-bar .nav-inner { display: flex; align-items: center; gap: 32px; height: 64px; }
.nav-bar .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--n-fg); font-weight: 600; letter-spacing: -0.02em; font-size: 1rem; text-decoration: none; }
.nav-bar .logo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.nav-bar .nav-links { display: flex; gap: 28px; margin: 0 auto; font-size: 0.92rem; }
.nav-bar .nav-links a { color: var(--n-fg-2); text-decoration: none; transition: color 160ms; }
.nav-bar .nav-links a:hover, .nav-bar .nav-links a[aria-current="page"] { color: var(--n-fg); }
.nav-bar .nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-bar .theme-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--n-line); background: transparent; color: var(--n-fg-2); cursor: pointer; transition: color 160ms, border-color 160ms; }
.nav-bar .theme-btn:hover { color: var(--n-fg); border-color: var(--n-fg-3); }
.nav-bar .theme-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-bar .i-moon { display: none; }
:root[data-theme="light"] .nav-bar .i-sun { display: none; }
:root[data-theme="light"] .nav-bar .i-moon { display: block; }
.nav-bar .pill { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 10px; background: var(--n-pill-bg); color: var(--n-pill-fg); font-weight: 600; font-size: 0.88rem; letter-spacing: -0.01em; text-decoration: none; transition: opacity 200ms, transform 200ms; }
.nav-bar .pill:hover { opacity: 0.9; transform: translateY(-1px); }
@media (max-width: 900px) { .nav-bar .nav-links { display: none; } .nav-bar .nav-actions { margin-left: auto; } }