/* Critical Mobile-First CSS - Load First */

/* Essential Design Tokens - Mobile Optimized */
:root {
    /* Core Colors - Dark Theme Default */
    --bg: #0b0f14;
    --bg-elev: #0f141b;
    --bg-hover: #121923;
    --text: #e6edf3;
    --muted: #9aa4af;
    --link: #7aa2f7;
    --link-hover: #a5b8ff;
    --accent: #2dd4bf;
    --border: #1f2833;
    --header-bg: rgba(11, 15, 20, 0.55);
    
    /* Critical Mobile Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    
    /* Mobile Typography Scale */
    --text-sm: 0.875rem;
    --text-base: 1rem;     /* 16px minimum for mobile */
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-3xl: 1.75rem;   /* Mobile h1 */
    
    /* Touch Targets */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* Essential Animations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    
    /* Border Radius */
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    
    /* Z-Index */
    --z-sticky: 20;
    --z-modal-backdrop: 40;
    --z-modal: 50;
  }
  
  /* Extended Design Tokens - Load After Critical */
  :root {
    /* Extended Colors */
    --warn: #f59e0b;
    --error: #ef4444;
    --code-bg: #0a0f14;
    --code-border: #1a2430;
    --shadow: 0 2px 12px rgba(0,0,0,.4);
    
    /* Extended Spacing */
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;
    
    /* Extended Typography */
    --text-xs: 0.75rem;
    --text-2xl: 1.5rem;
    --text-4xl: 2rem;
    --text-5xl: 2.25rem;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.7;
    
    /* Extended Touch Targets */
    --touch-target-large: 56px;
    
    /* Extended Border Radius */
    --radius-sm: 0.25rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Container Sizes */
    --container-sm: 100%;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    
    /* Extended Z-Index */
    --z-base: 1;
    --z-dropdown: 10;
    --z-fixed: 30;
    --z-popover: 60;
    --z-tooltip: 70;
    
    /* Extended Animations */
    --duration-slow: 500ms;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Theme Variants - Deferred Load */
  [data-theme="light"] {
    --bg: #f7f7fb;
    --bg-elev: #ffffff;
    --bg-hover: #f2f2f7;
    --text: #0e1320;
    --muted: #5b6472;
    --link: #3b82f6;
    --link-hover: #1d4ed8;
    --accent: #10b981;
    --border: #e5e7eb;
    --code-bg: #f1f5f9;
    --code-border: #e2e8f0;
    --header-bg: rgba(255, 255, 255, 0.7);
  }
  
  [data-theme="midnight"] {
    --bg: #070a12;
    --bg-elev: #0a0f1a;
    --bg-hover: #0e1522;
    --text: #dbe7ff;
    --muted: #9aa7c0;
    --link: #8ab4ff;
    --link-hover: #b8d0ff;
    --accent: #7c3aed;
    --border: #111827;
    --code-bg: #0a1020;
    --code-border: #13203a;
    --header-bg: rgba(7, 10, 18, 0.55);
  }
  
  [data-theme="cyber"] {
    --bg: #050809;
    --bg-elev: #071014;
    --bg-hover: #0a171d;
    --text: #eaffff;
    --muted: #8fbfc6;
    --link: #00e5ff;
    --link-hover: #66f7ff;
    --accent: #39ff14;
    --border: #0b2026;
    --code-bg: #031013;
    --code-border: #0b2026;
    --header-bg: rgba(5, 8, 9, 0.55);
  }
  
  /* Critical Base Styles - Mobile First */
  html, body { 
    height: 100%; 
    margin: 0;
  }
  
  html { 
    color-scheme: dark;
    /* Prevent horizontal scroll on mobile */
    overflow-x: hidden;
  }
  
  :root[data-theme="light"] { 
    color-scheme: light; 
  }
  
  body {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    /* Mobile optimizations */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent horizontal scroll */
    overflow-x: hidden;
    /* Improve touch scrolling on iOS */
    -webkit-overflow-scrolling: touch;
  }
  
  /* Critical Layout Elements */
  .content-layer { 
    position: relative; 
    z-index: 1; 
  }
  
  a { 
    color: var(--link); 
    text-decoration: none;
    /* Improve touch targets */
    -webkit-tap-highlight-color: transparent;
  }
  
  a:hover { 
    color: var(--link-hover); 
  }
  
  /* Critical Layout - Mobile First */
  .container { 
    width: 100%; 
    max-width: 960px; 
    margin: 0 auto; 
    padding: var(--space-md); 
  }
  
  header.site {
    position: sticky; 
    top: 0; 
    z-index: 40;
    background: var(--header-bg); 
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  
  .brand { 
    font-weight: 800; 
    letter-spacing: .4px; 
    font-size: 1.2rem; 
    display: inline-flex; 
    gap: .4rem; 
    align-items: center; 
  }
  
  .brand-pop .brand-text { 
    background: linear-gradient(90deg, var(--accent), var(--link)); 
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
  }
  
  .brand-pop .dot { 
    color: var(--muted); 
    transition: color .3s ease, text-shadow .3s ease; 
  }
  
  .brand-pop:hover .dot { 
    color: var(--accent); 
    text-shadow: 0 0 8px color-mix(in oklab, var(--accent), transparent 60%); 
  }
  
  .brand-pop i { 
    color: var(--accent); 
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent), transparent 70%)); 
  }
  
  .brand-pop { text-decoration: none; }
  
  .big-m {
    font-size: 1.2em;
    font-weight: 900;
  }
  
  /* Mobile navigation - Mobile First */
  nav ul { 
    list-style: none; 
    display: flex; 
    gap: var(--space-xs); 
    margin: 0; 
    padding: 0; 
    align-items: center; 
    flex-wrap: wrap;
  }
  
  nav a { 
    color: var(--muted); 
    padding: var(--space-sm) var(--space-md); 
    border-radius: var(--radius-md); 
    display: inline-flex; 
    align-items: center; 
    min-height: var(--touch-target-min); /* 44px minimum */
    min-width: var(--touch-target-min); /* Ensure minimum width */
    justify-content: center;
    gap: var(--space-sm);
    transition: all var(--duration-fast) var(--ease-out);
    text-decoration: none;
    /* Touch optimizations */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  nav a:hover { 
    background: var(--bg-hover); 
    color: var(--text); 
    transform: translateY(-1px);
  }
  
  nav a:active {
    transform: translateY(0);
    background: var(--bg-hover);
  }
  
  nav a:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  nav a.active { 
    color: var(--text); 
    background: var(--bg-elev); 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  /* Mobile Navigation Component - Mobile First */
  .mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  
  .mobile-nav-toggle:hover {
    background: var(--bg-hover);
  }
  
  .mobile-nav-toggle:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  .hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    margin: 2px 0;
    transition: all var(--mobile-nav-duration, var(--duration-normal)) var(--ease-in-out);
    transform-origin: center;
    /* Optimize for mobile performance */
    will-change: transform, opacity;
  }
  
  .mobile-nav-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  
  .mobile-nav-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-nav-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
  }
  
  .mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mobile-nav-duration, var(--duration-normal)) var(--ease-out), 
                visibility var(--mobile-nav-duration, var(--duration-normal)) var(--ease-out);
    /* Optimize for mobile performance */
    will-change: opacity, visibility;
  }
  
  .mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  .mobile-nav-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    background: var(--bg-elev);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateX(100%);
    transition: transform var(--mobile-nav-duration, var(--duration-normal)) var(--ease-out);
    overflow-y: auto;
    padding: var(--space-md);
    z-index: var(--z-modal);
    /* Optimize for mobile performance */
    will-change: transform;
    /* Improve scrolling performance */
    -webkit-overflow-scrolling: touch;
  }
  
  .mobile-nav-overlay.active .mobile-nav-menu {
    transform: translateX(0);
  }
  
  .mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background: transparent;
    border: none;
    color: var(--text);
    font-size: var(--text-xl);
    cursor: pointer;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    margin-left: auto;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  
  .mobile-nav-close:hover {
    background: var(--bg-hover);
  }
  
  .mobile-nav-close:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  .mobile-nav-content ul {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  
  .mobile-nav-content li {
    width: 100%;
  }
  
  .mobile-nav-content a {
    width: 100%;
    padding: var(--space-lg) var(--space-md); /* Increased vertical padding */
    justify-content: flex-start;
    gap: var(--space-md); /* Increased gap for better spacing */
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm); /* Increased margin for better separation */
    min-height: var(--touch-target-comfortable); /* 48px for comfortable touch */
    /* Touch optimizations */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .mobile-nav-content a:active {
    background: var(--bg-hover);
    transform: scale(0.98); /* Subtle press feedback */
  }
  
  .mobile-nav-content a:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  .mobile-nav-content a i {
    width: 20px;
    text-align: center;
  }
  
  .mobile-nav-content .hide-sm {
    display: inline;
  }
  
  .mobile-nav-content #theme-select {
    width: 100%;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    /* Enhanced mobile styling */
    min-height: var(--touch-target-comfortable); /* 48px for comfortable touch */
    font-size: var(--text-lg); /* Larger text for mobile */
    padding: var(--space-lg);
    border: 2px solid var(--border); /* Thicker border for better visibility */
  }
  
  .mobile-nav-content #theme-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%);
  }
  
  /* Prevent body scroll when mobile nav is open */
  body.mobile-nav-open {
    overflow: hidden;
  }
  
  /* Hide desktop nav on mobile */
  .desktop-nav {
    display: none;
  }
  
  .spacer { flex: 1; }
  
  main { 
    padding: .5rem 0 2rem; 
  }
  
  footer.site {
    border-top: 1px solid var(--border);
    color: var(--muted);
    padding: 1rem 0; 
    margin-top: 1.5rem;
  }
  
  /* Components - Mobile First */
  .btn { 
    background: var(--bg-elev); 
    color: var(--text); 
    border: 1px solid var(--border);
    border-radius: var(--radius-md); 
    padding: var(--space-md) var(--space-lg); 
    cursor: pointer; 
    min-height: var(--touch-target-min); /* 44px - Touch accessibility requirement */
    min-width: var(--touch-target-min); /* Ensure minimum width for touch */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: var(--text-base); /* Improved readability */
    font-weight: 500;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
    /* Prevent text selection on touch */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* Improve touch target on iOS */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .btn:hover { 
    background: var(--bg-hover); 
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .btn:active {
    transform: translateY(0);
    background: var(--bg-hover);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
  
  .btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  /* Button variants for different contexts */
  .btn-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }
  
  .btn-primary:hover {
    background: color-mix(in oklab, var(--accent), var(--text) 10%);
    border-color: color-mix(in oklab, var(--accent), var(--text) 10%);
    color: var(--bg);
  }
  
  .btn-primary:active {
    background: color-mix(in oklab, var(--accent), var(--bg) 20%);
    border-color: color-mix(in oklab, var(--accent), var(--bg) 20%);
  }
  
  .btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
  }
  
  .btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
  }
  
  /* Large button variant for hero sections */
  .btn-large {
    min-height: var(--touch-target-comfortable); /* 48px */
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--text-lg);
    font-weight: 600;
  }
  
  .pill { 
    border: 1px solid var(--border); 
    background: var(--bg-elev); 
    border-radius: 999px; 
    padding: .4rem .8rem; 
    color: var(--muted); 
    font-size: .85rem; 
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  
  .card { 
    background: var(--bg-elev); 
    border: 1px solid var(--border); 
    border-radius: .75rem; 
    padding: 1rem; 
    box-shadow: var(--shadow); 
  }
  
  /* Typography - Mobile First */
  h1, h2, h3 { 
    line-height: var(--leading-tight); 
    margin: var(--space-sm) 0 var(--space-md); 
  }
  
  h1 { 
    font-size: var(--text-3xl); /* 28px - mobile optimized */
    font-weight: 900; 
  }
  
  h2 { 
    font-size: var(--text-xl); /* 20px - mobile optimized */
    font-weight: 800; 
  }
  
  h3 { 
    font-size: var(--text-lg); /* 18px - mobile optimized */
    font-weight: 700; 
  }
  
  p { 
    margin: var(--space-sm) 0 var(--space-md); 
    color: var(--text); 
    line-height: var(--leading-relaxed); /* 1.6 - optimized for mobile readability */
    font-size: var(--text-base); /* Ensure minimum 16px for mobile */
  }
  
  small, .muted { 
    color: var(--muted);
    font-size: var(--text-sm); /* 14px */
  }
  
  /* Prose for Markdown - Mobile First */
  .prose { 
    color: var(--text); 
  }
  
  .prose h1 { 
    font-size: var(--text-3xl); /* 28px - mobile optimized */
    margin-top: var(--space-md); 
    line-height: var(--leading-tight);
  }
  
  .prose h2 { 
    font-size: var(--text-xl); /* 20px - mobile optimized */
    margin-top: var(--space-md); 
    line-height: var(--leading-tight);
  }
  
  .prose h3 { 
    font-size: var(--text-lg); /* 18px - mobile optimized */
    margin-top: var(--space-sm); 
    line-height: var(--leading-tight);
  }
  
  .prose p { 
    margin: var(--space-sm) 0 var(--space-md); 
    line-height: var(--leading-loose); /* 1.7 - enhanced readability for prose */
    font-size: var(--text-base); /* Ensure minimum 16px */
  }
  
  .prose ul, .prose ol { 
    padding-left: var(--space-lg); 
    margin: var(--space-sm) 0 var(--space-md);
    line-height: var(--leading-relaxed);
  }
  
  .prose blockquote { 
    border-left: 3px solid var(--border); 
    padding-left: var(--space-md); 
    color: var(--muted); 
    margin: var(--space-md) 0;
    font-style: italic;
    line-height: var(--leading-relaxed);
  }
  
  /* Responsive Image Base Styles - Mobile First */
  img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    /* Prevent layout shift during loading */
    background-color: var(--bg-hover);
    /* Improve image rendering */
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
  }
  
  /* Loading state for images */
  img[loading="lazy"] {
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
  }
  
  img[loading="lazy"].loaded,
  img:not([loading="lazy"]) {
    opacity: 1;
  }
  
  /* Fallback for images that fail to load */
  img::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--bg-hover);
    border-radius: inherit;
  }
  
  .prose img { 
    max-width: 100%; 
    height: auto;
    display: block;
    border-radius: var(--radius-md); 
    border: 1px solid var(--border); 
    margin: var(--space-md) 0;
    background-color: var(--bg-hover);
    /* Ensure prose images are responsive */
    width: 100%;
    object-fit: contain; /* Use contain for prose images to show full image */
    object-position: center;
  }
  
  /* Code blocks - Mobile First */
  pre, code { 
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
  }
  
  pre { 
    background: var(--code-bg); 
    border: 1px solid var(--code-border); 
    border-radius: .6rem; 
    padding: .75rem; 
    overflow: auto; 
    color: var(--text);
    font-size: .85rem;
    line-height: 1.5;
    margin: .5rem 0 1rem;
  }
  
  code { 
    background: var(--code-bg); 
    border: 1px solid var(--code-border); 
    border-radius: .3rem; 
    padding: .1rem .3rem; 
    color: var(--text);
    font-size: .85rem;
  }
  
  /* Ensure inline code in prose doesn't get double-styled */
  .prose pre code {
    background: transparent;
    border: none;
    padding: 0;
  }
  
  /* Utility - Mobile First with Progressive Enhancement */
  .row { 
    display: flex; 
    gap: .75rem; 
    flex-wrap: wrap; 
  }
  
  .col { 
    flex: 1 1 100%; /* Full width on mobile */
    min-width: 0; /* Prevent flex item overflow */
  }
  
  /* CSS Grid enhancement for row/col system */
  @supports (display: grid) {
    .row.grid-enhanced { 
      display: grid;
      grid-template-columns: 1fr;
      gap: .75rem;
    }
    
    .row.grid-enhanced .col {
      /* Reset flex properties when grid is supported */
      flex: none;
      min-width: auto;
    }
  }
  
  .center { 
    display: flex; 
    align-items: center; 
  }
  
  .between { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap;
    gap: .5rem;
  }
  
  .mt-2 { margin-top: .5rem; }
  .mt-4 { margin-top: 1rem; }
  .mt-8 { margin-top: 1.5rem; }
  .mb-2 { margin-bottom: .5rem; }
  .mb-4 { margin-bottom: 1rem; }
  
  .sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    white-space: nowrap; 
    border: 0; 
  }
  
  .hide-sm { 
    display: none; 
  }
  
  /* Controls - Mobile First */
  #theme-select { 
    background: var(--bg-elev); 
    color: var(--text); 
    border: 1px solid var(--border); 
    border-radius: var(--radius-md); 
    padding: var(--space-md) var(--space-lg); 
    min-height: var(--touch-target-min); /* 44px - Touch accessibility requirement */
    min-width: var(--touch-target-min); /* Ensure minimum width */
    font-size: var(--text-base); /* Improved readability */
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    /* Improve appearance on mobile */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Add custom dropdown arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 16px;
    padding-right: calc(var(--space-lg) + 24px); /* Make room for arrow */
    /* Touch optimizations */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  #theme-select:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
  }
  
  #theme-select:focus { 
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
    background: var(--bg-hover);
  }
  
  #theme-select:active {
    background: var(--bg-hover);
    transform: scale(0.98);
  }
  
  /* Style select options for better mobile experience */
  #theme-select option {
    background: var(--bg-elev);
    color: var(--text);
    padding: var(--space-sm);
    font-size: var(--text-base);
  }
  
  /* Form elements base styles */
  input, textarea, select {
    font-family: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }
  
  /* Generic form control styles for consistency */
  .form-control {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    min-height: var(--touch-target-min);
    font-size: var(--text-base);
    font-weight: 400;
    transition: all var(--duration-fast) var(--ease-out);
    width: 100%;
    /* Touch optimizations */
    -webkit-tap-highlight-color: transparent;
  }
  
  .form-control:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
  }
  
  .form-control:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
    background: var(--bg-hover);
  }
  
  .form-control:active {
    background: var(--bg-hover);
  }
  
  /* Input group for better mobile layout */
  .form-group {
    margin-bottom: var(--space-lg);
  }
  
  .form-label {
    display: block;
    margin-bottom: var(--space-sm);
    font-weight: 600;
    color: var(--text);
    font-size: var(--text-base);
  }
  
  /* Checkbox and radio button improvements */
  input[type="checkbox"],
  input[type="radio"] {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    margin-right: var(--space-sm);
    cursor: pointer;
  }
  
  /* Button-like form controls */
  .form-button {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    /* Touch optimizations */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .form-button:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  
  .form-button:active {
    transform: translateY(0);
    background: var(--bg-hover);
  }
  
  .form-button:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  /* Non-Critical Styles - Can be deferred */
  
  /* Particles background - Non-critical decoration */
  #particles-js {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Hide on mobile by default for performance */
    display: none;
    /* Optimize rendering performance */
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  body.particles-enabled #particles-js {
    display: block;
  }

  body.particles-enabled header.site {
    background: linear-gradient(to bottom, var(--header-bg) 0%, transparent 100%);
  }
  
  /* Animation Performance Optimizations */
  
  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    
    /* Disable particles completely for reduced motion */
    #particles-js {
      display: none !important;
    }
    
    /* Disable transform animations */
    .mobile-nav-toggle .hamburger-line,
    .mobile-nav-menu,
    .mobile-nav-overlay,
    .btn:hover,
    .btn:active,
    nav a:hover,
    nav a:active {
      transform: none !important;
    }
  }
  
  /* Mobile-specific animation optimizations */
  @media (max-width: 767px) {
    /* Optimize animations for mobile performance */
    * {
      /* Use GPU acceleration sparingly on mobile */
      will-change: auto;
    }
    
    /* Reduce animation complexity on mobile */
    .mobile-nav-toggle .hamburger-line {
      transition-duration: var(--duration-fast); /* Faster transitions */
    }
    
    .mobile-nav-overlay,
    .mobile-nav-menu {
      transition-duration: var(--duration-fast); /* Faster menu animations */
    }
    
    /* Disable hover effects on mobile (they don't work well with touch) */
    .btn:hover,
    nav a:hover,
    .form-control:hover,
    #theme-select:hover {
      transform: none;
      box-shadow: none;
    }
    
    /* Optimize button active states for touch */
    .btn:active,
    nav a:active,
    .mobile-nav-content a:active {
      transition-duration: 0ms; /* Instant feedback */
    }
    
    /* Disable particles on mobile for performance */
    #particles-js {
      display: none !important;
    }
  }
  
  /* Performance optimizations for low-end devices */
  @media (max-width: 767px) and (max-resolution: 1.5dppx) {
    /* Further reduce animations on low-DPI mobile devices */
    .mobile-nav-overlay {
      backdrop-filter: none; /* Remove expensive backdrop blur */
      background: rgba(0, 0, 0, 0.7); /* Use solid background instead */
    }
    
    /* Simplify shadows on low-end devices */
    .card,
    .btn,
    .about-image img,
    .hero-image,
    .feature-image {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Simpler shadows */
    }
  }
  
  /* High-performance mode for modern mobile devices */
  @media (max-width: 767px) and (min-resolution: 2dppx) {
    /* Enable particles on high-end mobile devices with larger screens */
    @media (min-width: 414px) {
      #particles-js {
        display: block;
      }
    }
    
    /* Use hardware acceleration more liberally on high-end devices */
    .mobile-nav-menu,
    .mobile-nav-overlay,
    .btn,
    nav a {
      will-change: transform;
      transform: translateZ(0);
    }
  }
  
  /* About Page - Mobile First */
  .about-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
  }
  
  .about-content {
    /* Flexbox fallback */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  /* CSS Grid enhancement for about content */
  @supports (display: grid) {
    .about-content.grid-enhanced {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }
  
  /* About Page Image - Mobile First */
  .about-image {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    position: relative;
  }
  
  .about-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; /* Square aspect ratio for profile images */
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    display: block;
    background-color: var(--bg-hover); /* Fallback while loading */
  }
  
  /* Hero/Feature Image Styles - Mobile First */
  .hero-image,
  .feature-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    display: block;
    background-color: var(--bg-hover);
    margin: var(--space-md) 0;
  }
  
  /* Responsive Image Container for Layout Stability */
  .responsive-image-container {
    position: relative;
    width: 100%;
    background-color: var(--bg-hover);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  
  .responsive-image-container.aspect-16-9 {
    aspect-ratio: 16/9;
  }
  
  .responsive-image-container.aspect-4-3 {
    aspect-ratio: 4/3;
  }
  
  .responsive-image-container.aspect-1-1 {
    aspect-ratio: 1/1;
  }
  
  .responsive-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: none;
    border-radius: 0;
  }
  
  .about-text {
    flex: 1;
  }
  
  /* Chroma syntax highlighting - theme aware */
  .chroma { 
    background: var(--code-bg); 
    border: 1px solid var(--code-border);
    border-radius: .6rem;
    color: var(--text);
  }
  .chroma .hl { background-color: rgba(255,255,255,.06) }
  .chroma .ln { color: var(--muted) }
  
  /* Default/Dark theme syntax colors - WCAG AA compliant */
  :root {
    --syntax-keyword: #d19ad1; /* Improved contrast from #c586c0 */
    --syntax-string: #d4a574; /* Improved contrast from #ce9178 */
    --syntax-function: #7aa2f7;
    --syntax-type: #2dd4bf;
    --syntax-comment: #8a94a6; /* Improved contrast from #64748b */
    --syntax-number: #b5cea8;
    --syntax-operator: #d4d4d4;
  }
  
  /* Light theme syntax colors */
  [data-theme="light"] {
    --syntax-keyword: #af00db;
    --syntax-string: #a31515;
    --syntax-function: #0000ff;
    --syntax-type: #267f99;
    --syntax-comment: #008000;
    --syntax-number: #098658;
    --syntax-operator: #000000;
  }
  
  /* Midnight theme syntax colors */
  [data-theme="midnight"] {
    --syntax-keyword: #bb86fc;
    --syntax-string: #f28b82;
    --syntax-function: #8ab4ff;
    --syntax-type: #7c3aed;
    --syntax-comment: #9aa7c0;
    --syntax-number: #aecbfa;
    --syntax-operator: #dbe7ff;
  }
  
  /* Cyber theme syntax colors */
  [data-theme="cyber"] {
    --syntax-keyword: #00e5ff;
    --syntax-string: #39ff14;
    --syntax-function: #66f7ff;
    --syntax-type: #00e5ff;
    --syntax-comment: #8fbfc6;
    --syntax-number: #39ff14;
    --syntax-operator: #eaffff;
  }
  
  /* Apply theme-aware colors to Chroma classes */
  .chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { color: var(--syntax-keyword); }
  .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { color: var(--syntax-string); }
  .chroma .na, .chroma .nb, .chroma .bp, .chroma .nc, .chroma .no, .chroma .nd, .chroma .ni, .chroma .ne, .chroma .nf, .chroma .fm, .chroma .nl, .chroma .nn, .chroma .nx, .chroma .py, .chroma .nt, .chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: var(--syntax-function); }
  .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { color: var(--syntax-number); }
  .chroma .o, .chroma .ow, .chroma .p, .chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs { color: var(--syntax-comment); }
  .chroma .cp, .chroma .cpf { color: var(--syntax-operator); }
  
  /* Responsive - Mobile First Breakpoints */
  
  /* Mobile-first: Show mobile nav toggle on small screens */
  @media (max-width: 767px) {
    .mobile-nav-toggle {
      display: flex;
    }
    
    .desktop-nav {
      display: none;
    }
  }
  
  /* Small tablets and large phones (576px and up) */
  @media (min-width: 576px) {
    .container { 
      padding: var(--space-lg); 
    }
    
    nav ul { 
      gap: var(--space-sm); 
    }
    
    nav a { 
      padding: var(--space-sm) var(--space-md); 
      gap: var(--space-sm);
    }
    
    .col { 
      flex: 1 1 250px; 
    }
    
    /* CSS Grid enhancement for row/col system - Tablet */
    @supports (display: grid) {
      .row.grid-enhanced { 
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      }
    }
  }
  
  /* Tablets (768px and up) */
  @media (min-width: 768px) {
    .brand { 
      font-size: var(--text-xl); 
      gap: var(--space-sm);
    }
    
    nav ul { 
      gap: var(--space-sm); 
    }
    
    nav a { 
      padding: var(--space-sm) var(--space-md); 
      gap: var(--space-sm);
    }
    
    /* Form controls tablet improvements */
    #theme-select {
      min-width: 120px; /* Prevent too narrow on tablet */
      font-size: var(--text-sm); /* Slightly smaller on tablet */
    }
    
    .form-control {
      font-size: var(--text-base);
    }
    
    /* Button improvements for tablet */
    .btn {
      padding: var(--space-sm) var(--space-lg);
    }
    
    .card-btn {
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
    }
    
    .hide-sm { 
      display: inline; 
    }
    
    /* Show desktop nav, hide mobile nav */
    .desktop-nav {
      display: block;
    }
    
    .mobile-nav-toggle {
      display: none !important;
    }
    
    .mobile-nav-overlay {
      display: none;
    }
    
    h1 { 
      font-size: var(--text-4xl); /* 32px - tablet */
    }
    
    h2 { 
      font-size: var(--text-2xl); /* 24px - tablet */
    }
    
    h3 { 
      font-size: var(--text-xl); /* 20px - tablet */
    }
    
    .prose h1 { 
      font-size: var(--text-4xl); /* 32px - tablet */
    }
    
    .prose h2 { 
      font-size: var(--text-2xl); /* 24px - tablet */
    }
    
    .prose h3 { 
      font-size: var(--text-xl); /* 20px - tablet */
    }
    
    .col { 
      flex: 1 1 280px; 
    }
    
    /* CSS Grid enhancement for row/col system - Desktop */
    @supports (display: grid) {
      .row.grid-enhanced { 
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      }
    }
    
    .row { 
      gap: var(--space-md); 
    }
    
    .mt-8 { 
      margin-top: var(--space-xl); 
    }
    
    main { 
      padding: var(--space-md) 0 var(--space-2xl); 
    }
    
    footer.site {
      padding: var(--space-lg) 0; 
      margin-top: var(--space-xl);
    }
    
    /* Card Grid - Tablet Layout */
    .card-grid {
      /* Flexbox fallback for tablet */
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--space-lg);
    }
    
    .card-grid > * {
      /* Flexbox fallback: 2 columns on tablet */
      flex: 1 1 calc(50% - var(--space-lg) / 2);
      min-width: 280px;
    }
    
    /* CSS Grid enhancement for tablet */
    @supports (display: grid) {
      .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
      }
      
      .card-grid > * {
        /* Reset flex properties when grid is supported */
        flex: none;
        min-width: auto;
      }
      
      /* Automatic grid enhancement when JavaScript is disabled */
      .card-grid:not(.grid-enhanced) {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
      }
      
      .card-grid:not(.grid-enhanced) > * {
        flex: none;
        min-width: auto;
      }
    }
    
    .card-content {
      padding: var(--space-lg);
    }
    
    .card-title {
      font-size: var(--text-xl);
    }
    
    .hero-actions {
      flex-direction: row;
      justify-content: center;
    }
    
    .hero-actions .btn {
      width: auto;
      max-width: none;
    }
    
    /* About Page - Tablet Layout */
    .about-page {
      padding: var(--space-lg);
    }
    
    .about-content {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--space-xl);
    }
    
    /* CSS Grid enhancement for about content - Tablet */
    @supports (display: grid) {
      .about-content.grid-enhanced {
        grid-template-columns: 1fr 250px;
        grid-template-areas: "text image";
        align-items: start;
      }
      
      .about-content.grid-enhanced .about-text {
        grid-area: text;
        order: unset;
      }
      
      .about-content.grid-enhanced .about-image {
        grid-area: image;
        order: unset;
      }
    }
    
    .about-image {
      flex: 0 0 250px;
      max-width: 250px;
      margin: 0;
      order: 2; /* Image on the right */
    }
    
    .about-text {
      order: 1; /* Text on the left */
    }
    
    /* Hero/Feature Images - Tablet */
    .hero-image,
    .feature-image {
      max-width: 600px;
      margin: var(--space-lg) auto;
    }
  }
  
  /* Desktop (1024px and up) */
  @media (min-width: 1024px) {
    .brand { 
      font-size: var(--text-2xl); 
    }
    
    nav ul { 
      gap: var(--space-md); 
    }
    
    nav a { 
      padding: var(--space-sm) var(--space-md); 
      gap: var(--space-sm);
    }
    
    h1 { 
      font-size: var(--text-5xl); /* 36px - desktop */
    }
    
    h2 { 
      font-size: var(--text-3xl); /* 28px - desktop */
    }
    
    h3 { 
      font-size: var(--text-2xl); /* 24px - desktop */
    }
    
    .prose h1 { 
      font-size: var(--text-5xl); /* 36px - desktop */
    }
    
    .prose h2 { 
      font-size: var(--text-3xl); /* 28px - desktop */
    }
    
    .prose h3 { 
      font-size: var(--text-2xl); /* 24px - desktop */
    }
    
    /* Card Grid - Desktop Layout */
    .card-grid {
      /* Flexbox fallback for desktop */
      gap: var(--space-xl);
    }
    
    .card-grid > * {
      /* Flexbox fallback: 3 columns on desktop */
      flex: 1 1 calc(33.333% - var(--space-xl) * 2 / 3);
      min-width: 280px;
    }
    
    /* CSS Grid enhancement for desktop */
    @supports (display: grid) {
      .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
      }
      
      .card-grid > * {
        /* Reset flex properties when grid is supported */
        flex: none;
        min-width: auto;
      }
      
      /* Automatic grid enhancement when JavaScript is disabled */
      .card-grid:not(.grid-enhanced) {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
      }
      
      .card-grid:not(.grid-enhanced) > * {
        flex: none;
        min-width: auto;
      }
    }
    
    .card-content {
      padding: var(--space-xl);
    }
    
    .card-title {
      font-size: var(--text-2xl);
    }
    
    /* About Page - Desktop Layout */
    .about-image {
      flex: 0 0 300px;
      max-width: 300px;
    }
    
    .about-content {
      gap: var(--space-2xl);
    }
    
    /* CSS Grid enhancement for about content - Desktop */
    @supports (display: grid) {
      .about-content.grid-enhanced {
        grid-template-columns: 1fr 300px;
        gap: var(--space-2xl);
      }
    }
    
    /* Hero/Feature Images - Desktop */
    .hero-image,
    .feature-image {
      max-width: 800px;
      margin: var(--space-xl) auto;
    }
    
    /* Optimize image containers for larger screens */
    .responsive-image-container {
      border-radius: var(--radius-xl);
    }
    
    .card-image-container {
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
  }
  
  /* Card Grid System - Mobile First with Progressive Enhancement
   * 
   * Progressive Enhancement Strategy:
   * 1. Base: Flexbox layout works in all modern browsers
   * 2. Enhancement: CSS Grid provides better layout control when supported
   * 3. JavaScript: Adds 'grid-enhanced' class for additional optimizations
   * 4. Fallback: Layout works without JavaScript using @supports queries
   * 
   * Browser Support:
   * - Flexbox: IE11+, all modern browsers
   * - CSS Grid: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+
   * - @supports: Chrome 28+, Firefox 22+, Safari 9+, Edge 12+
   */
  .card-grid {
    /* Flexbox fallback for older browsers */
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
  }
  
  /* CSS Grid enhancement for modern browsers */
  @supports (display: grid) {
    .card-grid {
      display: grid;
      grid-template-columns: 1fr; /* Single column on mobile */
      gap: var(--space-md);
    }
    
    /* Automatic grid enhancement when JavaScript is disabled */
    .card-grid:not(.grid-enhanced) {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
    }
  }
  
  .project-card, .blog-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
  }
  
  .project-card:hover, .blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  /* Responsive Card Images - Mobile First */
  .card-image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    background-color: var(--bg-hover); /* Fallback color while loading */
    border-radius: 0; /* Remove border radius for card images to match card container */
    border: none; /* Remove border for card images as they're contained within cards */
  }
  
  /* Card image container for layout stability */
  .card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: var(--bg-hover);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Only round top corners */
  }
  
  .card-image-container .card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--duration-normal) var(--ease-out);
  }
  
  /* Hover effect for card images */
  .project-card:hover .card-image,
  .blog-card:hover .card-image {
    transform: scale(1.05);
  }
  
  /* Blog cards without images - maintain consistent styling */
  .blog-card:not(:has(.card-image-container)) {
    border: 1px solid var(--border);
    background: var(--bg-elev);
  }
  
  .blog-card:not(:has(.card-image-container)) .card-content {
    padding: var(--space-lg);
  }
  
  /* Performance optimizations for mobile */
  @media (max-width: 767px) {
    /* Disable image hover effects on mobile for better performance */
    .project-card:hover .card-image,
    .blog-card:hover .card-image {
      transform: none;
    }
    
    /* Reduce image quality on very small screens to improve loading */
    .card-image,
    .hero-image,
    .feature-image {
      image-rendering: auto;
    }
  }
  
  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    img[loading="lazy"] {
      transition: none;
    }
    
    .project-card:hover .card-image,
    .blog-card:hover .card-image {
      transform: none;
    }
    
    .card-image-container .card-image {
      transition: none;
    }
  }
  
  .card-content {
    padding: var(--space-md);
  }
  
  .card-title {
    margin: var(--space-xs) 0 var(--space-sm);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-tight);
  }
  
  .card-meta {
    color: var(--muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
  }
  
  .card-meta-row {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    color: var(--muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
  }
  
  .card-meta-row i {
    width: 16px;
    text-align: center;
  }
  
  .card-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
  }
  
  .card-btn {
    display: inline-flex;
    gap: var(--space-sm);
    align-items: center;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg); /* Increased padding for better touch targets */
    cursor: pointer;
    min-height: var(--touch-target-min); /* 44px minimum */
    min-width: var(--touch-target-min); /* Ensure minimum width */
    font-size: var(--text-base); /* Improved readability */
    font-weight: 500;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
    /* Touch optimizations */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .card-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .card-btn:active {
    transform: translateY(0);
    background: var(--bg-hover);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }
  
  .card-btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  .card-btn i {
    font-size: var(--text-sm); /* Slightly larger icons for better visibility */
  }
  
  /* Page Headers - Mobile First */
  .page-header {
    margin-bottom: var(--space-xl);
  }
  
  .page-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: 0.4px;
    margin-bottom: var(--space-sm);
  }
  
  .page-description {
    color: var(--muted);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin: 0;
  }
  
  /* Hero Section - Mobile First */
  .hero {
    text-align: center;
    margin-bottom: var(--space-2xl);
  }
  
  .hero h1 {
    margin-bottom: var(--space-md);
  }
  
  .hero p {
    margin-bottom: var(--space-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-lg);
  }
  
  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  /* Home page specific styles */
  .hero.card {
    margin-bottom: var(--space-2xl);
  }
  
  .hero p {
    color: var(--muted);
    margin-bottom: var(--space-xl);
  }
  
  .hero small {
    display: block;
    margin-top: var(--space-lg);
    text-align: center;
  }
  
  /* Latest posts cards without images */
  .blog-card:not(:has(.card-image)) {
    border: 1px solid var(--border);
    background: var(--bg-elev);
  }
  
  .blog-card:not(:has(.card-image)) .card-content {
    padding: var(--space-lg);
  }
  
  /* Large desktop (1200px and up) */
  @media (min-width: 1200px) {
    .brand { 
      font-size: var(--text-3xl); 
    }
    
    h1 { 
      font-size: var(--text-5xl); 
    }
    
    .prose h1 { 
      font-size: var(--text-5xl); 
    }
  }
  
  /* Accessibility improvements */
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    :root {
      /* Enhanced contrast colors for high contrast mode */
      --bg: #000000;
      --bg-elev: #1a1a1a;
      --bg-hover: #333333;
      --text: #ffffff;
      --muted: #cccccc;
      --link: #66b3ff;
      --link-hover: #99ccff;
      --accent: #00ff00;
      --border: #666666;
      --header-bg: rgba(0, 0, 0, 0.95);
    }
    
    [data-theme="light"] {
      --bg: #ffffff;
      --bg-elev: #f0f0f0;
      --bg-hover: #e0e0e0;
      --text: #000000;
      --muted: #333333;
      --link: #0000cc;
      --link-hover: #000099;
      --accent: #cc0000;
      --border: #999999;
      --header-bg: rgba(255, 255, 255, 0.95);
    }
    
    /* Enhanced border visibility */
    .btn, .card-btn, .form-control, #theme-select, .mobile-nav-toggle, .mobile-nav-close {
      border-width: 2px;
      border-color: var(--border);
    }
    
    /* Enhanced focus indicators */
    .btn:focus, .card-btn:focus, .form-control:focus, #theme-select:focus, 
    .mobile-nav-toggle:focus, .mobile-nav-close:focus, nav a:focus {
      outline-width: 3px;
      outline-color: var(--accent);
      outline-style: solid;
    }
    
    /* Enhanced card borders */
    .card, .project-card, .blog-card {
      border-width: 2px;
      border-color: var(--border);
    }
    
    /* Enhanced text contrast */
    .muted {
      color: var(--muted);
      font-weight: 500; /* Slightly bolder for better readability */
    }
  }
  
  /* Comprehensive reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    /* Disable all transitions and animations */
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    
    /* Specific element transitions */
    .btn, .card-btn, nav a, .form-control, #theme-select, .form-button,
    .mobile-nav-toggle, .mobile-nav-close, .hamburger-line,
    .mobile-nav-overlay, .mobile-nav-menu, .project-card, .blog-card,
    .card-image, img[loading="lazy"] {
      transition: none !important;
      animation: none !important;
    }
    
    /* Disable transform effects */
    .btn:hover, .card-btn:hover, nav a:hover, .mobile-nav-toggle:hover,
    .project-card:hover, .blog-card:hover {
      transform: none !important;
    }
    
    .btn:active, .card-btn:active, nav a:active, #theme-select:active, 
    .form-button:active, .mobile-nav-content a:active {
      transform: none !important;
    }
    
    /* Disable hamburger menu animations */
    .mobile-nav-toggle.active .hamburger-line:nth-child(1),
    .mobile-nav-toggle.active .hamburger-line:nth-child(3) {
      transform: none !important;
    }
    
    .mobile-nav-toggle.active .hamburger-line:nth-child(2) {
      opacity: 1 !important;
    }
    
    /* Disable particles completely */
    #particles-js {
      display: none !important;
    }
    
    /* Disable image hover effects */
    .project-card:hover .card-image,
    .blog-card:hover .card-image {
      transform: none !important;
    }
    
    /* Ensure immediate visibility for loading images */
    img[loading="lazy"] {
      opacity: 1 !important;
    }
    
    /* Disable backdrop blur for performance */
    .mobile-nav-overlay {
      backdrop-filter: none !important;
      background: rgba(0, 0, 0, 0.9) !important;
    }
  }
  
  /* Focus visible for better keyboard navigation */
  .btn:focus-visible, 
  .card-btn:focus-visible, 
  nav a:focus-visible, 
  .form-control:focus-visible, 
  #theme-select:focus-visible,
  .form-button:focus-visible,
  .mobile-nav-toggle:focus-visible,
  .mobile-nav-close:focus-visible,
  .brand:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  /* Enhanced focus styles for mobile navigation */
  .mobile-nav-content a:focus,
  .mobile-nav-content a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    background: var(--bg-hover);
  }
  
  /* Skip link for keyboard navigation */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--accent);
    color: var(--bg);
    padding: 8px;
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: 100;
    font-weight: 600;
    transition: top var(--duration-fast) var(--ease-out);
  }
  
  .skip-link:focus {
    top: 6px;
    outline: 2px solid var(--bg);
    outline-offset: 2px;
  }
  
  /* Screen reader only content */
  .sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    white-space: nowrap; 
    border: 0; 
  }
  
  /* Screen reader only content that becomes visible on focus */
  .sr-only-focusable:focus,
  .sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: var(--space-sm) var(--space-md);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--accent);
    color: var(--bg);
    border-radius: var(--radius-md);
    font-weight: 600;
  }
  
  /* Ensure interactive elements are easily identifiable */
  .btn, .card-btn, nav a, .form-control, #theme-select, .form-button {
    position: relative;
  }
  
  /* Add subtle visual cue for interactive elements */
  .btn::before, .card-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(45deg, var(--accent), var(--link));
    opacity: 0;
    z-index: -1;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  
  .btn:focus::before, .card-btn:focus::before {
    opacity: 0.1;
  }
  
  /* Support for prefers-color-scheme for automatic theme switching */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      --bg: #f7f7fb;
      --bg-elev: #ffffff;
      --bg-hover: #f2f2f7;
      --text: #0e1320;
      --muted: #5b6472;
      --link: #3b82f6;
      --link-hover: #1d4ed8;
      --accent: #10b981;
      --border: #e5e7eb;
      --code-bg: #f1f5f9;
      --code-border: #e2e8f0;
      --header-bg: rgba(255, 255, 255, 0.7);
      color-scheme: light;
    }
  }
  
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
    }
  }
  
  /* Support for forced-colors mode (Windows High Contrast) */
  @media (forced-colors: active) {
    :root {
      --bg: Canvas;
      --bg-elev: Canvas;
      --bg-hover: Highlight;
      --text: CanvasText;
      --muted: GrayText;
      --link: LinkText;
      --link-hover: LinkText;
      --accent: Highlight;
      --border: ButtonBorder;
      --header-bg: Canvas;
    }
    
    .btn, .card-btn, .form-control, #theme-select, .mobile-nav-toggle, .mobile-nav-close {
      border: 1px solid ButtonBorder;
      background: ButtonFace;
      color: ButtonText;
    }
    
    .btn:hover, .card-btn:hover, .form-control:hover, #theme-select:hover,
    .mobile-nav-toggle:hover, .mobile-nav-close:hover {
      background: Highlight;
      color: HighlightText;
      border-color: HighlightText;
    }
    
    .btn:focus, .card-btn:focus, .form-control:focus, #theme-select:focus,
    .mobile-nav-toggle:focus, .mobile-nav-close:focus, nav a:focus {
      outline: 2px solid HighlightText;
      outline-offset: 2px;
    }
    
    nav a.active {
      background: Highlight;
      color: HighlightText;
    }
    
    .card, .project-card, .blog-card {
      border: 1px solid ButtonBorder;
      background: Canvas;
    }
    
    .mobile-nav-overlay {
      background: Canvas;
      backdrop-filter: none;
    }
    
    .mobile-nav-menu {
      background: Canvas;
      border: 1px solid ButtonBorder;
    }
  }
  
  /* Support for transparency preference */
  @media (prefers-reduced-transparency: reduce) {
    .mobile-nav-overlay {
      backdrop-filter: none !important;
      background: rgba(0, 0, 0, 0.95) !important;
    }
    
    .header.site {
      backdrop-filter: none !important;
      background: var(--bg) !important;
    }
  }
  
  /* Support for data usage preference */
  @media (prefers-reduced-data: reduce) {
    /* Disable particles for users on limited data plans */
    #particles-js {
      display: none !important;
    }
    
    /* Reduce animation complexity */
    .hamburger-line, .mobile-nav-overlay, .mobile-nav-menu {
      transition-duration: var(--duration-fast) !important;
    }
    
    /* Simplify visual effects */
    .mobile-nav-overlay {
      backdrop-filter: none !important;
      background: rgba(0, 0, 0, 0.9) !important;
    }
    
    /* Disable image hover effects to reduce processing */
    .project-card:hover .card-image,
    .blog-card:hover .card-image {
      transform: none !important;
    }
  }
  
  /* JavaScript-detected accessibility preferences */
  .reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .high-contrast {
    /* Additional high contrast styles when detected via JavaScript */
  }
  
  .high-contrast .btn,
  .high-contrast .card-btn,
  .high-contrast .form-control,
  .high-contrast #theme-select {
    border-width: 2px;
    font-weight: 600;
  }
  
  .forced-colors {
    /* Additional forced colors mode styles when detected via JavaScript */
  }
  
  .forced-colors .mobile-nav-overlay {
    background: Canvas !important;
    backdrop-filter: none !important;
  }
  
  /* Ensure text remains readable in all contrast modes */
  @media (prefers-contrast: high), (forced-colors: active) {
    .muted {
      color: var(--text);
      opacity: 0.8;
    }
    
    .card-meta,
    .card-meta-row {
      color: var(--text);
      opacity: 0.9;
    }
    
    small {
      color: var(--text);
      opacity: 0.8;
    }
  }
  /* Mobile Performance Optimizations */
  
  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    /* Override all animations for reduced motion */
    .hamburger-line,
    .mobile-nav-overlay,
    .mobile-nav-menu {
      transition-duration: 0.01ms !important;
    }
    
    /* Disable particles completely for reduced motion */
    #particles-js {
      display: none !important;
    }
    
    /* Disable transform animations */
    .mobile-nav-toggle .hamburger-line:nth-child(1),
    .mobile-nav-toggle .hamburger-line:nth-child(3) {
      transform: none !important;
    }
    
    .mobile-nav-toggle.active .hamburger-line:nth-child(2) {
      opacity: 1 !important;
    }
  }
  
  /* Mobile-specific performance optimizations */
  @media (max-width: 767px) {
    /* Optimize animations for mobile performance */
    .hamburger-line,
    .mobile-nav-overlay,
    .mobile-nav-menu {
      /* Use hardware acceleration on mobile */
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    
    /* Disable hover effects on mobile (they don't work well with touch) */
    .btn:hover,
    nav a:hover,
    .form-control:hover,
    #theme-select:hover,
    .mobile-nav-toggle:hover {
      transform: none;
      box-shadow: none;
      background: var(--bg-elev); /* Reset to default background */
    }
    
    /* Optimize button active states for touch */
    .btn:active,
    nav a:active,
    .mobile-nav-content a:active {
      transition-duration: 0ms; /* Instant feedback */
      transform: scale(0.98); /* Subtle press feedback */
    }
    
    /* Disable particles on mobile for performance */
    #particles-js {
      display: none !important;
    }
    
    /* Optimize backdrop blur for mobile */
    .mobile-nav-overlay {
      backdrop-filter: blur(4px); /* Reduce blur intensity on mobile */
    }
  }
  
  /* Performance optimizations for low-end devices */
  @media (max-width: 767px) and (max-resolution: 1.5dppx) {
    /* Further reduce animations on low-DPI mobile devices */
    .mobile-nav-overlay {
      backdrop-filter: none; /* Remove expensive backdrop blur */
      background: rgba(0, 0, 0, 0.8); /* Use solid background instead */
    }
    
    /* Simplify shadows on low-end devices */
    .card,
    .btn,
    .mobile-nav-menu {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Simpler shadows */
    }
    
    /* Disable will-change on low-end devices to save memory */
    .hamburger-line,
    .mobile-nav-overlay,
    .mobile-nav-menu {
      will-change: auto;
    }
  }
  
  /* High-performance mode for modern mobile devices */
  @media (max-width: 767px) and (min-resolution: 2dppx) {
    /* Enable particles on high-end mobile devices with larger screens */
    @media (min-width: 414px) {
      #particles-js {
        display: block;
      }
    }
    
    /* Use hardware acceleration more liberally on high-end devices */
    .mobile-nav-menu,
    .mobile-nav-overlay,
    .hamburger-line {
      will-change: transform, opacity;
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    
    /* Enable enhanced backdrop blur on high-end devices */
    .mobile-nav-overlay {
      backdrop-filter: blur(12px);
    }
  }
  
  /* Connection-aware optimizations */
  @media (prefers-reduced-data: reduce) {
    /* Disable particles for users on limited data plans */
    #particles-js {
      display: none !important;
    }
    
    /* Reduce animation complexity */
    .hamburger-line,
    .mobile-nav-overlay,
    .mobile-nav-menu {
      transition-duration: var(--duration-fast);
    }
    
    /* Simplify visual effects */
    .mobile-nav-overlay {
      backdrop-filter: none;
      background: rgba(0, 0, 0, 0.9);
    }
  }
  
  /* Print optimizations */
  @media print {
    /* Hide interactive elements when printing */
    .mobile-nav-toggle,
    .mobile-nav-overlay,
    #particles-js {
      display: none !important;
    }
    
    /* Ensure navigation is visible in print */
    nav {
      display: block !important;
    }
    
    nav ul {
      flex-direction: column;
      gap: var(--space-xs);
    }
  }
  /*
   ===== ABOUT PAGE RESPONSIVE LAYOUT ===== */
  
  /* Mobile-first about page layout */
  .about-page {
    padding: var(--space-lg) 0;
  }
  
  .about-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 100%;
  }
  
  /* Mobile-first image styling */
  .about-image {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .about-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform var(--duration-normal) var(--ease-out);
  }
  
  /* Mobile-optimized text content */
  .about-text {
    width: 100%;
    padding: 0 var(--space-md);
  }
  
  .about-text h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-lg);
    text-align: center;
  }
  
  .about-text h2 {
    font-size: var(--text-xl);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
  }
  
  .about-text p {
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--space-md);
  }
  
  /* Tablet layout - side-by-side */
  @media (min-width: 768px) {
    .about-content {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--space-xl);
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .about-image {
      flex: 0 0 300px;
      position: sticky;
      top: var(--space-xl);
    }
    
    .about-image img {
      max-width: 100%;
    }
    
    .about-text {
      flex: 1;
      padding: 0;
    }
    
    .about-text h1 {
      text-align: left;
      font-size: 2rem;
    }
    
    .about-text h2 {
      font-size: 1.35rem;
    }
  }
  
  /* Desktop enhancements */
  @media (min-width: 1024px) {
    .about-content {
      gap: 3rem;
    }
    
    .about-image {
      flex: 0 0 350px;
    }
    
    .about-image img:hover {
      transform: scale(1.02);
    }
    
    .about-text h1 {
      font-size: 2.25rem;
    }
    
    .about-text h2 {
      font-size: 1.5rem;
    }
    
    .about-text p {
      font-size: 1.125rem;
      line-height: 1.7;
    }
  }
  
  /* Accessibility improvements */
  @media (prefers-reduced-motion: reduce) {
    .about-image img {
      transition: none;
    }
    
    .about-image img:hover {
      transform: none;
    }
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .about-image img {
      border: 2px solid var(--text);
    }
  }
  
  /* Print styles for about page */
  @media print {
    .about-content {
      flex-direction: column;
      gap: var(--space-md);
    }
    
    .about-image {
      position: static;
      max-width: 200px;
      margin: 0 auto var(--space-md);
    }
    
    .about-image img {
      box-shadow: none;
      border: 1px solid #000;
    }
  }