<nav class="sticky top-0 z-50 border-b" style="background: rgba(248,249,252,0.88); backdrop-filter: blur(12px); border-color: rgba(100,130,180,0.08);">
    <div class="max-w-3xl mx-auto px-6 h-14 flex items-center justify-between">
        <a href="/" class="text-base font-semibold tracking-tight text-bright" hx-boost="true">Congo</a>
        <div class="hidden sm:flex items-center gap-0.5" hx-boost="true">
            <a href="/tutorial" class="nav-link">Tutorial</a>
            <a href="/guide" class="nav-link">Guide</a>
            <a href="/philosophy" class="nav-link">Philosophy</a>
            <a href="/download" class="nav-link">Download</a>
            <a href="/source" class="nav-link">Source</a>
            <div class="ml-2 pl-2" style="border-left: 1px solid rgba(100,130,180,0.12);">
                {{template "star.html" .}}
            </div>
        </div>
        <details class="sm:hidden relative">
            <summary class="list-none cursor-pointer p-2 text-muted">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5"/>
                </svg>
            </summary>
            <div class="absolute right-0 top-full mt-2 py-2 w-40 border bg-white z-50 rounded shadow-lg" style="border-color: rgba(100,130,180,0.1);" hx-boost="true">
                <a href="/tutorial" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Tutorial</a>
                <a href="/guide" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Guide</a>
                <a href="/philosophy" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Philosophy</a>
                <a href="/download" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Download</a>
                <a href="/source" class="mobile-nav-link block px-4 py-2 text-sm text-body hover:text-bright transition-colors">Source</a>
                <div class="px-4 py-2">{{template "star.html" .}}</div>
            </div>
        </details>
    </div>
</nav>
<script nonce="{{nonce}}">
(function() {
    var path = location.pathname;
    document.querySelectorAll('nav .nav-link').forEach(function(a) {
        if (a.pathname === path || (a.pathname !== '/' && path.startsWith(a.pathname))) {
            a.classList.add('nav-link-active');
        }
    });
    document.querySelectorAll('nav .mobile-nav-link').forEach(function(a) {
        if (a.pathname === path || (a.pathname !== '/' && path.startsWith(a.pathname))) {
            a.classList.remove('text-body');
            a.classList.add('text-accent');
        }
    });
})();
</script>