<!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 - AI Music Production Studio</title>
    <meta name="description" content="nspire is an AI-powered music production studio with VR support, real-time OSC control, and cloud-based beat management. Create, mix, and master your tracks with cutting-edge technology." />
    <meta name="keywords" content="nspire, music production, beat maker, VR studio, OSC control, audio mixing, music creation, DAW controller" />
    <meta name="author" content="nspire" />
    
    <!-- Open Graph / Social Media Meta Tags -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="nspire - AI Music Production Studio" />
    <meta property="og:description" content="Create, mix, and master your tracks with cutting-edge AI, VR and cloud technology" />
    <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 - AI Music Production Studio" />
    <meta name="twitter:description" content="Create, mix, and master your tracks with cutting-edge AI, VR and cloud technology" />
    
    <!-- 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-20260424185410-BKo5qSIj.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/feature-crate-digging-20260424185410-D6FBYAYq.js">
    <link rel="modulepreload" crossorigin href="/assets/feature-studio-controls-20260424185410-DskroApD.js">
    <link rel="modulepreload" crossorigin href="/assets/theme-studio-20260424185410-ChJDyQsU.js">
    <link rel="stylesheet" crossorigin href="/assets/feature-studio-controls-20260424185410-Cb2PWkwY.css">
    <link rel="stylesheet" crossorigin href="/assets/theme-studio-20260424185410-D_1rohxb.css">
    <link rel="stylesheet" crossorigin href="/assets/index-20260424185410-BJP7xYZf.css">
  </head>
  <body>
    <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>
