From 7593f47403693677c33e38714aa16ad4f639e124 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 9 Nov 2020 15:40:55 -0500
Subject: [PATCH 1/4] Add ring utilities

---
 .../fixtures/tailwind-output-flagged.css      | 6186 ++++++++++++++++-
 .../fixtures/tailwind-output-important.css    | 6186 ++++++++++++++++-
 .../tailwind-output-no-color-opacity.css      | 6186 ++++++++++++++++-
 __tests__/fixtures/tailwind-output.css        | 6186 ++++++++++++++++-
 scripts/build.js                              |    8 +-
 src/corePluginList.js                         |    5 +
 src/plugins/boxShadow.js                      |    3 +-
 src/plugins/index.js                          |    5 +
 src/plugins/ringColor.js                      |   32 +
 src/plugins/ringOffsetColor.js                |   20 +
 src/plugins/ringOffsetWidth.js                |   18 +
 src/plugins/ringOpacity.js                    |   18 +
 src/plugins/ringWidth.js                      |   37 +
 stubs/defaultConfig.stub.js                   |   29 +
 14 files changed, 23858 insertions(+), 1061 deletions(-)
 create mode 100644 src/plugins/ringColor.js
 create mode 100644 src/plugins/ringOffsetColor.js
 create mode 100644 src/plugins/ringOffsetWidth.js
 create mode 100644 src/plugins/ringOpacity.js
 create mode 100644 src/plugins/ringWidth.js

diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index 6876077bffc2..73826b799a6c 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -19425,179 +19425,1122 @@ video {
 }
 
 .shadow-xs {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-sm {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-2xl {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-inner {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-outline {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-solid {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-none {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-xs:focus-within {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-sm:focus-within {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow:focus-within {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-md:focus-within {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-lg:focus-within {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-xl:focus-within {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-2xl:focus-within {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-inner:focus-within {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-outline:focus-within {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-solid:focus-within {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-none:focus-within {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-xs:hover {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-sm:hover {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow:hover {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-md:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-lg:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-xl:hover {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-2xl:hover {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-inner:hover {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-outline:hover {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-solid:hover {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-none:hover {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-xs:focus {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-sm:focus {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow:focus {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-md:focus {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-lg:focus {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-xl:focus {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-2xl:focus {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-inner:focus {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-outline:focus {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-solid:focus {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-none:focus {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
+}
+
+.ring-0 {
+  --ring-width: 0;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-1 {
+  --ring-width: 1px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-2 {
+  --ring-width: 2px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-4 {
+  --ring-width: 4px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-8 {
+  --ring-width: 8px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring {
+  --ring-width: 3px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-0:focus {
+  --ring-width: 0;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-1:focus {
+  --ring-width: 1px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-2:focus {
+  --ring-width: 2px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-4:focus {
+  --ring-width: 4px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-8:focus {
+  --ring-width: 8px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring:focus {
+  --ring-width: 3px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-offset-transparent {
+  --ring-offset-color: transparent;
+}
+
+.ring-offset-current {
+  --ring-offset-color: currentColor;
+}
+
+.ring-offset-black {
+  --ring-offset-color: #000;
+}
+
+.ring-offset-white {
+  --ring-offset-color: #fff;
+}
+
+.ring-offset-gray-50 {
+  --ring-offset-color: #f9fafb;
+}
+
+.ring-offset-gray-100 {
+  --ring-offset-color: #f3f4f6;
+}
+
+.ring-offset-gray-200 {
+  --ring-offset-color: #e5e7eb;
+}
+
+.ring-offset-gray-300 {
+  --ring-offset-color: #d1d5db;
+}
+
+.ring-offset-gray-400 {
+  --ring-offset-color: #9ca3af;
+}
+
+.ring-offset-gray-500 {
+  --ring-offset-color: #6b7280;
+}
+
+.ring-offset-gray-600 {
+  --ring-offset-color: #4b5563;
+}
+
+.ring-offset-gray-700 {
+  --ring-offset-color: #374151;
+}
+
+.ring-offset-gray-800 {
+  --ring-offset-color: #1f2937;
+}
+
+.ring-offset-gray-900 {
+  --ring-offset-color: #111827;
+}
+
+.ring-offset-red-50 {
+  --ring-offset-color: #fef2f2;
+}
+
+.ring-offset-red-100 {
+  --ring-offset-color: #fee2e2;
+}
+
+.ring-offset-red-200 {
+  --ring-offset-color: #fecaca;
+}
+
+.ring-offset-red-300 {
+  --ring-offset-color: #fca5a5;
+}
+
+.ring-offset-red-400 {
+  --ring-offset-color: #f87171;
+}
+
+.ring-offset-red-500 {
+  --ring-offset-color: #ef4444;
+}
+
+.ring-offset-red-600 {
+  --ring-offset-color: #dc2626;
+}
+
+.ring-offset-red-700 {
+  --ring-offset-color: #b91c1c;
+}
+
+.ring-offset-red-800 {
+  --ring-offset-color: #991b1b;
+}
+
+.ring-offset-red-900 {
+  --ring-offset-color: #7f1d1d;
+}
+
+.ring-offset-yellow-50 {
+  --ring-offset-color: #fffbeb;
+}
+
+.ring-offset-yellow-100 {
+  --ring-offset-color: #fef3c7;
+}
+
+.ring-offset-yellow-200 {
+  --ring-offset-color: #fde68a;
+}
+
+.ring-offset-yellow-300 {
+  --ring-offset-color: #fcd34d;
+}
+
+.ring-offset-yellow-400 {
+  --ring-offset-color: #fbbf24;
+}
+
+.ring-offset-yellow-500 {
+  --ring-offset-color: #f59e0b;
+}
+
+.ring-offset-yellow-600 {
+  --ring-offset-color: #d97706;
+}
+
+.ring-offset-yellow-700 {
+  --ring-offset-color: #b45309;
+}
+
+.ring-offset-yellow-800 {
+  --ring-offset-color: #92400e;
+}
+
+.ring-offset-yellow-900 {
+  --ring-offset-color: #78350f;
+}
+
+.ring-offset-green-50 {
+  --ring-offset-color: #ecfdf5;
+}
+
+.ring-offset-green-100 {
+  --ring-offset-color: #d1fae5;
+}
+
+.ring-offset-green-200 {
+  --ring-offset-color: #a7f3d0;
+}
+
+.ring-offset-green-300 {
+  --ring-offset-color: #6ee7b7;
+}
+
+.ring-offset-green-400 {
+  --ring-offset-color: #34d399;
+}
+
+.ring-offset-green-500 {
+  --ring-offset-color: #10b981;
+}
+
+.ring-offset-green-600 {
+  --ring-offset-color: #059669;
+}
+
+.ring-offset-green-700 {
+  --ring-offset-color: #047857;
+}
+
+.ring-offset-green-800 {
+  --ring-offset-color: #065f46;
+}
+
+.ring-offset-green-900 {
+  --ring-offset-color: #064e3b;
+}
+
+.ring-offset-blue-50 {
+  --ring-offset-color: #eff6ff;
+}
+
+.ring-offset-blue-100 {
+  --ring-offset-color: #dbeafe;
+}
+
+.ring-offset-blue-200 {
+  --ring-offset-color: #bfdbfe;
+}
+
+.ring-offset-blue-300 {
+  --ring-offset-color: #93c5fd;
+}
+
+.ring-offset-blue-400 {
+  --ring-offset-color: #60a5fa;
+}
+
+.ring-offset-blue-500 {
+  --ring-offset-color: #3b82f6;
+}
+
+.ring-offset-blue-600 {
+  --ring-offset-color: #2563eb;
+}
+
+.ring-offset-blue-700 {
+  --ring-offset-color: #1d4ed8;
+}
+
+.ring-offset-blue-800 {
+  --ring-offset-color: #1e40af;
+}
+
+.ring-offset-blue-900 {
+  --ring-offset-color: #1e3a8a;
+}
+
+.ring-offset-indigo-50 {
+  --ring-offset-color: #eef2ff;
+}
+
+.ring-offset-indigo-100 {
+  --ring-offset-color: #e0e7ff;
+}
+
+.ring-offset-indigo-200 {
+  --ring-offset-color: #c7d2fe;
+}
+
+.ring-offset-indigo-300 {
+  --ring-offset-color: #a5b4fc;
+}
+
+.ring-offset-indigo-400 {
+  --ring-offset-color: #818cf8;
+}
+
+.ring-offset-indigo-500 {
+  --ring-offset-color: #6366f1;
+}
+
+.ring-offset-indigo-600 {
+  --ring-offset-color: #4f46e5;
+}
+
+.ring-offset-indigo-700 {
+  --ring-offset-color: #4338ca;
+}
+
+.ring-offset-indigo-800 {
+  --ring-offset-color: #3730a3;
+}
+
+.ring-offset-indigo-900 {
+  --ring-offset-color: #312e81;
+}
+
+.ring-offset-purple-50 {
+  --ring-offset-color: #f5f3ff;
+}
+
+.ring-offset-purple-100 {
+  --ring-offset-color: #ede9fe;
+}
+
+.ring-offset-purple-200 {
+  --ring-offset-color: #ddd6fe;
+}
+
+.ring-offset-purple-300 {
+  --ring-offset-color: #c4b5fd;
+}
+
+.ring-offset-purple-400 {
+  --ring-offset-color: #a78bfa;
+}
+
+.ring-offset-purple-500 {
+  --ring-offset-color: #8b5cf6;
+}
+
+.ring-offset-purple-600 {
+  --ring-offset-color: #7c3aed;
+}
+
+.ring-offset-purple-700 {
+  --ring-offset-color: #6d28d9;
+}
+
+.ring-offset-purple-800 {
+  --ring-offset-color: #5b21b6;
+}
+
+.ring-offset-purple-900 {
+  --ring-offset-color: #4c1d95;
+}
+
+.ring-offset-pink-50 {
+  --ring-offset-color: #fdf2f8;
+}
+
+.ring-offset-pink-100 {
+  --ring-offset-color: #fce7f3;
+}
+
+.ring-offset-pink-200 {
+  --ring-offset-color: #fbcfe8;
+}
+
+.ring-offset-pink-300 {
+  --ring-offset-color: #f9a8d4;
+}
+
+.ring-offset-pink-400 {
+  --ring-offset-color: #f472b6;
+}
+
+.ring-offset-pink-500 {
+  --ring-offset-color: #ec4899;
+}
+
+.ring-offset-pink-600 {
+  --ring-offset-color: #db2777;
+}
+
+.ring-offset-pink-700 {
+  --ring-offset-color: #be185d;
+}
+
+.ring-offset-pink-800 {
+  --ring-offset-color: #9d174d;
+}
+
+.ring-offset-pink-900 {
+  --ring-offset-color: #831843;
+}
+
+.ring-offset-0 {
+  --ring-offset-width: 0;
+}
+
+.ring-offset-1 {
+  --ring-offset-width: 1px;
+}
+
+.ring-offset-2 {
+  --ring-offset-width: 2px;
+}
+
+.ring-offset-4 {
+  --ring-offset-width: 4px;
+}
+
+.ring-offset-8 {
+  --ring-offset-width: 8px;
+}
+
+.ring-transparent {
+  --ring-opacity: 0;
+  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+}
+
+.ring-current {
+  --ring-color: currentColor;
+}
+
+.ring-black {
+  --ring-opacity: 1;
+  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+}
+
+.ring-white {
+  --ring-opacity: 1;
+  --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+}
+
+.ring-gray-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+}
+
+.ring-gray-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+}
+
+.ring-gray-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+}
+
+.ring-gray-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+}
+
+.ring-gray-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+}
+
+.ring-gray-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+}
+
+.ring-gray-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+}
+
+.ring-gray-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+}
+
+.ring-gray-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+}
+
+.ring-gray-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+}
+
+.ring-red-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+}
+
+.ring-red-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+}
+
+.ring-red-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+}
+
+.ring-red-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+}
+
+.ring-red-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+}
+
+.ring-red-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+}
+
+.ring-red-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+}
+
+.ring-red-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+}
+
+.ring-red-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+}
+
+.ring-red-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+}
+
+.ring-yellow-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+}
+
+.ring-yellow-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+}
+
+.ring-yellow-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+}
+
+.ring-yellow-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+}
+
+.ring-yellow-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+}
+
+.ring-yellow-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+}
+
+.ring-yellow-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+}
+
+.ring-yellow-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+}
+
+.ring-yellow-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+}
+
+.ring-yellow-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+}
+
+.ring-green-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+}
+
+.ring-green-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+}
+
+.ring-green-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+}
+
+.ring-green-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+}
+
+.ring-green-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+}
+
+.ring-green-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+}
+
+.ring-green-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+}
+
+.ring-green-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+}
+
+.ring-green-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+}
+
+.ring-green-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+}
+
+.ring-blue-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+}
+
+.ring-blue-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+}
+
+.ring-blue-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+}
+
+.ring-blue-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+}
+
+.ring-blue-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+}
+
+.ring-blue-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+}
+
+.ring-blue-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+}
+
+.ring-blue-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+}
+
+.ring-blue-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+}
+
+.ring-blue-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+}
+
+.ring-indigo-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+}
+
+.ring-indigo-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+}
+
+.ring-indigo-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+}
+
+.ring-indigo-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+}
+
+.ring-indigo-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+}
+
+.ring-indigo-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+}
+
+.ring-indigo-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+}
+
+.ring-indigo-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+}
+
+.ring-indigo-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+}
+
+.ring-indigo-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+}
+
+.ring-purple-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+}
+
+.ring-purple-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+}
+
+.ring-purple-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+}
+
+.ring-purple-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+}
+
+.ring-purple-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+}
+
+.ring-purple-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+}
+
+.ring-purple-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+}
+
+.ring-purple-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+}
+
+.ring-purple-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+}
+
+.ring-purple-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+}
+
+.ring-pink-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+}
+
+.ring-pink-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+}
+
+.ring-pink-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+}
+
+.ring-pink-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+}
+
+.ring-pink-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+}
+
+.ring-pink-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+}
+
+.ring-pink-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+}
+
+.ring-pink-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+}
+
+.ring-pink-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+}
+
+.ring-pink-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+}
+
+.ring-opacity-0 {
+  --ring-opacity: 0;
+}
+
+.ring-opacity-10 {
+  --ring-opacity: 0.1;
+}
+
+.ring-opacity-20 {
+  --ring-opacity: 0.2;
+}
+
+.ring-opacity-25 {
+  --ring-opacity: 0.25;
+}
+
+.ring-opacity-30 {
+  --ring-opacity: 0.3;
+}
+
+.ring-opacity-40 {
+  --ring-opacity: 0.4;
+}
+
+.ring-opacity-50 {
+  --ring-opacity: 0.5;
+}
+
+.ring-opacity-60 {
+  --ring-opacity: 0.6;
+}
+
+.ring-opacity-70 {
+  --ring-opacity: 0.7;
+}
+
+.ring-opacity-75 {
+  --ring-opacity: 0.75;
+}
+
+.ring-opacity-80 {
+  --ring-opacity: 0.8;
+}
+
+.ring-opacity-90 {
+  --ring-opacity: 0.9;
+}
+
+.ring-opacity-100 {
+  --ring-opacity: 1;
 }
 
 .fill-current {
@@ -45459,179 +46402,1122 @@ video {
   }
 
   .sm\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .sm\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .sm\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .sm\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .sm\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .sm\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .sm\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .sm\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .sm\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .sm\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .sm\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .sm\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .sm\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .sm\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .sm\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .sm\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .sm\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .sm\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .sm\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .sm\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .sm\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .sm\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .sm\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .sm\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .sm\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .sm\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .sm\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .sm\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .sm\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .sm\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .sm\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .sm\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .sm\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .sm\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .sm\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .sm\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .sm\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .sm\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .sm\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .sm\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .sm\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .sm\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .sm\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .sm\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .sm\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .sm\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .sm\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .sm\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .sm\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .sm\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .sm\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .sm\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .sm\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .sm\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .sm\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .sm\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .sm\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .sm\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .sm\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .sm\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .sm\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .sm\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .sm\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .sm\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .sm\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .sm\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .sm\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .sm\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .sm\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .sm\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .sm\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .sm\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .sm\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .sm\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .sm\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .sm\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .sm\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .sm\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .sm\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .sm\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .sm\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .sm\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .sm\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .sm\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .sm\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .sm\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .sm\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .sm\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .sm\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .sm\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .sm\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .sm\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .sm\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .sm\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .sm\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .sm\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .sm\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .sm\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .sm\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .sm\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .sm\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .sm\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .sm\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .sm\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .sm\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .sm\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .sm\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .sm\:fill-current {
@@ -71463,179 +73349,1122 @@ video {
   }
 
   .md\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .md\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .md\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .md\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .md\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .md\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .md\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .md\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .md\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .md\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .md\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .md\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .md\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .md\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .md\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .md\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .md\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .md\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .md\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .md\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .md\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .md\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .md\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .md\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .md\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .md\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .md\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .md\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .md\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .md\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .md\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .md\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .md\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .md\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .md\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .md\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .md\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .md\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .md\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .md\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .md\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .md\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .md\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .md\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .md\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .md\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .md\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .md\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .md\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .md\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .md\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .md\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .md\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .md\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .md\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .md\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .md\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .md\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .md\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .md\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .md\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .md\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .md\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .md\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .md\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .md\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .md\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .md\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .md\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .md\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .md\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .md\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .md\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .md\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .md\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .md\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .md\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .md\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .md\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .md\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .md\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .md\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .md\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .md\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .md\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .md\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .md\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .md\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .md\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .md\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .md\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .md\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .md\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .md\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .md\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .md\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .md\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .md\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .md\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .md\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .md\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .md\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .md\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .md\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .md\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .md\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .md\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .md\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .md\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .md\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .md\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .md\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .md\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .md\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .md\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .md\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .md\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .md\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .md\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .md\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .md\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .md\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .md\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .md\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .md\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .md\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .md\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .md\:fill-current {
@@ -97467,179 +100296,1122 @@ video {
   }
 
   .lg\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .lg\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .lg\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .lg\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .lg\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .lg\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .lg\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .lg\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .lg\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .lg\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .lg\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .lg\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .lg\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .lg\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .lg\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .lg\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .lg\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .lg\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .lg\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .lg\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .lg\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .lg\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .lg\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .lg\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .lg\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .lg\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .lg\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .lg\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .lg\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .lg\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .lg\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .lg\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .lg\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .lg\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .lg\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .lg\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .lg\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .lg\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .lg\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .lg\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .lg\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .lg\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .lg\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .lg\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .lg\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .lg\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .lg\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .lg\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .lg\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .lg\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .lg\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .lg\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .lg\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .lg\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .lg\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .lg\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .lg\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .lg\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .lg\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .lg\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .lg\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .lg\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .lg\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .lg\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .lg\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .lg\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .lg\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .lg\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .lg\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .lg\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .lg\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .lg\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .lg\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .lg\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .lg\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .lg\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .lg\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .lg\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .lg\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .lg\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .lg\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .lg\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .lg\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .lg\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .lg\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .lg\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .lg\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .lg\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .lg\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .lg\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .lg\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .lg\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .lg\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .lg\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .lg\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .lg\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .lg\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .lg\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .lg\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .lg\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .lg\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .lg\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .lg\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .lg\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .lg\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .lg\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .lg\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .lg\:fill-current {
@@ -123471,179 +127243,1122 @@ video {
   }
 
   .xl\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .xl\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .xl\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .xl\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .xl\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .xl\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .xl\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .xl\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .xl\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .xl\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .xl\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .xl\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .xl\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .xl\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .xl\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .xl\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .xl\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .xl\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .xl\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .xl\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .xl\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .xl\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .xl\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .xl\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .xl\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .xl\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .xl\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .xl\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .xl\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .xl\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .xl\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .xl\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .xl\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .xl\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .xl\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .xl\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .xl\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .xl\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .xl\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .xl\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .xl\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .xl\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .xl\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .xl\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .xl\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .xl\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .xl\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .xl\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .xl\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .xl\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .xl\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .xl\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .xl\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .xl\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .xl\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .xl\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .xl\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .xl\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .xl\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .xl\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .xl\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .xl\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .xl\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .xl\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .xl\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .xl\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .xl\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .xl\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .xl\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .xl\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .xl\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .xl\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .xl\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .xl\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .xl\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .xl\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .xl\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .xl\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .xl\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .xl\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .xl\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .xl\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .xl\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .xl\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .xl\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .xl\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .xl\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .xl\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .xl\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .xl\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .xl\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .xl\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .xl\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .xl\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .xl\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .xl\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .xl\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .xl\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .xl\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .xl\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .xl\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .xl\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .xl\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .xl\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .xl\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .xl\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .xl\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .xl\:fill-current {
@@ -149475,179 +154190,1122 @@ video {
   }
 
   .\32xl\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .\32xl\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .\32xl\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .\32xl\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .\32xl\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .\32xl\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .\32xl\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .\32xl\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .\32xl\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .\32xl\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .\32xl\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .\32xl\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .\32xl\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .\32xl\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .\32xl\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .\32xl\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .\32xl\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .\32xl\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .\32xl\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .\32xl\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .\32xl\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .\32xl\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .\32xl\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .\32xl\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .\32xl\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .\32xl\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .\32xl\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .\32xl\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .\32xl\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .\32xl\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .\32xl\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .\32xl\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .\32xl\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .\32xl\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .\32xl\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .\32xl\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .\32xl\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .\32xl\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .\32xl\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .\32xl\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .\32xl\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .\32xl\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .\32xl\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .\32xl\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .\32xl\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .\32xl\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .\32xl\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .\32xl\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .\32xl\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .\32xl\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .\32xl\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .\32xl\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .\32xl\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .\32xl\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .\32xl\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .\32xl\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .\32xl\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .\32xl\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .\32xl\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .\32xl\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .\32xl\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .\32xl\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .\32xl\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .\32xl\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .\32xl\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .\32xl\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .\32xl\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .\32xl\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .\32xl\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .\32xl\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .\32xl\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .\32xl\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .\32xl\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .\32xl\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .\32xl\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .\32xl\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .\32xl\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .\32xl\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .\32xl\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .\32xl\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .\32xl\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .\32xl\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .\32xl\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .\32xl\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .\32xl\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .\32xl\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .\32xl\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .\32xl\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .\32xl\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .\32xl\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .\32xl\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .\32xl\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .\32xl\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .\32xl\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .\32xl\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .\32xl\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .\32xl\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .\32xl\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .\32xl\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .\32xl\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .\32xl\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .\32xl\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .\32xl\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .\32xl\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .\32xl\:fill-current {
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index fecdc1a01693..d0cc834079d6 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -19425,179 +19425,1122 @@ video {
 }
 
 .shadow-xs {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow-sm {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow-2xl {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow-inner {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow-outline {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow-solid {
-  box-shadow: 0 0 0 2px currentColor !important;
+  --box-shadow: 0 0 0 2px currentColor !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .shadow-none {
-  box-shadow: none !important;
+  --box-shadow: none !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-xs:focus-within {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-sm:focus-within {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow:focus-within {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-md:focus-within {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-lg:focus-within {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-xl:focus-within {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-2xl:focus-within {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-inner:focus-within {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-outline:focus-within {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-solid:focus-within {
-  box-shadow: 0 0 0 2px currentColor !important;
+  --box-shadow: 0 0 0 2px currentColor !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-none:focus-within {
-  box-shadow: none !important;
+  --box-shadow: none !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-xs:hover {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-sm:hover {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow:hover {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-md:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-lg:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-xl:hover {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-2xl:hover {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-inner:hover {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-outline:hover {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-solid:hover {
-  box-shadow: 0 0 0 2px currentColor !important;
+  --box-shadow: 0 0 0 2px currentColor !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .hover\:shadow-none:hover {
-  box-shadow: none !important;
+  --box-shadow: none !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-xs:focus {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-sm:focus {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow:focus {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-md:focus {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-lg:focus {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-xl:focus {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-2xl:focus {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-inner:focus {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-outline:focus {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-solid:focus {
-  box-shadow: 0 0 0 2px currentColor !important;
+  --box-shadow: 0 0 0 2px currentColor !important;
+  box-shadow: var(--box-shadow) !important;
 }
 
 .focus\:shadow-none:focus {
-  box-shadow: none !important;
+  --box-shadow: none !important;
+  box-shadow: var(--box-shadow) !important;
+}
+
+.ring-0 {
+  --ring-width: 0 !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.ring-1 {
+  --ring-width: 1px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.ring-2 {
+  --ring-width: 2px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.ring-4 {
+  --ring-width: 4px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.ring-8 {
+  --ring-width: 8px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.ring {
+  --ring-width: 3px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.focus\:ring-0:focus {
+  --ring-width: 0 !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.focus\:ring-1:focus {
+  --ring-width: 1px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.focus\:ring-2:focus {
+  --ring-width: 2px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.focus\:ring-4:focus {
+  --ring-width: 4px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.focus\:ring-8:focus {
+  --ring-width: 8px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.focus\:ring:focus {
+  --ring-width: 3px !important;
+  --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+}
+
+.ring-offset-transparent {
+  --ring-offset-color: transparent !important;
+}
+
+.ring-offset-current {
+  --ring-offset-color: currentColor !important;
+}
+
+.ring-offset-black {
+  --ring-offset-color: #000 !important;
+}
+
+.ring-offset-white {
+  --ring-offset-color: #fff !important;
+}
+
+.ring-offset-gray-50 {
+  --ring-offset-color: #f9fafb !important;
+}
+
+.ring-offset-gray-100 {
+  --ring-offset-color: #f3f4f6 !important;
+}
+
+.ring-offset-gray-200 {
+  --ring-offset-color: #e5e7eb !important;
+}
+
+.ring-offset-gray-300 {
+  --ring-offset-color: #d1d5db !important;
+}
+
+.ring-offset-gray-400 {
+  --ring-offset-color: #9ca3af !important;
+}
+
+.ring-offset-gray-500 {
+  --ring-offset-color: #6b7280 !important;
+}
+
+.ring-offset-gray-600 {
+  --ring-offset-color: #4b5563 !important;
+}
+
+.ring-offset-gray-700 {
+  --ring-offset-color: #374151 !important;
+}
+
+.ring-offset-gray-800 {
+  --ring-offset-color: #1f2937 !important;
+}
+
+.ring-offset-gray-900 {
+  --ring-offset-color: #111827 !important;
+}
+
+.ring-offset-red-50 {
+  --ring-offset-color: #fef2f2 !important;
+}
+
+.ring-offset-red-100 {
+  --ring-offset-color: #fee2e2 !important;
+}
+
+.ring-offset-red-200 {
+  --ring-offset-color: #fecaca !important;
+}
+
+.ring-offset-red-300 {
+  --ring-offset-color: #fca5a5 !important;
+}
+
+.ring-offset-red-400 {
+  --ring-offset-color: #f87171 !important;
+}
+
+.ring-offset-red-500 {
+  --ring-offset-color: #ef4444 !important;
+}
+
+.ring-offset-red-600 {
+  --ring-offset-color: #dc2626 !important;
+}
+
+.ring-offset-red-700 {
+  --ring-offset-color: #b91c1c !important;
+}
+
+.ring-offset-red-800 {
+  --ring-offset-color: #991b1b !important;
+}
+
+.ring-offset-red-900 {
+  --ring-offset-color: #7f1d1d !important;
+}
+
+.ring-offset-yellow-50 {
+  --ring-offset-color: #fffbeb !important;
+}
+
+.ring-offset-yellow-100 {
+  --ring-offset-color: #fef3c7 !important;
+}
+
+.ring-offset-yellow-200 {
+  --ring-offset-color: #fde68a !important;
+}
+
+.ring-offset-yellow-300 {
+  --ring-offset-color: #fcd34d !important;
+}
+
+.ring-offset-yellow-400 {
+  --ring-offset-color: #fbbf24 !important;
+}
+
+.ring-offset-yellow-500 {
+  --ring-offset-color: #f59e0b !important;
+}
+
+.ring-offset-yellow-600 {
+  --ring-offset-color: #d97706 !important;
+}
+
+.ring-offset-yellow-700 {
+  --ring-offset-color: #b45309 !important;
+}
+
+.ring-offset-yellow-800 {
+  --ring-offset-color: #92400e !important;
+}
+
+.ring-offset-yellow-900 {
+  --ring-offset-color: #78350f !important;
+}
+
+.ring-offset-green-50 {
+  --ring-offset-color: #ecfdf5 !important;
+}
+
+.ring-offset-green-100 {
+  --ring-offset-color: #d1fae5 !important;
+}
+
+.ring-offset-green-200 {
+  --ring-offset-color: #a7f3d0 !important;
+}
+
+.ring-offset-green-300 {
+  --ring-offset-color: #6ee7b7 !important;
+}
+
+.ring-offset-green-400 {
+  --ring-offset-color: #34d399 !important;
+}
+
+.ring-offset-green-500 {
+  --ring-offset-color: #10b981 !important;
+}
+
+.ring-offset-green-600 {
+  --ring-offset-color: #059669 !important;
+}
+
+.ring-offset-green-700 {
+  --ring-offset-color: #047857 !important;
+}
+
+.ring-offset-green-800 {
+  --ring-offset-color: #065f46 !important;
+}
+
+.ring-offset-green-900 {
+  --ring-offset-color: #064e3b !important;
+}
+
+.ring-offset-blue-50 {
+  --ring-offset-color: #eff6ff !important;
+}
+
+.ring-offset-blue-100 {
+  --ring-offset-color: #dbeafe !important;
+}
+
+.ring-offset-blue-200 {
+  --ring-offset-color: #bfdbfe !important;
+}
+
+.ring-offset-blue-300 {
+  --ring-offset-color: #93c5fd !important;
+}
+
+.ring-offset-blue-400 {
+  --ring-offset-color: #60a5fa !important;
+}
+
+.ring-offset-blue-500 {
+  --ring-offset-color: #3b82f6 !important;
+}
+
+.ring-offset-blue-600 {
+  --ring-offset-color: #2563eb !important;
+}
+
+.ring-offset-blue-700 {
+  --ring-offset-color: #1d4ed8 !important;
+}
+
+.ring-offset-blue-800 {
+  --ring-offset-color: #1e40af !important;
+}
+
+.ring-offset-blue-900 {
+  --ring-offset-color: #1e3a8a !important;
+}
+
+.ring-offset-indigo-50 {
+  --ring-offset-color: #eef2ff !important;
+}
+
+.ring-offset-indigo-100 {
+  --ring-offset-color: #e0e7ff !important;
+}
+
+.ring-offset-indigo-200 {
+  --ring-offset-color: #c7d2fe !important;
+}
+
+.ring-offset-indigo-300 {
+  --ring-offset-color: #a5b4fc !important;
+}
+
+.ring-offset-indigo-400 {
+  --ring-offset-color: #818cf8 !important;
+}
+
+.ring-offset-indigo-500 {
+  --ring-offset-color: #6366f1 !important;
+}
+
+.ring-offset-indigo-600 {
+  --ring-offset-color: #4f46e5 !important;
+}
+
+.ring-offset-indigo-700 {
+  --ring-offset-color: #4338ca !important;
+}
+
+.ring-offset-indigo-800 {
+  --ring-offset-color: #3730a3 !important;
+}
+
+.ring-offset-indigo-900 {
+  --ring-offset-color: #312e81 !important;
+}
+
+.ring-offset-purple-50 {
+  --ring-offset-color: #f5f3ff !important;
+}
+
+.ring-offset-purple-100 {
+  --ring-offset-color: #ede9fe !important;
+}
+
+.ring-offset-purple-200 {
+  --ring-offset-color: #ddd6fe !important;
+}
+
+.ring-offset-purple-300 {
+  --ring-offset-color: #c4b5fd !important;
+}
+
+.ring-offset-purple-400 {
+  --ring-offset-color: #a78bfa !important;
+}
+
+.ring-offset-purple-500 {
+  --ring-offset-color: #8b5cf6 !important;
+}
+
+.ring-offset-purple-600 {
+  --ring-offset-color: #7c3aed !important;
+}
+
+.ring-offset-purple-700 {
+  --ring-offset-color: #6d28d9 !important;
+}
+
+.ring-offset-purple-800 {
+  --ring-offset-color: #5b21b6 !important;
+}
+
+.ring-offset-purple-900 {
+  --ring-offset-color: #4c1d95 !important;
+}
+
+.ring-offset-pink-50 {
+  --ring-offset-color: #fdf2f8 !important;
+}
+
+.ring-offset-pink-100 {
+  --ring-offset-color: #fce7f3 !important;
+}
+
+.ring-offset-pink-200 {
+  --ring-offset-color: #fbcfe8 !important;
+}
+
+.ring-offset-pink-300 {
+  --ring-offset-color: #f9a8d4 !important;
+}
+
+.ring-offset-pink-400 {
+  --ring-offset-color: #f472b6 !important;
+}
+
+.ring-offset-pink-500 {
+  --ring-offset-color: #ec4899 !important;
+}
+
+.ring-offset-pink-600 {
+  --ring-offset-color: #db2777 !important;
+}
+
+.ring-offset-pink-700 {
+  --ring-offset-color: #be185d !important;
+}
+
+.ring-offset-pink-800 {
+  --ring-offset-color: #9d174d !important;
+}
+
+.ring-offset-pink-900 {
+  --ring-offset-color: #831843 !important;
+}
+
+.ring-offset-0 {
+  --ring-offset-width: 0 !important;
+}
+
+.ring-offset-1 {
+  --ring-offset-width: 1px !important;
+}
+
+.ring-offset-2 {
+  --ring-offset-width: 2px !important;
+}
+
+.ring-offset-4 {
+  --ring-offset-width: 4px !important;
+}
+
+.ring-offset-8 {
+  --ring-offset-width: 8px !important;
+}
+
+.ring-transparent {
+  --ring-opacity: 0 !important;
+  --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+}
+
+.ring-current {
+  --ring-color: currentColor !important;
+}
+
+.ring-black {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+}
+
+.ring-white {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(255, 255, 255, var(--ring-opacity)) !important;
+}
+
+.ring-gray-50 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(249, 250, 251, var(--ring-opacity)) !important;
+}
+
+.ring-gray-100 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(243, 244, 246, var(--ring-opacity)) !important;
+}
+
+.ring-gray-200 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(229, 231, 235, var(--ring-opacity)) !important;
+}
+
+.ring-gray-300 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(209, 213, 219, var(--ring-opacity)) !important;
+}
+
+.ring-gray-400 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(156, 163, 175, var(--ring-opacity)) !important;
+}
+
+.ring-gray-500 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(107, 114, 128, var(--ring-opacity)) !important;
+}
+
+.ring-gray-600 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(75, 85, 99, var(--ring-opacity)) !important;
+}
+
+.ring-gray-700 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(55, 65, 81, var(--ring-opacity)) !important;
+}
+
+.ring-gray-800 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(31, 41, 55, var(--ring-opacity)) !important;
+}
+
+.ring-gray-900 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(17, 24, 39, var(--ring-opacity)) !important;
+}
+
+.ring-red-50 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(254, 242, 242, var(--ring-opacity)) !important;
+}
+
+.ring-red-100 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(254, 226, 226, var(--ring-opacity)) !important;
+}
+
+.ring-red-200 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(254, 202, 202, var(--ring-opacity)) !important;
+}
+
+.ring-red-300 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(252, 165, 165, var(--ring-opacity)) !important;
+}
+
+.ring-red-400 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(248, 113, 113, var(--ring-opacity)) !important;
+}
+
+.ring-red-500 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(239, 68, 68, var(--ring-opacity)) !important;
+}
+
+.ring-red-600 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(220, 38, 38, var(--ring-opacity)) !important;
+}
+
+.ring-red-700 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(185, 28, 28, var(--ring-opacity)) !important;
+}
+
+.ring-red-800 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(153, 27, 27, var(--ring-opacity)) !important;
+}
+
+.ring-red-900 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(127, 29, 29, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-50 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(255, 251, 235, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-100 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(254, 243, 199, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-200 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(253, 230, 138, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-300 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(252, 211, 77, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-400 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(251, 191, 36, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-500 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(245, 158, 11, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-600 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(217, 119, 6, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-700 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(180, 83, 9, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-800 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(146, 64, 14, var(--ring-opacity)) !important;
+}
+
+.ring-yellow-900 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(120, 53, 15, var(--ring-opacity)) !important;
+}
+
+.ring-green-50 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(236, 253, 245, var(--ring-opacity)) !important;
+}
+
+.ring-green-100 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(209, 250, 229, var(--ring-opacity)) !important;
+}
+
+.ring-green-200 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(167, 243, 208, var(--ring-opacity)) !important;
+}
+
+.ring-green-300 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(110, 231, 183, var(--ring-opacity)) !important;
+}
+
+.ring-green-400 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(52, 211, 153, var(--ring-opacity)) !important;
+}
+
+.ring-green-500 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(16, 185, 129, var(--ring-opacity)) !important;
+}
+
+.ring-green-600 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(5, 150, 105, var(--ring-opacity)) !important;
+}
+
+.ring-green-700 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(4, 120, 87, var(--ring-opacity)) !important;
+}
+
+.ring-green-800 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(6, 95, 70, var(--ring-opacity)) !important;
+}
+
+.ring-green-900 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(6, 78, 59, var(--ring-opacity)) !important;
+}
+
+.ring-blue-50 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(239, 246, 255, var(--ring-opacity)) !important;
+}
+
+.ring-blue-100 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(219, 234, 254, var(--ring-opacity)) !important;
+}
+
+.ring-blue-200 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(191, 219, 254, var(--ring-opacity)) !important;
+}
+
+.ring-blue-300 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(147, 197, 253, var(--ring-opacity)) !important;
+}
+
+.ring-blue-400 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(96, 165, 250, var(--ring-opacity)) !important;
+}
+
+.ring-blue-500 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(59, 130, 246, var(--ring-opacity)) !important;
+}
+
+.ring-blue-600 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(37, 99, 235, var(--ring-opacity)) !important;
+}
+
+.ring-blue-700 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(29, 78, 216, var(--ring-opacity)) !important;
+}
+
+.ring-blue-800 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(30, 64, 175, var(--ring-opacity)) !important;
+}
+
+.ring-blue-900 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(30, 58, 138, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-50 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(238, 242, 255, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-100 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(224, 231, 255, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-200 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(199, 210, 254, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-300 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(165, 180, 252, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-400 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(129, 140, 248, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-500 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(99, 102, 241, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-600 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(79, 70, 229, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-700 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(67, 56, 202, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-800 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(55, 48, 163, var(--ring-opacity)) !important;
+}
+
+.ring-indigo-900 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(49, 46, 129, var(--ring-opacity)) !important;
+}
+
+.ring-purple-50 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(245, 243, 255, var(--ring-opacity)) !important;
+}
+
+.ring-purple-100 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(237, 233, 254, var(--ring-opacity)) !important;
+}
+
+.ring-purple-200 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(221, 214, 254, var(--ring-opacity)) !important;
+}
+
+.ring-purple-300 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(196, 181, 253, var(--ring-opacity)) !important;
+}
+
+.ring-purple-400 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(167, 139, 250, var(--ring-opacity)) !important;
+}
+
+.ring-purple-500 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(139, 92, 246, var(--ring-opacity)) !important;
+}
+
+.ring-purple-600 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(124, 58, 237, var(--ring-opacity)) !important;
+}
+
+.ring-purple-700 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(109, 40, 217, var(--ring-opacity)) !important;
+}
+
+.ring-purple-800 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(91, 33, 182, var(--ring-opacity)) !important;
+}
+
+.ring-purple-900 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(76, 29, 149, var(--ring-opacity)) !important;
+}
+
+.ring-pink-50 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(253, 242, 248, var(--ring-opacity)) !important;
+}
+
+.ring-pink-100 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(252, 231, 243, var(--ring-opacity)) !important;
+}
+
+.ring-pink-200 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(251, 207, 232, var(--ring-opacity)) !important;
+}
+
+.ring-pink-300 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(249, 168, 212, var(--ring-opacity)) !important;
+}
+
+.ring-pink-400 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(244, 114, 182, var(--ring-opacity)) !important;
+}
+
+.ring-pink-500 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(236, 72, 153, var(--ring-opacity)) !important;
+}
+
+.ring-pink-600 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(219, 39, 119, var(--ring-opacity)) !important;
+}
+
+.ring-pink-700 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(190, 24, 93, var(--ring-opacity)) !important;
+}
+
+.ring-pink-800 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(157, 23, 77, var(--ring-opacity)) !important;
+}
+
+.ring-pink-900 {
+  --ring-opacity: 1 !important;
+  --ring-color: rgba(131, 24, 67, var(--ring-opacity)) !important;
+}
+
+.ring-opacity-0 {
+  --ring-opacity: 0 !important;
+}
+
+.ring-opacity-10 {
+  --ring-opacity: 0.1 !important;
+}
+
+.ring-opacity-20 {
+  --ring-opacity: 0.2 !important;
+}
+
+.ring-opacity-25 {
+  --ring-opacity: 0.25 !important;
+}
+
+.ring-opacity-30 {
+  --ring-opacity: 0.3 !important;
+}
+
+.ring-opacity-40 {
+  --ring-opacity: 0.4 !important;
+}
+
+.ring-opacity-50 {
+  --ring-opacity: 0.5 !important;
+}
+
+.ring-opacity-60 {
+  --ring-opacity: 0.6 !important;
+}
+
+.ring-opacity-70 {
+  --ring-opacity: 0.7 !important;
+}
+
+.ring-opacity-75 {
+  --ring-opacity: 0.75 !important;
+}
+
+.ring-opacity-80 {
+  --ring-opacity: 0.8 !important;
+}
+
+.ring-opacity-90 {
+  --ring-opacity: 0.9 !important;
+}
+
+.ring-opacity-100 {
+  --ring-opacity: 1 !important;
 }
 
 .fill-current {
@@ -45459,179 +46402,1122 @@ video {
   }
 
   .sm\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:shadow-none {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-none:focus-within {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-none:hover {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-none:focus {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
+  }
+
+  .sm\:ring-0 {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:ring-1 {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:ring-2 {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:ring-4 {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:ring-8 {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:ring {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:focus\:ring-0:focus {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:focus\:ring-1:focus {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:focus\:ring-2:focus {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:focus\:ring-4:focus {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:focus\:ring-8:focus {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:focus\:ring:focus {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .sm\:ring-offset-transparent {
+    --ring-offset-color: transparent !important;
+  }
+
+  .sm\:ring-offset-current {
+    --ring-offset-color: currentColor !important;
+  }
+
+  .sm\:ring-offset-black {
+    --ring-offset-color: #000 !important;
+  }
+
+  .sm\:ring-offset-white {
+    --ring-offset-color: #fff !important;
+  }
+
+  .sm\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb !important;
+  }
+
+  .sm\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6 !important;
+  }
+
+  .sm\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb !important;
+  }
+
+  .sm\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db !important;
+  }
+
+  .sm\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af !important;
+  }
+
+  .sm\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280 !important;
+  }
+
+  .sm\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563 !important;
+  }
+
+  .sm\:ring-offset-gray-700 {
+    --ring-offset-color: #374151 !important;
+  }
+
+  .sm\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937 !important;
+  }
+
+  .sm\:ring-offset-gray-900 {
+    --ring-offset-color: #111827 !important;
+  }
+
+  .sm\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2 !important;
+  }
+
+  .sm\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2 !important;
+  }
+
+  .sm\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca !important;
+  }
+
+  .sm\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5 !important;
+  }
+
+  .sm\:ring-offset-red-400 {
+    --ring-offset-color: #f87171 !important;
+  }
+
+  .sm\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444 !important;
+  }
+
+  .sm\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626 !important;
+  }
+
+  .sm\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c !important;
+  }
+
+  .sm\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b !important;
+  }
+
+  .sm\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d !important;
+  }
+
+  .sm\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb !important;
+  }
+
+  .sm\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7 !important;
+  }
+
+  .sm\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a !important;
+  }
+
+  .sm\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d !important;
+  }
+
+  .sm\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24 !important;
+  }
+
+  .sm\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b !important;
+  }
+
+  .sm\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706 !important;
+  }
+
+  .sm\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309 !important;
+  }
+
+  .sm\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e !important;
+  }
+
+  .sm\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f !important;
+  }
+
+  .sm\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5 !important;
+  }
+
+  .sm\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5 !important;
+  }
+
+  .sm\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0 !important;
+  }
+
+  .sm\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7 !important;
+  }
+
+  .sm\:ring-offset-green-400 {
+    --ring-offset-color: #34d399 !important;
+  }
+
+  .sm\:ring-offset-green-500 {
+    --ring-offset-color: #10b981 !important;
+  }
+
+  .sm\:ring-offset-green-600 {
+    --ring-offset-color: #059669 !important;
+  }
+
+  .sm\:ring-offset-green-700 {
+    --ring-offset-color: #047857 !important;
+  }
+
+  .sm\:ring-offset-green-800 {
+    --ring-offset-color: #065f46 !important;
+  }
+
+  .sm\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b !important;
+  }
+
+  .sm\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff !important;
+  }
+
+  .sm\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe !important;
+  }
+
+  .sm\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe !important;
+  }
+
+  .sm\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd !important;
+  }
+
+  .sm\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa !important;
+  }
+
+  .sm\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6 !important;
+  }
+
+  .sm\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb !important;
+  }
+
+  .sm\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8 !important;
+  }
+
+  .sm\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af !important;
+  }
+
+  .sm\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a !important;
+  }
+
+  .sm\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff !important;
+  }
+
+  .sm\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff !important;
+  }
+
+  .sm\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe !important;
+  }
+
+  .sm\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc !important;
+  }
+
+  .sm\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8 !important;
+  }
+
+  .sm\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1 !important;
+  }
+
+  .sm\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5 !important;
+  }
+
+  .sm\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca !important;
+  }
+
+  .sm\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3 !important;
+  }
+
+  .sm\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81 !important;
+  }
+
+  .sm\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff !important;
+  }
+
+  .sm\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe !important;
+  }
+
+  .sm\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe !important;
+  }
+
+  .sm\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd !important;
+  }
+
+  .sm\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa !important;
+  }
+
+  .sm\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6 !important;
+  }
+
+  .sm\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed !important;
+  }
+
+  .sm\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9 !important;
+  }
+
+  .sm\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6 !important;
+  }
+
+  .sm\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95 !important;
+  }
+
+  .sm\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8 !important;
+  }
+
+  .sm\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3 !important;
+  }
+
+  .sm\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8 !important;
+  }
+
+  .sm\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4 !important;
+  }
+
+  .sm\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6 !important;
+  }
+
+  .sm\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899 !important;
+  }
+
+  .sm\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777 !important;
+  }
+
+  .sm\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d !important;
+  }
+
+  .sm\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d !important;
+  }
+
+  .sm\:ring-offset-pink-900 {
+    --ring-offset-color: #831843 !important;
+  }
+
+  .sm\:ring-offset-0 {
+    --ring-offset-width: 0 !important;
+  }
+
+  .sm\:ring-offset-1 {
+    --ring-offset-width: 1px !important;
+  }
+
+  .sm\:ring-offset-2 {
+    --ring-offset-width: 2px !important;
+  }
+
+  .sm\:ring-offset-4 {
+    --ring-offset-width: 4px !important;
+  }
+
+  .sm\:ring-offset-8 {
+    --ring-offset-width: 8px !important;
+  }
+
+  .sm\:ring-transparent {
+    --ring-opacity: 0 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-current {
+    --ring-color: currentColor !important;
+  }
+
+  .sm\:ring-black {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-white {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-gray-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-red-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-yellow-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-green-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-blue-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-indigo-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-purple-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-pink-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity)) !important;
+  }
+
+  .sm\:ring-opacity-0 {
+    --ring-opacity: 0 !important;
+  }
+
+  .sm\:ring-opacity-10 {
+    --ring-opacity: 0.1 !important;
+  }
+
+  .sm\:ring-opacity-20 {
+    --ring-opacity: 0.2 !important;
+  }
+
+  .sm\:ring-opacity-25 {
+    --ring-opacity: 0.25 !important;
+  }
+
+  .sm\:ring-opacity-30 {
+    --ring-opacity: 0.3 !important;
+  }
+
+  .sm\:ring-opacity-40 {
+    --ring-opacity: 0.4 !important;
+  }
+
+  .sm\:ring-opacity-50 {
+    --ring-opacity: 0.5 !important;
+  }
+
+  .sm\:ring-opacity-60 {
+    --ring-opacity: 0.6 !important;
+  }
+
+  .sm\:ring-opacity-70 {
+    --ring-opacity: 0.7 !important;
+  }
+
+  .sm\:ring-opacity-75 {
+    --ring-opacity: 0.75 !important;
+  }
+
+  .sm\:ring-opacity-80 {
+    --ring-opacity: 0.8 !important;
+  }
+
+  .sm\:ring-opacity-90 {
+    --ring-opacity: 0.9 !important;
+  }
+
+  .sm\:ring-opacity-100 {
+    --ring-opacity: 1 !important;
   }
 
   .sm\:fill-current {
@@ -71463,179 +73349,1122 @@ video {
   }
 
   .md\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:shadow-none {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-none:focus-within {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-none:hover {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-none:focus {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
+  }
+
+  .md\:ring-0 {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:ring-1 {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:ring-2 {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:ring-4 {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:ring-8 {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:ring {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:focus\:ring-0:focus {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:focus\:ring-1:focus {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:focus\:ring-2:focus {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:focus\:ring-4:focus {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:focus\:ring-8:focus {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:focus\:ring:focus {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .md\:ring-offset-transparent {
+    --ring-offset-color: transparent !important;
+  }
+
+  .md\:ring-offset-current {
+    --ring-offset-color: currentColor !important;
+  }
+
+  .md\:ring-offset-black {
+    --ring-offset-color: #000 !important;
+  }
+
+  .md\:ring-offset-white {
+    --ring-offset-color: #fff !important;
+  }
+
+  .md\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb !important;
+  }
+
+  .md\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6 !important;
+  }
+
+  .md\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb !important;
+  }
+
+  .md\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db !important;
+  }
+
+  .md\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af !important;
+  }
+
+  .md\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280 !important;
+  }
+
+  .md\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563 !important;
+  }
+
+  .md\:ring-offset-gray-700 {
+    --ring-offset-color: #374151 !important;
+  }
+
+  .md\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937 !important;
+  }
+
+  .md\:ring-offset-gray-900 {
+    --ring-offset-color: #111827 !important;
+  }
+
+  .md\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2 !important;
+  }
+
+  .md\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2 !important;
+  }
+
+  .md\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca !important;
+  }
+
+  .md\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5 !important;
+  }
+
+  .md\:ring-offset-red-400 {
+    --ring-offset-color: #f87171 !important;
+  }
+
+  .md\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444 !important;
+  }
+
+  .md\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626 !important;
+  }
+
+  .md\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c !important;
+  }
+
+  .md\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b !important;
+  }
+
+  .md\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d !important;
+  }
+
+  .md\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb !important;
+  }
+
+  .md\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7 !important;
+  }
+
+  .md\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a !important;
+  }
+
+  .md\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d !important;
+  }
+
+  .md\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24 !important;
+  }
+
+  .md\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b !important;
+  }
+
+  .md\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706 !important;
+  }
+
+  .md\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309 !important;
+  }
+
+  .md\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e !important;
+  }
+
+  .md\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f !important;
+  }
+
+  .md\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5 !important;
+  }
+
+  .md\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5 !important;
+  }
+
+  .md\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0 !important;
+  }
+
+  .md\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7 !important;
+  }
+
+  .md\:ring-offset-green-400 {
+    --ring-offset-color: #34d399 !important;
+  }
+
+  .md\:ring-offset-green-500 {
+    --ring-offset-color: #10b981 !important;
+  }
+
+  .md\:ring-offset-green-600 {
+    --ring-offset-color: #059669 !important;
+  }
+
+  .md\:ring-offset-green-700 {
+    --ring-offset-color: #047857 !important;
+  }
+
+  .md\:ring-offset-green-800 {
+    --ring-offset-color: #065f46 !important;
+  }
+
+  .md\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b !important;
+  }
+
+  .md\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff !important;
+  }
+
+  .md\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe !important;
+  }
+
+  .md\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe !important;
+  }
+
+  .md\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd !important;
+  }
+
+  .md\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa !important;
+  }
+
+  .md\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6 !important;
+  }
+
+  .md\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb !important;
+  }
+
+  .md\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8 !important;
+  }
+
+  .md\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af !important;
+  }
+
+  .md\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a !important;
+  }
+
+  .md\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff !important;
+  }
+
+  .md\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff !important;
+  }
+
+  .md\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe !important;
+  }
+
+  .md\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc !important;
+  }
+
+  .md\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8 !important;
+  }
+
+  .md\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1 !important;
+  }
+
+  .md\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5 !important;
+  }
+
+  .md\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca !important;
+  }
+
+  .md\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3 !important;
+  }
+
+  .md\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81 !important;
+  }
+
+  .md\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff !important;
+  }
+
+  .md\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe !important;
+  }
+
+  .md\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe !important;
+  }
+
+  .md\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd !important;
+  }
+
+  .md\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa !important;
+  }
+
+  .md\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6 !important;
+  }
+
+  .md\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed !important;
+  }
+
+  .md\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9 !important;
+  }
+
+  .md\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6 !important;
+  }
+
+  .md\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95 !important;
+  }
+
+  .md\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8 !important;
+  }
+
+  .md\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3 !important;
+  }
+
+  .md\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8 !important;
+  }
+
+  .md\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4 !important;
+  }
+
+  .md\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6 !important;
+  }
+
+  .md\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899 !important;
+  }
+
+  .md\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777 !important;
+  }
+
+  .md\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d !important;
+  }
+
+  .md\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d !important;
+  }
+
+  .md\:ring-offset-pink-900 {
+    --ring-offset-color: #831843 !important;
+  }
+
+  .md\:ring-offset-0 {
+    --ring-offset-width: 0 !important;
+  }
+
+  .md\:ring-offset-1 {
+    --ring-offset-width: 1px !important;
+  }
+
+  .md\:ring-offset-2 {
+    --ring-offset-width: 2px !important;
+  }
+
+  .md\:ring-offset-4 {
+    --ring-offset-width: 4px !important;
+  }
+
+  .md\:ring-offset-8 {
+    --ring-offset-width: 8px !important;
+  }
+
+  .md\:ring-transparent {
+    --ring-opacity: 0 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-current {
+    --ring-color: currentColor !important;
+  }
+
+  .md\:ring-black {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-white {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-gray-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-red-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-yellow-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-green-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-blue-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-indigo-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-purple-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-pink-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity)) !important;
+  }
+
+  .md\:ring-opacity-0 {
+    --ring-opacity: 0 !important;
+  }
+
+  .md\:ring-opacity-10 {
+    --ring-opacity: 0.1 !important;
+  }
+
+  .md\:ring-opacity-20 {
+    --ring-opacity: 0.2 !important;
+  }
+
+  .md\:ring-opacity-25 {
+    --ring-opacity: 0.25 !important;
+  }
+
+  .md\:ring-opacity-30 {
+    --ring-opacity: 0.3 !important;
+  }
+
+  .md\:ring-opacity-40 {
+    --ring-opacity: 0.4 !important;
+  }
+
+  .md\:ring-opacity-50 {
+    --ring-opacity: 0.5 !important;
+  }
+
+  .md\:ring-opacity-60 {
+    --ring-opacity: 0.6 !important;
+  }
+
+  .md\:ring-opacity-70 {
+    --ring-opacity: 0.7 !important;
+  }
+
+  .md\:ring-opacity-75 {
+    --ring-opacity: 0.75 !important;
+  }
+
+  .md\:ring-opacity-80 {
+    --ring-opacity: 0.8 !important;
+  }
+
+  .md\:ring-opacity-90 {
+    --ring-opacity: 0.9 !important;
+  }
+
+  .md\:ring-opacity-100 {
+    --ring-opacity: 1 !important;
   }
 
   .md\:fill-current {
@@ -97467,179 +100296,1122 @@ video {
   }
 
   .lg\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:shadow-none {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-none:focus-within {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-none:hover {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-none:focus {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
+  }
+
+  .lg\:ring-0 {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:ring-1 {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:ring-2 {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:ring-4 {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:ring-8 {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:ring {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:focus\:ring-0:focus {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:focus\:ring-1:focus {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:focus\:ring-2:focus {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:focus\:ring-4:focus {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:focus\:ring-8:focus {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:focus\:ring:focus {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .lg\:ring-offset-transparent {
+    --ring-offset-color: transparent !important;
+  }
+
+  .lg\:ring-offset-current {
+    --ring-offset-color: currentColor !important;
+  }
+
+  .lg\:ring-offset-black {
+    --ring-offset-color: #000 !important;
+  }
+
+  .lg\:ring-offset-white {
+    --ring-offset-color: #fff !important;
+  }
+
+  .lg\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb !important;
+  }
+
+  .lg\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6 !important;
+  }
+
+  .lg\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb !important;
+  }
+
+  .lg\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db !important;
+  }
+
+  .lg\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af !important;
+  }
+
+  .lg\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280 !important;
+  }
+
+  .lg\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563 !important;
+  }
+
+  .lg\:ring-offset-gray-700 {
+    --ring-offset-color: #374151 !important;
+  }
+
+  .lg\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937 !important;
+  }
+
+  .lg\:ring-offset-gray-900 {
+    --ring-offset-color: #111827 !important;
+  }
+
+  .lg\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2 !important;
+  }
+
+  .lg\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2 !important;
+  }
+
+  .lg\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca !important;
+  }
+
+  .lg\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5 !important;
+  }
+
+  .lg\:ring-offset-red-400 {
+    --ring-offset-color: #f87171 !important;
+  }
+
+  .lg\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444 !important;
+  }
+
+  .lg\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626 !important;
+  }
+
+  .lg\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c !important;
+  }
+
+  .lg\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b !important;
+  }
+
+  .lg\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d !important;
+  }
+
+  .lg\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb !important;
+  }
+
+  .lg\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7 !important;
+  }
+
+  .lg\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a !important;
+  }
+
+  .lg\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d !important;
+  }
+
+  .lg\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24 !important;
+  }
+
+  .lg\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b !important;
+  }
+
+  .lg\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706 !important;
+  }
+
+  .lg\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309 !important;
+  }
+
+  .lg\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e !important;
+  }
+
+  .lg\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f !important;
+  }
+
+  .lg\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5 !important;
+  }
+
+  .lg\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5 !important;
+  }
+
+  .lg\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0 !important;
+  }
+
+  .lg\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7 !important;
+  }
+
+  .lg\:ring-offset-green-400 {
+    --ring-offset-color: #34d399 !important;
+  }
+
+  .lg\:ring-offset-green-500 {
+    --ring-offset-color: #10b981 !important;
+  }
+
+  .lg\:ring-offset-green-600 {
+    --ring-offset-color: #059669 !important;
+  }
+
+  .lg\:ring-offset-green-700 {
+    --ring-offset-color: #047857 !important;
+  }
+
+  .lg\:ring-offset-green-800 {
+    --ring-offset-color: #065f46 !important;
+  }
+
+  .lg\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b !important;
+  }
+
+  .lg\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff !important;
+  }
+
+  .lg\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe !important;
+  }
+
+  .lg\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe !important;
+  }
+
+  .lg\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd !important;
+  }
+
+  .lg\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa !important;
+  }
+
+  .lg\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6 !important;
+  }
+
+  .lg\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb !important;
+  }
+
+  .lg\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8 !important;
+  }
+
+  .lg\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af !important;
+  }
+
+  .lg\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a !important;
+  }
+
+  .lg\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff !important;
+  }
+
+  .lg\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff !important;
+  }
+
+  .lg\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe !important;
+  }
+
+  .lg\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc !important;
+  }
+
+  .lg\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8 !important;
+  }
+
+  .lg\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1 !important;
+  }
+
+  .lg\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5 !important;
+  }
+
+  .lg\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca !important;
+  }
+
+  .lg\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3 !important;
+  }
+
+  .lg\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81 !important;
+  }
+
+  .lg\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff !important;
+  }
+
+  .lg\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe !important;
+  }
+
+  .lg\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe !important;
+  }
+
+  .lg\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd !important;
+  }
+
+  .lg\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa !important;
+  }
+
+  .lg\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6 !important;
+  }
+
+  .lg\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed !important;
+  }
+
+  .lg\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9 !important;
+  }
+
+  .lg\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6 !important;
+  }
+
+  .lg\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95 !important;
+  }
+
+  .lg\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8 !important;
+  }
+
+  .lg\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3 !important;
+  }
+
+  .lg\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8 !important;
+  }
+
+  .lg\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4 !important;
+  }
+
+  .lg\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6 !important;
+  }
+
+  .lg\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899 !important;
+  }
+
+  .lg\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777 !important;
+  }
+
+  .lg\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d !important;
+  }
+
+  .lg\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d !important;
+  }
+
+  .lg\:ring-offset-pink-900 {
+    --ring-offset-color: #831843 !important;
+  }
+
+  .lg\:ring-offset-0 {
+    --ring-offset-width: 0 !important;
+  }
+
+  .lg\:ring-offset-1 {
+    --ring-offset-width: 1px !important;
+  }
+
+  .lg\:ring-offset-2 {
+    --ring-offset-width: 2px !important;
+  }
+
+  .lg\:ring-offset-4 {
+    --ring-offset-width: 4px !important;
+  }
+
+  .lg\:ring-offset-8 {
+    --ring-offset-width: 8px !important;
+  }
+
+  .lg\:ring-transparent {
+    --ring-opacity: 0 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-current {
+    --ring-color: currentColor !important;
+  }
+
+  .lg\:ring-black {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-white {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-gray-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-red-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-yellow-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-green-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-blue-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-indigo-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-purple-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-pink-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity)) !important;
+  }
+
+  .lg\:ring-opacity-0 {
+    --ring-opacity: 0 !important;
+  }
+
+  .lg\:ring-opacity-10 {
+    --ring-opacity: 0.1 !important;
+  }
+
+  .lg\:ring-opacity-20 {
+    --ring-opacity: 0.2 !important;
+  }
+
+  .lg\:ring-opacity-25 {
+    --ring-opacity: 0.25 !important;
+  }
+
+  .lg\:ring-opacity-30 {
+    --ring-opacity: 0.3 !important;
+  }
+
+  .lg\:ring-opacity-40 {
+    --ring-opacity: 0.4 !important;
+  }
+
+  .lg\:ring-opacity-50 {
+    --ring-opacity: 0.5 !important;
+  }
+
+  .lg\:ring-opacity-60 {
+    --ring-opacity: 0.6 !important;
+  }
+
+  .lg\:ring-opacity-70 {
+    --ring-opacity: 0.7 !important;
+  }
+
+  .lg\:ring-opacity-75 {
+    --ring-opacity: 0.75 !important;
+  }
+
+  .lg\:ring-opacity-80 {
+    --ring-opacity: 0.8 !important;
+  }
+
+  .lg\:ring-opacity-90 {
+    --ring-opacity: 0.9 !important;
+  }
+
+  .lg\:ring-opacity-100 {
+    --ring-opacity: 1 !important;
   }
 
   .lg\:fill-current {
@@ -123471,179 +127243,1122 @@ video {
   }
 
   .xl\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:shadow-none {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-none:focus-within {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-none:hover {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-none:focus {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
+  }
+
+  .xl\:ring-0 {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:ring-1 {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:ring-2 {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:ring-4 {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:ring-8 {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:ring {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:focus\:ring-0:focus {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:focus\:ring-1:focus {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:focus\:ring-2:focus {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:focus\:ring-4:focus {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:focus\:ring-8:focus {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:focus\:ring:focus {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .xl\:ring-offset-transparent {
+    --ring-offset-color: transparent !important;
+  }
+
+  .xl\:ring-offset-current {
+    --ring-offset-color: currentColor !important;
+  }
+
+  .xl\:ring-offset-black {
+    --ring-offset-color: #000 !important;
+  }
+
+  .xl\:ring-offset-white {
+    --ring-offset-color: #fff !important;
+  }
+
+  .xl\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb !important;
+  }
+
+  .xl\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6 !important;
+  }
+
+  .xl\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb !important;
+  }
+
+  .xl\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db !important;
+  }
+
+  .xl\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af !important;
+  }
+
+  .xl\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280 !important;
+  }
+
+  .xl\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563 !important;
+  }
+
+  .xl\:ring-offset-gray-700 {
+    --ring-offset-color: #374151 !important;
+  }
+
+  .xl\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937 !important;
+  }
+
+  .xl\:ring-offset-gray-900 {
+    --ring-offset-color: #111827 !important;
+  }
+
+  .xl\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2 !important;
+  }
+
+  .xl\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2 !important;
+  }
+
+  .xl\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca !important;
+  }
+
+  .xl\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5 !important;
+  }
+
+  .xl\:ring-offset-red-400 {
+    --ring-offset-color: #f87171 !important;
+  }
+
+  .xl\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444 !important;
+  }
+
+  .xl\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626 !important;
+  }
+
+  .xl\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c !important;
+  }
+
+  .xl\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b !important;
+  }
+
+  .xl\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d !important;
+  }
+
+  .xl\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb !important;
+  }
+
+  .xl\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7 !important;
+  }
+
+  .xl\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a !important;
+  }
+
+  .xl\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d !important;
+  }
+
+  .xl\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24 !important;
+  }
+
+  .xl\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b !important;
+  }
+
+  .xl\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706 !important;
+  }
+
+  .xl\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309 !important;
+  }
+
+  .xl\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e !important;
+  }
+
+  .xl\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f !important;
+  }
+
+  .xl\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5 !important;
+  }
+
+  .xl\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5 !important;
+  }
+
+  .xl\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0 !important;
+  }
+
+  .xl\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7 !important;
+  }
+
+  .xl\:ring-offset-green-400 {
+    --ring-offset-color: #34d399 !important;
+  }
+
+  .xl\:ring-offset-green-500 {
+    --ring-offset-color: #10b981 !important;
+  }
+
+  .xl\:ring-offset-green-600 {
+    --ring-offset-color: #059669 !important;
+  }
+
+  .xl\:ring-offset-green-700 {
+    --ring-offset-color: #047857 !important;
+  }
+
+  .xl\:ring-offset-green-800 {
+    --ring-offset-color: #065f46 !important;
+  }
+
+  .xl\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b !important;
+  }
+
+  .xl\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff !important;
+  }
+
+  .xl\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe !important;
+  }
+
+  .xl\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe !important;
+  }
+
+  .xl\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd !important;
+  }
+
+  .xl\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa !important;
+  }
+
+  .xl\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6 !important;
+  }
+
+  .xl\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb !important;
+  }
+
+  .xl\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8 !important;
+  }
+
+  .xl\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af !important;
+  }
+
+  .xl\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a !important;
+  }
+
+  .xl\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff !important;
+  }
+
+  .xl\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff !important;
+  }
+
+  .xl\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe !important;
+  }
+
+  .xl\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc !important;
+  }
+
+  .xl\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8 !important;
+  }
+
+  .xl\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1 !important;
+  }
+
+  .xl\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5 !important;
+  }
+
+  .xl\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca !important;
+  }
+
+  .xl\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3 !important;
+  }
+
+  .xl\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81 !important;
+  }
+
+  .xl\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff !important;
+  }
+
+  .xl\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe !important;
+  }
+
+  .xl\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe !important;
+  }
+
+  .xl\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd !important;
+  }
+
+  .xl\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa !important;
+  }
+
+  .xl\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6 !important;
+  }
+
+  .xl\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed !important;
+  }
+
+  .xl\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9 !important;
+  }
+
+  .xl\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6 !important;
+  }
+
+  .xl\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95 !important;
+  }
+
+  .xl\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8 !important;
+  }
+
+  .xl\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3 !important;
+  }
+
+  .xl\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8 !important;
+  }
+
+  .xl\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4 !important;
+  }
+
+  .xl\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6 !important;
+  }
+
+  .xl\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899 !important;
+  }
+
+  .xl\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777 !important;
+  }
+
+  .xl\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d !important;
+  }
+
+  .xl\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d !important;
+  }
+
+  .xl\:ring-offset-pink-900 {
+    --ring-offset-color: #831843 !important;
+  }
+
+  .xl\:ring-offset-0 {
+    --ring-offset-width: 0 !important;
+  }
+
+  .xl\:ring-offset-1 {
+    --ring-offset-width: 1px !important;
+  }
+
+  .xl\:ring-offset-2 {
+    --ring-offset-width: 2px !important;
+  }
+
+  .xl\:ring-offset-4 {
+    --ring-offset-width: 4px !important;
+  }
+
+  .xl\:ring-offset-8 {
+    --ring-offset-width: 8px !important;
+  }
+
+  .xl\:ring-transparent {
+    --ring-opacity: 0 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-current {
+    --ring-color: currentColor !important;
+  }
+
+  .xl\:ring-black {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-white {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-gray-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-red-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-yellow-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-green-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-blue-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-indigo-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-purple-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-pink-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity)) !important;
+  }
+
+  .xl\:ring-opacity-0 {
+    --ring-opacity: 0 !important;
+  }
+
+  .xl\:ring-opacity-10 {
+    --ring-opacity: 0.1 !important;
+  }
+
+  .xl\:ring-opacity-20 {
+    --ring-opacity: 0.2 !important;
+  }
+
+  .xl\:ring-opacity-25 {
+    --ring-opacity: 0.25 !important;
+  }
+
+  .xl\:ring-opacity-30 {
+    --ring-opacity: 0.3 !important;
+  }
+
+  .xl\:ring-opacity-40 {
+    --ring-opacity: 0.4 !important;
+  }
+
+  .xl\:ring-opacity-50 {
+    --ring-opacity: 0.5 !important;
+  }
+
+  .xl\:ring-opacity-60 {
+    --ring-opacity: 0.6 !important;
+  }
+
+  .xl\:ring-opacity-70 {
+    --ring-opacity: 0.7 !important;
+  }
+
+  .xl\:ring-opacity-75 {
+    --ring-opacity: 0.75 !important;
+  }
+
+  .xl\:ring-opacity-80 {
+    --ring-opacity: 0.8 !important;
+  }
+
+  .xl\:ring-opacity-90 {
+    --ring-opacity: 0.9 !important;
+  }
+
+  .xl\:ring-opacity-100 {
+    --ring-opacity: 1 !important;
   }
 
   .xl\:fill-current {
@@ -149475,179 +154190,1122 @@ video {
   }
 
   .\32xl\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-none {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-none:focus-within {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-none:hover {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor !important;
+    --box-shadow: 0 0 0 2px currentColor !important;
+    box-shadow: var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-none:focus {
-    box-shadow: none !important;
+    --box-shadow: none !important;
+    box-shadow: var(--box-shadow) !important;
+  }
+
+  .\32xl\:ring-0 {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:ring-1 {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:ring-2 {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:ring-4 {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:ring-8 {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:ring {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:focus\:ring-0:focus {
+    --ring-width: 0 !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:focus\:ring-1:focus {
+    --ring-width: 1px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:focus\:ring-2:focus {
+    --ring-width: 2px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:focus\:ring-4:focus {
+    --ring-width: 4px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:focus\:ring-8:focus {
+    --ring-width: 8px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:focus\:ring:focus {
+    --ring-width: 3px !important;
+    --ring-color-default: rgba(59, 130, 246, 0.5) !important;
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000) !important;
+  }
+
+  .\32xl\:ring-offset-transparent {
+    --ring-offset-color: transparent !important;
+  }
+
+  .\32xl\:ring-offset-current {
+    --ring-offset-color: currentColor !important;
+  }
+
+  .\32xl\:ring-offset-black {
+    --ring-offset-color: #000 !important;
+  }
+
+  .\32xl\:ring-offset-white {
+    --ring-offset-color: #fff !important;
+  }
+
+  .\32xl\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb !important;
+  }
+
+  .\32xl\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6 !important;
+  }
+
+  .\32xl\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb !important;
+  }
+
+  .\32xl\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db !important;
+  }
+
+  .\32xl\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af !important;
+  }
+
+  .\32xl\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280 !important;
+  }
+
+  .\32xl\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563 !important;
+  }
+
+  .\32xl\:ring-offset-gray-700 {
+    --ring-offset-color: #374151 !important;
+  }
+
+  .\32xl\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937 !important;
+  }
+
+  .\32xl\:ring-offset-gray-900 {
+    --ring-offset-color: #111827 !important;
+  }
+
+  .\32xl\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2 !important;
+  }
+
+  .\32xl\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2 !important;
+  }
+
+  .\32xl\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca !important;
+  }
+
+  .\32xl\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5 !important;
+  }
+
+  .\32xl\:ring-offset-red-400 {
+    --ring-offset-color: #f87171 !important;
+  }
+
+  .\32xl\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444 !important;
+  }
+
+  .\32xl\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626 !important;
+  }
+
+  .\32xl\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c !important;
+  }
+
+  .\32xl\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b !important;
+  }
+
+  .\32xl\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d !important;
+  }
+
+  .\32xl\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb !important;
+  }
+
+  .\32xl\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7 !important;
+  }
+
+  .\32xl\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a !important;
+  }
+
+  .\32xl\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d !important;
+  }
+
+  .\32xl\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24 !important;
+  }
+
+  .\32xl\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b !important;
+  }
+
+  .\32xl\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706 !important;
+  }
+
+  .\32xl\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309 !important;
+  }
+
+  .\32xl\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e !important;
+  }
+
+  .\32xl\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f !important;
+  }
+
+  .\32xl\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5 !important;
+  }
+
+  .\32xl\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5 !important;
+  }
+
+  .\32xl\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0 !important;
+  }
+
+  .\32xl\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7 !important;
+  }
+
+  .\32xl\:ring-offset-green-400 {
+    --ring-offset-color: #34d399 !important;
+  }
+
+  .\32xl\:ring-offset-green-500 {
+    --ring-offset-color: #10b981 !important;
+  }
+
+  .\32xl\:ring-offset-green-600 {
+    --ring-offset-color: #059669 !important;
+  }
+
+  .\32xl\:ring-offset-green-700 {
+    --ring-offset-color: #047857 !important;
+  }
+
+  .\32xl\:ring-offset-green-800 {
+    --ring-offset-color: #065f46 !important;
+  }
+
+  .\32xl\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b !important;
+  }
+
+  .\32xl\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff !important;
+  }
+
+  .\32xl\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe !important;
+  }
+
+  .\32xl\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe !important;
+  }
+
+  .\32xl\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd !important;
+  }
+
+  .\32xl\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa !important;
+  }
+
+  .\32xl\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6 !important;
+  }
+
+  .\32xl\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb !important;
+  }
+
+  .\32xl\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8 !important;
+  }
+
+  .\32xl\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af !important;
+  }
+
+  .\32xl\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a !important;
+  }
+
+  .\32xl\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff !important;
+  }
+
+  .\32xl\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff !important;
+  }
+
+  .\32xl\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe !important;
+  }
+
+  .\32xl\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc !important;
+  }
+
+  .\32xl\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8 !important;
+  }
+
+  .\32xl\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1 !important;
+  }
+
+  .\32xl\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5 !important;
+  }
+
+  .\32xl\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca !important;
+  }
+
+  .\32xl\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3 !important;
+  }
+
+  .\32xl\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81 !important;
+  }
+
+  .\32xl\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff !important;
+  }
+
+  .\32xl\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe !important;
+  }
+
+  .\32xl\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe !important;
+  }
+
+  .\32xl\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd !important;
+  }
+
+  .\32xl\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa !important;
+  }
+
+  .\32xl\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6 !important;
+  }
+
+  .\32xl\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed !important;
+  }
+
+  .\32xl\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9 !important;
+  }
+
+  .\32xl\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6 !important;
+  }
+
+  .\32xl\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95 !important;
+  }
+
+  .\32xl\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8 !important;
+  }
+
+  .\32xl\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3 !important;
+  }
+
+  .\32xl\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8 !important;
+  }
+
+  .\32xl\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4 !important;
+  }
+
+  .\32xl\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6 !important;
+  }
+
+  .\32xl\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899 !important;
+  }
+
+  .\32xl\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777 !important;
+  }
+
+  .\32xl\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d !important;
+  }
+
+  .\32xl\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d !important;
+  }
+
+  .\32xl\:ring-offset-pink-900 {
+    --ring-offset-color: #831843 !important;
+  }
+
+  .\32xl\:ring-offset-0 {
+    --ring-offset-width: 0 !important;
+  }
+
+  .\32xl\:ring-offset-1 {
+    --ring-offset-width: 1px !important;
+  }
+
+  .\32xl\:ring-offset-2 {
+    --ring-offset-width: 2px !important;
+  }
+
+  .\32xl\:ring-offset-4 {
+    --ring-offset-width: 4px !important;
+  }
+
+  .\32xl\:ring-offset-8 {
+    --ring-offset-width: 8px !important;
+  }
+
+  .\32xl\:ring-transparent {
+    --ring-opacity: 0 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-current {
+    --ring-color: currentColor !important;
+  }
+
+  .\32xl\:ring-black {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-white {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-gray-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-red-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-yellow-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-green-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-blue-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-indigo-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-purple-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-50 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-100 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-200 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-300 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-400 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-500 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-600 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-700 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-800 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-pink-900 {
+    --ring-opacity: 1 !important;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity)) !important;
+  }
+
+  .\32xl\:ring-opacity-0 {
+    --ring-opacity: 0 !important;
+  }
+
+  .\32xl\:ring-opacity-10 {
+    --ring-opacity: 0.1 !important;
+  }
+
+  .\32xl\:ring-opacity-20 {
+    --ring-opacity: 0.2 !important;
+  }
+
+  .\32xl\:ring-opacity-25 {
+    --ring-opacity: 0.25 !important;
+  }
+
+  .\32xl\:ring-opacity-30 {
+    --ring-opacity: 0.3 !important;
+  }
+
+  .\32xl\:ring-opacity-40 {
+    --ring-opacity: 0.4 !important;
+  }
+
+  .\32xl\:ring-opacity-50 {
+    --ring-opacity: 0.5 !important;
+  }
+
+  .\32xl\:ring-opacity-60 {
+    --ring-opacity: 0.6 !important;
+  }
+
+  .\32xl\:ring-opacity-70 {
+    --ring-opacity: 0.7 !important;
+  }
+
+  .\32xl\:ring-opacity-75 {
+    --ring-opacity: 0.75 !important;
+  }
+
+  .\32xl\:ring-opacity-80 {
+    --ring-opacity: 0.8 !important;
+  }
+
+  .\32xl\:ring-opacity-90 {
+    --ring-opacity: 0.9 !important;
+  }
+
+  .\32xl\:ring-opacity-100 {
+    --ring-opacity: 1 !important;
   }
 
   .\32xl\:fill-current {
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index 33d443018f26..e2fb776aa124 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -17683,179 +17683,1122 @@ video {
 }
 
 .shadow-xs {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-sm {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-2xl {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-inner {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-outline {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-solid {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-none {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-xs:focus-within {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-sm:focus-within {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow:focus-within {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-md:focus-within {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-lg:focus-within {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-xl:focus-within {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-2xl:focus-within {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-inner:focus-within {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-outline:focus-within {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-solid:focus-within {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-none:focus-within {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-xs:hover {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-sm:hover {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow:hover {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-md:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-lg:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-xl:hover {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-2xl:hover {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-inner:hover {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-outline:hover {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-solid:hover {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-none:hover {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-xs:focus {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-sm:focus {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow:focus {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-md:focus {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-lg:focus {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-xl:focus {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-2xl:focus {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-inner:focus {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-outline:focus {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-solid:focus {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-none:focus {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
+}
+
+.ring-0 {
+  --ring-width: 0;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-1 {
+  --ring-width: 1px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-2 {
+  --ring-width: 2px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-4 {
+  --ring-width: 4px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-8 {
+  --ring-width: 8px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring {
+  --ring-width: 3px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-0:focus {
+  --ring-width: 0;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-1:focus {
+  --ring-width: 1px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-2:focus {
+  --ring-width: 2px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-4:focus {
+  --ring-width: 4px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-8:focus {
+  --ring-width: 8px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring:focus {
+  --ring-width: 3px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-offset-transparent {
+  --ring-offset-color: transparent;
+}
+
+.ring-offset-current {
+  --ring-offset-color: currentColor;
+}
+
+.ring-offset-black {
+  --ring-offset-color: #000;
+}
+
+.ring-offset-white {
+  --ring-offset-color: #fff;
+}
+
+.ring-offset-gray-50 {
+  --ring-offset-color: #f9fafb;
+}
+
+.ring-offset-gray-100 {
+  --ring-offset-color: #f3f4f6;
+}
+
+.ring-offset-gray-200 {
+  --ring-offset-color: #e5e7eb;
+}
+
+.ring-offset-gray-300 {
+  --ring-offset-color: #d1d5db;
+}
+
+.ring-offset-gray-400 {
+  --ring-offset-color: #9ca3af;
+}
+
+.ring-offset-gray-500 {
+  --ring-offset-color: #6b7280;
+}
+
+.ring-offset-gray-600 {
+  --ring-offset-color: #4b5563;
+}
+
+.ring-offset-gray-700 {
+  --ring-offset-color: #374151;
+}
+
+.ring-offset-gray-800 {
+  --ring-offset-color: #1f2937;
+}
+
+.ring-offset-gray-900 {
+  --ring-offset-color: #111827;
+}
+
+.ring-offset-red-50 {
+  --ring-offset-color: #fef2f2;
+}
+
+.ring-offset-red-100 {
+  --ring-offset-color: #fee2e2;
+}
+
+.ring-offset-red-200 {
+  --ring-offset-color: #fecaca;
+}
+
+.ring-offset-red-300 {
+  --ring-offset-color: #fca5a5;
+}
+
+.ring-offset-red-400 {
+  --ring-offset-color: #f87171;
+}
+
+.ring-offset-red-500 {
+  --ring-offset-color: #ef4444;
+}
+
+.ring-offset-red-600 {
+  --ring-offset-color: #dc2626;
+}
+
+.ring-offset-red-700 {
+  --ring-offset-color: #b91c1c;
+}
+
+.ring-offset-red-800 {
+  --ring-offset-color: #991b1b;
+}
+
+.ring-offset-red-900 {
+  --ring-offset-color: #7f1d1d;
+}
+
+.ring-offset-yellow-50 {
+  --ring-offset-color: #fffbeb;
+}
+
+.ring-offset-yellow-100 {
+  --ring-offset-color: #fef3c7;
+}
+
+.ring-offset-yellow-200 {
+  --ring-offset-color: #fde68a;
+}
+
+.ring-offset-yellow-300 {
+  --ring-offset-color: #fcd34d;
+}
+
+.ring-offset-yellow-400 {
+  --ring-offset-color: #fbbf24;
+}
+
+.ring-offset-yellow-500 {
+  --ring-offset-color: #f59e0b;
+}
+
+.ring-offset-yellow-600 {
+  --ring-offset-color: #d97706;
+}
+
+.ring-offset-yellow-700 {
+  --ring-offset-color: #b45309;
+}
+
+.ring-offset-yellow-800 {
+  --ring-offset-color: #92400e;
+}
+
+.ring-offset-yellow-900 {
+  --ring-offset-color: #78350f;
+}
+
+.ring-offset-green-50 {
+  --ring-offset-color: #ecfdf5;
+}
+
+.ring-offset-green-100 {
+  --ring-offset-color: #d1fae5;
+}
+
+.ring-offset-green-200 {
+  --ring-offset-color: #a7f3d0;
+}
+
+.ring-offset-green-300 {
+  --ring-offset-color: #6ee7b7;
+}
+
+.ring-offset-green-400 {
+  --ring-offset-color: #34d399;
+}
+
+.ring-offset-green-500 {
+  --ring-offset-color: #10b981;
+}
+
+.ring-offset-green-600 {
+  --ring-offset-color: #059669;
+}
+
+.ring-offset-green-700 {
+  --ring-offset-color: #047857;
+}
+
+.ring-offset-green-800 {
+  --ring-offset-color: #065f46;
+}
+
+.ring-offset-green-900 {
+  --ring-offset-color: #064e3b;
+}
+
+.ring-offset-blue-50 {
+  --ring-offset-color: #eff6ff;
+}
+
+.ring-offset-blue-100 {
+  --ring-offset-color: #dbeafe;
+}
+
+.ring-offset-blue-200 {
+  --ring-offset-color: #bfdbfe;
+}
+
+.ring-offset-blue-300 {
+  --ring-offset-color: #93c5fd;
+}
+
+.ring-offset-blue-400 {
+  --ring-offset-color: #60a5fa;
+}
+
+.ring-offset-blue-500 {
+  --ring-offset-color: #3b82f6;
+}
+
+.ring-offset-blue-600 {
+  --ring-offset-color: #2563eb;
+}
+
+.ring-offset-blue-700 {
+  --ring-offset-color: #1d4ed8;
+}
+
+.ring-offset-blue-800 {
+  --ring-offset-color: #1e40af;
+}
+
+.ring-offset-blue-900 {
+  --ring-offset-color: #1e3a8a;
+}
+
+.ring-offset-indigo-50 {
+  --ring-offset-color: #eef2ff;
+}
+
+.ring-offset-indigo-100 {
+  --ring-offset-color: #e0e7ff;
+}
+
+.ring-offset-indigo-200 {
+  --ring-offset-color: #c7d2fe;
+}
+
+.ring-offset-indigo-300 {
+  --ring-offset-color: #a5b4fc;
+}
+
+.ring-offset-indigo-400 {
+  --ring-offset-color: #818cf8;
+}
+
+.ring-offset-indigo-500 {
+  --ring-offset-color: #6366f1;
+}
+
+.ring-offset-indigo-600 {
+  --ring-offset-color: #4f46e5;
+}
+
+.ring-offset-indigo-700 {
+  --ring-offset-color: #4338ca;
+}
+
+.ring-offset-indigo-800 {
+  --ring-offset-color: #3730a3;
+}
+
+.ring-offset-indigo-900 {
+  --ring-offset-color: #312e81;
+}
+
+.ring-offset-purple-50 {
+  --ring-offset-color: #f5f3ff;
+}
+
+.ring-offset-purple-100 {
+  --ring-offset-color: #ede9fe;
+}
+
+.ring-offset-purple-200 {
+  --ring-offset-color: #ddd6fe;
+}
+
+.ring-offset-purple-300 {
+  --ring-offset-color: #c4b5fd;
+}
+
+.ring-offset-purple-400 {
+  --ring-offset-color: #a78bfa;
+}
+
+.ring-offset-purple-500 {
+  --ring-offset-color: #8b5cf6;
+}
+
+.ring-offset-purple-600 {
+  --ring-offset-color: #7c3aed;
+}
+
+.ring-offset-purple-700 {
+  --ring-offset-color: #6d28d9;
+}
+
+.ring-offset-purple-800 {
+  --ring-offset-color: #5b21b6;
+}
+
+.ring-offset-purple-900 {
+  --ring-offset-color: #4c1d95;
+}
+
+.ring-offset-pink-50 {
+  --ring-offset-color: #fdf2f8;
+}
+
+.ring-offset-pink-100 {
+  --ring-offset-color: #fce7f3;
+}
+
+.ring-offset-pink-200 {
+  --ring-offset-color: #fbcfe8;
+}
+
+.ring-offset-pink-300 {
+  --ring-offset-color: #f9a8d4;
+}
+
+.ring-offset-pink-400 {
+  --ring-offset-color: #f472b6;
+}
+
+.ring-offset-pink-500 {
+  --ring-offset-color: #ec4899;
+}
+
+.ring-offset-pink-600 {
+  --ring-offset-color: #db2777;
+}
+
+.ring-offset-pink-700 {
+  --ring-offset-color: #be185d;
+}
+
+.ring-offset-pink-800 {
+  --ring-offset-color: #9d174d;
+}
+
+.ring-offset-pink-900 {
+  --ring-offset-color: #831843;
+}
+
+.ring-offset-0 {
+  --ring-offset-width: 0;
+}
+
+.ring-offset-1 {
+  --ring-offset-width: 1px;
+}
+
+.ring-offset-2 {
+  --ring-offset-width: 2px;
+}
+
+.ring-offset-4 {
+  --ring-offset-width: 4px;
+}
+
+.ring-offset-8 {
+  --ring-offset-width: 8px;
+}
+
+.ring-transparent {
+  --ring-opacity: 0;
+  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+}
+
+.ring-current {
+  --ring-color: currentColor;
+}
+
+.ring-black {
+  --ring-opacity: 1;
+  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+}
+
+.ring-white {
+  --ring-opacity: 1;
+  --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+}
+
+.ring-gray-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+}
+
+.ring-gray-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+}
+
+.ring-gray-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+}
+
+.ring-gray-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+}
+
+.ring-gray-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+}
+
+.ring-gray-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+}
+
+.ring-gray-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+}
+
+.ring-gray-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+}
+
+.ring-gray-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+}
+
+.ring-gray-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+}
+
+.ring-red-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+}
+
+.ring-red-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+}
+
+.ring-red-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+}
+
+.ring-red-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+}
+
+.ring-red-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+}
+
+.ring-red-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+}
+
+.ring-red-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+}
+
+.ring-red-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+}
+
+.ring-red-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+}
+
+.ring-red-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+}
+
+.ring-yellow-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+}
+
+.ring-yellow-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+}
+
+.ring-yellow-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+}
+
+.ring-yellow-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+}
+
+.ring-yellow-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+}
+
+.ring-yellow-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+}
+
+.ring-yellow-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+}
+
+.ring-yellow-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+}
+
+.ring-yellow-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+}
+
+.ring-yellow-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+}
+
+.ring-green-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+}
+
+.ring-green-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+}
+
+.ring-green-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+}
+
+.ring-green-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+}
+
+.ring-green-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+}
+
+.ring-green-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+}
+
+.ring-green-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+}
+
+.ring-green-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+}
+
+.ring-green-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+}
+
+.ring-green-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+}
+
+.ring-blue-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+}
+
+.ring-blue-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+}
+
+.ring-blue-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+}
+
+.ring-blue-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+}
+
+.ring-blue-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+}
+
+.ring-blue-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+}
+
+.ring-blue-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+}
+
+.ring-blue-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+}
+
+.ring-blue-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+}
+
+.ring-blue-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+}
+
+.ring-indigo-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+}
+
+.ring-indigo-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+}
+
+.ring-indigo-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+}
+
+.ring-indigo-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+}
+
+.ring-indigo-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+}
+
+.ring-indigo-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+}
+
+.ring-indigo-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+}
+
+.ring-indigo-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+}
+
+.ring-indigo-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+}
+
+.ring-indigo-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+}
+
+.ring-purple-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+}
+
+.ring-purple-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+}
+
+.ring-purple-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+}
+
+.ring-purple-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+}
+
+.ring-purple-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+}
+
+.ring-purple-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+}
+
+.ring-purple-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+}
+
+.ring-purple-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+}
+
+.ring-purple-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+}
+
+.ring-purple-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+}
+
+.ring-pink-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+}
+
+.ring-pink-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+}
+
+.ring-pink-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+}
+
+.ring-pink-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+}
+
+.ring-pink-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+}
+
+.ring-pink-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+}
+
+.ring-pink-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+}
+
+.ring-pink-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+}
+
+.ring-pink-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+}
+
+.ring-pink-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+}
+
+.ring-opacity-0 {
+  --ring-opacity: 0;
+}
+
+.ring-opacity-10 {
+  --ring-opacity: 0.1;
+}
+
+.ring-opacity-20 {
+  --ring-opacity: 0.2;
+}
+
+.ring-opacity-25 {
+  --ring-opacity: 0.25;
+}
+
+.ring-opacity-30 {
+  --ring-opacity: 0.3;
+}
+
+.ring-opacity-40 {
+  --ring-opacity: 0.4;
+}
+
+.ring-opacity-50 {
+  --ring-opacity: 0.5;
+}
+
+.ring-opacity-60 {
+  --ring-opacity: 0.6;
+}
+
+.ring-opacity-70 {
+  --ring-opacity: 0.7;
+}
+
+.ring-opacity-75 {
+  --ring-opacity: 0.75;
+}
+
+.ring-opacity-80 {
+  --ring-opacity: 0.8;
+}
+
+.ring-opacity-90 {
+  --ring-opacity: 0.9;
+}
+
+.ring-opacity-100 {
+  --ring-opacity: 1;
 }
 
 .fill-current {
@@ -41305,179 +42248,1122 @@ video {
   }
 
   .sm\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .sm\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .sm\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .sm\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .sm\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .sm\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .sm\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .sm\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .sm\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .sm\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .sm\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .sm\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .sm\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .sm\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .sm\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .sm\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .sm\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .sm\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .sm\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .sm\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .sm\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .sm\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .sm\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .sm\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .sm\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .sm\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .sm\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .sm\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .sm\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .sm\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .sm\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .sm\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .sm\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .sm\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .sm\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .sm\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .sm\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .sm\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .sm\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .sm\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .sm\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .sm\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .sm\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .sm\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .sm\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .sm\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .sm\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .sm\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .sm\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .sm\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .sm\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .sm\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .sm\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .sm\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .sm\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .sm\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .sm\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .sm\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .sm\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .sm\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .sm\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .sm\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .sm\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .sm\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .sm\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .sm\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .sm\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .sm\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .sm\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .sm\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .sm\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .sm\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .sm\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .sm\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .sm\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .sm\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .sm\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .sm\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .sm\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .sm\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .sm\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .sm\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .sm\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .sm\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .sm\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .sm\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .sm\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .sm\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .sm\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .sm\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .sm\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .sm\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .sm\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .sm\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .sm\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .sm\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .sm\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .sm\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .sm\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .sm\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .sm\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .sm\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .sm\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .sm\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .sm\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .sm\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .sm\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .sm\:fill-current {
@@ -64897,179 +66783,1122 @@ video {
   }
 
   .md\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .md\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .md\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .md\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .md\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .md\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .md\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .md\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .md\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .md\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .md\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .md\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .md\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .md\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .md\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .md\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .md\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .md\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .md\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .md\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .md\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .md\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .md\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .md\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .md\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .md\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .md\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .md\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .md\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .md\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .md\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .md\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .md\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .md\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .md\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .md\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .md\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .md\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .md\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .md\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .md\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .md\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .md\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .md\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .md\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .md\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .md\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .md\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .md\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .md\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .md\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .md\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .md\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .md\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .md\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .md\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .md\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .md\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .md\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .md\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .md\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .md\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .md\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .md\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .md\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .md\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .md\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .md\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .md\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .md\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .md\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .md\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .md\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .md\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .md\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .md\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .md\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .md\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .md\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .md\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .md\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .md\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .md\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .md\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .md\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .md\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .md\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .md\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .md\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .md\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .md\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .md\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .md\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .md\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .md\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .md\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .md\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .md\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .md\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .md\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .md\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .md\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .md\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .md\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .md\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .md\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .md\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .md\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .md\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .md\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .md\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .md\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .md\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .md\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .md\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .md\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .md\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .md\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .md\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .md\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .md\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .md\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .md\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .md\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .md\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .md\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .md\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .md\:fill-current {
@@ -88489,179 +91318,1122 @@ video {
   }
 
   .lg\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .lg\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .lg\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .lg\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .lg\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .lg\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .lg\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .lg\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .lg\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .lg\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .lg\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .lg\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .lg\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .lg\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .lg\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .lg\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .lg\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .lg\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .lg\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .lg\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .lg\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .lg\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .lg\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .lg\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .lg\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .lg\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .lg\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .lg\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .lg\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .lg\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .lg\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .lg\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .lg\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .lg\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .lg\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .lg\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .lg\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .lg\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .lg\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .lg\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .lg\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .lg\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .lg\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .lg\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .lg\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .lg\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .lg\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .lg\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .lg\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .lg\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .lg\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .lg\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .lg\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .lg\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .lg\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .lg\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .lg\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .lg\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .lg\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .lg\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .lg\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .lg\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .lg\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .lg\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .lg\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .lg\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .lg\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .lg\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .lg\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .lg\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .lg\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .lg\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .lg\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .lg\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .lg\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .lg\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .lg\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .lg\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .lg\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .lg\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .lg\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .lg\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .lg\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .lg\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .lg\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .lg\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .lg\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .lg\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .lg\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .lg\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .lg\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .lg\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .lg\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .lg\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .lg\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .lg\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .lg\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .lg\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .lg\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .lg\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .lg\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .lg\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .lg\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .lg\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .lg\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .lg\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .lg\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .lg\:fill-current {
@@ -112081,179 +115853,1122 @@ video {
   }
 
   .xl\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .xl\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .xl\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .xl\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .xl\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .xl\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .xl\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .xl\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .xl\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .xl\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .xl\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .xl\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .xl\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .xl\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .xl\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .xl\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .xl\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .xl\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .xl\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .xl\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .xl\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .xl\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .xl\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .xl\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .xl\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .xl\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .xl\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .xl\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .xl\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .xl\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .xl\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .xl\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .xl\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .xl\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .xl\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .xl\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .xl\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .xl\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .xl\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .xl\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .xl\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .xl\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .xl\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .xl\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .xl\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .xl\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .xl\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .xl\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .xl\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .xl\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .xl\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .xl\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .xl\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .xl\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .xl\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .xl\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .xl\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .xl\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .xl\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .xl\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .xl\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .xl\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .xl\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .xl\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .xl\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .xl\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .xl\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .xl\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .xl\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .xl\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .xl\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .xl\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .xl\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .xl\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .xl\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .xl\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .xl\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .xl\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .xl\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .xl\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .xl\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .xl\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .xl\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .xl\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .xl\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .xl\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .xl\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .xl\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .xl\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .xl\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .xl\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .xl\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .xl\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .xl\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .xl\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .xl\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .xl\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .xl\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .xl\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .xl\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .xl\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .xl\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .xl\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .xl\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .xl\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .xl\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .xl\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .xl\:fill-current {
@@ -135673,179 +140388,1122 @@ video {
   }
 
   .\32xl\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .\32xl\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .\32xl\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .\32xl\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .\32xl\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .\32xl\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .\32xl\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .\32xl\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .\32xl\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .\32xl\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .\32xl\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .\32xl\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .\32xl\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .\32xl\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .\32xl\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .\32xl\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .\32xl\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .\32xl\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .\32xl\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .\32xl\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .\32xl\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .\32xl\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .\32xl\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .\32xl\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .\32xl\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .\32xl\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .\32xl\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .\32xl\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .\32xl\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .\32xl\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .\32xl\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .\32xl\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .\32xl\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .\32xl\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .\32xl\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .\32xl\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .\32xl\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .\32xl\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .\32xl\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .\32xl\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .\32xl\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .\32xl\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .\32xl\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .\32xl\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .\32xl\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .\32xl\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .\32xl\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .\32xl\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .\32xl\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .\32xl\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .\32xl\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .\32xl\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .\32xl\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .\32xl\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .\32xl\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .\32xl\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .\32xl\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .\32xl\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .\32xl\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .\32xl\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .\32xl\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .\32xl\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .\32xl\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .\32xl\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .\32xl\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .\32xl\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .\32xl\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .\32xl\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .\32xl\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .\32xl\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .\32xl\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .\32xl\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .\32xl\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .\32xl\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .\32xl\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .\32xl\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .\32xl\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .\32xl\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .\32xl\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .\32xl\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .\32xl\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .\32xl\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .\32xl\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .\32xl\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .\32xl\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .\32xl\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .\32xl\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .\32xl\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .\32xl\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .\32xl\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .\32xl\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .\32xl\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .\32xl\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .\32xl\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .\32xl\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .\32xl\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .\32xl\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .\32xl\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .\32xl\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .\32xl\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .\32xl\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .\32xl\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .\32xl\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .\32xl\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .\32xl\:fill-current {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 6876077bffc2..73826b799a6c 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -19425,179 +19425,1122 @@ video {
 }
 
 .shadow-xs {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-sm {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-2xl {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-inner {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-outline {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-solid {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .shadow-none {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-xs:focus-within {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-sm:focus-within {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow:focus-within {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-md:focus-within {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-lg:focus-within {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-xl:focus-within {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-2xl:focus-within {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-inner:focus-within {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-outline:focus-within {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-solid:focus-within {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .focus-within\:shadow-none:focus-within {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-xs:hover {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-sm:hover {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow:hover {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-md:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-lg:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-xl:hover {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-2xl:hover {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-inner:hover {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-outline:hover {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-solid:hover {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .hover\:shadow-none:hover {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-xs:focus {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-sm:focus {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow:focus {
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-md:focus {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-lg:focus {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-xl:focus {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-2xl:focus {
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-inner:focus {
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-outline:focus {
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-solid:focus {
-  box-shadow: 0 0 0 2px currentColor;
+  --box-shadow: 0 0 0 2px currentColor;
+  box-shadow: var(--box-shadow);
 }
 
 .focus\:shadow-none:focus {
-  box-shadow: none;
+  --box-shadow: none;
+  box-shadow: var(--box-shadow);
+}
+
+.ring-0 {
+  --ring-width: 0;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-1 {
+  --ring-width: 1px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-2 {
+  --ring-width: 2px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-4 {
+  --ring-width: 4px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-8 {
+  --ring-width: 8px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring {
+  --ring-width: 3px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-0:focus {
+  --ring-width: 0;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-1:focus {
+  --ring-width: 1px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-2:focus {
+  --ring-width: 2px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-4:focus {
+  --ring-width: 4px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring-8:focus {
+  --ring-width: 8px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.focus\:ring:focus {
+  --ring-width: 3px;
+  --ring-color-default: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+}
+
+.ring-offset-transparent {
+  --ring-offset-color: transparent;
+}
+
+.ring-offset-current {
+  --ring-offset-color: currentColor;
+}
+
+.ring-offset-black {
+  --ring-offset-color: #000;
+}
+
+.ring-offset-white {
+  --ring-offset-color: #fff;
+}
+
+.ring-offset-gray-50 {
+  --ring-offset-color: #f9fafb;
+}
+
+.ring-offset-gray-100 {
+  --ring-offset-color: #f3f4f6;
+}
+
+.ring-offset-gray-200 {
+  --ring-offset-color: #e5e7eb;
+}
+
+.ring-offset-gray-300 {
+  --ring-offset-color: #d1d5db;
+}
+
+.ring-offset-gray-400 {
+  --ring-offset-color: #9ca3af;
+}
+
+.ring-offset-gray-500 {
+  --ring-offset-color: #6b7280;
+}
+
+.ring-offset-gray-600 {
+  --ring-offset-color: #4b5563;
+}
+
+.ring-offset-gray-700 {
+  --ring-offset-color: #374151;
+}
+
+.ring-offset-gray-800 {
+  --ring-offset-color: #1f2937;
+}
+
+.ring-offset-gray-900 {
+  --ring-offset-color: #111827;
+}
+
+.ring-offset-red-50 {
+  --ring-offset-color: #fef2f2;
+}
+
+.ring-offset-red-100 {
+  --ring-offset-color: #fee2e2;
+}
+
+.ring-offset-red-200 {
+  --ring-offset-color: #fecaca;
+}
+
+.ring-offset-red-300 {
+  --ring-offset-color: #fca5a5;
+}
+
+.ring-offset-red-400 {
+  --ring-offset-color: #f87171;
+}
+
+.ring-offset-red-500 {
+  --ring-offset-color: #ef4444;
+}
+
+.ring-offset-red-600 {
+  --ring-offset-color: #dc2626;
+}
+
+.ring-offset-red-700 {
+  --ring-offset-color: #b91c1c;
+}
+
+.ring-offset-red-800 {
+  --ring-offset-color: #991b1b;
+}
+
+.ring-offset-red-900 {
+  --ring-offset-color: #7f1d1d;
+}
+
+.ring-offset-yellow-50 {
+  --ring-offset-color: #fffbeb;
+}
+
+.ring-offset-yellow-100 {
+  --ring-offset-color: #fef3c7;
+}
+
+.ring-offset-yellow-200 {
+  --ring-offset-color: #fde68a;
+}
+
+.ring-offset-yellow-300 {
+  --ring-offset-color: #fcd34d;
+}
+
+.ring-offset-yellow-400 {
+  --ring-offset-color: #fbbf24;
+}
+
+.ring-offset-yellow-500 {
+  --ring-offset-color: #f59e0b;
+}
+
+.ring-offset-yellow-600 {
+  --ring-offset-color: #d97706;
+}
+
+.ring-offset-yellow-700 {
+  --ring-offset-color: #b45309;
+}
+
+.ring-offset-yellow-800 {
+  --ring-offset-color: #92400e;
+}
+
+.ring-offset-yellow-900 {
+  --ring-offset-color: #78350f;
+}
+
+.ring-offset-green-50 {
+  --ring-offset-color: #ecfdf5;
+}
+
+.ring-offset-green-100 {
+  --ring-offset-color: #d1fae5;
+}
+
+.ring-offset-green-200 {
+  --ring-offset-color: #a7f3d0;
+}
+
+.ring-offset-green-300 {
+  --ring-offset-color: #6ee7b7;
+}
+
+.ring-offset-green-400 {
+  --ring-offset-color: #34d399;
+}
+
+.ring-offset-green-500 {
+  --ring-offset-color: #10b981;
+}
+
+.ring-offset-green-600 {
+  --ring-offset-color: #059669;
+}
+
+.ring-offset-green-700 {
+  --ring-offset-color: #047857;
+}
+
+.ring-offset-green-800 {
+  --ring-offset-color: #065f46;
+}
+
+.ring-offset-green-900 {
+  --ring-offset-color: #064e3b;
+}
+
+.ring-offset-blue-50 {
+  --ring-offset-color: #eff6ff;
+}
+
+.ring-offset-blue-100 {
+  --ring-offset-color: #dbeafe;
+}
+
+.ring-offset-blue-200 {
+  --ring-offset-color: #bfdbfe;
+}
+
+.ring-offset-blue-300 {
+  --ring-offset-color: #93c5fd;
+}
+
+.ring-offset-blue-400 {
+  --ring-offset-color: #60a5fa;
+}
+
+.ring-offset-blue-500 {
+  --ring-offset-color: #3b82f6;
+}
+
+.ring-offset-blue-600 {
+  --ring-offset-color: #2563eb;
+}
+
+.ring-offset-blue-700 {
+  --ring-offset-color: #1d4ed8;
+}
+
+.ring-offset-blue-800 {
+  --ring-offset-color: #1e40af;
+}
+
+.ring-offset-blue-900 {
+  --ring-offset-color: #1e3a8a;
+}
+
+.ring-offset-indigo-50 {
+  --ring-offset-color: #eef2ff;
+}
+
+.ring-offset-indigo-100 {
+  --ring-offset-color: #e0e7ff;
+}
+
+.ring-offset-indigo-200 {
+  --ring-offset-color: #c7d2fe;
+}
+
+.ring-offset-indigo-300 {
+  --ring-offset-color: #a5b4fc;
+}
+
+.ring-offset-indigo-400 {
+  --ring-offset-color: #818cf8;
+}
+
+.ring-offset-indigo-500 {
+  --ring-offset-color: #6366f1;
+}
+
+.ring-offset-indigo-600 {
+  --ring-offset-color: #4f46e5;
+}
+
+.ring-offset-indigo-700 {
+  --ring-offset-color: #4338ca;
+}
+
+.ring-offset-indigo-800 {
+  --ring-offset-color: #3730a3;
+}
+
+.ring-offset-indigo-900 {
+  --ring-offset-color: #312e81;
+}
+
+.ring-offset-purple-50 {
+  --ring-offset-color: #f5f3ff;
+}
+
+.ring-offset-purple-100 {
+  --ring-offset-color: #ede9fe;
+}
+
+.ring-offset-purple-200 {
+  --ring-offset-color: #ddd6fe;
+}
+
+.ring-offset-purple-300 {
+  --ring-offset-color: #c4b5fd;
+}
+
+.ring-offset-purple-400 {
+  --ring-offset-color: #a78bfa;
+}
+
+.ring-offset-purple-500 {
+  --ring-offset-color: #8b5cf6;
+}
+
+.ring-offset-purple-600 {
+  --ring-offset-color: #7c3aed;
+}
+
+.ring-offset-purple-700 {
+  --ring-offset-color: #6d28d9;
+}
+
+.ring-offset-purple-800 {
+  --ring-offset-color: #5b21b6;
+}
+
+.ring-offset-purple-900 {
+  --ring-offset-color: #4c1d95;
+}
+
+.ring-offset-pink-50 {
+  --ring-offset-color: #fdf2f8;
+}
+
+.ring-offset-pink-100 {
+  --ring-offset-color: #fce7f3;
+}
+
+.ring-offset-pink-200 {
+  --ring-offset-color: #fbcfe8;
+}
+
+.ring-offset-pink-300 {
+  --ring-offset-color: #f9a8d4;
+}
+
+.ring-offset-pink-400 {
+  --ring-offset-color: #f472b6;
+}
+
+.ring-offset-pink-500 {
+  --ring-offset-color: #ec4899;
+}
+
+.ring-offset-pink-600 {
+  --ring-offset-color: #db2777;
+}
+
+.ring-offset-pink-700 {
+  --ring-offset-color: #be185d;
+}
+
+.ring-offset-pink-800 {
+  --ring-offset-color: #9d174d;
+}
+
+.ring-offset-pink-900 {
+  --ring-offset-color: #831843;
+}
+
+.ring-offset-0 {
+  --ring-offset-width: 0;
+}
+
+.ring-offset-1 {
+  --ring-offset-width: 1px;
+}
+
+.ring-offset-2 {
+  --ring-offset-width: 2px;
+}
+
+.ring-offset-4 {
+  --ring-offset-width: 4px;
+}
+
+.ring-offset-8 {
+  --ring-offset-width: 8px;
+}
+
+.ring-transparent {
+  --ring-opacity: 0;
+  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+}
+
+.ring-current {
+  --ring-color: currentColor;
+}
+
+.ring-black {
+  --ring-opacity: 1;
+  --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+}
+
+.ring-white {
+  --ring-opacity: 1;
+  --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+}
+
+.ring-gray-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+}
+
+.ring-gray-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+}
+
+.ring-gray-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+}
+
+.ring-gray-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+}
+
+.ring-gray-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+}
+
+.ring-gray-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+}
+
+.ring-gray-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+}
+
+.ring-gray-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+}
+
+.ring-gray-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+}
+
+.ring-gray-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+}
+
+.ring-red-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+}
+
+.ring-red-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+}
+
+.ring-red-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+}
+
+.ring-red-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+}
+
+.ring-red-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+}
+
+.ring-red-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+}
+
+.ring-red-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+}
+
+.ring-red-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+}
+
+.ring-red-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+}
+
+.ring-red-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+}
+
+.ring-yellow-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+}
+
+.ring-yellow-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+}
+
+.ring-yellow-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+}
+
+.ring-yellow-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+}
+
+.ring-yellow-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+}
+
+.ring-yellow-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+}
+
+.ring-yellow-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+}
+
+.ring-yellow-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+}
+
+.ring-yellow-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+}
+
+.ring-yellow-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+}
+
+.ring-green-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+}
+
+.ring-green-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+}
+
+.ring-green-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+}
+
+.ring-green-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+}
+
+.ring-green-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+}
+
+.ring-green-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+}
+
+.ring-green-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+}
+
+.ring-green-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+}
+
+.ring-green-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+}
+
+.ring-green-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+}
+
+.ring-blue-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+}
+
+.ring-blue-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+}
+
+.ring-blue-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+}
+
+.ring-blue-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+}
+
+.ring-blue-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+}
+
+.ring-blue-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+}
+
+.ring-blue-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+}
+
+.ring-blue-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+}
+
+.ring-blue-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+}
+
+.ring-blue-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+}
+
+.ring-indigo-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+}
+
+.ring-indigo-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+}
+
+.ring-indigo-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+}
+
+.ring-indigo-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+}
+
+.ring-indigo-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+}
+
+.ring-indigo-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+}
+
+.ring-indigo-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+}
+
+.ring-indigo-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+}
+
+.ring-indigo-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+}
+
+.ring-indigo-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+}
+
+.ring-purple-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+}
+
+.ring-purple-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+}
+
+.ring-purple-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+}
+
+.ring-purple-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+}
+
+.ring-purple-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+}
+
+.ring-purple-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+}
+
+.ring-purple-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+}
+
+.ring-purple-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+}
+
+.ring-purple-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+}
+
+.ring-purple-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+}
+
+.ring-pink-50 {
+  --ring-opacity: 1;
+  --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+}
+
+.ring-pink-100 {
+  --ring-opacity: 1;
+  --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+}
+
+.ring-pink-200 {
+  --ring-opacity: 1;
+  --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+}
+
+.ring-pink-300 {
+  --ring-opacity: 1;
+  --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+}
+
+.ring-pink-400 {
+  --ring-opacity: 1;
+  --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+}
+
+.ring-pink-500 {
+  --ring-opacity: 1;
+  --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+}
+
+.ring-pink-600 {
+  --ring-opacity: 1;
+  --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+}
+
+.ring-pink-700 {
+  --ring-opacity: 1;
+  --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+}
+
+.ring-pink-800 {
+  --ring-opacity: 1;
+  --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+}
+
+.ring-pink-900 {
+  --ring-opacity: 1;
+  --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+}
+
+.ring-opacity-0 {
+  --ring-opacity: 0;
+}
+
+.ring-opacity-10 {
+  --ring-opacity: 0.1;
+}
+
+.ring-opacity-20 {
+  --ring-opacity: 0.2;
+}
+
+.ring-opacity-25 {
+  --ring-opacity: 0.25;
+}
+
+.ring-opacity-30 {
+  --ring-opacity: 0.3;
+}
+
+.ring-opacity-40 {
+  --ring-opacity: 0.4;
+}
+
+.ring-opacity-50 {
+  --ring-opacity: 0.5;
+}
+
+.ring-opacity-60 {
+  --ring-opacity: 0.6;
+}
+
+.ring-opacity-70 {
+  --ring-opacity: 0.7;
+}
+
+.ring-opacity-75 {
+  --ring-opacity: 0.75;
+}
+
+.ring-opacity-80 {
+  --ring-opacity: 0.8;
+}
+
+.ring-opacity-90 {
+  --ring-opacity: 0.9;
+}
+
+.ring-opacity-100 {
+  --ring-opacity: 1;
 }
 
 .fill-current {
@@ -45459,179 +46402,1122 @@ video {
   }
 
   .sm\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .sm\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .sm\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .sm\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .sm\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .sm\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .sm\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .sm\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .sm\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .sm\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .sm\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .sm\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .sm\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .sm\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .sm\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .sm\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .sm\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .sm\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .sm\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .sm\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .sm\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .sm\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .sm\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .sm\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .sm\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .sm\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .sm\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .sm\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .sm\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .sm\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .sm\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .sm\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .sm\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .sm\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .sm\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .sm\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .sm\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .sm\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .sm\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .sm\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .sm\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .sm\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .sm\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .sm\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .sm\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .sm\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .sm\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .sm\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .sm\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .sm\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .sm\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .sm\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .sm\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .sm\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .sm\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .sm\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .sm\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .sm\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .sm\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .sm\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .sm\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .sm\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .sm\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .sm\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .sm\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .sm\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .sm\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .sm\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .sm\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .sm\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .sm\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .sm\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .sm\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .sm\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .sm\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .sm\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .sm\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .sm\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .sm\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .sm\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .sm\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .sm\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .sm\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .sm\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .sm\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .sm\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .sm\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .sm\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .sm\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .sm\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .sm\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .sm\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .sm\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .sm\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .sm\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .sm\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .sm\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .sm\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .sm\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .sm\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .sm\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .sm\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .sm\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .sm\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .sm\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .sm\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .sm\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .sm\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .sm\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .sm\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .sm\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .sm\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .sm\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .sm\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .sm\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .sm\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .sm\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .sm\:fill-current {
@@ -71463,179 +73349,1122 @@ video {
   }
 
   .md\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .md\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .md\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .md\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .md\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .md\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .md\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .md\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .md\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .md\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .md\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .md\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .md\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .md\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .md\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .md\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .md\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .md\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .md\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .md\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .md\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .md\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .md\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .md\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .md\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .md\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .md\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .md\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .md\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .md\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .md\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .md\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .md\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .md\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .md\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .md\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .md\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .md\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .md\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .md\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .md\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .md\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .md\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .md\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .md\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .md\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .md\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .md\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .md\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .md\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .md\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .md\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .md\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .md\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .md\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .md\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .md\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .md\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .md\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .md\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .md\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .md\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .md\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .md\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .md\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .md\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .md\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .md\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .md\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .md\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .md\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .md\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .md\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .md\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .md\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .md\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .md\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .md\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .md\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .md\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .md\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .md\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .md\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .md\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .md\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .md\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .md\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .md\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .md\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .md\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .md\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .md\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .md\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .md\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .md\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .md\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .md\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .md\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .md\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .md\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .md\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .md\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .md\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .md\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .md\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .md\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .md\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .md\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .md\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .md\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .md\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .md\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .md\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .md\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .md\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .md\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .md\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .md\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .md\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .md\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .md\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .md\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .md\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .md\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .md\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .md\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .md\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .md\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .md\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .md\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .md\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .md\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .md\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .md\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .md\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .md\:fill-current {
@@ -97467,179 +100296,1122 @@ video {
   }
 
   .lg\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .lg\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .lg\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .lg\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .lg\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .lg\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .lg\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .lg\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .lg\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .lg\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .lg\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .lg\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .lg\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .lg\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .lg\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .lg\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .lg\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .lg\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .lg\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .lg\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .lg\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .lg\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .lg\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .lg\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .lg\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .lg\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .lg\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .lg\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .lg\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .lg\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .lg\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .lg\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .lg\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .lg\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .lg\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .lg\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .lg\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .lg\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .lg\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .lg\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .lg\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .lg\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .lg\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .lg\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .lg\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .lg\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .lg\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .lg\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .lg\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .lg\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .lg\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .lg\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .lg\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .lg\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .lg\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .lg\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .lg\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .lg\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .lg\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .lg\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .lg\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .lg\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .lg\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .lg\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .lg\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .lg\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .lg\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .lg\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .lg\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .lg\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .lg\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .lg\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .lg\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .lg\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .lg\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .lg\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .lg\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .lg\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .lg\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .lg\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .lg\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .lg\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .lg\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .lg\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .lg\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .lg\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .lg\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .lg\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .lg\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .lg\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .lg\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .lg\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .lg\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .lg\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .lg\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .lg\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .lg\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .lg\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .lg\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .lg\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .lg\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .lg\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .lg\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .lg\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .lg\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .lg\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .lg\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .lg\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .lg\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .lg\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .lg\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .lg\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .lg\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .lg\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .lg\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .lg\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .lg\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .lg\:fill-current {
@@ -123471,179 +127243,1122 @@ video {
   }
 
   .xl\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .xl\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .xl\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .xl\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .xl\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .xl\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .xl\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .xl\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .xl\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .xl\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .xl\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .xl\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .xl\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .xl\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .xl\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .xl\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .xl\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .xl\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .xl\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .xl\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .xl\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .xl\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .xl\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .xl\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .xl\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .xl\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .xl\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .xl\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .xl\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .xl\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .xl\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .xl\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .xl\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .xl\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .xl\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .xl\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .xl\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .xl\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .xl\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .xl\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .xl\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .xl\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .xl\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .xl\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .xl\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .xl\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .xl\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .xl\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .xl\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .xl\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .xl\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .xl\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .xl\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .xl\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .xl\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .xl\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .xl\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .xl\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .xl\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .xl\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .xl\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .xl\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .xl\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .xl\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .xl\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .xl\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .xl\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .xl\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .xl\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .xl\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .xl\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .xl\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .xl\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .xl\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .xl\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .xl\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .xl\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .xl\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .xl\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .xl\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .xl\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .xl\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .xl\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .xl\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .xl\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .xl\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .xl\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .xl\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .xl\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .xl\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .xl\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .xl\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .xl\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .xl\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .xl\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .xl\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .xl\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .xl\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .xl\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .xl\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .xl\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .xl\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .xl\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .xl\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .xl\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .xl\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .xl\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .xl\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .xl\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .xl\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .xl\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .xl\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .xl\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .xl\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .xl\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .xl\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .xl\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .xl\:fill-current {
@@ -149475,179 +154190,1122 @@ video {
   }
 
   .\32xl\:shadow-xs {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-sm {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-md {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-lg {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-xl {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-2xl {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-inner {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-outline {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-solid {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:shadow-none {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-xs:focus-within {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-sm:focus-within {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow:focus-within {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-md:focus-within {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-lg:focus-within {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-xl:focus-within {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-2xl:focus-within {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-inner:focus-within {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-outline:focus-within {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-solid:focus-within {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-none:focus-within {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-xs:hover {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-sm:hover {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow:hover {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-md:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-lg:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-xl:hover {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-2xl:hover {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-inner:hover {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-outline:hover {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-solid:hover {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-none:hover {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-xs:focus {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-sm:focus {
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow:focus {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-md:focus {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-lg:focus {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-xl:focus {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    --box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-2xl:focus {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-inner:focus {
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-outline:focus {
-    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-solid:focus {
-    box-shadow: 0 0 0 2px currentColor;
+    --box-shadow: 0 0 0 2px currentColor;
+    box-shadow: var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-none:focus {
-    box-shadow: none;
+    --box-shadow: none;
+    box-shadow: var(--box-shadow);
+  }
+
+  .\32xl\:ring-0 {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-1 {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-2 {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-4 {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-8 {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-0:focus {
+    --ring-width: 0;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-1:focus {
+    --ring-width: 1px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-2:focus {
+    --ring-width: 2px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-4:focus {
+    --ring-width: 4px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring-8:focus {
+    --ring-width: 8px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:focus\:ring:focus {
+    --ring-width: 3px;
+    --ring-color-default: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff), 0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default)), var(--box-shadow, 0 0 #0000);
+  }
+
+  .\32xl\:ring-offset-transparent {
+    --ring-offset-color: transparent;
+  }
+
+  .\32xl\:ring-offset-current {
+    --ring-offset-color: currentColor;
+  }
+
+  .\32xl\:ring-offset-black {
+    --ring-offset-color: #000;
+  }
+
+  .\32xl\:ring-offset-white {
+    --ring-offset-color: #fff;
+  }
+
+  .\32xl\:ring-offset-gray-50 {
+    --ring-offset-color: #f9fafb;
+  }
+
+  .\32xl\:ring-offset-gray-100 {
+    --ring-offset-color: #f3f4f6;
+  }
+
+  .\32xl\:ring-offset-gray-200 {
+    --ring-offset-color: #e5e7eb;
+  }
+
+  .\32xl\:ring-offset-gray-300 {
+    --ring-offset-color: #d1d5db;
+  }
+
+  .\32xl\:ring-offset-gray-400 {
+    --ring-offset-color: #9ca3af;
+  }
+
+  .\32xl\:ring-offset-gray-500 {
+    --ring-offset-color: #6b7280;
+  }
+
+  .\32xl\:ring-offset-gray-600 {
+    --ring-offset-color: #4b5563;
+  }
+
+  .\32xl\:ring-offset-gray-700 {
+    --ring-offset-color: #374151;
+  }
+
+  .\32xl\:ring-offset-gray-800 {
+    --ring-offset-color: #1f2937;
+  }
+
+  .\32xl\:ring-offset-gray-900 {
+    --ring-offset-color: #111827;
+  }
+
+  .\32xl\:ring-offset-red-50 {
+    --ring-offset-color: #fef2f2;
+  }
+
+  .\32xl\:ring-offset-red-100 {
+    --ring-offset-color: #fee2e2;
+  }
+
+  .\32xl\:ring-offset-red-200 {
+    --ring-offset-color: #fecaca;
+  }
+
+  .\32xl\:ring-offset-red-300 {
+    --ring-offset-color: #fca5a5;
+  }
+
+  .\32xl\:ring-offset-red-400 {
+    --ring-offset-color: #f87171;
+  }
+
+  .\32xl\:ring-offset-red-500 {
+    --ring-offset-color: #ef4444;
+  }
+
+  .\32xl\:ring-offset-red-600 {
+    --ring-offset-color: #dc2626;
+  }
+
+  .\32xl\:ring-offset-red-700 {
+    --ring-offset-color: #b91c1c;
+  }
+
+  .\32xl\:ring-offset-red-800 {
+    --ring-offset-color: #991b1b;
+  }
+
+  .\32xl\:ring-offset-red-900 {
+    --ring-offset-color: #7f1d1d;
+  }
+
+  .\32xl\:ring-offset-yellow-50 {
+    --ring-offset-color: #fffbeb;
+  }
+
+  .\32xl\:ring-offset-yellow-100 {
+    --ring-offset-color: #fef3c7;
+  }
+
+  .\32xl\:ring-offset-yellow-200 {
+    --ring-offset-color: #fde68a;
+  }
+
+  .\32xl\:ring-offset-yellow-300 {
+    --ring-offset-color: #fcd34d;
+  }
+
+  .\32xl\:ring-offset-yellow-400 {
+    --ring-offset-color: #fbbf24;
+  }
+
+  .\32xl\:ring-offset-yellow-500 {
+    --ring-offset-color: #f59e0b;
+  }
+
+  .\32xl\:ring-offset-yellow-600 {
+    --ring-offset-color: #d97706;
+  }
+
+  .\32xl\:ring-offset-yellow-700 {
+    --ring-offset-color: #b45309;
+  }
+
+  .\32xl\:ring-offset-yellow-800 {
+    --ring-offset-color: #92400e;
+  }
+
+  .\32xl\:ring-offset-yellow-900 {
+    --ring-offset-color: #78350f;
+  }
+
+  .\32xl\:ring-offset-green-50 {
+    --ring-offset-color: #ecfdf5;
+  }
+
+  .\32xl\:ring-offset-green-100 {
+    --ring-offset-color: #d1fae5;
+  }
+
+  .\32xl\:ring-offset-green-200 {
+    --ring-offset-color: #a7f3d0;
+  }
+
+  .\32xl\:ring-offset-green-300 {
+    --ring-offset-color: #6ee7b7;
+  }
+
+  .\32xl\:ring-offset-green-400 {
+    --ring-offset-color: #34d399;
+  }
+
+  .\32xl\:ring-offset-green-500 {
+    --ring-offset-color: #10b981;
+  }
+
+  .\32xl\:ring-offset-green-600 {
+    --ring-offset-color: #059669;
+  }
+
+  .\32xl\:ring-offset-green-700 {
+    --ring-offset-color: #047857;
+  }
+
+  .\32xl\:ring-offset-green-800 {
+    --ring-offset-color: #065f46;
+  }
+
+  .\32xl\:ring-offset-green-900 {
+    --ring-offset-color: #064e3b;
+  }
+
+  .\32xl\:ring-offset-blue-50 {
+    --ring-offset-color: #eff6ff;
+  }
+
+  .\32xl\:ring-offset-blue-100 {
+    --ring-offset-color: #dbeafe;
+  }
+
+  .\32xl\:ring-offset-blue-200 {
+    --ring-offset-color: #bfdbfe;
+  }
+
+  .\32xl\:ring-offset-blue-300 {
+    --ring-offset-color: #93c5fd;
+  }
+
+  .\32xl\:ring-offset-blue-400 {
+    --ring-offset-color: #60a5fa;
+  }
+
+  .\32xl\:ring-offset-blue-500 {
+    --ring-offset-color: #3b82f6;
+  }
+
+  .\32xl\:ring-offset-blue-600 {
+    --ring-offset-color: #2563eb;
+  }
+
+  .\32xl\:ring-offset-blue-700 {
+    --ring-offset-color: #1d4ed8;
+  }
+
+  .\32xl\:ring-offset-blue-800 {
+    --ring-offset-color: #1e40af;
+  }
+
+  .\32xl\:ring-offset-blue-900 {
+    --ring-offset-color: #1e3a8a;
+  }
+
+  .\32xl\:ring-offset-indigo-50 {
+    --ring-offset-color: #eef2ff;
+  }
+
+  .\32xl\:ring-offset-indigo-100 {
+    --ring-offset-color: #e0e7ff;
+  }
+
+  .\32xl\:ring-offset-indigo-200 {
+    --ring-offset-color: #c7d2fe;
+  }
+
+  .\32xl\:ring-offset-indigo-300 {
+    --ring-offset-color: #a5b4fc;
+  }
+
+  .\32xl\:ring-offset-indigo-400 {
+    --ring-offset-color: #818cf8;
+  }
+
+  .\32xl\:ring-offset-indigo-500 {
+    --ring-offset-color: #6366f1;
+  }
+
+  .\32xl\:ring-offset-indigo-600 {
+    --ring-offset-color: #4f46e5;
+  }
+
+  .\32xl\:ring-offset-indigo-700 {
+    --ring-offset-color: #4338ca;
+  }
+
+  .\32xl\:ring-offset-indigo-800 {
+    --ring-offset-color: #3730a3;
+  }
+
+  .\32xl\:ring-offset-indigo-900 {
+    --ring-offset-color: #312e81;
+  }
+
+  .\32xl\:ring-offset-purple-50 {
+    --ring-offset-color: #f5f3ff;
+  }
+
+  .\32xl\:ring-offset-purple-100 {
+    --ring-offset-color: #ede9fe;
+  }
+
+  .\32xl\:ring-offset-purple-200 {
+    --ring-offset-color: #ddd6fe;
+  }
+
+  .\32xl\:ring-offset-purple-300 {
+    --ring-offset-color: #c4b5fd;
+  }
+
+  .\32xl\:ring-offset-purple-400 {
+    --ring-offset-color: #a78bfa;
+  }
+
+  .\32xl\:ring-offset-purple-500 {
+    --ring-offset-color: #8b5cf6;
+  }
+
+  .\32xl\:ring-offset-purple-600 {
+    --ring-offset-color: #7c3aed;
+  }
+
+  .\32xl\:ring-offset-purple-700 {
+    --ring-offset-color: #6d28d9;
+  }
+
+  .\32xl\:ring-offset-purple-800 {
+    --ring-offset-color: #5b21b6;
+  }
+
+  .\32xl\:ring-offset-purple-900 {
+    --ring-offset-color: #4c1d95;
+  }
+
+  .\32xl\:ring-offset-pink-50 {
+    --ring-offset-color: #fdf2f8;
+  }
+
+  .\32xl\:ring-offset-pink-100 {
+    --ring-offset-color: #fce7f3;
+  }
+
+  .\32xl\:ring-offset-pink-200 {
+    --ring-offset-color: #fbcfe8;
+  }
+
+  .\32xl\:ring-offset-pink-300 {
+    --ring-offset-color: #f9a8d4;
+  }
+
+  .\32xl\:ring-offset-pink-400 {
+    --ring-offset-color: #f472b6;
+  }
+
+  .\32xl\:ring-offset-pink-500 {
+    --ring-offset-color: #ec4899;
+  }
+
+  .\32xl\:ring-offset-pink-600 {
+    --ring-offset-color: #db2777;
+  }
+
+  .\32xl\:ring-offset-pink-700 {
+    --ring-offset-color: #be185d;
+  }
+
+  .\32xl\:ring-offset-pink-800 {
+    --ring-offset-color: #9d174d;
+  }
+
+  .\32xl\:ring-offset-pink-900 {
+    --ring-offset-color: #831843;
+  }
+
+  .\32xl\:ring-offset-0 {
+    --ring-offset-width: 0;
+  }
+
+  .\32xl\:ring-offset-1 {
+    --ring-offset-width: 1px;
+  }
+
+  .\32xl\:ring-offset-2 {
+    --ring-offset-width: 2px;
+  }
+
+  .\32xl\:ring-offset-4 {
+    --ring-offset-width: 4px;
+  }
+
+  .\32xl\:ring-offset-8 {
+    --ring-offset-width: 8px;
+  }
+
+  .\32xl\:ring-transparent {
+    --ring-opacity: 0;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-current {
+    --ring-color: currentColor;
+  }
+
+  .\32xl\:ring-black {
+    --ring-opacity: 1;
+    --ring-color: rgba(0, 0, 0, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-white {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 255, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 250, 251, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(243, 244, 246, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(229, 231, 235, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 213, 219, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(156, 163, 175, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(107, 114, 128, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(75, 85, 99, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 65, 81, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(31, 41, 55, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-gray-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(17, 24, 39, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 242, 242, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 226, 226, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 202, 202, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 165, 165, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(248, 113, 113, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 68, 68, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(220, 38, 38, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(185, 28, 28, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(153, 27, 27, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-red-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(127, 29, 29, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(255, 251, 235, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(254, 243, 199, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 230, 138, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 211, 77, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 191, 36, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 158, 11, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(217, 119, 6, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(180, 83, 9, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(146, 64, 14, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-yellow-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(120, 53, 15, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 253, 245, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(209, 250, 229, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 243, 208, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(110, 231, 183, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(52, 211, 153, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(16, 185, 129, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(5, 150, 105, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(4, 120, 87, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 95, 70, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-green-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(6, 78, 59, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(239, 246, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 234, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(191, 219, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(147, 197, 253, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(96, 165, 250, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(59, 130, 246, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(37, 99, 235, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(29, 78, 216, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 64, 175, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-blue-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(30, 58, 138, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(238, 242, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(224, 231, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(199, 210, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(165, 180, 252, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(129, 140, 248, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(99, 102, 241, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(79, 70, 229, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(67, 56, 202, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(55, 48, 163, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-indigo-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(49, 46, 129, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(245, 243, 255, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(237, 233, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(221, 214, 254, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(196, 181, 253, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(167, 139, 250, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(139, 92, 246, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(124, 58, 237, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(109, 40, 217, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(91, 33, 182, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-purple-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(76, 29, 149, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-50 {
+    --ring-opacity: 1;
+    --ring-color: rgba(253, 242, 248, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-100 {
+    --ring-opacity: 1;
+    --ring-color: rgba(252, 231, 243, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-200 {
+    --ring-opacity: 1;
+    --ring-color: rgba(251, 207, 232, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-300 {
+    --ring-opacity: 1;
+    --ring-color: rgba(249, 168, 212, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-400 {
+    --ring-opacity: 1;
+    --ring-color: rgba(244, 114, 182, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-500 {
+    --ring-opacity: 1;
+    --ring-color: rgba(236, 72, 153, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-600 {
+    --ring-opacity: 1;
+    --ring-color: rgba(219, 39, 119, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-700 {
+    --ring-opacity: 1;
+    --ring-color: rgba(190, 24, 93, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-800 {
+    --ring-opacity: 1;
+    --ring-color: rgba(157, 23, 77, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-pink-900 {
+    --ring-opacity: 1;
+    --ring-color: rgba(131, 24, 67, var(--ring-opacity));
+  }
+
+  .\32xl\:ring-opacity-0 {
+    --ring-opacity: 0;
+  }
+
+  .\32xl\:ring-opacity-10 {
+    --ring-opacity: 0.1;
+  }
+
+  .\32xl\:ring-opacity-20 {
+    --ring-opacity: 0.2;
+  }
+
+  .\32xl\:ring-opacity-25 {
+    --ring-opacity: 0.25;
+  }
+
+  .\32xl\:ring-opacity-30 {
+    --ring-opacity: 0.3;
+  }
+
+  .\32xl\:ring-opacity-40 {
+    --ring-opacity: 0.4;
+  }
+
+  .\32xl\:ring-opacity-50 {
+    --ring-opacity: 0.5;
+  }
+
+  .\32xl\:ring-opacity-60 {
+    --ring-opacity: 0.6;
+  }
+
+  .\32xl\:ring-opacity-70 {
+    --ring-opacity: 0.7;
+  }
+
+  .\32xl\:ring-opacity-75 {
+    --ring-opacity: 0.75;
+  }
+
+  .\32xl\:ring-opacity-80 {
+    --ring-opacity: 0.8;
+  }
+
+  .\32xl\:ring-opacity-90 {
+    --ring-opacity: 0.9;
+  }
+
+  .\32xl\:ring-opacity-100 {
+    --ring-opacity: 1;
   }
 
   .\32xl\:fill-current {
diff --git a/scripts/build.js b/scripts/build.js
index 25438c1f78ee..47c97039c29b 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -35,11 +35,11 @@ function buildDistFile(filename, config = {}, outFilename = filename) {
 console.info('Building Tailwind!')
 
 Promise.all([
-  buildDistFile('base'),
-  buildDistFile('components'),
-  buildDistFile('utilities'),
+  // buildDistFile('base'),
+  // buildDistFile('components'),
+  // buildDistFile('utilities'),
   buildDistFile('tailwind'),
-  buildDistFile('tailwind', { future: 'all', experimental: 'all' }, 'tailwind-experimental'),
+  // buildDistFile('tailwind', { future: 'all', experimental: 'all' }, 'tailwind-experimental'),
 ]).then(() => {
   console.log('Finished Building Tailwind!')
 })
diff --git a/src/corePluginList.js b/src/corePluginList.js
index 0cd65309977b..01746a336b08 100644
--- a/src/corePluginList.js
+++ b/src/corePluginList.js
@@ -69,6 +69,11 @@ export const corePluginList = [
   'inset',
   'resize',
   'boxShadow',
+  'ringWidth',
+  'ringOffsetColor',
+  'ringOffsetWidth',
+  'ringColor',
+  'ringOpacity',
   'fill',
   'stroke',
   'strokeWidth',
diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js
index 5741749541f4..9812341cf09b 100644
--- a/src/plugins/boxShadow.js
+++ b/src/plugins/boxShadow.js
@@ -8,7 +8,8 @@ export default function () {
         return [
           nameClass('shadow', modifier),
           {
-            'box-shadow': value,
+            '--box-shadow': value,
+            'box-shadow': 'var(--box-shadow)',
           },
         ]
       })
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 0bfe5c44d989..a9b5af940945 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -85,6 +85,11 @@ export { default as pointerEvents } from './pointerEvents'
 export { default as position } from './position'
 export { default as preflight } from './preflight'
 export { default as resize } from './resize'
+export { default as ringColor } from './ringColor'
+export { default as ringOffsetColor } from './ringOffsetColor'
+export { default as ringOffsetWidth } from './ringOffsetWidth'
+export { default as ringOpacity } from './ringOpacity'
+export { default as ringWidth } from './ringWidth'
 export { default as rotate } from './rotate'
 export { default as scale } from './scale'
 export { default as skew } from './skew'
diff --git a/src/plugins/ringColor.js b/src/plugins/ringColor.js
new file mode 100644
index 000000000000..fbb8e9fd487a
--- /dev/null
+++ b/src/plugins/ringColor.js
@@ -0,0 +1,32 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
+import { toRgba } from '../util/withAlphaVariable'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    const colors = flattenColorPalette(theme('ringColor'))
+    const utilities = _.fromPairs(
+      _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
+        try {
+          const [r, g, b, a] = toRgba(value)
+          return [
+            nameClass('ring', modifier),
+            {
+              '--ring-opacity': a === undefined ? '1' : a,
+              '--ring-color': `rgba(${r}, ${g}, ${b}, var(--ring-opacity))`,
+            },
+          ]
+        } catch (_error) {
+          return [
+            nameClass('ring', modifier),
+            {
+              '--ring-color': value,
+            },
+          ]
+        }
+      })
+    )
+    addUtilities(utilities, variants('ringColor'))
+  }
+}
diff --git a/src/plugins/ringOffsetColor.js b/src/plugins/ringOffsetColor.js
new file mode 100644
index 000000000000..d9429947567f
--- /dev/null
+++ b/src/plugins/ringOffsetColor.js
@@ -0,0 +1,20 @@
+import _ from 'lodash'
+import flattenColorPalette from '../util/flattenColorPalette'
+import nameClass from '../util/nameClass'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    const colors = flattenColorPalette(theme('ringOffsetColor'))
+    const utilities = _.fromPairs(
+      _.map(colors, (value, modifier) => {
+        return [
+          nameClass('ring-offset', modifier),
+          {
+            '--ring-offset-color': value,
+          },
+        ]
+      })
+    )
+    addUtilities(utilities, variants('ringOffsetColor'))
+  }
+}
diff --git a/src/plugins/ringOffsetWidth.js b/src/plugins/ringOffsetWidth.js
new file mode 100644
index 000000000000..9d498f903f08
--- /dev/null
+++ b/src/plugins/ringOffsetWidth.js
@@ -0,0 +1,18 @@
+import _ from 'lodash'
+import nameClass from '../util/nameClass'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    const utilities = _.fromPairs(
+      _.map(theme('ringOffsetWidth'), (value, modifier) => {
+        return [
+          nameClass('ring-offset', modifier),
+          {
+            '--ring-offset-width': value,
+          },
+        ]
+      })
+    )
+    addUtilities(utilities, variants('ringOffsetWidth'))
+  }
+}
diff --git a/src/plugins/ringOpacity.js b/src/plugins/ringOpacity.js
new file mode 100644
index 000000000000..5a4791079223
--- /dev/null
+++ b/src/plugins/ringOpacity.js
@@ -0,0 +1,18 @@
+import _ from 'lodash'
+import nameClass from '../util/nameClass'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    const utilities = _.fromPairs(
+      _.map(_.omit(theme('ringOpacity'), 'DEFAULT'), (value, modifier) => {
+        return [
+          nameClass('ring-opacity', modifier),
+          {
+            '--ring-opacity': value,
+          },
+        ]
+      })
+    )
+    addUtilities(utilities, variants('ringOpacity'))
+  }
+}
diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js
new file mode 100644
index 000000000000..8a6c20887f02
--- /dev/null
+++ b/src/plugins/ringWidth.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+import nameClass from '../util/nameClass'
+import { toRgba } from '../util/withAlphaVariable'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    function safeCall(callback, defaultValue) {
+      try {
+        return callback()
+      } catch (_error) {
+        return defaultValue
+      }
+    }
+
+    const ringColorDefault = (([r, g, b]) => {
+      return `rgba(${r}, ${g}, ${b}, ${theme('ringOpacity.DEFAULT', '0.5')})`
+    })(safeCall(() => toRgba(theme('ringColor.DEFAULT')), ['147', '197', '253']))
+
+    const utilities = _.fromPairs(
+      _.map(theme('ringWidth'), (value, modifier) => {
+        return [
+          nameClass('ring', modifier),
+          {
+            '--ring-width': value,
+            '--ring-color-default': ringColorDefault,
+            'box-shadow': [
+              `0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff)`,
+              `0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default))`,
+              `var(--box-shadow, 0 0 #0000)`,
+            ].join(', '),
+          },
+        ]
+      })
+    )
+    addUtilities(utilities, variants('ringWidth'))
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 05ec587e46d4..f43c7eaac5d0 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -536,6 +536,30 @@ module.exports = {
     padding: (theme) => theme('spacing'),
     placeholderColor: (theme) => theme('colors'),
     placeholderOpacity: (theme) => theme('opacity'),
+    ringColor: (theme) => ({
+      DEFAULT: theme('colors.blue.500'),
+      ...theme('colors'),
+    }),
+    ringOffsetColor: (theme) => theme('colors'),
+    ringOffsetWidth: {
+      0: '0',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    ringOpacity: (theme) => ({
+      DEFAULT: '0.5',
+      ...theme('opacity'),
+    }),
+    ringWidth: {
+      DEFAULT: '3px',
+      0: '0',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
     rotate: {
       '-180': '-180deg',
       '-90': '-90deg',
@@ -794,6 +818,11 @@ module.exports = {
     pointerEvents: ['responsive'],
     position: ['responsive'],
     resize: ['responsive'],
+    ringColor: ['responsive'],
+    ringOffsetColor: ['responsive'],
+    ringOffsetWidth: ['responsive'],
+    ringOpacity: ['responsive'],
+    ringWidth: ['responsive', 'focus'],
     rotate: ['responsive', 'hover', 'focus'],
     scale: ['responsive', 'hover', 'focus'],
     skew: ['responsive', 'hover', 'focus'],

From f0d857895406fe00879903983ecb80117c0d2f08 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 9 Nov 2020 16:06:49 -0500
Subject: [PATCH 2/4] Remove redundant shadows, add 5% and 95% to opacity scale

---
 .../fixtures/tailwind-output-flagged.css      | 1512 +++++++++++++----
 .../fixtures/tailwind-output-important.css    | 1512 +++++++++++++----
 .../tailwind-output-no-color-opacity.css      |  648 ++++---
 __tests__/fixtures/tailwind-output.css        | 1512 +++++++++++++----
 stubs/defaultConfig.stub.js                   |    5 +-
 5 files changed, 3746 insertions(+), 1443 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index 73826b799a6c..139bb3c73e9d 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -1916,6 +1916,10 @@ video {
   --divide-opacity: 0;
 }
 
+.divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+  --divide-opacity: 0.05;
+}
+
 .divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
   --divide-opacity: 0.1;
 }
@@ -1960,6 +1964,10 @@ video {
   --divide-opacity: 0.9;
 }
 
+.divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+  --divide-opacity: 0.95;
+}
+
 .divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
   --divide-opacity: 1;
 }
@@ -7723,6 +7731,10 @@ video {
   --bg-opacity: 0;
 }
 
+.bg-opacity-5 {
+  --bg-opacity: 0.05;
+}
+
 .bg-opacity-10 {
   --bg-opacity: 0.1;
 }
@@ -7767,6 +7779,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.bg-opacity-95 {
+  --bg-opacity: 0.95;
+}
+
 .bg-opacity-100 {
   --bg-opacity: 1;
 }
@@ -7775,6 +7791,10 @@ video {
   --bg-opacity: 0;
 }
 
+.group:hover .group-hover\:bg-opacity-5 {
+  --bg-opacity: 0.05;
+}
+
 .group:hover .group-hover\:bg-opacity-10 {
   --bg-opacity: 0.1;
 }
@@ -7819,6 +7839,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.group:hover .group-hover\:bg-opacity-95 {
+  --bg-opacity: 0.95;
+}
+
 .group:hover .group-hover\:bg-opacity-100 {
   --bg-opacity: 1;
 }
@@ -7827,6 +7851,10 @@ video {
   --bg-opacity: 0;
 }
 
+.focus-within\:bg-opacity-5:focus-within {
+  --bg-opacity: 0.05;
+}
+
 .focus-within\:bg-opacity-10:focus-within {
   --bg-opacity: 0.1;
 }
@@ -7871,6 +7899,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.focus-within\:bg-opacity-95:focus-within {
+  --bg-opacity: 0.95;
+}
+
 .focus-within\:bg-opacity-100:focus-within {
   --bg-opacity: 1;
 }
@@ -7879,6 +7911,10 @@ video {
   --bg-opacity: 0;
 }
 
+.hover\:bg-opacity-5:hover {
+  --bg-opacity: 0.05;
+}
+
 .hover\:bg-opacity-10:hover {
   --bg-opacity: 0.1;
 }
@@ -7923,6 +7959,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.hover\:bg-opacity-95:hover {
+  --bg-opacity: 0.95;
+}
+
 .hover\:bg-opacity-100:hover {
   --bg-opacity: 1;
 }
@@ -7931,6 +7971,10 @@ video {
   --bg-opacity: 0;
 }
 
+.focus\:bg-opacity-5:focus {
+  --bg-opacity: 0.05;
+}
+
 .focus\:bg-opacity-10:focus {
   --bg-opacity: 0.1;
 }
@@ -7975,6 +8019,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.focus\:bg-opacity-95:focus {
+  --bg-opacity: 0.95;
+}
+
 .focus\:bg-opacity-100:focus {
   --bg-opacity: 1;
 }
@@ -10153,6 +10201,10 @@ video {
   --border-opacity: 0;
 }
 
+.border-opacity-5 {
+  --border-opacity: 0.05;
+}
+
 .border-opacity-10 {
   --border-opacity: 0.1;
 }
@@ -10197,6 +10249,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.border-opacity-95 {
+  --border-opacity: 0.95;
+}
+
 .border-opacity-100 {
   --border-opacity: 1;
 }
@@ -10205,6 +10261,10 @@ video {
   --border-opacity: 0;
 }
 
+.group:hover .group-hover\:border-opacity-5 {
+  --border-opacity: 0.05;
+}
+
 .group:hover .group-hover\:border-opacity-10 {
   --border-opacity: 0.1;
 }
@@ -10249,6 +10309,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.group:hover .group-hover\:border-opacity-95 {
+  --border-opacity: 0.95;
+}
+
 .group:hover .group-hover\:border-opacity-100 {
   --border-opacity: 1;
 }
@@ -10257,6 +10321,10 @@ video {
   --border-opacity: 0;
 }
 
+.focus-within\:border-opacity-5:focus-within {
+  --border-opacity: 0.05;
+}
+
 .focus-within\:border-opacity-10:focus-within {
   --border-opacity: 0.1;
 }
@@ -10301,6 +10369,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.focus-within\:border-opacity-95:focus-within {
+  --border-opacity: 0.95;
+}
+
 .focus-within\:border-opacity-100:focus-within {
   --border-opacity: 1;
 }
@@ -10309,6 +10381,10 @@ video {
   --border-opacity: 0;
 }
 
+.hover\:border-opacity-5:hover {
+  --border-opacity: 0.05;
+}
+
 .hover\:border-opacity-10:hover {
   --border-opacity: 0.1;
 }
@@ -10353,6 +10429,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.hover\:border-opacity-95:hover {
+  --border-opacity: 0.95;
+}
+
 .hover\:border-opacity-100:hover {
   --border-opacity: 1;
 }
@@ -10361,6 +10441,10 @@ video {
   --border-opacity: 0;
 }
 
+.focus\:border-opacity-5:focus {
+  --border-opacity: 0.05;
+}
+
 .focus\:border-opacity-10:focus {
   --border-opacity: 0.1;
 }
@@ -10405,6 +10489,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.focus\:border-opacity-95:focus {
+  --border-opacity: 0.95;
+}
+
 .focus\:border-opacity-100:focus {
   --border-opacity: 1;
 }
@@ -14248,6 +14336,10 @@ video {
   opacity: 0;
 }
 
+.opacity-5 {
+  opacity: 0.05;
+}
+
 .opacity-10 {
   opacity: 0.1;
 }
@@ -14292,6 +14384,10 @@ video {
   opacity: 0.9;
 }
 
+.opacity-95 {
+  opacity: 0.95;
+}
+
 .opacity-100 {
   opacity: 1;
 }
@@ -14300,6 +14396,10 @@ video {
   opacity: 0;
 }
 
+.group:hover .group-hover\:opacity-5 {
+  opacity: 0.05;
+}
+
 .group:hover .group-hover\:opacity-10 {
   opacity: 0.1;
 }
@@ -14344,6 +14444,10 @@ video {
   opacity: 0.9;
 }
 
+.group:hover .group-hover\:opacity-95 {
+  opacity: 0.95;
+}
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
@@ -14352,6 +14456,10 @@ video {
   opacity: 0;
 }
 
+.focus-within\:opacity-5:focus-within {
+  opacity: 0.05;
+}
+
 .focus-within\:opacity-10:focus-within {
   opacity: 0.1;
 }
@@ -14396,6 +14504,10 @@ video {
   opacity: 0.9;
 }
 
+.focus-within\:opacity-95:focus-within {
+  opacity: 0.95;
+}
+
 .focus-within\:opacity-100:focus-within {
   opacity: 1;
 }
@@ -14404,6 +14516,10 @@ video {
   opacity: 0;
 }
 
+.hover\:opacity-5:hover {
+  opacity: 0.05;
+}
+
 .hover\:opacity-10:hover {
   opacity: 0.1;
 }
@@ -14448,6 +14564,10 @@ video {
   opacity: 0.9;
 }
 
+.hover\:opacity-95:hover {
+  opacity: 0.95;
+}
+
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -14456,6 +14576,10 @@ video {
   opacity: 0;
 }
 
+.focus\:opacity-5:focus {
+  opacity: 0.05;
+}
+
 .focus\:opacity-10:focus {
   opacity: 0.1;
 }
@@ -14500,6 +14624,10 @@ video {
   opacity: 0.9;
 }
 
+.focus\:opacity-95:focus {
+  opacity: 0.95;
+}
+
 .focus\:opacity-100:focus {
   opacity: 1;
 }
@@ -16508,6 +16636,10 @@ video {
   --placeholder-opacity: 0;
 }
 
+.placeholder-opacity-5::placeholder {
+  --placeholder-opacity: 0.05;
+}
+
 .placeholder-opacity-10::placeholder {
   --placeholder-opacity: 0.1;
 }
@@ -16552,6 +16684,10 @@ video {
   --placeholder-opacity: 0.9;
 }
 
+.placeholder-opacity-95::placeholder {
+  --placeholder-opacity: 0.95;
+}
+
 .placeholder-opacity-100::placeholder {
   --placeholder-opacity: 1;
 }
@@ -16560,6 +16696,10 @@ video {
   --placeholder-opacity: 0;
 }
 
+.focus\:placeholder-opacity-5:focus::placeholder {
+  --placeholder-opacity: 0.05;
+}
+
 .focus\:placeholder-opacity-10:focus::placeholder {
   --placeholder-opacity: 0.1;
 }
@@ -16604,6 +16744,10 @@ video {
   --placeholder-opacity: 0.9;
 }
 
+.focus\:placeholder-opacity-95:focus::placeholder {
+  --placeholder-opacity: 0.95;
+}
+
 .focus\:placeholder-opacity-100:focus::placeholder {
   --placeholder-opacity: 1;
 }
@@ -19424,11 +19568,6 @@ video {
   resize: both;
 }
 
-.shadow-xs {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .shadow-sm {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -19464,26 +19603,11 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.shadow-outline {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.shadow-solid {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .shadow-none {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
 }
 
-.focus-within\:shadow-xs:focus-within {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .focus-within\:shadow-sm:focus-within {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -19519,26 +19643,11 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.focus-within\:shadow-outline:focus-within {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.focus-within\:shadow-solid:focus-within {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .focus-within\:shadow-none:focus-within {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
 }
 
-.hover\:shadow-xs:hover {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .hover\:shadow-sm:hover {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -19574,26 +19683,11 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.hover\:shadow-outline:hover {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.hover\:shadow-solid:hover {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .hover\:shadow-none:hover {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
 }
 
-.focus\:shadow-xs:focus {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .focus\:shadow-sm:focus {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -19629,16 +19723,6 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.focus\:shadow-outline:focus {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.focus\:shadow-solid:focus {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .focus\:shadow-none:focus {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
@@ -20495,6 +20579,10 @@ video {
   --ring-opacity: 0;
 }
 
+.ring-opacity-5 {
+  --ring-opacity: 0.05;
+}
+
 .ring-opacity-10 {
   --ring-opacity: 0.1;
 }
@@ -20539,6 +20627,10 @@ video {
   --ring-opacity: 0.9;
 }
 
+.ring-opacity-95 {
+  --ring-opacity: 0.95;
+}
+
 .ring-opacity-100 {
   --ring-opacity: 1;
 }
@@ -22681,6 +22773,10 @@ video {
   --text-opacity: 0;
 }
 
+.text-opacity-5 {
+  --text-opacity: 0.05;
+}
+
 .text-opacity-10 {
   --text-opacity: 0.1;
 }
@@ -22725,6 +22821,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.text-opacity-95 {
+  --text-opacity: 0.95;
+}
+
 .text-opacity-100 {
   --text-opacity: 1;
 }
@@ -22733,6 +22833,10 @@ video {
   --text-opacity: 0;
 }
 
+.group:hover .group-hover\:text-opacity-5 {
+  --text-opacity: 0.05;
+}
+
 .group:hover .group-hover\:text-opacity-10 {
   --text-opacity: 0.1;
 }
@@ -22777,6 +22881,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.group:hover .group-hover\:text-opacity-95 {
+  --text-opacity: 0.95;
+}
+
 .group:hover .group-hover\:text-opacity-100 {
   --text-opacity: 1;
 }
@@ -22785,6 +22893,10 @@ video {
   --text-opacity: 0;
 }
 
+.focus-within\:text-opacity-5:focus-within {
+  --text-opacity: 0.05;
+}
+
 .focus-within\:text-opacity-10:focus-within {
   --text-opacity: 0.1;
 }
@@ -22829,6 +22941,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.focus-within\:text-opacity-95:focus-within {
+  --text-opacity: 0.95;
+}
+
 .focus-within\:text-opacity-100:focus-within {
   --text-opacity: 1;
 }
@@ -22837,6 +22953,10 @@ video {
   --text-opacity: 0;
 }
 
+.hover\:text-opacity-5:hover {
+  --text-opacity: 0.05;
+}
+
 .hover\:text-opacity-10:hover {
   --text-opacity: 0.1;
 }
@@ -22881,6 +23001,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.hover\:text-opacity-95:hover {
+  --text-opacity: 0.95;
+}
+
 .hover\:text-opacity-100:hover {
   --text-opacity: 1;
 }
@@ -22889,6 +23013,10 @@ video {
   --text-opacity: 0;
 }
 
+.focus\:text-opacity-5:focus {
+  --text-opacity: 0.05;
+}
+
 .focus\:text-opacity-10:focus {
   --text-opacity: 0.1;
 }
@@ -22933,6 +23061,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.focus\:text-opacity-95:focus {
+  --text-opacity: 0.95;
+}
+
 .focus\:text-opacity-100:focus {
   --text-opacity: 1;
 }
@@ -28893,6 +29025,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .sm\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .sm\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -28937,6 +29073,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .sm\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .sm\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -34700,6 +34840,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .sm\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .sm\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -34744,6 +34888,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .sm\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .sm\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -34752,6 +34900,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .sm\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .sm\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -34796,6 +34948,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .sm\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .sm\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -34804,6 +34960,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .sm\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .sm\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -34848,6 +35008,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .sm\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .sm\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -34856,6 +35020,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .sm\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .sm\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -34900,6 +35068,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .sm\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .sm\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -34908,6 +35080,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .sm\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .sm\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -34952,6 +35128,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .sm\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .sm\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -37130,6 +37310,10 @@ video {
     --border-opacity: 0;
   }
 
+  .sm\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .sm\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -37174,6 +37358,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .sm\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .sm\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -37182,6 +37370,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .sm\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .sm\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -37226,6 +37418,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .sm\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .sm\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -37234,6 +37430,10 @@ video {
     --border-opacity: 0;
   }
 
+  .sm\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .sm\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -37278,6 +37478,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .sm\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .sm\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -37286,6 +37490,10 @@ video {
     --border-opacity: 0;
   }
 
+  .sm\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .sm\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -37330,6 +37538,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .sm\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .sm\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -37338,6 +37550,10 @@ video {
     --border-opacity: 0;
   }
 
+  .sm\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .sm\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -37382,6 +37598,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .sm\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .sm\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -41225,6 +41445,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .sm\:opacity-10 {
     opacity: 0.1;
   }
@@ -41269,6 +41493,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .sm\:opacity-100 {
     opacity: 1;
   }
@@ -41277,6 +41505,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .sm\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .sm\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -41321,6 +41553,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .sm\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .sm\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -41329,6 +41565,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .sm\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -41373,6 +41613,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .sm\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -41381,6 +41625,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .sm\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -41425,6 +41673,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .sm\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -41433,6 +41685,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .sm\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -41477,6 +41733,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .sm\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -43485,6 +43745,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .sm\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .sm\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -43529,6 +43793,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .sm\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .sm\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -43537,6 +43805,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .sm\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .sm\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -43581,6 +43853,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .sm\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .sm\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -46401,11 +46677,6 @@ video {
     resize: both;
   }
 
-  .sm\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -46441,26 +46712,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -46496,26 +46752,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -46551,26 +46792,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -46606,16 +46832,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -47472,6 +47688,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .sm\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .sm\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -47516,6 +47736,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .sm\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .sm\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -49658,6 +49882,10 @@ video {
     --text-opacity: 0;
   }
 
+  .sm\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .sm\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -49702,6 +49930,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .sm\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .sm\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -49710,6 +49942,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .sm\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .sm\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -49754,6 +49990,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .sm\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .sm\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -49762,6 +50002,10 @@ video {
     --text-opacity: 0;
   }
 
+  .sm\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .sm\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -49806,6 +50050,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .sm\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .sm\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -49814,6 +50062,10 @@ video {
     --text-opacity: 0;
   }
 
+  .sm\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .sm\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -49858,6 +50110,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .sm\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .sm\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -49866,6 +50122,10 @@ video {
     --text-opacity: 0;
   }
 
+  .sm\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .sm\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -49910,6 +50170,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .sm\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .sm\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
@@ -55840,6 +56104,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .md\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .md\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -55884,6 +56152,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .md\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .md\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -61647,6 +61919,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .md\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .md\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -61691,6 +61967,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .md\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .md\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -61699,6 +61979,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .md\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .md\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -61743,6 +62027,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .md\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .md\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -61751,6 +62039,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .md\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .md\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -61795,6 +62087,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .md\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .md\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -61803,6 +62099,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .md\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .md\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -61847,6 +62147,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .md\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .md\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -61855,6 +62159,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .md\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .md\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -61899,6 +62207,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .md\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .md\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -64077,6 +64389,10 @@ video {
     --border-opacity: 0;
   }
 
+  .md\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .md\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -64121,6 +64437,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .md\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .md\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -64129,6 +64449,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .md\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .md\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -64173,6 +64497,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .md\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .md\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -64181,6 +64509,10 @@ video {
     --border-opacity: 0;
   }
 
+  .md\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .md\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -64225,6 +64557,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .md\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .md\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -64233,6 +64569,10 @@ video {
     --border-opacity: 0;
   }
 
+  .md\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .md\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -64277,6 +64617,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .md\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .md\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -64285,6 +64629,10 @@ video {
     --border-opacity: 0;
   }
 
+  .md\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .md\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -64329,6 +64677,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .md\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .md\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -68172,6 +68524,10 @@ video {
     opacity: 0;
   }
 
+  .md\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .md\:opacity-10 {
     opacity: 0.1;
   }
@@ -68216,6 +68572,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .md\:opacity-100 {
     opacity: 1;
   }
@@ -68224,6 +68584,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .md\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .md\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -68268,6 +68632,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .md\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .md\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -68276,6 +68644,10 @@ video {
     opacity: 0;
   }
 
+  .md\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .md\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -68320,6 +68692,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .md\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -68328,6 +68704,10 @@ video {
     opacity: 0;
   }
 
+  .md\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .md\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -68372,6 +68752,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .md\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -68380,6 +68764,10 @@ video {
     opacity: 0;
   }
 
+  .md\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .md\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -68424,6 +68812,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .md\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -70432,6 +70824,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .md\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .md\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -70476,6 +70872,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .md\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .md\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -70484,6 +70884,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .md\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .md\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -70528,6 +70932,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .md\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .md\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -73348,11 +73756,6 @@ video {
     resize: both;
   }
 
-  .md\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -73388,26 +73791,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -73443,26 +73831,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .md\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -73498,26 +73871,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -73553,16 +73911,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -74419,6 +74767,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .md\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .md\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -74463,6 +74815,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .md\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .md\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -76605,6 +76961,10 @@ video {
     --text-opacity: 0;
   }
 
+  .md\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .md\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -76649,6 +77009,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .md\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .md\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -76657,6 +77021,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .md\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .md\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -76701,6 +77069,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .md\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .md\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -76709,6 +77081,10 @@ video {
     --text-opacity: 0;
   }
 
+  .md\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .md\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -76753,6 +77129,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .md\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .md\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -76761,6 +77141,10 @@ video {
     --text-opacity: 0;
   }
 
+  .md\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .md\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -76805,6 +77189,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .md\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .md\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -76813,6 +77201,10 @@ video {
     --text-opacity: 0;
   }
 
+  .md\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .md\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -76857,6 +77249,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .md\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .md\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
@@ -82787,6 +83183,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .lg\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .lg\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -82831,6 +83231,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .lg\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .lg\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -88594,6 +88998,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .lg\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .lg\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -88638,6 +89046,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .lg\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .lg\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -88646,6 +89058,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .lg\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .lg\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -88690,6 +89106,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .lg\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .lg\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -88698,6 +89118,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .lg\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .lg\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -88742,6 +89166,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .lg\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .lg\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -88750,6 +89178,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .lg\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .lg\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -88794,6 +89226,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .lg\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .lg\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -88802,6 +89238,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .lg\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .lg\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -88846,6 +89286,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .lg\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .lg\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -91024,6 +91468,10 @@ video {
     --border-opacity: 0;
   }
 
+  .lg\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .lg\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -91068,6 +91516,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .lg\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .lg\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -91076,6 +91528,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .lg\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .lg\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -91120,6 +91576,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .lg\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .lg\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -91128,6 +91588,10 @@ video {
     --border-opacity: 0;
   }
 
+  .lg\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .lg\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -91172,6 +91636,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .lg\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .lg\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -91180,6 +91648,10 @@ video {
     --border-opacity: 0;
   }
 
+  .lg\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .lg\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -91224,6 +91696,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .lg\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .lg\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -91232,6 +91708,10 @@ video {
     --border-opacity: 0;
   }
 
+  .lg\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .lg\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -91276,6 +91756,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .lg\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .lg\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -95119,6 +95603,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .lg\:opacity-10 {
     opacity: 0.1;
   }
@@ -95163,6 +95651,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .lg\:opacity-100 {
     opacity: 1;
   }
@@ -95171,6 +95663,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .lg\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .lg\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -95215,6 +95711,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .lg\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .lg\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -95223,6 +95723,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .lg\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -95267,6 +95771,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .lg\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -95275,6 +95783,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .lg\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -95319,6 +95831,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .lg\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -95327,6 +95843,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .lg\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -95371,6 +95891,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .lg\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -97379,6 +97903,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .lg\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .lg\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -97423,6 +97951,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .lg\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .lg\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -97431,6 +97963,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .lg\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .lg\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -97475,6 +98011,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .lg\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .lg\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -100295,11 +100835,6 @@ video {
     resize: both;
   }
 
-  .lg\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -100335,26 +100870,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -100390,26 +100910,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -100445,26 +100950,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -100500,16 +100990,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -101366,6 +101846,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .lg\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .lg\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -101410,6 +101894,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .lg\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .lg\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -103552,6 +104040,10 @@ video {
     --text-opacity: 0;
   }
 
+  .lg\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .lg\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -103596,6 +104088,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .lg\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .lg\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -103604,6 +104100,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .lg\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .lg\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -103648,6 +104148,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .lg\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .lg\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -103656,6 +104160,10 @@ video {
     --text-opacity: 0;
   }
 
+  .lg\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .lg\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -103700,6 +104208,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .lg\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .lg\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -103708,6 +104220,10 @@ video {
     --text-opacity: 0;
   }
 
+  .lg\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .lg\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -103752,6 +104268,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .lg\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .lg\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -103760,6 +104280,10 @@ video {
     --text-opacity: 0;
   }
 
+  .lg\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .lg\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -103804,6 +104328,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .lg\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .lg\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
@@ -109734,6 +110262,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .xl\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .xl\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -109778,6 +110310,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .xl\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .xl\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -115541,6 +116077,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .xl\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .xl\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -115585,6 +116125,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .xl\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .xl\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -115593,6 +116137,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .xl\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .xl\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -115637,6 +116185,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .xl\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .xl\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -115645,6 +116197,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .xl\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .xl\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -115689,6 +116245,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .xl\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .xl\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -115697,6 +116257,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .xl\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .xl\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -115741,6 +116305,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .xl\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .xl\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -115749,6 +116317,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .xl\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .xl\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -115793,6 +116365,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .xl\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .xl\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -117971,6 +118547,10 @@ video {
     --border-opacity: 0;
   }
 
+  .xl\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .xl\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -118015,6 +118595,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .xl\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .xl\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -118023,6 +118607,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .xl\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .xl\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -118067,6 +118655,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .xl\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .xl\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -118075,6 +118667,10 @@ video {
     --border-opacity: 0;
   }
 
+  .xl\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .xl\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -118119,6 +118715,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .xl\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .xl\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -118127,6 +118727,10 @@ video {
     --border-opacity: 0;
   }
 
+  .xl\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .xl\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -118171,6 +118775,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .xl\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .xl\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -118179,6 +118787,10 @@ video {
     --border-opacity: 0;
   }
 
+  .xl\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .xl\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -118223,6 +118835,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .xl\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .xl\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -122066,6 +122682,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .xl\:opacity-10 {
     opacity: 0.1;
   }
@@ -122110,6 +122730,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .xl\:opacity-100 {
     opacity: 1;
   }
@@ -122118,6 +122742,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .xl\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .xl\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -122162,6 +122790,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .xl\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .xl\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -122170,6 +122802,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .xl\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -122214,6 +122850,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .xl\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -122222,6 +122862,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .xl\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -122266,6 +122910,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .xl\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -122274,6 +122922,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .xl\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -122318,6 +122970,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .xl\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -124326,6 +124982,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .xl\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .xl\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -124370,6 +125030,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .xl\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .xl\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -124378,6 +125042,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .xl\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .xl\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -124422,6 +125090,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .xl\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .xl\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -127242,11 +127914,6 @@ video {
     resize: both;
   }
 
-  .xl\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -127282,26 +127949,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -127337,26 +127989,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -127392,26 +128029,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -127447,16 +128069,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -128313,6 +128925,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .xl\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .xl\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -128357,6 +128973,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .xl\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .xl\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -130499,6 +131119,10 @@ video {
     --text-opacity: 0;
   }
 
+  .xl\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .xl\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -130543,6 +131167,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .xl\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .xl\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -130551,6 +131179,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .xl\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .xl\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -130595,6 +131227,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .xl\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .xl\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -130603,6 +131239,10 @@ video {
     --text-opacity: 0;
   }
 
+  .xl\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .xl\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -130647,6 +131287,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .xl\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .xl\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -130655,6 +131299,10 @@ video {
     --text-opacity: 0;
   }
 
+  .xl\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .xl\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -130699,6 +131347,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .xl\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .xl\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -130707,6 +131359,10 @@ video {
     --text-opacity: 0;
   }
 
+  .xl\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .xl\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -130751,6 +131407,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .xl\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .xl\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
@@ -136681,6 +137341,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .\32xl\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .\32xl\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -136725,6 +137389,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .\32xl\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .\32xl\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -142488,6 +143156,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .\32xl\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .\32xl\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -142532,6 +143204,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .\32xl\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .\32xl\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -142540,6 +143216,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .\32xl\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .\32xl\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -142584,6 +143264,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .\32xl\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .\32xl\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -142592,6 +143276,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .\32xl\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .\32xl\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -142636,6 +143324,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .\32xl\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .\32xl\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -142644,6 +143336,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .\32xl\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .\32xl\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -142688,6 +143384,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .\32xl\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .\32xl\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -142696,6 +143396,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .\32xl\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .\32xl\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -142740,6 +143444,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .\32xl\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .\32xl\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -144918,6 +145626,10 @@ video {
     --border-opacity: 0;
   }
 
+  .\32xl\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .\32xl\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -144962,6 +145674,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .\32xl\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .\32xl\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -144970,6 +145686,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .\32xl\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .\32xl\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -145014,6 +145734,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .\32xl\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .\32xl\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -145022,6 +145746,10 @@ video {
     --border-opacity: 0;
   }
 
+  .\32xl\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .\32xl\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -145066,6 +145794,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .\32xl\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .\32xl\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -145074,6 +145806,10 @@ video {
     --border-opacity: 0;
   }
 
+  .\32xl\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .\32xl\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -145118,6 +145854,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .\32xl\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .\32xl\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -145126,6 +145866,10 @@ video {
     --border-opacity: 0;
   }
 
+  .\32xl\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .\32xl\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -145170,6 +145914,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .\32xl\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .\32xl\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -149013,6 +149761,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .\32xl\:opacity-10 {
     opacity: 0.1;
   }
@@ -149057,6 +149809,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .\32xl\:opacity-100 {
     opacity: 1;
   }
@@ -149065,6 +149821,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .\32xl\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .\32xl\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -149109,6 +149869,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .\32xl\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .\32xl\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -149117,6 +149881,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .\32xl\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -149161,6 +149929,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .\32xl\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -149169,6 +149941,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .\32xl\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -149213,6 +149989,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .\32xl\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -149221,6 +150001,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .\32xl\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -149265,6 +150049,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .\32xl\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -151273,6 +152061,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .\32xl\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .\32xl\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -151317,6 +152109,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .\32xl\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .\32xl\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -151325,6 +152121,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .\32xl\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .\32xl\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -151369,6 +152169,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .\32xl\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .\32xl\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -154189,11 +154993,6 @@ video {
     resize: both;
   }
 
-  .\32xl\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -154229,26 +155028,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -154284,26 +155068,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -154339,26 +155108,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -154394,16 +155148,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -155260,6 +156004,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .\32xl\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .\32xl\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -155304,6 +156052,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .\32xl\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .\32xl\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -157446,6 +158198,10 @@ video {
     --text-opacity: 0;
   }
 
+  .\32xl\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .\32xl\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -157490,6 +158246,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .\32xl\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .\32xl\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -157498,6 +158258,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .\32xl\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .\32xl\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -157542,6 +158306,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .\32xl\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .\32xl\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -157550,6 +158318,10 @@ video {
     --text-opacity: 0;
   }
 
+  .\32xl\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .\32xl\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -157594,6 +158366,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .\32xl\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .\32xl\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -157602,6 +158378,10 @@ video {
     --text-opacity: 0;
   }
 
+  .\32xl\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .\32xl\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -157646,6 +158426,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .\32xl\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .\32xl\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -157654,6 +158438,10 @@ video {
     --text-opacity: 0;
   }
 
+  .\32xl\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .\32xl\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -157698,6 +158486,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .\32xl\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .\32xl\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index d0cc834079d6..2db44bcb5ecb 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -1916,6 +1916,10 @@ video {
   --divide-opacity: 0 !important;
 }
 
+.divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+  --divide-opacity: 0.05 !important;
+}
+
 .divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
   --divide-opacity: 0.1 !important;
 }
@@ -1960,6 +1964,10 @@ video {
   --divide-opacity: 0.9 !important;
 }
 
+.divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+  --divide-opacity: 0.95 !important;
+}
+
 .divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
   --divide-opacity: 1 !important;
 }
@@ -7723,6 +7731,10 @@ video {
   --bg-opacity: 0 !important;
 }
 
+.bg-opacity-5 {
+  --bg-opacity: 0.05 !important;
+}
+
 .bg-opacity-10 {
   --bg-opacity: 0.1 !important;
 }
@@ -7767,6 +7779,10 @@ video {
   --bg-opacity: 0.9 !important;
 }
 
+.bg-opacity-95 {
+  --bg-opacity: 0.95 !important;
+}
+
 .bg-opacity-100 {
   --bg-opacity: 1 !important;
 }
@@ -7775,6 +7791,10 @@ video {
   --bg-opacity: 0 !important;
 }
 
+.group:hover .group-hover\:bg-opacity-5 {
+  --bg-opacity: 0.05 !important;
+}
+
 .group:hover .group-hover\:bg-opacity-10 {
   --bg-opacity: 0.1 !important;
 }
@@ -7819,6 +7839,10 @@ video {
   --bg-opacity: 0.9 !important;
 }
 
+.group:hover .group-hover\:bg-opacity-95 {
+  --bg-opacity: 0.95 !important;
+}
+
 .group:hover .group-hover\:bg-opacity-100 {
   --bg-opacity: 1 !important;
 }
@@ -7827,6 +7851,10 @@ video {
   --bg-opacity: 0 !important;
 }
 
+.focus-within\:bg-opacity-5:focus-within {
+  --bg-opacity: 0.05 !important;
+}
+
 .focus-within\:bg-opacity-10:focus-within {
   --bg-opacity: 0.1 !important;
 }
@@ -7871,6 +7899,10 @@ video {
   --bg-opacity: 0.9 !important;
 }
 
+.focus-within\:bg-opacity-95:focus-within {
+  --bg-opacity: 0.95 !important;
+}
+
 .focus-within\:bg-opacity-100:focus-within {
   --bg-opacity: 1 !important;
 }
@@ -7879,6 +7911,10 @@ video {
   --bg-opacity: 0 !important;
 }
 
+.hover\:bg-opacity-5:hover {
+  --bg-opacity: 0.05 !important;
+}
+
 .hover\:bg-opacity-10:hover {
   --bg-opacity: 0.1 !important;
 }
@@ -7923,6 +7959,10 @@ video {
   --bg-opacity: 0.9 !important;
 }
 
+.hover\:bg-opacity-95:hover {
+  --bg-opacity: 0.95 !important;
+}
+
 .hover\:bg-opacity-100:hover {
   --bg-opacity: 1 !important;
 }
@@ -7931,6 +7971,10 @@ video {
   --bg-opacity: 0 !important;
 }
 
+.focus\:bg-opacity-5:focus {
+  --bg-opacity: 0.05 !important;
+}
+
 .focus\:bg-opacity-10:focus {
   --bg-opacity: 0.1 !important;
 }
@@ -7975,6 +8019,10 @@ video {
   --bg-opacity: 0.9 !important;
 }
 
+.focus\:bg-opacity-95:focus {
+  --bg-opacity: 0.95 !important;
+}
+
 .focus\:bg-opacity-100:focus {
   --bg-opacity: 1 !important;
 }
@@ -10153,6 +10201,10 @@ video {
   --border-opacity: 0 !important;
 }
 
+.border-opacity-5 {
+  --border-opacity: 0.05 !important;
+}
+
 .border-opacity-10 {
   --border-opacity: 0.1 !important;
 }
@@ -10197,6 +10249,10 @@ video {
   --border-opacity: 0.9 !important;
 }
 
+.border-opacity-95 {
+  --border-opacity: 0.95 !important;
+}
+
 .border-opacity-100 {
   --border-opacity: 1 !important;
 }
@@ -10205,6 +10261,10 @@ video {
   --border-opacity: 0 !important;
 }
 
+.group:hover .group-hover\:border-opacity-5 {
+  --border-opacity: 0.05 !important;
+}
+
 .group:hover .group-hover\:border-opacity-10 {
   --border-opacity: 0.1 !important;
 }
@@ -10249,6 +10309,10 @@ video {
   --border-opacity: 0.9 !important;
 }
 
+.group:hover .group-hover\:border-opacity-95 {
+  --border-opacity: 0.95 !important;
+}
+
 .group:hover .group-hover\:border-opacity-100 {
   --border-opacity: 1 !important;
 }
@@ -10257,6 +10321,10 @@ video {
   --border-opacity: 0 !important;
 }
 
+.focus-within\:border-opacity-5:focus-within {
+  --border-opacity: 0.05 !important;
+}
+
 .focus-within\:border-opacity-10:focus-within {
   --border-opacity: 0.1 !important;
 }
@@ -10301,6 +10369,10 @@ video {
   --border-opacity: 0.9 !important;
 }
 
+.focus-within\:border-opacity-95:focus-within {
+  --border-opacity: 0.95 !important;
+}
+
 .focus-within\:border-opacity-100:focus-within {
   --border-opacity: 1 !important;
 }
@@ -10309,6 +10381,10 @@ video {
   --border-opacity: 0 !important;
 }
 
+.hover\:border-opacity-5:hover {
+  --border-opacity: 0.05 !important;
+}
+
 .hover\:border-opacity-10:hover {
   --border-opacity: 0.1 !important;
 }
@@ -10353,6 +10429,10 @@ video {
   --border-opacity: 0.9 !important;
 }
 
+.hover\:border-opacity-95:hover {
+  --border-opacity: 0.95 !important;
+}
+
 .hover\:border-opacity-100:hover {
   --border-opacity: 1 !important;
 }
@@ -10361,6 +10441,10 @@ video {
   --border-opacity: 0 !important;
 }
 
+.focus\:border-opacity-5:focus {
+  --border-opacity: 0.05 !important;
+}
+
 .focus\:border-opacity-10:focus {
   --border-opacity: 0.1 !important;
 }
@@ -10405,6 +10489,10 @@ video {
   --border-opacity: 0.9 !important;
 }
 
+.focus\:border-opacity-95:focus {
+  --border-opacity: 0.95 !important;
+}
+
 .focus\:border-opacity-100:focus {
   --border-opacity: 1 !important;
 }
@@ -14248,6 +14336,10 @@ video {
   opacity: 0 !important;
 }
 
+.opacity-5 {
+  opacity: 0.05 !important;
+}
+
 .opacity-10 {
   opacity: 0.1 !important;
 }
@@ -14292,6 +14384,10 @@ video {
   opacity: 0.9 !important;
 }
 
+.opacity-95 {
+  opacity: 0.95 !important;
+}
+
 .opacity-100 {
   opacity: 1 !important;
 }
@@ -14300,6 +14396,10 @@ video {
   opacity: 0 !important;
 }
 
+.group:hover .group-hover\:opacity-5 {
+  opacity: 0.05 !important;
+}
+
 .group:hover .group-hover\:opacity-10 {
   opacity: 0.1 !important;
 }
@@ -14344,6 +14444,10 @@ video {
   opacity: 0.9 !important;
 }
 
+.group:hover .group-hover\:opacity-95 {
+  opacity: 0.95 !important;
+}
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1 !important;
 }
@@ -14352,6 +14456,10 @@ video {
   opacity: 0 !important;
 }
 
+.focus-within\:opacity-5:focus-within {
+  opacity: 0.05 !important;
+}
+
 .focus-within\:opacity-10:focus-within {
   opacity: 0.1 !important;
 }
@@ -14396,6 +14504,10 @@ video {
   opacity: 0.9 !important;
 }
 
+.focus-within\:opacity-95:focus-within {
+  opacity: 0.95 !important;
+}
+
 .focus-within\:opacity-100:focus-within {
   opacity: 1 !important;
 }
@@ -14404,6 +14516,10 @@ video {
   opacity: 0 !important;
 }
 
+.hover\:opacity-5:hover {
+  opacity: 0.05 !important;
+}
+
 .hover\:opacity-10:hover {
   opacity: 0.1 !important;
 }
@@ -14448,6 +14564,10 @@ video {
   opacity: 0.9 !important;
 }
 
+.hover\:opacity-95:hover {
+  opacity: 0.95 !important;
+}
+
 .hover\:opacity-100:hover {
   opacity: 1 !important;
 }
@@ -14456,6 +14576,10 @@ video {
   opacity: 0 !important;
 }
 
+.focus\:opacity-5:focus {
+  opacity: 0.05 !important;
+}
+
 .focus\:opacity-10:focus {
   opacity: 0.1 !important;
 }
@@ -14500,6 +14624,10 @@ video {
   opacity: 0.9 !important;
 }
 
+.focus\:opacity-95:focus {
+  opacity: 0.95 !important;
+}
+
 .focus\:opacity-100:focus {
   opacity: 1 !important;
 }
@@ -16508,6 +16636,10 @@ video {
   --placeholder-opacity: 0 !important;
 }
 
+.placeholder-opacity-5::placeholder {
+  --placeholder-opacity: 0.05 !important;
+}
+
 .placeholder-opacity-10::placeholder {
   --placeholder-opacity: 0.1 !important;
 }
@@ -16552,6 +16684,10 @@ video {
   --placeholder-opacity: 0.9 !important;
 }
 
+.placeholder-opacity-95::placeholder {
+  --placeholder-opacity: 0.95 !important;
+}
+
 .placeholder-opacity-100::placeholder {
   --placeholder-opacity: 1 !important;
 }
@@ -16560,6 +16696,10 @@ video {
   --placeholder-opacity: 0 !important;
 }
 
+.focus\:placeholder-opacity-5:focus::placeholder {
+  --placeholder-opacity: 0.05 !important;
+}
+
 .focus\:placeholder-opacity-10:focus::placeholder {
   --placeholder-opacity: 0.1 !important;
 }
@@ -16604,6 +16744,10 @@ video {
   --placeholder-opacity: 0.9 !important;
 }
 
+.focus\:placeholder-opacity-95:focus::placeholder {
+  --placeholder-opacity: 0.95 !important;
+}
+
 .focus\:placeholder-opacity-100:focus::placeholder {
   --placeholder-opacity: 1 !important;
 }
@@ -19424,11 +19568,6 @@ video {
   resize: both !important;
 }
 
-.shadow-xs {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
 .shadow-sm {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
   box-shadow: var(--box-shadow) !important;
@@ -19464,26 +19603,11 @@ video {
   box-shadow: var(--box-shadow) !important;
 }
 
-.shadow-outline {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
-.shadow-solid {
-  --box-shadow: 0 0 0 2px currentColor !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
 .shadow-none {
   --box-shadow: none !important;
   box-shadow: var(--box-shadow) !important;
 }
 
-.focus-within\:shadow-xs:focus-within {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
 .focus-within\:shadow-sm:focus-within {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
   box-shadow: var(--box-shadow) !important;
@@ -19519,26 +19643,11 @@ video {
   box-shadow: var(--box-shadow) !important;
 }
 
-.focus-within\:shadow-outline:focus-within {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
-.focus-within\:shadow-solid:focus-within {
-  --box-shadow: 0 0 0 2px currentColor !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
 .focus-within\:shadow-none:focus-within {
   --box-shadow: none !important;
   box-shadow: var(--box-shadow) !important;
 }
 
-.hover\:shadow-xs:hover {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
 .hover\:shadow-sm:hover {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
   box-shadow: var(--box-shadow) !important;
@@ -19574,26 +19683,11 @@ video {
   box-shadow: var(--box-shadow) !important;
 }
 
-.hover\:shadow-outline:hover {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
-.hover\:shadow-solid:hover {
-  --box-shadow: 0 0 0 2px currentColor !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
 .hover\:shadow-none:hover {
   --box-shadow: none !important;
   box-shadow: var(--box-shadow) !important;
 }
 
-.focus\:shadow-xs:focus {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
 .focus\:shadow-sm:focus {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
   box-shadow: var(--box-shadow) !important;
@@ -19629,16 +19723,6 @@ video {
   box-shadow: var(--box-shadow) !important;
 }
 
-.focus\:shadow-outline:focus {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
-.focus\:shadow-solid:focus {
-  --box-shadow: 0 0 0 2px currentColor !important;
-  box-shadow: var(--box-shadow) !important;
-}
-
 .focus\:shadow-none:focus {
   --box-shadow: none !important;
   box-shadow: var(--box-shadow) !important;
@@ -20495,6 +20579,10 @@ video {
   --ring-opacity: 0 !important;
 }
 
+.ring-opacity-5 {
+  --ring-opacity: 0.05 !important;
+}
+
 .ring-opacity-10 {
   --ring-opacity: 0.1 !important;
 }
@@ -20539,6 +20627,10 @@ video {
   --ring-opacity: 0.9 !important;
 }
 
+.ring-opacity-95 {
+  --ring-opacity: 0.95 !important;
+}
+
 .ring-opacity-100 {
   --ring-opacity: 1 !important;
 }
@@ -22681,6 +22773,10 @@ video {
   --text-opacity: 0 !important;
 }
 
+.text-opacity-5 {
+  --text-opacity: 0.05 !important;
+}
+
 .text-opacity-10 {
   --text-opacity: 0.1 !important;
 }
@@ -22725,6 +22821,10 @@ video {
   --text-opacity: 0.9 !important;
 }
 
+.text-opacity-95 {
+  --text-opacity: 0.95 !important;
+}
+
 .text-opacity-100 {
   --text-opacity: 1 !important;
 }
@@ -22733,6 +22833,10 @@ video {
   --text-opacity: 0 !important;
 }
 
+.group:hover .group-hover\:text-opacity-5 {
+  --text-opacity: 0.05 !important;
+}
+
 .group:hover .group-hover\:text-opacity-10 {
   --text-opacity: 0.1 !important;
 }
@@ -22777,6 +22881,10 @@ video {
   --text-opacity: 0.9 !important;
 }
 
+.group:hover .group-hover\:text-opacity-95 {
+  --text-opacity: 0.95 !important;
+}
+
 .group:hover .group-hover\:text-opacity-100 {
   --text-opacity: 1 !important;
 }
@@ -22785,6 +22893,10 @@ video {
   --text-opacity: 0 !important;
 }
 
+.focus-within\:text-opacity-5:focus-within {
+  --text-opacity: 0.05 !important;
+}
+
 .focus-within\:text-opacity-10:focus-within {
   --text-opacity: 0.1 !important;
 }
@@ -22829,6 +22941,10 @@ video {
   --text-opacity: 0.9 !important;
 }
 
+.focus-within\:text-opacity-95:focus-within {
+  --text-opacity: 0.95 !important;
+}
+
 .focus-within\:text-opacity-100:focus-within {
   --text-opacity: 1 !important;
 }
@@ -22837,6 +22953,10 @@ video {
   --text-opacity: 0 !important;
 }
 
+.hover\:text-opacity-5:hover {
+  --text-opacity: 0.05 !important;
+}
+
 .hover\:text-opacity-10:hover {
   --text-opacity: 0.1 !important;
 }
@@ -22881,6 +23001,10 @@ video {
   --text-opacity: 0.9 !important;
 }
 
+.hover\:text-opacity-95:hover {
+  --text-opacity: 0.95 !important;
+}
+
 .hover\:text-opacity-100:hover {
   --text-opacity: 1 !important;
 }
@@ -22889,6 +23013,10 @@ video {
   --text-opacity: 0 !important;
 }
 
+.focus\:text-opacity-5:focus {
+  --text-opacity: 0.05 !important;
+}
+
 .focus\:text-opacity-10:focus {
   --text-opacity: 0.1 !important;
 }
@@ -22933,6 +23061,10 @@ video {
   --text-opacity: 0.9 !important;
 }
 
+.focus\:text-opacity-95:focus {
+  --text-opacity: 0.95 !important;
+}
+
 .focus\:text-opacity-100:focus {
   --text-opacity: 1 !important;
 }
@@ -28893,6 +29025,10 @@ video {
     --divide-opacity: 0 !important;
   }
 
+  .sm\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05 !important;
+  }
+
   .sm\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1 !important;
   }
@@ -28937,6 +29073,10 @@ video {
     --divide-opacity: 0.9 !important;
   }
 
+  .sm\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95 !important;
+  }
+
   .sm\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1 !important;
   }
@@ -34700,6 +34840,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .sm\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .sm\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -34744,6 +34888,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .sm\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .sm\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -34752,6 +34900,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .group:hover .sm\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .group:hover .sm\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -34796,6 +34948,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .group:hover .sm\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .group:hover .sm\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -34804,6 +34960,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .sm\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05 !important;
+  }
+
   .sm\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1 !important;
   }
@@ -34848,6 +35008,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .sm\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95 !important;
+  }
+
   .sm\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1 !important;
   }
@@ -34856,6 +35020,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .sm\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05 !important;
+  }
+
   .sm\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1 !important;
   }
@@ -34900,6 +35068,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .sm\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95 !important;
+  }
+
   .sm\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1 !important;
   }
@@ -34908,6 +35080,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .sm\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05 !important;
+  }
+
   .sm\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1 !important;
   }
@@ -34952,6 +35128,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .sm\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95 !important;
+  }
+
   .sm\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1 !important;
   }
@@ -37130,6 +37310,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .sm\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .sm\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -37174,6 +37358,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .sm\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .sm\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -37182,6 +37370,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .group:hover .sm\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .group:hover .sm\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -37226,6 +37418,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .group:hover .sm\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .group:hover .sm\:group-hover\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -37234,6 +37430,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .sm\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05 !important;
+  }
+
   .sm\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1 !important;
   }
@@ -37278,6 +37478,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .sm\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95 !important;
+  }
+
   .sm\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1 !important;
   }
@@ -37286,6 +37490,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .sm\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05 !important;
+  }
+
   .sm\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1 !important;
   }
@@ -37330,6 +37538,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .sm\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95 !important;
+  }
+
   .sm\:hover\:border-opacity-100:hover {
     --border-opacity: 1 !important;
   }
@@ -37338,6 +37550,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .sm\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05 !important;
+  }
+
   .sm\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1 !important;
   }
@@ -37382,6 +37598,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .sm\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95 !important;
+  }
+
   .sm\:focus\:border-opacity-100:focus {
     --border-opacity: 1 !important;
   }
@@ -41225,6 +41445,10 @@ video {
     opacity: 0 !important;
   }
 
+  .sm\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .sm\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -41269,6 +41493,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .sm\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .sm\:opacity-100 {
     opacity: 1 !important;
   }
@@ -41277,6 +41505,10 @@ video {
     opacity: 0 !important;
   }
 
+  .group:hover .sm\:group-hover\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .group:hover .sm\:group-hover\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -41321,6 +41553,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .group:hover .sm\:group-hover\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .group:hover .sm\:group-hover\:opacity-100 {
     opacity: 1 !important;
   }
@@ -41329,6 +41565,10 @@ video {
     opacity: 0 !important;
   }
 
+  .sm\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05 !important;
+  }
+
   .sm\:focus-within\:opacity-10:focus-within {
     opacity: 0.1 !important;
   }
@@ -41373,6 +41613,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .sm\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95 !important;
+  }
+
   .sm\:focus-within\:opacity-100:focus-within {
     opacity: 1 !important;
   }
@@ -41381,6 +41625,10 @@ video {
     opacity: 0 !important;
   }
 
+  .sm\:hover\:opacity-5:hover {
+    opacity: 0.05 !important;
+  }
+
   .sm\:hover\:opacity-10:hover {
     opacity: 0.1 !important;
   }
@@ -41425,6 +41673,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .sm\:hover\:opacity-95:hover {
+    opacity: 0.95 !important;
+  }
+
   .sm\:hover\:opacity-100:hover {
     opacity: 1 !important;
   }
@@ -41433,6 +41685,10 @@ video {
     opacity: 0 !important;
   }
 
+  .sm\:focus\:opacity-5:focus {
+    opacity: 0.05 !important;
+  }
+
   .sm\:focus\:opacity-10:focus {
     opacity: 0.1 !important;
   }
@@ -41477,6 +41733,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .sm\:focus\:opacity-95:focus {
+    opacity: 0.95 !important;
+  }
+
   .sm\:focus\:opacity-100:focus {
     opacity: 1 !important;
   }
@@ -43485,6 +43745,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .sm\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .sm\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -43529,6 +43793,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .sm\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .sm\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -43537,6 +43805,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .sm\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .sm\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -43581,6 +43853,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .sm\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .sm\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -46401,11 +46677,6 @@ video {
     resize: both !important;
   }
 
-  .sm\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .sm\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -46441,26 +46712,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .sm\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .sm\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .sm\:shadow-none {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .sm\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .sm\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -46496,26 +46752,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .sm\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .sm\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .sm\:focus-within\:shadow-none:focus-within {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .sm\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .sm\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -46551,26 +46792,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .sm\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .sm\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .sm\:hover\:shadow-none:hover {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .sm\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .sm\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -46606,16 +46832,6 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .sm\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .sm\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .sm\:focus\:shadow-none:focus {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
@@ -47472,6 +47688,10 @@ video {
     --ring-opacity: 0 !important;
   }
 
+  .sm\:ring-opacity-5 {
+    --ring-opacity: 0.05 !important;
+  }
+
   .sm\:ring-opacity-10 {
     --ring-opacity: 0.1 !important;
   }
@@ -47516,6 +47736,10 @@ video {
     --ring-opacity: 0.9 !important;
   }
 
+  .sm\:ring-opacity-95 {
+    --ring-opacity: 0.95 !important;
+  }
+
   .sm\:ring-opacity-100 {
     --ring-opacity: 1 !important;
   }
@@ -49658,6 +49882,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .sm\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .sm\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -49702,6 +49930,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .sm\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .sm\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -49710,6 +49942,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .group:hover .sm\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .group:hover .sm\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -49754,6 +49990,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .group:hover .sm\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .group:hover .sm\:group-hover\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -49762,6 +50002,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .sm\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05 !important;
+  }
+
   .sm\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1 !important;
   }
@@ -49806,6 +50050,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .sm\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95 !important;
+  }
+
   .sm\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1 !important;
   }
@@ -49814,6 +50062,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .sm\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05 !important;
+  }
+
   .sm\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1 !important;
   }
@@ -49858,6 +50110,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .sm\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95 !important;
+  }
+
   .sm\:hover\:text-opacity-100:hover {
     --text-opacity: 1 !important;
   }
@@ -49866,6 +50122,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .sm\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05 !important;
+  }
+
   .sm\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1 !important;
   }
@@ -49910,6 +50170,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .sm\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95 !important;
+  }
+
   .sm\:focus\:text-opacity-100:focus {
     --text-opacity: 1 !important;
   }
@@ -55840,6 +56104,10 @@ video {
     --divide-opacity: 0 !important;
   }
 
+  .md\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05 !important;
+  }
+
   .md\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1 !important;
   }
@@ -55884,6 +56152,10 @@ video {
     --divide-opacity: 0.9 !important;
   }
 
+  .md\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95 !important;
+  }
+
   .md\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1 !important;
   }
@@ -61647,6 +61919,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .md\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .md\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -61691,6 +61967,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .md\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .md\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -61699,6 +61979,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .group:hover .md\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .group:hover .md\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -61743,6 +62027,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .group:hover .md\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .group:hover .md\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -61751,6 +62039,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .md\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05 !important;
+  }
+
   .md\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1 !important;
   }
@@ -61795,6 +62087,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .md\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95 !important;
+  }
+
   .md\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1 !important;
   }
@@ -61803,6 +62099,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .md\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05 !important;
+  }
+
   .md\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1 !important;
   }
@@ -61847,6 +62147,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .md\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95 !important;
+  }
+
   .md\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1 !important;
   }
@@ -61855,6 +62159,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .md\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05 !important;
+  }
+
   .md\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1 !important;
   }
@@ -61899,6 +62207,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .md\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95 !important;
+  }
+
   .md\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1 !important;
   }
@@ -64077,6 +64389,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .md\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .md\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -64121,6 +64437,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .md\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .md\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -64129,6 +64449,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .group:hover .md\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .group:hover .md\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -64173,6 +64497,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .group:hover .md\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .group:hover .md\:group-hover\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -64181,6 +64509,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .md\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05 !important;
+  }
+
   .md\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1 !important;
   }
@@ -64225,6 +64557,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .md\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95 !important;
+  }
+
   .md\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1 !important;
   }
@@ -64233,6 +64569,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .md\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05 !important;
+  }
+
   .md\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1 !important;
   }
@@ -64277,6 +64617,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .md\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95 !important;
+  }
+
   .md\:hover\:border-opacity-100:hover {
     --border-opacity: 1 !important;
   }
@@ -64285,6 +64629,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .md\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05 !important;
+  }
+
   .md\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1 !important;
   }
@@ -64329,6 +64677,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .md\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95 !important;
+  }
+
   .md\:focus\:border-opacity-100:focus {
     --border-opacity: 1 !important;
   }
@@ -68172,6 +68524,10 @@ video {
     opacity: 0 !important;
   }
 
+  .md\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .md\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -68216,6 +68572,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .md\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .md\:opacity-100 {
     opacity: 1 !important;
   }
@@ -68224,6 +68584,10 @@ video {
     opacity: 0 !important;
   }
 
+  .group:hover .md\:group-hover\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .group:hover .md\:group-hover\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -68268,6 +68632,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .group:hover .md\:group-hover\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .group:hover .md\:group-hover\:opacity-100 {
     opacity: 1 !important;
   }
@@ -68276,6 +68644,10 @@ video {
     opacity: 0 !important;
   }
 
+  .md\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05 !important;
+  }
+
   .md\:focus-within\:opacity-10:focus-within {
     opacity: 0.1 !important;
   }
@@ -68320,6 +68692,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .md\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95 !important;
+  }
+
   .md\:focus-within\:opacity-100:focus-within {
     opacity: 1 !important;
   }
@@ -68328,6 +68704,10 @@ video {
     opacity: 0 !important;
   }
 
+  .md\:hover\:opacity-5:hover {
+    opacity: 0.05 !important;
+  }
+
   .md\:hover\:opacity-10:hover {
     opacity: 0.1 !important;
   }
@@ -68372,6 +68752,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .md\:hover\:opacity-95:hover {
+    opacity: 0.95 !important;
+  }
+
   .md\:hover\:opacity-100:hover {
     opacity: 1 !important;
   }
@@ -68380,6 +68764,10 @@ video {
     opacity: 0 !important;
   }
 
+  .md\:focus\:opacity-5:focus {
+    opacity: 0.05 !important;
+  }
+
   .md\:focus\:opacity-10:focus {
     opacity: 0.1 !important;
   }
@@ -68424,6 +68812,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .md\:focus\:opacity-95:focus {
+    opacity: 0.95 !important;
+  }
+
   .md\:focus\:opacity-100:focus {
     opacity: 1 !important;
   }
@@ -70432,6 +70824,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .md\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .md\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -70476,6 +70872,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .md\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .md\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -70484,6 +70884,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .md\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .md\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -70528,6 +70932,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .md\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .md\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -73348,11 +73756,6 @@ video {
     resize: both !important;
   }
 
-  .md\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .md\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -73388,26 +73791,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .md\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .md\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .md\:shadow-none {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .md\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .md\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -73443,26 +73831,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .md\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .md\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .md\:focus-within\:shadow-none:focus-within {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .md\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .md\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -73498,26 +73871,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .md\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .md\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .md\:hover\:shadow-none:hover {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .md\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .md\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -73553,16 +73911,6 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .md\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .md\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .md\:focus\:shadow-none:focus {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
@@ -74419,6 +74767,10 @@ video {
     --ring-opacity: 0 !important;
   }
 
+  .md\:ring-opacity-5 {
+    --ring-opacity: 0.05 !important;
+  }
+
   .md\:ring-opacity-10 {
     --ring-opacity: 0.1 !important;
   }
@@ -74463,6 +74815,10 @@ video {
     --ring-opacity: 0.9 !important;
   }
 
+  .md\:ring-opacity-95 {
+    --ring-opacity: 0.95 !important;
+  }
+
   .md\:ring-opacity-100 {
     --ring-opacity: 1 !important;
   }
@@ -76605,6 +76961,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .md\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .md\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -76649,6 +77009,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .md\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .md\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -76657,6 +77021,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .group:hover .md\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .group:hover .md\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -76701,6 +77069,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .group:hover .md\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .group:hover .md\:group-hover\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -76709,6 +77081,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .md\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05 !important;
+  }
+
   .md\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1 !important;
   }
@@ -76753,6 +77129,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .md\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95 !important;
+  }
+
   .md\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1 !important;
   }
@@ -76761,6 +77141,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .md\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05 !important;
+  }
+
   .md\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1 !important;
   }
@@ -76805,6 +77189,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .md\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95 !important;
+  }
+
   .md\:hover\:text-opacity-100:hover {
     --text-opacity: 1 !important;
   }
@@ -76813,6 +77201,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .md\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05 !important;
+  }
+
   .md\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1 !important;
   }
@@ -76857,6 +77249,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .md\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95 !important;
+  }
+
   .md\:focus\:text-opacity-100:focus {
     --text-opacity: 1 !important;
   }
@@ -82787,6 +83183,10 @@ video {
     --divide-opacity: 0 !important;
   }
 
+  .lg\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05 !important;
+  }
+
   .lg\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1 !important;
   }
@@ -82831,6 +83231,10 @@ video {
     --divide-opacity: 0.9 !important;
   }
 
+  .lg\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95 !important;
+  }
+
   .lg\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1 !important;
   }
@@ -88594,6 +88998,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .lg\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .lg\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -88638,6 +89046,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .lg\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .lg\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -88646,6 +89058,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .group:hover .lg\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .group:hover .lg\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -88690,6 +89106,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .group:hover .lg\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .group:hover .lg\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -88698,6 +89118,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .lg\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05 !important;
+  }
+
   .lg\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1 !important;
   }
@@ -88742,6 +89166,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .lg\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95 !important;
+  }
+
   .lg\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1 !important;
   }
@@ -88750,6 +89178,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .lg\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05 !important;
+  }
+
   .lg\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1 !important;
   }
@@ -88794,6 +89226,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .lg\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95 !important;
+  }
+
   .lg\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1 !important;
   }
@@ -88802,6 +89238,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .lg\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05 !important;
+  }
+
   .lg\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1 !important;
   }
@@ -88846,6 +89286,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .lg\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95 !important;
+  }
+
   .lg\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1 !important;
   }
@@ -91024,6 +91468,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .lg\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .lg\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -91068,6 +91516,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .lg\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .lg\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -91076,6 +91528,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .group:hover .lg\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .group:hover .lg\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -91120,6 +91576,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .group:hover .lg\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .group:hover .lg\:group-hover\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -91128,6 +91588,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .lg\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05 !important;
+  }
+
   .lg\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1 !important;
   }
@@ -91172,6 +91636,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .lg\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95 !important;
+  }
+
   .lg\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1 !important;
   }
@@ -91180,6 +91648,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .lg\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05 !important;
+  }
+
   .lg\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1 !important;
   }
@@ -91224,6 +91696,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .lg\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95 !important;
+  }
+
   .lg\:hover\:border-opacity-100:hover {
     --border-opacity: 1 !important;
   }
@@ -91232,6 +91708,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .lg\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05 !important;
+  }
+
   .lg\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1 !important;
   }
@@ -91276,6 +91756,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .lg\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95 !important;
+  }
+
   .lg\:focus\:border-opacity-100:focus {
     --border-opacity: 1 !important;
   }
@@ -95119,6 +95603,10 @@ video {
     opacity: 0 !important;
   }
 
+  .lg\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .lg\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -95163,6 +95651,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .lg\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .lg\:opacity-100 {
     opacity: 1 !important;
   }
@@ -95171,6 +95663,10 @@ video {
     opacity: 0 !important;
   }
 
+  .group:hover .lg\:group-hover\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .group:hover .lg\:group-hover\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -95215,6 +95711,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .group:hover .lg\:group-hover\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .group:hover .lg\:group-hover\:opacity-100 {
     opacity: 1 !important;
   }
@@ -95223,6 +95723,10 @@ video {
     opacity: 0 !important;
   }
 
+  .lg\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05 !important;
+  }
+
   .lg\:focus-within\:opacity-10:focus-within {
     opacity: 0.1 !important;
   }
@@ -95267,6 +95771,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .lg\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95 !important;
+  }
+
   .lg\:focus-within\:opacity-100:focus-within {
     opacity: 1 !important;
   }
@@ -95275,6 +95783,10 @@ video {
     opacity: 0 !important;
   }
 
+  .lg\:hover\:opacity-5:hover {
+    opacity: 0.05 !important;
+  }
+
   .lg\:hover\:opacity-10:hover {
     opacity: 0.1 !important;
   }
@@ -95319,6 +95831,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .lg\:hover\:opacity-95:hover {
+    opacity: 0.95 !important;
+  }
+
   .lg\:hover\:opacity-100:hover {
     opacity: 1 !important;
   }
@@ -95327,6 +95843,10 @@ video {
     opacity: 0 !important;
   }
 
+  .lg\:focus\:opacity-5:focus {
+    opacity: 0.05 !important;
+  }
+
   .lg\:focus\:opacity-10:focus {
     opacity: 0.1 !important;
   }
@@ -95371,6 +95891,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .lg\:focus\:opacity-95:focus {
+    opacity: 0.95 !important;
+  }
+
   .lg\:focus\:opacity-100:focus {
     opacity: 1 !important;
   }
@@ -97379,6 +97903,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .lg\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .lg\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -97423,6 +97951,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .lg\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .lg\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -97431,6 +97963,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .lg\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .lg\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -97475,6 +98011,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .lg\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .lg\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -100295,11 +100835,6 @@ video {
     resize: both !important;
   }
 
-  .lg\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .lg\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -100335,26 +100870,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .lg\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .lg\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .lg\:shadow-none {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .lg\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .lg\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -100390,26 +100910,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .lg\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .lg\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .lg\:focus-within\:shadow-none:focus-within {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .lg\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .lg\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -100445,26 +100950,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .lg\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .lg\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .lg\:hover\:shadow-none:hover {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .lg\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .lg\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -100500,16 +100990,6 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .lg\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .lg\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .lg\:focus\:shadow-none:focus {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
@@ -101366,6 +101846,10 @@ video {
     --ring-opacity: 0 !important;
   }
 
+  .lg\:ring-opacity-5 {
+    --ring-opacity: 0.05 !important;
+  }
+
   .lg\:ring-opacity-10 {
     --ring-opacity: 0.1 !important;
   }
@@ -101410,6 +101894,10 @@ video {
     --ring-opacity: 0.9 !important;
   }
 
+  .lg\:ring-opacity-95 {
+    --ring-opacity: 0.95 !important;
+  }
+
   .lg\:ring-opacity-100 {
     --ring-opacity: 1 !important;
   }
@@ -103552,6 +104040,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .lg\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .lg\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -103596,6 +104088,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .lg\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .lg\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -103604,6 +104100,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .group:hover .lg\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .group:hover .lg\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -103648,6 +104148,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .group:hover .lg\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .group:hover .lg\:group-hover\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -103656,6 +104160,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .lg\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05 !important;
+  }
+
   .lg\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1 !important;
   }
@@ -103700,6 +104208,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .lg\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95 !important;
+  }
+
   .lg\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1 !important;
   }
@@ -103708,6 +104220,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .lg\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05 !important;
+  }
+
   .lg\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1 !important;
   }
@@ -103752,6 +104268,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .lg\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95 !important;
+  }
+
   .lg\:hover\:text-opacity-100:hover {
     --text-opacity: 1 !important;
   }
@@ -103760,6 +104280,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .lg\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05 !important;
+  }
+
   .lg\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1 !important;
   }
@@ -103804,6 +104328,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .lg\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95 !important;
+  }
+
   .lg\:focus\:text-opacity-100:focus {
     --text-opacity: 1 !important;
   }
@@ -109734,6 +110262,10 @@ video {
     --divide-opacity: 0 !important;
   }
 
+  .xl\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05 !important;
+  }
+
   .xl\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1 !important;
   }
@@ -109778,6 +110310,10 @@ video {
     --divide-opacity: 0.9 !important;
   }
 
+  .xl\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95 !important;
+  }
+
   .xl\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1 !important;
   }
@@ -115541,6 +116077,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .xl\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .xl\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -115585,6 +116125,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .xl\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .xl\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -115593,6 +116137,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .group:hover .xl\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .group:hover .xl\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -115637,6 +116185,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .group:hover .xl\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .group:hover .xl\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -115645,6 +116197,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .xl\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05 !important;
+  }
+
   .xl\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1 !important;
   }
@@ -115689,6 +116245,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .xl\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95 !important;
+  }
+
   .xl\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1 !important;
   }
@@ -115697,6 +116257,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .xl\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05 !important;
+  }
+
   .xl\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1 !important;
   }
@@ -115741,6 +116305,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .xl\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95 !important;
+  }
+
   .xl\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1 !important;
   }
@@ -115749,6 +116317,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .xl\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05 !important;
+  }
+
   .xl\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1 !important;
   }
@@ -115793,6 +116365,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .xl\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95 !important;
+  }
+
   .xl\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1 !important;
   }
@@ -117971,6 +118547,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .xl\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .xl\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -118015,6 +118595,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .xl\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .xl\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -118023,6 +118607,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .group:hover .xl\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .group:hover .xl\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -118067,6 +118655,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .group:hover .xl\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .group:hover .xl\:group-hover\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -118075,6 +118667,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .xl\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05 !important;
+  }
+
   .xl\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1 !important;
   }
@@ -118119,6 +118715,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .xl\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95 !important;
+  }
+
   .xl\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1 !important;
   }
@@ -118127,6 +118727,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .xl\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05 !important;
+  }
+
   .xl\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1 !important;
   }
@@ -118171,6 +118775,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .xl\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95 !important;
+  }
+
   .xl\:hover\:border-opacity-100:hover {
     --border-opacity: 1 !important;
   }
@@ -118179,6 +118787,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .xl\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05 !important;
+  }
+
   .xl\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1 !important;
   }
@@ -118223,6 +118835,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .xl\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95 !important;
+  }
+
   .xl\:focus\:border-opacity-100:focus {
     --border-opacity: 1 !important;
   }
@@ -122066,6 +122682,10 @@ video {
     opacity: 0 !important;
   }
 
+  .xl\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .xl\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -122110,6 +122730,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .xl\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .xl\:opacity-100 {
     opacity: 1 !important;
   }
@@ -122118,6 +122742,10 @@ video {
     opacity: 0 !important;
   }
 
+  .group:hover .xl\:group-hover\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .group:hover .xl\:group-hover\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -122162,6 +122790,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .group:hover .xl\:group-hover\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .group:hover .xl\:group-hover\:opacity-100 {
     opacity: 1 !important;
   }
@@ -122170,6 +122802,10 @@ video {
     opacity: 0 !important;
   }
 
+  .xl\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05 !important;
+  }
+
   .xl\:focus-within\:opacity-10:focus-within {
     opacity: 0.1 !important;
   }
@@ -122214,6 +122850,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .xl\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95 !important;
+  }
+
   .xl\:focus-within\:opacity-100:focus-within {
     opacity: 1 !important;
   }
@@ -122222,6 +122862,10 @@ video {
     opacity: 0 !important;
   }
 
+  .xl\:hover\:opacity-5:hover {
+    opacity: 0.05 !important;
+  }
+
   .xl\:hover\:opacity-10:hover {
     opacity: 0.1 !important;
   }
@@ -122266,6 +122910,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .xl\:hover\:opacity-95:hover {
+    opacity: 0.95 !important;
+  }
+
   .xl\:hover\:opacity-100:hover {
     opacity: 1 !important;
   }
@@ -122274,6 +122922,10 @@ video {
     opacity: 0 !important;
   }
 
+  .xl\:focus\:opacity-5:focus {
+    opacity: 0.05 !important;
+  }
+
   .xl\:focus\:opacity-10:focus {
     opacity: 0.1 !important;
   }
@@ -122318,6 +122970,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .xl\:focus\:opacity-95:focus {
+    opacity: 0.95 !important;
+  }
+
   .xl\:focus\:opacity-100:focus {
     opacity: 1 !important;
   }
@@ -124326,6 +124982,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .xl\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .xl\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -124370,6 +125030,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .xl\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .xl\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -124378,6 +125042,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .xl\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .xl\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -124422,6 +125090,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .xl\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .xl\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -127242,11 +127914,6 @@ video {
     resize: both !important;
   }
 
-  .xl\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -127282,26 +127949,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .xl\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .xl\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .xl\:shadow-none {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .xl\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .xl\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -127337,26 +127989,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .xl\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .xl\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .xl\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .xl\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -127392,26 +128029,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .xl\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .xl\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .xl\:hover\:shadow-none:hover {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .xl\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .xl\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -127447,16 +128069,6 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .xl\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .xl\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .xl\:focus\:shadow-none:focus {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
@@ -128313,6 +128925,10 @@ video {
     --ring-opacity: 0 !important;
   }
 
+  .xl\:ring-opacity-5 {
+    --ring-opacity: 0.05 !important;
+  }
+
   .xl\:ring-opacity-10 {
     --ring-opacity: 0.1 !important;
   }
@@ -128357,6 +128973,10 @@ video {
     --ring-opacity: 0.9 !important;
   }
 
+  .xl\:ring-opacity-95 {
+    --ring-opacity: 0.95 !important;
+  }
+
   .xl\:ring-opacity-100 {
     --ring-opacity: 1 !important;
   }
@@ -130499,6 +131119,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .xl\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .xl\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -130543,6 +131167,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .xl\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .xl\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -130551,6 +131179,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .group:hover .xl\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .group:hover .xl\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -130595,6 +131227,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .group:hover .xl\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .group:hover .xl\:group-hover\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -130603,6 +131239,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .xl\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05 !important;
+  }
+
   .xl\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1 !important;
   }
@@ -130647,6 +131287,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .xl\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95 !important;
+  }
+
   .xl\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1 !important;
   }
@@ -130655,6 +131299,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .xl\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05 !important;
+  }
+
   .xl\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1 !important;
   }
@@ -130699,6 +131347,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .xl\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95 !important;
+  }
+
   .xl\:hover\:text-opacity-100:hover {
     --text-opacity: 1 !important;
   }
@@ -130707,6 +131359,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .xl\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05 !important;
+  }
+
   .xl\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1 !important;
   }
@@ -130751,6 +131407,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .xl\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95 !important;
+  }
+
   .xl\:focus\:text-opacity-100:focus {
     --text-opacity: 1 !important;
   }
@@ -136681,6 +137341,10 @@ video {
     --divide-opacity: 0 !important;
   }
 
+  .\32xl\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05 !important;
+  }
+
   .\32xl\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1 !important;
   }
@@ -136725,6 +137389,10 @@ video {
     --divide-opacity: 0.9 !important;
   }
 
+  .\32xl\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95 !important;
+  }
+
   .\32xl\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1 !important;
   }
@@ -142488,6 +143156,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .\32xl\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .\32xl\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -142532,6 +143204,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .\32xl\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .\32xl\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -142540,6 +143216,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .group:hover .\32xl\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05 !important;
+  }
+
   .group:hover .\32xl\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1 !important;
   }
@@ -142584,6 +143264,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .group:hover .\32xl\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95 !important;
+  }
+
   .group:hover .\32xl\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1 !important;
   }
@@ -142592,6 +143276,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .\32xl\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05 !important;
+  }
+
   .\32xl\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1 !important;
   }
@@ -142636,6 +143324,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .\32xl\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95 !important;
+  }
+
   .\32xl\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1 !important;
   }
