#nav {
    display: flex;
    gap: var(--space-md);
    padding: 0.875rem var(--space-2xl);
    border-bottom: 0.0625rem solid var(--color-border);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: wrap;
    backdrop-filter: blur(0.625rem);
    background: color-mix(in srgb, var(--color-white) 80%, transparent);
}

#nav button {
    padding: var(--radius-md) var(--space-lg);
    border: 0.0625rem solid var(--color-border);
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    letter-spacing: 0.0125rem;
    box-shadow: 0 0.125rem 0.375rem color-mix(in srgb, var(--color-text-primary) 4%, transparent);
}

#nav button.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-white);
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--color-primary) 35%, transparent);
    border: none;
}