diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -4,237 +4,307 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Virtual Makeup Try-On</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.tailwindcss.com?plugins=forms"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js" crossorigin="anonymous"></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" />
     <style>
-        .makeup-item:hover {
-            transform: scale(1.05);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-        }
-        .video-feed {
-            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-        }
-        .slider-thumb::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 20px;
-            height: 20px;
-            background: #ec4899;
+        /* Custom styles for UI elements and effects */
+        body {
+            font-family: 'Inter', sans-serif; /* Using a common sans-serif font */
+        }
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+        /* Enhanced item hover/selection effects */
+        .makeup-item, .color-swatch, .foundation-swatch {
+            transition: all 0.2s ease-in-out;
             cursor: pointer;
-            border-radius: 50%;
         }
-        .glow-effect {
-            box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
+        .makeup-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+        }
+        .color-swatch:hover, .foundation-swatch:hover {
+            transform: scale(1.1);
+        }
+
+        /* Selection indicator using a ring */
+        .selected-item {
+            ring: 2px;
+            ring-offset-2;
+            @apply ring-pink-500; /* Tailwind class for ring */
+        }
+        .selected-color {
+             outline: 2px solid #ec4899; /* Pink outline */
+             outline-offset: 2px;
         }
+
+        /* Custom slider thumb style (Tailwind forms plugin helps) */
+        input[type="range"]::-webkit-slider-thumb {
+            @apply h-5 w-5 bg-pink-500 rounded-full appearance-none cursor-pointer hover:bg-pink-600;
+        }
+        input[type="range"]::-moz-range-thumb {
+             @apply h-5 w-5 bg-pink-500 rounded-full cursor-pointer border-none hover:bg-pink-600;
+        }
+
+        /* Pulse animation for start screen icon */
         @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
