* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root {
        /* Core Colors - OLED Dark (Lightened slightly) */
        --bg: #0c0c0c;
        /* Zinc 950 approx */
        --bg-secondary: #18181b;
        /* Zinc 900 approx */
        --text: #ffffff;
        --text-muted: #a1a1aa;
        /* Zinc 400 approx - improved contrast */
        --border: #27272a;
        /* Zinc 800 */

        /* Accents - White/Silver Glow */
        --accent: #ffffff;
        --accent-hover: #e5e5e5;
        --accent-glow: rgba(255, 255, 255, 0.1);
        --accent-gradient: linear-gradient(135deg, #ffffff 0%, #a3a3a3 100%);

        /* Glassmorphism */
        --glass-bg: rgba(9, 9, 11, 0.8);
        /* Matches new bg with opacity */
        --glass-border: rgba(255, 255, 255, 0.08);
        --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

        --nav-height: 70px;
        /* Reduced specific height slightly for better proportions */
        --card-bg: #121212;
        /* Slightly lighter than pure black */
    }

    /* Light Theme (Optional Fallback / Inverted for high contrast if toggled) */
    [data-theme="light"] {
        --bg: #f5f5f5;
        --bg-secondary: #e5e5e5;
        --text: #000000;
        --text-muted: #555555;
        --border: #d4d4d4;
        --accent: #000000;
        --accent-hover: #333333;
        --accent-glow: rgba(0, 0, 0, 0.1);
        --accent-gradient: linear-gradient(135deg, #000000 0%, #444444 100%);
        --glass-bg: rgba(255, 255, 255, 0.8);
        --glass-border: rgba(0, 0, 0, 0.1);
        --card-bg: #ffffff;
    }

    body {
        font-family: 'Space Grotesk', sans-serif;
        background: radial-gradient(circle at 50% 0%, #1c1c1f 0%, #0c0c0c 100%);
        background-attachment: fixed;
        color: var(--text);
        line-height: 1.6;
        min-height: 100vh;
        overflow-x: hidden;
    }

    /* Loader */
    #loader {
        position: fixed;
        inset: 0;
        background: var(--bg);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.4s ease-out, visibility 0.4s;
    }

    .loader-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 2px solid var(--border);
        border-top-color: var(--text);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Starry Background Pattern */
    .bg-grid {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
        background-image:
            radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 3px),
            radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 2px),
            radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 3px);
        background-size: 550px 550px, 350px 350px, 250px 250px;
        background-position: 0 0, 40px 60px, 130px 270px;
        opacity: 0.4;
    }

    .dot-pattern {
        display: none;
    }

    /* Navigation */
    nav {
        position: fixed;
        top: 0;
        width: 100%;
        height: var(--nav-height);
        z-index: 100;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        border-bottom: 1px solid var(--border);
        background: var(--glass-bg);
        transition: all 0.3s ease;
    }

    .nav-container {
        max-width: 1000px;
        margin: 0 auto;
        height: 100%;
        padding: 0 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .logo {
        text-decoration: none;
        font-weight: 800;
        font-size: 1.5rem;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        letter-spacing: -1px;
        position: relative;
    }

    .logo::before {
        content: '';
        width: 8px;
        height: 8px;
        background: var(--text);
        border-radius: 50%;
        display: inline-block;
        box-shadow: 0 0 10px var(--accent-glow);
    }

    .logo span {
        background: linear-gradient(135deg, var(--text) 0%, var(--text-muted) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .nav-links {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .nav-links a {
        text-decoration: none;
        color: var(--text-muted);
        font-weight: 500;
        transition: all 0.3s ease;
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
        border-radius: 50px;
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: var(--text);
        background: var(--bg-secondary);
    }

    .nav-links .portfolio-link {
        border: 1px solid var(--border);
    }

    .nav-links .portfolio-link:hover {
        border-color: var(--text-muted);
        background: transparent;
    }

    .theme-toggle {
        background: transparent;
        border: 1px solid var(--border);
        cursor: pointer;
        color: var(--text);
        padding: 0.5rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        margin-left: 1rem;
    }

    .theme-toggle:hover {
        border-color: var(--text);
        background: var(--bg-secondary);
    }

    .theme-toggle svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    .sun-icon {
        display: block;
    }

    .moon-icon {
        display: none;
    }

    [data-theme="light"] .sun-icon {
        display: none;
    }

    [data-theme="light"] .moon-icon {
        display: block;
    }

    /* Blog Header */
    .blog-header h1 {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        letter-spacing: -1.5px;
        color: var(--text);
    }

    /* Cards */
    .blog-post-card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 4px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        overflow: hidden;
    }

    /* Mosaic hover effect hint */
    .blog-post-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    .blog-post-card:hover {
        border-color: var(--text-muted);
        transform: translateY(-2px);
    }

    .blog-post-card:hover::before {
        opacity: 1;
    }

    /* Search Bar Override */
    .search-bar input:focus {
        border-color: var(--text);
        box-shadow: 0 0 0 1px var(--text-muted);
    }

    .filter-chip.active {
        background: var(--text);
        border-color: var(--text);
        color: var(--bg);
    }

    @media (max-width: 768px) {
        .nav-container {
            padding: 0 1rem;
        }

        .nav-right {
            gap: 1rem;
        }

        .nav-links {
            gap: 0.25rem;
        }

        .nav-links a {
            font-size: 0.8rem;
            padding: 0.4rem 0.8rem;
        }

        .logo {
            font-size: 1.2rem;
        }
    }