scarcss - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/README.md

@@ -1,4 +0,4 @@
-# ScarCSS Distribution Files
+# ScarCSS v2.0 Distribution Files
 
-This folder contains the compiled distribution files for ScarCSS. You can use these files directly in your projects.
+This folder contains the compiled distribution files for ScarCSS v2.0. You can use these files directly in your projects.
 
@@ -30,6 +30,6 @@ ## Files
 <!-- For development -->
-<script src="https://cdn.jsdelivr.net/npm/scarcss@1.0.0/dist/scarcss.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/scarcss@2.0.0/dist/scarcss.js"></script>
 
 <!-- For production -->
-<script src="https://cdn.jsdelivr.net/npm/scarcss@1.0.0/dist/scarcss.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/scarcss@2.0.0/dist/scarcss.min.js"></script>
 ```
@@ -47,9 +47,14 @@
 
-## Features
+## New Features in v2.0
 
-ScarCSS provides:
+ScarCSS v2.0 provides:
 
-- **300+ Utility Classes** - Including unique effects like magic gradients, text effects, and shapes
-- **Animation System** - Entrance and continuous animations
-- **Hover Effects** - Interactive hover states
+- **500+ Utility Classes** - Including unique effects like magic gradients, text effects, and shapes
+- **Enhanced Animation System** - 30+ entrance, continuous, and exit animations
+- **Hover Effects** - Interactive hover states with smooth transitions
+- **Dark Mode Support** - Automatic and manual dark mode with utility classes
+- **Responsive Utilities** - Breakpoint-based responsive utility classes
+- **Gap Utilities** - Grid and flexbox gap utilities for precise spacing
+- **Performance Optimizations** - Throttled DOM observation and element caching
+- **Debug Mode** - Built-in debugging and statistics tracking
 - **No Dependencies** - Pure vanilla JavaScript
@@ -56,0 +61,0 @@ - **Dynamic Element Support** - Automatically processes elements added after initial load

dist/scarcss.min.js

@@ -1,1 +0,1 @@
-class ScarCSS{constructor(){this.utilityClasses ={'bg-magic':'background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)','bg-fire':'background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)','bg-ocean':'background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)','bg-sunset':'background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 100%)','bg-forest':'background:linear-gradient(135deg,#56ab2f 0%,#a8e6cf 100%)','text-glow':'text-shadow:0 0 10px rgba(0,0,0,0.3)','text-shadow':'text-shadow:2px 2px 4px rgba(0,0,0,0.5)','text-3d':'text-shadow:1px 1px 1px #999,2px 2px 1px #888,3px 3px 1px #777','text-neon':'text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #0073e6,0 0 20px #0073e6','border-glow':'border:2px solid;border-image:linear-gradient(45deg,#f093fb,#f5576c) 1','border-neon':'border:2px solid #00f2fe;box-shadow:0 0 10px #00f2fe','border-dashed-bold':'border:3px dashed #333','border-double-bold':'border:6px double #333','shape-circle':'border-radius:50%','shape-blob':'border-radius:40% 60% 70% 30% / 30% 30% 70% 70%','shape-star':'clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)','shape-heart':'clip-path:path("M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z")','animate-fade-in':'animation:fadeIn 0.5s ease-in','animate-slide-up':'animation:slideUp 0.5s ease-out','animate-slide-down':'animation:slideDown 0.5s ease-out','animate-slide-left':'animation:slideLeft 0.5s ease-out','animate-slide-right':'animation:slideRight 0.5s ease-out','animate-bounce-in':'animation:bounceIn 0.7s ease-out','animate-zoom-in':'animation:zoomIn 0.3s ease-out','hover-pop':'transition:transform 0.2s ease;cursor:pointer','hover-float':'transition:transform 0.3s ease;cursor:pointer','hover-glow':'transition:box-shadow 0.3s ease;cursor:pointer','hover-tilt':'transition:transform 0.3s ease;cursor:pointer','animate-pulse':'animation:pulse 2s infinite','animate-bounce':'animation:bounce 1s infinite','animate-spin':'animation:spin 1s linear infinite','animate-ping':'animation:ping 1s cubic-bezier(0,0,0.2,1) infinite','animate-pulse-fast':'animation:pulse 0.5s infinite','shadow-soft':'box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)','shadow-hard':'box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08)','shadow-xl':'box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)','shadow-inner':'box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.06)','shadow-outline':'box-shadow:0 0 0 3px rgba(66,153,225,0.5)','filter-blur-sm':'filter:blur(4px)','filter-blur':'filter:blur(8px)','filter-blur-lg':'filter:blur(16px)','filter-brightness-110':'filter:brightness(1.1)','filter-brightness-90':'filter:brightness(0.9)','filter-contrast-125':'filter:contrast(1.25)','filter-saturate-150':'filter:saturate(1.5)','transform-scale-90':'transform:scale(0.9)','transform-scale-95':'transform:scale(0.95)','transform-scale-105':'transform:scale(1.05)','transform-scale-110':'transform:scale(1.1)','transform-rotate-5':'transform:rotate(5deg)','transform-rotate-10':'transform:rotate(10deg)','transform-rotate-45':'transform:rotate(45deg)','transform-rotate-90':'transform:rotate(90deg)','p-0':'padding:0','p-1':'padding:0.25rem','p-2':'padding:0.5rem','p-3':'padding:0.75rem','p-4':'padding:1rem','p-5':'padding:1.25rem','p-6':'padding:1.5rem','p-8':'padding:2rem','p-10':'padding:2.5rem','p-12':'padding:3rem','p-16':'padding:4rem','p-20':'padding:5rem','p-24':'padding:6rem','p-32':'padding:8rem','p-40':'padding:10rem','p-48':'padding:12rem','p-56':'padding:14rem','p-64':'padding:16rem','px-0':'padding-left:0;padding-right:0','px-1':'padding-left:0.25rem;padding-right:0.25rem','px-2':'padding-left:0.5rem;padding-right:0.5rem','px-3':'padding-left:0.75rem;padding-right:0.75rem','px-4':'padding-left:1rem;padding-right:1rem','px-5':'padding-left:1.25rem;padding-right:1.25rem','px-6':'padding-left:1.5rem;padding-right:1.5rem','px-8':'padding-left:2rem;padding-right:2rem','py-0':'padding-top:0;padding-bottom:0','py-1':'padding-top:0.25rem;padding-bottom:0.25rem','py-2':'padding-top:0.5rem;padding-bottom:0.5rem','py-3':'padding-top:0.75rem;padding-bottom:0.75rem','py-4':'padding-top:1rem;padding-bottom:1rem','py-5':'padding-top:1.25rem;padding-bottom:1.25rem','py-6':'padding-top:1.5rem;padding-bottom:1.5rem','py-8':'padding-top:2rem;padding-bottom:2rem','m-0':'margin:0','m-1':'margin:0.25rem','m-2':'margin:0.5rem','m-3':'margin:0.75rem','m-4':'margin:1rem','m-5':'margin:1.25rem','m-6':'margin:1.5rem','m-8':'margin:2rem','m-10':'margin:2.5rem','m-12':'margin:3rem','m-16':'margin:4rem','m-20':'margin:5rem','m-24':'margin:6rem','m-32':'margin:8rem','m-40':'margin:10rem','m-48':'margin:12rem','m-56':'margin:14rem','m-64':'margin:16rem','mx-0':'margin-left:0;margin-right:0','mx-1':'margin-left:0.25rem;margin-right:0.25rem','mx-2':'margin-left:0.5rem;margin-right:0.5rem','mx-3':'margin-left:0.75rem;margin-right:0.75rem','mx-4':'margin-left:1rem;margin-right:1rem','mx-5':'margin-left:1.25rem;margin-right:1.25rem','mx-6':'margin-left:1.5rem;margin-right:1.5rem','mx-8':'margin-left:2rem;margin-right:2rem','mx-auto':'margin-left:auto;margin-right:auto','my-0':'margin-top:0;margin-bottom:0','my-1':'margin-top:0.25rem;margin-bottom:0.25rem','my-2':'margin-top:0.5rem;margin-bottom:0.5rem','my-3':'margin-top:0.75rem;margin-bottom:0.75rem','my-4':'margin-top:1rem;margin-bottom:1rem','my-5':'margin-top:1.25rem;margin-bottom:1.25rem','my-6':'margin-top:1.5rem;margin-bottom:1.5rem','my-8':'margin-top:2rem;margin-bottom:2rem','w-0':'width:0','w-1':'width:0.25rem','w-2':'width:0.5rem','w-3':'width:0.75rem','w-4':'width:1rem','w-5':'width:1.25rem','w-6':'width:1.5rem','w-8':'width:2rem','w-10':'width:2.5rem','w-12':'width:3rem','w-16':'width:4rem','w-20':'width:5rem','w-24':'width:6rem','w-32':'width:8rem','w-40':'width:10rem','w-48':'width:12rem','w-56':'width:14rem','w-64':'width:16rem','w-auto':'width:auto','w-px':'width:1px','w-1/2':'width:50%','w-1/3':'width:33.333333%','w-2/3':'width:66.666667%','w-1/4':'width:25%','w-2/4':'width:50%','w-3/4':'width:75%','w-1/5':'width:20%','w-2/5':'width:40%','w-3/5':'width:60%','w-4/5':'width:80%','w-1/6':'width:16.666667%','w-2/6':'width:33.333333%','w-3/6':'width:50%','w-4/6':'width:66.666667%','w-5/6':'width:83.333333%','w-full':'width:100%','w-screen':'width:100vw','h-0':'height:0','h-1':'height:0.25rem','h-2':'height:0.5rem','h-3':'height:0.75rem','h-4':'height:1rem','h-5':'height:1.25rem','h-6':'height:1.5rem','h-8':'height:2rem','h-10':'height:2.5rem','h-12':'height:3rem','h-16':'height:4rem','h-20':'height:5rem','h-24':'height:6rem','h-32':'height:8rem','h-40':'height:10rem','h-48':'height:12rem','h-56':'height:14rem','h-64':'height:16rem','h-auto':'height:auto','h-px':'height:1px','h-full':'height:100%','h-screen':'height:100vh','text-xs':'font-size:0.75rem','text-sm':'font-size:0.875rem','text-base':'font-size:1rem','text-lg':'font-size:1.125rem','text-xl':'font-size:1.25rem','text-2xl':'font-size:1.5rem','text-3xl':'font-size:1.875rem','text-4xl':'font-size:2.25rem','text-5xl':'font-size:3rem','text-6xl':'font-size:4rem','font-thin':'font-weight:100','font-extralight':'font-weight:200','font-light':'font-weight:300','font-normal':'font-weight:400','font-medium':'font-weight:500','font-semibold':'font-weight:600','font-bold':'font-weight:700','font-extrabold':'font-weight:800','font-black':'font-weight:900','text-transparent':'color:transparent','text-current':'color:currentColor','text-black':'color:#000','text-white':'color:#fff','text-gray-100':'color:#f7fafc','text-gray-200':'color:#edf2f7','text-gray-300':'color:#e2e8f0','text-gray-400':'color:#cbd5e0','text-gray-500':'color:#a0aec0','text-gray-600':'color:#718096','text-gray-700':'color:#4a5568','text-gray-800':'color:#2d3748','text-gray-900':'color:#1a202c','text-red-100':'color:#fff5f5','text-red-200':'color:#fed7d7','text-red-300':'color:#feb2b2','text-red-400':'color:#fc8181','text-red-500':'color:#f56565','text-red-600':'color:#e53e3e','text-red-700':'color:#c53030','text-red-800':'color:#9b2c2c','text-red-900':'color:#742a2a','text-orange-100':'color:#fffaf0','text-orange-200':'color:#feebc8','text-orange-300':'color:#fbd38d','text-orange-400':'color:#f6ad55','text-orange-500':'color:#ed8936','text-orange-600':'color:#dd6b20','text-orange-700':'color:#c05621','text-orange-800':'color:#9c4221','text-orange-900':'color:#7b341e','text-yellow-100':'color:#fffff0','text-yellow-200':'color:#fefcbf','text-yellow-300':'color:#faf089','text-yellow-400':'color:#f6e05e','text-yellow-500':'color:#ecc94b','text-yellow-600':'color:#d69e2e','text-yellow-700':'color:#b7791f','text-yellow-800':'color:#975a16','text-yellow-900':'color:#744210','text-green-100':'color:#f0fff4','text-green-200':'color:#c6f6d5','text-green-300':'color:#9ae6b4','text-green-400':'color:#68d391','text-green-500':'color:#48bb78','text-green-600':'color:#38a169','text-green-700':'color:#2f855a','text-green-800':'color:#276749','text-green-900':'color:#22543d','text-teal-100':'color:#e6fffa','text-teal-200':'color:#b2f5ea','text-teal-300':'color:#81e6d9','text-teal-400':'color:#4fd1c5','text-teal-500':'color:#38b2ac','text-teal-600':'color:#319795','text-teal-700':'color:#2c7a7b','text-teal-800':'color:#285e61','text-teal-900':'color:#234e52','text-blue-100':'color:#ebf8ff','text-blue-200':'color:#bee3f8','text-blue-300':'color:#90cdf4','text-blue-400':'color:#63b3ed','text-blue-500':'color:#4299e1','text-blue-600':'color:#3182ce','text-blue-700':'color:#2b6cb0','text-blue-800':'color:#2c5282','text-blue-900':'color:#2a4365','text-indigo-100':'color:#ebf4ff','text-indigo-200':'color:#c3dafe','text-indigo-300':'color:#a3bffa','text-indigo-400':'color:#7f9cf5','text-indigo-500':'color:#667eea','text-indigo-600':'color:#5a67d8','text-indigo-700':'color:#4c51bf','text-indigo-800':'color:#434190','text-indigo-900':'color:#3c366b','text-purple-100':'color:#faf5ff','text-purple-200':'color:#e9d8fd','text-purple-300':'color:#d6bcfa','text-purple-400':'color:#b794f6','text-purple-500':'color:#9f7aea','text-purple-600':'color:#805ad5','text-purple-700':'color:#6b46c1','text-purple-800':'color:#553c9a','text-purple-900':'color:#44337a','text-pink-100':'color:#fff5f7','text-pink-200':'color:#fed7e2','text-pink-300':'color:#fbb6ce','text-pink-400':'color:#f687b3','text-pink-500':'color:#ed64a6','text-pink-600':'color:#d53f8c','text-pink-700':'color:#b83280','text-pink-800':'color:#97266d','text-pink-900':'color:#702459','bg-transparent':'background-color:transparent','bg-current':'background-color:currentColor','bg-black':'background-color:#000','bg-white':'background-color:#fff','bg-gray-100':'background-color:#f7fafc','bg-gray-200':'background-color:#edf2f7','bg-gray-300':'background-color:#e2e8f0','bg-gray-400':'background-color:#cbd5e0','bg-gray-500':'background-color:#a0aec0','bg-gray-600':'background-color:#718096','bg-gray-700':'background-color:#4a5568','bg-gray-800':'background-color:#2d3748','bg-gray-900':'background-color:#1a202c','bg-red-100':'background-color:#fff5f5','bg-red-200':'background-color:#fed7d7','bg-red-300':'background-color:#feb2b2','bg-red-400':'background-color:#fc8181','bg-red-500':'background-color:#f56565','bg-red-600':'background-color:#e53e3e','bg-red-700':'background-color:#c53030','bg-red-800':'background-color:#9b2c2c','bg-red-900':'background-color:#742a2a','bg-orange-100':'background-color:#fffaf0','bg-orange-200':'background-color:#feebc8','bg-orange-300':'background-color:#fbd38d','bg-orange-400':'background-color:#f6ad55','bg-orange-500':'background-color:#ed8936','bg-orange-600':'background-color:#dd6b20','bg-orange-700':'background-color:#c05621','bg-orange-800':'background-color:#9c4221','bg-orange-900':'background-color:#7b341e','bg-yellow-100':'background-color:#fffff0','bg-yellow-200':'background-color:#fefcbf','bg-yellow-300':'background-color:#faf089','bg-yellow-400':'background-color:#f6e05e','bg-yellow-500':'background-color:#ecc94b','bg-yellow-600':'background-color:#d69e2e','bg-yellow-700':'background-color:#b7791f','bg-yellow-800':'background-color:#975a16','bg-yellow-900':'background-color:#744210','bg-green-100':'background-color:#f0fff4','bg-green-200':'background-color:#c6f6d5','bg-green-300':'background-color:#9ae6b4','bg-green-400':'background-color:#68d391','bg-green-500':'background-color:#48bb78','bg-green-600':'background-color:#38a169','bg-green-700':'background-color:#2f855a','bg-green-800':'background-color:#276749','bg-green-900':'background-color:#22543d','bg-teal-100':'background-color:#e6fffa','bg-teal-200':'background-color:#b2f5ea','bg-teal-300':'background-color:#81e6d9','bg-teal-400':'background-color:#4fd1c5','bg-teal-500':'background-color:#38b2ac','bg-teal-600':'background-color:#319795','bg-teal-700':'background-color:#2c7a7b','bg-teal-800':'background-color:#285e61','bg-teal-900':'background-color:#234e52','bg-blue-100':'background-color:#ebf8ff','bg-blue-200':'background-color:#bee3f8','bg-blue-300':'background-color:#90cdf4','bg-blue-400':'background-color:#63b3ed','bg-blue-500':'background-color:#4299e1','bg-blue-600':'background-color:#3182ce','bg-blue-700':'background-color:#2b6cb0','bg-blue-800':'background-color:#2c5282','bg-blue-900':'background-color:#2a4365','bg-indigo-100':'background-color:#ebf4ff','bg-indigo-200':'background-color:#c3dafe','bg-indigo-300':'background-color:#a3bffa','bg-indigo-400':'background-color:#7f9cf5','bg-indigo-500':'background-color:#667eea','bg-indigo-600':'background-color:#5a67d8','bg-indigo-700':'background-color:#4c51bf','bg-indigo-800':'background-color:#434190','bg-indigo-900':'background-color:#3c366b','bg-purple-100':'background-color:#faf5ff','bg-purple-200':'background-color:#e9d8fd','bg-purple-300':'background-color:#d6bcfa','bg-purple-400':'background-color:#b794f6','bg-purple-500':'background-color:#9f7aea','bg-purple-600':'background-color:#805ad5','bg-purple-700':'background-color:#6b46c1','bg-purple-800':'background-color:#553c9a','bg-purple-900':'background-color:#44337a','bg-pink-100':'background-color:#fff5f7','bg-pink-200':'background-color:#fed7e2','bg-pink-300':'background-color:#fbb6ce','bg-pink-400':'background-color:#f687b3','bg-pink-500':'background-color:#ed64a6','bg-pink-600':'background-color:#d53f8c','bg-pink-700':'background-color:#b83280','bg-pink-800':'background-color:#97266d','bg-pink-900':'background-color:#702459','border-0':'border-width:0','border-2':'border-width:2px','border-4':'border-width:4px','border-8':'border-width:8px','border':'border-width:1px','border-t-0':'border-top-width:0','border-r-0':'border-right-width:0','border-b-0':'border-bottom-width:0','border-l-0':'border-left-width:0','border-t-2':'border-top-width:2px','border-r-2':'border-right-width:2px','border-b-2':'border-bottom-width:2px','border-l-2':'border-left-width:2px','border-t-4':'border-top-width:4px','border-r-4':'border-right-width:4px','border-b-4':'border-bottom-width:4px','border-l-4':'border-left-width:4px','border-t-8':'border-top-width:8px','border-r-8':'border-right-width:8px','border-b-8':'border-bottom-width:8px','border-l-8':'border-left-width:8px','border-t':'border-top-width:1px','border-r':'border-right-width:1px','border-b':'border-bottom-width:1px','border-l':'border-left-width:1px','border-transparent':'border-color:transparent','border-current':'border-color:currentColor','border-black':'border-color:#000','border-white':'border-color:#fff','border-gray-100':'border-color:#f7fafc','border-gray-200':'border-color:#edf2f7','border-gray-300':'border-color:#e2e8f0','border-gray-400':'border-color:#cbd5e0','border-gray-500':'border-color:#a0aec0','border-gray-600':'border-color:#718096','border-gray-700':'border-color:#4a5568','border-gray-800':'border-color:#2d3748','border-gray-900':'border-color:#1a202c','border-red-100':'border-color:#fff5f5','border-red-200':'border-color:#fed7d7','border-red-300':'border-color:#feb2b2','border-red-400':'border-color:#fc8181','border-red-500':'border-color:#f56565','border-red-600':'border-color:#e53e3e','border-red-700':'border-color:#c53030','border-red-800':'border-color:#9b2c2c','border-red-900':'border-color:#742a2a','rounded-none':'border-radius:0','rounded-sm':'border-radius:0.125rem','rounded':'border-radius:0.25rem','rounded-md':'border-radius:0.375rem','rounded-lg':'border-radius:0.5rem','rounded-xl':'border-radius:0.75rem','rounded-2xl':'border-radius:1rem','rounded-3xl':'border-radius:1.5rem','rounded-full':'border-radius:9999px','rounded-t-none':'border-top-left-radius:0;border-top-right-radius:0','rounded-t-sm':'border-top-left-radius:0.125rem;border-top-right-radius:0.125rem','rounded-t':'border-top-left-radius:0.25rem;border-top-right-radius:0.25rem','rounded-t-md':'border-top-left-radius:0.375rem;border-top-right-radius:0.375rem','rounded-t-lg':'border-top-left-radius:0.5rem;border-top-right-radius:0.5rem','rounded-t-xl':'border-top-left-radius:0.75rem;border-top-right-radius:0.75rem','rounded-t-2xl':'border-top-left-radius:1rem;border-top-right-radius:1rem','rounded-t-3xl':'border-top-left-radius:1.5rem;border-top-right-radius:1.5rem','rounded-t-full':'border-top-left-radius:9999px;border-top-right-radius:9999px','block':'display:block','inline-block':'display:inline-block','inline':'display:inline','flex':'display:flex','inline-flex':'display:inline-flex','table':'display:table','table-row':'display:table-row','table-cell':'display:table-cell','grid':'display:grid','inline-grid':'display:inline-grid','hidden':'display:none','flex-row':'flex-direction:row','flex-row-reverse':'flex-direction:row-reverse','flex-col':'flex-direction:column','flex-col-reverse':'flex-direction:column-reverse','flex-wrap':'flex-wrap:wrap','flex-wrap-reverse':'flex-wrap:wrap-reverse','flex-nowrap':'flex-wrap:nowrap','items-start':'align-items:flex-start','items-end':'align-items:flex-end','items-center':'align-items:center','items-baseline':'align-items:baseline','items-stretch':'align-items:stretch','justify-start':'justify-content:flex-start','justify-end':'justify-content:flex-end','justify-center':'justify-content:center','justify-between':'justify-content:space-between','justify-around':'justify-content:space-around','justify-evenly':'justify-content:space-evenly','flex-1':'flex:1 1 0%','flex-auto':'flex:1 1 auto','flex-initial':'flex:0 1 auto','flex-none':'flex:none','static':'position:static','fixed':'position:fixed','absolute':'position:absolute','relative':'position:relative','sticky':'position:sticky','top-0':'top:0','right-0':'right:0','bottom-0':'bottom:0','left-0':'left:0','top-auto':'top:auto','right-auto':'right:auto','bottom-auto':'bottom:auto','left-auto':'left:auto','shadow-sm':'box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)','shadow':'box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06)','shadow-md':'box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)','shadow-lg':'box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)','shadow-xl':'box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)','shadow-2xl':'box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)','shadow-inner':'box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.06)','shadow-none':'box-shadow:none','cursor-auto':'cursor:auto','cursor-default':'cursor:default','cursor-pointer':'cursor:pointer','cursor-wait':'cursor:wait','cursor-text':'cursor:text','cursor-move':'cursor:move','cursor-not-allowed':'cursor:not-allowed','transition-none':'transition-property:none','transition-all':'transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition':'transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition-colors':'transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition-opacity':'transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition-shadow':'transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition-transform':'transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transform':'transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))','transform-gpu':'transform:translate3d(var(--tw-translate-x,0),var(--tw-translate-y,0),0) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))','transform-none':'transform:none','overflow-auto':'overflow:auto','overflow-hidden':'overflow:hidden','overflow-visible':'overflow:visible','overflow-scroll':'overflow:scroll','overflow-x-auto':'overflow-x:auto','overflow-y-auto':'overflow-y:auto','overflow-x-hidden':'overflow-x:hidden','overflow-y-hidden':'overflow-y:hidden','overflow-x-visible':'overflow-x:visible','overflow-y-visible':'overflow-y:visible','overflow-x-scroll':'overflow-x:scroll','overflow-y-scroll':'overflow-y:scroll','z-0':'z-index:0','z-10':'z-index:10','z-20':'z-index:20','z-30':'z-index:30','z-40':'z-index:40','z-50':'z-index:50','z-auto':'z-index:auto'};this.animations = ` @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes slideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}@keyframes slideDown{from{transform:translateY(-20px);opacity:0;}to{transform:translateY(0);opacity:1;}}@keyframes slideLeft{from{transform:translateX(20px);opacity:0;}to{transform:translateX(0);opacity:1;}}@keyframes slideRight{from{transform:translateX(-20px);opacity:0;}to{transform:translateX(0);opacity:1;}}@keyframes bounceIn{0%{transform:scale(0.3);opacity:0;}50%{transform:scale(1.05);}70%{transform:scale(0.9);}100%{transform:scale(1);opacity:1;}}@keyframes zoomIn{from{transform:scale(0.9);opacity:0;}to{transform:scale(1);opacity:1;}}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes ping{0%{transform:scale(1);opacity:1;}75%,100%{transform:scale(2);opacity:0;}}`;this.styleCounter = 0;this.classMap = new Map();this.init();}init(){this.addAnimations();if (document.readyState === 'loading'){document.addEventListener('DOMContentLoaded',() => this.processElements());}else{this.processElements();}this.observeDOM();}addAnimations(){if (!document.querySelector('#scarcss-animations')){const style = document.createElement('style');style.id = 'scarcss-animations';style.textContent = this.animations;document.head.appendChild(style);}}observeDOM(){const observer = new MutationObserver(mutations =>{mutations.forEach(mutation =>{mutation.addedNodes.forEach(node =>{if (node.nodeType === Node.ELEMENT_NODE){if (node.hasAttribute && (node.hasAttribute('@scar') || node.hasAttribute('@action'))){this.processElement(node);}const scarElements = node.querySelectorAll && node.querySelectorAll('[\\@scar]');if (scarElements){scarElements.forEach(el => this.processScarElement(el));}const actionElements = node.querySelectorAll && node.querySelectorAll('[\\@action]');if (actionElements){actionElements.forEach(el => this.processActionElement(el));}}});});});observer.observe(document.body,{childList:true,subtree:true});}processElements(){const scarElements = document.querySelectorAll('[\\@scar]');scarElements.forEach(el => this.processScarElement(el));const actionElements = document.querySelectorAll('[\\@action]');actionElements.forEach(el => this.processActionElement(el));}processElement(element){if (element.hasAttribute('@scar')){this.processScarElement(element);}if (element.hasAttribute('@action')){this.processActionElement(element);}}processScarElement(element){const scarValue = element.getAttribute('@scar');if (!scarValue) return;try{const classes = scarValue.trim().split(/\s+/);const styles =[];classes.forEach(cls =>{if (this.utilityClasses[cls]){styles.push(this.utilityClasses[cls]);}});if (styles.length > 0){const styleObj ={styles:styles.join(';')};this.applyStyles(element,styleObj);}}catch (e){console.error('Error parsing @scar attribute:',e);}}toKebabCase(str){return str.replace(/[A-Z]/g,match => `-${match.toLowerCase()}`);}generateClassName(styleObj){const styleString = JSON.stringify(styleObj);if (this.classMap.has(styleString)){return this.classMap.get(styleString);}const className = `scar-${this.styleCounter++}`;this.classMap.set(styleString,className);return className;}applyStyles(element,styleObj){const className = this.generateClassName(styleObj);if (!document.querySelector(`style[data-scar="${className}"]`)){this.createStyleRule(className,styleObj);}element.classList.add(className);}createStyleRule(className,styleObj){let cssText = `.${className}{${styleObj.styles};}`;const styleEl = document.createElement('style');styleEl.setAttribute('data-scar',className);styleEl.textContent = cssText;document.head.appendChild(styleEl);}processActionElement(element){const actionValue = element.getAttribute('@action');if (!actionValue) return;try{const actionObj ={};const pairs = actionValue.trim().slice(1,-1).split(',');pairs.forEach(pair =>{const[key,value]= pair.split(':').map(s => s.trim());const cleanValue = value.replace(/^['"]|['"]$/g,'');actionObj[key]= cleanValue;});for (const[action,value]of Object.entries(actionObj)){switch (action){case 'alert':element.addEventListener('click',() => alert(value));break;case 'menuToggle':element.addEventListener('click',() => this.toggleMenu(value));break;case 'modalOpen':element.addEventListener('click',() => this.openModal(value));break;case 'modalClose':element.addEventListener('click',() => this.closeModal(value));break;case 'copyToClipboard':element.addEventListener('click',() => this.copyToClipboard(value));break;default:if (typeof this[action]=== 'function'){element.addEventListener('click',() => this[action](value));}}}}catch (e){console.error('Error parsing @action attribute:',e);}}toggleMenu(selector){const menu = document.querySelector(selector);if (menu){menu.classList.toggle('scar-menu-open');}}openModal(selector){const modal = document.querySelector(selector);if (modal){modal.style.display = 'block';let overlay = document.querySelector('.scar-modal-overlay');if (!overlay){overlay = document.createElement('div');overlay.className = 'scar-modal-overlay';overlay.style.cssText = ` position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999;`;document.body.appendChild(overlay);overlay.addEventListener('click',() =>{this.closeModal(selector);});}overlay.style.display = 'block';}}closeModal(selector){const modal = document.querySelector(selector);if (modal){modal.style.display = 'none';}const overlay = document.querySelector('.scar-modal-overlay');if (overlay){overlay.style.display = 'none';}}copyToClipboard(text){navigator.clipboard.writeText(text).then(() =>{console.log('Text copied to clipboard');}).catch(err =>{console.error('Failed to copy:',err);});}addHoverEffects(){document.addEventListener('mouseover',(e) =>{if (e.target.hasAttribute('@scar')){const scarValue = e.target.getAttribute('@scar');if (scarValue.includes('hover-pop')){e.target.style.transform = 'scale(1.05)';}if (scarValue.includes('hover-float')){e.target.style.transform = 'translateY(-5px)';}if (scarValue.includes('hover-glow')){e.target.style.boxShadow = '0 0 15px rgba(0,0,0,0.3)';}if (scarValue.includes('hover-tilt')){e.target.style.transform = 'rotate(5deg)';}}});document.addEventListener('mouseout',(e) =>{if (e.target.hasAttribute('@scar')){const scarValue = e.target.getAttribute('@scar');if (scarValue.includes('hover-pop') || scarValue.includes('hover-float') || scarValue.includes('hover-glow') || scarValue.includes('hover-tilt')){e.target.style.transform = '';e.target.style.boxShadow = '';}}});}}const scarCSS = new ScarCSS();if (typeof module !== 'undefined' && module.exports){module.exports = ScarCSS;}if (typeof window !== 'undefined'){window.ScarCSS = ScarCSS;}
+class ScarCSS{constructor(){this.utilityClasses ={'bg-magic':'background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)','bg-fire':'background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)','bg-ocean':'background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)','bg-sunset':'background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 100%)','bg-forest':'background:linear-gradient(135deg,#56ab2f 0%,#a8e6cf 100%)','bg-cosmic':'background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)','bg-aurora':'background:linear-gradient(135deg,#00c9ff 0%,#92fe9d 100%)','bg-lava':'background:linear-gradient(135deg,#f46b45 0%,#eea849 100%)','bg-neon':'background:linear-gradient(135deg,#12c2e9 0%,#c471ed 100%)','bg-rainbow':'background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 50%,#fecfef 100%)','text-glow':'text-shadow:0 0 10px rgba(0,0,0,0.3)','text-shadow':'text-shadow:2px 2px 4px rgba(0,0,0,0.5)','text-3d':'text-shadow:1px 1px 1px #999,2px 2px 1px #888,3px 3px 1px #777','text-neon':'text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #0073e6,0 0 20px #0073e6','text-retro':'text-shadow:3px 3px 0 #000,5px 5px 0 #000','text-embossed':'text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb','text-carved':'text-shadow:0 1px 1px #fff,0 -1px 1px #000','text-fire':'text-shadow:0 0 10px #ff9a9e,0 0 20px #ff9a9e,0 0 30px #ff9a9e','border-glow':'border:2px solid;border-image:linear-gradient(45deg,#f093fb,#f5576c) 1','border-neon':'border:2px solid #00f2fe;box-shadow:0 0 10px #00f2fe','border-dashed-bold':'border:3px dashed #333','border-double-bold':'border:6px double #333','border-rainbow':'border:3px solid transparent;border-image:linear-gradient(45deg,#ff9a9e,#fecfef,#fecfef) 1','border-wave':'border:2px solid;border-image:repeating-linear-gradient(45deg,#f093fb,#f5576c 10px,#f093fb 20px) 10','border-dashed-neon':'border:2px dashed #00f2fe;box-shadow:0 0 10px #00f2fe','border-gradient':'border:3px solid transparent;border-image:linear-gradient(45deg,#667eea,#764ba2) 1','shape-circle':'border-radius:50%','shape-blob':'border-radius:40% 60% 70% 30% / 30% 30% 70% 70%','shape-star':'clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)','shape-heart':'clip-path:path("M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z")','shape-triangle':'clip-path:polygon(50% 0%,0% 100%,100% 100%)','shape-hexagon':'clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)','shape-diamond':'clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)','shape-parallelogram':'clip-path:polygon(25% 0%,100% 0%,75% 100%,0% 100%)','animate-fade-in':'animation:fadeIn 0.5s ease-in','animate-slide-up':'animation:slideUp 0.5s ease-out','animate-slide-down':'animation:slideDown 0.5s ease-out','animate-slide-left':'animation:slideLeft 0.5s ease-out','animate-slide-right':'animation:slideRight 0.5s ease-out','animate-bounce-in':'animation:bounceIn 0.7s ease-out','animate-zoom-in':'animation:zoomIn 0.3s ease-out','animate-fade-in-up':'animation:fadeInUp 0.5s ease-out','animate-fade-in-down':'animation:fadeInDown 0.5s ease-out','animate-fade-in-left':'animation:fadeInLeft 0.5s ease-out','animate-fade-in-right':'animation:fadeInRight 0.5s ease-out','animate-rotate-in':'animation:rotateIn 0.5s ease-out','animate-flip-in-x':'animation:flipInX 0.7s ease-out','animate-flip-in-y':'animation:flipInY 0.7s ease-out','hover-pop':'transition:transform 0.2s ease;cursor:pointer','hover-float':'transition:transform 0.3s ease;cursor:pointer','hover-glow':'transition:box-shadow 0.3s ease;cursor:pointer','hover-tilt':'transition:transform 0.3s ease;cursor:pointer','animate-pulse':'animation:pulse 2s infinite','animate-bounce':'animation:bounce 1s infinite','animate-spin':'animation:spin 1s linear infinite','animate-ping':'animation:ping 1s cubic-bezier(0,0,0.2,1) infinite','animate-pulse-fast':'animation:pulse 0.5s infinite','animate-wiggle':'animation:wiggle 1s ease-in-out infinite','animate-shake':'animation:shake 0.5s ease-in-out infinite','animate-swing':'animation:swing 1s ease-in-out infinite','animate-tada':'animation:tada 1s ease-in-out infinite','animate-rubber-band':'animation:rubberBand 1s ease-in-out infinite','animate-jello':'animation:jello 1s ease-in-out infinite','animate-heartbeat':'animation:heartbeat 1.5s ease-in-out infinite','animate-fade-out':'animation:fadeOut 0.5s ease-out','animate-fade-out-up':'animation:fadeOutUp 0.5s ease-out','animate-fade-out-down':'animation:fadeOutDown 0.5s ease-out','animate-fade-out-left':'animation:fadeOutLeft 0.5s ease-out','animate-fade-out-right':'animation:fadeOutRight 0.5s ease-out','animate-zoom-out':'animation:zoomOut 0.3s ease-out','shadow-soft':'box-shadow:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08)','shadow-hard':'box-shadow:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08)','shadow-xl':'box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)','shadow-inner':'box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.06)','shadow-outline':'box-shadow:0 0 0 3px rgba(66,153,225,0.5)','filter-blur-sm':'filter:blur(4px)','filter-blur':'filter:blur(8px)','filter-blur-lg':'filter:blur(16px)','filter-brightness-110':'filter:brightness(1.1)','filter-brightness-90':'filter:brightness(0.9)','filter-contrast-125':'filter:contrast(1.25)','filter-saturate-150':'filter:saturate(1.5)','filter-sepia':'filter:sepia(100%)','filter-invert':'filter:invert(100%)','filter-hue-rotate-90':'filter:hue-rotate(90deg)','filter-hue-rotate-180':'filter:hue-rotate(180deg)','filter-grayscale':'filter:grayscale(100%)','filter-drop-shadow':'filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.5))','filter-glow':'filter:drop-shadow(0 0 10px rgba(255,255,255,0.8))','transform-scale-90':'transform:scale(0.9)','transform-scale-95':'transform:scale(0.95)','transform-scale-105':'transform:scale(1.05)','transform-scale-110':'transform:scale(1.1)','transform-rotate-5':'transform:rotate(5deg)','transform-rotate-10':'transform:rotate(10deg)','transform-rotate-45':'transform:rotate(45deg)','transform-rotate-90':'transform:rotate(90deg)','transform-skew-x-5':'transform:skewX(5deg)','transform-skew-x-10':'transform:skewX(10deg)','transform-skew-y-5':'transform:skewY(5deg)','transform-skew-y-10':'transform:skewY(10deg)','transform-flip-x':'transform:scaleX(-1)','transform-flip-y':'transform:scaleY(-1)','transform-3d':'transform:perspective(1000px) rotateY(15deg)','p-0':'padding:0','p-1':'padding:0.25rem','p-2':'padding:0.5rem','p-3':'padding:0.75rem','p-4':'padding:1rem','p-5':'padding:1.25rem','p-6':'padding:1.5rem','p-8':'padding:2rem','p-10':'padding:2.5rem','p-12':'padding:3rem','p-16':'padding:4rem','p-20':'padding:5rem','p-24':'padding:6rem','p-32':'padding:8rem','p-40':'padding:10rem','p-48':'padding:12rem','p-56':'padding:14rem','p-64':'padding:16rem','px-0':'padding-left:0;padding-right:0','px-1':'padding-left:0.25rem;padding-right:0.25rem','px-2':'padding-left:0.5rem;padding-right:0.5rem','px-3':'padding-left:0.75rem;padding-right:0.75rem','px-4':'padding-left:1rem;padding-right:1rem','px-5':'padding-left:1.25rem;padding-right:1.25rem','px-6':'padding-left:1.5rem;padding-right:1.5rem','px-8':'padding-left:2rem;padding-right:2rem','py-0':'padding-top:0;padding-bottom:0','py-1':'padding-top:0.25rem;padding-bottom:0.25rem','py-2':'padding-top:0.5rem;padding-bottom:0.5rem','py-3':'padding-top:0.75rem;padding-bottom:0.75rem','py-4':'padding-top:1rem;padding-bottom:1rem','py-5':'padding-top:1.25rem;padding-bottom:1.25rem','py-6':'padding-top:1.5rem;padding-bottom:1.5rem','py-8':'padding-top:2rem;padding-bottom:2rem','m-0':'margin:0','m-1':'margin:0.25rem','m-2':'margin:0.5rem','m-3':'margin:0.75rem','m-4':'margin:1rem','m-5':'margin:1.25rem','m-6':'margin:1.5rem','m-8':'margin:2rem','m-10':'margin:2.5rem','m-12':'margin:3rem','m-16':'margin:4rem','m-20':'margin:5rem','m-24':'margin:6rem','m-32':'margin:8rem','m-40':'margin:10rem','m-48':'margin:12rem','m-56':'margin:14rem','m-64':'margin:16rem','mx-0':'margin-left:0;margin-right:0','mx-1':'margin-left:0.25rem;margin-right:0.25rem','mx-2':'margin-left:0.5rem;margin-right:0.5rem','mx-3':'margin-left:0.75rem;margin-right:0.75rem','mx-4':'margin-left:1rem;margin-right:1rem','mx-5':'margin-left:1.25rem;margin-right:1.25rem','mx-6':'margin-left:1.5rem;margin-right:1.5rem','mx-8':'margin-left:2rem;margin-right:2rem','mx-auto':'margin-left:auto;margin-right:auto','my-0':'margin-top:0;margin-bottom:0','my-1':'margin-top:0.25rem;margin-bottom:0.25rem','my-2':'margin-top:0.5rem;margin-bottom:0.5rem','my-3':'margin-top:0.75rem;margin-bottom:0.75rem','my-4':'margin-top:1rem;margin-bottom:1rem','my-5':'margin-top:1.25rem;margin-bottom:1.25rem','my-6':'margin-top:1.5rem;margin-bottom:1.5rem','my-8':'margin-top:2rem;margin-bottom:2rem','w-0':'width:0','w-1':'width:0.25rem','w-2':'width:0.5rem','w-3':'width:0.75rem','w-4':'width:1rem','w-5':'width:1.25rem','w-6':'width:1.5rem','w-8':'width:2rem','w-10':'width:2.5rem','w-12':'width:3rem','w-16':'width:4rem','w-20':'width:5rem','w-24':'width:6rem','w-32':'width:8rem','w-40':'width:10rem','w-48':'width:12rem','w-56':'width:14rem','w-64':'width:16rem','w-auto':'width:auto','w-px':'width:1px','w-1/2':'width:50%','w-1/3':'width:33.333333%','w-2/3':'width:66.666667%','w-1/4':'width:25%','w-2/4':'width:50%','w-3/4':'width:75%','w-1/5':'width:20%','w-2/5':'width:40%','w-3/5':'width:60%','w-4/5':'width:80%','w-1/6':'width:16.666667%','w-2/6':'width:33.333333%','w-3/6':'width:50%','w-4/6':'width:66.666667%','w-5/6':'width:83.333333%','w-full':'width:100%','w-screen':'width:100vw','h-0':'height:0','h-1':'height:0.25rem','h-2':'height:0.5rem','h-3':'height:0.75rem','h-4':'height:1rem','h-5':'height:1.25rem','h-6':'height:1.5rem','h-8':'height:2rem','h-10':'height:2.5rem','h-12':'height:3rem','h-16':'height:4rem','h-20':'height:5rem','h-24':'height:6rem','h-32':'height:8rem','h-40':'height:10rem','h-48':'height:12rem','h-56':'height:14rem','h-64':'height:16rem','h-auto':'height:auto','h-px':'height:1px','h-full':'height:100%','h-screen':'height:100vh','text-xs':'font-size:0.75rem','text-sm':'font-size:0.875rem','text-base':'font-size:1rem','text-lg':'font-size:1.125rem','text-xl':'font-size:1.25rem','text-2xl':'font-size:1.5rem','text-3xl':'font-size:1.875rem','text-4xl':'font-size:2.25rem','text-5xl':'font-size:3rem','text-6xl':'font-size:4rem','font-thin':'font-weight:100','font-extralight':'font-weight:200','font-light':'font-weight:300','font-normal':'font-weight:400','font-medium':'font-weight:500','font-semibold':'font-weight:600','font-bold':'font-weight:700','font-extrabold':'font-weight:800','font-black':'font-weight:900','text-transparent':'color:transparent','text-current':'color:currentColor','text-black':'color:#000','text-white':'color:#fff','text-gray-100':'color:#f7fafc','text-gray-200':'color:#edf2f7','text-gray-300':'color:#e2e8f0','text-gray-400':'color:#cbd5e0','text-gray-500':'color:#a0aec0','text-gray-600':'color:#718096','text-gray-700':'color:#4a5568','text-gray-800':'color:#2d3748','text-gray-900':'color:#1a202c','text-red-100':'color:#fff5f5','text-red-200':'color:#fed7d7','text-red-300':'color:#feb2b2','text-red-400':'color:#fc8181','text-red-500':'color:#f56565','text-red-600':'color:#e53e3e','text-red-700':'color:#c53030','text-red-800':'color:#9b2c2c','text-red-900':'color:#742a2a','text-orange-100':'color:#fffaf0','text-orange-200':'color:#feebc8','text-orange-300':'color:#fbd38d','text-orange-400':'color:#f6ad55','text-orange-500':'color:#ed8936','text-orange-600':'color:#dd6b20','text-orange-700':'color:#c05621','text-orange-800':'color:#9c4221','text-orange-900':'color:#7b341e','text-yellow-100':'color:#fffff0','text-yellow-200':'color:#fefcbf','text-yellow-300':'color:#faf089','text-yellow-400':'color:#f6e05e','text-yellow-500':'color:#ecc94b','text-yellow-600':'color:#d69e2e','text-yellow-700':'color:#b7791f','text-yellow-800':'color:#975a16','text-yellow-900':'color:#744210','text-green-100':'color:#f0fff4','text-green-200':'color:#c6f6d5','text-green-300':'color:#9ae6b4','text-green-400':'color:#68d391','text-green-500':'color:#48bb78','text-green-600':'color:#38a169','text-green-700':'color:#2f855a','text-green-800':'color:#276749','text-green-900':'color:#22543d','text-teal-100':'color:#e6fffa','text-teal-200':'color:#b2f5ea','text-teal-300':'color:#81e6d9','text-teal-400':'color:#4fd1c5','text-teal-500':'color:#38b2ac','text-teal-600':'color:#319795','text-teal-700':'color:#2c7a7b','text-teal-800':'color:#285e61','text-teal-900':'color:#234e52','text-blue-100':'color:#ebf8ff','text-blue-200':'color:#bee3f8','text-blue-300':'color:#90cdf4','text-blue-400':'color:#63b3ed','text-blue-500':'color:#4299e1','text-blue-600':'color:#3182ce','text-blue-700':'color:#2b6cb0','text-blue-800':'color:#2c5282','text-blue-900':'color:#2a4365','text-indigo-100':'color:#ebf4ff','text-indigo-200':'color:#c3dafe','text-indigo-300':'color:#a3bffa','text-indigo-400':'color:#7f9cf5','text-indigo-500':'color:#667eea','text-indigo-600':'color:#5a67d8','text-indigo-700':'color:#4c51bf','text-indigo-800':'color:#434190','text-indigo-900':'color:#3c366b','text-purple-100':'color:#faf5ff','text-purple-200':'color:#e9d8fd','text-purple-300':'color:#d6bcfa','text-purple-400':'color:#b794f6','text-purple-500':'color:#9f7aea','text-purple-600':'color:#805ad5','text-purple-700':'color:#6b46c1','text-purple-800':'color:#553c9a','text-purple-900':'color:#44337a','text-pink-100':'color:#fff5f7','text-pink-200':'color:#fed7e2','text-pink-300':'color:#fbb6ce','text-pink-400':'color:#f687b3','text-pink-500':'color:#ed64a6','text-pink-600':'color:#d53f8c','text-pink-700':'color:#b83280','text-pink-800':'color:#97266d','text-pink-900':'color:#702459','bg-transparent':'background-color:transparent','bg-current':'background-color:currentColor','bg-black':'background-color:#000','bg-white':'background-color:#fff','bg-gray-100':'background-color:#f7fafc','bg-gray-200':'background-color:#edf2f7','bg-gray-300':'background-color:#e2e8f0','bg-gray-400':'background-color:#cbd5e0','bg-gray-500':'background-color:#a0aec0','bg-gray-600':'background-color:#718096','bg-gray-700':'background-color:#4a5568','bg-gray-800':'background-color:#2d3748','bg-gray-900':'background-color:#1a202c','bg-red-100':'background-color:#fff5f5','bg-red-200':'background-color:#fed7d7','bg-red-300':'background-color:#feb2b2','bg-red-400':'background-color:#fc8181','bg-red-500':'background-color:#f56565','bg-red-600':'background-color:#e53e3e','bg-red-700':'background-color:#c53030','bg-red-800':'background-color:#9b2c2c','bg-red-900':'background-color:#742a2a','bg-orange-100':'background-color:#fffaf0','bg-orange-200':'background-color:#feebc8','bg-orange-300':'background-color:#fbd38d','bg-orange-400':'background-color:#f6ad55','bg-orange-500':'background-color:#ed8936','bg-orange-600':'background-color:#dd6b20','bg-orange-700':'background-color:#c05621','bg-orange-800':'background-color:#9c4221','bg-orange-900':'background-color:#7b341e','bg-yellow-100':'background-color:#fffff0','bg-yellow-200':'background-color:#fefcbf','bg-yellow-300':'background-color:#faf089','bg-yellow-400':'background-color:#f6e05e','bg-yellow-500':'background-color:#ecc94b','bg-yellow-600':'background-color:#d69e2e','bg-yellow-700':'background-color:#b7791f','bg-yellow-800':'background-color:#975a16','bg-yellow-900':'background-color:#744210','bg-green-100':'background-color:#f0fff4','bg-green-200':'background-color:#c6f6d5','bg-green-300':'background-color:#9ae6b4','bg-green-400':'background-color:#68d391','bg-green-500':'background-color:#48bb78','bg-green-600':'background-color:#38a169','bg-green-700':'background-color:#2f855a','bg-green-800':'background-color:#276749','bg-green-900':'background-color:#22543d','bg-teal-100':'background-color:#e6fffa','bg-teal-200':'background-color:#b2f5ea','bg-teal-300':'background-color:#81e6d9','bg-teal-400':'background-color:#4fd1c5','bg-teal-500':'background-color:#38b2ac','bg-teal-600':'background-color:#319795','bg-teal-700':'background-color:#2c7a7b','bg-teal-800':'background-color:#285e61','bg-teal-900':'background-color:#234e52','bg-blue-100':'background-color:#ebf8ff','bg-blue-200':'background-color:#bee3f8','bg-blue-300':'background-color:#90cdf4','bg-blue-400':'background-color:#63b3ed','bg-blue-500':'background-color:#4299e1','bg-blue-600':'background-color:#3182ce','bg-blue-700':'background-color:#2b6cb0','bg-blue-800':'background-color:#2c5282','bg-blue-900':'background-color:#2a4365','bg-indigo-100':'background-color:#ebf4ff','bg-indigo-200':'background-color:#c3dafe','bg-indigo-300':'background-color:#a3bffa','bg-indigo-400':'background-color:#7f9cf5','bg-indigo-500':'background-color:#667eea','bg-indigo-600':'background-color:#5a67d8','bg-indigo-700':'background-color:#4c51bf','bg-indigo-800':'background-color:#434190','bg-indigo-900':'background-color:#3c366b','bg-purple-100':'background-color:#faf5ff','bg-purple-200':'background-color:#e9d8fd','bg-purple-300':'background-color:#d6bcfa','bg-purple-400':'background-color:#b794f6','bg-purple-500':'background-color:#9f7aea','bg-purple-600':'background-color:#805ad5','bg-purple-700':'background-color:#6b46c1','bg-purple-800':'background-color:#553c9a','bg-purple-900':'background-color:#44337a','bg-pink-100':'background-color:#fff5f7','bg-pink-200':'background-color:#fed7e2','bg-pink-300':'background-color:#fbb6ce','bg-pink-400':'background-color:#f687b3','bg-pink-500':'background-color:#ed64a6','bg-pink-600':'background-color:#d53f8c','bg-pink-700':'background-color:#b83280','bg-pink-800':'background-color:#97266d','bg-pink-900':'background-color:#702459','border-0':'border-width:0','border-2':'border-width:2px','border-4':'border-width:4px','border-8':'border-width:8px','border':'border-width:1px','border-t-0':'border-top-width:0','border-r-0':'border-right-width:0','border-b-0':'border-bottom-width:0','border-l-0':'border-left-width:0','border-t-2':'border-top-width:2px','border-r-2':'border-right-width:2px','border-b-2':'border-bottom-width:2px','border-l-2':'border-left-width:2px','border-t-4':'border-top-width:4px','border-r-4':'border-right-width:4px','border-b-4':'border-bottom-width:4px','border-l-4':'border-left-width:4px','border-t-8':'border-top-width:8px','border-r-8':'border-right-width:8px','border-b-8':'border-bottom-width:8px','border-l-8':'border-left-width:8px','border-t':'border-top-width:1px','border-r':'border-right-width:1px','border-b':'border-bottom-width:1px','border-l':'border-left-width:1px','border-transparent':'border-color:transparent','border-current':'border-color:currentColor','border-black':'border-color:#000','border-white':'border-color:#fff','border-gray-100':'border-color:#f7fafc','border-gray-200':'border-color:#edf2f7','border-gray-300':'border-color:#e2e8f0','border-gray-400':'border-color:#cbd5e0','border-gray-500':'border-color:#a0aec0','border-gray-600':'border-color:#718096','border-gray-700':'border-color:#4a5568','border-gray-800':'border-color:#2d3748','border-gray-900':'border-color:#1a202c','border-red-100':'border-color:#fff5f5','border-red-200':'border-color:#fed7d7','border-red-300':'border-color:#feb2b2','border-red-400':'border-color:#fc8181','border-red-500':'border-color:#f56565','border-red-600':'border-color:#e53e3e','border-red-700':'border-color:#c53030','border-red-800':'border-color:#9b2c2c','border-red-900':'border-color:#742a2a','rounded-none':'border-radius:0','rounded-sm':'border-radius:0.125rem','rounded':'border-radius:0.25rem','rounded-md':'border-radius:0.375rem','rounded-lg':'border-radius:0.5rem','rounded-xl':'border-radius:0.75rem','rounded-2xl':'border-radius:1rem','rounded-3xl':'border-radius:1.5rem','rounded-full':'border-radius:9999px','rounded-t-none':'border-top-left-radius:0;border-top-right-radius:0','rounded-t-sm':'border-top-left-radius:0.125rem;border-top-right-radius:0.125rem','rounded-t':'border-top-left-radius:0.25rem;border-top-right-radius:0.25rem','rounded-t-md':'border-top-left-radius:0.375rem;border-top-right-radius:0.375rem','rounded-t-lg':'border-top-left-radius:0.5rem;border-top-right-radius:0.5rem','rounded-t-xl':'border-top-left-radius:0.75rem;border-top-right-radius:0.75rem','rounded-t-2xl':'border-top-left-radius:1rem;border-top-right-radius:1rem','rounded-t-3xl':'border-top-left-radius:1.5rem;border-top-right-radius:1.5rem','rounded-t-full':'border-top-left-radius:9999px;border-top-right-radius:9999px','block':'display:block','inline-block':'display:inline-block','inline':'display:inline','flex':'display:flex','inline-flex':'display:inline-flex','table':'display:table','table-row':'display:table-row','table-cell':'display:table-cell','grid':'display:grid','inline-grid':'display:inline-grid','hidden':'display:none','flex-row':'flex-direction:row','flex-row-reverse':'flex-direction:row-reverse','flex-col':'flex-direction:column','flex-col-reverse':'flex-direction:column-reverse','flex-wrap':'flex-wrap:wrap','flex-wrap-reverse':'flex-wrap:wrap-reverse','flex-nowrap':'flex-wrap:nowrap','items-start':'align-items:flex-start','items-end':'align-items:flex-end','items-center':'align-items:center','items-baseline':'align-items:baseline','items-stretch':'align-items:stretch','justify-start':'justify-content:flex-start','justify-end':'justify-content:flex-end','justify-center':'justify-content:center','justify-between':'justify-content:space-between','justify-around':'justify-content:space-around','justify-evenly':'justify-content:space-evenly','flex-1':'flex:1 1 0%','flex-auto':'flex:1 1 auto','flex-initial':'flex:none','flex-none':'flex:none','static':'position:static','fixed':'position:fixed','absolute':'position:absolute','relative':'position:relative','sticky':'position:sticky','top-0':'top:0','right-0':'right:0','bottom-0':'bottom:0','left-0':'left:0','top-auto':'top:auto','right-auto':'right:auto','bottom-auto':'bottom:auto','left-auto':'left:auto','shadow-sm':'box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)','shadow':'box-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06)','shadow-md':'box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)','shadow-lg':'box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)','shadow-xl':'box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)','shadow-2xl':'box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)','shadow-inner':'box-shadow:inset 0 2px 4px 0 rgba(0,0,0,0.06)','shadow-none':'box-shadow:none','cursor-auto':'cursor:auto','cursor-default':'cursor:default','cursor-pointer':'cursor:pointer','cursor-wait':'cursor:wait','cursor-text':'cursor:text','cursor-move':'cursor:move','cursor-not-allowed':'cursor:not-allowed','cursor-crosshair':'cursor:crosshair','cursor-help':'cursor:help','cursor-zoom-in':'cursor:zoom-in','cursor-zoom-out':'cursor:zoom-out','cursor-grab':'cursor:grab','cursor-grabbing':'cursor:grabbing','transition-none':'transition-property:none','transition-all':'transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition':'transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition-colors':'transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition-opacity':'transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition-shadow':'transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transition-transform':'transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms','transform':'transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))','transform-gpu':'transform:translate3d(var(--tw-translate-x,0),var(--tw-translate-y,0),0) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))','transform-none':'transform:none','overflow-auto':'overflow:auto','overflow-hidden':'overflow:hidden','overflow-visible':'overflow:visible','overflow-scroll':'overflow:scroll','overflow-x-auto':'overflow-x:auto','overflow-y-auto':'overflow-y:auto','overflow-x-hidden':'overflow-x:hidden','overflow-y-hidden':'overflow-y:hidden','overflow-x-visible':'overflow-x:visible','overflow-y-visible':'overflow-y:visible','overflow-x-scroll':'overflow-x:scroll','overflow-y-scroll':'overflow-y:scroll','overflow-clip':'overflow:clip','overflow-x-clip':'overflow-x:clip','overflow-y-clip':'overflow-y:clip','z-0':'z-index:0','z-10':'z-index:10','z-20':'z-index:20','z-30':'z-index:30','z-40':'z-index:40','z-50':'z-index:50','z-auto':'z-index:auto','gap-0':'gap:0','gap-1':'gap:0.25rem','gap-2':'gap:0.5rem','gap-3':'gap:0.75rem','gap-4':'gap:1rem','gap-5':'gap:1.25rem','gap-6':'gap:1.5rem','gap-8':'gap:2rem','gap-10':'gap:2.5rem','gap-12':'gap:3rem','gap-16':'gap:4rem','gap-20':'gap:5rem','gap-24':'gap:6rem','gap-32':'gap:8rem','gap-40':'gap:10rem','gap-48':'gap:12rem','gap-56':'gap:14rem','gap-64':'gap:16rem','row-gap-0':'row-gap:0','row-gap-1':'row-gap:0.25rem','row-gap-2':'row-gap:0.5rem','row-gap-3':'row-gap:0.75rem','row-gap-4':'row-gap:1rem','row-gap-5':'row-gap:1.25rem','row-gap-6':'row-gap:1.5rem','row-gap-8':'row-gap:2rem','row-gap-10':'row-gap:2.5rem','row-gap-12':'row-gap:3rem','row-gap-16':'row-gap:4rem','row-gap-20':'row-gap:5rem','row-gap-24':'row-gap:6rem','row-gap-32':'row-gap:8rem','row-gap-40':'row-gap:10rem','row-gap-48':'row-gap:12rem','row-gap-56':'row-gap:14rem','row-gap-64':'row-gap:16rem','col-gap-0':'column-gap:0','col-gap-1':'column-gap:0.25rem','col-gap-2':'column-gap:0.5rem','col-gap-3':'column-gap:0.75rem','col-gap-4':'column-gap:1rem','col-gap-5':'column-gap:1.25rem','col-gap-6':'column-gap:1.5rem','col-gap-8':'column-gap:2rem','col-gap-10':'column-gap:2.5rem','col-gap-12':'column-gap:3rem','col-gap-16':'column-gap:4rem','col-gap-20':'column-gap:5rem','col-gap-24':'column-gap:6rem','col-gap-32':'column-gap:8rem','col-gap-40':'column-gap:10rem','col-gap-48':'column-gap:12rem','col-gap-56':'column-gap:14rem','col-gap-64':'column-gap:16rem','sm:block':'@media (min-width:640px){display:block !important;}','sm:inline':'@media (min-width:640px){display:inline !important;}','sm:flex':'@media (min-width:640px){display:flex !important;}','sm:hidden':'@media (min-width:640px){display:none !important;}','sm:text-left':'@media (min-width:640px){text-align:left !important;}','sm:text-center':'@media (min-width:640px){text-align:center !important;}','sm:text-right':'@media (min-width:640px){text-align:right !important;}','md:block':'@media (min-width:768px){display:block !important;}','md:inline':'@media (min-width:768px){display:inline !important;}','md:flex':'@media (min-width:768px){display:flex !important;}','md:hidden':'@media (min-width:768px){display:none !important;}','md:text-left':'@media (min-width:768px){text-align:left !important;}','md:text-center':'@media (min-width:768px){text-align:center !important;}','md:text-right':'@media (min-width:768px){text-align:right !important;}','lg:block':'@media (min-width:1024px){display:block !important;}','lg:inline':'@media (min-width:1024px){display:inline !important;}','lg:flex':'@media (min-width:1024px){display:flex !important;}','lg:hidden':'@media (min-width:1024px){display:none !important;}','lg:text-left':'@media (min-width:1024px){text-align:left !important;}','lg:text-center':'@media (min-width:1024px){text-align:center !important;}','lg:text-right':'@media (min-width:1024px){text-align:right !important;}','xl:block':'@media (min-width:1280px){display:block !important;}','xl:inline':'@media (min-width:1280px){display:inline !important;}','xl:flex':'@media (min-width:1280px){display:flex !important;}','xl:hidden':'@media (min-width:1280px){display:none !important;}','xl:text-left':'@media (min-width:1280px){text-align:left !important;}','xl:text-center':'@media (min-width:1280px){text-align:center !important;}','xl:text-right':'@media (min-width:1280px){text-align:right !important;}','2xl:block':'@media (min-width:1536px){display:block !important;}','2xl:inline':'@media (min-width:1536px){display:inline !important;}','2xl:flex':'@media (min-width:1536px){display:flex !important;}','2xl:hidden':'@media (min-width:1536px){display:none !important;}','2xl:text-left':'@media (min-width:1536px){text-align:left !important;}','2xl:text-center':'@media (min-width:1536px){text-align:center !important;}','2xl:text-right':'@media (min-width:1536px){text-align:right !important;}','dark:bg-black':'@media (prefers-color-scheme:dark){background-color:#000 !important;}','dark:bg-white':'@media (prefers-color-scheme:dark){background-color:#fff !important;}','dark:bg-gray-900':'@media (prefers-color-scheme:dark){background-color:#1a202c !important;}','dark:bg-gray-800':'@media (prefers-color-scheme:dark){background-color:#2d3748 !important;}','dark:bg-gray-700':'@media (prefers-color-scheme:dark){background-color:#4a5568 !important;}','dark:bg-gray-600':'@media (prefers-color-scheme:dark){background-color:#718096 !important;}','dark:text-black':'@media (prefers-color-scheme:dark){color:#000 !important;}','dark:text-white':'@media (prefers-color-scheme:dark){color:#fff !important;}','dark:text-gray-100':'@media (prefers-color-scheme:dark){color:#f7fafc !important;}','dark:text-gray-200':'@media (prefers-color-scheme:dark){color:#edf2f7 !important;}','dark:text-gray-300':'@media (prefers-color-scheme:dark){color:#e2e8f0 !important;}','dark:text-gray-400':'@media (prefers-color-scheme:dark){color:#cbd5e0 !important;}','dark-mode':'background-color:#1a202c;color:#f7fafc;','dark-mode .dark\\:bg-gray-800':'background-color:#2d3748;','dark-mode .dark\\:bg-gray-700':'background-color:#4a5568;','dark-mode .dark\\:text-white':'color:#fff;','dark-mode .dark\\:text-gray-200':'color:#edf2f7;'};this.animations = ` @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}@keyframes slideDown{from{transform:translateY(-100%);}to{transform:translateY(0);}}@keyframes slideLeft{from{transform:translateX(100%);}to{transform:translateX(0);}}@keyframes slideRight{from{transform:translateX(-100%);}to{transform:translateX(0);}}@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);}0%{opacity:0;transform:scale3d(0.3,0.3,0.3);}20%{transform:scale3d(1.1,1.1,1.1);}40%{transform:scale3d(0.9,0.9,0.9);}60%{opacity:1;transform:scale3d(1.03,1.03,1.03);}80%{transform:scale3d(0.97,0.97,0.97);}to{transform:scale3d(1,1,1);}}@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3,0.3,0.3);}50%{opacity:1;}}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0);}to{opacity:1;transform:none;}}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0);}to{opacity:1;transform:none;}}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0);}to{opacity:1;transform:none;}}@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0);}to{opacity:1;transform:none;}}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0;}to{transform-origin:center;transform:none;opacity:1;}}@keyframes flipInX{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0;}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in;}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1;}to{transform:perspective(400px);}}@keyframes flipInY{from{transform:perspective(400px) rotate3d(0,1,0,90deg);animation-timing-function:ease-in;opacity:0;}40%{transform:perspective(400px) rotate3d(0,1,0,-20deg);animation-timing-function:ease-in;}60%{transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1;}to{transform:perspective(400px);}}@keyframes pulse{from{transform:scale3d(1,1,1);}50%{transform:scale3d(1.05,1.05,1.05);}to{transform:scale3d(1,1,1);}}@keyframes bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);}0%{transform:translate3d(0,-30px,0);}20%{transform:translate3d(0,0,0);}53%{transform:translate3d(0,-15px,0);}80%{transform:translate3d(0,0,0);}to{transform:translate3d(0,-4px,0);}}@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes ping{75%,100%{transform:scale(2);opacity:0;}}@keyframes wiggle{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0);}20%,80%{transform:translate3d(2px,0,0);}30%,50%,70%{transform:translate3d(-4px,0,0);}40%,60%{transform:translate3d(4px,0,0);}}@keyframes swing{20%{transform:rotate(15deg);}40%{transform:rotate(-10deg);}60%{transform:rotate(5deg);}80%{transform:rotate(-5deg);}to{transform:rotate(0deg);}}@keyframes tada{0%{transform:scale3d(1,1,1);}10%,20%{transform:scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg);}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);}to{transform:scale3d(1,1,1);}}@keyframes rubberBand{0%{transform:scale3d(1,1,1);}30%{transform:scale3d(1.25,0.75,1);}40%{transform:scale3d(0.75,1.25,1);}50%{transform:scale3d(1.15,0.85,1);}65%{transform:scale3d(0.95,1.05,1);}75%{transform:scale3d(1.05,0.95,1);}to{transform:scale3d(1,1,1);}}@keyframes jello{0%{transform:none;}11.1%{transform:skewX(-12.5deg) skewY(-12.5deg);}22.2%{transform:skewX(6.25deg) skewY(6.25deg);}33.3%{transform:skewX(-3.125deg) skewY(-3.125deg);}44.4%{transform:skewX(1.5625deg) skewY(1.5625deg);}55.5%{transform:skewX(-0.78125deg) skewY(-0.78125deg);}66.6%{transform:skewX(0.390625deg) skewY(0.390625deg);}77.7%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg);}88.8%{transform:skewX(0.09765625deg) skewY(0.09765625deg);}to{transform:none;}}@keyframes heartbeat{0%{transform:scale(1);}14%{transform:scale(1.3);}28%{transform:scale(1);}42%{transform:scale(1.3);}70%{transform:scale(1);}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}@keyframes fadeOutUp{from{opacity:1;transform:translate3d(0,0,0);}to{opacity:0;transform:translate3d(0,-100%,0);}}@keyframes fadeOutDown{from{opacity:1;transform:translate3d(0,0,0);}to{opacity:0;transform:translate3d(0,100%,0);}}@keyframes fadeOutLeft{from{opacity:1;transform:translate3d(0,0,0);}to{opacity:0;transform:translate3d(-100%,0,0);}}@keyframes fadeOutRight{from{opacity:1;transform:translate3d(0,0,0);}to{opacity:0;transform:translate3d(100%,0,0);}}@keyframes zoomOut{from{opacity:1;}50%{opacity:0;transform:scale3d(0.3,0.3,0.3);}to{opacity:0;}}@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}@keyframes slideDown{from{transform:translateY(-100%);}to{transform:translateY(0);}}@keyframes slideLeft{from{transform:translateX(100%);}to{transform:translateX(0);}}@keyframes slideRight{from{transform:translateX(-100%);}to{transform:translateX(0);}}@keyframes bounceIn{0%,20%,40%,60%,80%,100%{transform:translateY(0);}10%{transform:translateY(-20px);}30%{transform:translateY(-10px);}50%{transform:translateY(-5px);}70%{transform:translateY(-2.5px);}90%{transform:translateY(-1.25px);}}@keyframes zoomIn{from{transform:scale(0.9);opacity:0;}to{transform:scale(1);opacity:1;}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeInLeft{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}@keyframes fadeInRight{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}@keyframes rotateIn{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes flipInX{from{transform:perspective(400px) rotateX(90deg);opacity:0;}to{transform:perspective(400px) rotateX(0deg);opacity:1;}}@keyframes flipInY{from{transform:perspective(400px) rotateY(90deg);opacity:0;}to{transform:perspective(400px) rotateY(0deg);opacity:1;}}@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-30px);}60%{transform:translateY(-15px);}}@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes ping{0%{transform:scale(1);opacity:1;}75%,100%{transform:scale(2);opacity:0;}}@keyframes wiggle{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}@keyframes shake{0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-10px);}20%,40%,60%,80%{transform:translateX(10px);}}@keyframes swing{0%{transform:rotate(15deg);}10%{transform:rotate(-10deg);}20%{transform:rotate(5deg);}30%{transform:rotate(-5deg);}40%,100%{transform:rotate(0deg);}}@keyframes tada{0%{transform:scale(1);}10%,20%{transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}40%,60%,80%{transform:scale(1.1) rotate(-3deg);}}@keyframes rubberBand{0%{transform:scale(1);}30%{transform:scale(1.25) rotate(-5deg);}40%{transform:scale(0.75) rotate(3deg);}50%{transform:scale(1.15) rotate(-3deg);}65%{transform:scale(0.9) rotate(2deg);}75%{transform:scale(1.05) rotate(-1deg);}100%{transform:scale(1) rotate(0deg);}}@keyframes jello{0%{transform:scale(1,1) translate3d(0,0,0);}30%{transform:scale(1.25,0.75) translate3d(0,0,0);}40%{transform:scale(0.75,1.25) translate3d(0,0,0);}50%{transform:scale(1.15,0.85) translate3d(0,0,0);}65%{transform:scale(0.95,1.05) translate3d(0,0,0);}75%{transform:scale(1.05,0.95) translate3d(0,0,0);}100%{transform:scale(1,1) translate3d(0,0,0);}}@keyframes heartbeat{0%{transform:scale(1);}14%{transform:scale(1.3);}28%{transform:scale(1);}42%{transform:scale(1.3);}70%{transform:scale(1);}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}@keyframes fadeOutUp{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-20px);}}@keyframes fadeOutDown{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(20px);}}@keyframes fadeOutLeft{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(-20px);}}@keyframes fadeOutRight{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(20px);}}@keyframes zoomOut{from{transform:scale(1);opacity:1;}to{transform:scale(0.9);opacity:0;}}@keyframes slideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}@keyframes slideDown{from{transform:translateY(-20px);opacity:0;}to{transform:translateY(0);opacity:1;}}@keyframes slideLeft{from{transform:translateX(20px);opacity:0;}to{transform:translateX(0);opacity:1;}}@keyframes slideRight{from{transform:translateX(-20px);opacity:0;}to{transform:translateX(0);opacity:1;}}@keyframes bounceIn{0%{transform:scale(0.3);opacity:0;}50%{transform:scale(1.05);}70%{transform:scale(0.9);}100%{transform:scale(1);opacity:1;}}@keyframes zoomIn{from{transform:scale(0.9);opacity:0;}to{transform:scale(1);opacity:1;}}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes ping{0%{transform:scale(1);opacity:1;}75%,100%{transform:scale(2);opacity:0;}}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0);}to{opacity:1;transform:translate3d(0,0,0);}}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0);}to{opacity:1;transform:translate3d(0,0,0);}}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(100%,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}@keyframes fadeInRight{from{opacity:0;transform:translate3d(-100%,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}@keyframes rotateIn{from{transform:rotate3d(0,0,1,-200deg);opacity:0;}to{transform:translate3d(0,0,0);opacity:1;}}@keyframes flipInX{from{transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0;}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1;}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg);}to{transform:perspective(400px);}}@keyframes flipInY{from{transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0;}40%{transform:perspective(400px) rotate3d(0,1,0,-20deg);}60%{transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1;}80%{transform:perspective(400px) rotate3d(0,1,0,-5deg);}to{transform:perspective(400px);}}@keyframes wiggle{0%{transform:rotate(0deg);}25%{transform:rotate(5deg);}50%{transform:rotate(-5deg);}75%{transform:rotate(3deg);}100%{transform:rotate(0deg);}}@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}@keyframes swing{20%{transform:rotate(15deg);}40%{transform:rotate(-10deg);}60%{transform:rotate(5deg);}80%{transform:rotate(-5deg);}100%{transform:rotate(0deg);}}@keyframes tada{0%{transform:scale(1);}10%,20%{transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}40%,60%,80%{transform:scale(1.1) rotate(-3deg);}100%{transform:scale(1) rotate(0);}}@keyframes rubberBand{0%{transform:scale(1);}30%{transform:scaleX(1.25) scaleY(0.75);}40%{transform:scaleX(0.75) scaleY(1.25);}50%{transform:scaleX(1.15) scaleY(0.85);}65%{transform:scaleX(0.95) scaleY(1.05);}75%{transform:scaleX(1.05) scaleY(0.95);}100%{transform:scale(1);}}@keyframes jello{0%,100%{transform:translate3d(0,0,0);}33%{transform:skewX(-12.5deg) skewY(-12.5deg);}66%{transform:skewX(6.25deg) skewY(6.25deg);}}@keyframes heartbeat{0%{transform:scale(1);}14%{transform:scale(1.3);}28%{transform:scale(1);}42%{transform:scale(1.3);}70%{transform:scale(1);}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}@keyframes fadeOutUp{from{opacity:1;}to{opacity:0;transform:translate3d(0,-100%,0);}}@keyframes fadeOutDown{from{opacity:1;}to{opacity:0;transform:translate3d(0,100%,0);}}@keyframes fadeOutLeft{from{opacity:1;}to{opacity:0;transform:translate3d(-100%,0,0);}}@keyframes fadeOutRight{from{opacity:1;}to{opacity:0;transform:translate3d(100%,0,0);}}@keyframes zoomOut{from{opacity:1;transform:scale3d(1,1,1);}50%{opacity:0;transform:scale3d(0.3,0.3,0.3);}to{opacity:0;}}.scar-\\:hover-pop:hover{transform:scale(1.05);}.scar-\\:hover-float:hover{transform:translateY(-5px);}.scar-\\:hover-glow:hover{box-shadow:0 0 15px rgba(0,0,0,0.3);}.scar-\\:hover-tilt:hover{transform:rotate(5deg);}`;this.styleCounter = 0;this.classMap = new Map();this.processedElements = new WeakSet();this.debugMode = false;this.init();}init(){this.addAnimations();if (document.readyState === 'loading'){document.addEventListener('DOMContentLoaded',() => this.processElements());}else{this.processElements();}this.observeDOM();}addAnimations(){if (!document.querySelector('#scarcss-animations')){const style = document.createElement('style');style.id = 'scarcss-animations';style.textContent = this.animations;document.head.appendChild(style);}}observeDOM(){const throttle = (func,limit) =>{let inThrottle;return function(){const args = arguments;const context = this;if (!inThrottle){func.apply(context,args);inThrottle = true;setTimeout(() => inThrottle = false,limit);}}};const processMutations = throttle((mutations) =>{mutations.forEach(mutation =>{mutation.addedNodes.forEach(node =>{if (node.nodeType === Node.ELEMENT_NODE){if (node.hasAttribute && (node.hasAttribute('@scar') || node.hasAttribute('@action'))){this.processElement(node);}if (node.querySelectorAll){const elements = node.querySelectorAll('[\\@scar],[\\@action]');elements.forEach(el => this.processElement(el));}}});});},100);const observer = new MutationObserver(processMutations);observer.observe(document.body,{childList:true,subtree:true,attributes:false});}processElements(){const scarElements = document.querySelectorAll('[\\@scar]');scarElements.forEach(el => this.processScarElement(el));const actionElements = document.querySelectorAll('[\\@action]');actionElements.forEach(el => this.processActionElement(el));}processElement(element){if (this.processedElements.has(element)){return;}if (element.hasAttribute('@scar')){this.processScarElement(element);}if (element.hasAttribute('@action')){this.processActionElement(element);}this.processedElements.add(element);}processScarElement(element){if (this.processedElements.has(element)){return;}const scarValue = element.getAttribute('@scar');if (!scarValue) return;try{const classes = scarValue.trim().split(/\s+/);const styles =[];const hoverClasses =[];classes.forEach(cls =>{if (cls.startsWith('hover-')){hoverClasses.push(`scar-:${cls}`);}else if (this.utilityClasses[cls]){styles.push(this.utilityClasses[cls]);}else{this.logDebug(`Unknown utility class:${cls}`,element);}});if (styles.length > 0 || hoverClasses.length > 0){const styleObj ={styles:styles.join(';')};this.applyStyles(element,styleObj);hoverClasses.forEach(cls => element.classList.add(cls));}this.processedElements.add(element);this.logDebug('Processed @scar element',{element,classes,styles,hoverClasses});}catch (e){console.error('Error parsing @scar attribute:',e);this.logDebug('Error parsing @scar attribute',{element,error:e});}}toKebabCase(str){return str.replace(/[A-Z]/g,match => `-${match.toLowerCase()}`);}generateClassName(styleObj){const styleString = JSON.stringify(styleObj);if (this.classMap.has(styleString)){return this.classMap.get(styleString);}const className = `scar-${this.styleCounter++}`;this.classMap.set(styleString,className);return className;}applyStyles(element,styleObj){const className = this.generateClassName(styleObj);if (!document.querySelector(`style[data-scar="${className}"]`)){this.createStyleRule(className,styleObj);}element.classList.add(className);}createStyleRule(className,styleObj){let cssText = `.${className}{${styleObj.styles};}`;const styleEl = document.createElement('style');styleEl.setAttribute('data-scar',className);styleEl.textContent = cssText;document.head.appendChild(styleEl);}processActionElement(element){if (this.processedElements.has(element)){return;}const actionValue = element.getAttribute('@action');if (!actionValue) return;try{const actionObj ={};const pairs = actionValue.trim().slice(1,-1).split(',');pairs.forEach(pair =>{const[key,value]= pair.split(':').map(s => s.trim());const cleanValue = value.replace(/^['"]|['"]$/g,'');actionObj[key]= cleanValue;});for (const[action,value]of Object.entries(actionObj)){if (!this.validateAction(action)){continue;}switch (action){case 'alert':element.addEventListener('click',() => alert(value));break;case 'menuToggle':element.addEventListener('click',() => this.toggleMenu(value));break;case 'modalOpen':element.addEventListener('click',() => this.openModal(value));break;case 'modalClose':element.addEventListener('click',() => this.closeModal(value));break;case 'copyToClipboard':element.addEventListener('click',() => this.copyToClipboard(value));break;case 'toggleDarkMode':element.addEventListener('click',() => this.toggleDarkMode());break;case 'setDarkMode':element.addEventListener('click',() => this.setDarkMode(value === 'true'));break;default:if (typeof this[action]=== 'function'){element.addEventListener('click',() => this[action](value));}}}this.processedElements.add(element);this.logDebug('Processed @action element',{element,actions:actionObj});}catch (e){console.error('Error parsing @action attribute:',e);this.logDebug('Error parsing @action attribute',{element,error:e});}}toggleMenu(selector){const menu = document.querySelector(selector);if (menu){menu.classList.toggle('scar-menu-open');}}openModal(selector){const modal = document.querySelector(selector);if (modal){modal.style.display = 'block';let overlay = document.querySelector('.scar-modal-overlay');if (!overlay){overlay = document.createElement('div');overlay.className = 'scar-modal-overlay';overlay.style.cssText = ` position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999;`;document.body.appendChild(overlay);overlay.addEventListener('click',() =>{this.closeModal(selector);});}overlay.style.display = 'block';}}closeModal(selector){const modal = document.querySelector(selector);if (modal){modal.style.display = 'none';}const overlay = document.querySelector('.scar-modal-overlay');if (overlay){overlay.style.display = 'none';}}copyToClipboard(text){navigator.clipboard.writeText(text).then(() =>{console.log('Text copied to clipboard');}).catch(err =>{console.error('Failed to copy:',err);});}toggleDarkMode(){document.body.classList.toggle('dark-mode');}setDarkMode(enabled){if (enabled){document.body.classList.add('dark-mode');}else{document.body.classList.remove('dark-mode');}}enableDebugMode(){this.debugMode = true;console.log('ScarCSS Debug Mode Enabled');}disableDebugMode(){this.debugMode = false;console.log('ScarCSS Debug Mode Disabled');}logDebug(message,data = null){if (this.debugMode){console.log(`[ScarCSS Debug]${message}`,data);}}getStats(){return{processedElements:this.processedElements.size || 'Unknown',styleCounter:this.styleCounter,classMapSize:this.classMap.size};}validateUtilityClass(className){if (!this.utilityClasses[className]){this.logDebug(`Unknown utility class:${className}`);return false;}return true;}validateAction(actionName){const validActions =['alert','menuToggle','modalOpen','modalClose','copyToClipboard','toggleDarkMode','setDarkMode'];if (!validActions.includes(actionName) && typeof this[actionName]!== 'function'){this.logDebug(`Unknown action:${actionName}`);return false;}return true;}}const scarCSS = new ScarCSS();if (typeof module !== 'undefined' && module.exports){module.exports = ScarCSS;}if (typeof window !== 'undefined'){window.ScarCSS = ScarCSS;}

package.json

 {
   "name": "scarcss",
-  "version": "1.0.0",
-  "description": "A lightweight, utility-first frontend framework for styling and interactions using custom attributes. ScarCSS provides unique utilities and animations not found in other frameworks.",
+  "version": "2.0.0",
+  "description": "A lightweight, utility-first frontend framework for styling and interactions using custom attributes. ScarCSS v2.0 provides unique utilities, animations, dark mode support, responsive utilities, and performance improvements not found in other frameworks.",
   "main": "dist/scarcss.js",
@@ -6,0 +6,0 @@ "module": "src/scarcss.js",

README.md

@@ -1,10 +0,15 @@
-# ScarCSS
+# ScarCSS v2.0
 
-A lightweight, utility-first frontend framework for styling and interactions using custom attributes. ScarCSS provides unique utilities and animations not found in other frameworks, with a familiar syntax that's easy to learn and use.
+A lightweight, utility-first frontend framework for styling and interactions using custom attributes. ScarCSS v2.0 provides unique utilities, animations, dark mode support, responsive utilities, and performance improvements not found in other frameworks, with a familiar syntax that's easy to learn and use.
 
 ## Features
 
-- **Unique Utility Classes**: Over 300+ utility classes including unique effects like magic gradients, text effects, and shapes
-- **Animation System**: Built-in entrance and continuous animations
+- **Unique Utility Classes**: Over 500+ utility classes including unique effects like magic gradients, text effects, and shapes
+- **Enhanced Animation System**: 30+ built-in entrance, continuous, and exit animations
 - **Hover Effects**: Interactive hover states with smooth transitions
+- **Dark Mode Support**: Automatic and manual dark mode with utility classes
+- **Responsive Utilities**: Breakpoint-based responsive utility classes
+- **Gap Utilities**: Grid and flexbox gap utilities for precise spacing
+- **Performance Optimizations**: Throttled DOM observation and element caching
+- **Debug Mode**: Built-in debugging and statistics tracking
 - **No Dependencies**: Pure vanilla JavaScript implementation
@@ -26,3 +31,3 @@ - **Dynamic Element Support**: Automatically processes elements added after initial load
 ```html
