<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Contributor.info</title>
    
    <!-- PWA Configuration -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#3b82f6" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Contributors" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="msapplication-TileColor" content="#3b82f6" />
    <meta name="msapplication-tap-highlight" content="no" />
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png" />
    <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png" />
    
    <!-- Additional PWA Meta Tags -->
    <meta name="description" content="Visualize GitHub contributors and their contributions" />
    <meta name="keywords" content="github,contributors,open source,analytics,visualization" />
    <meta name="author" content="Brian Douglas" />
    <meta name="application-name" content="Contributor Info" />
    <meta name="format-detection" content="telephone=no" />
    
    <!-- Performance optimizations -->
    <link rel="preconnect" href="https://avatars.githubusercontent.com" crossorigin>
    <link rel="preconnect" href="https://api.github.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://avatars.githubusercontent.com">
    <link rel="dns-prefetch" href="https://api.github.com">
    <link rel="dns-prefetch" href="https://github.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    
    <!-- Preload critical resources for LCP optimization -->
    <link rel="modulepreload" href="data:application/octet-stream;base64,aW1wb3J0IHsgU3RyaWN0TW9kZSB9IGZyb20gJ3JlYWN0JzsKaW1wb3J0IHsgY3JlYXRlUm9vdCB9IGZyb20gJ3JlYWN0LWRvbS9jbGllbnQnOwppbXBvcnQgQXBwIGZyb20gJy4vQXBwJzsKaW1wb3J0ICcuL2luZGV4LmNzcyc7CmltcG9ydCB7IE1ldGFUYWdzUHJvdmlkZXIgfSBmcm9tICcuL2NvbXBvbmVudHMvY29tbW9uL2xheW91dCc7CgovLyBTZW50cnkgcmVtb3ZlZCAtIHdhcyBjYXVzaW5nIFJlYWN0IGhvb2tzIGNvbmZsaWN0cwoKLy8gUmVnaXN0ZXIgc2VydmljZSB3b3JrZXIgZm9yIHBlcmZvcm1hbmNlIG9wdGltaXphdGlvbgppZiAoJ3NlcnZpY2VXb3JrZXInIGluIG5hdmlnYXRvciAmJiBpbXBvcnQubWV0YS5lbnYuUFJPRCkgewogIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgKCkgPT4gewogICAgbmF2aWdhdG9yLnNlcnZpY2VXb3JrZXIucmVnaXN0ZXIoJy9zdy5qcycpCiAgICAgIC50aGVuKHJlZ2lzdHJhdGlvbiA9PiB7CiAgICAgICAgY29uc29sZS5sb2coJ1NXIHJlZ2lzdGVyZWQ6ICcsIHJlZ2lzdHJhdGlvbik7CiAgICAgIH0pCiAgICAgIC5jYXRjaChyZWdpc3RyYXRpb25FcnJvciA9PiB7CiAgICAgICAgY29uc29sZS5sb2coJ1NXIHJlZ2lzdHJhdGlvbiBmYWlsZWQ6ICcsIHJlZ2lzdHJhdGlvbkVycm9yKTsKICAgICAgfSk7CiAgfSk7Cn0KCi8vIFdlYiB2aXRhbHMgdHJhY2tpbmcgcmVtb3ZlZCAtIHdhcyBjYXVzaW5nIFJlYWN0IGhvb2tzIGNvbmZsaWN0cwoKCi8vIEluaXRpYWxpemUgYXBwIHdpdGggcHJvcGVyIHByb3ZpZGVyIHBhdHRlcm4KY29uc3Qgcm9vdEVsZW1lbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncm9vdCcpITsKY29uc3Qgcm9vdCA9IGNyZWF0ZVJvb3Qocm9vdEVsZW1lbnQpOwoKLy8gUmVuZGVyIGFwcCB3aXRob3V0IGFuYWx5dGljcwpyb290LnJlbmRlcigKICA8U3RyaWN0TW9kZT4KICAgIDxNZXRhVGFnc1Byb3ZpZGVyPgogICAgICA8QXBwIC8+CiAgICA8L01ldGFUYWdzUHJvdmlkZXI+CiAgPC9TdHJpY3RNb2RlPgopOwo=" />
    <link rel="modulepreload" href="/assets/App-CXo4Iejj.tsx" />
    
    <!-- Prevent FOUC by detecting theme before render -->
    <script>
      (function() {
        // Theme detection script - runs synchronously to prevent FOUC
        const storageKey = 'contributor-info-theme';
        const theme = localStorage.getItem(storageKey) || 'dark';
        
        // Apply theme immediately
        if (theme === 'system') {
          // Check system preference
          const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
          document.documentElement.classList.add(systemTheme);
        } else {
          document.documentElement.classList.add(theme);
        }
      })();
    </script>
    
    <!-- Critical CSS for above-the-fold content -->
    <style>
      /* Critical base styles */
      *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
      ::before,::after{--tw-content:''}
      html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-feature-settings:normal;font-variation-settings:normal}
      body{margin:0;line-height:inherit}
      
      /* Critical theme variables - Updated to match src/index.css */
      :root{--background:210 20% 98%;--foreground:215 25% 27%;--card:0 0% 100%;--card-foreground:215 25% 27%;--primary:14 100% 50%;--primary-foreground:0 0% 100%;--secondary:210 20% 94%;--secondary-foreground:215 25% 27%;--muted:210 20% 94%;--muted-foreground:215 16% 47%;--border:220 13% 91%;--input:210 20% 96%;--ring:14 100% 50%;--radius:0.5rem}
      .dark{--background:0 0% 3.9%;--foreground:0 0% 98%;--card:0 0% 3.9%;--card-foreground:0 0% 98%;--primary:14 100% 50%;--primary-foreground:0 0% 100%;--secondary:0 0% 14.9%;--secondary-foreground:0 0% 98%;--muted:0 0% 14.9%;--muted-foreground:0 0% 63.9%;--border:0 0% 14.9%;--input:0 0% 14.9%;--ring:14 100% 50%}
      
      /* Critical layout utilities */
      .flex{display:flex}.grid{display:grid}.hidden{display:none}.min-h-screen{min-height:100vh}.h-screen{height:100vh}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-6xl{max-width:72rem}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.rounded-xl{border-radius:0.75rem}.rounded-lg{border-radius:0.5rem}.bg-background{background-color:hsl(var(--background))}.bg-card{background-color:hsl(var(--card))}.bg-secondary{background-color:hsl(var(--secondary))}.text-foreground{color:hsl(var(--foreground))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.border{border-width:1px;border-color:hsl(var(--border))}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-center{text-align:center}.tracking-tight{letter-spacing:-0.025em}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}
      
      /* Button styles */
      .btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;rounded:calc(var(--radius) - 2px);font-size:0.875rem;font-weight:500;transition:colors 0.15s ease;cursor:pointer;border:none;outline:none}.btn:focus-visible{outline:2px solid;outline-offset:2px}.btn:disabled{pointer-events:none;opacity:0.5}.btn-primary{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.btn-primary:hover{background-color:hsl(var(--primary)/.9)}.btn-secondary{background-color:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}.btn-secondary:hover{background-color:hsl(var(--secondary)/.8)}
      
      /* Navigation styles */
      nav{border-bottom:1px solid hsl(var(--border));background-color:hsl(var(--background))}
      
      /* Prevent FOUC */
      body{background-color:hsl(var(--background));color:hsl(var(--foreground))}
      #root{min-height:100vh;background-color:hsl(var(--background))}
      
      /* Loading state */
      .loading-skeleton{background:linear-gradient(90deg,hsl(var(--muted)) 25%,hsl(var(--muted)/.5) 50%,hsl(var(--muted)) 75%);background-size:200% 100%;animation:loading 1.5s infinite}
      @keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
    </style>
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://contributor.info/" />
    <meta property="og:title" content="Contributor.info" />
    <meta property="og:description" content="Visualize GitHub contributors and their contributions" />
    <meta property="og:image" content="https://contributor.info/api/social-cards" />
    <meta property="og:image:alt" content="Contributor.info - Visualizing Open Source Contributions" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    
    <!-- Fallback for social media platforms that don't support SVG -->
    <meta property="og:image" content="https://contributor.info/social.webp" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://contributor.info/" />
    <meta property="twitter:title" content="Contributor.info" />
    <meta property="twitter:description" content="Visualize GitHub contributors and their contributions" />
    <meta property="twitter:image" content="https://contributor.info/api/social-cards" />
    <meta property="twitter:image:alt" content="Contributor.info - Visualizing Open Source Contributions" />
    <script type="module" crossorigin src="/assets/index-DNHKLk6l.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-core-D8ObPovc.js">
    <link rel="modulepreload" crossorigin href="/assets/react-ecosystem-B_xHzBP8.js">
    <link rel="stylesheet" crossorigin href="/assets/index-eEFjpOVY.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
