@howssatoshi/quantumcss 1.4.3 → 1.5.1

package/dist/quantum.min.css

@@ -1,5 +1,5 @@
 /*!
- * QuantumCSS + Starlight UI v1.4.2 - Advanced Utility-First CSS Framework
+ * QuantumCSS + Starlight UI v1.5.1 - Advanced Utility-First CSS Framework
  * https://github.com/macroadster/quantumcss
  * Copyright (c) 2026 Eric Yang
  * License: MIT
@@ -8,15 +8,16 @@
 /*!
  * QuantumCSS + Starlight UI
  * Advanced utility-first framework with ethereal cosmic aesthetics
- * Version: 1.4.2
+ * Version: 1.5.1
  * Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap';
 
 /* CSS Custom Properties (Design Tokens) */
 :root {
   color-scheme: dark;
+
   /* Colors */
   --color-primary: #3b82f6;
   --color-primary-50: #eff6ff;
@@ -29,7 +30,6 @@
   --color-primary-700: #1d4ed8;
   --color-primary-800: #1e40af;
   --color-primary-900: #1e3a8a;
-
   --color-secondary: #64748b;
   --color-success: #10b981;
   --color-warning: #f59e0b;
@@ -68,11 +68,11 @@
   --radius-full: 9999px;
 
   /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
 
   /* Animation */
   --duration-75: 75ms;
@@ -83,7 +83,6 @@
   --duration-500: 500ms;
   --duration-700: 700ms;
   --duration-1000: 1000ms;
-
   --ease-linear: linear;
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
@@ -94,23 +93,26 @@
   --color-starlight-peach: #ffb38a;
   --color-starlight-orange: #ff7e5f;
   --color-starlight-deep: #08081a;
-  --color-starlight-glow: rgba(0, 212, 255, 0.35);
+  --color-starlight-glow: rgb(0 212 255 / 35%);
+  
+  /* Semantic Background Colors */
+  --bg-primary: var(--color-starlight-deep);
   
   /* Semantic Text Colors */
   --text-primary: #f1f5f9;
-  --text-secondary: rgba(241, 245, 249, 0.7);
-  --text-muted: rgba(241, 245, 249, 0.45);
+  --text-secondary: rgb(241 245 249 / 70%);
+  --text-muted: rgb(241 245 249 / 45%);
   
   /* Light Mode Palette */
   --light-bg: #f1f5f9;
   --light-text: #1e293b;
   --light-text-muted: #64748b;
-  --light-card-bg: #ffffff;
-  --light-card-border: rgba(0, 0, 0, 0.06);
+  --light-card-bg: #fff;
+  --light-card-border: rgb(0 0 0 / 6%);
 
   /* Glassmorphism */
-  --glass-bg: rgba(255, 255, 255, 0.03);
-  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-bg: rgb(255 255 255 / 3%);
+  --glass-border: rgb(255 255 255 / 10%);
   --glass-blur: blur(16px);
 
   /* Transitions */
@@ -122,11 +124,11 @@
 /* High Contrast (Accessibility) Mode Support */
 @media (prefers-contrast: more) {
   :root {
-    --color-starlight-blue: #0088cc; /* Darkened for better contrast on light */
+    --color-starlight-blue: #08c; /* Darkened for better contrast on light */
     --color-starlight-orange: #d14d33;
-    --glass-bg: rgba(255, 255, 255, 0.1);
-    --glass-border: rgba(255, 255, 255, 0.4);
-    --text-muted: rgba(241, 245, 249, 0.8);
+    --glass-bg: rgb(255 255 255 / 10%);
+    --glass-border: rgb(255 255 255 / 40%);
+    --text-muted: rgb(241 245 249 / 80%);
   }
 }
 
@@ -172,7 +174,7 @@
 html {
   line-height: 1.6;
   -webkit-text-size-adjust: 100%;
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -215,25 +217,25 @@ textarea {
   gap: var(--space-8);
 }
 
-@container (min-width: 640px) {
+@media (min-width: 640px) {
   .container {
     max-width: 640px;
   }
 }
 
-@container (min-width: 768px) {
+@media (min-width: 768px) {
   .container {
     max-width: 768px;
   }
 }
 
-@container (min-width: 1024px) {
+@media (min-width: 1024px) {
   .container {
     max-width: 1024px;
   }
 }
 
-@container (min-width: 1280px) {
+@media (min-width: 1280px) {
   .container {
     max-width: 1280px;
   }
@@ -294,8 +296,14 @@ textarea {
 .gap-5 { gap: var(--space-5); }
 .gap-6 { gap: var(--space-6); }
 .gap-8 { gap: var(--space-8); }
-
-/* Spacing Utilities */
+.gap-10 { gap: var(--space-10); }
+.gap-12 { gap: var(--space-12); }
+.gap-16 { gap: var(--space-16); }
+.gap-20 { gap: var(--space-20); }
+.gap-24 { gap: var(--space-24); }
+.gap-32 { gap: var(--space-32); }
+
+/* Spacing Utilities - All Sides */
 .m-0 { margin: var(--space-0); }
 .m-1 { margin: var(--space-1); }
 .m-2 { margin: var(--space-2); }
@@ -304,11 +312,113 @@ textarea {
 .m-5 { margin: var(--space-5); }
 .m-6 { margin: var(--space-6); }
 .m-8 { margin: var(--space-8); }
+.m-10 { margin: var(--space-10); }
+.m-12 { margin: var(--space-12); }
+.m-16 { margin: var(--space-16); }
+.m-20 { margin: var(--space-20); }
+.m-24 { margin: var(--space-24); }
+.m-32 { margin: var(--space-32); }
 .m-auto { margin: auto; }
 
+/* Margin - X Axis */
+.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
+.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
+.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
+.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
+.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
+.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
+.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
+.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
+.mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
+.mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
+.mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); }
+.mx-20 { margin-left: var(--space-20); margin-right: var(--space-20); }
+.mx-24 { margin-left: var(--space-24); margin-right: var(--space-24); }
+.mx-32 { margin-left: var(--space-32); margin-right: var(--space-32); }
 .mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Margin - Y Axis */
+.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
+.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
+.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
+.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
+.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
+.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
+.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
+.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
+.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
+.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
+.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
+.my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); }
+.my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); }
+.my-32 { margin-top: var(--space-32); margin-bottom: var(--space-32); }
 .my-auto { margin-top: auto; margin-bottom: auto; }
 
+/* Margin - Top */
+.mt-0 { margin-top: var(--space-0); }
+.mt-1 { margin-top: var(--space-1); }
+.mt-2 { margin-top: var(--space-2); }
+.mt-3 { margin-top: var(--space-3); }
+.mt-4 { margin-top: var(--space-4); }
+.mt-5 { margin-top: var(--space-5); }
+.mt-6 { margin-top: var(--space-6); }
+.mt-8 { margin-top: var(--space-8); }
+.mt-10 { margin-top: var(--space-10); }
+.mt-12 { margin-top: var(--space-12); }
+.mt-16 { margin-top: var(--space-16); }
+.mt-20 { margin-top: var(--space-20); }
+.mt-24 { margin-top: var(--space-24); }
+.mt-32 { margin-top: var(--space-32); }
+
+/* Margin - Right */
+.mr-0 { margin-right: var(--space-0); }
+.mr-1 { margin-right: var(--space-1); }
+.mr-2 { margin-right: var(--space-2); }
+.mr-3 { margin-right: var(--space-3); }
+.mr-4 { margin-right: var(--space-4); }
+.mr-5 { margin-right: var(--space-5); }
+.mr-6 { margin-right: var(--space-6); }
+.mr-8 { margin-right: var(--space-8); }
+.mr-10 { margin-right: var(--space-10); }
+.mr-12 { margin-right: var(--space-12); }
+.mr-16 { margin-right: var(--space-16); }
+.mr-20 { margin-right: var(--space-20); }
+.mr-24 { margin-right: var(--space-24); }
+.mr-32 { margin-right: var(--space-32); }
+
+/* Margin - Bottom */
+.mb-0 { margin-bottom: var(--space-0); }
+.mb-1 { margin-bottom: var(--space-1); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-3 { margin-bottom: var(--space-3); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-5 { margin-bottom: var(--space-5); }
+.mb-6 { margin-bottom: var(--space-6); }
+.mb-8 { margin-bottom: var(--space-8); }
+.mb-10 { margin-bottom: var(--space-10); }
+.mb-12 { margin-bottom: var(--space-12); }
+.mb-16 { margin-bottom: var(--space-16); }
+.mb-20 { margin-bottom: var(--space-20); }
+.mb-24 { margin-bottom: var(--space-24); }
+.mb-32 { margin-bottom: var(--space-32); }
+
+/* Margin - Left */
+.ml-0 { margin-left: var(--space-0); }
+.ml-1 { margin-left: var(--space-1); }
+.ml-2 { margin-left: var(--space-2); }
+.ml-3 { margin-left: var(--space-3); }
+.ml-4 { margin-left: var(--space-4); }
+.ml-5 { margin-left: var(--space-5); }
+.ml-6 { margin-left: var(--space-6); }
+.ml-8 { margin-left: var(--space-8); }
+.ml-10 { margin-left: var(--space-10); }
+.ml-12 { margin-left: var(--space-12); }
+.ml-16 { margin-left: var(--space-16); }
+.ml-20 { margin-left: var(--space-20); }
+.ml-24 { margin-left: var(--space-24); }
+.ml-32 { margin-left: var(--space-32); }
+
+/* Padding - All Sides */
 .p-0 { padding: var(--space-0); }
 .p-1 { padding: var(--space-1); }
 .p-2 { padding: var(--space-2); }
@@ -317,6 +427,108 @@ textarea {
 .p-5 { padding: var(--space-5); }
 .p-6 { padding: var(--space-6); }
 .p-8 { padding: var(--space-8); }
+.p-10 { padding: var(--space-10); }
+.p-12 { padding: var(--space-12); }
+.p-16 { padding: var(--space-16); }
+.p-20 { padding: var(--space-20); }
+.p-24 { padding: var(--space-24); }
+.p-32 { padding: var(--space-32); }
+
+/* Padding - X Axis */
+.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
+.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
+.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
+.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
+.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
+.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
+.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
+.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
+.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
+.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
+.px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }
+.px-32 { padding-left: var(--space-32); padding-right: var(--space-32); }
+
+/* Padding - Y Axis */
+.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
+.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
+.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
+.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
+.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
+.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
+.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
+.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
+.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
+.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
+.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); }
+
+/* Padding - Top */
+.pt-0 { padding-top: var(--space-0); }
+.pt-1 { padding-top: var(--space-1); }
+.pt-2 { padding-top: var(--space-2); }
+.pt-3 { padding-top: var(--space-3); }
+.pt-4 { padding-top: var(--space-4); }
+.pt-5 { padding-top: var(--space-5); }
+.pt-6 { padding-top: var(--space-6); }
+.pt-8 { padding-top: var(--space-8); }
+.pt-10 { padding-top: var(--space-10); }
+.pt-12 { padding-top: var(--space-12); }
+.pt-16 { padding-top: var(--space-16); }
+.pt-20 { padding-top: var(--space-20); }
+.pt-24 { padding-top: var(--space-24); }
+.pt-32 { padding-top: var(--space-32); }
+
+/* Padding - Right */
+.pr-0 { padding-right: var(--space-0); }
+.pr-1 { padding-right: var(--space-1); }
+.pr-2 { padding-right: var(--space-2); }
+.pr-3 { padding-right: var(--space-3); }
+.pr-4 { padding-right: var(--space-4); }
+.pr-5 { padding-right: var(--space-5); }
+.pr-6 { padding-right: var(--space-6); }
+.pr-8 { padding-right: var(--space-8); }
+.pr-10 { padding-right: var(--space-10); }
+.pr-12 { padding-right: var(--space-12); }
+.pr-16 { padding-right: var(--space-16); }
+.pr-20 { padding-right: var(--space-20); }
+.pr-24 { padding-right: var(--space-24); }
+.pr-32 { padding-right: var(--space-32); }
+
+/* Padding - Bottom */
+.pb-0 { padding-bottom: var(--space-0); }
+.pb-1 { padding-bottom: var(--space-1); }
+.pb-2 { padding-bottom: var(--space-2); }
+.pb-3 { padding-bottom: var(--space-3); }
+.pb-4 { padding-bottom: var(--space-4); }
+.pb-5 { padding-bottom: var(--space-5); }
+.pb-6 { padding-bottom: var(--space-6); }
+.pb-8 { padding-bottom: var(--space-8); }
+.pb-10 { padding-bottom: var(--space-10); }
+.pb-12 { padding-bottom: var(--space-12); }
+.pb-16 { padding-bottom: var(--space-16); }
+.pb-20 { padding-bottom: var(--space-20); }
+.pb-24 { padding-bottom: var(--space-24); }
+.pb-32 { padding-bottom: var(--space-32); }
+
+/* Padding - Left */
+.pl-0 { padding-left: var(--space-0); }
+.pl-1 { padding-left: var(--space-1); }
+.pl-2 { padding-left: var(--space-2); }
+.pl-3 { padding-left: var(--space-3); }
+.pl-4 { padding-left: var(--space-4); }
+.pl-5 { padding-left: var(--space-5); }
+.pl-6 { padding-left: var(--space-6); }
+.pl-8 { padding-left: var(--space-8); }
+.pl-10 { padding-left: var(--space-10); }
+.pl-12 { padding-left: var(--space-12); }
+.pl-16 { padding-left: var(--space-16); }
+.pl-20 { padding-left: var(--space-20); }
+.pl-24 { padding-left: var(--space-24); }
+.pl-32 { padding-left: var(--space-32); }
 
 /* Typography Utilities */
 .text-xs { font-size: 0.75rem; line-height: 1rem; }
@@ -348,8 +560,8 @@ textarea {
 .text-warning { color: var(--color-warning); }
 .text-error { color: var(--color-error); }
 .text-neutral { color: var(--color-neutral); }
-.text-white { color: #ffffff; }
-.text-black { color: #000000; }
+.text-white { color: #fff; }
+.text-black { color: #000; }
 
 .bg-primary { background-color: var(--color-primary); }
 .bg-secondary { background-color: var(--color-secondary); }
@@ -357,11 +569,11 @@ textarea {
 .bg-warning { background-color: var(--color-warning); }
 .bg-error { background-color: var(--color-error); }
 .bg-neutral { background-color: var(--color-neutral); }
-.bg-white { background-color: #ffffff; color: #0f172a; }
-.bg-black { background-color: #000000; color: #ffffff; }
+.bg-white { background-color: #fff; color: #0f172a; }
+.bg-black { background-color: #000; color: #fff; }
 
 /* Border Utilities */
-.border-0 { border-width: 0px; }
+.border-0 { border-width: 0; }
 .border { border-width: 1px; }
 .border-2 { border-width: 2px; }
 .border-4 { border-width: 4px; }
@@ -396,11 +608,11 @@ textarea {
 .relative { position: relative; }
 .sticky { position: sticky; }
 
-.inset-0 { inset: 0px; }
-.top-0 { top: 0px; }
-.right-0 { right: 0px; }
-.bottom-0 { bottom: 0px; }
-.left-0 { left: 0px; }
+.inset-0 { inset: 0; }
+.top-0 { top: 0; }
+.right-0 { right: 0; }
+.bottom-0 { bottom: 0; }
+.left-0 { left: 0; }
 
 /* Size Utilities */
 .w-auto { width: auto; }
@@ -462,6 +674,7 @@ textarea {
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border-width: 0;
 }
@@ -474,9 +687,29 @@ textarea {
   margin: 0;
   overflow: visible;
   clip: auto;
+  clip-path: none;
   white-space: normal;
 }
 
+/* Z-Index Utilities */
+.z-auto { z-index: auto; }
+.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-100 { z-index: 100; }
+.z-200 { z-index: 200; }
+.z-300 { z-index: 300; }
+.z-400 { z-index: 400; }
+.z-500 { z-index: 500; }
+.z-600 { z-index: 600; }
+.z-700 { z-index: 700; }
+.z-800 { z-index: 800; }
+.z-900 { z-index: 900; }
+.z-1000 { z-index: 1000; }
+
 /* ====== QUANTUM CSS ENHANCEMENTS ====== */
 
 /* Utility for Quick Prototyping */
@@ -550,17 +783,8 @@ textarea {
 
 
 ::-webkit-scrollbar-thumb { 
-
-
-
   background: linear-gradient(135deg, var(--color-starlight-peach) 0%, var(--color-starlight-blue) 100%); 
-
-
-
   border-radius: 10px;
-
-
-
   border: 2px solid var(--color-starlight-deep);
 
 
@@ -569,24 +793,44 @@ textarea {
 
 
 
-body.light-mode,
+html[data-theme="light"],
+body.light-mode {
+  color-scheme: light;
 
-html.light-mode {
+  --bg-primary: var(--light-bg);
+  --text-primary: var(--light-text);
+  --text-secondary: var(--light-text-muted);
+  --text-muted: var(--light-text-muted);
 
   scrollbar-color: var(--color-starlight-blue) transparent;
+}
 
+html[data-theme="dark"],
+body.dark-mode {
+  color-scheme: dark;
+
+  --bg-primary: var(--color-starlight-deep);
+  --text-primary: #f1f5f9;
 }
 
+/* Force theme colors on body to override template-specific hardcoded styles */
+html[data-theme="light"] body,
+body.light-mode {
+  background: var(--light-bg) !important;
+  color: var(--light-text);
+}
 
+html[data-theme="dark"] body,
+body.dark-mode {
+  background: var(--color-starlight-deep) !important;
+  color: #f1f5f9;
+}
 
-body.light-mode::-webkit-scrollbar-thumb,
 
-body.light-mode ::-webkit-scrollbar-thumb { 
 
+html[data-theme="light"] ::-webkit-scrollbar-thumb { 
   background: linear-gradient(135deg, var(--color-starlight-peach) 40%, var(--color-starlight-blue) 100%);
-
   border-color: var(--light-bg); 
-
 }
 
 
@@ -596,17 +840,8 @@ body.light-mode ::-webkit-scrollbar-thumb {
 
 
 :focus, :focus-visible {
-
-
-
   outline: none;
-
-
-
   box-shadow: 0 0 0 2px var(--color-starlight-deep), 0 0 0 4px var(--color-starlight-blue);
-
-
-
   transition: box-shadow var(--transition-fast);
 
 
@@ -619,14 +854,8 @@ body.light-mode ::-webkit-scrollbar-thumb {
 
 
 
-body.light-mode :focus, body.light-mode :focus-visible {
-
-
-
-  box-shadow: 0 0 0 2px var(--light-bg), 0 0 0 4px rgba(59, 130, 246, 0.4);
-
-
-
+html[data-theme="light"] :focus, html[data-theme="light"] :focus-visible {
+  box-shadow: 0 0 0 2px var(--light-bg), 0 0 0 4px rgb(59 130 246 / 40%);
 }
 
 
@@ -636,25 +865,10 @@ body.light-mode :focus, body.light-mode :focus-visible {
 
 
 body {
-
-
-
   margin: 0;
-
-
-
   min-height: 100vh;
-
-
-
-  background-color: var(--color-starlight-deep);
-
-
-
+  background-color: var(--bg-primary);
   color: var(--text-primary);
-
-
-
   transition: background-color var(--transition-slow), color var(--transition-slow);
 
 
@@ -667,16 +881,6 @@ body {
 
 
 
-body.light-mode,
-html.light-mode {
-  color-scheme: light;
-  background-color: var(--light-bg);
-  color: var(--light-text);
-  --text-primary: var(--light-text);
-  --text-secondary: var(--light-text-muted);
-  --text-muted: var(--light-text-muted);
-}
-
 /* Tactile Active State for all interactive elements */
 button:active, 
 input:active, 
@@ -690,6 +894,7 @@ input:active,
  */
 
 /* Modern Responsive Breakpoints */
+
 /* Using logical properties and container queries */
 
 @custom-media --sm (min-width: 640px);
@@ -1011,7 +1216,7 @@ input:active,
 }
 
 /* High DPI Display Utilities */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .retina\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
   .retina\:border { border-width: 0.5px; }
 }
@@ -1025,7 +1230,7 @@ input:active,
 
 /* Dark Mode Utilities */
 @media (prefers-color-scheme: dark) {
-  .dark\:text-white { color: #ffffff; }
+  .dark\:text-white { color: #fff; }
   .dark\:text-gray-200 { color: #e5e7eb; }
   .dark\:text-gray-300 { color: #d1d5db; }
   .dark\:bg-gray-900 { background-color: #111827; }
@@ -1037,10 +1242,10 @@ input:active,
 
 /* Light Mode Utilities */
 @media (prefers-color-scheme: light) {
-  .light\:text-black { color: #000000; }
+  .light\:text-black { color: #000; }
   .light\:text-gray-800 { color: #1f2937; }
   .light\:text-gray-700 { color: #374151; }
-  .light\:bg-white { background-color: #ffffff; }
+  .light\:bg-white { background-color: #fff; }
   .light\:bg-gray-50 { background-color: #f9fafb; }
   .light\:bg-gray-100 { background-color: #f3f4f6; }
   .light\:border-gray-300 { border-color: #d1d5db; }
@@ -1054,8 +1259,8 @@ input:active,
 /* Hover State Utilities */
 .hover\:text-primary:hover { color: var(--color-primary); }
 .hover\:text-secondary:hover { color: var(--color-secondary); }
-.hover\:text-white:hover { color: #ffffff; }
-.hover\:text-black:hover { color: #000000; }
+.hover\:text-white:hover { color: #fff; }
+.hover\:text-black:hover { color: #000; }
 
 .hover\:bg-primary:hover { background-color: var(--color-primary); }
 .hover\:bg-secondary:hover { background-color: var(--color-secondary); }
@@ -1107,7 +1312,7 @@ input:active,
 
 /* Group Hover Utilities */
 .group:hover .group-hover\:text-primary { color: var(--color-primary); }
-.group:hover .group-hover\:text-white { color: #ffffff; }
+.group:hover .group-hover\:text-white { color: #fff; }
 
 .group:hover .group-hover\:bg-primary { background-color: var(--color-primary); }
 .group:hover .group-hover\:bg-secondary { background-color: var(--color-secondary); }
@@ -1150,21 +1355,22 @@ input:active,
 }
 
 .btn-secondary {
-  background-color: rgba(255, 255, 255, 0.05);
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: rgb(255 255 255 / 8%);
+  color: #ffffff !important;
+  border: 1px solid rgb(255 255 255 / 15%);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
 }
 
 .btn-secondary:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgb(255 255 255 / 10%);
 }
 
-body.light-mode .btn-secondary {
-  background-color: rgba(0, 0, 0, 0.03);
-  color: #1e293b;
-  border-color: rgba(0, 0, 0, 0.1);
+body.light-mode .btn-secondary,
+html[data-theme="light"] .btn-secondary {
+  background-color: rgb(0 0 0 / 3%);
+  color: #1e293b !important;
+  border-color: rgb(0 0 0 / 10%);
 }
 
 .btn-outline {
@@ -1333,64 +1539,64 @@ body.light-mode .input:disabled {
 }
 
 .badge-primary {
-  background-color: rgba(0, 212, 255, 0.15);
+  background-color: rgb(0 212 255 / 15%);
   color: #00d4ff;
-  border-color: rgba(0, 212, 255, 0.3);
+  border-color: rgb(0 212 255 / 30%);
 }
 
 .badge-secondary {
-  background-color: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.8);
-  border-color: rgba(255, 255, 255, 0.1);
+  background-color: rgb(255 255 255 / 5%);
+  color: rgb(255 255 255 / 80%);
+  border-color: rgb(255 255 255 / 10%);
 }
 
 .badge-success {
-  background-color: rgba(16, 185, 129, 0.15);
+  background-color: rgb(16 185 129 / 15%);
   color: #10b981;
-  border-color: rgba(16, 185, 129, 0.3);
+  border-color: rgb(16 185 129 / 30%);
 }
 
 .badge-warning {
-  background-color: rgba(245, 158, 11, 0.15);
+  background-color: rgb(245 158 11 / 15%);
   color: #f59e0b;
-  border-color: rgba(245, 158, 11, 0.3);
+  border-color: rgb(245 158 11 / 30%);
 }
 
 .badge-error {
-  background-color: rgba(239, 68, 68, 0.15);
+  background-color: rgb(239 68 68 / 15%);
   color: #ef4444;
-  border-color: rgba(239, 68, 68, 0.3);
+  border-color: rgb(239 68 68 / 30%);
 }
 
 /* Light Mode Overrides for Badges */
-body.light-mode .badge-primary {
-  background-color: rgba(59, 130, 246, 0.1);
+html[data-theme="light"] .badge-primary {
+  background-color: rgb(59 130 246 / 10%);
   color: #2563eb;
-  border-color: rgba(59, 130, 246, 0.2);
+  border-color: rgb(59 130 246 / 20%);
 }
 
-body.light-mode .badge-secondary {
-  background-color: rgba(0, 0, 0, 0.05);
+html[data-theme="light"] .badge-secondary {
+  background-color: rgb(0 0 0 / 5%);
   color: #475569;
-  border-color: rgba(0, 0, 0, 0.1);
+  border-color: rgb(0 0 0 / 10%);
 }
 
-body.light-mode .badge-success {
-  background-color: rgba(16, 185, 129, 0.1);
+html[data-theme="light"] .badge-success {
+  background-color: rgb(16 185 129 / 10%);
   color: #059669;
-  border-color: rgba(16, 185, 129, 0.2);
+  border-color: rgb(16 185 129 / 20%);
 }
 
-body.light-mode .badge-warning {
-  background-color: rgba(245, 158, 11, 0.1);
+html[data-theme="light"] .badge-warning {
+  background-color: rgb(245 158 11 / 10%);
   color: #d97706;
-  border-color: rgba(245, 158, 11, 0.2);
+  border-color: rgb(245 158 11 / 20%);
 }
 
-body.light-mode .badge-error {
-  background-color: rgba(239, 68, 68, 0.1);
+html[data-theme="light"] .badge-error {
+  background-color: rgb(239 68 68 / 10%);
   color: #dc2626;
-  border-color: rgba(239, 68, 68, 0.2);
+  border-color: rgb(239 68 68 / 20%);
 }
 
 /* Alert Component */
@@ -1428,7 +1634,7 @@ body.light-mode .badge-error {
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(0 0 0 / 50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1455,7 +1661,7 @@ body.light-mode .modal-content {
   display: inline-block;
   width: 1.5rem;
   height: 1.5rem;
-  border: 2px solid rgba(255, 255, 255, 0.1);
+  border: 2px solid rgb(255 255 255 / 10%);
   border-top-color: var(--color-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -1467,7 +1673,7 @@ body.light-mode .modal-content {
 
 /* Skeleton Loading */
 .skeleton {
-  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
+  background: linear-gradient(90deg, rgb(255 255 255 / 5%) 25%, rgb(255 255 255 / 10%) 50%, rgb(255 255 255 / 5%) 75%);
   background-size: 200% 100%;
   animation: shimmer 2s infinite;
   border-radius: var(--radius-md);
@@ -1634,7 +1840,7 @@ body.light-mode .accordion-content {
 /* Tab Component */
 .tab-list {
   display: flex;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
 }
 
 .tab-button {
@@ -1649,7 +1855,7 @@ body.light-mode .accordion-content {
 }
 
 .tab-button:hover {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: rgb(255 255 255 / 5%);
   color: var(--text-primary);
 }
 
@@ -1726,7 +1932,7 @@ body.light-mode .tab-button.active {
   border-radius: var(--radius-full);
 }
 
-.toggle-slider:before {
+.toggle-slider::before {
   position: absolute;
   content: "";
   height: 1.25rem;
@@ -1742,7 +1948,7 @@ body.light-mode .tab-button.active {
   background-color: var(--color-primary);
 }
 
-.toggle-input:checked + .toggle-slider:before {
+.toggle-input:checked + .toggle-slider::before {
   transform: translateX(1.5rem);
 }
 
@@ -1804,7 +2010,7 @@ body.light-mode .tab-button.active {
 }
 
 .table-wrapper::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgb(255 255 255 / 5%);
   border-radius: 4px;
 }
 
@@ -1814,7 +2020,7 @@ body.light-mode .tab-button.active {
 }
 
 body.light-mode .table-wrapper::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgb(0 0 0 / 5%);
 }
 
 .table {
@@ -1828,19 +2034,19 @@ body.light-mode .table-wrapper::-webkit-scrollbar-track {
 .table th {
   padding: var(--space-3) var(--space-4);
   font-weight: 600;
-  background-color: rgba(255, 255, 255, 0.05);
-  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+  background-color: rgb(255 255 255 / 5%);
+  border-bottom: 2px solid rgb(255 255 255 / 10%);
   color: var(--text-primary);
 }
 
 .table td {
   padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
   color: var(--text-secondary);
 }
 
 .table tbody tr:hover {
-  background-color: rgba(255, 255, 255, 0.03);
+  background-color: rgb(255 255 255 / 3%);
 }
 
 /* Light Mode Table Styles */
@@ -1876,8 +2082,8 @@ body.light-mode .table tbody tr:hover {
 }
 
 @keyframes cosmic-pulse {
-  0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.2), 0 0 40px rgba(0, 212, 255, 0.1); }
-  50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.5), 0 0 80px rgba(0, 212, 255, 0.2); }
+  0%, 100% { box-shadow: 0 0 20px rgb(0 212 255 / 20%), 0 0 40px rgb(0 212 255 / 10%); }
+  50% { box-shadow: 0 0 40px rgb(0 212 255 / 50%), 0 0 80px rgb(0 212 255 / 20%); }
 }
 
 @keyframes star-twinkle {
@@ -2004,6 +2210,7 @@ body.light-mode .table tbody tr:hover {
     transform: translateY(-25%);
     animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
   }
+
   50% {
     transform: none;
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
@@ -2022,18 +2229,18 @@ a {
 
 a:hover {
   color: var(--color-starlight-peach);
-  text-shadow: 0 0 8px rgba(255, 179, 138, 0.4);
+  text-shadow: 0 0 8px rgb(255 179 138 / 40%);
 }
 
 a:active {
   transform: scale(0.98);
 }
 
-body.light-mode a {
+html[data-theme="light"] a {
   color: var(--color-starlight-blue);
 }
 
-body.light-mode a:hover {
+html[data-theme="light"] a:hover {
   color: var(--color-starlight-peach);
 }
 
@@ -2050,17 +2257,17 @@ body.light-mode a:hover {
 }
 
 .starlight-card:hover {
-  border-color: rgba(0, 212, 255, 0.4);
+  border-color: rgb(0 212 255 / 40%);
   transform: translateY(-4px);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 212, 255, 0.1);
-  background-color: rgba(255, 255, 255, 0.04);
+  box-shadow: 0 12px 40px rgb(0 0 0 / 40%), 0 0 20px rgb(0 212 255 / 10%);
+  background-color: rgb(255 255 255 / 4%);
 }
 
-body.light-mode .starlight-card {
+html[data-theme="light"] .starlight-card {
   background: var(--light-card-bg);
   border-color: var(--light-card-border);
   color: #334155;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
+  box-shadow: 0 4px 20px rgb(0 0 0 / 2%);
 }
 
 /* 2. Checkboxes & Radio Buttons */
@@ -2068,8 +2275,8 @@ body.light-mode .starlight-card {
   appearance: none;
   width: 1.25rem;
   height: 1.25rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgb(255 255 255 / 5%);
+  border: 1px solid rgb(255 255 255 / 20%);
   border-radius: 0.375rem;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -2081,10 +2288,10 @@ body.light-mode .starlight-card {
 
 .radio-starlight { border-radius: 50%; }
 
-body.light-mode .checkbox-starlight,
-body.light-mode .radio-starlight {
-  border-color: rgba(0, 0, 0, 0.2);
-  background: rgba(0, 0, 0, 0.05);
+html[data-theme="light"] .checkbox-starlight,
+html[data-theme="light"] .radio-starlight {
+  border-color: rgb(0 0 0 / 20%);
+  background: rgb(0 0 0 / 5%);
 }
 
 .checkbox-starlight:checked, .radio-starlight:checked {
@@ -2118,9 +2325,9 @@ body.light-mode .radio-starlight {
   left: 50%;
   transform: translateX(-50%) translateY(10px);
   padding: 0.5rem 0.75rem;
-  background-color: rgba(10, 10, 30, 0.98);
+  background-color: rgb(10 10 30 / 98%);
   backdrop-filter: blur(12px);
-  border: 1px solid rgba(0, 212, 255, 0.3);
+  border: 1px solid rgb(0 212 255 / 30%);
   border-radius: 0.5rem;
   color: #f1f5f9;
   font-size: 0.75rem;
@@ -2129,7 +2336,7 @@ body.light-mode .radio-starlight {
   opacity: 0;
   transition: all 0.2s ease;
   z-index: 800;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 15px rgb(0 0 0 / 40%);
 }
 
 .has-tooltip:hover .tooltip {
@@ -2154,7 +2361,7 @@ body.light-mode .radio-starlight {
   animation: star-twinkle var(--duration, 3s) infinite ease-in-out;
 }
 
-body.light-mode .star {
+html[data-theme="light"] .star {
   background: var(--color-starlight-blue);
   opacity: 0.15;
 }
@@ -2163,7 +2370,7 @@ body.light-mode .star {
 .dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.6);
+  background: rgb(0 0 0 / 60%);
   backdrop-filter: blur(12px);
   display: flex;
   align-items: center;
@@ -2172,24 +2379,24 @@ body.light-mode .star {
 }
 
 .dialog-content {
-  background-color: rgba(10, 10, 20, 0.98);
+  background-color: rgb(10 10 20 / 98%);
   backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgb(255 255 255 / 10%);
   border-radius: 1.5rem;
   padding: 2.5rem;
   max-width: 90%;
   width: 600px;
   max-height: 85vh;
   overflow-y: auto;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%);
   position: relative;
 }
 
 .starlight-dialog {
-  background-color: rgba(10, 10, 20, 0.98);
+  background-color: rgb(10 10 20 / 98%);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgb(255 255 255 / 10%);
   border-radius: 1.5rem;
   padding: 3rem;
   width: 100%;
@@ -2198,7 +2405,7 @@ body.light-mode .star {
   overflow-y: auto;
   margin: auto;
   position: relative;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%);
 }
 
 /* Custom scrollbar for dialogs */
@@ -2209,7 +2416,7 @@ body.light-mode .star {
 
 .dialog-content::-webkit-scrollbar-track,
 .starlight-dialog::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgb(255 255 255 / 5%);
   border-radius: 4px;
 }
 
@@ -2219,16 +2426,16 @@ body.light-mode .star {
   border-radius: 4px;
 }
 
-body.light-mode .dialog-content::-webkit-scrollbar-track,
-body.light-mode .starlight-dialog::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
+html[data-theme="light"] .dialog-content::-webkit-scrollbar-track,
+html[data-theme="light"] .starlight-dialog::-webkit-scrollbar-track {
+  background: rgb(0 0 0 / 5%);
 }
 
-body.light-mode .starlight-dialog {
-  background-color: rgba(255, 255, 255, 0.98);
-  border-color: rgba(0, 0, 0, 0.1);
+html[data-theme="light"] .starlight-dialog {
+  background-color: rgb(255 255 255 / 98%);
+  border-color: rgb(0 0 0 / 10%);
   color: #1e293b;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 15%);
 }
 
 .dialog-close {
@@ -2238,8 +2445,8 @@ body.light-mode .starlight-dialog {
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgb(255 255 255 / 5%);
+  border: 1px solid rgb(255 255 255 / 10%);
   color: white;
   display: flex;
   align-items: center;
@@ -2249,14 +2456,14 @@ body.light-mode .starlight-dialog {
   padding: 0;
 }
 
-body.light-mode .dialog-close {
-  background: rgba(0, 0, 0, 0.05);
-  border-color: rgba(0, 0, 0, 0.1);
+html[data-theme="light"] .dialog-close {
+  background: rgb(0 0 0 / 5%);
+  border-color: rgb(0 0 0 / 10%);
   color: #1e293b;
 }
 
 .dialog-close:hover {
-  background: rgba(255, 255, 255, 0.15);
+  background: rgb(255 255 255 / 15%);
   border-color: var(--color-starlight-blue);
   transform: rotate(90deg);
 }
@@ -2268,15 +2475,15 @@ body.light-mode .dialog-close {
   gap: 1rem;
 }
 
-body.light-mode .dialog-overlay {
-  background: rgba(255, 255, 255, 0.4);
+html[data-theme="light"] .dialog-overlay {
+  background: rgb(255 255 255 / 40%);
 }
 
-body.light-mode .dialog-content {
-  background-color: rgba(255, 255, 255, 0.98);
-  border-color: rgba(0, 0, 0, 0.1);
+html[data-theme="light"] .dialog-content {
+  background-color: rgb(255 255 255 / 98%);
+  border-color: rgb(0 0 0 / 10%);
   color: #1e293b;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 15%);
 }
 
 /* 6. Dropdown Menu */
@@ -2286,13 +2493,13 @@ body.light-mode .dialog-content {
   left: 0;
   background-color: var(--color-starlight-deep);
   backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgb(255 255 255 / 10%);
   border-radius: 0.75rem;
   padding: 0.5rem;
   margin-top: 0.5rem;
   min-width: 200px;
   z-index: 600;
-  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+  box-shadow: 0 20px 40px rgb(0 0 0 / 40%);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
@@ -2313,7 +2520,7 @@ body.light-mode .dialog-content {
   width: 100%;
   padding: 0.625rem 1rem;
   border-radius: 0.5rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgb(255 255 255 / 70%);
   transition: all 0.2s ease;
   text-align: left;
   background: transparent;
@@ -2326,17 +2533,17 @@ body.light-mode .dialog-content {
   color: black;
 }
 
-body.light-mode .dropdown-menu {
-  background-color: rgba(255, 255, 255, 0.99);
+html[data-theme="light"] .dropdown-menu {
+  background-color: rgb(255 255 255 / 99%);
   border-color: #cbd5e1;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
 }
 
-body.light-mode .dropdown-item {
+html[data-theme="light"] .dropdown-item {
   color: #475569;
 }
 
-body.light-mode .dropdown-item:hover {
+html[data-theme="light"] .dropdown-item:hover {
   background-color: var(--color-starlight-blue);
   color: black;
 }
@@ -2345,8 +2552,8 @@ body.light-mode .dropdown-item:hover {
 .input-starlight, .textarea-starlight {
   height: auto;
   padding: 1rem;
-  background-color: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.15);
+  background-color: rgb(255 255 255 / 4%);
+  border: 1px solid rgb(255 255 255 / 15%);
   border-radius: 0.75rem;
   color: inherit;
   width: 100%;
@@ -2357,46 +2564,46 @@ textarea.input-starlight, .textarea-starlight {
   display: block;
 }
 
-body.light-mode .input-starlight, 
-body.light-mode .textarea-starlight {
-  background-color: #ffffff;
+html[data-theme="light"] .input-starlight, 
+html[data-theme="light"] .textarea-starlight {
+  background-color: #fff;
   border-color: #cbd5e1;
 }
 
-body.light-mode .glass {
-  background-color: rgba(0, 0, 0, 0.02);
-  border-color: rgba(0, 0, 0, 0.05);
+html[data-theme="light"] .glass {
+  background-color: rgb(0 0 0 / 2%);
+  border-color: rgb(0 0 0 / 5%);
 }
 
 /* 8. Input Focus States */
 .input-starlight:focus, .textarea-starlight:focus {
   outline: none;
   border-color: var(--color-starlight-blue);
-  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1), 0 0 20px rgba(0, 212, 255, 0.1);
-  background-color: rgba(255, 255, 255, 0.06);
+  box-shadow: 0 0 0 4px rgb(0 212 255 / 10%), 0 0 20px rgb(0 212 255 / 10%);
+  background-color: rgb(255 255 255 / 6%);
 }
 
-body.light-mode .input-starlight:focus,
-body.light-mode .textarea-starlight:focus {
+html[data-theme="light"] .input-starlight:focus,
+html[data-theme="light"] .textarea-starlight:focus {
   border-color: var(--color-starlight-blue);
-  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
-  background-color: #ffffff;
+  box-shadow: 0 0 0 4px rgb(0 212 255 / 10%), 0 4px 12px rgb(0 0 0 / 5%);
+  background-color: #fff;
 }
 
 /* 9. Code Interface Window */
 .code-window {
-  background: rgba(0, 0, 0, 0.4);
+  background: rgb(0 0 0 / 40%);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgb(255 255 255 / 10%);
   border-radius: var(--radius-xl);
   overflow: hidden;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%);
 }
 
 .code-window-header {
-  background: rgba(255, 255, 255, 0.05);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgb(255 255 255 / 5%);
+  border-bottom: 1px solid rgb(255 255 255 / 5%);
   padding: 1rem 1.5rem;
   display: flex;
   align-items: center;
@@ -2420,30 +2627,30 @@ body.light-mode .textarea-starlight:focus {
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.15em;
-  color: rgba(255, 255, 255, 0.4);
+  color: rgb(255 255 255 / 40%);
 }
 
-body.light-mode .code-window {
+html[data-theme="light"] .code-window {
   background: #f8fafc;
   border-color: #e2e8f0;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 5%);
 }
 
-body.light-mode .code-window-header {
+html[data-theme="light"] .code-window-header {
   background: #f1f5f9;
   border-color: #e2e8f0;
 }
 
-body.light-mode .code-window-title {
+html[data-theme="light"] .code-window-title {
   color: #94a3b8;
 }
 
 /* 10. Starlight Accordion */
 .accordion-starlight.accordion-item {
-  background: rgba(255, 255, 255, 0.02);
+  background: rgb(255 255 255 / 2%);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid rgb(255 255 255 / 8%);
   border-radius: var(--radius-xl);
   margin-bottom: var(--space-4);
   transition: all var(--transition-base);
@@ -2451,15 +2658,15 @@ body.light-mode .code-window-title {
 }
 
 .accordion-starlight.accordion-item:hover {
-  border-color: rgba(0, 212, 255, 0.3);
-  background: rgba(255, 255, 255, 0.04);
-  box-shadow: 0 0 20px rgba(0, 212, 255, 0.05);
+  border-color: rgb(0 212 255 / 30%);
+  background: rgb(255 255 255 / 4%);
+  box-shadow: 0 0 20px rgb(0 212 255 / 5%);
 }
 
 .accordion-starlight.accordion-item.active {
   border-color: var(--color-starlight-blue);
-  background: rgba(0, 212, 255, 0.03);
-  box-shadow: 0 0 30px rgba(0, 212, 255, 0.1), inset 0 0 20px rgba(0, 212, 255, 0.05);
+  background: rgb(0 212 255 / 3%);
+  box-shadow: 0 0 30px rgb(0 212 255 / 10%), inset 0 0 20px rgb(0 212 255 / 5%);
 }
 
 .accordion-starlight .accordion-header {
@@ -2472,13 +2679,13 @@ body.light-mode .code-window-title {
 }
 
 .accordion-starlight.active .accordion-header {
-  background: linear-gradient(to right, rgba(255, 179, 138, 0.15), rgba(0, 212, 255, 0.15)) !important;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+  background: linear-gradient(to right, rgb(255 179 138 / 15%), rgb(0 212 255 / 15%)) !important;
+  border-bottom: 1px solid rgb(0 212 255 / 20%);
 }
 
 .accordion-starlight .accordion-content {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)) !important;
-  color: rgba(255, 255, 255, 0.6) !important;
+  background: linear-gradient(to bottom, rgb(0 0 0 / 30%), rgb(0 0 0 / 10%)) !important;
+  color: rgb(255 255 255 / 60%) !important;
   font-size: 1rem;
   line-height: 1.8;
   padding: 0;
@@ -2490,24 +2697,24 @@ body.light-mode .code-window-title {
 
 .accordion-starlight .accordion-icon {
   color: var(--color-starlight-blue);
-  filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
+  filter: drop-shadow(0 0 5px rgb(0 212 255 / 50%));
 }
 
-body.light-mode .accordion-starlight.accordion-item {
+html[data-theme="light"] .accordion-starlight.accordion-item {
   background: white;
   border-color: #e2e8f0;
 }
 
-body.light-mode .accordion-starlight.accordion-item.active {
+html[data-theme="light"] .accordion-starlight.accordion-item.active {
   border-color: var(--color-starlight-blue);
   background: #f8fafc;
 }
 
-body.light-mode .accordion-starlight .accordion-header {
+html[data-theme="light"] .accordion-starlight .accordion-header {
   color: #1e293b;
 }
 
-body.light-mode .accordion-starlight .accordion-content {
+html[data-theme="light"] .accordion-starlight .accordion-content {
   background: #f1f5f9 !important;
   color: #475569 !important;
 }
@@ -2536,7 +2743,7 @@ body.light-mode .accordion-starlight .accordion-content {
   z-index: 10;
 }
 
-body.light-mode .search-icon {
+html[data-theme="light"] .search-icon {
   color: #64748b;
 }
 
@@ -2577,7 +2784,7 @@ body.light-mode .search-icon {
 .gallery-overlay {
   position: absolute;
   inset: 0;
-  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+  background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent);
   display: flex;
   align-items: flex-end;
   padding: 1rem;
@@ -2611,7 +2818,7 @@ body.light-mode .search-icon {
   -webkit-text-fill-color: transparent;
 }
 
-body.light-mode .stat-value {
+html[data-theme="light"] .stat-value {
   background: linear-gradient(135deg, #1e293b 0%, var(--color-starlight-blue) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -2636,10 +2843,10 @@ body.light-mode .stat-value {
 
 /* 14. Hamburger Menu Glass */
 .nav-glass {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgb(255 255 255 / 5%);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
   display: flex;
   flex-direction: column;
   position: sticky;
@@ -2648,10 +2855,10 @@ body.light-mode .stat-value {
   padding: 0;
 }
 
-body.light-mode .nav-glass {
-  background: rgba(255, 255, 255, 0.95);
-  border-bottom-color: rgba(0, 0, 0, 0.08);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+html[data-theme="light"] .nav-glass {
+  background: rgb(255 255 255 / 95%);
+  border-bottom-color: rgb(0 0 0 / 8%);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 3%);
 }
 
 .nav-desktop {
@@ -2675,7 +2882,7 @@ body.light-mode .nav-glass {
 .nav-link {
   font-size: 0.875rem;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgb(255 255 255 / 70%);
   transition: all 0.3s;
   position: relative;
   padding: 0.5rem 0;
@@ -2695,7 +2902,7 @@ body.light-mode .nav-glass {
 }
 
 .nav-list.vertical .nav-link:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgb(255 255 255 / 5%);
   color: var(--color-starlight-blue);
 }
 
@@ -2717,11 +2924,11 @@ body.light-mode .nav-glass {
 }
 
 
-body.light-mode .nav-link {
+html[data-theme="light"] .nav-link {
   color: #475569;
 }
 
-body.light-mode .nav-link:hover {
+html[data-theme="light"] .nav-link:hover {
   color: #1e293b;
 }
 
@@ -2734,26 +2941,26 @@ body.light-mode .nav-link:hover {
   align-items: center;
   gap: 0.4rem;
   cursor: pointer;
-  background: rgba(255,255,255,0.05);
-  border: 1px solid rgba(255,255,255,0.1);
+  background: rgb(255 255 255 / 5%);
+  border: 1px solid rgb(255 255 255 / 10%);
   border-radius: 0.5rem;
   padding: 0.5rem;
   transition: all 0.3s;
   position: relative;
 }
 
-body.light-mode .hamburger {
-  background: rgba(0,0,0,0.02);
-  border-color: rgba(0,0,0,0.1);
+html[data-theme="light"] .hamburger {
+  background: rgb(0 0 0 / 2%);
+  border-color: rgb(0 0 0 / 10%);
 }
 
 .hamburger:hover {
-  background: rgba(255,255,255,0.1);
+  background: rgb(255 255 255 / 10%);
   border-color: var(--color-starlight-blue);
 }
 
-body.light-mode .hamburger:hover {
-  background: rgba(0,0,0,0.1);
+html[data-theme="light"] .hamburger:hover {
+  background: rgb(0 0 0 / 10%);
 }
 
 .hamburger span {
@@ -2765,7 +2972,7 @@ body.light-mode .hamburger:hover {
   transform-origin: center;
 }
 
-body.light-mode .hamburger span {
+html[data-theme="light"] .hamburger span {
   background: #1e293b;
 }
 
@@ -2776,10 +2983,10 @@ body.light-mode .hamburger span {
 
 .nav-menu-mobile {
   width: 100%;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgb(0 0 0 / 20%);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  border-top: 1px solid rgb(255 255 255 / 5%);
   padding: 0;
   max-height: 0;
   overflow: hidden;
@@ -2794,10 +3001,10 @@ body.light-mode .hamburger span {
   opacity: 1;
 }
 
-body.light-mode .nav-menu-mobile {
-  background: #ffffff;
-  border-top-color: rgba(0, 0, 0, 0.08);
-  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
+html[data-theme="light"] .nav-menu-mobile {
+  background: #fff;
+  border-top-color: rgb(0 0 0 / 8%);
+  box-shadow: 0 15px 30px rgb(0 0 0 / 5%);
 }
 
 /* Vertical Accordion Dropdowns */
@@ -2827,11 +3034,11 @@ body.light-mode .nav-menu-mobile {
 .nav-list.vertical .dropdown-item {
   padding: 0.5rem 1rem;
   font-size: 0.825rem;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 1px solid rgb(255 255 255 / 10%);
   border-radius: 0;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .nav-desktop {
     display: flex;
   }
@@ -2856,15 +3063,15 @@ body.light-mode .nav-menu-mobile {
   width: 280px !important;
   min-width: 280px !important;
   border-bottom: none;
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  border-right: 1px solid rgb(255 255 255 / 10%);
   padding: 2.5rem 1.5rem;
   align-items: flex-start;
   justify-content: flex-start;
 }
 
-body.light-mode .starlight-nav.vertical {
-  background: rgba(255, 255, 255, 0.98);
-  border-right-color: rgba(0, 0, 0, 0.08);
+html[data-theme="light"] .starlight-nav.vertical {
+  background: rgb(255 255 255 / 98%);
+  border-right-color: rgb(0 0 0 / 8%);
 }
 
 /* 15. More Form Controls */
@@ -2877,7 +3084,7 @@ body.light-mode .starlight-nav.vertical {
   padding-right: 3rem !important;
 }
 
-body.light-mode .select-starlight {
+html[data-theme="light"] .select-starlight {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231e293b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
 }
 
@@ -2885,13 +3092,13 @@ body.light-mode .select-starlight {
   appearance: none;
   width: 100%;
   height: 6px;
-  background: rgba(255,255,255,0.1);
+  background: rgb(255 255 255 / 10%);
   border-radius: 3px;
   outline: none;
 }
 
-body.light-mode .range-starlight {
-  background: rgba(0,0,0,0.1);
+html[data-theme="light"] .range-starlight {
+  background: rgb(0 0 0 / 10%);
 }
 
 .range-starlight::-webkit-slider-thumb {
@@ -2915,78 +3122,78 @@ body.light-mode .range-starlight {
   height: 1.75rem;
 }
 
-.toggle-starlight .toggle-slider:before {
+.toggle-starlight .toggle-slider::before {
   height: 1.25rem;
   width: 1.25rem;
   top: 0.25rem;
   left: 0.25rem;
 }
 
-.toggle-starlight input:checked + .toggle-slider:before {
+.toggle-starlight input:checked + .toggle-slider::before {
   transform: translateX(1.75rem);
 }
 
 .toggle-starlight .toggle-slider {
-  background: rgba(255,255,255,0.1);
-  border: 1px solid rgba(255,255,255,0.1);
+  background: rgb(255 255 255 / 10%);
+  border: 1px solid rgb(255 255 255 / 10%);
 }
 
-body.light-mode .toggle-starlight .toggle-slider {
-  background: rgba(0,0,0,0.1);
-  border-color: rgba(0,0,0,0.15);
+html[data-theme="light"] .toggle-starlight .toggle-slider {
+  background: rgb(0 0 0 / 10%);
+  border-color: rgb(0 0 0 / 15%);
 }
 
-body.light-mode .bg-starlight,
-body.light-mode .bg-starlight:hover,
-body.light-mode .hover\:bg-starlight:hover,
-body.light-mode .btn-starlight,
-body.light-mode .btn-starlight:hover,
-body.light-mode .hover\:btn-starlight:hover,
-body.light-mode .btn-primary,
-body.light-mode .btn-primary:hover {
+html[data-theme="light"] .bg-starlight,
+html[data-theme="light"] .bg-starlight:hover,
+html[data-theme="light"] .hover\:bg-starlight:hover,
+html[data-theme="light"] .btn-starlight,
+html[data-theme="light"] .btn-starlight:hover,
+html[data-theme="light"] .hover\:btn-starlight:hover,
+html[data-theme="light"] .btn-primary,
+html[data-theme="light"] .btn-primary:hover {
   background: linear-gradient(135deg, #ffb38a 40%, #00d4ff 100%) !important;
 }
 
-body.light-mode .text-gradient-starlight {
+html[data-theme="light"] .text-gradient-starlight {
   background: linear-gradient(135deg, #ffb38a 40%, #00d4ff 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
 }
 
-body.light-mode .text-success { color: #059669; }
-body.light-mode .text-warning { color: #d97706; }
+html[data-theme="light"] .text-success { color: #059669; }
+html[data-theme="light"] .text-warning { color: #d97706; }
 
-body.light-mode .dialog-content .bg-black\/40 {
-  background-color: rgba(0, 0, 0, 0.05);
-  border-color: rgba(0, 0, 0, 0.1);
+html[data-theme="light"] .dialog-content .bg-black\/40 {
+  background-color: rgb(0 0 0 / 5%);
+  border-color: rgb(0 0 0 / 10%);
 }
 
 /* 18. Semantic Typography Utilities */
 .text-glow {
-  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.2);
+  text-shadow: 0 0 10px rgb(0 212 255 / 50%), 0 0 20px rgb(0 212 255 / 20%);
 }
 
 .text-glass {
-  color: rgba(255, 255, 255, 0.6);
+  color: rgb(255 255 255 / 60%);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }
 
-body.light-mode .text-glow {
-  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
+html[data-theme="light"] .text-glow {
+  text-shadow: 0 0 8px rgb(0 212 255 / 30%);
 }
 
-body.light-mode .text-glass {
-  color: rgba(0, 0, 0, 0.5);
+html[data-theme="light"] .text-glass {
+  color: rgb(0 0 0 / 50%);
 }
 
 /* 17. Skeleton Loading (Starlight Variant) */
 .starlight-loading {
   background: linear-gradient(
     90deg, 
-    rgba(255, 255, 255, 0.03) 25%, 
-    rgba(255, 255, 255, 0.08) 50%, 
-    rgba(255, 255, 255, 0.03) 75%
+    rgb(255 255 255 / 3%) 25%, 
+    rgb(255 255 255 / 8%) 50%, 
+    rgb(255 255 255 / 3%) 75%
   );
   background-size: 200% 100%;
   animation: starlight-shimmer 2s infinite linear;
@@ -2999,12 +3206,12 @@ body.light-mode .text-glass {
   100% { background-position: -200% 0; }
 }
 
-body.light-mode .starlight-loading {
+html[data-theme="light"] .starlight-loading {
   background: linear-gradient(
     90deg, 
-    rgba(0, 0, 0, 0.03) 25%, 
-    rgba(0, 0, 0, 0.06) 50%, 
-    rgba(0, 0, 0, 0.03) 75%
+    rgb(0 0 0 / 3%) 25%, 
+    rgb(0 0 0 / 6%) 50%, 
+    rgb(0 0 0 / 3%) 75%
   );
   background-size: 200% 100%;
 }
@@ -3016,43 +3223,43 @@ body.light-mode .starlight-loading {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.02);
+  background: rgb(255 255 255 / 2%);
   backdrop-filter: blur(10px);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgb(255 255 255 / 10%);
+  border: 1px solid rgb(255 255 255 / 5%);
   border-radius: 10px;
   transition: all 0.3s;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 212, 255, 0.3);
-  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
+  background: rgb(0 212 255 / 30%);
+  box-shadow: 0 0 10px rgb(0 212 255 / 20%);
 }
 
-body.light-mode ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.03);
+html[data-theme="light"] ::-webkit-scrollbar-track {
+  background: rgb(0 0 0 / 3%);
 }
 
-body.light-mode ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
-  border-color: rgba(0, 0, 0, 0.05);
+html[data-theme="light"] ::-webkit-scrollbar-thumb {
+  background: rgb(0 0 0 / 10%);
+  border-color: rgb(0 0 0 / 5%);
 }
 
-body.light-mode ::-webkit-scrollbar-thumb:hover {
+html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
   background: var(--color-starlight-blue);
 }
 
 /* Firefox Support */
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+  scrollbar-color: rgb(255 255 255 / 10%) transparent;
 }
 
-body.light-mode * {
-  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
+html[data-theme="light"] * {
+  scrollbar-color: rgb(0 0 0 / 10%) transparent;
 }
 
 @media (forced-colors: active) {
@@ -3085,29 +3292,29 @@ body.light-mode * {
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s ease;
-    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+    box-shadow: 0 0 20px rgb(0 212 255 / 30%);
     text-decoration: none;
   }
   
   .btn-starlight:hover {
     transform: translateY(-2px);
-    box-shadow: 0 5px 25px rgba(0, 212, 255, 0.4);
+    box-shadow: 0 5px 25px rgb(0 212 255 / 40%);
     filter: brightness(1.1);
   }
   
   .btn-starlight:active {
     transform: translateY(0) scale(0.95);
-    box-shadow: 0 2px 10px rgba(0, 212, 255, 0.2);
+    box-shadow: 0 2px 10px rgb(0 212 255 / 20%);
     filter: brightness(0.9);
   }
   
   .btn-starlight:focus-visible {
     outline: 2px solid white;
     outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.3);
+    box-shadow: 0 0 0 4px rgb(0 212 255 / 30%);
   }
   
-  body.light-mode .btn-starlight:focus-visible {
+  html[data-theme="light"] .btn-starlight:focus-visible {
     outline-color: var(--color-starlight-blue);
   }}
 
@@ -3119,7 +3326,7 @@ body.light-mode * {
 }
 
 .max-w-4xl {
-  max-width: 4xl;
+  max-width: 56rem;
 }
 
 .mx-auto {
@@ -3213,7 +3420,7 @@ body.light-mode * {
 }
 
 .max-w-sm {
-  max-width: sm;
+  max-width: 24rem;
 }
 
 .text-2xl {
@@ -3321,6 +3528,22 @@ body.light-mode * {
   margin-top: 1rem;
 }
 
+.btn-starlight {
+  background: linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%);
+  color: #000;
+  border: none;
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+  font-weight: 700;
+  transition: all 0.2s ease;
+  height: 3rem;
+  padding: 0 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -3370,7 +3593,7 @@ body.light-mode * {
 }
 
 .max-w-prose {
-  max-width: prose;
+  max-width: 65ch;
 }
 
 .mb-10 {
@@ -3558,6 +3781,10 @@ body.light-mode * {
   padding-bottom: 1.5rem;
 }
 
+.text-primary {
+  color: #3b82f6;
+}
+
 .text-blue-600 {
   color: #2563eb;
 }
@@ -3640,7 +3867,7 @@ body.light-mode * {
 }
 
 .max-w-2xl {
-  max-width: 2xl;
+  max-width: 42rem;
 }
 
 .gap-12 {
@@ -3748,7 +3975,7 @@ body.light-mode * {
 }
 
 .max-w-md {
-  max-width: md;
+  max-width: 28rem;
 }
 
 .space-y-3 > * + * {
@@ -3772,7 +3999,7 @@ body.light-mode * {
 }
 
 .max-w-6xl {
-  max-width: 6xl;
+  max-width: 72rem;
 }
 
 .mb-12 {
@@ -3860,22 +4087,6 @@ body.light-mode * {
   border-color: rgba(255, 255, 255, 0.2);
 }
 
-.btn-starlight {
-  background: linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%);
-  color: #000;
-  border: none;
-  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
-  font-weight: 700;
-  transition: all 0.2s ease;
-  height: 3rem;
-  padding: 0 1.5rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.5rem;
-  cursor: pointer;
-}
-
 .border-white\/5 {
   border-color: rgba(255, 255, 255, 0.05);
 }
@@ -3905,7 +4116,7 @@ body.light-mode .light\:bg-slate-300 {
   background-color: #cbd5e1;
 }
 
-.h-\[400px] {
+.h-\[400px\] {
   height: 400px;
 }
 
@@ -4052,7 +4263,7 @@ body.light-mode .light\:shadow-lg {
 }
 
 .max-w-3xl {
-  max-width: 3xl;
+  max-width: 48rem;
 }
 
 .gap-3 {
@@ -4099,12 +4310,12 @@ body.light-mode .light\:shadow-lg {
   padding-right: 2rem;
 }
 
-.py-2.5 {
-  padding-top: 2.5;
-  padding-bottom: 2.5;
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
 }
 
-.max-w-\[1200px] {
+.max-w-\[1200px\] {
   max-width: 1200px;
 }
 
@@ -4173,10 +4384,6 @@ body.light-mode .light\:shadow-lg {
   color: #00d4ff;
 }
 
-.text-primary {
-  color: #3b82f6;
-}
-
 .left-0 {
   left: 0px;
 }
@@ -4292,17 +4499,17 @@ body.light-mode .light\:shadow-lg {
   padding-right: 1rem;
 }
 
-.py-1.5 {
-  padding-top: 1.5;
-  padding-bottom: 1.5;
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 
-.rounded-\[2.5rem] {
+.rounded-\[2\.5rem\] {
   border-radius: 2.5rem;
 }
 
 .max-w-5xl {
-  max-width: 5xl;
+  max-width: 64rem;
 }
 
 .shadow-2xl {
@@ -4347,7 +4554,7 @@ body.light-mode .light\:shadow-lg {
 }
 
 .h-80 {
-  height: 80;
+  height: 20rem;
 }
 
 .group:hover .group-hover\:scale-110 {
@@ -4390,12 +4597,12 @@ body.light-mode .light\:shadow-lg {
   background-color: rgba(234, 88, 12, 0.2);
 }
 
-.rounded-\[3rem] {
+.rounded-\[3rem\] {
   border-radius: 3rem;
 }
 
 .max-w-xl {
-  max-width: xl;
+  max-width: 36rem;
 }
 
 .placeholder\:text-white\/20:placeholder {
@@ -4410,7 +4617,7 @@ body.light-mode .light\:shadow-lg {
   background-color: rgba(255, 255, 255, 0.8);
 }
 
-.max-w-\[1440px] {
+.max-w-\[1440px\] {
   max-width: 1440px;
 }
 
@@ -4439,7 +4646,7 @@ body.light-mode .light\:shadow-lg {
 }
 
 .min-w-56 {
-  min-width: 56;
+  min-width: 14rem;
 }
 
 .flex-shrink-0 {
@@ -4466,7 +4673,7 @@ body.light-mode .light\:shadow-lg {
   row-gap: 4rem;
 }
 
-.aspect-\[3\/4] {
+.aspect-\[3\/4\] {
   aspect-ratio: 3 / 4;
   width: 100%;
   height: auto;
@@ -4567,7 +4774,7 @@ body.light-mode .light\:shadow-lg {
   }
   
   .md\:w-80 {
-    width: 80;
+    width: 20rem;
   }
   
   .md\:grid-cols-4 {
@@ -4600,7 +4807,7 @@ body.light-mode .light\:shadow-lg {
   }
   
   .md\:w-96 {
-    width: 96;
+    width: 24rem;
   }
   
   .md\:col-span-1 {