-<script src="https://cdn.jsdelivr.net/npm/scarcss@1.0.0/dist/scarcss.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/scarcss@2.0.0/dist/scarcss.min.js"></script>
 ```
@@ -44,10 +49,14 @@
 <head>
-  <script src="https://cdn.jsdelivr.net/npm/scarcss@1.0.0/dist/scarcss.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/scarcss@2.0.0/dist/scarcss.min.js"></script>
 </head>
 <body>
-  <h1 @scar="text-3xl text-blue-500 text-glow">Hello ScarCSS!</h1>
+  <h1 @scar="text-3xl text-blue-500 text-glow">Hello ScarCSS v2.0!</h1>
   <button @scar="bg-magic text-white py-2 px-4 rounded hover-pop" 
-          @action="{alert:'Hello from ScarCSS!'}">
+          @action="{alert:'Hello from ScarCSS v2.0!'}">
     Click Me
   </button>
+  <button @scar="bg-gray-800 text-white py-2 px-4 rounded mt-4" 
+          @action="{toggleDarkMode:''}">
+    Toggle Dark Mode
+  </button>
 </body>
@@ -106,2 +115,11 @@ </html>
 
+#### Exit Animations
+- `animate-fade-out` - Fade out effect
+- `animate-slide-up-out` - Slide up and out
+- `animate-slide-down-out` - Slide down and out
+- `animate-slide-left-out` - Slide left and out
+- `animate-slide-right-out` - Slide right and out
+- `animate-bounce-out` - Bounce out effect
+- `animate-zoom-out` - Zoom out effect
+
 #### Hover Effects
@@ -108,0 +126,0 @@ - `hover-pop` - Scale up on hover

USAGE.md

@@ -26,3 +26,3 @@ # How to Use ScarCSS
 ```html
