<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>Prajol's Web</title>
    
    <!-- DNS Prefetch for external resources -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://pagead2.googlesyndication.com">
    
    <!-- Preconnect to critical origins -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Preload critical fonts with font-display: swap -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Architects+Daughter&family=Comic+Neue:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Architects+Daughter&family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet"></noscript>
    
    <!-- Load secondary fonts asynchronously -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Water+Brush&family=Quicksand:wght@300;400;500&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link href="https://fonts.googleapis.com/css2?family=Water+Brush&family=Quicksand:wght@300;400;500&display=swap" rel="stylesheet"></noscript>
    
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <meta name="theme-color" content="#1a1a1a">
    <meta name="color-scheme" content="dark">
    
    <!-- Prevent text size adjustment -->
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    
    <!-- Critical CSS for initial render -->
    <style>
      /* Critical CSS - Inline for faster FCP */
      :root {
        --primary-color: #8c52ff;
        --background-color: #050508;
        --text-color: #e6e6fa;
      }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { 
        background-color: var(--background-color); 
        color: var(--text-color);
        min-height: 100vh;
      }
      #root {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      /* Initial loading state */
      .initial-loader {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }
      .initial-loader-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid rgba(140, 82, 255, 0.2);
        border-top-color: var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      @keyframes spin { to { transform: rotate(360deg); } }
    </style>
    
    <!-- Defer non-critical scripts -->
    <meta name="google-adsense-account" content="ca-pub-7893574399541595">
    <script type="module" crossorigin src="/assets/main-gZZBtmtx.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/pdf-utils-C1QUxFLx.js">
    <link rel="modulepreload" crossorigin href="/assets/pdf-core-Bgx5vyr6.js">
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-2fJefzJ-.js">
    <link rel="modulepreload" crossorigin href="/assets/router-65j_FQ8j.js">
    <link rel="modulepreload" crossorigin href="/assets/pdf-react-DifqHwfG.js">
    <link rel="stylesheet" crossorigin href="/assets/main-CU_saLxD.css">
  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
  <body>
    <div id="root">
      <!-- Initial loading state shown before React hydrates -->
      <div class="initial-loader">
        <div class="initial-loader-spinner"></div>
        <p style="font-family: system-ui, sans-serif; opacity: 0.7;">Loading...</p>
      </div>
    </div>
    
    <!-- Main app script -->
    
    <!-- Load ads script after page load for better performance -->
    <script>
      window.addEventListener('load', function() {
        setTimeout(function() {
          var script = document.createElement('script');
          script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7893574399541595';
          script.async = true;
          script.crossOrigin = 'anonymous';
          document.head.appendChild(script);
        }, 2000); // Delay ads by 2 seconds
      });
    </script>
  </body>
</html>