@@ -142644,6 +143336,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .\32xl\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05 !important;
+  }
+
   .\32xl\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1 !important;
   }
@@ -142688,6 +143384,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .\32xl\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95 !important;
+  }
+
   .\32xl\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1 !important;
   }
@@ -142696,6 +143396,10 @@ video {
     --bg-opacity: 0 !important;
   }
 
+  .\32xl\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05 !important;
+  }
+
   .\32xl\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1 !important;
   }
@@ -142740,6 +143444,10 @@ video {
     --bg-opacity: 0.9 !important;
   }
 
+  .\32xl\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95 !important;
+  }
+
   .\32xl\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1 !important;
   }
@@ -144918,6 +145626,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .\32xl\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .\32xl\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -144962,6 +145674,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .\32xl\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .\32xl\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -144970,6 +145686,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .group:hover .\32xl\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05 !important;
+  }
+
   .group:hover .\32xl\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1 !important;
   }
@@ -145014,6 +145734,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .group:hover .\32xl\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95 !important;
+  }
+
   .group:hover .\32xl\:group-hover\:border-opacity-100 {
     --border-opacity: 1 !important;
   }
@@ -145022,6 +145746,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .\32xl\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05 !important;
+  }
+
   .\32xl\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1 !important;
   }
@@ -145066,6 +145794,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .\32xl\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95 !important;
+  }
+
   .\32xl\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1 !important;
   }