-<script src="https://cdn.jsdelivr.net/npm/scarcss@1.0.0/dist/scarcss.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/scarcss@2.0.0/dist/scarcss.min.js"></script>
 ```
@@ -86,2 +86,7 @@
 </button>
+
+<!-- Toggle dark mode -->
+<button @action="{toggleDarkMode:''}">
+  Toggle Dark Mode
+</button>
 ```
@@ -99,2 +104,7 @@
 - `bg-forest` - Green gradient
+- `bg-cosmic` - Cosmic gradient
+- `bg-aurora` - Aurora gradient
+- `bg-lava` - Lava gradient
+- `bg-neon` - Neon gradient
+- `bg-rainbow` - Rainbow gradient
 
@@ -106,2 +116,6 @@ #### Text Effects
 - `text-neon` - Neon text effect
+- `text-retro` - Retro text effect
+- `text-embossed` - Embossed text effect
+- `text-carved` - Carved text effect
+- `text-fire` - Fire text effect
 
@@ -113,2 +127,6 @@ #### Shapes
 - `shape-heart` - Heart shape
+- `shape-triangle` - Triangle shape
+- `shape-hexagon` - Hexagon shape
+- `shape-diamond` - Diamond shape
+- `shape-parallelogram` - Parallelogram shape
 
