<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Master English - AI PDF Reader</title>

    <!-- PWA Meta Tags -->
    <meta name="description"
        content="Learn English by reading PDFs with AI-powered dictionary, flashcards, and translation" />
    <meta name="theme-color" content="#6366f1" />
    <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="Master English" />

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />

    <!-- Icons -->
    <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
    <link rel="apple-touch-icon" href="/icon-192.png" />

    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
    <link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&amp;display=swap"
        rel="stylesheet" />
    <link
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
        rel="stylesheet" />
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#FFD800",
                        "primary-hover": "#F5C700",
                        "primary-dark": "#F5C700",
                        "background-light": "#FAF9F6",
                        "background-dark": "#23220f",
                        "text-main": "#2D2D2D",
                        "text-muted": "#6C6C6C",
                        "text-secondary": "#6C6C6C",
                        "accent": "#E8E8D9",
                        "accent-soft": "#E8E8D9",
                        "surface-light": "#ffffff",
                        "surface-dark": "#2c2c2c",
                        "divider-light": "#E8E8D9",
                        "divider-dark": "#3e3d2a",
                        "context-bg": "#F4F4F2",
                        "btn-primary": "#FFD800",
                        "btn-hover": "#F5C700",
                        "text-sec": "#6C6C6C"
                    },
                    fontFamily: {
                        "display": ["Spline Sans", "Noto Sans", "sans-serif"]
                    },
                    borderRadius: { "DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px" },
                    boxShadow: {
                        'soft': '0 10px 40px -10px rgba(0,0,0,0.08)',
                        'card': '0 2px 0 0 rgba(0,0,0,0.05)',
                        'btn': '0 4px 0 0 rgba(0,0,0,0.1)',
                        'stack': '0 10px 30px -10px rgba(0, 0, 0, 0.05)',
                        'glow': '0 0 20px rgba(249, 245, 6, 0.3)'
                    }
                },
            },
        }
    </script>
    <style>
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            min-height: max(884px, 100dvh);
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .icon-filled {
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .no-scrollbar::-webkit-scrollbar,
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar,
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .highlight-word {
            background-color: rgba(255, 216, 0, 0.3);
            border-bottom: 2px solid #FFD800;
            border-radius: 4px;
            padding: 0 2px;
            transition: all 0.2s ease;
        }

        .highlight-word:active,
        .highlight-word.active {
            background-color: #FFD800;
            color: #2D2D2D;
        }

        @keyframes progress-stripe {
            0% {
                background-position: 1rem 0;
            }

            100% {
                background-position: 0 0;
            }
        }

        .animate-stripe {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
            background-size: 1rem 1rem;
            animation: progress-stripe 1s linear infinite;
        }

        .perspective-1000 {
            perspective: 1000px;
        }

        .card-stack-1 {
            transform: rotate(-3deg) translateY(8px) scale(0.95);
        }

        .card-stack-2 {
            transform: rotate(3deg) translateY(16px) scale(0.9);
        }
    </style>

    <link rel="stylesheet" href="/index.css">
    <script type="importmap">
{
  "imports": {
    "react/": "https://esm.sh/react@^19.2.3/",
    "react": "https://esm.sh/react@^19.2.3",
    "react-router-dom": "https://esm.sh/react-router-dom@^7.10.1",
    "react-dom/": "https://esm.sh/react-dom@^19.2.3/"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-BhVa4o4B.js"></script>
</head>

<body
    class="bg-background-light dark:bg-background-dark font-display text-text-main dark:text-white transition-colors duration-200">
    <div id="root"></div>

    <!-- Service Worker Registration -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(registration => {
                        console.log('SW registered:', registration);
                    })
                    .catch(error => {
                        console.log('SW registration failed:', error);
                    });
            });
        }
    </script>
</body>

</html>