@@ -145074,6 +145806,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .\32xl\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05 !important;
+  }
+
   .\32xl\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1 !important;
   }
@@ -145118,6 +145854,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .\32xl\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95 !important;
+  }
+
   .\32xl\:hover\:border-opacity-100:hover {
     --border-opacity: 1 !important;
   }
@@ -145126,6 +145866,10 @@ video {
     --border-opacity: 0 !important;
   }
 
+  .\32xl\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05 !important;
+  }
+
   .\32xl\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1 !important;
   }
@@ -145170,6 +145914,10 @@ video {
     --border-opacity: 0.9 !important;
   }
 
+  .\32xl\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95 !important;
+  }
+
   .\32xl\:focus\:border-opacity-100:focus {
     --border-opacity: 1 !important;
   }
@@ -149013,6 +149761,10 @@ video {
     opacity: 0 !important;
   }
 
+  .\32xl\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .\32xl\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -149057,6 +149809,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .\32xl\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .\32xl\:opacity-100 {
     opacity: 1 !important;
   }
@@ -149065,6 +149821,10 @@ video {
     opacity: 0 !important;
   }
 
+  .group:hover .\32xl\:group-hover\:opacity-5 {
+    opacity: 0.05 !important;
+  }
+
   .group:hover .\32xl\:group-hover\:opacity-10 {
     opacity: 0.1 !important;
   }