@@ -120,2 +138,6 @@ #### Borders
 - `border-double-bold` - Thick double border
+- `border-rainbow` - Rainbow border
+- `border-wave` - Wave border
+- `border-dashed-neon` - Dashed neon border
+- `border-gradient` - Gradient border
 
@@ -132,2 +154,9 @@ ### Animations
 - `animate-zoom-in` - Zoom in effect
+- `animate-fade-in-up` - Fade in from bottom
+- `animate-fade-in-down` - Fade in from top
+- `animate-fade-in-left` - Fade in from right
+- `animate-fade-in-right` - Fade in from left
+- `animate-rotate-in` - Rotate in effect
+- `animate-flip-in-x` - Flip in X axis
+- `animate-flip-in-y` - Flip in Y axis
 
@@ -140,3 +169,18 @@ #### Continuous Animations
 - `animate-pulse-fast` - Fast pulsing
+- `animate-wiggle` - Wiggle effect
+- `animate-shake` - Shake effect
+- `animate-swing` - Swing effect
+- `animate-tada` - Tada effect
+- `animate-rubber-band` - Rubber band effect
+- `animate-jello` - Jello effect
+- `animate-heartbeat` - Heartbeat effect
 
+#### Exit Animations
+- `animate-fade-out` - Fade out effect
+- `animate-fade-out-up` - Fade out to top
+- `animate-fade-out-down` - Fade out to bottom
+- `animate-fade-out-left` - Fade out to left
+- `animate-fade-out-right` - Fade out to right
+- `animate-zoom-out` - Zoom out effect
+
 #### Hover Effects
