lexgui 0.7.15 → 8.1.0

package/build/lexgui.css

@@ -1,47 +1,143 @@
-/* clean-css ignore:start */
+/* This is a generated file, do not modify (colors.css) */
+:root {
+  --black: #000000;
+  --white: #ffffff;
+  --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #0a0a0a;
+  --stone-50: #fafaf9; --stone-100: #f5f5f4; --stone-200: #e7e5e4; --stone-300: #d6d3d1; --stone-400: #a8a29e; --stone-500: #78716c; --stone-600: #57534e; --stone-700: #44403c; --stone-800: #292524; --stone-900: #1c1917; --stone-950: #0c0a09;
+  --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a; --zinc-600: #52525b; --zinc-700: #3f3f46; --zinc-800: #27272a; --zinc-900: #18181b; --zinc-950: #09090b;
+  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617;
+  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --gray-950: #030712;
+  --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-300: #fca5a5; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --red-800: #991b1b; --red-900: #7f1d1d; --red-950: #450a0a;
+  --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa; --orange-300: #fdba74; --orange-400: #fb923c; --orange-500: #f97316; --orange-600: #ea580c; --orange-700: #c2410c; --orange-800: #9a3412; --orange-900: #7c2d12; --orange-950: #431407;
+  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e; --amber-900: #78350f; --amber-950: #451a03;
+  --yellow-50: #fefce8; --yellow-100: #fef9c3; --yellow-200: #fef08a; --yellow-300: #fde047; --yellow-400: #facc15; --yellow-500: #eab308; --yellow-600: #ca8a04; --yellow-700: #a16207; --yellow-800: #854d0e; --yellow-900: #713f12; --yellow-950: #422006;
+  --lime-50: #f7fee7; --lime-100: #ecfccb; --lime-200: #d9f99d; --lime-300: #bef264; --lime-400: #a3e635; --lime-500: #84cc16; --lime-600: #65a30d; --lime-700: #4d7c0f; --lime-800: #3f6212; --lime-900: #365314; --lime-950: #1a2e05;
+  --green-50: #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0; --green-300: #86efac; --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; --green-800: #166534; --green-900: #14532d; --green-950: #052e16;
+  --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-300: #6ee7b7; --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46; --emerald-900: #064e3b; --emerald-950: #022c22;
+  --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-300: #5eead4; --teal-400: #2dd4bf; --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e; --teal-800: #115e59; --teal-900: #134e4a; --teal-950: #042f2e;
+  --cyan-50: #ecfeff; --cyan-100: #cffafe; --cyan-200: #a5f3fc; --cyan-300: #67e8f9; --cyan-400: #22d3ee; --cyan-500: #06b6d4; --cyan-600: #0891b2; --cyan-700: #0e7490; --cyan-800: #155e75; --cyan-900: #164e63; --cyan-950: #083344;
+  --sky-50: #f0f9ff; --sky-100: #e0f2fe; --sky-200: #bae6fd; --sky-300: #7dd3fc; --sky-400: #38bdf8; --sky-500: #0ea5e9; --sky-600: #0284c7; --sky-700: #0369a1; --sky-800: #075985; --sky-900: #0c4a6e; --sky-950: #082f49;
+  --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af; --blue-900: #1e3a8a; --blue-950: #172554;
+  --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc; --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca; --indigo-800: #3730a3; --indigo-900: #312e81; --indigo-950: #1e1b4b;
+  --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; --violet-800: #5b21b6; --violet-900: #4c1d95; --violet-950: #1e1b4b;
+  --purple-50: #faf5ff; --purple-100: #f3e8ff; --purple-200: #e9d5ff; --purple-300: #d8b4fe; --purple-400: #c084fc; --purple-500: #a855f7; --purple-600: #9333ea; --purple-700: #7e22ce; --purple-800: #6b21a8; --purple-900: #581c87; --purple-950: #3b0764;
+  --fuchsia-50: #fdf4ff; --fuchsia-100: #fae8ff; --fuchsia-200: #f5d0fe; --fuchsia-300: #f0abfc; --fuchsia-400: #e879f9; --fuchsia-500: #d946ef; --fuchsia-600: #c026d3; --fuchsia-700: #a21caf; --fuchsia-800: #86198f; --fuchsia-900: #701a75; --fuchsia-950: #4a044e;
+  --pink-50: #fdf2f8; --pink-100: #fce7f3; --pink-200: #fbcfe8; --pink-300: #f9a8d4; --pink-400: #f472b6; --pink-500: #ec4899; --pink-600: #db2777; --pink-700: #be185d; --pink-800: #9d174d; --pink-900: #831843; --pink-950: #500724;
+  --rose-50: #fff1f2; --rose-100: #ffe4e6; --rose-200: #fecdd3; --rose-300: #fda4af; --rose-400: #fb7185; --rose-500: #f43f5e; --rose-600: #e11d48; --rose-700: #be123c; --rose-800: #9f1239; --rose-900: #881337; --rose-950: #4c0519;
+}
+
+.bg-black { --background-color: var(--black); background-color: var(--background-color) !important }.fg-black { color: var(--black) !important }
+.bg-white { --background-color: var(--white); background-color: var(--background-color) !important }.fg-white { color: var(--white) !important }
+.bg-neutral-50 { --background-color: var(--neutral-50); background-color: var(--background-color) !important }.fg-neutral-50 { color: var(--neutral-50) !important }.bg-neutral-100 { --background-color: var(--neutral-100); background-color: var(--background-color) !important }.fg-neutral-100 { color: var(--neutral-100) !important }.bg-neutral-200 { --background-color: var(--neutral-200); background-color: var(--background-color) !important }.fg-neutral-200 { color: var(--neutral-200) !important }.bg-neutral-300 { --background-color: var(--neutral-300); background-color: var(--background-color) !important }.fg-neutral-300 { color: var(--neutral-300) !important }.bg-neutral-400 { --background-color: var(--neutral-400); background-color: var(--background-color) !important }.fg-neutral-400 { color: var(--neutral-400) !important }.bg-neutral-500 { --background-color: var(--neutral-500); background-color: var(--background-color) !important }.fg-neutral-500 { color: var(--neutral-500) !important }.bg-neutral-600 { --background-color: var(--neutral-600); background-color: var(--background-color) !important }.fg-neutral-600 { color: var(--neutral-600) !important }.bg-neutral-700 { --background-color: var(--neutral-700); background-color: var(--background-color) !important }.fg-neutral-700 { color: var(--neutral-700) !important }.bg-neutral-800 { --background-color: var(--neutral-800); background-color: var(--background-color) !important }.fg-neutral-800 { color: var(--neutral-800) !important }.bg-neutral-900 { --background-color: var(--neutral-900); background-color: var(--background-color) !important }.fg-neutral-900 { color: var(--neutral-900) !important }.bg-neutral-950 { --background-color: var(--neutral-950); background-color: var(--background-color) !important }.fg-neutral-950 { color: var(--neutral-950) !important }
+.bg-stone-50 { --background-color: var(--stone-50); background-color: var(--background-color) !important }.fg-stone-50 { color: var(--stone-50) !important }.bg-stone-100 { --background-color: var(--stone-100); background-color: var(--background-color) !important }.fg-stone-100 { color: var(--stone-100) !important }.bg-stone-200 { --background-color: var(--stone-200); background-color: var(--background-color) !important }.fg-stone-200 { color: var(--stone-200) !important }.bg-stone-300 { --background-color: var(--stone-300); background-color: var(--background-color) !important }.fg-stone-300 { color: var(--stone-300) !important }.bg-stone-400 { --background-color: var(--stone-400); background-color: var(--background-color) !important }.fg-stone-400 { color: var(--stone-400) !important }.bg-stone-500 { --background-color: var(--stone-500); background-color: var(--background-color) !important }.fg-stone-500 { color: var(--stone-500) !important }.bg-stone-600 { --background-color: var(--stone-600); background-color: var(--background-color) !important }.fg-stone-600 { color: var(--stone-600) !important }.bg-stone-700 { --background-color: var(--stone-700); background-color: var(--background-color) !important }.fg-stone-700 { color: var(--stone-700) !important }.bg-stone-800 { --background-color: var(--stone-800); background-color: var(--background-color) !important }.fg-stone-800 { color: var(--stone-800) !important }.bg-stone-900 { --background-color: var(--stone-900); background-color: var(--background-color) !important }.fg-stone-900 { color: var(--stone-900) !important }.bg-stone-950 { --background-color: var(--stone-950); background-color: var(--background-color) !important }.fg-stone-950 { color: var(--stone-950) !important }
+.bg-zinc-50 { --background-color: var(--zinc-50); background-color: var(--background-color) !important }.fg-zinc-50 { color: var(--zinc-50) !important }.bg-zinc-100 { --background-color: var(--zinc-100); background-color: var(--background-color) !important }.fg-zinc-100 { color: var(--zinc-100) !important }.bg-zinc-200 { --background-color: var(--zinc-200); background-color: var(--background-color) !important }.fg-zinc-200 { color: var(--zinc-200) !important }.bg-zinc-300 { --background-color: var(--zinc-300); background-color: var(--background-color) !important }.fg-zinc-300 { color: var(--zinc-300) !important }.bg-zinc-400 { --background-color: var(--zinc-400); background-color: var(--background-color) !important }.fg-zinc-400 { color: var(--zinc-400) !important }.bg-zinc-500 { --background-color: var(--zinc-500); background-color: var(--background-color) !important }.fg-zinc-500 { color: var(--zinc-500) !important }.bg-zinc-600 { --background-color: var(--zinc-600); background-color: var(--background-color) !important }.fg-zinc-600 { color: var(--zinc-600) !important }.bg-zinc-700 { --background-color: var(--zinc-700); background-color: var(--background-color) !important }.fg-zinc-700 { color: var(--zinc-700) !important }.bg-zinc-800 { --background-color: var(--zinc-800); background-color: var(--background-color) !important }.fg-zinc-800 { color: var(--zinc-800) !important }.bg-zinc-900 { --background-color: var(--zinc-900); background-color: var(--background-color) !important }.fg-zinc-900 { color: var(--zinc-900) !important }.bg-zinc-950 { --background-color: var(--zinc-950); background-color: var(--background-color) !important }.fg-zinc-950 { color: var(--zinc-950) !important }
+.bg-slate-50 { --background-color: var(--slate-50); background-color: var(--background-color) !important }.fg-slate-50 { color: var(--slate-50) !important }.bg-slate-100 { --background-color: var(--slate-100); background-color: var(--background-color) !important }.fg-slate-100 { color: var(--slate-100) !important }.bg-slate-200 { --background-color: var(--slate-200); background-color: var(--background-color) !important }.fg-slate-200 { color: var(--slate-200) !important }.bg-slate-300 { --background-color: var(--slate-300); background-color: var(--background-color) !important }.fg-slate-300 { color: var(--slate-300) !important }.bg-slate-400 { --background-color: var(--slate-400); background-color: var(--background-color) !important }.fg-slate-400 { color: var(--slate-400) !important }.bg-slate-500 { --background-color: var(--slate-500); background-color: var(--background-color) !important }.fg-slate-500 { color: var(--slate-500) !important }.bg-slate-600 { --background-color: var(--slate-600); background-color: var(--background-color) !important }.fg-slate-600 { color: var(--slate-600) !important }.bg-slate-700 { --background-color: var(--slate-700); background-color: var(--background-color) !important }.fg-slate-700 { color: var(--slate-700) !important }.bg-slate-800 { --background-color: var(--slate-800); background-color: var(--background-color) !important }.fg-slate-800 { color: var(--slate-800) !important }.bg-slate-900 { --background-color: var(--slate-900); background-color: var(--background-color) !important }.fg-slate-900 { color: var(--slate-900) !important }.bg-slate-950 { --background-color: var(--slate-950); background-color: var(--background-color) !important }.fg-slate-950 { color: var(--slate-950) !important }
+.bg-gray-50 { --background-color: var(--gray-50); background-color: var(--background-color) !important }.fg-gray-50 { color: var(--gray-50) !important }.bg-gray-100 { --background-color: var(--gray-100); background-color: var(--background-color) !important }.fg-gray-100 { color: var(--gray-100) !important }.bg-gray-200 { --background-color: var(--gray-200); background-color: var(--background-color) !important }.fg-gray-200 { color: var(--gray-200) !important }.bg-gray-300 { --background-color: var(--gray-300); background-color: var(--background-color) !important }.fg-gray-300 { color: var(--gray-300) !important }.bg-gray-400 { --background-color: var(--gray-400); background-color: var(--background-color) !important }.fg-gray-400 { color: var(--gray-400) !important }.bg-gray-500 { --background-color: var(--gray-500); background-color: var(--background-color) !important }.fg-gray-500 { color: var(--gray-500) !important }.bg-gray-600 { --background-color: var(--gray-600); background-color: var(--background-color) !important }.fg-gray-600 { color: var(--gray-600) !important }.bg-gray-700 { --background-color: var(--gray-700); background-color: var(--background-color) !important }.fg-gray-700 { color: var(--gray-700) !important }.bg-gray-800 { --background-color: var(--gray-800); background-color: var(--background-color) !important }.fg-gray-800 { color: var(--gray-800) !important }.bg-gray-900 { --background-color: var(--gray-900); background-color: var(--background-color) !important }.fg-gray-900 { color: var(--gray-900) !important }.bg-gray-950 { --background-color: var(--gray-950); background-color: var(--background-color) !important }.fg-gray-950 { color: var(--gray-950) !important }
+.bg-red-50 { --background-color: var(--red-50); background-color: var(--background-color) !important }.fg-red-50 { color: var(--red-50) !important }.bg-red-100 { --background-color: var(--red-100); background-color: var(--background-color) !important }.fg-red-100 { color: var(--red-100) !important }.bg-red-200 { --background-color: var(--red-200); background-color: var(--background-color) !important }.fg-red-200 { color: var(--red-200) !important }.bg-red-300 { --background-color: var(--red-300); background-color: var(--background-color) !important }.fg-red-300 { color: var(--red-300) !important }.bg-red-400 { --background-color: var(--red-400); background-color: var(--background-color) !important }.fg-red-400 { color: var(--red-400) !important }.bg-red-500 { --background-color: var(--red-500); background-color: var(--background-color) !important }.fg-red-500 { color: var(--red-500) !important }.bg-red-600 { --background-color: var(--red-600); background-color: var(--background-color) !important }.fg-red-600 { color: var(--red-600) !important }.bg-red-700 { --background-color: var(--red-700); background-color: var(--background-color) !important }.fg-red-700 { color: var(--red-700) !important }.bg-red-800 { --background-color: var(--red-800); background-color: var(--background-color) !important }.fg-red-800 { color: var(--red-800) !important }.bg-red-900 { --background-color: var(--red-900); background-color: var(--background-color) !important }.fg-red-900 { color: var(--red-900) !important }.bg-red-950 { --background-color: var(--red-950); background-color: var(--background-color) !important }.fg-red-950 { color: var(--red-950) !important }
+.bg-orange-50 { --background-color: var(--orange-50); background-color: var(--background-color) !important }.fg-orange-50 { color: var(--orange-50) !important }.bg-orange-100 { --background-color: var(--orange-100); background-color: var(--background-color) !important }.fg-orange-100 { color: var(--orange-100) !important }.bg-orange-200 { --background-color: var(--orange-200); background-color: var(--background-color) !important }.fg-orange-200 { color: var(--orange-200) !important }.bg-orange-300 { --background-color: var(--orange-300); background-color: var(--background-color) !important }.fg-orange-300 { color: var(--orange-300) !important }.bg-orange-400 { --background-color: var(--orange-400); background-color: var(--background-color) !important }.fg-orange-400 { color: var(--orange-400) !important }.bg-orange-500 { --background-color: var(--orange-500); background-color: var(--background-color) !important }.fg-orange-500 { color: var(--orange-500) !important }.bg-orange-600 { --background-color: var(--orange-600); background-color: var(--background-color) !important }.fg-orange-600 { color: var(--orange-600) !important }.bg-orange-700 { --background-color: var(--orange-700); background-color: var(--background-color) !important }.fg-orange-700 { color: var(--orange-700) !important }.bg-orange-800 { --background-color: var(--orange-800); background-color: var(--background-color) !important }.fg-orange-800 { color: var(--orange-800) !important }.bg-orange-900 { --background-color: var(--orange-900); background-color: var(--background-color) !important }.fg-orange-900 { color: var(--orange-900) !important }.bg-orange-950 { --background-color: var(--orange-950); background-color: var(--background-color) !important }.fg-orange-950 { color: var(--orange-950) !important }
+.bg-amber-50 { --background-color: var(--amber-50); background-color: var(--background-color) !important }.fg-amber-50 { color: var(--amber-50) !important }.bg-amber-100 { --background-color: var(--amber-100); background-color: var(--background-color) !important }.fg-amber-100 { color: var(--amber-100) !important }.bg-amber-200 { --background-color: var(--amber-200); background-color: var(--background-color) !important }.fg-amber-200 { color: var(--amber-200) !important }.bg-amber-300 { --background-color: var(--amber-300); background-color: var(--background-color) !important }.fg-amber-300 { color: var(--amber-300) !important }.bg-amber-400 { --background-color: var(--amber-400); background-color: var(--background-color) !important }.fg-amber-400 { color: var(--amber-400) !important }.bg-amber-500 { --background-color: var(--amber-500); background-color: var(--background-color) !important }.fg-amber-500 { color: var(--amber-500) !important }.bg-amber-600 { --background-color: var(--amber-600); background-color: var(--background-color) !important }.fg-amber-600 { color: var(--amber-600) !important }.bg-amber-700 { --background-color: var(--amber-700); background-color: var(--background-color) !important }.fg-amber-700 { color: var(--amber-700) !important }.bg-amber-800 { --background-color: var(--amber-800); background-color: var(--background-color) !important }.fg-amber-800 { color: var(--amber-800) !important }.bg-amber-900 { --background-color: var(--amber-900); background-color: var(--background-color) !important }.fg-amber-900 { color: var(--amber-900) !important }.bg-amber-950 { --background-color: var(--amber-950); background-color: var(--background-color) !important }.fg-amber-950 { color: var(--amber-950) !important }
+.bg-yellow-50 { --background-color: var(--yellow-50); background-color: var(--background-color) !important }.fg-yellow-50 { color: var(--yellow-50) !important }.bg-yellow-100 { --background-color: var(--yellow-100); background-color: var(--background-color) !important }.fg-yellow-100 { color: var(--yellow-100) !important }.bg-yellow-200 { --background-color: var(--yellow-200); background-color: var(--background-color) !important }.fg-yellow-200 { color: var(--yellow-200) !important }.bg-yellow-300 { --background-color: var(--yellow-300); background-color: var(--background-color) !important }.fg-yellow-300 { color: var(--yellow-300) !important }.bg-yellow-400 { --background-color: var(--yellow-400); background-color: var(--background-color) !important }.fg-yellow-400 { color: var(--yellow-400) !important }.bg-yellow-500 { --background-color: var(--yellow-500); background-color: var(--background-color) !important }.fg-yellow-500 { color: var(--yellow-500) !important }.bg-yellow-600 { --background-color: var(--yellow-600); background-color: var(--background-color) !important }.fg-yellow-600 { color: var(--yellow-600) !important }.bg-yellow-700 { --background-color: var(--yellow-700); background-color: var(--background-color) !important }.fg-yellow-700 { color: var(--yellow-700) !important }.bg-yellow-800 { --background-color: var(--yellow-800); background-color: var(--background-color) !important }.fg-yellow-800 { color: var(--yellow-800) !important }.bg-yellow-900 { --background-color: var(--yellow-900); background-color: var(--background-color) !important }.fg-yellow-900 { color: var(--yellow-900) !important }.bg-yellow-950 { --background-color: var(--yellow-950); background-color: var(--background-color) !important }.fg-yellow-950 { color: var(--yellow-950) !important }
+.bg-lime-50 { --background-color: var(--lime-50); background-color: var(--background-color) !important }.fg-lime-50 { color: var(--lime-50) !important }.bg-lime-100 { --background-color: var(--lime-100); background-color: var(--background-color) !important }.fg-lime-100 { color: var(--lime-100) !important }.bg-lime-200 { --background-color: var(--lime-200); background-color: var(--background-color) !important }.fg-lime-200 { color: var(--lime-200) !important }.bg-lime-300 { --background-color: var(--lime-300); background-color: var(--background-color) !important }.fg-lime-300 { color: var(--lime-300) !important }.bg-lime-400 { --background-color: var(--lime-400); background-color: var(--background-color) !important }.fg-lime-400 { color: var(--lime-400) !important }.bg-lime-500 { --background-color: var(--lime-500); background-color: var(--background-color) !important }.fg-lime-500 { color: var(--lime-500) !important }.bg-lime-600 { --background-color: var(--lime-600); background-color: var(--background-color) !important }.fg-lime-600 { color: var(--lime-600) !important }.bg-lime-700 { --background-color: var(--lime-700); background-color: var(--background-color) !important }.fg-lime-700 { color: var(--lime-700) !important }.bg-lime-800 { --background-color: var(--lime-800); background-color: var(--background-color) !important }.fg-lime-800 { color: var(--lime-800) !important }.bg-lime-900 { --background-color: var(--lime-900); background-color: var(--background-color) !important }.fg-lime-900 { color: var(--lime-900) !important }.bg-lime-950 { --background-color: var(--lime-950); background-color: var(--background-color) !important }.fg-lime-950 { color: var(--lime-950) !important }
+.bg-green-50 { --background-color: var(--green-50); background-color: var(--background-color) !important }.fg-green-50 { color: var(--green-50) !important }.bg-green-100 { --background-color: var(--green-100); background-color: var(--background-color) !important }.fg-green-100 { color: var(--green-100) !important }.bg-green-200 { --background-color: var(--green-200); background-color: var(--background-color) !important }.fg-green-200 { color: var(--green-200) !important }.bg-green-300 { --background-color: var(--green-300); background-color: var(--background-color) !important }.fg-green-300 { color: var(--green-300) !important }.bg-green-400 { --background-color: var(--green-400); background-color: var(--background-color) !important }.fg-green-400 { color: var(--green-400) !important }.bg-green-500 { --background-color: var(--green-500); background-color: var(--background-color) !important }.fg-green-500 { color: var(--green-500) !important }.bg-green-600 { --background-color: var(--green-600); background-color: var(--background-color) !important }.fg-green-600 { color: var(--green-600) !important }.bg-green-700 { --background-color: var(--green-700); background-color: var(--background-color) !important }.fg-green-700 { color: var(--green-700) !important }.bg-green-800 { --background-color: var(--green-800); background-color: var(--background-color) !important }.fg-green-800 { color: var(--green-800) !important }.bg-green-900 { --background-color: var(--green-900); background-color: var(--background-color) !important }.fg-green-900 { color: var(--green-900) !important }.bg-green-950 { --background-color: var(--green-950); background-color: var(--background-color) !important }.fg-green-950 { color: var(--green-950) !important }
+.bg-emerald-50 { --background-color: var(--emerald-50); background-color: var(--background-color) !important }.fg-emerald-50 { color: var(--emerald-50) !important }.bg-emerald-100 { --background-color: var(--emerald-100); background-color: var(--background-color) !important }.fg-emerald-100 { color: var(--emerald-100) !important }.bg-emerald-200 { --background-color: var(--emerald-200); background-color: var(--background-color) !important }.fg-emerald-200 { color: var(--emerald-200) !important }.bg-emerald-300 { --background-color: var(--emerald-300); background-color: var(--background-color) !important }.fg-emerald-300 { color: var(--emerald-300) !important }.bg-emerald-400 { --background-color: var(--emerald-400); background-color: var(--background-color) !important }.fg-emerald-400 { color: var(--emerald-400) !important }.bg-emerald-500 { --background-color: var(--emerald-500); background-color: var(--background-color) !important }.fg-emerald-500 { color: var(--emerald-500) !important }.bg-emerald-600 { --background-color: var(--emerald-600); background-color: var(--background-color) !important }.fg-emerald-600 { color: var(--emerald-600) !important }.bg-emerald-700 { --background-color: var(--emerald-700); background-color: var(--background-color) !important }.fg-emerald-700 { color: var(--emerald-700) !important }.bg-emerald-800 { --background-color: var(--emerald-800); background-color: var(--background-color) !important }.fg-emerald-800 { color: var(--emerald-800) !important }.bg-emerald-900 { --background-color: var(--emerald-900); background-color: var(--background-color) !important }.fg-emerald-900 { color: var(--emerald-900) !important }.bg-emerald-950 { --background-color: var(--emerald-950); background-color: var(--background-color) !important }.fg-emerald-950 { color: var(--emerald-950) !important }
+.bg-teal-50 { --background-color: var(--teal-50); background-color: var(--background-color) !important }.fg-teal-50 { color: var(--teal-50) !important }.bg-teal-100 { --background-color: var(--teal-100); background-color: var(--background-color) !important }.fg-teal-100 { color: var(--teal-100) !important }.bg-teal-200 { --background-color: var(--teal-200); background-color: var(--background-color) !important }.fg-teal-200 { color: var(--teal-200) !important }.bg-teal-300 { --background-color: var(--teal-300); background-color: var(--background-color) !important }.fg-teal-300 { color: var(--teal-300) !important }.bg-teal-400 { --background-color: var(--teal-400); background-color: var(--background-color) !important }.fg-teal-400 { color: var(--teal-400) !important }.bg-teal-500 { --background-color: var(--teal-500); background-color: var(--background-color) !important }.fg-teal-500 { color: var(--teal-500) !important }.bg-teal-600 { --background-color: var(--teal-600); background-color: var(--background-color) !important }.fg-teal-600 { color: var(--teal-600) !important }.bg-teal-700 { --background-color: var(--teal-700); background-color: var(--background-color) !important }.fg-teal-700 { color: var(--teal-700) !important }.bg-teal-800 { --background-color: var(--teal-800); background-color: var(--background-color) !important }.fg-teal-800 { color: var(--teal-800) !important }.bg-teal-900 { --background-color: var(--teal-900); background-color: var(--background-color) !important }.fg-teal-900 { color: var(--teal-900) !important }.bg-teal-950 { --background-color: var(--teal-950); background-color: var(--background-color) !important }.fg-teal-950 { color: var(--teal-950) !important }
+.bg-cyan-50 { --background-color: var(--cyan-50); background-color: var(--background-color) !important }.fg-cyan-50 { color: var(--cyan-50) !important }.bg-cyan-100 { --background-color: var(--cyan-100); background-color: var(--background-color) !important }.fg-cyan-100 { color: var(--cyan-100) !important }.bg-cyan-200 { --background-color: var(--cyan-200); background-color: var(--background-color) !important }.fg-cyan-200 { color: var(--cyan-200) !important }.bg-cyan-300 { --background-color: var(--cyan-300); background-color: var(--background-color) !important }.fg-cyan-300 { color: var(--cyan-300) !important }.bg-cyan-400 { --background-color: var(--cyan-400); background-color: var(--background-color) !important }.fg-cyan-400 { color: var(--cyan-400) !important }.bg-cyan-500 { --background-color: var(--cyan-500); background-color: var(--background-color) !important }.fg-cyan-500 { color: var(--cyan-500) !important }.bg-cyan-600 { --background-color: var(--cyan-600); background-color: var(--background-color) !important }.fg-cyan-600 { color: var(--cyan-600) !important }.bg-cyan-700 { --background-color: var(--cyan-700); background-color: var(--background-color) !important }.fg-cyan-700 { color: var(--cyan-700) !important }.bg-cyan-800 { --background-color: var(--cyan-800); background-color: var(--background-color) !important }.fg-cyan-800 { color: var(--cyan-800) !important }.bg-cyan-900 { --background-color: var(--cyan-900); background-color: var(--background-color) !important }.fg-cyan-900 { color: var(--cyan-900) !important }.bg-cyan-950 { --background-color: var(--cyan-950); background-color: var(--background-color) !important }.fg-cyan-950 { color: var(--cyan-950) !important }
+.bg-sky-50 { --background-color: var(--sky-50); background-color: var(--background-color) !important }.fg-sky-50 { color: var(--sky-50) !important }.bg-sky-100 { --background-color: var(--sky-100); background-color: var(--background-color) !important }.fg-sky-100 { color: var(--sky-100) !important }.bg-sky-200 { --background-color: var(--sky-200); background-color: var(--background-color) !important }.fg-sky-200 { color: var(--sky-200) !important }.bg-sky-300 { --background-color: var(--sky-300); background-color: var(--background-color) !important }.fg-sky-300 { color: var(--sky-300) !important }.bg-sky-400 { --background-color: var(--sky-400); background-color: var(--background-color) !important }.fg-sky-400 { color: var(--sky-400) !important }.bg-sky-500 { --background-color: var(--sky-500); background-color: var(--background-color) !important }.fg-sky-500 { color: var(--sky-500) !important }.bg-sky-600 { --background-color: var(--sky-600); background-color: var(--background-color) !important }.fg-sky-600 { color: var(--sky-600) !important }.bg-sky-700 { --background-color: var(--sky-700); background-color: var(--background-color) !important }.fg-sky-700 { color: var(--sky-700) !important }.bg-sky-800 { --background-color: var(--sky-800); background-color: var(--background-color) !important }.fg-sky-800 { color: var(--sky-800) !important }.bg-sky-900 { --background-color: var(--sky-900); background-color: var(--background-color) !important }.fg-sky-900 { color: var(--sky-900) !important }.bg-sky-950 { --background-color: var(--sky-950); background-color: var(--background-color) !important }.fg-sky-950 { color: var(--sky-950) !important }
+.bg-blue-50 { --background-color: var(--blue-50); background-color: var(--background-color) !important }.fg-blue-50 { color: var(--blue-50) !important }.bg-blue-100 { --background-color: var(--blue-100); background-color: var(--background-color) !important }.fg-blue-100 { color: var(--blue-100) !important }.bg-blue-200 { --background-color: var(--blue-200); background-color: var(--background-color) !important }.fg-blue-200 { color: var(--blue-200) !important }.bg-blue-300 { --background-color: var(--blue-300); background-color: var(--background-color) !important }.fg-blue-300 { color: var(--blue-300) !important }.bg-blue-400 { --background-color: var(--blue-400); background-color: var(--background-color) !important }.fg-blue-400 { color: var(--blue-400) !important }.bg-blue-500 { --background-color: var(--blue-500); background-color: var(--background-color) !important }.fg-blue-500 { color: var(--blue-500) !important }.bg-blue-600 { --background-color: var(--blue-600); background-color: var(--background-color) !important }.fg-blue-600 { color: var(--blue-600) !important }.bg-blue-700 { --background-color: var(--blue-700); background-color: var(--background-color) !important }.fg-blue-700 { color: var(--blue-700) !important }.bg-blue-800 { --background-color: var(--blue-800); background-color: var(--background-color) !important }.fg-blue-800 { color: var(--blue-800) !important }.bg-blue-900 { --background-color: var(--blue-900); background-color: var(--background-color) !important }.fg-blue-900 { color: var(--blue-900) !important }.bg-blue-950 { --background-color: var(--blue-950); background-color: var(--background-color) !important }.fg-blue-950 { color: var(--blue-950) !important }
+.bg-indigo-50 { --background-color: var(--indigo-50); background-color: var(--background-color) !important }.fg-indigo-50 { color: var(--indigo-50) !important }.bg-indigo-100 { --background-color: var(--indigo-100); background-color: var(--background-color) !important }.fg-indigo-100 { color: var(--indigo-100) !important }.bg-indigo-200 { --background-color: var(--indigo-200); background-color: var(--background-color) !important }.fg-indigo-200 { color: var(--indigo-200) !important }.bg-indigo-300 { --background-color: var(--indigo-300); background-color: var(--background-color) !important }.fg-indigo-300 { color: var(--indigo-300) !important }.bg-indigo-400 { --background-color: var(--indigo-400); background-color: var(--background-color) !important }.fg-indigo-400 { color: var(--indigo-400) !important }.bg-indigo-500 { --background-color: var(--indigo-500); background-color: var(--background-color) !important }.fg-indigo-500 { color: var(--indigo-500) !important }.bg-indigo-600 { --background-color: var(--indigo-600); background-color: var(--background-color) !important }.fg-indigo-600 { color: var(--indigo-600) !important }.bg-indigo-700 { --background-color: var(--indigo-700); background-color: var(--background-color) !important }.fg-indigo-700 { color: var(--indigo-700) !important }.bg-indigo-800 { --background-color: var(--indigo-800); background-color: var(--background-color) !important }.fg-indigo-800 { color: var(--indigo-800) !important }.bg-indigo-900 { --background-color: var(--indigo-900); background-color: var(--background-color) !important }.fg-indigo-900 { color: var(--indigo-900) !important }.bg-indigo-950 { --background-color: var(--indigo-950); background-color: var(--background-color) !important }.fg-indigo-950 { color: var(--indigo-950) !important }
+.bg-violet-50 { --background-color: var(--violet-50); background-color: var(--background-color) !important }.fg-violet-50 { color: var(--violet-50) !important }.bg-violet-100 { --background-color: var(--violet-100); background-color: var(--background-color) !important }.fg-violet-100 { color: var(--violet-100) !important }.bg-violet-200 { --background-color: var(--violet-200); background-color: var(--background-color) !important }.fg-violet-200 { color: var(--violet-200) !important }.bg-violet-300 { --background-color: var(--violet-300); background-color: var(--background-color) !important }.fg-violet-300 { color: var(--violet-300) !important }.bg-violet-400 { --background-color: var(--violet-400); background-color: var(--background-color) !important }.fg-violet-400 { color: var(--violet-400) !important }.bg-violet-500 { --background-color: var(--violet-500); background-color: var(--background-color) !important }.fg-violet-500 { color: var(--violet-500) !important }.bg-violet-600 { --background-color: var(--violet-600); background-color: var(--background-color) !important }.fg-violet-600 { color: var(--violet-600) !important }.bg-violet-700 { --background-color: var(--violet-700); background-color: var(--background-color) !important }.fg-violet-700 { color: var(--violet-700) !important }.bg-violet-800 { --background-color: var(--violet-800); background-color: var(--background-color) !important }.fg-violet-800 { color: var(--violet-800) !important }.bg-violet-900 { --background-color: var(--violet-900); background-color: var(--background-color) !important }.fg-violet-900 { color: var(--violet-900) !important }.bg-violet-950 { --background-color: var(--violet-950); background-color: var(--background-color) !important }.fg-violet-950 { color: var(--violet-950) !important }
+.bg-purple-50 { --background-color: var(--purple-50); background-color: var(--background-color) !important }.fg-purple-50 { color: var(--purple-50) !important }.bg-purple-100 { --background-color: var(--purple-100); background-color: var(--background-color) !important }.fg-purple-100 { color: var(--purple-100) !important }.bg-purple-200 { --background-color: var(--purple-200); background-color: var(--background-color) !important }.fg-purple-200 { color: var(--purple-200) !important }.bg-purple-300 { --background-color: var(--purple-300); background-color: var(--background-color) !important }.fg-purple-300 { color: var(--purple-300) !important }.bg-purple-400 { --background-color: var(--purple-400); background-color: var(--background-color) !important }.fg-purple-400 { color: var(--purple-400) !important }.bg-purple-500 { --background-color: var(--purple-500); background-color: var(--background-color) !important }.fg-purple-500 { color: var(--purple-500) !important }.bg-purple-600 { --background-color: var(--purple-600); background-color: var(--background-color) !important }.fg-purple-600 { color: var(--purple-600) !important }.bg-purple-700 { --background-color: var(--purple-700); background-color: var(--background-color) !important }.fg-purple-700 { color: var(--purple-700) !important }.bg-purple-800 { --background-color: var(--purple-800); background-color: var(--background-color) !important }.fg-purple-800 { color: var(--purple-800) !important }.bg-purple-900 { --background-color: var(--purple-900); background-color: var(--background-color) !important }.fg-purple-900 { color: var(--purple-900) !important }.bg-purple-950 { --background-color: var(--purple-950); background-color: var(--background-color) !important }.fg-purple-950 { color: var(--purple-950) !important }
+.bg-fuchsia-50 { --background-color: var(--fuchsia-50); background-color: var(--background-color) !important }.fg-fuchsia-50 { color: var(--fuchsia-50) !important }.bg-fuchsia-100 { --background-color: var(--fuchsia-100); background-color: var(--background-color) !important }.fg-fuchsia-100 { color: var(--fuchsia-100) !important }.bg-fuchsia-200 { --background-color: var(--fuchsia-200); background-color: var(--background-color) !important }.fg-fuchsia-200 { color: var(--fuchsia-200) !important }.bg-fuchsia-300 { --background-color: var(--fuchsia-300); background-color: var(--background-color) !important }.fg-fuchsia-300 { color: var(--fuchsia-300) !important }.bg-fuchsia-400 { --background-color: var(--fuchsia-400); background-color: var(--background-color) !important }.fg-fuchsia-400 { color: var(--fuchsia-400) !important }.bg-fuchsia-500 { --background-color: var(--fuchsia-500); background-color: var(--background-color) !important }.fg-fuchsia-500 { color: var(--fuchsia-500) !important }.bg-fuchsia-600 { --background-color: var(--fuchsia-600); background-color: var(--background-color) !important }.fg-fuchsia-600 { color: var(--fuchsia-600) !important }.bg-fuchsia-700 { --background-color: var(--fuchsia-700); background-color: var(--background-color) !important }.fg-fuchsia-700 { color: var(--fuchsia-700) !important }.bg-fuchsia-800 { --background-color: var(--fuchsia-800); background-color: var(--background-color) !important }.fg-fuchsia-800 { color: var(--fuchsia-800) !important }.bg-fuchsia-900 { --background-color: var(--fuchsia-900); background-color: var(--background-color) !important }.fg-fuchsia-900 { color: var(--fuchsia-900) !important }.bg-fuchsia-950 { --background-color: var(--fuchsia-950); background-color: var(--background-color) !important }.fg-fuchsia-950 { color: var(--fuchsia-950) !important }
+.bg-pink-50 { --background-color: var(--pink-50); background-color: var(--background-color) !important }.fg-pink-50 { color: var(--pink-50) !important }.bg-pink-100 { --background-color: var(--pink-100); background-color: var(--background-color) !important }.fg-pink-100 { color: var(--pink-100) !important }.bg-pink-200 { --background-color: var(--pink-200); background-color: var(--background-color) !important }.fg-pink-200 { color: var(--pink-200) !important }.bg-pink-300 { --background-color: var(--pink-300); background-color: var(--background-color) !important }.fg-pink-300 { color: var(--pink-300) !important }.bg-pink-400 { --background-color: var(--pink-400); background-color: var(--background-color) !important }.fg-pink-400 { color: var(--pink-400) !important }.bg-pink-500 { --background-color: var(--pink-500); background-color: var(--background-color) !important }.fg-pink-500 { color: var(--pink-500) !important }.bg-pink-600 { --background-color: var(--pink-600); background-color: var(--background-color) !important }.fg-pink-600 { color: var(--pink-600) !important }.bg-pink-700 { --background-color: var(--pink-700); background-color: var(--background-color) !important }.fg-pink-700 { color: var(--pink-700) !important }.bg-pink-800 { --background-color: var(--pink-800); background-color: var(--background-color) !important }.fg-pink-800 { color: var(--pink-800) !important }.bg-pink-900 { --background-color: var(--pink-900); background-color: var(--background-color) !important }.fg-pink-900 { color: var(--pink-900) !important }.bg-pink-950 { --background-color: var(--pink-950); background-color: var(--background-color) !important }.fg-pink-950 { color: var(--pink-950) !important }
+.bg-rose-50 { --background-color: var(--rose-50); background-color: var(--background-color) !important }.fg-rose-50 { color: var(--rose-50) !important }.bg-rose-100 { --background-color: var(--rose-100); background-color: var(--background-color) !important }.fg-rose-100 { color: var(--rose-100) !important }.bg-rose-200 { --background-color: var(--rose-200); background-color: var(--background-color) !important }.fg-rose-200 { color: var(--rose-200) !important }.bg-rose-300 { --background-color: var(--rose-300); background-color: var(--background-color) !important }.fg-rose-300 { color: var(--rose-300) !important }.bg-rose-400 { --background-color: var(--rose-400); background-color: var(--background-color) !important }.fg-rose-400 { color: var(--rose-400) !important }.bg-rose-500 { --background-color: var(--rose-500); background-color: var(--background-color) !important }.fg-rose-500 { color: var(--rose-500) !important }.bg-rose-600 { --background-color: var(--rose-600); background-color: var(--background-color) !important }.fg-rose-600 { color: var(--rose-600) !important }.bg-rose-700 { --background-color: var(--rose-700); background-color: var(--background-color) !important }.fg-rose-700 { color: var(--rose-700) !important }.bg-rose-800 { --background-color: var(--rose-800); background-color: var(--background-color) !important }.fg-rose-800 { color: var(--rose-800) !important }.bg-rose-900 { --background-color: var(--rose-900); background-color: var(--background-color) !important }.fg-rose-900 { color: var(--rose-900) !important }.bg-rose-950 { --background-color: var(--rose-950); background-color: var(--background-color) !important }.fg-rose-950 { color: var(--rose-950) !important }
+
+/* lexgui.css @jxarco */
+
+/* cssnano start ignore */
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwkT9nA2.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwAT9nA2.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwgT9nA2.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwcT9nA2.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwsT9nA2.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwoT9nA2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwQT9g.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvvYwYL8g.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvmYwYL8g.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvuYwYL8g.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvhYwYL8g.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvtYwYL8g.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcviYwY.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+/* Secondary and Code editor fonts */
 @font-face { font-family: "GeistSans"; src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/GeistSans.ttf"); }
 @font-face { font-family: "CascadiaCode"; src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/CascadiaCode.ttf"); font-weight: 400; }
-/* clean-css ignore:end */
+/* cssnano end ignore */
+
+@keyframes spin { to { transform: rotate(360deg) } }
+@keyframes pulse { 50% { opacity: .5 } }
 
 :root {
     /* default color scheme */
     color-scheme: dark;
 
-    --global-font: "GeistSans", sans-serif;
+    --global-font: "Inter", sans-serif;
     --global-code-font: "CascadiaCode", monospace;
-    --global-title-font: "GeistSans", sans-serif;
+    --global-title-font: "Inter", sans-serif;
     --global-font-size-xs: 0.625rem; /* 10px */
     --global-font-size-sm: 0.75rem; /* 12px */
     --global-font-size: 0.875rem; /* 14px */
     --global-font-size-lg: 1rem; /* 16px */
     --global-font-size-xl: 1.125rem; /* 18px */
-    --global-font-size-xxl: 1.375rem; /* 22px */
-
-    --global-color-primary: light-dark(#ffffff, #0b0b0c); /* Near White / Near Black */
-    --global-color-secondary: light-dark(#f4f4f5, #1c1c1d); /* Very Light Gray / Very Dark Gray */
-    --global-color-tertiary: light-dark(#e6e6e8, #2e2e2f); /* Soft Gray / Deep Gray */
-    --global-color-quaternary: light-dark(#cfcfd2, #363637); /* Muted Gray / Medium Dark */
-    --global-color-quinary: light-dark(#b5b5b8, #4e4e4f); /* Gentle Gray / Soft Dark Gray */
-    --global-color-accent: #2d69da;
-    --global-color-accent-light: #0d99ff;
-    --global-color-accent-dark: #304b86;
-    --global-color-success: #54cf73;
-    --global-color-error: #f54c4c;
-    --global-color-warning: #ffc107;
-    --global-text-primary: light-dark(#0d0d0e, #f0efef);
-    --global-text-secondary: light-dark(#262627, #cacacc);
-    --global-text-tertiary: light-dark(#545455, #9e9ea0);
-    --global-text-quaternary: light-dark(#6c6c6d, #777779);
-    --global-intense-background: light-dark(#fefefe, #040405);
-    --global-medium-background: #252525;
+    --global-font-size-xxl: 1.4rem; /* 22px */
+    --global-font-size-3xl: 1.8rem;
+    --global-font-size-4xl: 2.5rem;
+    --global-font-size-5xl: 2.75rem;
+
+    --global-text-primary: light-dark(#0a0a0a, #e5e5e5);
+    --global-text-secondary: light-dark(#262626, #d5d5d5);
+    --global-text-tertiary: light-dark(#404040, #c1c1c1);
+    --global-text-quaternary: light-dark(#595959, #b2b2b2);
+    --global-text-quinary: light-dark(#737373, #a1a1a1);  /* muted text */
+
+    --global-color-primary: light-dark(#f5f5f5, #171717);
+    --global-color-secondary: light-dark(#e0e0e0, #262626); /* muted background */
+    --global-color-tertiary: light-dark(#cccccc, #353535);
+    --global-color-quaternary: light-dark(#b3b3b3, #555);
+    --global-color-quinary: light-dark(#999999, #646464);
+
+    --global-color-accent: var(--blue-700);
+    --global-color-accent-light: var(--blue-400);
+    --global-color-accent-dark: var(--blue-900);
+    --global-color-success: var(--green-500);
+    --global-color-error: var(--red-600);
+    --global-color-warning: var(--yellow-500);
+
+    --global-background: light-dark(#fefefe, #0a0a0a);
+    --global-background-secondary: light-dark(#eeeeee, #1a1a1a);
     --global-blur-background: light-dark(#f7f7f7d8, #1f1f1fe7);
     --global-color-transparent: #00000000;
-
-    --global-padding-xs: 0.25rem;
-    --global-padding-sm: 0.375rem;
-    --global-padding-md: 0.5rem;
-    --global-padding-lg: 0.75rem;
-    --global-padding-xl: 1rem;
+    --global-border-color: light-dark(#e5e5e5, #ffffff1a);
+
+    --global-chart-color-1: oklch(0.488 0.243 264.376);
+    --global-chart-color-2: oklch(0.696 0.17 162.48);
+    --global-chart-color-3: oklch(0.769 0.188 70.08);
+    --global-chart-color-4: oklch(0.627 0.265 303.9);
+    --global-chart-color-5: oklch(0.645 0.246 16.439);
+
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.375rem;
+    --spacing-md: 0.5rem;
+    --spacing-lg: 0.75rem;
+    --spacing-xl: 1rem;
+
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-xxl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
 
     --svg-size-xxs: 0.5rem;
     --svg-size-xs: 0.7rem;
@@ -51,17 +147,21 @@
     --svg-size-xl: 1.4rem;
     --svg-size-xxl: 1.6rem;
 
+    --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite;
+
+    --av-grid-scale: 1;
     --code-editor-font-size: 14px;
     --code-editor-row-height: 20px;
     --graphnode-background: 17, 17, 17;
 }
 
 :root[data-spacing="compact"] {
-    --global-padding-xs: 0.15rem;
-    --global-padding-sm: 0.25rem;
-    --global-padding-md: 0.35rem;
-    --global-padding-lg: 0.5rem;
-    --global-padding-xl: 0.75rem;
+    --spacing-xs: 0.15rem 0.25rem; /* keep minimum inline padding */
+    --spacing-sm: 0.25rem;
+    --spacing-md: 0.35rem;
+    --spacing-lg: 0.5rem;
+    --spacing-xl: 0.75rem;
 }
 
 :root[data-theme="light"] { color-scheme: light }
@@ -196,7 +296,7 @@ body {
     padding: 0;
     overflow: hidden;
     font-family: var(--global-font);
-    background-color: var(--global-color-primary);
+    background-color: var(--global-background);
 }
 
 #lexroot {
@@ -355,23 +455,15 @@ body.noevents * {
     text-overflow: ellipsis;
 }
 
-/* Some global colors */
+.animate-spin { animation: var(--animate-spin) }
+.animate-pulse { animation: var(--animate-pulse) }
 
-.orange { color: orange }
-.gray { color: gray }
-.pipelineblue { color: #007acc }
-.dodgerblue { color: dodgerblue }
-.munsellblue { color: #0093af }
-.pictonblue { color: #45B1E8 }
-.lightblue { color: #5aa8f7 }
-.goldenrod { color: goldenrod }
-.metallicyellow { color: #FDCC0D }
-.heliotrope { color: #d460ff }
-.blueviolet { color: blueviolet }
+/* Some global colors */
 
 svg.xxs { width: var(--svg-size-xxs); height: var(--svg-size-xxs); }
 svg.xs { width: var(--svg-size-xs); height: var(--svg-size-xs); }
 svg.sm { width: var(--svg-size-sm); height: var(--svg-size-sm); }
+svg.md { width: var(--svg-size-md); height: var(--svg-size-md); }
 svg.lg { width: var(--svg-size-lg); height: var(--svg-size-lg); }
 svg.xl { width: var(--svg-size-xl); height: var(--svg-size-xl); }
 svg.xxl { width: var(--svg-size-xxl); height: var(--svg-size-xxl); }
@@ -455,6 +547,7 @@ a svg, svg path {
     gap: 0.15em;
     z-index: 100;
     padding: 0;
+    z-index: 1000;
 }
 
 .notifications ol.list {
@@ -516,6 +609,7 @@ a svg, svg path {
     height: fit-content;
     margin: auto 0;
     max-width: 512px;
+    margin-right: 1.5rem;
 }
 
 .lextoast .lextoastcontent div {
@@ -525,10 +619,17 @@ a svg, svg path {
 }
 
 .lextoast .lextoastcontent .title {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
     font-size: var(--global-font-size-lg);
     color: var(--global-text-primary);
 }
 
+.lextoast .lextoastcontent:not(:has(.desc)) .title {
+    font-size: var(--global-font-size);
+}
+
 .lextoast .lextoastcontent .desc {
     font-size: var(--global-font-size-sm);
     color: var(--global-text-secondary);
@@ -644,7 +745,7 @@ a svg, svg path {
 /* Footer */
 
 .lexfooter {
-    background-color: var(--global-color-primary);
+    background-color: var(--global-background);
     padding: 0.5rem;
     width: 100%;
     font-size: var(--global-font-size);
@@ -724,7 +825,7 @@ a svg, svg path {
 
 .lexdialog {
     outline: none;
-    border: 1px solid #aaaaaa48;
+    border: 1px solid var(--global-border-color);
     background: none;
     margin: 0;
     padding: 0;
@@ -733,9 +834,9 @@ a svg, svg path {
     min-height: max-content;
     overflow: hidden;
     box-shadow: 0 2px 6px #101010bb;
-    border-radius: 8px;
+    border-radius: 12px;
     z-index: 101;
-    background-color: var(--global-color-secondary);
+    background-color: var(--global-background);
 }
 
 .lexdialog:has(.lexselect) {
@@ -749,7 +850,7 @@ a svg, svg path {
     font-size: var(--global-font-size-xl);
     color: var(--global-text-secondary);
     text-shadow: 0px 1px 6px #22222283;
-    padding: var(--global-padding-lg);
+    padding: var(--spacing-lg);
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     outline: none;
@@ -768,20 +869,21 @@ a svg, svg path {
     word-break: break-all;
     color: var(--global-text-primary);
     font-size: var(--global-font-size);
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
     margin-left: 0px !important;
 }
 
 .lexdialogcontent.notitle {
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
 }
 
 .lexdialogcloser {
     font-size: var(--global-font-size-lg);
     color: var(--global-text-secondary);
     cursor: pointer;
+    z-index: 1;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -790,8 +892,8 @@ a svg, svg path {
 
 .lexdialogcloser.notitle {
     position: absolute;
-    top: 0.5em;
-    right: 0;
+    top: 0.75em;
+    right: 0.75em;
 }
 
 .lexdialogcloser:hover {
@@ -823,7 +925,7 @@ a svg, svg path {
 .lexdialog.pocket .lexdialogtitle {
     width: 100%;
     font-size: var(--global-font-size-lg);
-    background: var(--global-intense-background);
+    background: var(--global-background);
 }
 
 .lexdialog.pocket .lexdialogcontent {
@@ -918,6 +1020,12 @@ a svg, svg path {
     }
 }
 
+@media (min-width: 2300px) {
+    .lexcontainer.wrapper {
+        max-width: 2140px;
+    }
+}
+
 .lextooltip {
     position: fixed;
     background-color: var(--global-text-primary);
@@ -942,7 +1050,7 @@ a svg, svg path {
 /* Generic Popover */
 
 .lexpopover {
-    background-color: var(--global-color-primary);
+    background-color: var(--global-background);
     border-radius: 0.5rem;
     border: 1px solid #7a797c4f;
     padding: 0.25rem;
@@ -1023,6 +1131,7 @@ a svg, svg path {
     animation-duration: 400ms;
 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 	will-change: transform, opacity;
+    overflow: hidden;
 }
 
 @keyframes enterBottom {
@@ -1071,18 +1180,26 @@ a svg, svg path {
 
 .lexsheet[data-side="top"]{
 	animation-name: enterTop;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
 }
 
 .lexsheet[data-side="right"]{
 	animation-name: enterRight;
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
 }
 
 .lexsheet[data-side="bottom"]{
 	animation-name: enterBottom;
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
 }
 
 .lexsheet[data-side="left"]{
 	animation-name: enterLeft;
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
 }
 
 /* Dropdown Menu */
@@ -1094,11 +1211,11 @@ a svg, svg path {
     left: 0px;
     top: 0px;
     min-width: 172px;
-    max-width: 244px;
+    max-width: 220px;
     z-index: 150;
     display: flex;
     flex-direction: column;
-    padding: var(--global-padding-xs);
+    padding: var(--spacing-xs);
     border-radius: 6px;
     border: 1px solid #7a797c4f;
     outline: none;
@@ -1110,7 +1227,7 @@ a svg, svg path {
 .lexdropdownmenuitem {
     display: flex;
     flex-direction: row;
-    padding: var(--global-padding-md);
+    padding: var(--spacing-md);
     border-radius: 6px;
     gap: 0.5rem;
     white-space: nowrap;
@@ -1134,6 +1251,10 @@ a svg, svg path {
     cursor: default;
 }
 
+.lexdropdownmenuitem span {
+    max-width: 99%;
+}
+
 .lexdropdownmenuitem:not(.label, .disabled):hover {
     background-color: var(--global-color-tertiary);
 }
@@ -1185,7 +1306,7 @@ a svg, svg path {
 /* Area */
 
 .lexarea {
-    background-color: var(--global-color-primary);
+    background-color: var(--global-background);
     margin: 0;
 }
 
@@ -1221,7 +1342,7 @@ a svg, svg path {
 
 .lexpanel {
     margin: 0;
-    padding: var(--global-padding-xs);
+    padding: var(--spacing-sm);
     overflow: hidden;
     overflow-y: scroll;
 }
@@ -1240,8 +1361,8 @@ a svg, svg path {
 }
 
 .lexbranch .lexbranchcontent {
-    padding: var(--global-padding-xs);
-    background-color: var(--global-color-secondary);
+    padding: var(--spacing-xs);
+    background-color: var(--global-background-secondary);
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
 }
@@ -1255,10 +1376,10 @@ a svg, svg path {
     font-size: var(--global-font-size-lg);
     font-weight: 500;
     color: var(--global-text-primary);
-    background-color: var(--global-color-secondary);
+    background-color: var(--global-background-secondary);
     text-shadow: 0px 1px 6px #42424260;
     letter-spacing: calc(var(--global-font-size-lg) * 0.025);
-    padding: var(--global-padding-lg);
+    padding: var(--spacing-lg);
     display: flex;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
@@ -1312,11 +1433,12 @@ a svg, svg path {
 .lexcomponent {
     display: flex;
     align-items: center;
-    padding: var(--global-padding-xs);
+    padding: var(--spacing-xs);
     font-size: var(--global-font-size);
     color: var(--global-text-primary);
     line-height: 2;
     overflow: hidden;
+    transition: background-color 0.1s linear;
 }
 
 .lexinlinecomponents .lexcomponentname.float-center {
@@ -1408,18 +1530,21 @@ a svg, svg path {
     border-bottom: 1px solid #c1c1c1;
 }
 
-.lexcomponent input:not(.lexcheckbox, .lextoggle, .lexrangeslider) {
+.lexcomponent input {
     font-family: var(--global-font);
-    padding: var(--global-padding-xs);
-    color: var(--global-text-primary);
-    --background-color: var(--global-color-tertiary);
-    background-color: var(--background-color);
-    outline: none;
-    border-radius: 6px;
+    border-radius: 0.5rem;
     border: 1px solid var(--global-color-transparent);
     transition-property: color, background-color, border-color;
     transition-timing-function: ease-out;
     transition-duration: .15s;
+    outline: none;
+}
+
+.lexcomponent input:not(.lexcheckbox, .lextoggle, .lexrangeslider, .lexcounter) {
+    padding: var(--spacing-sm);
+    color: var(--global-text-primary);
+    --background-color: var(--global-color-secondary);
+    background-color: var(--background-color);
 }
 
 .lexcomponent input:not(.lexcheckbox, .lextoggle, .lexrangeslider, .outline):hover {
@@ -1444,7 +1569,7 @@ a svg, svg path {
     border-radius: 6px;
     position: relative;
     border: 1px solid transparent;
-    padding: var(--global-padding-xs) 0.75rem;
+    padding: var(--spacing-sm) 0.75rem;
 }
 
 .lexcomponent .lextext:disabled {
@@ -1465,7 +1590,7 @@ a svg, svg path {
     border: 1px solid #7a797c4f;
 }
 
-.lexcomponent .lextext.nobg {
+.lexcomponent .lextext.bg-none {
     background: none;
     border: 1px solid transparent;
 }
@@ -1475,7 +1600,7 @@ a svg, svg path {
     border: 1px dashed #7a797c4f;
 }
 
-.lexcomponent .lextext.nobg:hover {
+.lexcomponent .lextext.bg-none:hover {
     background: none;
 }
 
@@ -1504,7 +1629,7 @@ a svg, svg path {
     word-break: break-word;
     font-family: var(--global-font);
     background: none;
-    padding: var(--global-padding-md);
+    padding: var(--spacing-md);
     color: var(--global-text-primary);
     outline: none;
     border-radius: 6px;
@@ -1517,7 +1642,7 @@ a svg, svg path {
     border: 1px solid #7a797c4f;
 }
 
-.lexcomponent textarea.nobg {
+.lexcomponent textarea.bg-none {
     background: none;
     border: 1px solid transparent;
 }
@@ -1527,7 +1652,7 @@ a svg, svg path {
     border: 1px dashed #7a797c4f;
 }
 
-.lexcomponent textarea.outline:hover, .lexcomponent .lextext.nobg:hover {
+.lexcomponent textarea.outline:hover, .lexcomponent .lextext.bg-none:hover {
     background: none;
 }
 
@@ -1644,7 +1769,7 @@ a svg, svg path {
     font-weight: 600;
     font-size: var(--global-font-size);
     margin: 12px;
-    padding: var(--global-padding-xs) var(--global-padding-lg);
+    padding: var(--spacing-xs) var(--spacing-lg);
     line-height: 1.5;
     display: grid;
     align-content: center;
@@ -1678,13 +1803,13 @@ a svg, svg path {
 /* Button Component */
 
 .lexbutton {
-    --button-color: var(--global-color-tertiary);
-    --border-color: var(--global-color-quinary);
+    --button-color: var(--global-color-secondary);
+    --border-color: var(--global-border-color);
     background-color: var(--button-color);
     border: 1px solid transparent;
-    border-radius: 6px;
+    border-radius: 0.5rem;
     min-width: 1.8rem;
-    min-height: 22px !important;
+    height: calc(var(--spacing-md) * 4);
     align-content: center;
     color: var(--global-text-primary);
     outline: none;
@@ -1698,34 +1823,43 @@ a svg, svg path {
 }
 
 /* Colors */
-.lexbutton.primary { --button-color: var(--global-color-primary); --border-color: var(--global-color-quaternary); color: var(--global-text-primary); }
-.lexbutton.secondary { --button-color: var(--global-color-secondary); --border-color: var(--global-color-quaternary); color: var(--global-text-primary);  }
-.lexbutton.accent { --button-color: var(--global-color-accent); --border-color: var(--global-color-quaternary); color: #fefefe;  }
-.lexbutton.contrast { --button-color: var(--global-text-primary); --border-color: var(--global-color-quaternary); color: var(--global-color-primary);  }
+.lexbutton.primary { --button-color: var(--global-color-primary); color: var(--global-text-primary); }
+.lexbutton.secondary { --button-color: var(--global-color-secondary); color: var(--global-text-primary);  }
+.lexbutton.accent { --button-color: var(--global-color-accent); color: #fefefe;  }
+.lexbutton.contrast { --button-color: var(--global-text-primary); color: var(--global-color-primary);  }
 .lexbutton.success { --button-color: var(--global-color-success); --border-color: #013101; color: var(--border-color);  }
 .lexbutton.error { --button-color: var(--global-color-error); --border-color: #310108; color: var(--border-color);  }
 .lexbutton.warning { --button-color: var(--global-color-warning); --border-color: #793205; color: var(--border-color);  }
 
 /* Few Sizes */
+.lexbutton.no-h { height: unset; }
 .lexbutton.xs { width: 35%; margin: 0 auto; }
 .lexbutton.sm { width: 65%; margin: 0 auto; }
 
 /* Styles */
-.lexbutton.outline {
-    border-color: var(--button-color);
+.lexbutton.outline { border-color: var(--button-color); background: none; }
+.lexbutton.outline.accent, 
+.lexbutton.outline.contrast,
+.lexbutton.outline.success,
+.lexbutton.outline.error,
+.lexbutton.outline.warning { color: var(--button-color);  }
+/* .lexbutton.outline:not(.primary, .secondary) {
     color: var(--button-color);
-    background: none;
-}
+} */
 .lexbutton.dashed {
     border-style: dashed;
     border-color: var(--border-color);
 }
 
-.lexbutton:hover:not(.outline, .bg-none) {
+.lexbutton.bg-none {
+    border-radius: unset;
+}
+
+.lexbutton:hover:not(.outline, .bg-none, :disabled) {
     background-color: color-mix(in srgb, var(--button-color), #000 9%) !important;
 }
 
-:root[data-theme="light"] .lexbutton:hover:not(.outline) {
+:root[data-theme="light"] .lexbutton:hover:not(.outline, .bg-none, :disabled) {
     background-color: color-mix(in srgb, var(--button-color), #fff 9%) !important;
 }
 
@@ -1740,12 +1874,22 @@ a svg, svg path {
 .lexbutton:active:not(.lexbutton.combo) {
     background-color: color-mix(in srgb, var(--button-color), #fff 4%);
 }
+
 :root[data-theme="light"] .lexbutton:active:not(.lexbutton.combo) {
     background-color: color-mix(in srgb, var(--button-color), #000 4%);
 }
 
-.lexbutton:disabled, .lexbutton:disabled a {
+.lexbutton:disabled, .lexbutton:disabled a, .lexbutton:disabled svg {
+    color: var(--global-text-quaternary);
+}
+
+.lexbutton:disabled {
     color: var(--global-text-quaternary);
+    cursor: default;
+}
+
+.lexbutton:disabled:not(.bg-none) {
+    background-color: color-mix(in srgb, var(--button-color), #000 4%) !important;
 }
 
 .lexbutton.selected {
@@ -1771,6 +1915,10 @@ a svg, svg path {
     margin-left: 0.5rem;
 }
 
+/* .lexbutton.array {
+    padding: var(--global-padding-xs) 0.75rem;
+} */
+
 .lexbutton.array a {
     margin-right: 4px;
     margin-left: auto;
@@ -1780,10 +1928,10 @@ a svg, svg path {
 
 .lexcombobuttons .lexcombobuttonsbox {
     display: flex;
-    background-color: var(--global-color-tertiary);
+    background-color: var(--global-color-secondary);
     width: max-content;
     justify-self: center;
-    padding: var(--global-padding-xs);
+    padding: var(--spacing-xs);
     border-radius: 8px;
     gap: 0.2em;
 }
@@ -1800,7 +1948,7 @@ a svg, svg path {
     display: flex;
     padding: 0.35em 1em;
     transition: 0.2s;
-    --button-color: var(--global-color-tertiary);
+    --button-color: var(--global-color-secondary);
 }
 
 .lexcombobuttons .lexbutton.combo:hover {
@@ -2248,7 +2396,7 @@ dialog .lexselect .lexselectoptions {
     height: 16px;
     min-width: 16px !important;
     min-height: 16px !important;
-    background-color: var(--global-intense-background);
+    background-color: var(--global-background);
     border: 1px solid var(--global-text-tertiary) !important;
 }
 
@@ -2301,13 +2449,13 @@ dialog .lexselect .lexselectoptions {
     border-radius: 4px;
     border: 2px solid var(--global-color-transparent);
     margin-right: 2px;
-    background-color: var(--global-color-tertiary);
+    background-color: var(--global-color-secondary);
     transition: 0.1s linear;
     cursor: text;
 }
 
 .lexvector .vecbox:hover {
-    background-color: color-mix(in srgb, var(--global-color-tertiary), #000 7%);
+    background-color: color-mix(in srgb, var(--global-color-secondary), #000 7%);
 }
 
 .lexcomponent .numberbox .drag-icon,
@@ -2386,7 +2534,7 @@ input[type=number] {
     width: 100%;
     display: flex;
     flex-direction: column;
-    background-color: var(--global-color-tertiary);
+    background-color: var(--global-color-secondary);
     border: 1px solid var(--global-color-transparent);
     border-radius: 6px;
     margin-right: 2px;
@@ -2400,7 +2548,7 @@ input[type=number] {
 }
 
 .lexcomponent .numberbox:hover {
-    background-color: color-mix(in srgb, var(--global-color-tertiary), #000 7%);
+    background-color: color-mix(in srgb, var(--global-color-secondary), #000 7%);
 }
 
 .lexcomponent .numberbox:has(input:focus) {
@@ -2408,7 +2556,7 @@ input[type=number] {
 }
 
 .lexcomponent .numberbox .input-box {
-    padding-block: var(--global-padding-xs);
+    padding-block: var(--spacing-xs);
 }
 
 .lexcomponent .numberbox .input-box input {
@@ -2431,14 +2579,16 @@ input[type=number] {
 }
 
 .lexinputslider {
+    --track-height: 0.25rem;
+    --thumb-height: 0.75rem;
+    --color: var(--global-text-quaternary);
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     border: none !important;
     width: 100%;
-    height: 1px;
+    height: var(--track-height);
     outline: none;
-    opacity: 0.7;
     transition: opacity .2s;
     -moz-transition: .2s;
     -webkit-transition: .2s;
@@ -2449,44 +2599,57 @@ input[type=number] {
 }
 
 .lexinputslider::-moz-range-track {
-    height: 1px;
-    background: #a19dc9;
+    height: var(--track-height);
+    background: var(--color);
+    border-radius: 0.5rem;
 }
 
 .lexinputslider::-webkit-slider-runnable-track {
-    height: 1px;
-    background: #a19dc9;
+    height: var(--track-height);
+    background: var(--color);
+    border-radius: 0.5rem;
 }
 
 .lexinputslider::-webkit-slider-thumb {
     appearance: none;
     -webkit-appearance: none;
-    margin-top: -6px;
-    width: 12px;
-    height: 12px;
-    border: 1px solid #c9c7de;
-    border-radius: 6px;
-    background: var(--global-color-accent);
+    margin-top: calc(var(--thumb-height) * -0.5 + var(--track-height) * 0.5);
+    width: var(--thumb-height);
+    height: var(--thumb-height);
+    border-radius: 50%;
+    background: light-dark(var(--global-color-primary), var(--global-text-primary));
     cursor: pointer;
+    box-shadow: 0px 0px 2px 1px var(--global-color-secondary);
+}
+
+:root[data-theme="light"] .lexinputslider::-webkit-slider-thumb {
+    box-shadow: none;
+    border: 1px solid var(--global-text-primary);
 }
 
 .lexinputslider::-moz-range-thumb {
-    margin-top: -8px;
-    width: 8px;
-    height: 8px;
-    border-radius: 6px;
-    background: #a19dc9;
+    margin-top: calc(var(--thumb-height) * -0.5 + var(--track-height) * 0.5);
+    width: var(--thumb-height);
+    height: var(--thumb-height);
+    border-radius: 50%;
+    background: light-dark(var(--global-color-primary), var(--global-text-primary));
     cursor: pointer;
+    box-shadow: 0px 0px 2px 1px var(--global-color-secondary);
+}
+
+:root[data-theme="light"] .lexinputslider::-moz-range-thumb {
+    box-shadow: none;
+    border: 1px solid var(--global-text-primary);
 }
 
 /* Range Component */
 
 .lexrangeslider {
     --range-thumb-color: var(--global-color-primary);
-    --range-thumb-size: 1rem;
+    --range-thumb-size: 0.75rem;
     --range-progress: currentColor;
     --range-fill: 1;
-    --range-thumb-padding: 0.2rem;
+    --range-thumb-padding: 0.1rem;
     --range-bg: color-mix(in oklab,currentColor 20%,#0000);
     --range-dir: 1;
     --radius-selector: 0.5rem;
@@ -2618,7 +2781,7 @@ input[type=number] {
 
 .lexcomponent .lexpad .lexinnerpad {
     border-radius: 4px;
-    background-color: light-dark(var(--global-color-tertiary), var(--global-intense-background));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-background));
 }
 
 .lexcomponent .lexpad .lexinnerpad .lexpadthumb {
@@ -2697,7 +2860,6 @@ input[type=number] {
 
 .lextree .lextreetools {
     background: var(--global-color-tertiary);
-    padding: 2px;
     padding-inline: 8px;
     display: flex;
     align-items: center;
@@ -2800,12 +2962,13 @@ input[type=number] {
 }
 
 .lextree .lextreeitem.draggingover {
-    background: #7b8ae27b;
+    background: light-dark(var(--global-color-accent-light), var(--global-color-accent-dark));
+    color: #f4f4f5;
 }
 
 .lextree .lextreeitem:hover {
     color: var(--global-text-primary);
-    background: var(--global-color-secondary);
+    background: var(--global-color-primary);
 }
 
 .lextree .lextreeitem.selected {
@@ -2923,15 +3086,15 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 /* Badges */
 
 .lexbadge {
-    border-radius: 0.4rem;
-    color: #f4f4f5;
+    border-radius: 1rem;
+    color: #e4e4e4;
     border: 1px solid var(--badge-color, #14171a);
-    width: fit-content;
-    height: 1.1rem;
+    min-width: 1.2rem;
+    min-height: 1.2rem;
     justify-content: center;
     align-items: center;
     gap: 0.25rem;
-    padding-inline: 0.5rem;
+    padding-inline: 0.3rem;
     font-size: var(--global-font-size);
     display: inline-flex;
     background-color: var(--badge-color, #1d232a);
@@ -2952,27 +3115,25 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background-color: #0000;
     background-image: none;
 }
-.lexbadge.no-bg {
+.lexbadge.bg-none {
     background: none;
     border: none;
 }
 /* Sizes */
-.lexbadge.xs { height: 0.7rem; padding-inline: 0.3rem; font-size: var(--global-font-size-xs); }
-.lexbadge.sm { height: 0.9rem; padding-inline: 0.4rem; font-size: var(--global-font-size-sm); }
+.lexbadge.xs {  min-width: 1rem; min-height: 1rem; font-size: var(--global-font-size-xs); }
+.lexbadge.sm {  min-width: 1rem; min-height: 1rem; font-size: var(--global-font-size-sm); }
 /* .lexbadge.md { default } */
-.lexbadge.lg { height: 1.3rem; padding-inline: 0.7rem; font-size: var(--global-font-size-lg); }
-.lexbadge.xl { height: 1.5rem; padding-inline: 0.85rem; font-size: var(--global-font-size-xl) }
+.lexbadge.lg { min-width: 1.25rem; min-height: 1.25rem; font-size: var(--global-font-size-lg); }
+.lexbadge.xl { min-width: 1.45rem; min-height: 1.45rem; font-size: var(--global-font-size-xl) }
 
 .lexbadge-parent {
     position: relative;
 }
 
 .lexbadge-parent .lexbadge {
-    border-radius: 0.5rem;
-    padding-inline: 0.25rem;
     position: absolute;
-    margin-top: -0.25rem;
-    right: 0.25rem;
+    top: 0;
+    right: 0;
     border: none !important;
 }
 
@@ -2986,7 +3147,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexmenubar {
     width: 100%;
-    background-color: var(--global-color-primary);
+    background-color: var(--global-background);
     display: flex;
     overflow: hidden;
     height: 100%;
@@ -3029,7 +3190,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexmenubar .lexmenubuttons {
     display: inline-flex;
-    background-color: var(--global-color-secondary);
+    background-color: var(--global-color-primary);
     height: 75%;
     margin: auto;
     border-radius: 6px;
@@ -3046,16 +3207,16 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin-right: 12px;
 }
 
-.lexmenubar .lexbutton {
+.lexmenubuttons .lexbutton {
     padding-inline: 0.2rem;
     min-width: 0rem;
 }
 
-.lexmenubar .lexbutton:hover, :root[data-theme="light"] .lexmenubar .lexbutton:hover {
+.lexmenubuttons .lexbutton:hover, :root[data-theme="light"] .lexmenubuttons .lexbutton:hover {
     background-color: transparent !important;
 }
 
-.lexmenubar .lexbutton:active, :root[data-theme="light"] .lexmenubar .lexbutton:active {
+.lexmenubuttons .lexbutton:active, :root[data-theme="light"] .lexmenubuttons .lexbutton:active {
     background-color: transparent !important;
 }
 
@@ -3141,7 +3302,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexcontextmenu .lexmenuboxentry.cmtitle {
-    background: light-dark(var(--global-color-tertiary), var(--global-intense-background));
+    background: light-dark(var(--global-color-tertiary), var(--global-background));
     font-weight: 600;
     cursor: default;
 }
@@ -3236,6 +3397,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     margin: 0 auto;
     margin-top: 0.4rem;
     margin-bottom: 0.4rem;
+    display: flex;
+    flex-shrink: 0;
 }
 
 .lexsidebar .lexsidebarfilter {
@@ -3282,8 +3445,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexsidebar .lexsidebarentry {
     width: 100%;
-    padding-inline: var(--global-padding-md);
-    padding-block: var(--global-padding-sm);
+    padding-inline: var(--spacing-md);
+    padding-block: var(--spacing-sm);
     margin-block: 0.15rem;
     border-radius: 8px;
     cursor: pointer;
@@ -3310,11 +3473,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background-color: var(--global-color-accent);
 }
 
-.lexsidebar .lexsidebarentry.selected .lexsidebarentrycontent > a {
-    color: #f4f4f4;
-}
-
-.lexsidebar .lexsidebarentry.selected .lexsidebarentryicon svg path {
+.lexsidebar .lexsidebarentry.selected .lexsidebarentrycontent > a,
+.lexsidebar .lexsidebarentry.selected .lexsidebarentryicon svg path,
+.lexsidebar .lexsidebarentry.selected span {
     color: #f4f4f4;
 }
 
@@ -3451,7 +3612,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexsidebar .lexavatar {
-    background-color: var(--global-intense-background);
+    background-color: var(--global-background);
 }
 
 .lexsidebar:not(.collapsing) .lexavatar:has(svg) {
@@ -3588,7 +3749,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 .lexoverlaybuttons .lexbutton {
     --button-color: var(--global-color-secondary);
-    padding: var(--global-padding-sm) var(--global-padding-sm);
+    padding: var(--spacing-sm) var(--spacing-sm);
     font-size: var(--global-font-size-lg);
     border-radius: 10px;
     justify-content: center;
@@ -3665,7 +3826,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexareatabs.dockingtab {
-    background-color: #9ebbd65e !important;
+    background-color: var(--global-color-tertiary) !important;
 }
 
 .lexareatabs .lexareatab {
@@ -3693,14 +3854,14 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexareatabs.row {
-    background-color: var(--global-color-tertiary);
+    background-color: var(--global-color-secondary);
     border-radius: 8px;
     padding: 3px;
     gap: 0.1em;
 }
 
 .lexareatabs.row .lexareatab {
-    padding: var(--global-padding-md) 1.45em;
+    padding: var(--spacing-md) 1.45em;
     transition: 0.1s;
     background: none;
     border-radius: 6px;
@@ -3783,51 +3944,8 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 
 /* Card Component */
 
-.lexcard {
-    position: relative;
-}
-
-.lexcard img {
-    width: 100%;
-    height: 128px;
-    object-fit: cover;
-    border-radius: 6px;
-    outline: 2px solid var(--global-text-tertiary);
-}
-
-.lexcard:hover a {
-    color: var(--global-color-accent);
-}
-
-.lexcard:hover img {
-    outline: 2px solid var(--global-color-accent);
-}
-
-.lexcard span {
-    font-size: var(--global-font-size-lg);
-    font-weight: 500;
-    width: 100%;
-    display: flex;
-    background-color: var(--global-blur-background);
-    --webkit-backdrop-filter: blur(12px);
-    backdrop-filter: blur(12px);
-    align-items: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: var(--global-padding-xs);
-    padding-inline-start: 8px;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
-}
-
-.lexcard span a {
-    color: var(--global-text-secondary);
-    text-decoration: none;
-}
-
-.lexcard span a:hover {
-    color: var(--global-color-accent);
+.lexcard.selectable:hover {
+    border-color: var(--global-color-accent);
 }
 
 /* Layers Component */
@@ -3871,8 +3989,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 /* List Component */
 
 .lexlist {
-    background: var(--global-color-primary);
+    background: var(--global-background);
     border-radius: 4px;
+    border: 1px solid var(--global-border-color);
     padding: 4px;
     display: grid;
 }
@@ -3932,7 +4051,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lexcomponent:has(.lexcheckboxsubmenu)[data-opened=true],
 .lexcomponent:has(.lextogglesubmenu)[data-opened=true],
 .lexcomponent:has(.lexcustomcontainer)[data-opened=true] {
-    background-color: light-dark(var(--global-color-tertiary), var(--global-medium-background));
+    background-color: light-dark(var(--global-color-tertiary), var(--global-background-secondary));
 }
 
 .lexarray .lexcomponent {
@@ -3963,9 +4082,9 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     display: inline-flex;
     flex-wrap: wrap;
     line-height: 12px;
-    background-color: var(--global-color-tertiary);
+    background-color: var(--global-color-secondary);
     border-radius: 8px;
-    padding: var(--global-padding-xs);
+    padding: var(--spacing-xs);
 }
 
 .lextags input {
@@ -3976,7 +4095,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     padding: 6px;
     background-color: var(--global-color-primary);
     margin: 2px;
-    border-radius: 6px;
+    border-radius: 8px;
     min-width: 16px;
     justify-content: center;
     color: var(--global-text-primary);
@@ -3995,34 +4114,6 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     cursor: pointer;
 }
 
-/* Counter Component */
-
-.lexcounter {
-    display: flex;
-    place-content: center;
-}
-
-.lexcounterbox {
-    display: grid;
-    text-align: -webkit-center;
-    text-align: center;
-    margin-left: 16px;
-    margin-right: 16px;
-}
-
-.lexcounterbox .lexcountervalue {
-    width: 100%;
-    font-size: var(--global-font-size-xxl);
-    font-weight: 700;
-}
-
-.lexcounterbox .lexcounterlabel {
-    width: 100%;
-    margin-top: -18px;
-    font-size: var(--global-font-size-sm);
-    color: var(--global-text-secondary);
-}
-
 /* Table Component */
 
 .lextable {
@@ -4032,12 +4123,12 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 .lextable table {
     width: 100%;
     border: 1px solid;
-    border-color: var(--global-color-tertiary);
+    border-color: var(--global-color-secondary);
     border-collapse: separate;
     border-radius: 8px;
     border-spacing: 0px;
     overflow: hidden;
-    background-color: var(--global-color-primary);
+    background-color: var(--global-background);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
@@ -4063,7 +4154,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lextable tr:has(input:checked) {
-    background-color: var(--global-color-tertiary);
+    background-color: var(--global-color-secondary);
 }
 
 .lextable tr:hover, .lextable tr.dragging {
@@ -4076,7 +4167,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lextable th, .lextable td {
-    padding-block: var(--global-padding-sm);
+    padding-block: var(--spacing-sm);
     padding-inline: 12px;
     text-align: left;
     align-content: center;
@@ -4096,7 +4187,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     cursor: pointer;
     transition: all 0.1s linear;
     white-space: nowrap;
-    background-color: var(--global-color-tertiary);
+    background-color: var(--global-color-primary);
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -4158,7 +4249,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     border-top: 2px solid;
     overflow: hidden;
     white-space: nowrap;
-    border-color: light-dark(#dbd8d8c0, #5c5b5b7a);
+    border-color: var(--global-border-color);
 }
 
 .lextable thead:first-child tr:first-child th:first-child, .lextable tbody:first-child tr:first-child td:first-child {
@@ -4589,7 +4680,7 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     min-height: 190px;
     height: 100%;
     border-radius: 6px;
-    background-color: var(--global-color-primary);
+    background-color: var(--global-background);
 }
 
 .lexassetbrowser .lexarea {
@@ -4616,11 +4707,11 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 }
 
 .lexassetscontent.dragging {
-    background-color: var(--global-intense-background);
+    background-color: var(--global-background);
 }
 
 ul.lexassetscontent {
-    /* height: 100%; */
+    height: 100%;
     -webkit-text-size-adjust: 100%;
     padding: 0 1em;
     margin: 0;
@@ -4652,8 +4743,8 @@ ul.lexassetscontent {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    width: 10em;
-    height: 11.4em;
+    width: calc(10em * var(--av-grid-scale));
+    height: calc(10em * var(--av-grid-scale));
     display: inline-block;
     vertical-align: top;
     margin: 0.5em;
@@ -4661,15 +4752,12 @@ ul.lexassetscontent {
     padding: 0;
     box-shadow: 0 0 2px rgba(0, 0, 0, .14);
     overflow: hidden;
-    background-color: var(--global-color-quaternary);
+    background: linear-gradient(180deg, var(--global-color-quaternary) 10%, var(--global-background-secondary));
     cursor: pointer;
     text-align: center;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
     position: relative;
-    border-top: 4px solid rgba(0, 0, 0, 0);
+    outline: 1px solid light-dark(#dfdfdf, #ffffff2c);
+    border-radius: 10%;
 }
 
 .lexassetscontent .lexitemdesc {
@@ -4722,34 +4810,6 @@ ul.lexassetscontent {
     color: var(--global-text-tertiary);
 }
 
-.lexassetscontent li.image {
-    border-color: rgb(239, 188, 78);
-}
-
-.lexassetscontent li.script {
-    border-color: rgb(207, 127, 36);
-}
-
-.lexassetscontent li.json {
-    border-color: rgb(163, 213, 225);
-}
-
-.lexassetscontent li.mesh {
-    border-color: rgb(156, 68, 68);
-}
-
-.lexassetscontent li.clip {
-    border-color: rgb(176, 97, 187);
-}
-
-.lexassetscontent li.sigml {
-    border-color: rgb(154, 188, 101);
-}
-
-.lexassetscontent li.video {
-    border-color: rgb(84, 119, 214);
-}
-
 .lexassetscontent li:hover {
     outline: 2px solid var(--global-color-accent);
 }
@@ -4763,7 +4823,7 @@ ul.lexassetscontent {
 .lexassetscontent li .lexassettitle {
     position: absolute;
     width: 100%;
-    height: 24px;
+    height: 2em;
     bottom: 0px;
     -webkit-text-size-adjust: 100%;
     font-size: var(--global-font-size);
@@ -4772,13 +4832,16 @@ ul.lexassetscontent {
     text-align: center;
     display: block;
     padding: 0.1em;
+    padding-inline: 0.75em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     align-content: center;
-    background-color: var(--global-intense-background);
+    background-color: var(--global-blur-background);
+    text-shadow: 0 0 2px #00000048;
     transition: all 0.1s;
     z-index: 1;
+    pointer-events: none;
 }
 
 .lexassetscontent.list li .lexassettitle, .lexassetscontent.compact li .lexassettitle {
@@ -4837,8 +4900,8 @@ ul.lexassetscontent {
     text-align: center;
     color: white;
     border: 0;
-    max-width: 10em;
-    max-height: 10em;
+    /* max-width: 10em;
+    max-height: 10em; */
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -4871,6 +4934,19 @@ ul.lexassetscontent {
     transform: scale(1.12);
 }
 
+/* Animation applied to dragged element */
+.moving-to-folder {
+    animation: moveToFolder 0.25s cubic-bezier(0.4, 0, 0.3, 1) forwards;
+    pointer-events: none;
+    opacity: 0.8;
+}
+
+/* Shrink and fade the dragged element before it's re-rendered in its new folder */
+@keyframes moveToFolder {
+    0%   { transform: scale(1); opacity: 1; }
+    100% { transform: scale(0.6); opacity: 0; }
+}
+
 /* Tour */
 
 .tour-mask {
@@ -4954,7 +5030,7 @@ ul.lexassetscontent {
     display: flex;
     position: relative;
     /* overflow: inherit; */
-    background-color: var(--global-color-secondary);
+    background-color: var(--global-color-primary);
 }
 
 .codebasearea * {
@@ -4973,14 +5049,14 @@ ul.lexassetscontent {
     border-radius: 0px !important;
     margin: 0px !important;
     border: none;
-    background-color: var(--global-color-secondary) !important;
+    background-color: var(--global-color-primary) !important;
     border-bottom: 1px solid transparent;
     transition: none;
     display: flex !important;
 }
 
 .codebasearea .lexareatab:hover {
-    background-color: var(--global-color-tertiary) !important;
+    background-color: var(--global-color-secondary) !important;
 }
 
 .codebasearea .lexareatab:first-child {
@@ -4992,7 +5068,7 @@ ul.lexassetscontent {
 }
 
 .codebasearea .lexareatab.selected {
-    background-color: light-dark(var(--global-color-secondary), var(--global-medium-background)) !important;
+    background-color: light-dark(var(--global-color-secondary), var(--global-background-secondary)) !important;
     border-bottom: 1px solid var(--global-color-accent);
     color: var(--global-text-primary) !important;
 }
@@ -5041,7 +5117,7 @@ ul.lexassetscontent {
 }
 
 .lexcodetabinfo {
-    background-color: var(--global-color-secondary);
+    background-color: var(--global-color-primary);
     position: absolute;
     z-index: 3;
     bottom: 0px;
@@ -5117,7 +5193,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor pre.active-line {
-    background-color: #333437a9;
+    background-color: color-mix(in srgb, var(--global-color-primary), var(--global-text-primary) 5%);
 }
 
 .lexcodeeditor.disabled pre.active-line {
@@ -5154,7 +5230,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor pre .line-gutter {
-    color: var(--global-text-tertiary);
+    color: var(--global-color-quinary);
     width: 48px;
     height: var(--code-editor-row-height);
     font-size: var(--code-editor-font-size);
@@ -5171,7 +5247,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor pre.active-line .line-gutter {
-    color: var(--global-text-primary);
+    color: var(--global-text-quaternary);
 }
 
 .lexcodeeditor.no-gutter pre .line-gutter {
@@ -5238,7 +5314,7 @@ ul.lexassetscontent {
 
 .lexcodescrollbar div {
     /* thumb */
-    background-color: #bbbbbb3d !important;
+    background-color: var(--global-color-secondary) !important;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
@@ -5254,7 +5330,7 @@ ul.lexassetscontent {
 
 .lexcodescrollbar div:hover {
     /* thumb */
-    background-color: #bbbbbb8c !important;
+    background-color: var(--global-color-tertiary) !important;
 }
 
 .lexcodeeditor .lexcodeselection,
@@ -5285,13 +5361,13 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .searchbox {
-    background-color: var(--global-color-secondary);
+    background-color: var(--global-color-primary);
     position: absolute;
     right: 6px;
     top: 26px;
     z-index: 100;
-    border-radius: 4px;
-    border: 1px solid var(--global-color-tertiary);
+    border-radius: 8px;
+    border: 1px solid var(--global-border-color);
     box-shadow: 0 0px 4px #101010;
     overflow-y: scroll;
     transform: translateY(-96px);
@@ -5309,7 +5385,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .autocomplete {
-    background-color: var(--global-medium-background);
+    background-color: var(--global-color-primary);
     width: 256px;
     max-height: 132px;
     position: absolute;
@@ -5317,8 +5393,8 @@ ul.lexassetscontent {
     top: 0;
     visibility: hidden;
     z-index: 100;
-    border-radius: 4px;
-    border: 1px solid var(--global-color-tertiary);
+    border-radius: 8px;
+    border: 1px solid var(--global-border-color);
     box-shadow: 0 0px 4px #101010;
     overflow-x: hidden;
     overflow-y: scroll;
@@ -5343,7 +5419,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .autocomplete pre:hover {
-    background-color: var(--global-color-tertiary);
+    background-color: var(--global-color-secondary);
     cursor: pointer;
 }
 
@@ -5933,7 +6009,7 @@ ul.lexassetscontent {
 }
 
 .lexvideoeditor .lexcontrolspanel {
-    background-color: var(--global-intense-background);
+    background-color: var(--global-background);
     margin: 0;
     display: flex;
     align-content: center;
@@ -5986,6 +6062,8 @@ ul.lexassetscontent {
   background-color: #ffffff;
   cursor: pointer;
   border-radius: 5px;
+  border-style: solid;
+  border-width: 1.5px;
 }
 
 .resize-handle.tl {
@@ -6012,30 +6090,56 @@ ul.lexassetscontent {
   cursor: nwse-resize;
 }
 
+.resize-handle.r {
+  top: 50%;
+  right: -5px;
+  cursor: ew-resize;
+}
+.resize-handle.l {
+  top: 50%;
+  left: -5px;
+  cursor: ew-resize;
+}
+.resize-handle.t {
+  top: -5px;
+  left: 50%;
+  cursor: ns-resize;
+}
+.resize-handle.b {
+  bottom: -5px;
+  left: 50%;
+  cursor: ns-resize;
+}
+
 /* Class utilities */
 
 /* Colors */
 /* Using !important to override anything written in main stylesheet */
 
-.bg-primary { --background-color: var(--global-color-primary); background-color: var(--background-color)!important }
-.bg-secondary { --background-color: var(--global-color-secondary); background-color: var(--background-color)!important }
-.bg-tertiary { --background-color: var(--global-color-tertiary); background-color: var(--background-color)!important }
-.bg-quaternary { --background-color: var(--global-color-quaternary); background-color: var(--background-color)!important }
-.bg-accent { --background-color: var(--global-color-accent); background-color: var(--background-color)!important }
-.bg-contrast { --background-color: var(--global-text-primary); background-color: var(--background-color)!important }
-.bg-success { --background-color: var(--global-color-success); background-color: var(--background-color)!important }
-.bg-error { --background-color: var(--global-color-error); background-color: var(--background-color)!important }
-.bg-warning { --background-color: var(--global-color-warning); background-color: var(--background-color)!important }
-.bg-white { --background-color: white; background-color: var(--background-color)!important }
-.bg-black { --background-color: black; background-color: var(--background-color)!important }
-.bg-blur { --background-color: var(--global-blur-background); background-color: var(--background-color)!important }
+.bg-background { --background-color: var(--global-background); background-color: var(--background-color) !important }
+.bg-primary { --background-color: var(--global-color-primary); background-color: var(--background-color) !important }
+.bg-secondary { --background-color: var(--global-color-secondary); background-color: var(--background-color) !important }
+.bg-tertiary { --background-color: var(--global-color-tertiary); background-color: var(--background-color) !important }
+.bg-quaternary { --background-color: var(--global-color-quaternary); background-color: var(--background-color) !important }
+.bg-quinary { --background-color: var(--global-color-quinary); background-color: var(--background-color) !important }
+.bg-accent { --background-color: var(--global-color-accent); background-color: var(--background-color) !important }
+.bg-accent-light { --background-color: var(--global-color-accent-light); background-color: var(--background-color) !important }
+.bg-accent-dark { --background-color: var(--global-color-accent-dark); background-color: var(--background-color) !important }
+.bg-contrast { --background-color: var(--global-text-primary); background-color: var(--background-color) !important }
+.bg-success { --background-color: var(--global-color-success); background-color: var(--background-color) !important }
+.bg-error { --background-color: var(--global-color-error); background-color: var(--background-color) !important }
+.bg-warning { --background-color: var(--global-color-warning); background-color: var(--background-color) !important }
+.bg-blur { --background-color: var(--global-blur-background); background-color: var(--background-color) !important }
 .bg-none { background: none !important }
 
 .hover\:bg-primary:hover { background-color: var(--global-color-primary) !important }
 .hover\:bg-secondary:hover { background-color: var(--global-color-secondary) !important }
 .hover\:bg-tertiary:hover { background-color: var(--global-color-tertiary) !important }
 .hover\:bg-quaternary:hover { background-color: var(--global-color-quaternary) !important }
+.hover\:bg-quinary:hover { background-color: var(--global-color-quinary) !important }
 .hover\:bg-accent:hover { background-color: var(--global-color-accent) !important }
+.hover\:bg-accent-light:hover { background-color: var(--global-color-accent-light) !important }
+.hover\:bg-accent-dark:hover { background-color: var(--global-color-accent-dark) !important }
 .hover\:bg-contrast:hover { background-color: var(--global-text-primary) !important }
 .hover\:bg-success:hover { background-color: var(--global-color-success) !important }
 .hover\:bg-error:hover { background-color: var(--global-color-error) !important }
@@ -6048,19 +6152,23 @@ ul.lexassetscontent {
 .fg-secondary { color: var(--global-text-secondary) !important }
 .fg-tertiary { color: var(--global-text-tertiary) !important }
 .fg-quaternary { color: var(--global-text-quaternary) !important }
+.fg-quinary { color: var(--global-text-quinary) !important }
 .fg-accent { color: var(--global-color-accent) !important }
+.fg-accent-light { color: var(--global-color-accent-light) !important }
+.fg-accent-dark { color: var(--global-color-accent-dark) !important }
 .fg-contrast { color: var(--global-color-primary) !important }
 .fg-success { color: var(--global-color-success) !important }
 .fg-error { color: var(--global-color-error) !important }
 .fg-warning { color: var(--global-color-warning) !important }
-.fg-white { color: white !important }
-.fg-black { color: black !important }
 
 .hover\:fg-primary:hover { color: var(--global-text-primary) !important }
 .hover\:fg-secondary:hover { color: var(--global-text-secondary) !important }
 .hover\:fg-tertiary:hover { color: var(--global-text-tertiary) !important }
 .hover\:fg-quaternary:hover { color: var(--global-text-quaternary) !important }
+.hover\:fg-quinary:hover { color: var(--global-text-quinary) !important }
 .hover\:fg-accent:hover { color: var(--global-color-accent) !important }
+.hover\:fg-accent-light:hover { color: var(--global-color-accent-light) !important }
+.hover\:fg-accent-dark:hover { color: var(--global-color-accent-dark) !important }
 .hover\:fg-contrast:hover { color: var(--global-color-primary) !important }
 .hover\:fg-success:hover { color: var(--global-color-success) !important }
 .hover\:fg-error:hover { color: var(--global-color-error) !important }
@@ -6069,7 +6177,7 @@ ul.lexassetscontent {
 .hover\:scale-xs:hover { transform: scale(1.01); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
 .hover\:scale-sm:hover { transform: scale(1.025); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
 .hover\:scale-md:hover { transform: scale(1.05); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
-.hover\:scale-bg:hover { transform: scale(1.1); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
+.hover\:scale-lg:hover { transform: scale(1.1); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
 .hover\:scale-xl:hover { transform: scale(1.25); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.19); }
 
 .stroke-none { stroke: none }
@@ -6077,14 +6185,49 @@ ul.lexassetscontent {
 
 /* Layout */
 
-.flex { display: flex }
-.inline-flex { display: inline-flex !important }
-.inline-grid { display: inline-grid !important }
-.flex-fill { flex: 1 0 0% }
-.grid { display: grid }
 .block { display: block }
 .inline-block { display: inline-block }
 .hidden { display: none !important }
+.grid { display: grid }
+.inline-grid { display: inline-grid !important }
+.flex { display: flex }
+.inline-flex { display: inline-flex !important }
+.flex-fill { flex: 1 0 0% }
+.flex-auto { flex: 0 0 auto }
+.flex-auto-fill { flex: 1 1 auto }
+.flex-col { flex-direction: column }
+.flex-row { flex-direction: row }
+.flex-wrap { flex-wrap: wrap }
+
+/* Grid columns and rows */
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+
+.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
+.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
+.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
+.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
+.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
+.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
+
+/* Column/row span helpers */
+.col-span-1 { grid-column: span 1 / span 1; }
+.col-span-2 { grid-column: span 2 / span 2; }
+.col-span-3 { grid-column: span 3 / span 3; }
+.col-span-4 { grid-column: span 4 / span 4; }
+.col-span-5 { grid-column: span 5 / span 5; }
+.col-span-6 { grid-column: span 6 / span 6; }
+.col-span-full { grid-column: 1 / -1; }
+
+.row-span-1 { grid-row: span 1 / span 1; }
+.row-span-2 { grid-row: span 2 / span 2; }
+.row-span-3 { grid-row: span 3 / span 3; }
+.row-span-4 { grid-row: span 4 / span 4; }
+.row-span-full { grid-row: 1 / -1; }
 
 .overflow-auto { overflow: auto }
 .overflow-scroll { overflow: scroll }
@@ -6102,13 +6245,13 @@ ul.lexassetscontent {
 .text-center { text-align: center }
 .text-end { text-align: end }
 
-.leading-none { line-height: 1 }
-.leading-tight { line-height: 1.25 }
-.leading-snug { line-height: 1.375 }
-.leading-normal { line-height: 1.5 }
-.leading-relaxed { line-height: 1.625 }
-.leading-loose { line-height: 2 }
-.leading-inherit { line-height: inherit }
+.leading-none { line-height: 1 !important }
+.leading-tight { line-height: 1.25 !important }
+.leading-snug { line-height: 1.375 !important }
+.leading-normal { line-height: 1.5 !important }
+.leading-relaxed { line-height: 1.625 !important }
+.leading-loose { line-height: 2 !important }
+.leading-inherit { line-height: inherit !important }
 
 .leading-3 { line-height: 0.75rem }
 .leading-4 { line-height: 1rem }
@@ -6128,10 +6271,6 @@ ul.lexassetscontent {
 .line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3 }
 .line-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4 }
 
-.flex-col { flex-direction: column }
-.flex-row { flex-direction: row }
-.flex-wrap { flex-wrap: wrap }
-
 .items-start { place-items: start }
 .items-center { place-items: center }
 .items-end { place-items: end }
@@ -6342,7 +6481,10 @@ ul.lexassetscontent {
 .text-md { font-size: var(--global-font-size); line-height: 1.2rem }
 .text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
 .text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
-.text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.6rem }
+.text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+.text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+.text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+.text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 
 .font-light { font-weight: 300 }
 .font-normal { font-weight: 400 }
@@ -6421,6 +6563,20 @@ ul.lexassetscontent {
 .h-15 { height: 3.75rem }
 .h-16 { height: 4rem }
 .h-32 { height: 8rem }
+.h-48 { height: 12rem }
+.h-64 { height: 16rem }
+
+.max-w-none { max-width: none }
+.max-w-max { max-width: max-content }
+.max-w-full { max-width: 100% }
+.max-w-xs { max-width: var(--container-xs) }
+.max-w-sm { max-width: var(--container-sm) }
+.max-w-md { max-width: var(--container-md) }
+.max-w-lg { max-width: var(--container-lg) }
+.max-w-xl { max-width: var(--container-xl) }
+.max-w-xxl { max-width: var(--container-xxl) }
+.max-w-3xl { max-width: var(--container-3xl) }
+.max-w-4xl { max-width: var(--container-4xl) }
 
 .resize-none { resize: none }
 
@@ -6448,7 +6604,7 @@ ul.lexassetscontent {
 
 /* Borders / Radius / Shadow */
 
-.border { border: 1px solid var(--global-color-tertiary) }
+.border { border: 1px solid var(--global-border-color) }
 .border-none { border: none }
 .border-colored { border: 1px solid currentColor }
 
@@ -6457,10 +6613,10 @@ ul.lexassetscontent {
 .border-dotted { border-style: dotted }
 .border-double { border-style: double }
 
-.border-top { border-top: 1px solid var(--global-color-tertiary) }
-.border-bottom { border-bottom: 1px solid var(--global-color-tertiary) }
-.border-left { border-left: 1px solid var(--global-color-tertiary) }
-.border-right { border-right: 1px solid var(--global-color-tertiary) }
+.border-top { border-top: 1px solid var(--global-border-color) }
+.border-bottom { border-bottom: 1px solid var(--global-border-color) }
+.border-left { border-left: 1px solid var(--global-border-color) }
+.border-right { border-right: 1px solid var(--global-border-color) }
 
 .border-0 { border-width: 0px }
 .border-2 { border-width: 2px }
@@ -6479,7 +6635,7 @@ ul.lexassetscontent {
 .rounded-md { border-radius: 0.375rem !important }
 .rounded-lg { border-radius: 0.5rem !important }
 .rounded-xl { border-radius: 0.75rem !important }
-.rounded-2xl { border-radius: 1rem !important }
+.rounded-xxl { border-radius: 1rem !important }
 .rounded-3xl { border-radius: 1.5rem !important }
 .rounded-full { border-radius: 9999px !important }
 .rounded-inherit { border-radius: inherit !important }
@@ -6529,6 +6685,38 @@ ul.lexassetscontent {
 
 /* Media queries for sizes */
 
+@media (min-width: 420px) {
+    .xs\:hidden { display: none !important }
+    .xs\:block { display: block !important }
+    .xs\:inline { display: inline !important }
+    .xs\:flex { display: flex !important }
+    .xs\:grid { display: grid !important }
+    .xs\:inline-flex { display: inline-flex !important }
+    .xs\:inline-block { display: inline-block !important }
+    .xs\:flex-fill { flex: 1 0 0% !important }
+
+    .xs\:w-full { width: 100% !important }
+    .xs\:w-screen { width: 100vw !important }
+    .xs\:w-auto { width: auto !important }
+    .xs\:h-full { height: 100% !important }
+    .xs\:h-screen { height: 100vh !important }
+    .xs\:h-auto { height: auto !important }
+    .xs\:w-2\/3 { width: 66.666% !important}
+    .xs\:w-1\/2 { width: 50% !important }
+    .xs\:w-1\/3 { width: 33.333% !important }
+    .xs\:w-1\/4 { width: 25% !important }
+
+    .xs\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .xs\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .xs\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .xs\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .xs\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .xs\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .xs\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .xs\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .xs\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
+}
+
 @media (min-width: 768px) {
     .sm\:hidden { display: none !important }
     .sm\:block { display: block !important }
@@ -6545,9 +6733,20 @@ ul.lexassetscontent {
     .sm\:h-full { height: 100% !important }
     .sm\:h-screen { height: 100vh !important }
     .sm\:h-auto { height: auto !important }
+    .sm\:w-2\/3 { width: 66.666% !important}
     .sm\:w-1\/2 { width: 50% !important }
     .sm\:w-1\/3 { width: 33.333% !important }
     .sm\:w-1\/4 { width: 25% !important }
+
+    .sm\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .sm\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .sm\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .sm\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .sm\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .sm\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .sm\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .sm\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .sm\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 }
 
 @media (min-width: 1024px) {
@@ -6566,9 +6765,20 @@ ul.lexassetscontent {
     .md\:h-full { height: 100% !important }
     .md\:h-screen { height: 100vh !important }
     .md\:h-auto { height: auto !important }
+    .md\:w-2\/3 { width: 66.666% !important}
     .md\:w-1\/2 { width: 50% !important }
     .md\:w-1\/3 { width: 33.333% !important }
     .md\:w-1\/4 { width: 25% !important }
+
+    .md\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .md\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .md\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .md\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .md\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .md\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .md\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .md\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .md\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 }
 
 @media (min-width: 1440px) {
@@ -6587,9 +6797,20 @@ ul.lexassetscontent {
     .lg\:h-full { height: 100% !important }
     .lg\:h-screen { height: 100vh !important }
     .lg\:h-auto { height: auto !important }
+    .lg\:w-2\/3 { width: 66.666% !important}
     .lg\:w-1\/2 { width: 50% !important }
     .lg\:w-1\/3 { width: 33.333% !important }
     .lg\:w-1\/4 { width: 25% !important }
+
+    .lg\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .lg\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .lg\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .lg\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .lg\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .lg\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .lg\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .lg\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .lg\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 }
 
 @media (min-width: 1920px) {
@@ -6608,9 +6829,20 @@ ul.lexassetscontent {
     .xl\:h-full { height: 100% !important }
     .xl\:h-screen { height: 100vh !important }
     .xl\:h-auto { height: auto !important }
+    .xl\:w-2\/3 { width: 66.666% !important}
     .xl\:w-1\/2 { width: 50% !important }
     .xl\:w-1\/3 { width: 33.333% !important }
     .xl\:w-1\/4 { width: 25% !important }
+
+    .xl\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .xl\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .xl\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .xl\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .xl\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .xl\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .xl\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .xl\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .xl\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
 }
 
 @media (min-width: 2560px) {
@@ -6629,7 +6861,368 @@ ul.lexassetscontent {
     .xxl\:h-full { height: 100% !important }
     .xxl\:h-screen { height: 100vh !important }
     .xxl\:h-auto { height: auto !important }
+    .xxl\:w-2\/3 { width: 66.666% !important}
     .xxl\:w-1\/2 { width: 50% !important }
     .xxl\:w-1\/3 { width: 33.333% !important }
     .xxl\:w-1\/4 { width: 25% !important }
+
+    .xxl\:text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+    .xxl\:text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+    .xxl\:text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+    .xxl\:text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+    .xxl\:text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+    .xxl\:text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.5em }
+    .xxl\:text-3xl { font-size: var(--global-font-size-3xl); line-height: 1.65rem }
+    .xxl\:text-4xl { font-size: var(--global-font-size-4xl); line-height: 1.8rem }
+    .xxl\:text-5xl { font-size: var(--global-font-size-5xl); line-height: 2rem }
+}
+
+/* lexguidocs.css @jxarco */
+
+:root {
+	--border-style: 1px solid #444;
+	--panel-width: 300px;
+	--page-padding: 24px;
+	--max-width: 80%;
+	--icon-size: 20px;
+	--stylish-color: light-dark(#fd18a5, #e2c886);
+}
+
+#content {
+	font-family: "GeistSans", sans-serif;
+	tab-size: 4;
+	max-width: var(--max-width);
+	width: 95%;
+	height: auto;
+	margin: 0 auto;
+	padding: var(--page-padding);
+	word-break: break-word;
+	text-align: justify;
+	border-radius: 12px;
+}
+
+#content .lexarea.docs {
+	margin-block: 1.5em;
+	width: 90% !important;
+	justify-self: center;
+}
+
+#content::-webkit-scrollbar {
+    display: none;
+}
+
+.code-container {
+	position: relative;
+	margin: 16px calc(-1 * var(--page-padding));
+}
+
+.code-container button {
+	border: none;
+	outline: none;
+	background: none;
+	position: absolute;
+	top: 12px;
+	right: 12px;
+	font-size: 18px;
+	padding: 6px;
+	color: #bbb;
+	transition: color 0.25s;
+	z-index: 1;
+}
+
+.code-container button:hover {
+	color: #ccc;
+	cursor: pointer;
+}
+
+button.copied svg {
+	color: #42d065;
+}
+
+#content a {
+	color: var(--global-color-accent-light);
+	cursor: pointer;
+	text-decoration: none;
+}
+
+#content .lexpanel a, #content .lexarea a {
+	color: unset;
+}
+
+#content h1 {
+	font-size: 32px;
+	line-height: 48px;
+	margin-left: -2px;
+	margin-block: 0.5em;
+	font-optical-sizing: auto;
+	font-weight: 600;
+	font-style: normal;
+	font-variation-settings: "wdth" 100;
+}
+
+#content h2 {
+	font-size: 28px;
+	line-height: 36px;
+	font-weight: normal;
+	margin-left: -1px;
+	margin-block: 0.75em;
+}
+
+#content h3 {
+	font-size: 20px;
+	line-height: 28px;
+	font-weight: normal;
+	margin-block: 0.75em;
 }
+
+code {
+	font-family: "CascadiaCode", monospace;
+	font-size: 14px;
+	line-height: calc(var(--line-height) - 1px);
+	background-color: var(--global-color-primary);
+	text-align: unset !important;
+	text-justify: unset !important;
+}
+
+code.inline {
+	display: inline-block;
+	vertical-align: middle;
+	border-radius: 4px;
+	padding: 3px 6px;
+	margin: 0;
+}
+
+code.inline:not(.ref) {
+	color: var(--stylish-color);
+	font-weight: 500;
+}
+
+code:not(.inline) {
+	display: block;
+	padding: calc(var(--page-padding) - 6px) var(--page-padding);
+	/* white-space: pre-wrap; */
+	overflow: auto;
+	box-sizing: border-box;
+	position: relative;
+	border-radius: 1rem;
+	line-height: 1.5;
+	border: 1px solid var(--global-border-color);
+}
+
+code.inline.table {
+	padding: 0px 2px;
+	line-height: unset;
+	font-size: 13px;
+}
+
+code.inline.desc {
+	background-color: var(--global-color-tertiary);
+	color: var(--global-text-tertiary);
+}
+
+#content strong {
+	font-weight:700;
+}
+
+#content a.permalink {
+	float: right;
+	margin-left: 5px;
+	display: none;
+}
+
+#content > img {
+	width: 100%;
+	/* margin: 16px calc(-1 * var(--page-padding)) ; */
+	border-radius: 4px;	
+}
+
+@media all and ( min-width: 1700px ) {
+	
+	:root {
+		--panel-width: 360px;
+		--line-height: 28px;
+		--page-padding: 28px;
+		--icon-size: 24px;
+	}
+
+	#content {
+		width: 100%;
+	}
+
+	#content h1 {
+		font-size: 42px;
+		line-height: 50px;
+	}
+
+	#content h2 {
+		font-size: 32px;
+		line-height: 40px;
+	}
+
+	#content h3 {
+		font-size: 24px;
+		line-height: 32px;
+	}
+
+}
+
+/* mobile */
+
+@media all and ( max-width: 640px ) {
+
+	:root {
+		--page-padding: 16px;
+		--icon-size: 20px;
+	}
+
+	#content {
+		padding: var(--page-padding);
+	}
+
+	#content h1 {
+		font-size: 28px;
+		line-height: 36px;
+		padding-right: 20px;
+		margin-top: 0;
+	}
+
+	#content h2 {
+		font-size: 24px;
+		line-height: 32px;
+		margin-top: 24px;
+	}
+
+	#content h3 {
+		font-size: 20px;
+		line-height: 28px;
+	}
+
+}
+
+pre .str, code .str { color: #c79369; } /* string */
+pre .kwd, code .kwd { color: #2194ce; } /* keyword */
+pre .com, code .com { color: #999999; } /* comment */
+pre .cls, code .cls { color: #4fccbd; } /* class */
+pre .stc, code .stc { color: #0b6b60; } /* static member */
+pre .stf, code .stf { color: #6d8cf5; } /* static function */
+pre .lit, code .lit { color: #ce57b4; } /* literal */
+
+pre .pre, code .pre { color: #8f8c8c; } /* preprocessor */
+pre .pln, code .pln { color: #444444; } /* plaintext */
+pre .dec, code .dec { color: #a5dba0; } /* decimal */
+pre .mtd, code .mtd { color: #e6e2b8; } /* method */
+pre .var, code .var { color: #d8d5d5; } /* variable */
+pre .enu, code .enu { color: #c0dec2; } /* enum */
+
+pre .tag, code .tag { color: #2194ce; } /* HTML tag */
+pre .atn, code .atn { color: #81cdf8; } /* HTML attribute name */
+pre .com, code .com { color: #4e994d; } /* comment */
+pre .pln, code .pln { color: #aaaaaa; } /* plaintext */
+
+.desc {
+	color: var(--global-text-tertiary);
+}
+
+a .desc {
+	color: var(--global-color-accent);
+}
+
+.param {
+	color: var(--stylish-color);
+}
+
+.prop, .method {
+	color: var(--stylish-color);
+	font-size: 16px;
+}
+
+code:has(.constructor) {
+	background: none;
+}
+
+.constructor {
+	color: var(--stylish-color);
+	font-size: 21px;
+}
+
+#content span.solid {
+	border-radius: 8px;
+	padding: 2px;
+	padding-inline: 8px;
+}
+
+#content span.outline {
+	border-radius: 8px;
+	padding: 2px;
+	padding-inline: 8px;
+}
+
+:root[data-theme="light"] #content {
+	color: #202124;
+}
+
+:root[data-theme="light"] code {
+	background-color: #ededed;
+}
+
+:root[data-theme="light"] code button {
+	color: #434e53;
+}
+
+:root[data-theme="light"] code button:hover {
+	color: #879094;
+}
+
+:root[data-theme="light"] pre .str, :root[data-theme="light"] code .str { color: #188038; }
+:root[data-theme="light"] pre .kwd, :root[data-theme="light"] code .kwd { color: #1967d2; }
+:root[data-theme="light"] pre .com, :root[data-theme="light"] code .com { color: #b80672; }
+:root[data-theme="light"] pre .cls, :root[data-theme="light"] code .cls { color: #0b9484; }
+:root[data-theme="light"] pre .dec, :root[data-theme="light"] code .dec { color: #c5221f; }
+:root[data-theme="light"] pre .mtd, :root[data-theme="light"] code .mtd { color: #636362; }
+:root[data-theme="light"] pre .lit, :root[data-theme="light"] code .lit { color: #1967d2; }
+:root[data-theme="light"] pre .var, :root[data-theme="light"] code .var { color: #222222; }
+:root[data-theme="light"] pre .enu, :root[data-theme="light"] code .enu { color: #505fe2; }
+:root[data-theme="light"] pre .tag, :root[data-theme="light"] code .tag { color: #2183b4; }
+:root[data-theme="light"] pre .atn, :root[data-theme="light"] code .atn { color: #a753c0; }
+
+:root[data-theme="light"] .desc {
+	color: #70777a;
+}
+
+:root[data-theme="light"] a .desc {
+	color: var(--global-color-accent);
+}
+
+:root[data-theme="light"] .param {
+	color: #37474f;
+}
+
+:root[data-theme="light"] .prop, :root[data-theme="light"] .method {
+	color: #37474f;
+}
+
+:root[data-theme="light"] #goUpButton {
+	color: #37474f;
+}
+
+:root[data-theme="light"] #goUpButton:hover {
+	color: #879094;
+}
+
+.lextable {
+	overflow-x: scroll
+}
+
+.lextable table {
+	table-layout: auto;
+}
+
+.lextable table th {
+	white-space: nowrap;
+}
+
+/* Hack to shrink Type and Method columns in reference docs */
+.lextable:has(input) table tbody tr:last-child td:not(:last-child) {
+	width: 1px;
+    white-space: nowrap;
+}