@@ -149109,6 +149869,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .group:hover .\32xl\:group-hover\:opacity-95 {
+    opacity: 0.95 !important;
+  }
+
   .group:hover .\32xl\:group-hover\:opacity-100 {
     opacity: 1 !important;
   }
@@ -149117,6 +149881,10 @@ video {
     opacity: 0 !important;
   }
 
+  .\32xl\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05 !important;
+  }
+
   .\32xl\:focus-within\:opacity-10:focus-within {
     opacity: 0.1 !important;
   }
@@ -149161,6 +149929,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .\32xl\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95 !important;
+  }
+
   .\32xl\:focus-within\:opacity-100:focus-within {
     opacity: 1 !important;
   }
@@ -149169,6 +149941,10 @@ video {
     opacity: 0 !important;
   }
 
+  .\32xl\:hover\:opacity-5:hover {
+    opacity: 0.05 !important;
+  }
+
   .\32xl\:hover\:opacity-10:hover {
     opacity: 0.1 !important;
   }
@@ -149213,6 +149989,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .\32xl\:hover\:opacity-95:hover {
+    opacity: 0.95 !important;
+  }
+
   .\32xl\:hover\:opacity-100:hover {
     opacity: 1 !important;
   }
@@ -149221,6 +150001,10 @@ video {
     opacity: 0 !important;
   }
 
