<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="alternate icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Las Chispas</title>
    <meta name="description" content="Las Chispas is a fun and effective way to learn Spanish or English through interactive stories.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <!-- Add these 4 new ones right here -->
    <link rel="preconnect" href="https://apis.google.com">
    <link rel="preconnect" href="https://flutter-prep-46352.firebaseapp.com">
    <link rel="preconnect" href="https://identitytoolkit.googleapis.com">
    <link rel="preconnect" href="https://www.googleapis.com">
    <!-- Load Google Fonts directly in HTML for better performance -->
    <style>:root{--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}</style>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&amp;family=Inter:wght@300;400;500;600&amp;display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    <link rel="preload" as="image" href="/images/hero-cafe.svg" fetchpriority="high">
    <!-- Consider inlining critical CSS for above-the-fold content here -->
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/pwa-192x192.png">
    <script type="module" crossorigin="" src="/assets/index-f82cEpR-.js"></script>
    <link rel="modulepreload" crossorigin="" href="/assets/react-c5ypKtDW.js">
    <link rel="modulepreload" crossorigin="" href="/assets/firebase-app-27zULHDi.js">
    <link rel="modulepreload" crossorigin="" href="/assets/firebase-firestore-CaAfU0aX.js">
    <link rel="stylesheet" crossorigin="" href="/assets/index-BxyXTvdT.css" media="print" onload="this.media='all'">
  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js" defer=""></script></head>
  <body class="overflow-y-scroll">
    <div id="root"></div>
    <noscript><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&amp;family=Inter:wght@300;400;500;600&amp;display=swap" rel="stylesheet"></noscript>
    <noscript><link rel="stylesheet" crossorigin="" href="/assets/index-BxyXTvdT.css"></noscript>
  </body>
</html>