<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/theemel-logo.svg" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#000000" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Set theme class immediately to prevent flash and forced reflow -->
    <script>
      (function () {
        if (typeof window === "undefined") return;
        try {
          const theme = localStorage.getItem("theme");
          if (theme === "dark") {
            document.documentElement.classList.add("dark");
          }
        } catch (e) {
          // localStorage might not be available
        }
      })();
    </script>
    <title>Themal | Real-Time Theming</title>
    <meta name="email" content="davemelk@gmail.com" />
    <meta
      name="description"
      content="Interactive design system editor — pick colors, generate harmony palettes, enforce WCAG AA contrast, and export CSS custom properties in real time."
    />

    <!-- Social meta tags / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://themalive.com/" />
    <meta property="og:title" content="Themal - Real Time Design" />
    <meta
      property="og:description"
      content="Interactive design system editor — pick colors, generate harmony palettes, enforce WCAG AA contrast, and export CSS custom properties in real time."
    />
    <meta property="og:image" content="https://themalive.com/og-preview.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Themal — interactive design system editor with color picking, harmony palettes, and WCAG contrast enforcement" />
    <meta property="og:site_name" content="Themal" />
    <meta property="og:locale" content="en_US" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://themalive.com/" />
    <meta name="twitter:title" content="Themal - Real Time Design" />
    <meta
      name="twitter:description"
      content="Interactive design system editor — pick colors, generate harmony palettes, enforce WCAG AA contrast, and export CSS custom properties in real time."
    />
    <meta
      name="twitter:image"
      content="https://themalive.com/og-preview.png"
    />
    <meta name="twitter:image:alt" content="Themal — interactive design system editor with color picking, harmony palettes, and WCAG contrast enforcement" />

    <!-- Additional SEO -->
    <meta name="author" content="Themal" />
    <meta
      name="keywords"
      content="design system, CSS custom properties, theming, color palette, WCAG contrast, real-time editor, harmony schemes"
    />
    <link rel="canonical" href="https://themalive.com/" />

    <link
      rel="preconnect"
      href="https://fonts.googleapis.com"
      crossorigin="anonymous"
    />
    <link
      rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin="anonymous"
    />

    <style>
      body {
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-BQV_ORZf.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-dom-CRsf_17B.js">
    <link rel="modulepreload" crossorigin href="/assets/clerk-CAzrquBc.js">
    <link rel="modulepreload" crossorigin href="/assets/react-router-BNWtvImt.js">
    <link rel="stylesheet" crossorigin href="/assets/index-3Oxf7qJ4.css">
  </head>
  <body>
    <div id="root">
      <!-- Minimal loading skeleton for faster FCP -->
      <div
        style="
          min-height: 100vh;
          background: white;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <div style="text-align: center">
          <div
            style="
              width: 48px;
              height: 48px;
              border: 3px solid #f3f3f3;
              border-top: 3px solid #333;
              border-radius: 50%;
              animation: spin 1s linear infinite;
              margin: 0 auto 16px;
            "
          ></div>
          <p
            style="
              color: #666;
              font-family:
                -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Arial,
                sans-serif;
            "
          >
            Loading...
          </p>
        </div>
      </div>
      <style>
        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      </style>
    </div>
    <!-- Hidden Netlify form for SPA detection -->
    <form hidden method='post' name='contact'><input type='hidden' name='form-name' value='contact' />
      <input name="bot-field" />
      <input name="email" />
      <textarea name="message"></textarea>
    </form>
    <form hidden method='post' name='bug-report'><input type='hidden' name='form-name' value='bug-report' />
      <input name="bot-field" />
      <input name="email" />
      <textarea name="description"></textarea>
      <textarea name="steps"></textarea>
    </form>
  </body>
</html>