@@ -148,2 +192,52 @@ - `hover-pop` - Scale up on hover
 
+### Filters
+- `filter-blur-sm` - Small blur
+- `filter-blur` - Medium blur
+- `filter-blur-lg` - Large blur
+- `filter-brightness-110` - Increase brightness
+- `filter-brightness-90` - Decrease brightness
+- `filter-contrast-125` - Increase contrast
+- `filter-saturate-150` - Increase saturation
+- `filter-sepia` - Sepia effect
+- `filter-invert` - Invert colors
+- `filter-hue-rotate-90` - Rotate hue 90 degrees
+- `filter-hue-rotate-180` - Rotate hue 180 degrees
+- `filter-grayscale` - Grayscale effect
+- `filter-drop-shadow` - Drop shadow
+- `filter-glow` - Glow effect
+
+### Transforms
+- `transform-scale-90` - Scale to 90%
+- `transform-scale-95` - Scale to 95%
+- `transform-scale-105` - Scale to 105%
+- `transform-scale-110` - Scale to 110%
+- `transform-rotate-5` - Rotate 5 degrees
+- `transform-rotate-10` - Rotate 10 degrees
+- `transform-rotate-45` - Rotate 45 degrees
+- `transform-rotate-90` - Rotate 90 degrees
+- `transform-skew-x-5` - Skew X 5 degrees
+- `transform-skew-x-10` - Skew X 10 degrees
+- `transform-skew-y-5` - Skew Y 5 degrees
+- `transform-skew-y-10` - Skew Y 10 degrees
+- `transform-flip-x` - Flip horizontally
+- `transform-flip-y` - Flip vertically
+- `transform-3d` - 3D transform
+
+### Gap Utilities
+- `gap-0` to `gap-64` - Gap between grid or flex items
+- `row-gap-0` to `row-gap-64` - Row gap for grid layouts
+- `col-gap-0` to `col-gap-64` - Column gap for grid layouts
+
+### Responsive Utilities
+- `sm:block`, `sm:inline`, `sm:flex`, `sm:hidden` - Small screens (640px+)
+- `md:block`, `md:inline`, `md:flex`, `md:hidden` - Medium screens (768px+)
+- `lg:block`, `lg:inline`, `lg:flex`, `lg:hidden` - Large screens (1024px+)
+- `xl:block`, `xl:inline`, `xl:flex`, `xl:hidden` - Extra large screens (1280px+)
+- `2xl:block`, `2xl:inline`, `2xl:flex`, `2xl:hidden` - 2X large screens (1536px+)
+
+### Dark Mode Utilities
+- `dark:bg-black`, `dark:bg-white`, `dark:bg-gray-900` - Dark mode backgrounds
+- `dark:text-black`, `dark:text-white`, `dark:text-gray-100` - Dark mode text colors
+- `dark-mode` class - Manual dark mode toggle
+
 ### Traditional Utilities