+  .\32xl\:focus\:opacity-5:focus {
+    opacity: 0.05 !important;
+  }
+
   .\32xl\:focus\:opacity-10:focus {
     opacity: 0.1 !important;
   }
@@ -149265,6 +150049,10 @@ video {
     opacity: 0.9 !important;
   }
 
+  .\32xl\:focus\:opacity-95:focus {
+    opacity: 0.95 !important;
+  }
+
   .\32xl\:focus\:opacity-100:focus {
     opacity: 1 !important;
   }
@@ -151273,6 +152061,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .\32xl\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .\32xl\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -151317,6 +152109,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .\32xl\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .\32xl\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -151325,6 +152121,10 @@ video {
     --placeholder-opacity: 0 !important;
   }
 
+  .\32xl\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05 !important;
+  }
+
   .\32xl\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1 !important;
   }
@@ -151369,6 +152169,10 @@ video {
     --placeholder-opacity: 0.9 !important;
   }
 
+  .\32xl\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95 !important;
+  }
+
   .\32xl\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1 !important;
   }
@@ -154189,11 +154993,6 @@ video {
     resize: both !important;
   }
 
-  .\32xl\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .\32xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -154229,26 +155028,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .\32xl\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .\32xl\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .\32xl\:shadow-none {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .\32xl\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .\32xl\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -154284,26 +155068,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .\32xl\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .\32xl\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .\32xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .\32xl\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .\32xl\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -154339,26 +155108,11 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .\32xl\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .\32xl\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .\32xl\:hover\:shadow-none:hover {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
   }
 
-  .\32xl\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .\32xl\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
     box-shadow: var(--box-shadow) !important;
@@ -154394,16 +155148,6 @@ video {
     box-shadow: var(--box-shadow) !important;
   }
 
-  .\32xl\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5) !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
-  .\32xl\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor !important;
-    box-shadow: var(--box-shadow) !important;
-  }
-
   .\32xl\:focus\:shadow-none:focus {
     --box-shadow: none !important;
     box-shadow: var(--box-shadow) !important;
@@ -155260,6 +156004,10 @@ video {
     --ring-opacity: 0 !important;
   }
 
+  .\32xl\:ring-opacity-5 {
+    --ring-opacity: 0.05 !important;
+  }
+
   .\32xl\:ring-opacity-10 {
     --ring-opacity: 0.1 !important;
   }
@@ -155304,6 +156052,10 @@ video {
     --ring-opacity: 0.9 !important;
   }
 
+  .\32xl\:ring-opacity-95 {
+    --ring-opacity: 0.95 !important;
+  }
+
   .\32xl\:ring-opacity-100 {
     --ring-opacity: 1 !important;
   }
@@ -157446,6 +158198,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .\32xl\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .\32xl\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -157490,6 +158246,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .\32xl\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .\32xl\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -157498,6 +158258,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .group:hover .\32xl\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05 !important;
+  }
+
   .group:hover .\32xl\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1 !important;
   }
