<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22 fill=%22none%22><rect x=%221%22 y=%221%22 width=%22198%22 height=%22198%22 rx=%220%22 ry=%220%22 fill=%22rgba(34, 197, 94, 0.15)%22 stroke=%22rgba(34, 197, 94, 0.35)%22 stroke-width=%223%22/><rect x=%2280%22 y=%2240%22 width=%2240%22 height=%2212%22 rx=%224%22 fill=%22%23166534%22/><rect x=%2265%22 y=%2260%22 width=%2270%22 height=%2214%22 rx=%225%22 fill=%22%23166534%22/><rect x=%2255%22 y=%2285%22 width=%2290%22 height=%2216%22 rx=%226%22 fill=%22%23166534%22/><rect x=%2250%22 y=%22115%22 width=%22100%22 height=%2218%22 rx=%227%22 fill=%22%23166534%22/><rect x=%2270%22 y=%22145%22 width=%2260%22 height=%2216%22 rx=%225%22 fill=%22%23166534%22/></svg>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Quartz Math Academy</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
    }
    // On page load, set theme from localStorage. Default to light mode.
    if (localStorage.theme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- Google Identity Services for OAuth -->
  <script src="https://accounts.google.com/gsi/client" async defer></script>
  <!-- React Image Crop -->
  <link rel="stylesheet" href="https://unpkg.com/react-image-crop/dist/ReactCrop.css" />
  <style>
    @font-face {
      font-family: 'Apfel Grotezk';
      src: url('/assets/ApfelGrotezk-Regular-Dj0xIHSD.woff2') format('woff2'),
           url('/assets/ApfelGrotezk-Regular-Bi_CvSEB.woff') format('woff'),
           url('/assets/ApfelGrotezk-Regular-DSvBZNlR.otf') format('opentype');
      font-weight: 400; /* normal */
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Apfel Grotezk';
      src: url('/assets/ApfelGrotezk-RegularBrukt-6VtCPcm0.woff2') format('woff2'),
           url('/assets/ApfelGrotezk-RegularBrukt-CFazepIL.woff') format('woff'),
           url('/assets/ApfelGrotezk-RegularBrukt-Q0c7RSwM.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    body {
      font-family: 'Apfel Grotezk', sans-serif;
    }
    /* Page Loader Animation */
    @keyframes fade-in-fast {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .animate-fade-in-fast {
      animation: fade-in-fast 0.2s ease-out forwards;
    }

    /* Page Content Fade-in Animation */
    @keyframes content-fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    .animate-content-fade-in {
      /* A slightly longer duration for a smoother feel */
      animation: content-fade-in 0.5s ease-out forwards;
    }
    
    /* Welcome Notification Animations */
    @keyframes fade-in-fast {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .animate-fade-in-fast {
      animation: fade-in-fast 0.3s ease-out forwards;
    }
    
    @keyframes slide-in {
      from { 
        opacity: 0; 
        transform: translateY(-20px) scale(0.95); 
      }
      to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
      }
    }
    .animate-slide-in {
      animation: slide-in 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    
    /* For details summary icon rotation */
    details[open] summary .details-open\:rotate-180 {
        transform: rotate(180deg);
    }
    .bg-grid-gray-200\/50 {
        background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
        background-size: 2rem 2rem;
    }
    .dark .bg-grid-gray-700\/30 {
        background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
        background-size: 2rem 2rem;
    }
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .hide-scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }

    /* Interactive Subject Explorer Styles */
    .subject-explorer-container {
      scroll-snap-type: y mandatory;
      overflow-y: scroll;
      height: 100vh;
    }
    .subject-scene {
      scroll-snap-align: start;
      height: 100vh;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    @keyframes bg-pan {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .animated-gradient-bg {
      background: linear-gradient(
        -45deg,
        rgba(34, 197, 94, 0.05),
        rgba(34, 197, 94, 0),
        rgba(16, 185, 129, 0.05),
        rgba(16, 185, 129, 0)
      );
      background-size: 400% 400%;
      animation: bg-pan 15s ease infinite;
    }

    .dark .animated-gradient-bg {
       background: linear-gradient(
        -45deg,
        rgba(34, 197, 94, 0.1),
        rgba(10,10,10,0),
        rgba(16, 185, 129, 0.1),
        rgba(10,10,10,0)
      );
      background-size: 400% 400%;
      animation: bg-pan 15s ease infinite;
    }

    /* Geometry Cube */
    .cube-container {
      perspective: 800px;
    }
    .cube {
      width: 150px;
      height: 150px;
      position: relative;
      transform-style: preserve-3d;
      animation: rotate-cube 20s infinite linear;
    }
    @keyframes rotate-cube {
      from { transform: rotateX(0) rotateY(0) rotateZ(0); }
      to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
    }
    .cube-face {
      position: absolute;
      width: 150px;
      height: 150px;
      border: 2px solid rgba(34, 197, 94, 0.5);
      background-color: rgba(34, 197, 94, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .front  { transform: rotateY(0deg) translateZ(75px); }
    .back   { transform: rotateY(180deg) translateZ(75px); }
    .right  { transform: rotateY(90deg) translateZ(75px); }
    .left   { transform: rotateY(-90deg) translateZ(75px); }
    .top    { transform: rotateX(90deg) translateZ(75px); }
    .bottom { transform: rotateX(-90deg) translateZ(75px); }

    @media (max-width: 768px) {
      .cube {
        width: 100px;
        height: 100px;
      }
      .cube-face {
        width: 100px;
        height: 100px;
      }
      .front  { transform: rotateY(0deg) translateZ(50px); }
      .back   { transform: rotateY(180deg) translateZ(50px); }
      .right  { transform: rotateY(90deg) translateZ(50px); }
      .left   { transform: rotateY(-90deg) translateZ(50px); }
      .top    { transform: rotateX(90deg) translateZ(50px); }
      .bottom { transform: rotateX(-90deg) translateZ(50px); }
    }

  </style>

  <script>
    window.MathJax = {
      tex: {
        inlineMath: [['\\(', '\\)']],
        displayMath: [['\\[', '\\]']]
      },
      svg: {
        fontCache: 'global'
      }
    };
  </script>
  <script type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
  </script>
<link rel="stylesheet" href="/index.css">
<script type="importmap">
{
  "imports": {
    "react-dom/": "https://esm.sh/react-dom@^18.2.0/",
    "react/": "https://esm.sh/react@^18.2.0/",
    "react": "https://esm.sh/react@^18.2.0",
    "@google/genai": "https://esm.sh/@google/genai@^1.9.0",
    "react-image-crop": "https://esm.sh/react-image-crop@11.0.5",
    "framer-motion": "https://esm.sh/framer-motion@11.2.12",
    "lottie-react": "https://esm.sh/lottie-react@2.4.0",
    "mathjs": "https://esm.sh/mathjs@13.0.0",
    "lz-string": "https://esm.sh/lz-string@1.5.0",
    "zod": "https://esm.sh/zod@^4.1.1",
    "vitest": "https://esm.sh/vitest@^3.2.4",
    "next/": "https://esm.sh/next@^15.5.0/",
    "crypto": "https://esm.sh/crypto@^1.0.1",
    "@prisma/client": "https://esm.sh/@prisma/client@^6.14.0",
    "@supabase/supabase-js": "https://esm.sh/@supabase/supabase-js@^2.56.0",
    "ioredis": "https://esm.sh/ioredis@^5.7.0",
    "@supabase/ssr": "https://esm.sh/@supabase/ssr@^0.7.0"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-yCw3FSUo.js"></script>
</head>
<body class="bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-200 transition-colors duration-300">
  <div id="root"></div>
</body>
</html>