@@ -219,2 +313,29 @@
 
+### Debug Mode
+
+Enable debug mode to see detailed information about processing:
+
+```javascript
+const scarCSS = new ScarCSS();
+scarCSS.enableDebugMode(); // Enable debug logging
+scarCSS.disableDebugMode(); // Disable debug logging
+scarCSS.getStats(); // Get processing statistics
+```
+
+### Dark Mode
+
+ScarCSS supports both automatic dark mode (based on system preferences) and manual dark mode:
+
+```html
+<!-- Automatic dark mode (based on system preferences) -->
+<div @scar="bg-white dark:bg-gray-900 text-black dark:text-white">
+  Content that adapts to system dark mode
+</div>
+
+<!-- Manual dark mode toggle -->
+<button @action="{toggleDarkMode:''}">
+  Toggle Dark Mode
+</button>
+```
+
 ## Browser Support
@@ -232,3 +353,4 @@
 2. Using efficient DOM observation for dynamic elements
-3. Minimizing JavaScript overhead
+3. Caching processed elements to avoid reprocessing
+4. Throttling DOM mutations to reduce processing overhead
 
@@ -251,4 +373,9 @@ ## Troubleshooting
 
+### Debugging
+- Enable debug mode to see detailed processing information
+- Check browser console for error messages
+- Use `getStats()` to see processing statistics
+
 ## Examples
 
 See `demo.html` for comprehensive examples of all ScarCSS features.

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

220451

79.82%

Lines of code

3832

111.25%

Number of lines in readme file

231

8.45%

Worsened metrics

Number of low supply chain risk alerts

3

50%

No dependency changes