@@ -157542,6 +158306,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .group:hover .\32xl\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95 !important;
+  }
+
   .group:hover .\32xl\:group-hover\:text-opacity-100 {
     --text-opacity: 1 !important;
   }
@@ -157550,6 +158318,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .\32xl\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05 !important;
+  }
+
   .\32xl\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1 !important;
   }
@@ -157594,6 +158366,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .\32xl\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95 !important;
+  }
+
   .\32xl\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1 !important;
   }
@@ -157602,6 +158378,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .\32xl\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05 !important;
+  }
+
   .\32xl\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1 !important;
   }
@@ -157646,6 +158426,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .\32xl\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95 !important;
+  }
+
   .\32xl\:hover\:text-opacity-100:hover {
     --text-opacity: 1 !important;
   }
@@ -157654,6 +158438,10 @@ video {
     --text-opacity: 0 !important;
   }
 
+  .\32xl\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05 !important;
+  }
+
   .\32xl\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1 !important;
   }
@@ -157698,6 +158486,10 @@ video {
     --text-opacity: 0.9 !important;
   }
 
+  .\32xl\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95 !important;
+  }
+
   .\32xl\:focus\:text-opacity-100:focus {
     --text-opacity: 1 !important;
   }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index e2fb776aa124..f203ad9bb046 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -12774,6 +12774,10 @@ video {
   opacity: 0;
 }
 
+.opacity-5 {
+  opacity: 0.05;
+}
+
 .opacity-10 {
   opacity: 0.1;
 }
@@ -12818,6 +12822,10 @@ video {
   opacity: 0.9;
 }
 
+.opacity-95 {
+  opacity: 0.95;
+}
+
 .opacity-100 {
   opacity: 1;
 }
@@ -12826,6 +12834,10 @@ video {
   opacity: 0;
 }
 
+.group:hover .group-hover\:opacity-5 {
+  opacity: 0.05;
+}
+
 .group:hover .group-hover\:opacity-10 {
   opacity: 0.1;
 }
@@ -12870,6 +12882,10 @@ video {
   opacity: 0.9;
 }
 
+.group:hover .group-hover\:opacity-95 {
+  opacity: 0.95;
+}
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
@@ -12878,6 +12894,10 @@ video {
   opacity: 0;
 }
 
+.focus-within\:opacity-5:focus-within {
+  opacity: 0.05;
+}
+
 .focus-within\:opacity-10:focus-within {
   opacity: 0.1;
 }
@@ -12922,6 +12942,10 @@ video {
   opacity: 0.9;
 }
 
+.focus-within\:opacity-95:focus-within {
+  opacity: 0.95;
+}
+
 .focus-within\:opacity-100:focus-within {
   opacity: 1;
 }
@@ -12930,6 +12954,10 @@ video {
   opacity: 0;
 }
 
+.hover\:opacity-5:hover {
+  opacity: 0.05;
+}
+
 .hover\:opacity-10:hover {
   opacity: 0.1;
 }
@@ -12974,6 +13002,10 @@ video {
   opacity: 0.9;
 }
 
+.hover\:opacity-95:hover {
+  opacity: 0.95;
+}
+
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -12982,6 +13014,10 @@ video {
   opacity: 0;
 }
 
+.focus\:opacity-5:focus {
+  opacity: 0.05;
+}
+
 .focus\:opacity-10:focus {
   opacity: 0.1;
 }
@@ -13026,6 +13062,10 @@ video {
   opacity: 0.9;
 }
 
+.focus\:opacity-95:focus {
+  opacity: 0.95;
+}
+
 .focus\:opacity-100:focus {
   opacity: 1;
 }
@@ -17682,11 +17722,6 @@ video {
   resize: both;
 }
 
