<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    
    <!-- SEO Meta Tags -->
    <title>nspire - Artificial Inspiration</title>
    <meta name="description" content="nspire is an artificial inspiration studio for making, mixing, and exploring AI-powered music." />
    <meta name="keywords" content="nspire, Artificial Inspiration, AI music studio, music generation, beat maker, producer tools" />
    <meta name="author" content="nspire" />
    
    <!-- Open Graph / Social Media Meta Tags -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="nspire - Artificial Inspiration" />
    <meta property="og:description" content="Make, mix, and explore AI-powered music in the nspire studio." />
    <meta property="og:url" content="https://nspire.studio" />
    <meta property="og:site_name" content="nspire" />
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="nspire - Artificial Inspiration" />
    <meta name="twitter:description" content="Make, mix, and explore AI-powered music in the nspire studio." />
    
    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#1A1A1A" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="nspire" />
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />
    <style>
      :root {
        --vh: 1vh;
      }
      
      html, body, #root {
        height: 100dvh;
        height: calc(var(--vh, 1vh) * 100);
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #1A1A1A;
        color: white;
        width: 100%;
      }
    </style>
    <!-- Preconnect to improve performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    
    <!-- Add our fixed OSC script -->
    <!-- <script src="/simplest-fix.js" defer></script> -->
    <script type="module" crossorigin src="/assets/index-20260724023736-BePaP_jJ.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/feature-crate-digging-20260724023736-C_JSy8nY.js">
    <link rel="modulepreload" crossorigin href="/assets/feature-studio-controls-20260724023736-BcV0GlOc.js">
    <link rel="modulepreload" crossorigin href="/assets/theme-studio-20260724023736-BIubwZ-z.js">
    <link rel="stylesheet" crossorigin href="/assets/feature-studio-controls-20260724023736-EQ1oKGbL.css">
    <link rel="stylesheet" crossorigin href="/assets/theme-studio-20260724023736-DoHV1me9.css">
    <link rel="stylesheet" crossorigin href="/assets/index-20260724023736-D0kMl5fF.css">
  </head>
  <body>
    <!-- Splash: paints the instant the HTML lands, while the bundles (and on
         a fresh build, the one-time cache purge re-download) are in flight.
         React removes it on mount; the failsafe fade keeps it from sticking
         if mount is slow. -->
    <div id="nspire-splash" style="position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#111214;transition:opacity .4s ease">
      <div style="font-family:system-ui,sans-serif;font-weight:700;font-size:34px;letter-spacing:.35em;color:#f4f4f5;margin-bottom:18px">NSPIRE</div>
      <div style="width:180px;height:3px;background:#26272b;border-radius:2px;overflow:hidden">
        <div id="nspire-splash-bar" style="width:30%;height:100%;background:#65dcff;border-radius:2px;animation:nspireSplashSlide 1.1s ease-in-out infinite"></div>
      </div>
      <div style="font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.18em;color:#8b8d93;margin-top:16px;text-transform:uppercase">Loading your session</div>
      <style>
        @keyframes nspireSplashSlide { 0%{transform:translateX(-140%)} 100%{transform:translateX(520%)} }
      </style>
    </div>
    <script>
      // Remove the splash once the app paints (main.tsx dispatches
      // nspire:app-ready on mount); hard timeout so it can never trap the UI.
      (function () {
        var kill = function () {
          var splash = document.getElementById('nspire-splash');
          if (!splash) return;
          splash.style.opacity = '0';
          setTimeout(function () { splash.remove(); }, 450);
        };
        window.addEventListener('nspire:app-ready', kill, { once: true });
        setTimeout(kill, 20000);
      })();
    </script>
    <div id="root"></div>
    
    <!-- Bidirectional OSC client - handles BOTH sending and receiving OSC messages -->
    <!-- <script src="/bidirectional-osc-client.js"></script> -->
    
    <!-- Fixed WebSocket client - correctly connects to the OSC bridge -->
    <!-- <script src="/fixed-socket-client.js"></script> -->
    <!-- This is a replit script which adds a banner on the top of the page when opened in development mode outside the replit environment -->
    <script type="text/javascript" src="https://replit.com/public/js/replit-dev-banner.js"></script>
  </body>
</html>
