<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <script>
      if (location.hostname === 'localhost' || location.hostname === '127.0.0.1')
        document.querySelector("link[rel='icon']").href = '/favicon-dev.ico';
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Create custom laser-cut stencils from your images with our AI-powered design platform.">
    <meta name="robots" content="index, follow">
    <meta name="author" content="BayStencil">
    
    <!-- Open Graph fallback -->
    <meta property="og:title" content="BayStencil - Custom Laser Cut Stencils">
    <meta property="og:description" content="Create custom laser-cut stencils from your images with our AI-powered design platform.">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="BayStencil">
    <meta property="og:image" content="/images/logo.svg">
    
    <!-- Twitter Card fallback -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="BayStencil - Custom Laser Cut Stencils">
    <meta name="twitter:description" content="Create custom laser-cut stencils from your images with our AI-powered design platform.">
    <meta name="twitter:image" content="/images/logo.svg">
    <meta name="twitter:site" content="@baystencil">
    
    <!-- DM Sans + DM Mono from Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap" rel="stylesheet">
    <title>BayStencil - Custom Laser Cut Stencils</title>
    <link rel="sitemap" type="application/xml" href="/sitemap.xml">
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-GEVMV95JQR"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-GEVMV95JQR');
    </script>
    <script>
      // Preload gallery search index during HTML parse for /gallery pages.
      // Saves one waterfall hop — the fetch runs while JS bundles load.
      (function() {
        var p = location.pathname;
        if (p === '/gallery' || p.startsWith('/gallery/category/')) {
          var prefix = (location.hostname === 'localhost' || location.hostname === '127.0.0.1') ? 'dev' : 'prod';
          var link = document.createElement('link');
          link.rel = 'preload';
          link.as = 'fetch';
          link.crossOrigin = 'anonymous';
          link.href = 'https://storage.googleapis.com/baystencil-pipeline-output/' + prefix + '/gallery/search-index.json';
          document.head.appendChild(link);
        }
      })();
    </script>
    <script type="module" crossorigin src="/assets/BAgNgCVF.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/BQqtzk9B.css">
  </head>
  <body>
    <div id="app"></div>
    <noscript>
      <div style="text-align:center;padding:4rem 2rem;font-family:sans-serif;max-width:480px;margin:0 auto">
        <h1>BayStencil</h1>
        <p>This site requires JavaScript to run. Please enable JavaScript in your browser settings and reload the page.</p>
      </div>
    </noscript>
    <script>
      // Catch genuinely ancient browsers (no Promise/fetch/WebAssembly) before module scripts run.
      // The <noscript> tag above handles the no-JS case.
      (function() {
        try {
          if (typeof Promise === 'undefined' || typeof fetch === 'undefined' || typeof WebAssembly === 'undefined') throw 1;
        } catch(e) {
          document.getElementById('app').innerHTML = '<div style="text-align:center;padding:4rem 2rem;font-family:sans-serif;max-width:480px;margin:0 auto">'
            + '<h1>BayStencil</h1>'
            + '<p>Your browser is too old to run this site. Please update to a recent version of Chrome, Firefox, Safari, or Edge.</p></div>';
        }
      })();
    </script>
  </body>
</html>