-.shadow-xs {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .shadow-sm {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -17722,26 +17757,11 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.shadow-outline {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.shadow-solid {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .shadow-none {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
 }
 
-.focus-within\:shadow-xs:focus-within {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .focus-within\:shadow-sm:focus-within {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -17777,26 +17797,11 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.focus-within\:shadow-outline:focus-within {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.focus-within\:shadow-solid:focus-within {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .focus-within\:shadow-none:focus-within {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
 }
 
-.hover\:shadow-xs:hover {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .hover\:shadow-sm:hover {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -17832,26 +17837,11 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.hover\:shadow-outline:hover {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.hover\:shadow-solid:hover {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .hover\:shadow-none:hover {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
 }
 
-.focus\:shadow-xs:focus {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .focus\:shadow-sm:focus {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -17887,16 +17877,6 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.focus\:shadow-outline:focus {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.focus\:shadow-solid:focus {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .focus\:shadow-none:focus {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
@@ -18753,6 +18733,10 @@ video {
   --ring-opacity: 0;
 }
 
+.ring-opacity-5 {
+  --ring-opacity: 0.05;
+}
+
 .ring-opacity-10 {
   --ring-opacity: 0.1;
 }
@@ -18797,6 +18781,10 @@ video {
   --ring-opacity: 0.9;
 }
 
+.ring-opacity-95 {
+  --ring-opacity: 0.95;
+}
+
 .ring-opacity-100 {
   --ring-opacity: 1;
 }
@@ -37339,6 +37327,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .sm\:opacity-10 {
     opacity: 0.1;
   }
@@ -37383,6 +37375,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .sm\:opacity-100 {
     opacity: 1;
   }
@@ -37391,6 +37387,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .sm\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .sm\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -37435,6 +37435,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .sm\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .sm\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -37443,6 +37447,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .sm\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -37487,6 +37495,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .sm\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -37495,6 +37507,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .sm\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -37539,6 +37555,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .sm\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -37547,6 +37567,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .sm\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -37591,6 +37615,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .sm\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -42247,11 +42275,6 @@ video {
     resize: both;
   }
 
-  .sm\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -42287,26 +42310,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -42342,26 +42350,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -42397,26 +42390,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -42452,16 +42430,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -43318,6 +43286,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .sm\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .sm\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -43362,6 +43334,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .sm\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .sm\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -61874,6 +61850,10 @@ video {
     opacity: 0;
   }
 
+  .md\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .md\:opacity-10 {
     opacity: 0.1;
   }
@@ -61918,6 +61898,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .md\:opacity-100 {
     opacity: 1;
   }
@@ -61926,6 +61910,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .md\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .md\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -61970,6 +61958,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .md\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .md\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -61978,6 +61970,10 @@ video {
     opacity: 0;
   }
 
+  .md\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .md\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -62022,6 +62018,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .md\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -62030,6 +62030,10 @@ video {
     opacity: 0;
   }
 
+  .md\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .md\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -62074,6 +62078,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .md\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -62082,6 +62090,10 @@ video {
     opacity: 0;
   }
 
+  .md\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .md\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -62126,6 +62138,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .md\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -66782,11 +66798,6 @@ video {
     resize: both;
   }
 
-  .md\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -66822,26 +66833,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -66877,26 +66873,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .md\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -66932,26 +66913,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -66987,16 +66953,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -67853,6 +67809,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .md\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .md\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -67897,6 +67857,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .md\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .md\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -86409,6 +86373,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .lg\:opacity-10 {
     opacity: 0.1;
   }
@@ -86453,6 +86421,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .lg\:opacity-100 {
     opacity: 1;
   }
@@ -86461,6 +86433,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .lg\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .lg\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -86505,6 +86481,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .lg\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .lg\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -86513,6 +86493,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .lg\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -86557,6 +86541,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .lg\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -86565,6 +86553,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .lg\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -86609,6 +86601,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .lg\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -86617,6 +86613,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .lg\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -86661,6 +86661,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .lg\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -91317,11 +91321,6 @@ video {
     resize: both;
   }
 
-  .lg\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -91357,26 +91356,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -91412,26 +91396,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -91467,26 +91436,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -91522,16 +91476,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -92388,6 +92332,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .lg\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .lg\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -92432,6 +92380,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .lg\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .lg\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -110944,6 +110896,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .xl\:opacity-10 {
     opacity: 0.1;
   }
@@ -110988,6 +110944,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .xl\:opacity-100 {
     opacity: 1;
   }
@@ -110996,6 +110956,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .xl\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .xl\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -111040,6 +111004,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .xl\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .xl\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -111048,6 +111016,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .xl\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -111092,6 +111064,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .xl\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -111100,6 +111076,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .xl\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -111144,6 +111124,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .xl\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -111152,6 +111136,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .xl\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -111196,6 +111184,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .xl\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -115852,11 +115844,6 @@ video {
     resize: both;
   }
 
-  .xl\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -115892,26 +115879,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -115947,26 +115919,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -116002,26 +115959,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -116057,16 +115999,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -116923,6 +116855,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .xl\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .xl\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -116967,6 +116903,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .xl\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .xl\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -135479,6 +135419,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .\32xl\:opacity-10 {
     opacity: 0.1;
   }
@@ -135523,6 +135467,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .\32xl\:opacity-100 {
     opacity: 1;
   }
@@ -135531,6 +135479,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .\32xl\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .\32xl\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -135575,6 +135527,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .\32xl\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .\32xl\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -135583,6 +135539,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .\32xl\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -135627,6 +135587,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .\32xl\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -135635,6 +135599,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .\32xl\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -135679,6 +135647,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .\32xl\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -135687,6 +135659,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .\32xl\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -135731,6 +135707,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .\32xl\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -140387,11 +140367,6 @@ video {
     resize: both;
   }
 
-  .\32xl\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -140427,26 +140402,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -140482,26 +140442,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -140537,26 +140482,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -140592,16 +140522,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -141458,6 +141378,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .\32xl\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .\32xl\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -141502,6 +141426,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .\32xl\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .\32xl\:ring-opacity-100 {
     --ring-opacity: 1;
   }
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 73826b799a6c..139bb3c73e9d 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -1916,6 +1916,10 @@ video {
   --divide-opacity: 0;
 }
 
+.divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+  --divide-opacity: 0.05;
+}
+
 .divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
   --divide-opacity: 0.1;
 }
@@ -1960,6 +1964,10 @@ video {
   --divide-opacity: 0.9;
 }
 
+.divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+  --divide-opacity: 0.95;
+}
+
 .divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
   --divide-opacity: 1;
 }
@@ -7723,6 +7731,10 @@ video {
   --bg-opacity: 0;
 }
 
+.bg-opacity-5 {
+  --bg-opacity: 0.05;
+}
+
 .bg-opacity-10 {
   --bg-opacity: 0.1;
 }
@@ -7767,6 +7779,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.bg-opacity-95 {
+  --bg-opacity: 0.95;
+}
+
 .bg-opacity-100 {
   --bg-opacity: 1;
 }
@@ -7775,6 +7791,10 @@ video {
   --bg-opacity: 0;
 }
 
+.group:hover .group-hover\:bg-opacity-5 {
+  --bg-opacity: 0.05;
+}
+
 .group:hover .group-hover\:bg-opacity-10 {
   --bg-opacity: 0.1;
 }
@@ -7819,6 +7839,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.group:hover .group-hover\:bg-opacity-95 {
+  --bg-opacity: 0.95;
+}
+
 .group:hover .group-hover\:bg-opacity-100 {
   --bg-opacity: 1;
 }
@@ -7827,6 +7851,10 @@ video {
   --bg-opacity: 0;
 }
 
+.focus-within\:bg-opacity-5:focus-within {
+  --bg-opacity: 0.05;
+}
+
 .focus-within\:bg-opacity-10:focus-within {
   --bg-opacity: 0.1;
 }
@@ -7871,6 +7899,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.focus-within\:bg-opacity-95:focus-within {
+  --bg-opacity: 0.95;
+}
+
 .focus-within\:bg-opacity-100:focus-within {
   --bg-opacity: 1;
 }
@@ -7879,6 +7911,10 @@ video {
   --bg-opacity: 0;
 }
 
+.hover\:bg-opacity-5:hover {
+  --bg-opacity: 0.05;
+}
+
 .hover\:bg-opacity-10:hover {
   --bg-opacity: 0.1;
 }
@@ -7923,6 +7959,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.hover\:bg-opacity-95:hover {
+  --bg-opacity: 0.95;
+}
+
 .hover\:bg-opacity-100:hover {
   --bg-opacity: 1;
 }
@@ -7931,6 +7971,10 @@ video {
   --bg-opacity: 0;
 }
 
+.focus\:bg-opacity-5:focus {
+  --bg-opacity: 0.05;
+}
+
 .focus\:bg-opacity-10:focus {
   --bg-opacity: 0.1;
 }
@@ -7975,6 +8019,10 @@ video {
   --bg-opacity: 0.9;
 }
 
+.focus\:bg-opacity-95:focus {
+  --bg-opacity: 0.95;
+}
+
 .focus\:bg-opacity-100:focus {
   --bg-opacity: 1;
 }
@@ -10153,6 +10201,10 @@ video {
   --border-opacity: 0;
 }
 
+.border-opacity-5 {
+  --border-opacity: 0.05;
+}
+
 .border-opacity-10 {
   --border-opacity: 0.1;
 }
@@ -10197,6 +10249,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.border-opacity-95 {
+  --border-opacity: 0.95;
+}
+
 .border-opacity-100 {
   --border-opacity: 1;
 }
@@ -10205,6 +10261,10 @@ video {
   --border-opacity: 0;
 }
 
+.group:hover .group-hover\:border-opacity-5 {
+  --border-opacity: 0.05;
+}
+
 .group:hover .group-hover\:border-opacity-10 {
   --border-opacity: 0.1;
 }
@@ -10249,6 +10309,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.group:hover .group-hover\:border-opacity-95 {
+  --border-opacity: 0.95;
+}
+
 .group:hover .group-hover\:border-opacity-100 {
   --border-opacity: 1;
 }
@@ -10257,6 +10321,10 @@ video {
   --border-opacity: 0;
 }
 
+.focus-within\:border-opacity-5:focus-within {
+  --border-opacity: 0.05;
+}
+
 .focus-within\:border-opacity-10:focus-within {
   --border-opacity: 0.1;
 }
@@ -10301,6 +10369,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.focus-within\:border-opacity-95:focus-within {
+  --border-opacity: 0.95;
+}
+
 .focus-within\:border-opacity-100:focus-within {
   --border-opacity: 1;
 }
@@ -10309,6 +10381,10 @@ video {
   --border-opacity: 0;
 }
 
+.hover\:border-opacity-5:hover {
+  --border-opacity: 0.05;
+}
+
 .hover\:border-opacity-10:hover {
   --border-opacity: 0.1;
 }
@@ -10353,6 +10429,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.hover\:border-opacity-95:hover {
+  --border-opacity: 0.95;
+}
+
 .hover\:border-opacity-100:hover {
   --border-opacity: 1;
 }
@@ -10361,6 +10441,10 @@ video {
   --border-opacity: 0;
 }
 
+.focus\:border-opacity-5:focus {
+  --border-opacity: 0.05;
+}
+
 .focus\:border-opacity-10:focus {
   --border-opacity: 0.1;
 }
@@ -10405,6 +10489,10 @@ video {
   --border-opacity: 0.9;
 }
 
+.focus\:border-opacity-95:focus {
+  --border-opacity: 0.95;
+}
+
 .focus\:border-opacity-100:focus {
   --border-opacity: 1;
 }
@@ -14248,6 +14336,10 @@ video {
   opacity: 0;
 }
 
+.opacity-5 {
+  opacity: 0.05;
+}
+
 .opacity-10 {
   opacity: 0.1;
 }
@@ -14292,6 +14384,10 @@ video {
   opacity: 0.9;
 }
 
+.opacity-95 {
+  opacity: 0.95;
+}
+
 .opacity-100 {
   opacity: 1;
 }
@@ -14300,6 +14396,10 @@ video {
   opacity: 0;
 }
 
+.group:hover .group-hover\:opacity-5 {
+  opacity: 0.05;
+}
+
 .group:hover .group-hover\:opacity-10 {
   opacity: 0.1;
 }
@@ -14344,6 +14444,10 @@ video {
   opacity: 0.9;
 }
 
+.group:hover .group-hover\:opacity-95 {
+  opacity: 0.95;
+}
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
@@ -14352,6 +14456,10 @@ video {
   opacity: 0;
 }
 
+.focus-within\:opacity-5:focus-within {
+  opacity: 0.05;
+}
+
 .focus-within\:opacity-10:focus-within {
   opacity: 0.1;
 }
@@ -14396,6 +14504,10 @@ video {
   opacity: 0.9;
 }
 
+.focus-within\:opacity-95:focus-within {
+  opacity: 0.95;
+}
+
 .focus-within\:opacity-100:focus-within {
   opacity: 1;
 }
@@ -14404,6 +14516,10 @@ video {
   opacity: 0;
 }
 
+.hover\:opacity-5:hover {
+  opacity: 0.05;
+}
+
 .hover\:opacity-10:hover {
   opacity: 0.1;
 }
@@ -14448,6 +14564,10 @@ video {
   opacity: 0.9;
 }
 
+.hover\:opacity-95:hover {
+  opacity: 0.95;
+}
+
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -14456,6 +14576,10 @@ video {
   opacity: 0;
 }
 
+.focus\:opacity-5:focus {
+  opacity: 0.05;
+}
+
 .focus\:opacity-10:focus {
   opacity: 0.1;
 }
@@ -14500,6 +14624,10 @@ video {
   opacity: 0.9;
 }
 
+.focus\:opacity-95:focus {
+  opacity: 0.95;
+}
+
 .focus\:opacity-100:focus {
   opacity: 1;
 }
@@ -16508,6 +16636,10 @@ video {
   --placeholder-opacity: 0;
 }
 
+.placeholder-opacity-5::placeholder {
+  --placeholder-opacity: 0.05;
+}
+
 .placeholder-opacity-10::placeholder {
   --placeholder-opacity: 0.1;
 }
@@ -16552,6 +16684,10 @@ video {
   --placeholder-opacity: 0.9;
 }
 
+.placeholder-opacity-95::placeholder {
+  --placeholder-opacity: 0.95;
+}
+
 .placeholder-opacity-100::placeholder {
   --placeholder-opacity: 1;
 }
@@ -16560,6 +16696,10 @@ video {
   --placeholder-opacity: 0;
 }
 
+.focus\:placeholder-opacity-5:focus::placeholder {
+  --placeholder-opacity: 0.05;
+}
+
 .focus\:placeholder-opacity-10:focus::placeholder {
   --placeholder-opacity: 0.1;
 }
@@ -16604,6 +16744,10 @@ video {
   --placeholder-opacity: 0.9;
 }
 
+.focus\:placeholder-opacity-95:focus::placeholder {
+  --placeholder-opacity: 0.95;
+}
+
 .focus\:placeholder-opacity-100:focus::placeholder {
   --placeholder-opacity: 1;
 }
@@ -19424,11 +19568,6 @@ video {
   resize: both;
 }
 
-.shadow-xs {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .shadow-sm {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -19464,26 +19603,11 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.shadow-outline {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.shadow-solid {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .shadow-none {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
 }
 
-.focus-within\:shadow-xs:focus-within {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .focus-within\:shadow-sm:focus-within {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -19519,26 +19643,11 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.focus-within\:shadow-outline:focus-within {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.focus-within\:shadow-solid:focus-within {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .focus-within\:shadow-none:focus-within {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
 }
 
-.hover\:shadow-xs:hover {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .hover\:shadow-sm:hover {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -19574,26 +19683,11 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.hover\:shadow-outline:hover {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.hover\:shadow-solid:hover {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .hover\:shadow-none:hover {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
 }
 
-.focus\:shadow-xs:focus {
-  --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
-}
-
 .focus\:shadow-sm:focus {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--box-shadow);
@@ -19629,16 +19723,6 @@ video {
   box-shadow: var(--box-shadow);
 }
 
-.focus\:shadow-outline:focus {
-  --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-  box-shadow: var(--box-shadow);
-}
-
-.focus\:shadow-solid:focus {
-  --box-shadow: 0 0 0 2px currentColor;
-  box-shadow: var(--box-shadow);
-}
-
 .focus\:shadow-none:focus {
   --box-shadow: none;
   box-shadow: var(--box-shadow);
@@ -20495,6 +20579,10 @@ video {
   --ring-opacity: 0;
 }
 
+.ring-opacity-5 {
+  --ring-opacity: 0.05;
+}
+
 .ring-opacity-10 {
   --ring-opacity: 0.1;
 }
@@ -20539,6 +20627,10 @@ video {
   --ring-opacity: 0.9;
 }
 
+.ring-opacity-95 {
+  --ring-opacity: 0.95;
+}
+
 .ring-opacity-100 {
   --ring-opacity: 1;
 }
@@ -22681,6 +22773,10 @@ video {
   --text-opacity: 0;
 }
 
+.text-opacity-5 {
+  --text-opacity: 0.05;
+}
+
 .text-opacity-10 {
   --text-opacity: 0.1;
 }
@@ -22725,6 +22821,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.text-opacity-95 {
+  --text-opacity: 0.95;
+}
+
 .text-opacity-100 {
   --text-opacity: 1;
 }
@@ -22733,6 +22833,10 @@ video {
   --text-opacity: 0;
 }
 
+.group:hover .group-hover\:text-opacity-5 {
+  --text-opacity: 0.05;
+}
+
 .group:hover .group-hover\:text-opacity-10 {
   --text-opacity: 0.1;
 }
@@ -22777,6 +22881,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.group:hover .group-hover\:text-opacity-95 {
+  --text-opacity: 0.95;
+}
+
 .group:hover .group-hover\:text-opacity-100 {
   --text-opacity: 1;
 }
@@ -22785,6 +22893,10 @@ video {
   --text-opacity: 0;
 }
 
+.focus-within\:text-opacity-5:focus-within {
+  --text-opacity: 0.05;
+}
+
 .focus-within\:text-opacity-10:focus-within {
   --text-opacity: 0.1;
 }
@@ -22829,6 +22941,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.focus-within\:text-opacity-95:focus-within {
+  --text-opacity: 0.95;
+}
+
 .focus-within\:text-opacity-100:focus-within {
   --text-opacity: 1;
 }
@@ -22837,6 +22953,10 @@ video {
   --text-opacity: 0;
 }
 
+.hover\:text-opacity-5:hover {
+  --text-opacity: 0.05;
+}
+
 .hover\:text-opacity-10:hover {
   --text-opacity: 0.1;
 }
@@ -22881,6 +23001,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.hover\:text-opacity-95:hover {
+  --text-opacity: 0.95;
+}
+
 .hover\:text-opacity-100:hover {
   --text-opacity: 1;
 }
@@ -22889,6 +23013,10 @@ video {
   --text-opacity: 0;
 }
 
+.focus\:text-opacity-5:focus {
+  --text-opacity: 0.05;
+}
+
 .focus\:text-opacity-10:focus {
   --text-opacity: 0.1;
 }
@@ -22933,6 +23061,10 @@ video {
   --text-opacity: 0.9;
 }
 
+.focus\:text-opacity-95:focus {
+  --text-opacity: 0.95;
+}
+
 .focus\:text-opacity-100:focus {
   --text-opacity: 1;
 }
@@ -28893,6 +29025,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .sm\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .sm\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -28937,6 +29073,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .sm\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .sm\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -34700,6 +34840,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .sm\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .sm\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -34744,6 +34888,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .sm\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .sm\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -34752,6 +34900,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .sm\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .sm\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -34796,6 +34948,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .sm\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .sm\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -34804,6 +34960,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .sm\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .sm\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -34848,6 +35008,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .sm\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .sm\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -34856,6 +35020,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .sm\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .sm\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -34900,6 +35068,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .sm\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .sm\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -34908,6 +35080,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .sm\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .sm\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -34952,6 +35128,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .sm\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .sm\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -37130,6 +37310,10 @@ video {
     --border-opacity: 0;
   }
 
+  .sm\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .sm\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -37174,6 +37358,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .sm\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .sm\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -37182,6 +37370,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .sm\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .sm\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -37226,6 +37418,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .sm\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .sm\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -37234,6 +37430,10 @@ video {
     --border-opacity: 0;
   }
 
+  .sm\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .sm\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -37278,6 +37478,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .sm\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .sm\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -37286,6 +37490,10 @@ video {
     --border-opacity: 0;
   }
 
+  .sm\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .sm\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -37330,6 +37538,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .sm\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .sm\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -37338,6 +37550,10 @@ video {
     --border-opacity: 0;
   }
 
+  .sm\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .sm\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -37382,6 +37598,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .sm\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .sm\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -41225,6 +41445,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .sm\:opacity-10 {
     opacity: 0.1;
   }
@@ -41269,6 +41493,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .sm\:opacity-100 {
     opacity: 1;
   }
@@ -41277,6 +41505,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .sm\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .sm\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -41321,6 +41553,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .sm\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .sm\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -41329,6 +41565,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .sm\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -41373,6 +41613,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .sm\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -41381,6 +41625,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .sm\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -41425,6 +41673,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .sm\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -41433,6 +41685,10 @@ video {
     opacity: 0;
   }
 
+  .sm\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .sm\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -41477,6 +41733,10 @@ video {
     opacity: 0.9;
   }
 
+  .sm\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .sm\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -43485,6 +43745,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .sm\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .sm\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -43529,6 +43793,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .sm\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .sm\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -43537,6 +43805,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .sm\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .sm\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -43581,6 +43853,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .sm\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .sm\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -46401,11 +46677,6 @@ video {
     resize: both;
   }
 
-  .sm\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -46441,26 +46712,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -46496,26 +46752,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -46551,26 +46792,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -46606,16 +46832,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .sm\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .sm\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .sm\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -47472,6 +47688,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .sm\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .sm\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -47516,6 +47736,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .sm\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .sm\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -49658,6 +49882,10 @@ video {
     --text-opacity: 0;
   }
 
+  .sm\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .sm\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -49702,6 +49930,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .sm\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .sm\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -49710,6 +49942,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .sm\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .sm\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -49754,6 +49990,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .sm\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .sm\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -49762,6 +50002,10 @@ video {
     --text-opacity: 0;
   }
 
+  .sm\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .sm\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -49806,6 +50050,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .sm\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .sm\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -49814,6 +50062,10 @@ video {
     --text-opacity: 0;
   }
 
+  .sm\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .sm\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -49858,6 +50110,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .sm\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .sm\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -49866,6 +50122,10 @@ video {
     --text-opacity: 0;
   }
 
+  .sm\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .sm\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -49910,6 +50170,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .sm\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .sm\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
@@ -55840,6 +56104,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .md\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .md\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -55884,6 +56152,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .md\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .md\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -61647,6 +61919,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .md\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .md\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -61691,6 +61967,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .md\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .md\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -61699,6 +61979,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .md\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .md\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -61743,6 +62027,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .md\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .md\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -61751,6 +62039,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .md\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .md\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -61795,6 +62087,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .md\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .md\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -61803,6 +62099,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .md\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .md\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -61847,6 +62147,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .md\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .md\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -61855,6 +62159,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .md\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .md\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -61899,6 +62207,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .md\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .md\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -64077,6 +64389,10 @@ video {
     --border-opacity: 0;
   }
 
+  .md\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .md\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -64121,6 +64437,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .md\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .md\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -64129,6 +64449,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .md\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .md\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -64173,6 +64497,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .md\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .md\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -64181,6 +64509,10 @@ video {
     --border-opacity: 0;
   }
 
+  .md\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .md\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -64225,6 +64557,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .md\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .md\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -64233,6 +64569,10 @@ video {
     --border-opacity: 0;
   }
 
+  .md\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .md\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -64277,6 +64617,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .md\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .md\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -64285,6 +64629,10 @@ video {
     --border-opacity: 0;
   }
 
+  .md\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .md\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -64329,6 +64677,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .md\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .md\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -68172,6 +68524,10 @@ video {
     opacity: 0;
   }
 
+  .md\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .md\:opacity-10 {
     opacity: 0.1;
   }
@@ -68216,6 +68572,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .md\:opacity-100 {
     opacity: 1;
   }
@@ -68224,6 +68584,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .md\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .md\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -68268,6 +68632,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .md\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .md\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -68276,6 +68644,10 @@ video {
     opacity: 0;
   }
 
+  .md\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .md\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -68320,6 +68692,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .md\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -68328,6 +68704,10 @@ video {
     opacity: 0;
   }
 
+  .md\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .md\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -68372,6 +68752,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .md\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -68380,6 +68764,10 @@ video {
     opacity: 0;
   }
 
+  .md\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .md\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -68424,6 +68812,10 @@ video {
     opacity: 0.9;
   }
 
+  .md\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .md\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -70432,6 +70824,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .md\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .md\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -70476,6 +70872,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .md\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .md\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -70484,6 +70884,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .md\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .md\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -70528,6 +70932,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .md\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .md\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -73348,11 +73756,6 @@ video {
     resize: both;
   }
 
-  .md\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -73388,26 +73791,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -73443,26 +73831,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .md\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -73498,26 +73871,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -73553,16 +73911,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .md\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .md\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .md\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -74419,6 +74767,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .md\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .md\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -74463,6 +74815,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .md\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .md\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -76605,6 +76961,10 @@ video {
     --text-opacity: 0;
   }
 
+  .md\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .md\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -76649,6 +77009,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .md\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .md\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -76657,6 +77021,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .md\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .md\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -76701,6 +77069,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .md\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .md\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -76709,6 +77081,10 @@ video {
     --text-opacity: 0;
   }
 
+  .md\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .md\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -76753,6 +77129,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .md\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .md\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -76761,6 +77141,10 @@ video {
     --text-opacity: 0;
   }
 
+  .md\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .md\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -76805,6 +77189,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .md\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .md\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -76813,6 +77201,10 @@ video {
     --text-opacity: 0;
   }
 
+  .md\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .md\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -76857,6 +77249,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .md\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .md\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
@@ -82787,6 +83183,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .lg\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .lg\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -82831,6 +83231,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .lg\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .lg\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -88594,6 +88998,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .lg\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .lg\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -88638,6 +89046,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .lg\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .lg\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -88646,6 +89058,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .lg\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .lg\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -88690,6 +89106,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .lg\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .lg\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -88698,6 +89118,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .lg\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .lg\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -88742,6 +89166,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .lg\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .lg\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -88750,6 +89178,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .lg\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .lg\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -88794,6 +89226,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .lg\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .lg\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -88802,6 +89238,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .lg\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .lg\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -88846,6 +89286,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .lg\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .lg\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -91024,6 +91468,10 @@ video {
     --border-opacity: 0;
   }
 
+  .lg\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .lg\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -91068,6 +91516,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .lg\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .lg\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -91076,6 +91528,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .lg\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .lg\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -91120,6 +91576,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .lg\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .lg\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -91128,6 +91588,10 @@ video {
     --border-opacity: 0;
   }
 
+  .lg\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .lg\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -91172,6 +91636,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .lg\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .lg\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -91180,6 +91648,10 @@ video {
     --border-opacity: 0;
   }
 
+  .lg\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .lg\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -91224,6 +91696,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .lg\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .lg\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -91232,6 +91708,10 @@ video {
     --border-opacity: 0;
   }
 
+  .lg\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .lg\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -91276,6 +91756,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .lg\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .lg\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -95119,6 +95603,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .lg\:opacity-10 {
     opacity: 0.1;
   }
@@ -95163,6 +95651,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .lg\:opacity-100 {
     opacity: 1;
   }
@@ -95171,6 +95663,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .lg\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .lg\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -95215,6 +95711,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .lg\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .lg\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -95223,6 +95723,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .lg\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -95267,6 +95771,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .lg\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -95275,6 +95783,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .lg\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -95319,6 +95831,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .lg\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -95327,6 +95843,10 @@ video {
     opacity: 0;
   }
 
+  .lg\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .lg\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -95371,6 +95891,10 @@ video {
     opacity: 0.9;
   }
 
+  .lg\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .lg\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -97379,6 +97903,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .lg\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .lg\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -97423,6 +97951,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .lg\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .lg\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -97431,6 +97963,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .lg\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .lg\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -97475,6 +98011,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .lg\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .lg\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -100295,11 +100835,6 @@ video {
     resize: both;
   }
 
-  .lg\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -100335,26 +100870,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -100390,26 +100910,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -100445,26 +100950,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -100500,16 +100990,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .lg\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .lg\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .lg\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -101366,6 +101846,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .lg\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .lg\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -101410,6 +101894,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .lg\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .lg\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -103552,6 +104040,10 @@ video {
     --text-opacity: 0;
   }
 
+  .lg\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .lg\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -103596,6 +104088,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .lg\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .lg\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -103604,6 +104100,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .lg\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .lg\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -103648,6 +104148,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .lg\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .lg\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -103656,6 +104160,10 @@ video {
     --text-opacity: 0;
   }
 
+  .lg\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .lg\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -103700,6 +104208,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .lg\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .lg\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -103708,6 +104220,10 @@ video {
     --text-opacity: 0;
   }
 
+  .lg\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .lg\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -103752,6 +104268,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .lg\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .lg\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -103760,6 +104280,10 @@ video {
     --text-opacity: 0;
   }
 
+  .lg\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .lg\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -103804,6 +104328,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .lg\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .lg\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
@@ -109734,6 +110262,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .xl\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .xl\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -109778,6 +110310,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .xl\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .xl\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -115541,6 +116077,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .xl\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .xl\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -115585,6 +116125,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .xl\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .xl\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -115593,6 +116137,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .xl\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .xl\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -115637,6 +116185,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .xl\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .xl\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -115645,6 +116197,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .xl\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .xl\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -115689,6 +116245,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .xl\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .xl\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -115697,6 +116257,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .xl\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .xl\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -115741,6 +116305,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .xl\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .xl\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -115749,6 +116317,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .xl\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .xl\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -115793,6 +116365,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .xl\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .xl\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -117971,6 +118547,10 @@ video {
     --border-opacity: 0;
   }
 
+  .xl\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .xl\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -118015,6 +118595,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .xl\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .xl\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -118023,6 +118607,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .xl\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .xl\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -118067,6 +118655,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .xl\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .xl\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -118075,6 +118667,10 @@ video {
     --border-opacity: 0;
   }
 
+  .xl\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .xl\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -118119,6 +118715,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .xl\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .xl\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -118127,6 +118727,10 @@ video {
     --border-opacity: 0;
   }
 
+  .xl\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .xl\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -118171,6 +118775,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .xl\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .xl\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -118179,6 +118787,10 @@ video {
     --border-opacity: 0;
   }
 
+  .xl\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .xl\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -118223,6 +118835,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .xl\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .xl\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -122066,6 +122682,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .xl\:opacity-10 {
     opacity: 0.1;
   }
@@ -122110,6 +122730,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .xl\:opacity-100 {
     opacity: 1;
   }
@@ -122118,6 +122742,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .xl\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .xl\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -122162,6 +122790,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .xl\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .xl\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -122170,6 +122802,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .xl\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -122214,6 +122850,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .xl\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -122222,6 +122862,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .xl\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -122266,6 +122910,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .xl\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -122274,6 +122922,10 @@ video {
     opacity: 0;
   }
 
+  .xl\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .xl\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -122318,6 +122970,10 @@ video {
     opacity: 0.9;
   }
 
+  .xl\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .xl\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -124326,6 +124982,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .xl\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .xl\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -124370,6 +125030,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .xl\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .xl\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -124378,6 +125042,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .xl\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .xl\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -124422,6 +125090,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .xl\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .xl\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -127242,11 +127914,6 @@ video {
     resize: both;
   }
 
-  .xl\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -127282,26 +127949,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -127337,26 +127989,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -127392,26 +128029,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -127447,16 +128069,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .xl\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .xl\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .xl\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -128313,6 +128925,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .xl\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .xl\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -128357,6 +128973,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .xl\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .xl\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -130499,6 +131119,10 @@ video {
     --text-opacity: 0;
   }
 
+  .xl\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .xl\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -130543,6 +131167,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .xl\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .xl\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -130551,6 +131179,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .xl\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .xl\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -130595,6 +131227,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .xl\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .xl\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -130603,6 +131239,10 @@ video {
     --text-opacity: 0;
   }
 
+  .xl\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .xl\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -130647,6 +131287,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .xl\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .xl\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -130655,6 +131299,10 @@ video {
     --text-opacity: 0;
   }
 
+  .xl\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .xl\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -130699,6 +131347,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .xl\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .xl\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -130707,6 +131359,10 @@ video {
     --text-opacity: 0;
   }
 
+  .xl\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .xl\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -130751,6 +131407,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .xl\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .xl\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
@@ -136681,6 +137341,10 @@ video {
     --divide-opacity: 0;
   }
 
+  .\32xl\:divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.05;
+  }
+
   .\32xl\:divide-opacity-10 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 0.1;
   }
@@ -136725,6 +137389,10 @@ video {
     --divide-opacity: 0.9;
   }
 
+  .\32xl\:divide-opacity-95 > :not([hidden]) ~ :not([hidden]) {
+    --divide-opacity: 0.95;
+  }
+
   .\32xl\:divide-opacity-100 > :not([hidden]) ~ :not([hidden]) {
     --divide-opacity: 1;
   }
@@ -142488,6 +143156,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .\32xl\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .\32xl\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -142532,6 +143204,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .\32xl\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .\32xl\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -142540,6 +143216,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .group:hover .\32xl\:group-hover\:bg-opacity-5 {
+    --bg-opacity: 0.05;
+  }
+
   .group:hover .\32xl\:group-hover\:bg-opacity-10 {
     --bg-opacity: 0.1;
   }
@@ -142584,6 +143264,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .group:hover .\32xl\:group-hover\:bg-opacity-95 {
+    --bg-opacity: 0.95;
+  }
+
   .group:hover .\32xl\:group-hover\:bg-opacity-100 {
     --bg-opacity: 1;
   }
@@ -142592,6 +143276,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .\32xl\:focus-within\:bg-opacity-5:focus-within {
+    --bg-opacity: 0.05;
+  }
+
   .\32xl\:focus-within\:bg-opacity-10:focus-within {
     --bg-opacity: 0.1;
   }
@@ -142636,6 +143324,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .\32xl\:focus-within\:bg-opacity-95:focus-within {
+    --bg-opacity: 0.95;
+  }
+
   .\32xl\:focus-within\:bg-opacity-100:focus-within {
     --bg-opacity: 1;
   }
@@ -142644,6 +143336,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .\32xl\:hover\:bg-opacity-5:hover {
+    --bg-opacity: 0.05;
+  }
+
   .\32xl\:hover\:bg-opacity-10:hover {
     --bg-opacity: 0.1;
   }
@@ -142688,6 +143384,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .\32xl\:hover\:bg-opacity-95:hover {
+    --bg-opacity: 0.95;
+  }
+
   .\32xl\:hover\:bg-opacity-100:hover {
     --bg-opacity: 1;
   }
@@ -142696,6 +143396,10 @@ video {
     --bg-opacity: 0;
   }
 
+  .\32xl\:focus\:bg-opacity-5:focus {
+    --bg-opacity: 0.05;
+  }
+
   .\32xl\:focus\:bg-opacity-10:focus {
     --bg-opacity: 0.1;
   }
@@ -142740,6 +143444,10 @@ video {
     --bg-opacity: 0.9;
   }
 
+  .\32xl\:focus\:bg-opacity-95:focus {
+    --bg-opacity: 0.95;
+  }
+
   .\32xl\:focus\:bg-opacity-100:focus {
     --bg-opacity: 1;
   }
@@ -144918,6 +145626,10 @@ video {
     --border-opacity: 0;
   }
 
+  .\32xl\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .\32xl\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -144962,6 +145674,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .\32xl\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .\32xl\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -144970,6 +145686,10 @@ video {
     --border-opacity: 0;
   }
 
+  .group:hover .\32xl\:group-hover\:border-opacity-5 {
+    --border-opacity: 0.05;
+  }
+
   .group:hover .\32xl\:group-hover\:border-opacity-10 {
     --border-opacity: 0.1;
   }
@@ -145014,6 +145734,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .group:hover .\32xl\:group-hover\:border-opacity-95 {
+    --border-opacity: 0.95;
+  }
+
   .group:hover .\32xl\:group-hover\:border-opacity-100 {
     --border-opacity: 1;
   }
@@ -145022,6 +145746,10 @@ video {
     --border-opacity: 0;
   }
 
+  .\32xl\:focus-within\:border-opacity-5:focus-within {
+    --border-opacity: 0.05;
+  }
+
   .\32xl\:focus-within\:border-opacity-10:focus-within {
     --border-opacity: 0.1;
   }
@@ -145066,6 +145794,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .\32xl\:focus-within\:border-opacity-95:focus-within {
+    --border-opacity: 0.95;
+  }
+
   .\32xl\:focus-within\:border-opacity-100:focus-within {
     --border-opacity: 1;
   }
@@ -145074,6 +145806,10 @@ video {
     --border-opacity: 0;
   }
 
+  .\32xl\:hover\:border-opacity-5:hover {
+    --border-opacity: 0.05;
+  }
+
   .\32xl\:hover\:border-opacity-10:hover {
     --border-opacity: 0.1;
   }
@@ -145118,6 +145854,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .\32xl\:hover\:border-opacity-95:hover {
+    --border-opacity: 0.95;
+  }
+
   .\32xl\:hover\:border-opacity-100:hover {
     --border-opacity: 1;
   }
@@ -145126,6 +145866,10 @@ video {
     --border-opacity: 0;
   }
 
+  .\32xl\:focus\:border-opacity-5:focus {
+    --border-opacity: 0.05;
+  }
+
   .\32xl\:focus\:border-opacity-10:focus {
     --border-opacity: 0.1;
   }
@@ -145170,6 +145914,10 @@ video {
     --border-opacity: 0.9;
   }
 
+  .\32xl\:focus\:border-opacity-95:focus {
+    --border-opacity: 0.95;
+  }
+
   .\32xl\:focus\:border-opacity-100:focus {
     --border-opacity: 1;
   }
@@ -149013,6 +149761,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .\32xl\:opacity-10 {
     opacity: 0.1;
   }
@@ -149057,6 +149809,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .\32xl\:opacity-100 {
     opacity: 1;
   }
@@ -149065,6 +149821,10 @@ video {
     opacity: 0;
   }
 
+  .group:hover .\32xl\:group-hover\:opacity-5 {
+    opacity: 0.05;
+  }
+
   .group:hover .\32xl\:group-hover\:opacity-10 {
     opacity: 0.1;
   }
@@ -149109,6 +149869,10 @@ video {
     opacity: 0.9;
   }
 
+  .group:hover .\32xl\:group-hover\:opacity-95 {
+    opacity: 0.95;
+  }
+
   .group:hover .\32xl\:group-hover\:opacity-100 {
     opacity: 1;
   }
@@ -149117,6 +149881,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:focus-within\:opacity-5:focus-within {
+    opacity: 0.05;
+  }
+
   .\32xl\:focus-within\:opacity-10:focus-within {
     opacity: 0.1;
   }
@@ -149161,6 +149929,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:focus-within\:opacity-95:focus-within {
+    opacity: 0.95;
+  }
+
   .\32xl\:focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -149169,6 +149941,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:hover\:opacity-5:hover {
+    opacity: 0.05;
+  }
+
   .\32xl\:hover\:opacity-10:hover {
     opacity: 0.1;
   }
@@ -149213,6 +149989,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:hover\:opacity-95:hover {
+    opacity: 0.95;
+  }
+
   .\32xl\:hover\:opacity-100:hover {
     opacity: 1;
   }
@@ -149221,6 +150001,10 @@ video {
     opacity: 0;
   }
 
+  .\32xl\:focus\:opacity-5:focus {
+    opacity: 0.05;
+  }
+
   .\32xl\:focus\:opacity-10:focus {
     opacity: 0.1;
   }
@@ -149265,6 +150049,10 @@ video {
     opacity: 0.9;
   }
 
+  .\32xl\:focus\:opacity-95:focus {
+    opacity: 0.95;
+  }
+
   .\32xl\:focus\:opacity-100:focus {
     opacity: 1;
   }
@@ -151273,6 +152061,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .\32xl\:placeholder-opacity-5::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .\32xl\:placeholder-opacity-10::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -151317,6 +152109,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .\32xl\:placeholder-opacity-95::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .\32xl\:placeholder-opacity-100::placeholder {
     --placeholder-opacity: 1;
   }
@@ -151325,6 +152121,10 @@ video {
     --placeholder-opacity: 0;
   }
 
+  .\32xl\:focus\:placeholder-opacity-5:focus::placeholder {
+    --placeholder-opacity: 0.05;
+  }
+
   .\32xl\:focus\:placeholder-opacity-10:focus::placeholder {
     --placeholder-opacity: 0.1;
   }
@@ -151369,6 +152169,10 @@ video {
     --placeholder-opacity: 0.9;
   }
 
+  .\32xl\:focus\:placeholder-opacity-95:focus::placeholder {
+    --placeholder-opacity: 0.95;
+  }
+
   .\32xl\:focus\:placeholder-opacity-100:focus::placeholder {
     --placeholder-opacity: 1;
   }
@@ -154189,11 +154993,6 @@ video {
     resize: both;
   }
 
-  .\32xl\:shadow-xs {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -154229,26 +155028,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:shadow-outline {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:shadow-solid {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:shadow-none {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus-within\:shadow-xs:focus-within {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus-within\:shadow-sm:focus-within {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -154284,26 +155068,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus-within\:shadow-outline:focus-within {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:focus-within\:shadow-solid:focus-within {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:hover\:shadow-xs:hover {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:hover\:shadow-sm:hover {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -154339,26 +155108,11 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:hover\:shadow-outline:hover {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:hover\:shadow-solid:hover {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:hover\:shadow-none:hover {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus\:shadow-xs:focus {
-    --box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus\:shadow-sm:focus {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     box-shadow: var(--box-shadow);
@@ -154394,16 +155148,6 @@ video {
     box-shadow: var(--box-shadow);
   }
 
-  .\32xl\:focus\:shadow-outline:focus {
-    --box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5);
-    box-shadow: var(--box-shadow);
-  }
-
-  .\32xl\:focus\:shadow-solid:focus {
-    --box-shadow: 0 0 0 2px currentColor;
-    box-shadow: var(--box-shadow);
-  }
-
   .\32xl\:focus\:shadow-none:focus {
     --box-shadow: none;
     box-shadow: var(--box-shadow);
@@ -155260,6 +156004,10 @@ video {
     --ring-opacity: 0;
   }
 
+  .\32xl\:ring-opacity-5 {
+    --ring-opacity: 0.05;
+  }
+
   .\32xl\:ring-opacity-10 {
     --ring-opacity: 0.1;
   }
@@ -155304,6 +156052,10 @@ video {
     --ring-opacity: 0.9;
   }
 
+  .\32xl\:ring-opacity-95 {
+    --ring-opacity: 0.95;
+  }
+
   .\32xl\:ring-opacity-100 {
     --ring-opacity: 1;
   }
@@ -157446,6 +158198,10 @@ video {
     --text-opacity: 0;
   }
 
+  .\32xl\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .\32xl\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -157490,6 +158246,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .\32xl\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .\32xl\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -157498,6 +158258,10 @@ video {
     --text-opacity: 0;
   }
 
+  .group:hover .\32xl\:group-hover\:text-opacity-5 {
+    --text-opacity: 0.05;
+  }
+
   .group:hover .\32xl\:group-hover\:text-opacity-10 {
     --text-opacity: 0.1;
   }
@@ -157542,6 +158306,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .group:hover .\32xl\:group-hover\:text-opacity-95 {
+    --text-opacity: 0.95;
+  }
+
   .group:hover .\32xl\:group-hover\:text-opacity-100 {
     --text-opacity: 1;
   }
@@ -157550,6 +158318,10 @@ video {
     --text-opacity: 0;
   }
 
+  .\32xl\:focus-within\:text-opacity-5:focus-within {
+    --text-opacity: 0.05;
+  }
+
   .\32xl\:focus-within\:text-opacity-10:focus-within {
     --text-opacity: 0.1;
   }
@@ -157594,6 +158366,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .\32xl\:focus-within\:text-opacity-95:focus-within {
+    --text-opacity: 0.95;
+  }
+
   .\32xl\:focus-within\:text-opacity-100:focus-within {
     --text-opacity: 1;
   }
@@ -157602,6 +158378,10 @@ video {
     --text-opacity: 0;
   }
 
+  .\32xl\:hover\:text-opacity-5:hover {
+    --text-opacity: 0.05;
+  }
+
   .\32xl\:hover\:text-opacity-10:hover {
     --text-opacity: 0.1;
   }
@@ -157646,6 +158426,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .\32xl\:hover\:text-opacity-95:hover {
+    --text-opacity: 0.95;
+  }
+
   .\32xl\:hover\:text-opacity-100:hover {
     --text-opacity: 1;
   }
@@ -157654,6 +158438,10 @@ video {
     --text-opacity: 0;
   }
 
+  .\32xl\:focus\:text-opacity-5:focus {
+    --text-opacity: 0.05;
+  }
+
   .\32xl\:focus\:text-opacity-10:focus {
     --text-opacity: 0.1;
   }
@@ -157698,6 +158486,10 @@ video {
     --text-opacity: 0.9;
   }
 
+  .\32xl\:focus\:text-opacity-95:focus {
+    --text-opacity: 0.95;
+  }
+
   .\32xl\:focus\:text-opacity-100:focus {
     --text-opacity: 1;
   }
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index f43c7eaac5d0..30fdef5f65a7 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -125,7 +125,6 @@ module.exports = {
       8: '8px',
     },
     boxShadow: {
-      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
       DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
@@ -133,8 +132,6 @@ module.exports = {
       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-      outline: '0 0 0 3px rgba(147, 197, 253, 0.5)',
-      solid: '0 0 0 2px currentColor',
       none: 'none',
     },
     container: {},
@@ -498,6 +495,7 @@ module.exports = {
     },
     opacity: {
       0: '0',
+      5: '0.05',
       10: '0.1',
       20: '0.2',
       25: '0.25',
@@ -509,6 +507,7 @@ module.exports = {
       75: '0.75',
       80: '0.8',
       90: '0.9',
+      95: '0.95',
       100: '1',
     },
     order: {

From dc20308e41c786b0d4990def971fbb4d93a106c6 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 9 Nov 2020 16:07:12 -0500
Subject: [PATCH 3/4] Undo changes to build file

---
 scripts/build.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/build.js b/scripts/build.js
index 47c97039c29b..25438c1f78ee 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -35,11 +35,11 @@ function buildDistFile(filename, config = {}, outFilename = filename) {
 console.info('Building Tailwind!')
 
 Promise.all([
-  // buildDistFile('base'),
-  // buildDistFile('components'),
-  // buildDistFile('utilities'),
+  buildDistFile('base'),
+  buildDistFile('components'),
+  buildDistFile('utilities'),
   buildDistFile('tailwind'),
-  // buildDistFile('tailwind', { future: 'all', experimental: 'all' }, 'tailwind-experimental'),
+  buildDistFile('tailwind', { future: 'all', experimental: 'all' }, 'tailwind-experimental'),
 ]).then(() => {
   console.log('Finished Building Tailwind!')
 })

From ea8df8825d341d06b3e0b753333a1e2369fc5fde Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 9 Nov 2020 16:17:43 -0500
Subject: [PATCH 4/4] Update boxShadow.test.js

---
 __tests__/plugins/boxShadow.test.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/__tests__/plugins/boxShadow.test.js b/__tests__/plugins/boxShadow.test.js
index 7062463209b2..f19be79dacc7 100644
--- a/__tests__/plugins/boxShadow.test.js
+++ b/__tests__/plugins/boxShadow.test.js
@@ -45,16 +45,20 @@ test('box shadow can use DEFAULT keyword and negative prefix syntax', () => {
     {
       utilities: {
         '.shadow': {
-          'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+          '--box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+          'box-shadow': 'var(--box-shadow)',
         },
         '.shadow-md': {
-          'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+          '--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+          'box-shadow': 'var(--box-shadow)',
         },
         '.-shadow': {
-          'box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+          '--box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+          'box-shadow': 'var(--box-shadow)',
         },
         '.-shadow-md': {
-          'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+          '--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+          'box-shadow': 'var(--box-shadow)',
         },
       },
       variants: ['responsive'],