+            0%, 100% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.1); opacity: 0.9; }
         }
         .pulse {
-            animation: pulse 2s infinite;
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
-        .landmarks {
+
+        /* Makeup overlay canvas */
+        .makeup-overlay {
             position: absolute;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
-            pointer-events: none;
+            pointer-events: none; /* Allows interaction with elements below */
+        }
+
+        /* Loading indicator style */
+        #loading-indicator {
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: rgba(255, 255, 255, 0.7);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 50; /* Above video/canvas, below error message */
+            backdrop-filter: blur(4px);
+            border-radius: 0.75rem; /* Match parent border-radius */
+        }
+        /* Simple spinner */
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            border-left-color: #ec4899; /* Pink */
+            animation: spin 1s ease infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+         /* Error message style */
+        #error-message-container {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(220, 38, 38, 0.95); /* Red-600 */
+            color: white;
+            padding: 12px 24px;
+            border-radius: 8px;
+            z-index: 1000;
+            font-size: 0.875rem; /* 14px */
+            line-height: 1.25rem;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+            display: none; /* Hidden by default */
+            text-align: center;
+            max-width: 90%;
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-pink-50 to-purple-50 min-h-screen">
-    <header class="bg-white shadow-sm">
-        <div class="container mx-auto px-4 py-6 flex justify-between items-center">
-            <div class="flex items-center space-x-2">
-                <i class="fas fa-palette text-2xl text-pink-500"></i>
+<body class="bg-gradient-to-br from-pink-50 to-purple-50 min-h-screen font-sans text-gray-800">
+    <header class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-3">
+                <i class="fas fa-wand-magic-sparkles text-3xl text-pink-500"></i>
                 <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-purple-600">
-                    BeautyAI Pro
+                    GlamAI Try-On
                 </h1>
             </div>
             <div class="hidden md:flex items-center space-x-6">
-                <a href="#" class="text-gray-700 hover:text-pink-500 transition">Home</a>
-                <a href="#" class="text-gray-700 hover:text-pink-500 transition">Products</a>
-                <a href="#" class="text-gray-700 hover:text-pink-500 transition">About</a>
-                <button class="bg-pink-500 text-white px-4 py-2 rounded-full hover:bg-pink-600 transition">
-                    Sign In
+                <a href="#" class="text-gray-600 hover:text-pink-500 transition duration-150">Features</a>
+                <a href="#" class="text-gray-600 hover:text-pink-500 transition duration-150">Looks</a>
+                <a href="#" class="text-gray-600 hover:text-pink-500 transition duration-150">About</a>
+                <button class="bg-pink-500 text-white px-5 py-2 rounded-full hover:bg-pink-600 transition duration-150 shadow hover:shadow-md">
+                    Sign Up
                 </button>
             </div>
-            <button class="md:hidden text-gray-700">
-                <i class="fas fa-bars text-xl"></i>
+            <button class="md:hidden text-gray-600 hover:text-pink-500">
+                <i class="fas fa-bars text-2xl"></i>
             </button>
         </div>
     </header>
 
-    <main class="container mx-auto px-4 py-8">
+    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div class="text-center mb-12">
-            <h2 class="text-4xl font-bold text-gray-800 mb-4">AI-Powered Virtual Makeup Try-On</h2>
-            <p class="text-gray-600 max-w-2xl mx-auto">Experience precision makeup simulation with our advanced face tracking technology.</p>
+            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3">Virtual Makeup Preview</h2>
+            <p class="text-gray-600 max-w-2xl mx-auto text-base md:text-lg">See how different looks appear in real-time using your camera.</p>
         </div>
 
         <div class="flex flex-col lg:flex-row gap-8">
-            <!-- Camera Feed Section -->
-            <div class="lg:w-2/3 bg-white p-6 rounded-xl shadow-md">
-                <div class="flex justify-between items-center mb-6">
-                    <h3 class="text-xl font-semibold text-gray-800">Real-Time Tracking</h3>
-                    <div class="flex space-x-2">
-                        <button id="flip-camera" class="bg-gray-100 p-2 rounded-full hover:bg-gray-200">
-                            <i class="fas fa-camera-retro text-gray-700"></i>
-                        </button>
-                        <button id="toggle-camera" class="bg-pink-500 text-white p-2 rounded-full hover:bg-pink-600">
-                            <i class="fas fa-video"></i>
+            <div class="lg:w-2/3 bg-white p-6 rounded-xl shadow-lg">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-semibold text-gray-900">Live Camera Feed</h3>
+                    <div class="flex space-x-3">
+                        <button id="flip-camera" title="Flip Camera" class="bg-gray-100 p-2 rounded-full hover:bg-gray-200 text-gray-600 hover:text-pink-500 transition duration-150">
+                            <i class="fas fa-sync-alt text-lg"></i>
                         </button>
+                        <button id="toggle-camera" title="Pause/Resume Camera" class="bg-pink-500 text-white w-10 h-10 flex items-center justify-center rounded-full hover:bg-pink-600 transition duration-150 shadow">
+                            <i id="toggle-camera-icon" class="fas fa-pause text-lg"></i> </button>
                     </div>
                 </div>
-                
-                <div class="relative overflow-hidden rounded-xl bg-gray-100 h-96 flex justify-center items-center video-feed">
-                    <video id="video" autoplay playsinline class="h-full mx-auto hidden"></video>
-                    <canvas id="output" class="absolute top-0 left-0 h-full w-full"></canvas>
-                    <canvas id="makeup-layer" class="landmarks"></canvas>
-                    <div id="start-screen" class="text-center p-6">
-                        <div class="bg-pink-100 inline-block p-6 rounded-full mb-4 pulse">
-                            <i class="fas fa-magic text-4xl text-pink-500"></i>
+
+                <div class="relative overflow-hidden rounded-xl bg-gray-200 aspect-video flex justify-center items-center video-feed mb-6">
+                    <video id="video" autoplay playsinline muted class="block w-full h-full object-cover hidden"></video>
+                    <canvas id="output" class="absolute top-0 left-0 w-full h-full"></canvas>
+                    <canvas id="makeup-layer" class="makeup-overlay"></canvas>
+                    <div id="start-screen" class="text-center p-6 z-10">
+                        <div class="bg-pink-100 inline-block p-5 rounded-full mb-5 pulse">
+                            <i class="fas fa-camera-retro text-4xl text-pink-500"></i>
                         </div>
-                        <h4 class="text-xl font-semibold text-gray-800 mb-2">Precision Virtual Makeup</h4>
-                        <p class="text-gray-600 mb-4">Our AI tracks 468 facial points for perfect makeup application</p>
-                        <button id="start-btn" class="bg-pink-500 text-white px-6 py-3 rounded-full hover:bg-pink-600 transition">
-                            Start Camera
+                        <h4 class="text-xl font-semibold text-gray-800 mb-2">Ready to Try?</h4>
+                        <p class="text-gray-600 mb-5">Allow camera access to start the virtual try-on.</p>
+                        <button id="start-btn" class="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-8 py-3 rounded-full hover:from-pink-600 hover:to-purple-700 transition duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
+                            <i class="fas fa-play mr-2"></i>Start Camera
                         </button>
                     </div>
+                    <div id="loading-indicator" class="hidden">
+                         <div class="spinner"></div>
+                     </div>
                 </div>
-                
-                <!-- Makeup Controls -->
-                <div class="mt-8">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Makeup Controls</h3>
-                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
-                        <div>
-                            <label for="lipstick-opacity" class="block text-gray-700 mb-2">Lipstick Intensity</label>
-                            <input type="range" id="lipstick-opacity" min="0" max="100" value="70" class="w-full slider-thumb">
+
+                <div>
+                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Adjust Intensity</h3>
+                    <div class="grid grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-4">
+                        <div class="slider-control">
+                            <label for="lipstick-opacity" class="block text-sm font-medium text-gray-700 mb-1">Lipstick</label>
+                            <input type="range" id="lipstick-opacity" name="lipstick" min="0" max="100" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
                         </div>
-                        <div>
-                            <label for="blush-opacity" class="block text-gray-700 mb-2">Blush Intensity</label>
-                            <input type="range" id="blush-opacity" min="0" max="100" value="50" class="w-full slider-thumb">
+                        <div class="slider-control">
+                            <label for="blush-opacity" class="block text-sm font-medium text-gray-700 mb-1">Blush</label>
+                            <input type="range" id="blush-opacity" name="blush" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
                         </div>
-                        <div>
-                            <label for="eyeshadow-opacity" class="block text-gray-700 mb-2">Eyeshadow Intensity</label>
-                            <input type="range" id="eyeshadow-opacity" min="0" max="100" value="60" class="w-full slider-thumb">
+                        <div class="slider-control">
+                            <label for="eyeshadow-opacity" class="block text-sm font-medium text-gray-700 mb-1">Eyeshadow</label>
+                            <input type="range" id="eyeshadow-opacity" name="eyeshadow" min="0" max="100" value="60" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
                         </div>
-                        <div>
-                            <label for="foundation-opacity" class="block text-gray-700 mb-2">Foundation</label>
-                            <input type="range" id="foundation-opacity" min="0" max="100" value="40" class="w-full slider-thumb">
+                        <div class="slider-control">
+                            <label for="eyeliner-opacity" class="block text-sm font-medium text-gray-700 mb-1">Eyeliner</label>
+                            <input type="range" id="eyeliner-opacity" name="eyeliner" min="0" max="100" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
                         </div>
-                        <div>
-                            <label for="eyeliner-opacity" class="block text-gray-700 mb-2">Eyeliner</label>
-                            <input type="range" id="eyeliner-opacity" min="0" max="100" value="80" class="w-full slider-thumb">
+                         <div class="slider-control">
+                            <label for="mascara-opacity" class="block text-sm font-medium text-gray-700 mb-1">Mascara</label>
+                            <input type="range" id="mascara-opacity" name="mascara" min="0" max="100" value="65" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
                         </div>
-                        <div>
-                            <label for="mascara-opacity" class="block text-gray-700 mb-2">Mascara</label>
-                            <input type="range" id="mascara-opacity" min="0" max="100" value="60" class="w-full slider-thumb">
+                        <div class="slider-control">
+                            <label for="foundation-opacity" class="block text-sm font-medium text-gray-700 mb-1">Foundation</label>
+                            <input type="range" id="foundation-opacity" name="foundation" min="0" max="100" value="40" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
                         </div>
                     </div>
                 </div>
             </div>
-            
-            <!-- Products & Looks Section -->
+
             <div class="lg:w-1/3 space-y-6">
-                <!-- Quick Looks -->
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Quick Looks</h3>
+                <div class="bg-white p-6 rounded-xl shadow-lg">
+                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Quick Looks</h3>
                     <div class="grid grid-cols-2 gap-4">
-                        <button id="romantic-look" class="makeup-item bg-gradient-to-r from-rose-200 to-pink-300 p-4 rounded-lg text-center transition transform hover:shadow-lg">
-                            <i class="fas fa-heart text-2xl text-rose-600 mb-2"></i>
-                            <p class="font-medium">Romantic</p>
+                         <button data-look="romantic" class="makeup-item quick-look-btn bg-gradient-to-br from-rose-100 to-pink-200 p-4 rounded-lg text-center transition transform hover:shadow-lg">
+                            <i class="fas fa-heart text-3xl text-rose-500 mb-2"></i>
+                            <p class="font-medium text-sm text-gray-700">Romantic</p>
                         </button>
-                        <button id="night-look" class="makeup-item bg-gradient-to-r from-purple-200 to-blue-300 p-4 rounded-lg text-center transition transform hover:shadow-lg">
-                            <i class="fas fa-moon text-2xl text-indigo-600 mb-2"></i>
-                            <p class="font-medium">Night Out</p>
+                        <button data-look="night" class="makeup-item quick-look-btn bg-gradient-to-br from-indigo-200 to-purple-300 p-4 rounded-lg text-center transition transform hover:shadow-lg">
+                            <i class="fas fa-moon text-3xl text-indigo-600 mb-2"></i>
+                            <p class="font-medium text-sm text-gray-700">Night Out</p>
                         </button>
-                        <button id="day-look" class="makeup-item bg-gradient-to-r from-yellow-200 to-orange-300 p-4 rounded-lg text-center transition transform hover:shadow-lg">
-                            <i class="fas fa-sun text-2xl text-amber-600 mb-2"></i>
-                            <p class="font-medium">Daytime</p>
+                        <button data-look="day" class="makeup-item quick-look-btn bg-gradient-to-br from-amber-100 to-orange-200 p-4 rounded-lg text-center transition transform hover:shadow-lg">
+                            <i class="fas fa-sun text-3xl text-amber-500 mb-2"></i>
+                            <p class="font-medium text-sm text-gray-700">Daytime</p>
                         </button>
-                        <button id="professional-look" class="makeup-item bg-gradient-to-r from-gray-200 to-gray-300 p-4 rounded-lg text-center transition transform hover:shadow-lg">
-                            <i class="fas fa-briefcase text-2xl text-gray-600 mb-2"></i>
-                            <p class="font-medium">Professional</p>
+                        <button data-look="natural" class="makeup-item quick-look-btn bg-gradient-to-br from-green-100 to-teal-200 p-4 rounded-lg text-center transition transform hover:shadow-lg">
+                            <i class="fas fa-leaf text-3xl text-green-600 mb-2"></i>
+                            <p class="font-medium text-sm text-gray-700">Natural</p>
                         </button>
                     </div>
                 </div>
-                
-                <!-- Lipstick Colors -->
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Lipstick Colors</h3>
+
+                <div class="bg-white p-6 rounded-xl shadow-lg">
+                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Lipstick Color</h3>
+                    <div class="flex flex-wrap gap-3">
+                        <div title="Classic Red" class="w-8 h-8 rounded-full bg-red-600 color-swatch" data-makeup-type="lipstick" data-color="#dc2626"></div>
+                        <div title="Hot Pink" class="w-8 h-8 rounded-full bg-pink-500 color-swatch" data-makeup-type="lipstick" data-color="#ec4899"></div>
+                        <div title="Soft Rose" class="w-8 h-8 rounded-full bg-rose-400 color-swatch" data-makeup-type="lipstick" data-color="#fb7185"></div>
+                        <div title="Deep Plum" class="w-8 h-8 rounded-full bg-purple-700 color-swatch" data-makeup-type="lipstick" data-color="#7e22ce"></div>
+                        <div title="Coral Peach" class="w-8 h-8 rounded-full bg-orange-400 color-swatch" data-makeup-type="lipstick" data-color="#fb923c"></div>
+                        <div title="Nude Brown" class="w-8 h-8 rounded-full bg-yellow-800 color-swatch" data-makeup-type="lipstick" data-color="#92400e"></div>
+                        <div title="Berry Wine" class="w-8 h-8 rounded-full bg-red-800 color-swatch" data-makeup-type="lipstick" data-color="#991b1b"></div>
+                        <div title="Natural Beige" class="w-8 h-8 rounded-full bg-orange-200 color-swatch" data-makeup-type="lipstick" data-color="#fed7aa"></div>
+                    </div>
+                </div>
+
+                 <div class="bg-white p-6 rounded-xl shadow-lg">
+                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Foundation Shade</h3>
                     <div class="flex flex-wrap gap-3">
-                        <div class="w-8 h-8 rounded-full bg-red-500 cursor-pointer glow-effect" data-color="#dc2626"></div>
-                        <div class="w-8 h-8 rounded-full bg-pink-500 cursor-pointer" data-color="#ec4899"></div>
-                        <div class="w-8 h-8 rounded-full bg-rose-400 cursor-pointer" data-color="#fb7185"></div>
-                        <div class="w-8 h-8 rounded-full bg-purple-600 cursor-pointer" data-color="#9333ea"></div>
-                        <div class="w-8 h-8 rounded-full bg-amber-300 cursor-pointer" data-color="#fcd34d"></div>
-                        <div class="w-8 h-8 rounded-full bg-brown-500 cursor-pointer" data-color="#78350f"></div>
-                        <div class="w-8 h-8 rounded-full bg-black cursor-pointer" data-color="#1c1917"></div>
-                        <div class="w-8 h-8 rounded-full bg-white border border-gray-300 cursor-pointer" data-color="#f8fafc"></div>
+                        <div title="Fair" class="w-8 h-8 rounded-full foundation-swatch border border-gray-300" data-makeup-type="foundation" data-color="#F8E8DB" style="background-color: #F8E8DB;"></div>
+                        <div title="Light" class="w-8 h-8 rounded-full foundation-swatch border border-gray-300" data-makeup-type="foundation" data-color="#F5D7C1" style="background-color: #F5D7C1;"></div>
+                        <div title="Medium" class="w-8 h-8 rounded-full foundation-swatch border border-gray-300" data-makeup-type="foundation" data-color="#E1B99A" style="background-color: #E1B99A;"></div>
+                        <div title="Tan" class="w-8 h-8 rounded-full foundation-swatch border border-gray-300" data-makeup-type="foundation" data-color="#C19A70" style="background-color: #C19A70;"></div>
+                        <div title="Deep" class="w-8 h-8 rounded-full foundation-swatch border border-gray-300" data-makeup-type="foundation" data-color="#8C5A3C" style="background-color: #8C5A3C;"></div>
+                         <div title="Rich" class="w-8 h-8 rounded-full foundation-swatch border border-gray-300" data-makeup-type="foundation" data-color="#5E3B2F" style="background-color: #5E3B2F;"></div>
                     </div>
                 </div>
-                
-                <!-- Eyeshadow Palettes -->
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Eyeshadow Palettes</h3>
+
+                <div class="bg-white p-6 rounded-xl shadow-lg">
+                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Eyeshadow Palette</h3>
                     <div class="grid grid-cols-2 gap-4">
-                        <div id="sunset-glow" class="makeup-item p-3 rounded-lg border border-gray-200 cursor-pointer hover:shadow-md transition">
-                            <div class="flex space-x-1 mb-2">
-                                <div class="w-4 h-6 bg-amber-200 rounded-sm"></div>
-                                <div class="w-4 h-6 bg-amber-400 rounded-sm"></div>
-                                <div class="w-4 h-6 bg-amber-600 rounded-sm"></div>
+                        <div id="sunset-glow" data-makeup-type="eyeshadow" data-colors='["#FDE68A", "#FCA5A5", "#F87171"]' title="Sunset Glow Palette" class="makeup-item eyeshadow-palette p-3 rounded-lg border border-gray-200 hover:shadow-md transition">
+                            <div class="flex space-x-1 mb-2 h-6">
+                                <div class="flex-1 rounded-sm" style="background-color: #FDE68A;"></div>
+                                <div class="flex-1 rounded-sm" style="background-color: #FCA5A5;"></div>
+                                <div class="flex-1 rounded-sm" style="background-color: #F87171;"></div>
                             </div>
-                            <p class="text-sm font-medium">Sunset Glow</p>
+                            <p class="text-sm font-medium text-gray-700">Sunset Glow</p>
                         </div>
-                        <div id="berry-nights" class="makeup-item p-3 rounded-lg border border-gray-200 cursor-pointer hover:shadow-md transition">
-                            <div class="flex space-x-1 mb-2">
-                                <div class="w-4 h-6 bg-purple-200 rounded-sm"></div>
-                                <div class="w-4 h-6 bg-purple-400 rounded-sm"></div>
-                                <div class="w-4 h-6 bg-purple-600 rounded-sm"></div>
+                        <div id="berry-nights" data-makeup-type="eyeshadow" data-colors='["#E9D5FF", "#C084FC", "#9333EA"]' title="Berry Nights Palette" class="makeup-item eyeshadow-palette p-3 rounded-lg border border-gray-200 hover:shadow-md transition">
+                             <div class="flex space-x-1 mb-2 h-6">
+                                <div class="flex-1 rounded-sm" style="background-color: #E9D5FF;"></div>
+                                <div class="flex-1 rounded-sm" style="background-color: #C084FC;"></div>
+                                <div class="flex-1 rounded-sm" style="background-color: #9333EA;"></div>
                             </div>
-                            <p class="text-sm font-medium">Berry Nights</p>
+                            <p class="text-sm font-medium text-gray-700">Berry Nights</p>
                         </div>
-                        <div id="smokey-eye" class="makeup-item p-3 rounded-lg border border-gray-200 cursor-pointer hover:shadow-md transition">
-                            <div class="flex space-x-1 mb-2">
-                                <div class="w-4 h-6 bg-gray-200 rounded-sm"></div>
-                                <div class="w-4 h-6 bg-gray-400 rounded-sm"></div>
-                                <div class="w-4 h-6 bg-gray-600 rounded-sm"></div>
+                        <div id="smokey-eye" data-makeup-type="eyeshadow" data-colors='["#E5E7EB", "#9CA3AF", "#4B5563"]' title="Smokey Eye Palette" class="makeup-item eyeshadow-palette p-3 rounded-lg border border-gray-200 hover:shadow-md transition">
+                             <div class="flex space-x-1 mb-2 h-6">
+                                <div class="flex-1 rounded-sm" style="background-color: #E5E7EB;"></div>
+                                <div class="flex-1 rounded-sm" style="background-color: #9CA3AF;"></div>
+                                <div class="flex-1 rounded-sm" style="background-color: #4B5563;"></div>
                             </div>
-                            <p class="text-sm font-medium">Smokey Eye</p>
+                            <p class="text-sm font-medium text-gray-700">Smokey Eye</p>
                         </div>
-                        <div id="emerald-dream" class="makeup-item p-3 rounded-lg border border-gray-200 cursor-pointer hover:shadow-md transition">
-                            <div class="flex space-x-1 mb-2">
-                                <div class="w-4 h-6 bg-green-200 rounded-sm"></div>
-                                <div class="w-4 h-6 bg-green-400 rounded-sm"></div>
-                                <div class="w-4 h-6 bg-green-600 rounded-sm"></div>
+                        <div id="earth-tones" data-makeup-type="eyeshadow" data-colors='["#FEF3C7", "#FCD34D", "#D97706"]' title="Earth Tones Palette" class="makeup-item eyeshadow-palette p-3 rounded-lg border border-gray-200 hover:shadow-md transition">
+                            <div class="flex space-x-1 mb-2 h-6">
+                                <div class="flex-1 rounded-sm" style="background-color: #FEF3C7;"></div>
+                                <div class="flex-1 rounded-sm" style="background-color: #FCD34D;"></div>
+                                <div class="flex-1 rounded-sm" style="background-color: #D97706;"></div>
                             </div>
-                            <p class="text-sm font-medium">Emerald Dream</p>
+                            <p class="text-sm font-medium text-gray-700">Earth Tones</p>
                         </div>
                     </div>
                 </div>
-                
-                <!-- Tools -->
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Tools</h3>
+
+                <div class="bg-white p-6 rounded-xl shadow-lg">
+                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Tools</h3>
                     <div class="flex space-x-3">
-                        <button id="capture-btn" class="flex-1 bg-gray-100 hover:bg-gray-200 py-3 rounded-lg transition flex items-center justify-center space-x-2">
-                            <i class="fas fa-camera text-pink-500"></i>
+                        <button id="capture-btn" title="Capture Image" class="flex-1 bg-gray-100 hover:bg-gray-200 py-3 rounded-lg transition duration-150 flex items-center justify-center space-x-2 text-sm font-medium text-gray-700 hover:text-pink-500">
+                            <i class="fas fa-camera"></i>
                             <span>Capture</span>
                         </button>
-                        <button id="reset-btn" class="flex-1 bg-gray-100 hover:bg-gray-200 py-3 rounded-lg transition flex items-center justify-center space-x-2">
-                            <i class="fas fa-redo text-pink-500"></i>
-                            <span>Reset</span>
+                        <button id="reset-btn" title="Reset Makeup" class="flex-1 bg-gray-100 hover:bg-gray-200 py-3 rounded-lg transition duration-150 flex items-center justify-center space-x-2 text-sm font-medium text-gray-700 hover:text-pink-500">
+                            <i class="fas fa-undo"></i>
+                            <span>Reset All</span>
                         </button>
-                        <button id="landmarks-toggle" class="flex-1 bg-gray-100 hover:bg-gray-200 py-3 rounded-lg transition flex items-center justify-center space-x-2">
-                            <i class="fas fa-map-marker-alt text-pink-500"></i>
+                        <button id="landmarks-toggle" title="Toggle Landmarks" class="flex-1 bg-gray-100 hover:bg-gray-200 py-3 rounded-lg transition duration-150 flex items-center justify-center space-x-2 text-sm font-medium text-gray-700 hover:text-pink-500">
+                            <i class="fas fa-vector-square"></i>
                             <span>Landmarks</span>
                         </button>
                     </div>
@@ -243,49 +313,22 @@
         </div>
     </main>
 
-    <footer class="bg-gray-900 text-white py-12">
-        <div class="container mx-auto px-4">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div>
-                    <div class="flex items-center space-x-2 mb-4">
-                        <i class="fas fa-palette text-2xl text-pink-500"></i>
-                        <h2 class="text-xl font-bold">BeautyAI Pro</h2>
-                    </div>
-                    <p class="text-gray-400">Advanced virtual makeup using 468-point facial recognition.</p>
-                </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">Company</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Technology</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">Support</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Terms</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">Technology Partners</h3>
-                    <div class="flex items-center space-x-4">
-                        <img src="https://mediapipe.dev/images/mediapipe_small.png" alt="MediaPipe" class="h-8">
-                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/OpenCV_Logo_with_text_svg_version.svg/1200px-OpenCV_Logo_with_text_svg_version.svg.png" alt="OpenCV" class="h-8">
-                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/TensorFlow_logo.svg/1200px-TensorFlow_logo.svg.png" alt="TensorFlow" class="h-8">
-                    </div>
-                </div>
-            </div>
-            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-                <p>&copy; 2023 BeautyAI Pro. All rights reserved.</p>
+    <footer class="bg-gray-800 text-white py-10 mt-16">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <p class="text-gray-400 text-sm">&copy; 2025 GlamAI Try-On. All rights reserved.</p>
+            <div class="mt-4 space-x-4">
+                 <a href="#" class="text-gray-400 hover:text-white transition text-sm">Privacy Policy</a>
+                 <a href="#" class="text-gray-400 hover:text-white transition text-sm">Terms of Service</a>
             </div>
         </div>
     </footer>
 
-    <script>
-        // MediaPipe Face Mesh Configuration
+    <div id="error-message-container"></div>
+
+    <script type="module">
+        // Ensure using ES module type for potential future imports if needed
+
+        // --- DOM Element References ---
         const videoElement = document.getElementById('video');
         const canvasElement = document.getElementById('output');
         const canvasCtx = canvasElement.getContext('2d');
@@ -294,642 +337,948 @@
         const startScreen = document.getElementById('start-screen');
         const startBtn = document.getElementById('start-btn');
         const toggleCameraBtn = document.getElementById('toggle-camera');
+        const toggleCameraIcon = document.getElementById('toggle-camera-icon');
         const flipCameraBtn = document.getElementById('flip-camera');
         const captureBtn = document.getElementById('capture-btn');
         const resetBtn = document.getElementById('reset-btn');
         const landmarksToggle = document.getElementById('landmarks-toggle');
-        
+        const errorMessageContainer = document.getElementById('error-message-container');
+        const loadingIndicator = document.getElementById('loading-indicator');
+
+        // --- State Variables ---
         let isCameraOn = false;
+        let isCameraStarting = false; // Prevent double-clicks
         let showLandmarks = false;
-        let currentLipColor = '#ec4899';
-        let currentEyeshadowColors = ['#fef08a', '#fcd34d', '#f59e0b'];
         let faceDetected = false;
-        
-        // Camera Constraints
-        const constraints = {
+        let mediaPipeCamera = null; // Renamed from 'camera' to avoid conflict
+        let currentMakeupState = {}; // Store current colors and opacities
+
+        // --- Constants ---
+        const DEFAULT_LIP_COLOR = '#fb7185'; // Soft Rose
+        const DEFAULT_EYESHADOW_COLORS = ["#FEF3C7", "#FCD34D", "#D97706"]; // Earth Tones
+        const DEFAULT_FOUNDATION_COLOR = '#F5D7C1'; // Light
+
+        // Default opacities (can be overridden by Quick Looks)
+        const DEFAULT_OPACITIES = {
+            lipstick: 0.7, blush: 0.5, eyeshadow: 0.6, eyeliner: 0.8, mascara: 0.65, foundation: 0.4
+        };
+
+        // Landmark indices constants (using MediaPipe names where possible)
+        // Note: Indices are 0-based. Check MediaPipe docs for latest landmarks.
+        const LANDMARKS = {
+            // Lips (refined landmarks needed)
+            LIPS_OUTER_UPPER: [61, 185, 40, 39, 37, 0, 267, 269, 270, 409, 291],
+            LIPS_OUTER_LOWER: [61, 146, 91, 181, 84, 17, 314, 405, 321, 375, 291],
+            LIPS_INNER_UPPER: [78, 191, 80, 81, 82, 13, 312, 311, 310, 415, 308],
+            LIPS_INNER_LOWER: [78, 95, 88, 178, 87, 14, 317, 402, 318, 324, 308],
+            // Eyes (refined landmarks needed)
+            LEFT_EYE_UPPER_LID0: [33, 7, 163, 144, 145, 153, 154, 155, 133], // Upper contour for shadow shape
+            LEFT_EYE_UPPER_LID1: [246, 161, 160, 159, 158, 157, 173],      // Lash line for liner/mascara
+            LEFT_EYE_LOWER_LID: [133, 173, 157, 158, 159, 160, 161, 246, 33], // Lower contour (includes corners)
+            LEFT_EYEBROW: [70, 63, 105, 66, 107, 55, 65],                  // Eyebrow upper contour
+            RIGHT_EYE_UPPER_LID0: [263, 249, 390, 373, 374, 380, 381, 382, 362],
+            RIGHT_EYE_UPPER_LID1: [466, 388, 387, 386, 385, 384, 398],
+            RIGHT_EYE_LOWER_LID: [362, 398, 384, 385, 386, 387, 388, 466, 263],
+            RIGHT_EYEBROW: [300, 293, 334, 296, 336, 285, 295],
+            // Cheeks (approximate areas based on surrounding landmarks)
+            LEFT_CHEEK_AREA: [119, 118, 117, 147, 187, 205, 50, 135, 136, 234], // Points around cheekbone
+            RIGHT_CHEEK_AREA: [348, 347, 346, 376, 411, 425, 280, 364, 365, 454],
+            // Face Oval (for foundation)
+            FACE_OVAL: [
+                10, 338, 297, 332, 284, 251, 389, 356, 454, 323, 361, 288,
+                397, 365, 379, 378, 400, 377, 152, 148, 176, 149, 150, 136,
+                172, 58, 132, 93, 234, 127, 162, 21, 54, 103, 67, 109, 10
+            ]
+        };
+
+        // Quick Look Definitions
+        const QUICK_LOOKS = {
+            romantic: {
+                lipstick: { color: '#ec4899', opacity: 0.9 }, // Hot Pink
+                blush: { opacity: 0.7 },
+                eyeshadow: { colors: ["#FBCFE8", "#F9A8D4", "#F472B6"], opacity: 0.8 }, // Rose tones
+                eyeliner: { opacity: 0.9 },
+                mascara: { opacity: 0.8 },
+                foundation: { color: currentMakeupState.foundation?.color || DEFAULT_FOUNDATION_COLOR, opacity: 0.4 }
+            },
+            night: {
+                lipstick: { color: '#9333EA', opacity: 1.0 }, // Vibrant Purple
+                blush: { opacity: 0.4 },
+                eyeshadow: { colors: ["#A855F7", "#7E22CE", "#581C87"], opacity: 1.0 }, // Deep purples
+                eyeliner: { opacity: 1.0 },
+                mascara: { opacity: 0.9 },
+                foundation: { color: currentMakeupState.foundation?.color || DEFAULT_FOUNDATION_COLOR, opacity: 0.5 }
+            },
+            day: {
+                lipstick: { color: '#fb7185', opacity: 0.6 }, // Soft Rose
+                blush: { opacity: 0.5 },
+                eyeshadow: { colors: DEFAULT_EYESHADOW_COLORS, opacity: 0.5 },
+                eyeliner: { opacity: 0.6 },
+                mascara: { opacity: 0.7 },
+                foundation: { color: currentMakeupState.foundation?.color || DEFAULT_FOUNDATION_COLOR, opacity: 0.35 }
+            },
+            natural: {
+                lipstick: { color: '#fed7aa', opacity: 0.4 }, // Natural Beige
+                blush: { opacity: 0.3 },
+                eyeshadow: { colors: ["#FEF3C7", "#FCD34D", "#D97706"], opacity: 0.3 }, // Very light earth tones
+                eyeliner: { opacity: 0.4 }, // Subtle liner
+                mascara: { opacity: 0.6 },
+                foundation: { color: currentMakeupState.foundation?.color || DEFAULT_FOUNDATION_COLOR, opacity: 0.25 } // Light coverage
+            }
+        };
+
+        // --- Camera Configuration ---
+        let currentFacingMode = "user"; // Start with front camera
+        const cameraConstraints = {
             video: {
                 width: { ideal: 640 },
                 height: { ideal: 480 },
-                facingMode: "user"
+                facingMode: currentFacingMode
             }
         };
-        
-        // Face Mesh Configuration
+
+        // --- MediaPipe Face Mesh Initialization ---
         const faceMesh = new FaceMesh({
-            locateFile: (file) => {
-                return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
-            }
+            locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`
         });
-        
         faceMesh.setOptions({
             maxNumFaces: 1,
-            refineLandmarks: true,
+            refineLandmarks: true, // Crucial for detailed features
             minDetectionConfidence: 0.5,
             minTrackingConfidence: 0.5
         });
-        
+
+        // --- Face Mesh Results Callback ---
         faceMesh.onResults((results) => {
+            // Hide loading indicator once results start coming
+            if (loadingIndicator.style.display !== 'none') {
+                 hideLoading();
+            }
+
             canvasCtx.save();
             canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
-            
-            // Draw the video frame with the face mesh
-            canvasCtx.drawImage(
-                results.image, 0, 0, canvasElement.width, canvasElement.height);
-            
+            // Flip the image horizontally if using the user-facing camera
+            if (currentFacingMode === "user") {
+                canvasCtx.scale(-1, 1);
+                canvasCtx.translate(-canvasElement.width, 0);
+            }
+            canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
+
             if (results.multiFaceLandmarks && results.multiFaceLandmarks.length > 0) {
                 faceDetected = true;
                 const landmarks = results.multiFaceLandmarks[0];
-                
-                // Clear previous makeup
                 makeupCtx.clearRect(0, 0, makeupCanvas.width, makeupCanvas.height);
-                
-                // Apply virtual makeup
-                applyMakeup(landmarks);
-                
+                applyMakeup(landmarks); // Apply makeup based on current state
                 if (showLandmarks) {
+                    // Draw landmarks on the main canvas (already transformed if needed)
                     drawLandmarks(results.multiFaceLandmarks);
                 }
             } else {
                 faceDetected = false;
-                // Clear makeup when no face is detected
-                makeupCtx.clearRect(0, 0, makeupCanvas.width, makeupCanvas.height);
+                makeupCtx.clearRect(0, 0, makeupCanvas.width, makeupCanvas.height); // Clear makeup if no face
             }
-            
             canvasCtx.restore();
         });
-        
-        function drawLandmarks(landmarks) {
-            for (let i = 0; i < landmarks.length; i++) {
-                const drawingUtils = new DrawingUtils(canvasCtx);
-                drawingUtils.drawConnectors(
-                    landmarks[i], FaceMesh.FACEMESH_TESSELATION,
-                    {color: '#C0C0C070', lineWidth: 1});
-                drawingUtils.drawConnectors(
-                    landmarks[i], FaceMesh.FACEMESH_RIGHT_EYE, {color: '#FF3030', lineWidth: 1});
-                drawingUtils.drawConnectors(
-                    landmarks[i], FaceMesh.FACEMESH_RIGHT_EYEBROW, {color: '#FF3030', lineWidth: 1});
-                drawingUtils.drawConnectors(
-                    landmarks[i], FaceMesh.FACEMESH_LEFT_EYE, {color: '#30FF30', lineWidth: 1});
-                drawingUtils.drawConnectors(
-                    landmarks[i], FaceMesh.FACEMESH_LEFT_EYEBROW, {color: '#30FF30', lineWidth: 1});
-                drawingUtils.drawConnectors(
-                    landmarks[i], FaceMesh.FACEMESH_FACE_OVAL, {color: '#E0E0E0', lineWidth: 1});
-                drawingUtils.drawConnectors(
-                    landmarks[i], FaceMesh.FACEMESH_LIPS, {color: '#E0E0E0', lineWidth: 1});
+
+        // --- Drawing Functions ---
+
+        /** Draws landmarks using MediaPipe's utility */
+        function drawLandmarks(landmarksData) {
+            for (const landmarks of landmarksData) {
+                // Note: drawConnectors uses normalized coordinates, canvasCtx is already potentially flipped
+                drawConnectors(canvasCtx, landmarks, FaceMesh.FACEMESH_TESSELATION, { color: '#C0C0C070', lineWidth: 1 });
+                drawConnectors(canvasCtx, landmarks, FaceMesh.FACEMESH_RIGHT_EYE, { color: '#FF3030', lineWidth: 1 });
+                drawConnectors(canvasCtx, landmarks, FaceMesh.FACEMESH_RIGHT_EYEBROW, { color: '#FF3030', lineWidth: 1 });
+                drawConnectors(canvasCtx, landmarks, FaceMesh.FACEMESH_LEFT_EYE, { color: '#30FF30', lineWidth: 1 });
+                drawConnectors(canvasCtx, landmarks, FaceMesh.FACEMESH_LEFT_EYEBROW, { color: '#30FF30', lineWidth: 1 });
+                drawConnectors(canvasCtx, landmarks, FaceMesh.FACEMESH_FACE_OVAL, { color: '#E0E0E0', lineWidth: 1 });
+                drawConnectors(canvasCtx, landmarks, FaceMesh.FACEMESH_LIPS, { color: '#E0E0E0', lineWidth: 1 });
             }
         }
-        
+
+        /** Main function to apply all makeup types based on currentMakeupState */
         function applyMakeup(landmarks) {
             if (!faceDetected) return;
-            
-            // Get control values
-            const lipOpacity = document.getElementById('lipstick-opacity').value / 100;
-            const blushOpacity = document.getElementById('blush-opacity').value / 100;
-            const eyeshadowOpacity = document.getElementById('eyeshadow-opacity').value / 100;
-            const foundationOpacity = document.getElementById('foundation-opacity').value / 100;
-            const eyelinerOpacity = document.getElementById('eyeliner-opacity').value / 100;
-            const mascaraOpacity = document.getElementById('mascara-opacity').value / 100;
-            
-            // Apply foundation
-            if (foundationOpacity > 0) {
-                applyFoundation(landmarks, foundationOpacity);
-            }
-            
-            // Apply lipstick
-            if (lipOpacity > 0) {
-                applyLipstick(landmarks, currentLipColor, lipOpacity);
-            }
-            
-            // Apply blush
-            if (blushOpacity > 0) {
-                applyBlush(landmarks, blushOpacity);
-            }
-            
-            // Apply eyeshadow
-            if (eyeshadowOpacity > 0) {
-                applyEyeshadow(landmarks, currentEyeshadowColors, eyeshadowOpacity);
-            }
-            
-            // Apply eyeliner
-            if (eyelinerOpacity > 0) {
-                applyEyeliner(landmarks, eyelinerOpacity);
+
+            // Prepare canvas context (flip horizontally for makeup if needed)
+            makeupCtx.save();
+             if (currentFacingMode === "user") {
+                makeupCtx.scale(-1, 1);
+                makeupCtx.translate(-makeupCanvas.width, 0);
             }
-            
-            // Apply mascara would go here - requires detailed eye landmarks
+
+            const state = currentMakeupState; // Use the central state object
+
+            // Apply makeup if opacity > 0
+            if (state.foundation?.opacity > 0) applyFoundation(landmarks, state.foundation.color, state.foundation.opacity);
+            if (state.lipstick?.opacity > 0) applyLipstick(landmarks, state.lipstick.color, state.lipstick.opacity);
+            if (state.blush?.opacity > 0) applyBlush(landmarks, state.blush.opacity);
+            if (state.eyeshadow?.opacity > 0) applyEyeshadow(landmarks, state.eyeshadow.colors, state.eyeshadow.opacity);
+            if (state.eyeliner?.opacity > 0) applyEyeliner(landmarks, state.eyeliner.opacity);
+            if (state.mascara?.opacity > 0) applyMascara(landmarks, state.mascara.opacity);
+
+            makeupCtx.restore(); // Restore context after drawing
         }
-        
-        function applyFoundation(landmarks, opacity) {
-            const faceOval = getLandmarksByList(landmarks, FaceMesh.FACEMESH_FACE_OVAL);
-            const path = new Path2D();
-            
-            for (let i = 0; i < faceOval.length; i++) {
-                const point = faceOval[i];
-                if (i === 0) {
-                    path.moveTo(point.x * makeupCanvas.width, point.y * makeupCanvas.height);
-                } else {
-                    path.lineTo(point.x * makeupCanvas.width, point.y * makeupCanvas.height);
-                }
-            }
-            
-            path.closePath();
-            makeupCtx.fillStyle = `rgba(255, 230, 200, ${opacity * 0.6})`;
+
+        /** Applies foundation */
+        function applyFoundation(landmarks, color, opacity) {
+            const faceOvalPoints = getLandmarksByIndices(landmarks, LANDMARKS.FACE_OVAL);
+            if (faceOvalPoints.length < 3) return;
+            const path = createPathFromPoints(faceOvalPoints, makeupCanvas.width, makeupCanvas.height);
+            makeupCtx.fillStyle = hexToRgba(color, opacity * 0.85); // Apply opacity modifier
             makeupCtx.fill(path);
         }
-        
+
+        /** Applies lipstick */
         function applyLipstick(landmarks, color, opacity) {
-            const lipsUpper = getLandmarksByList(landmarks, FaceMesh.FACEMESH_LIPS, [61, 185, 40, 39, 37, 0, 267, 269, 270, 409, 291]);
-            const lipsLower = getLandmarksByList(landmarks, FaceMesh.FACEMESH_LIPS, [61, 146, 91, 181, 84, 17, 314, 405, 321, 375, 291]);
-            
-            const path = new Path2D();
-            
-            // Upper lip
-            for (let i = 0; i < lipsUpper.length; i++) {
-                const point = lipsUpper[i];
-                if (i === 0) {
-                    path.moveTo(point.x * makeupCanvas.width, point.y * makeupCanvas.height);
-                } else {
-                    path.lineTo(point.x * makeupCanvas.width, point.y * makeupCanvas.height);
+            const outerUpperPoints = getLandmarksByIndices(landmarks, LANDMARKS.LIPS_OUTER_UPPER);
+            const outerLowerPoints = getLandmarksByIndices(landmarks, LANDMARKS.LIPS_OUTER_LOWER);
+            const innerUpperPoints = getLandmarksByIndices(landmarks, LANDMARKS.LIPS_INNER_UPPER);
+            const innerLowerPoints = getLandmarksByIndices(landmarks, LANDMARKS.LIPS_INNER_LOWER);
+            if (outerUpperPoints.length < 2 || outerLowerPoints.length < 2 || innerUpperPoints.length < 2 || innerLowerPoints.length < 2) return;
+
+            const rgbaColor = hexToRgba(color, opacity);
+            makeupCtx.fillStyle = rgbaColor;
+
+            // Draw Upper Lip (Outer boundary -> Inner boundary reversed)
+            const upperLipPath = new Path2D();
+            drawPointsSmoothly(upperLipPath, outerUpperPoints, true, makeupCanvas.width, makeupCanvas.height);
+            drawPointsSmoothly(upperLipPath, innerUpperPoints.slice().reverse(), false, makeupCanvas.width, makeupCanvas.height);
+            upperLipPath.closePath();
+            makeupCtx.fill(upperLipPath);
+
+            // Draw Lower Lip (Outer boundary -> Inner boundary reversed)
+            const lowerLipPath = new Path2D();
+            drawPointsSmoothly(lowerLipPath, outerLowerPoints, true, makeupCanvas.width, makeupCanvas.height);
+            drawPointsSmoothly(lowerLipPath, innerLowerPoints.slice().reverse(), false, makeupCanvas.width, makeupCanvas.height);
+            lowerLipPath.closePath();
+            makeupCtx.fill(lowerLipPath);
+
+            // Add Lip Shine
+            if (opacity > 0.3) {
+                const upperLipCenter = landmarks[13]; // Approx center
+                const lowerLipCenter = landmarks[14]; // Approx center
+                if (upperLipCenter && lowerLipCenter && outerUpperPoints[5] && innerUpperPoints[5] && outerLowerPoints[4] && innerLowerPoints[4]) {
+                    const upperShineRadius = Math.abs(outerUpperPoints[5].y - innerUpperPoints[5].y) * makeupCanvas.height * 0.3;
+                    const lowerShineRadius = Math.abs(outerLowerPoints[4].y - innerLowerPoints[4].y) * makeupCanvas.height * 0.4;
+                    applyRadialGradient(upperLipCenter, upperShineRadius, `rgba(255, 255, 255, ${opacity * 0.3})`, makeupCanvas.width, makeupCanvas.height);
+                    applyRadialGradient(lowerLipCenter, lowerShineRadius, `rgba(255, 255, 255, ${opacity * 0.4})`, makeupCanvas.width, makeupCanvas.height);
                 }
             }
-            
-            // Lower lip (in reverse order)
-            for (let i = lipsLower.length - 1; i >= 0; i--) {
-                const point = lipsLower[i];
-                path.lineTo(point.x * makeupCanvas.width, point.y * makeupCanvas.height);
-            }
-            
-            path.closePath();
-            makeupCtx.fillStyle = `${color}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`;
-            makeupCtx.fill(path);
-            
-            // Add lip shine gradient
-            if (opacity > 0.5) {
-                const gradient = makeupCtx.createRadialGradient(
-                    lipsUpper[5].x * makeupCanvas.width,
-                    lipsUpper[5].y * makeupCanvas.height,
-                    0,
-                    lipsUpper[5].x * makeupCanvas.width,
-                    lipsUpper[5].y * makeupCanvas.height,
-                    (lipsUpper[5].y - lipsUpper[0].y) * makeupCanvas.height * 0.8
-                );
-                
-                gradient.addColorStop(0, `rgba(255, 255, 255, ${opacity * 0.4})`);
-                gradient.addColorStop(1, 'transparent');
-                
-                makeupCtx.fillStyle = gradient;
-                makeupCtx.fill(path);
-            }
         }
-        
+
+        /** Applies blush more realistically */
         function applyBlush(landmarks, opacity) {
-            // Get cheek landmarks (approximate positions)
-            const leftCheek = [
-                landmarks[116], landmarks[117], landmarks[118], landmarks[119], 
-                landmarks[120], landmarks[121], landmarks[228], landmarks[229],
-                landmarks[230], landmarks[231], landmarks[232], landmarks[233]
-            ];
-            
-            const rightCheek = [
-                landmarks[346], landmarks[347], landmarks[348], landmarks[349],
-                landmarks[350], landmarks[351], landmarks[448], landmarks[449],
-                landmarks[450], landmarks[451], landmarks[452], landmarks[453]
-            ];
-            
-            // Draw blush as circles on cheeks
-            makeupCtx.fillStyle = `rgba(255, 150, 150, ${opacity * 0.6})`;
-            
-            // Calculate cheek center and size
-            leftCheek.forEach(point => {
-                makeupCtx.beginPath();
-                makeupCtx.arc(
-                    point.x * makeupCanvas.width, 
-                    point.y * makeupCanvas.height, 
-                    (rightCheek[0].x - leftCheek[0].x) * makeupCanvas.width * 0.1, 
-                    0, Math.PI * 2
+            const leftCheekPoints = getLandmarksByIndices(landmarks, LANDMARKS.LEFT_CHEEK_AREA);
+            const rightCheekPoints = getLandmarksByIndices(landmarks, LANDMARKS.RIGHT_CHEEK_AREA);
+            if (leftCheekPoints.length < 3 || rightCheekPoints.length < 3) return;
+
+            const leftCheekCenter = calculateCenter(leftCheekPoints);
+            const rightCheekCenter = calculateCenter(rightCheekPoints);
+
+            // Estimate radius based on distance from center to a point on the edge
+            const leftRadius = Math.hypot(
+                (leftCheekCenter.x - leftCheekPoints[0].x) * makeupCanvas.width,
+                (leftCheekCenter.y - leftCheekPoints[0].y) * makeupCanvas.height
+            ) * 1.2; // Adjust multiplier for size
+             const rightRadius = Math.hypot(
+                (rightCheekCenter.x - rightCheekPoints[0].x) * makeupCanvas.width,
+                (rightCheekCenter.y - rightCheekPoints[0].y) * makeupCanvas.height
+            ) * 1.2;
+
+            const blushColor = `rgba(255, 130, 150, ${opacity * 0.6})`; // Slightly adjusted color/base opacity
+
+            const drawBlushGradient = (center, radius) => {
+                 if (radius <= 0) return;
+                const gradient = makeupCtx.createRadialGradient(
+                    center.x * makeupCanvas.width, center.y * makeupCanvas.height, radius * 0.1, // Inner radius (more opaque)
+                    center.x * makeupCanvas.width, center.y * makeupCanvas.height, radius       // Outer radius (fades out)
                 );
-                makeupCtx.fill();
-            });
-            
-            rightCheek.forEach(point => {
+                gradient.addColorStop(0, blushColor);
+                gradient.addColorStop(1, `rgba(255, 130, 150, 0)`); // Fade to transparent
+                makeupCtx.fillStyle = gradient;
                 makeupCtx.beginPath();
-                makeupCtx.arc(
-                    point.x * makeupCanvas.width, 
-                    point.y * makeupCanvas.height, 
-                    (rightCheek[0].x - leftCheek[0].x) * makeupCanvas.width * 0.1, 
-                    0, Math.PI * 2
-                );
+                makeupCtx.arc(center.x * makeupCanvas.width, center.y * makeupCanvas.height, radius, 0, Math.PI * 2);
                 makeupCtx.fill();
-            });
+            };
+
+            drawBlushGradient(leftCheekCenter, leftRadius);
+            drawBlushGradient(rightCheekCenter, rightRadius);
         }
-        
+
+
+        /** Applies eyeshadow */
         function applyEyeshadow(landmarks, colors, opacity) {
-            // For simplicity, we'll apply to both eyes
-            applySingleEyeShadow(landmarks, true, colors, opacity);  // Left eye
-            applySingleEyeShadow(landmarks, false, colors, opacity); // Right eye
+            applySingleEyeShadow(landmarks, true, colors, opacity); // Left
+            applySingleEyeShadow(landmarks, false, colors, opacity); // Right
         }
-        
+
+        /** Applies eyeshadow to one eye */
         function applySingleEyeShadow(landmarks, isLeftEye, colors, opacity) {
-            // Get eye landmarks (approximate positions)
-            const eyeIndices = isLeftEye ? 
-                [33, 7, 163, 144, 145, 153, 154, 155, 133, 246, 161, 160, 159, 158, 157, 173, 33] :
-                [263, 249, 390, 373, 374, 380, 381, 382, 362, 466, 388, 387, 386, 385, 384, 398, 263];
-            
-            const eyePoints = getLandmarksByIndices(landmarks, eyeIndices);
-            
-            if (eyePoints.length === 0) return;
-            
-            // Calculate eye center and radius
-            let minX = Infinity, maxX = -Infinity;
+            const upperLidPoints = getLandmarksByIndices(landmarks, isLeftEye ? LANDMARKS.LEFT_EYE_UPPER_LID0 : LANDMARKS.RIGHT_EYE_UPPER_LID0);
+            const eyebrowPoints = getLandmarksByIndices(landmarks, isLeftEye ? LANDMARKS.LEFT_EYEBROW : LANDMARKS.RIGHT_EYEBROW);
+            if (upperLidPoints.length < 2 || eyebrowPoints.length < 2) return;
+
+            // Create path from upper lid to eyebrow reversed
+            const path = new Path2D();
+            drawPointsSmoothly(path, upperLidPoints, true, makeupCanvas.width, makeupCanvas.height);
+            drawPointsSmoothly(path, eyebrowPoints.slice().reverse(), false, makeupCanvas.width, makeupCanvas.height);
+            path.closePath();
+
+            // Find bounds for gradient
             let minY = Infinity, maxY = -Infinity;
-            
-            eyePoints.forEach(point => {
-                minX = Math.min(minX, point.x);
-                maxX = Math.max(maxX, point.x);
-                minY = Math.min(minY, point.y);
-                maxY = Math.max(maxY, point.y);
+            [...upperLidPoints, ...eyebrowPoints].forEach(p => {
+                minY = Math.min(minY, p.y); maxY = Math.max(maxY, p.y);
             });
-            
-            const centerX = (minX + maxX) / 2;
-            const centerY = (minY + maxY) / 2;
-            const radius = Math.max(maxX - minX, maxY - minY) * 1.5;
-            
-            // Create gradient for eyeshadow
-            const eyePath = new Path2D();
-            for (let i = 0; i < eyePoints.length; i++) {
-                const point = eyePoints[i];
-                if (i === 0) {
-                    eyePath.moveTo(point.x * makeupCanvas.width, point.y * makeupCanvas.height);
-                } else {
-                    eyePath.lineTo(point.x * makeupCanvas.width, point.y * makeupCanvas.height);
-                }
-            }
-            eyePath.closePath();
-            
-            // Apply gradient eyeshadow
-            const gradient = makeupCtx.createRadialGradient(
-                centerX * makeupCanvas.width,
-                centerY * makeupCanvas.height,
-                0,
-                centerX * makeupCanvas.width,
-                centerY * makeupCanvas.height,
-                radius * makeupCanvas.width
-            );
-            
-            gradient.addColorStop(0, `${colors[0]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`);
-            gradient.addColorStop(0.5, `${colors[1]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`);
-            gradient.addColorStop(1, `${colors[2]}${Math.floor(opacity * 255).toString(16).padStart(2, '0')}`);
-            
-            makeupCtx.save();
-            makeupCtx.clip(eyePath);
+            if (minY === Infinity || maxY === -Infinity) return; // No valid points
+
+            // Create vertical gradient
+            const gradient = makeupCtx.createLinearGradient(0, minY * makeupCanvas.height, 0, maxY * makeupCanvas.height);
+            const numColors = colors.length;
+            colors.forEach((color, index) => {
+                gradient.addColorStop(index / (numColors - 1 || 1), hexToRgba(color, opacity));
+            });
+
             makeupCtx.fillStyle = gradient;
-            makeupCtx.fillRect(
-                (centerX - radius) * makeupCanvas.width,
-                (centerY - radius - 0.02) * makeupCanvas.height,
-                radius * 2 * makeupCanvas.width,
-                radius * 2 * makeupCanvas.height
-            );
-            makeupCtx.restore();
+            makeupCtx.fill(path);
         }
-        
+
+        /** Applies eyeliner */
         function applyEyeliner(landmarks, opacity) {
-            // For simplicity, we'll apply to both eyes
-            applySingleEyeLiner(landmarks, true, opacity);  // Left eye
-            applySingleEyeLiner(landmarks, false, opacity); // Right eye
+            applySingleEyeLiner(landmarks, true, opacity); // Left
+            applySingleEyeLiner(landmarks, false, opacity); // Right
         }
-        
+
+        /** Applies eyeliner to one eye */
         function applySingleEyeLiner(landmarks, isLeftEye, opacity) {
-            const upperLidIndices = isLeftEye ? 
-                [246, 161, 160, 159, 158, 157, 173] : 
-                [466, 388, 387, 386, 385, 384, 398];
-                
-            const lowerLidIndices = isLeftEye ? 
-                [133, 155, 154, 153, 145, 7] : 
-                [362, 382, 381, 380, 374, 249];
-            
-            const upperLidPoints = getLandmarksByIndices(landmarks, upperLidIndices);
-            const lowerLidPoints = getLandmarksByIndices(landmarks, lowerLidIndices);
-            
-            if (upperLidPoints.length === 0 || lowerLidPoints.length === 0) return;
-            
-            // Draw eyeliner on upper lid
-            makeupCtx.strokeStyle = `rgba(20, 20, 20, ${opacity})`;
-            makeupCtx.lineWidth = 2 + (opacity * 3);
+            const upperLidPoints = getLandmarksByIndices(landmarks, isLeftEye ? LANDMARKS.LEFT_EYE_UPPER_LID1 : LANDMARKS.RIGHT_EYE_UPPER_LID1);
+            const lowerLidPoints = getLandmarksByIndices(landmarks, isLeftEye ? LANDMARKS.LEFT_EYE_LOWER_LID : LANDMARKS.RIGHT_EYE_LOWER_LID); // Use full lower lid for reference
+            if (upperLidPoints.length < 2 || lowerLidPoints.length < 2) return;
+
+            makeupCtx.strokeStyle = `rgba(30, 30, 30, ${opacity})`; // Dark eyeliner
+            makeupCtx.lineWidth = 1 + (opacity * 2.5); // Slightly thinner max width
             makeupCtx.lineJoin = 'round';
-            
+            makeupCtx.lineCap = 'round';
+
+            // Draw Upper Eyeliner + Wing
             makeupCtx.beginPath();
-            makeupCtx.moveTo(
-                upperLidPoints[0].x * makeupCanvas.width,
-                upperLidPoints[0].y * makeupCanvas.height
-            );
-            
-            for (let i = 1; i < upperLidPoints.length; i++) {
-                const point = upperLidPoints[i];
-                makeupCtx.lineTo(
-                    point.x * makeupCanvas.width,
-                    point.y * makeupCanvas.height
+            drawPointsSmoothly(makeupCtx, upperLidPoints, true, makeupCanvas.width, makeupCanvas.height);
+
+            const outerCorner = upperLidPoints[upperLidPoints.length - 1];
+            const controlPoint = upperLidPoints[upperLidPoints.length - 2];
+            if (outerCorner && controlPoint) {
+                const wingLength = 12 + opacity * 8; // Adjust wing length/intensity
+                const angle = Math.atan2(outerCorner.y - controlPoint.y, outerCorner.x - controlPoint.x);
+                const wingAngleOffset = isLeftEye ? -0.35 : 0.35; // Adjust wing angle
+                const wingX = outerCorner.x * makeupCanvas.width + Math.cos(angle + wingAngleOffset) * wingLength;
+                const wingY = outerCorner.y * makeupCanvas.height + Math.sin(angle + wingAngleOffset) * wingLength;
+                makeupCtx.quadraticCurveTo( // Curve towards wing tip
+                    outerCorner.x * makeupCanvas.width + Math.cos(angle) * wingLength * 0.5,
+                    outerCorner.y * makeupCanvas.height + Math.sin(angle) * wingLength * 0.5,
+                    wingX, wingY
                 );
             }
-            
             makeupCtx.stroke();
-            
-            // Draw lower waterline
+
+            // Draw Lower Eyeliner (Subtle)
+            makeupCtx.lineWidth = 1 + (opacity * 1.0); // Much thinner
+            makeupCtx.strokeStyle = `rgba(50, 50, 50, ${opacity * 0.6})`; // Softer color/opacity
             makeupCtx.beginPath();
-            makeupCtx.moveTo(
-                lowerLidPoints[0].x * makeupCanvas.width,
-                lowerLidPoints[0].y * makeupCanvas.height
-            );
-            
-            for (let i = 1; i < lowerLidPoints.length; i++) {
-                const point = lowerLidPoints[i];
-                makeupCtx.lineTo(
-                    point.x * makeupCanvas.width,
-                    point.y * makeupCanvas.height
-                );
-            }
-            
-            makeupCtx.stroke();
-            
-            // Add wing effect
-            const lastUpperPoint = upperLidPoints[upperLidPoints.length - 1];
-            if (lastUpperPoint) {
+            // Draw only the outer half/third of the lower lash line smoothly
+            const lowerMidIndex = Math.floor(lowerLidPoints.length / 2);
+            const lowerOuterPoints = lowerLidPoints.slice(lowerMidIndex -1); // Get outer points including corner
+             if (lowerOuterPoints.length > 1) {
+                 drawPointsSmoothly(makeupCtx, lowerOuterPoints, true, makeupCanvas.width, makeupCanvas.height);
+                 makeupCtx.stroke();
+             }
+        }
+
+         /** Applies mascara effect */
+        function applyMascara(landmarks, opacity) {
+            applySingleEyeMascara(landmarks, true, opacity); // Left
+            applySingleEyeMascara(landmarks, false, opacity); // Right
+        }
+
+        /** Applies mascara to one eye */
+        function applySingleEyeMascara(landmarks, isLeftEye, opacity) {
+            const upperLashPoints = getLandmarksByIndices(landmarks, isLeftEye ? LANDMARKS.LEFT_EYE_UPPER_LID1 : LANDMARKS.RIGHT_EYE_UPPER_LID1);
+            if (upperLashPoints.length < 2) return;
+
+            makeupCtx.strokeStyle = `rgba(10, 10, 10, ${opacity * 0.9})`; // Very dark color
+            const baseLashLength = 3 + opacity * 4; // Length based on opacity
+            const lashWidth = 1 + opacity * 1.5; // Thickness
+
+            for (let i = 0; i < upperLashPoints.length - 1; i++) {
+                const p1 = upperLashPoints[i];
+                const p2 = upperLashPoints[i + 1];
+
+                // Calculate midpoint and normal direction
+                const midX = (p1.x + p2.x) / 2 * makeupCanvas.width;
+                const midY = (p1.y + p2.y) / 2 * makeupCanvas.height;
+                const dx = p2.x - p1.x;
+                const dy = p2.y - p1.y;
+                // Normal vector (pointing roughly upwards)
+                let nx = -dy;
+                let ny = dx;
+                // Ensure normal points generally upwards relative to eye orientation
+                 if ( (isLeftEye && ny > 0) || (!isLeftEye && ny > 0) ) { // Simplified check - assumes standard head pose
+                     nx *= -1;
+                     ny *= -1;
+                 }
+
+                const len = Math.sqrt(nx * nx + ny * ny);
+                if (len === 0) continue;
+                nx /= len;
+                ny /= len;
+
+                // Vary lash length slightly
+                const lashLength = baseLashLength * (0.8 + Math.random() * 0.4);
+
+                // Draw a short line (lash)
+                makeupCtx.lineWidth = lashWidth * (0.8 + Math.random() * 0.4); // Vary thickness slightly
                 makeupCtx.beginPath();
-                makeupCtx.moveTo(
-                    lastUpperPoint.x * makeupCanvas.width,
-                    lastUpperPoint.y * makeupCanvas.height
-                );
-                
-                const wingX = lastUpperPoint.x * makeupCanvas.width + (isLeftEye ? -20 : 20);
-                const wingY = lastUpperPoint.y * makeupCanvas.height - 15;
-                
-                makeupCtx.quadraticCurveTo(
-                    lastUpperPoint.x * makeupCanvas.width + (isLeftEye ? -10 : 10),
-                    lastUpperPoint.y * makeupCanvas.height - 5,
-                    wingX,
-                    wingY
-                );
-                
+                makeupCtx.moveTo(midX, midY);
+                makeupCtx.lineTo(midX + nx * lashLength, midY + ny * lashLength);
                 makeupCtx.stroke();
             }
         }
-        
-        function getLandmarksByList(landmarks, landmarkList, specificIndices = null) {
-            const points = [];
-            const indices = specificIndices || new Set();
-            
-            // If specific indices are provided, use those
-            if (specificIndices) {
-                for (const index of specificIndices) {
-                    if (index < landmarks.length) {
-                        points.push(landmarks[index]);
-                    }
-                }
-                return points;
-            }
-            
-            // Otherwise use all indices from the landmark list
-            for (const connection of landmarkList) {
-                for (let i = 0; i < 2; i++) {
-                    const index = connection[i];
-                    if (!indices.has(index)) {
-                        indices.add(index);
-                    }
-                }
-            }
-            
-            for (const index of indices) {
-                if (index < landmarks.length) {
-                    points.push(landmarks[index]);
-                }
-            }
-            
-            return points;
-        }
-        
+
+
+        // --- Helper Functions ---
+
+        /** Extracts landmarks by indices */
         function getLandmarksByIndices(landmarks, indices) {
-            const points = [];
-            
-            for (const index of indices) {
-                if (index < landmarks.length) {
-                    points.push(landmarks[index]);
+            return indices.map(index => landmarks[index]).filter(p => p); // Filter out undefined
+        }
+
+        /** Calculates the geometric center of points */
+        function calculateCenter(points) {
+            if (!points || points.length === 0) return { x: 0, y: 0 };
+            let sumX = 0, sumY = 0;
+            points.forEach(p => { sumX += p.x; sumY += p.y; });
+            return { x: sumX / points.length, y: sumY / points.length };
+        }
+
+        /** Converts HEX to RGBA */
+        function hexToRgba(hex, alpha = 1) {
+            if (!hex || typeof hex !== 'string') return `rgba(0,0,0,${alpha})`; // Default black if invalid hex
+            hex = hex.replace('#', '');
+            let r = 0, g = 0, b = 0;
+            if (hex.length === 3) { // #RGB
+                r = parseInt(hex[0] + hex[0], 16); g = parseInt(hex[1] + hex[1], 16); b = parseInt(hex[2] + hex[2], 16);
+            } else if (hex.length === 6) { // #RRGGBB
+                r = parseInt(hex[0] + hex[1], 16); g = parseInt(hex[2] + hex[3], 16); b = parseInt(hex[4] + hex[5], 16);
+            } else { return `rgba(0,0,0,${alpha})`; } // Invalid length
+            alpha = Math.max(0, Math.min(1, alpha)); // Clamp alpha
+            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        }
+
+        /** Creates a Path2D object from points, scaling to canvas dimensions */
+        function createPathFromPoints(points, canvasWidth, canvasHeight) {
+            const path = new Path2D();
+            if (points.length > 0) {
+                path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight);
+                for (let i = 1; i < points.length; i++) {
+                    path.lineTo(points[i].x * canvasWidth, points[i].y * canvasHeight);
                 }
+                path.closePath();
             }
-            
-            return points;
-        }
-        
-        // Camera Controls
-        startBtn.addEventListener('click', startCamera);
-        toggleCameraBtn.addEventListener('click', toggleCamera);
-        flipCameraBtn.addEventListener('click', flipCamera);
-        captureBtn.addEventListener('click', captureImage);
-        resetBtn.addEventListener('click', resetMakeup);
-        landmarksToggle.addEventListener('click', toggleLandmarks);
-        
+            return path;
+        }
+
+        /** Draws points smoothly using quadratic curves (scales points) */
+        function drawPointsSmoothly(ctxOrPath, points, moveToStart = true, canvasWidth, canvasHeight) {
+             if (!points || points.length < 2) return;
+             const scaledPoints = points.map(p => ({ x: p.x * canvasWidth, y: p.y * canvasHeight }));
+
+             if (moveToStart) {
+                 ctxOrPath.moveTo(scaledPoints[0].x, scaledPoints[0].y);
+             }
+             if (scaledPoints.length === 2) { // Just draw a line if only 2 points
+                 ctxOrPath.lineTo(scaledPoints[1].x, scaledPoints[1].y);
+                 return;
+             }
+             // Use Catmull-Rom like approach for smoother curves through points (simplified)
+             for (let i = 0; i < scaledPoints.length - 1; i++) {
+                 const p0 = scaledPoints[i === 0 ? i : i - 1]; // Previous point (or current if first)
+                 const p1 = scaledPoints[i];                  // Current point
+                 const p2 = scaledPoints[i + 1];              // Next point
+                 const p3 = scaledPoints[i + 2 < scaledPoints.length ? i + 2 : i + 1]; // Point after next (or next if last)
+
+                 // Calculate control points for Bezier curve between p1 and p2
+                 const cp1x = p1.x + (p2.x - p0.x) / 6;
+                 const cp1y = p1.y + (p2.y - p0.y) / 6;
+                 const cp2x = p2.x - (p3.x - p1.x) / 6;
+                 const cp2y = p2.y - (p3.y - p1.y) / 6;
+
+                 ctxOrPath.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
+             }
+        }
+
+        /** Applies a radial gradient fill */
+        function applyRadialGradient(center, radius, color, canvasWidth, canvasHeight) {
+             if (!center || radius <= 0) return;
+            const gradient = makeupCtx.createRadialGradient(
+                center.x * canvasWidth, center.y * canvasHeight, 0,
+                center.x * canvasWidth, center.y * canvasHeight, radius
+            );
+            gradient.addColorStop(0, color);
+            gradient.addColorStop(1, hexToRgba(color, 0)); // Fade to transparent version of the color
+            makeupCtx.fillStyle = gradient;
+            // Assuming the path to fill is already defined or we fill a circle
+            makeupCtx.beginPath();
+            makeupCtx.arc(center.x*canvasWidth, center.y*canvasHeight, radius, 0, Math.PI*2);
+            makeupCtx.fill();
+        }
+
+        // --- Camera and UI Control Functions ---
+
+        /** Shows the loading indicator */
+        function showLoading() {
+            loadingIndicator.classList.remove('hidden');
+        }
+        /** Hides the loading indicator */
+        function hideLoading() {
+            loadingIndicator.classList.add('hidden');
+        }
+
+        /** Initializes and starts the camera */
         async function startCamera() {
+            if (isCameraStarting || isCameraOn) return; // Prevent multiple starts
+            isCameraStarting = true;
+            showLoading();
+            console.log("Attempting to start camera...");
+
+            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+                 showErrorMessage("Camera API (getUserMedia) not supported by this browser.");
+                 hideLoading();
+                 isCameraStarting = false;
+                 return;
+            }
+            if (!window.isSecureContext) {
+                showErrorMessage("Camera requires a secure connection (HTTPS or localhost).");
+                 hideLoading();
+                 isCameraStarting = false;
+                return;
+            }
+
             try {
-                const stream = await navigator.mediaDevices.getUserMedia(constraints);
+                cameraConstraints.video.facingMode = currentFacingMode; // Ensure constraint is up-to-date
+                const stream = await navigator.mediaDevices.getUserMedia(cameraConstraints);
+                console.log("Camera stream obtained.");
                 videoElement.srcObject = stream;
                 videoElement.classList.remove('hidden');
                 startScreen.classList.add('hidden');
                 isCameraOn = true;
-                
-                // Setup canvas dimensions
-                setupCanvas();
-                
-                // Start face mesh processing
-                const camera = new Camera(videoElement, {
-                    onFrame: async () => {
-                        await faceMesh.send({image: videoElement});
-                    },
-                    width: 640,
-                    height: 480
-                });
-                camera.start();
-                
+                updateToggleIcon(); // Set to pause icon
+
+                videoElement.onloadedmetadata = () => {
+                    console.log("Video metadata loaded.");
+                    setupCanvas();
+                    initializeMediaPipeCamera(); // Initialize or re-initialize MediaPipe
+                    isCameraStarting = false;
+                    // Loading hidden by onResults callback
+                };
+                videoElement.onerror = (e) => { // Handle potential video element errors
+                     console.error("Video element error:", e);
+                     showErrorMessage("Error playing video stream.");
+                     stopCameraStream(); // Clean up on error
+                     hideLoading();
+                     isCameraStarting = false;
+                };
+
             } catch (err) {
-                console.error("Camera error:", err);
-                alert("Could not access the camera. Please check permissions.");
+                console.error("Error starting camera:", err.name, err.message);
+                handleCameraError(err); // Use helper to show specific messages
+                stopCameraStream(); // Clean up tracks if necessary
+                hideLoading();
+                isCameraStarting = false;
             }
         }
-        
+
+        /** Initializes or re-initializes the MediaPipe Camera helper */
+        function initializeMediaPipeCamera() {
+             if (mediaPipeCamera) {
+                 mediaPipeCamera.close(); // Close existing instance first
+             }
+             console.log("Initializing MediaPipe Camera helper.");
+             mediaPipeCamera = new Camera(videoElement, {
+                 onFrame: async () => {
+                     // Ensure video is ready and camera is "on" before sending frame
+                     if (videoElement.readyState >= 2 && isCameraOn) {
+                         await faceMesh.send({ image: videoElement });
+                     }
+                 },
+                 width: cameraConstraints.video.width.ideal,
+                 height: cameraConstraints.video.height.ideal
+             });
+             mediaPipeCamera.start();
+             console.log("MediaPipe Camera processing started.");
+        }
+
+
+        /** Handles different camera start errors */
+        function handleCameraError(err) {
+            let message = "Could not access camera.";
+            switch(err.name) {
+                case "NotAllowedError": message = "Permission denied. Please allow camera access in browser/OS settings."; break;
+                case "NotFoundError": message = "No camera found. Ensure it's connected and enabled."; break;
+                case "NotReadableError": message = "Camera is busy or hardware error. Close other apps using the camera."; break;
+                case "OverconstrainedError": message = `Camera doesn't support resolution ${cameraConstraints.video.width.ideal}x${cameraConstraints.video.height.ideal}. Try another camera or resolution.`; break;
+                case "SecurityError": message = "Camera access denied due to browser security settings or insecure connection."; break;
+                case "TypeError": message = "Invalid camera constraints specified."; break;
+                default: message = `Unknown camera error: ${err.name}`; break;
+            }
+            showErrorMessage(message);
+            startScreen.classList.remove('hidden'); // Show start button again
+            videoElement.classList.add('hidden');
+        }
+
+        /** Stops the camera stream and cleans up */
+        function stopCameraStream() {
+            console.log("Stopping camera stream and MediaPipe.");
+            if (mediaPipeCamera) {
+                mediaPipeCamera.close(); // Stop MediaPipe processing
+                mediaPipeCamera = null;
+            }
+            if (videoElement.srcObject) {
+                videoElement.srcObject.getTracks().forEach(track => track.stop()); // Stop hardware tracks
+                videoElement.srcObject = null;
+            }
+            videoElement.classList.add('hidden'); // Hide video element
+            startScreen.classList.remove('hidden'); // Show start screen
+            isCameraOn = false;
+            isCameraStarting = false;
+            faceDetected = false;
+            makeupCtx.clearRect(0, 0, makeupCanvas.width, makeupCanvas.height); // Clear makeup
+            canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height); // Clear video canvas
+            updateToggleIcon(); // Set to play icon
+        }
+
+        /** Toggles camera pause/play */
         function toggleCamera() {
-            if (!videoElement.srcObject) return;
-            
+            if (isCameraStarting || !videoElement.srcObject) return; // Don't toggle if starting or not started
+
             isCameraOn = !isCameraOn;
             if (isCameraOn) {
-                toggleCameraBtn.innerHTML = '<i class="fas fa-video-slash"></i>';
                 videoElement.play();
+                mediaPipeCamera?.start(); // Resume MediaPipe (if it exists)
+                console.log("Camera resumed.");
             } else {
-                toggleCameraBtn.innerHTML = '<i class="fas fa-video"></i>';
                 videoElement.pause();
+                mediaPipeCamera?.stop(); // Pause MediaPipe
+                console.log("Camera paused.");
             }
+            updateToggleIcon();
         }
-        
-        function flipCamera() {
-            if (!videoElement.srcObject) return;
-            
-            constraints.video.facingMode = constraints.video.facingMode === "user" ? 
-                { exact: "environment" } : "user";
-            
-            // Restart camera with new constraints
-            videoElement.srcObject.getTracks().forEach(track => track.stop());
-            startCamera();
-        }
-        
+
+        /** Updates the toggle button icon based on isCameraOn state */
+        function updateToggleIcon() {
+             if (isCameraOn) {
+                 toggleCameraIcon.classList.remove('fa-play');
+                 toggleCameraIcon.classList.add('fa-pause');
+                 toggleCameraBtn.title = "Pause Camera";
+             } else {
+                 toggleCameraIcon.classList.remove('fa-pause');
+                 toggleCameraIcon.classList.add('fa-play');
+                 toggleCameraBtn.title = "Resume Camera";
+             }
+        }
+
+
+        /** Flips camera */
+        async function flipCamera() {
+            if (isCameraStarting) return; // Don't flip while starting
+            console.log("Attempting to flip camera...");
+            currentFacingMode = (currentFacingMode === "user") ? "environment" : "user";
+            console.log("New facing mode:", currentFacingMode);
+            stopCameraStream(); // Stop current stream completely
+            await startCamera(); // Restart with new facing mode
+        }
+
+        /** Captures image */
         function captureImage() {
-            if (!faceDetected) {
-                alert("No face detected to capture!");
-                return;
-            }
-            
-            // Create a temporary canvas to merge both layers
+            if (!isCameraOn) { showErrorMessage("Camera is paused. Resume to capture."); return; }
+            if (!faceDetected && !showLandmarks) { showErrorMessage("No face detected to capture!"); return; }
+
+            // Create temp canvas matching the display size
             const tempCanvas = document.createElement('canvas');
-            tempCanvas.width = canvasElement.width;
-            tempCanvas.height = canvasElement.height;
+            tempCanvas.width = canvasElement.clientWidth; // Use clientWidth for displayed size
+            tempCanvas.height = canvasElement.clientHeight;
             const tempCtx = tempCanvas.getContext('2d');
-            
-            // Draw video frame
-            tempCtx.drawImage(videoElement, 0, 0, tempCanvas.width, tempCanvas.height);
-            
-            // Draw makeup layer
-            tempCtx.drawImage(makeupCanvas, 0, 0);
-            
+
+             // Draw the potentially flipped video frame from the output canvas
+             // Need to account for the flip when drawing onto the temp canvas if necessary
+             tempCtx.save();
+             if (currentFacingMode === "user") {
+                 tempCtx.scale(-1, 1);
+                 tempCtx.translate(-tempCanvas.width, 0);
+             }
+             // Draw the source output canvas (which holds the correctly oriented video frame)
+             tempCtx.drawImage(canvasElement, 0, 0, tempCanvas.width, tempCanvas.height);
+             tempCtx.restore(); // Restore context before drawing makeup
+
+            // Draw the makeup overlay (which is also drawn flipped if needed)
+            // To draw it correctly on the non-flipped temp canvas, we need to flip it back if necessary
+             tempCtx.save();
+             if (currentFacingMode === "user") {
+                 tempCtx.scale(-1, 1);
+                 tempCtx.translate(-tempCanvas.width, 0);
+             }
+             tempCtx.drawImage(makeupCanvas, 0, 0, tempCanvas.width, tempCanvas.height);
+             tempCtx.restore();
+
+
             // Create download link
             const link = document.createElement('a');
-            link.download = 'virtual-makeup-' + new Date().getTime() + '.png';
+            link.download = `virtual-makeup-${Date.now()}.png`;
             link.href = tempCanvas.toDataURL('image/png');
             link.click();
+            console.log("Image captured.");
         }
-        
+
+        /** Resets makeup state and UI */
         function resetMakeup() {
-            // Reset all sliders to default values
-            document.getElementById('lipstick-opacity').value = 70;
-            document.getElementById('blush-opacity').value = 50;
-            document.getElementById('eyeshadow-opacity').value = 60;
-            document.getElementById('foundation-opacity').value = 40;
-            document.getElementById('eyeliner-opacity').value = 80;
-            document.getElementById('mascara-opacity').value = 60;
-            
-            // Reset colors
-            currentLipColor = '#ec4899';
-            currentEyeshadowColors = ['#fef08a', '#fcd34d', '#f59e0b'];
-            
-            // Update UI
-            updateColorUI();
-        }
-        
+            console.log("Resetting makeup.");
+            // Reset state object
+            initializeMakeupState();
+            // Update sliders to match default state
+            updateSlidersFromState();
+            // Update UI highlights
+            updateColorSelectionUI();
+            updatePaletteSelectionUI();
+            updateLookSelectionUI(); // Clear look selection
+            // Trigger redraw if camera is active
+            // (Handled by next onResults call as state is updated)
+        }
+
+        /** Toggles landmarks */
         function toggleLandmarks() {
             showLandmarks = !showLandmarks;
-            landmarksToggle.classList.toggle('bg-pink-100');
-        }
-        
-        function updateColorUI() {
-            // Reset all color dots
-            const colorDots = document.querySelectorAll('[data-color]');
-            colorDots.forEach(dot => dot.classList.remove('glow-effect'));
-            
-            // Reset all look buttons
-            const quickLooks = document.querySelectorAll('.makeup-item');
-            quickLooks.forEach(look => look.classList.remove('glow-effect'));
-        }
-        
+            landmarksToggle.classList.toggle('bg-pink-100', showLandmarks); // Use background toggle
+            landmarksToggle.classList.toggle('text-pink-600', showLandmarks);
+            landmarksToggle.title = showLandmarks ? "Hide Landmarks" : "Show Landmarks";
+            console.log("Landmarks toggled:", showLandmarks);
+            // Redraw handled by next onResults call
+        }
+
+        /** Sets canvas dimensions based on video and container */
         function setupCanvas() {
-            // Set canvas dimensions to match video feed
+            if (!videoElement.videoWidth || videoElement.videoWidth === 0) return; // Exit if video dimensions invalid
+
             const container = videoElement.parentElement;
-            const aspectRatio = videoElement.videoWidth / videoElement.videoHeight;
-            
-            let width = container.offsetWidth;
-            let height = container.offsetHeight;
-            
-            if (width / height > aspectRatio) {
-                width = height * aspectRatio;
+            const videoWidth = videoElement.videoWidth;
+            const videoHeight = videoElement.videoHeight;
+            const containerWidth = container.clientWidth;
+            const containerHeight = container.clientHeight;
+
+            // Calculate the aspect ratio of the video
+            const videoAspectRatio = videoWidth / videoHeight;
+            // Calculate the aspect ratio of the container
+            const containerAspectRatio = containerWidth / containerHeight;
+
+            let canvasWidth, canvasHeight;
+
+            // Determine final canvas dimensions to fit container using 'object-fit: cover' logic
+            if (videoAspectRatio > containerAspectRatio) {
+                // Video is wider than container, scale by height
+                canvasHeight = containerHeight;
+                canvasWidth = canvasHeight * videoAspectRatio;
             } else {
-                height = width / aspectRatio;
+                // Video is taller than container (or same aspect ratio), scale by width
+                canvasWidth = containerWidth;
+                canvasHeight = canvasWidth / videoAspectRatio;
             }
-            
-            canvasElement.width = width;
-            canvasElement.height = height;
-            makeupCanvas.width = width;
-            makeupCanvas.height = height;
-        }
-        
-        // Quick look presets
-        document.getElementById('romantic-look').addEventListener('click', () => {
-            document.getElementById('lipstick-opacity').value = 90;
-            document.getElementById('lipstick-opacity').dispatchEvent(new Event('input'));
-            currentLipColor = '#ec4899';
-            currentEyeshadowColors = ['#fbcfe8', '#f9a8d4', '#f472b6'];
-            document.getElementById('eyeshadow-opacity').value = 80;
-            document.getElementById('blush-opacity').value = 70;
-            document.getElementById('eyeliner-opacity').value = 90;
-        });
-        
-        document.getElementById('night-look').addEventListener('click', () => {
-            document.getElementById('lipstick-opacity').value = 100;
-            document.getElementById('lipstick-opacity').dispatchEvent(new Event('input'));
-            currentLipColor = '#1c1917';
-            currentEyeshadowColors = ['#7e22ce', '#6b21a8', '#581c87'];
-            document.getElementById('eyeshadow-opacity').value = 100;
-            document.getElementById('blush-opacity').value = 40;
-            document.getElementById('eyeliner-opacity').value = 100;
-        });
-        
-        document.getElementById('day-look').addEventListener('click', () => {
-            document.getElementById('lipstick-opacity').value = 60;
-            document.getElementById('lipstick-opacity').dispatchEvent(new Event('input'));
-            currentLipColor = '#fb7185';
-            currentEyeshadowColors = ['#fef08a', '#fcd34d', '#f59e0b'];
-            document.getElementById('eyeshadow-opacity').value = 50;
-            document.getElementById('blush-opacity').value = 50;
-            document.getElementById('eyeliner-opacity').value = 60;
-        });
-        
-        document.getElementById('professional-look').addEventListener('click', () => {
-            document.getElementById('lipstick-opacity').value = 50;
-            document.getElementById('lipstick-opacity').dispatchEvent(new Event('input'));
-            currentLipColor = '#78350f';
-            currentEyeshadowColors = ['#e5e7eb', '#d1d5db', '#9ca3af'];
-            document.getElementById('eyeshadow-opacity').value = 40;
-            document.getElementById('blush-opacity').value = 40;
-            document.getElementById('eyeliner-opacity').value = 50;
-        });
-        
-        // Eyeshadow palette selection
-        document.getElementById('sunset-glow').addEventListener('click', () => {
-            currentEyeshadowColors = ['#fef08a', '#fcd34d', '#f59e0b'];
-        });
-        
-        document.getElementById('berry-nights').addEventListener('click', () => {
-            currentEyeshadowColors = ['#e9d5ff', '#d8b4fe', '#c084fc'];
-        });
-        
-        document.getElementById('smokey-eye').addEventListener('click', () => {
-            currentEyeshadowColors = ['#e5e7eb', '#d1d5db', '#9ca3af'];
-        });
-        
-        document.getElementById('emerald-dream').addEventListener('click', () => {
-            currentEyeshadowColors = ['#bbf7d0', '#86efac', '#4ade80', '#22c55e'];
-        });
-        
-        // Lipstick color selection
-        const colorDots = document.querySelectorAll('[data-color]');
-        colorDots.forEach(dot => {
-            dot.addEventListener('click', function() {
-                colorDots.forEach(d => d.classList.remove('glow-effect'));
-                this.classList.add('glow-effect');
-                currentLipColor = this.getAttribute('data-color');
+
+            // Set dimensions for both canvases
+            canvasElement.width = makeupCanvas.width = videoWidth; // Use video's native resolution for drawing buffer
+            canvasElement.height = makeupCanvas.height = videoHeight;
+
+            // Set display size using CSS to fill the container (aspect-video handles this)
+             canvasElement.style.width = makeupCanvas.style.width = `100%`;
+             canvasElement.style.height = makeupCanvas.style.height = `100%`;
+             // Ensure video element also fills container for correct layout
+             videoElement.style.width = `100%`;
+             videoElement.style.height = `100%`;
+
+            console.log(`Canvas buffer size: ${videoWidth}x${videoHeight}, Display size fills container.`);
+        }
+
+        /** Displays a non-blocking error message */
+        function showErrorMessage(message) {
+            errorMessageContainer.textContent = message;
+            errorMessageContainer.style.display = 'block';
+            // Hide after 5 seconds
+            clearTimeout(errorMessageContainer.timer); // Clear previous timer if any
+            errorMessageContainer.timer = setTimeout(() => {
+                errorMessageContainer.style.display = 'none';
+            }, 5000);
+        }
+
+        // --- State Management ---
+
+        /** Initializes or resets the makeup state object */
+        function initializeMakeupState() {
+            currentMakeupState = {
+                lipstick: { color: DEFAULT_LIP_COLOR, opacity: DEFAULT_OPACITIES.lipstick },
+                blush: { opacity: DEFAULT_OPACITIES.blush },
+                eyeshadow: { colors: [...DEFAULT_EYESHADOW_COLORS], opacity: DEFAULT_OPACITIES.eyeshadow },
+                eyeliner: { opacity: DEFAULT_OPACITIES.eyeliner },
+                mascara: { opacity: DEFAULT_OPACITIES.mascara },
+                foundation: { color: DEFAULT_FOUNDATION_COLOR, opacity: DEFAULT_OPACITIES.foundation }
+            };
+             console.log("Makeup state initialized:", JSON.parse(JSON.stringify(currentMakeupState)));
+        }
+
+        /** Updates the state based on a slider change */
+        function handleSliderChange(event) {
+            const makeupType = event.target.name;
+            const opacity = parseFloat(event.target.value) / 100;
+            if (currentMakeupState[makeupType]) {
+                currentMakeupState[makeupType].opacity = opacity;
+                 // console.log(`State updated: ${makeupType} opacity = ${opacity}`);
+            } else {
+                 console.warn(`Makeup type ${makeupType} not found in state.`);
+            }
+             updateLookSelectionUI(); // Deselect look if slider is manually changed
+        }
+
+        /** Updates the state based on color/palette selection */
+        function handleColorSelection(event) {
+            const target = event.currentTarget; // Use currentTarget for delegated events
+            const makeupType = target.dataset.makeupType;
+            const color = target.dataset.color;
+            const colors = target.dataset.colors ? JSON.parse(target.dataset.colors) : null;
+
+            if (makeupType === 'lipstick' && color) {
+                currentMakeupState.lipstick.color = color;
+                updateColorSelectionUI('lipstick', color);
+            } else if (makeupType === 'foundation' && color) {
+                 currentMakeupState.foundation.color = color;
+                 updateColorSelectionUI('foundation', color);
+            } else if (makeupType === 'eyeshadow' && colors) {
+                currentMakeupState.eyeshadow.colors = colors;
+                updatePaletteSelectionUI(target.id);
+            }
+            updateLookSelectionUI(); // Deselect look if color/palette is manually changed
+             console.log(`State updated: ${makeupType} color/colors set.`);
+        }
+
+        /** Applies a quick look preset */
+        function applyQuickLook(event) {
+             const lookName = event.currentTarget.dataset.look;
+             const lookData = QUICK_LOOKS[lookName];
+             if (!lookData) {
+                 console.error(`Look "${lookName}" not found.`);
+                 return;
+             }
+             console.log(`Applying look: ${lookName}`);
+
+             // Update state from look data
+             for (const makeupType in lookData) {
+                 if (currentMakeupState[makeupType]) {
+                     // Preserve existing foundation color if not specified by look
+                     if (makeupType === 'foundation' && !lookData.foundation.color) {
+                         lookData.foundation.color = currentMakeupState.foundation.color || DEFAULT_FOUNDATION_COLOR;
+                     }
+                     currentMakeupState[makeupType] = { ...currentMakeupState[makeupType], ...lookData[makeupType] };
+                 }
+             }
+
+             // Update UI elements
+             updateSlidersFromState();
+             updateColorSelectionUI('lipstick', currentMakeupState.lipstick.color);
+             updateColorSelectionUI('foundation', currentMakeupState.foundation.color);
+             updatePaletteSelectionUI(null, currentMakeupState.eyeshadow.colors); // Update based on colors array
+             updateLookSelectionUI(lookName); // Highlight the selected look button
+        }
+
+        // --- UI Update Functions ---
+
+        /** Updates sliders to match the current state */
+        function updateSlidersFromState() {
+             document.querySelectorAll('.slider-control input[type="range"]').forEach(slider => {
+                 const makeupType = slider.name;
+                 if (currentMakeupState[makeupType] && typeof currentMakeupState[makeupType].opacity === 'number') {
+                     slider.value = currentMakeupState[makeupType].opacity * 100;
+                 }
+             });
+        }
+
+        /** Updates visual selection for color swatches */
+        function updateColorSelectionUI(type, selectedColor) {
+             document.querySelectorAll(`.color-swatch[data-makeup-type="${type}"], .foundation-swatch[data-makeup-type="${type}"]`).forEach(swatch => {
+                 swatch.classList.toggle('selected-color', swatch.dataset.color === selectedColor);
+             });
+        }
+
+        /** Updates visual selection for eyeshadow palettes */
+        function updatePaletteSelectionUI(selectedId = null, selectedColors = null) {
+             document.querySelectorAll('.eyeshadow-palette').forEach(palette => {
+                 let isSelected = false;
+                 if (selectedId) {
+                     isSelected = palette.id === selectedId;
+                 } else if (selectedColors) {
+                     const paletteColors = palette.dataset.colors ? JSON.parse(palette.dataset.colors) : null;
+                     isSelected = JSON.stringify(paletteColors) === JSON.stringify(selectedColors);
+                 }
+                 palette.classList.toggle('selected-item', isSelected);
+             });
+        }
+
+         /** Updates visual selection for quick look buttons */
+        function updateLookSelectionUI(selectedLookName = null) {
+             document.querySelectorAll('.quick-look-btn').forEach(btn => {
+                 btn.classList.toggle('selected-item', btn.dataset.look === selectedLookName);
+             });
+        }
+
+
+        // --- Event Listeners ---
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log("DOM ready. Initializing...");
+            initializeMakeupState(); // Set initial default state
+            updateSlidersFromState(); // Set initial slider positions
+            updateColorSelectionUI('lipstick', currentMakeupState.lipstick.color); // Highlight default lipstick
+            updateColorSelectionUI('foundation', currentMakeupState.foundation.color); // Highlight default foundation
+            updatePaletteSelectionUI(null, currentMakeupState.eyeshadow.colors); // Highlight default palette
+
+            // Check secure context
+            if (!window.isSecureContext && window.location.hostname !== "localhost" && window.location.hostname !== "127.0.0.1") {
+                showErrorMessage("Warning: Camera works best on HTTPS or localhost.");
+            }
+
+            // --- Attach Event Listeners ---
+            startBtn?.addEventListener('click', startCamera);
+            toggleCameraBtn?.addEventListener('click', toggleCamera);
+            flipCameraBtn?.addEventListener('click', flipCamera);
+            captureBtn?.addEventListener('click', captureImage);
+            resetBtn?.addEventListener('click', resetMakeup);
+            landmarksToggle?.addEventListener('click', toggleLandmarks);
+
+            // Sliders - Update state on input
+            document.querySelectorAll('.slider-control input[type="range"]').forEach(slider => {
+                slider.addEventListener('input', handleSliderChange);
             });
-        });
-        
-        // Real-time updates when sliders change
-        const sliders = document.querySelectorAll('input[type="range"]');
-        sliders.forEach(slider => {
-            slider.addEventListener('input', () => {
-                // The faceMesh.onResults callback will handle the updates
+
+            // Color Swatches (Lipstick & Foundation) - Use event delegation
+            document.querySelector('.lg\\:w-1\\/3')?.addEventListener('click', (event) => {
+                 if (event.target.matches('.color-swatch, .foundation-swatch')) {
+                     handleColorSelection(event);
+                 } else if (event.target.closest('.eyeshadow-palette')) {
+                     // Find the parent palette element to get dataset
+                     handleColorSelection({ currentTarget: event.target.closest('.eyeshadow-palette') });
+                 } else if (event.target.closest('.quick-look-btn')) {
+                     applyQuickLook({ currentTarget: event.target.closest('.quick-look-btn') });
+                 }
             });
-        });
-        
-        window.addEventListener('resize', setupCanvas);
+
+            // Window Resize
+            window.addEventListener('resize', setupCanvas);
+
+            console.log("Initialization complete. Ready.");
+        }); // End DOMContentLoaded
+
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=farrahred/test1" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
-</html>
\ No newline at end of file
+</body>
+</html>