From c3dd3b68454ad418833a9edf7f3409cad66fb5b0 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 10 Nov 2020 14:24:22 -0500
Subject: [PATCH] Make boxShadow respect ring shadows

This is to prevent box-shadows from overriding rings that are added manually by plugins like the custom forms plugin.
---
 .../fixtures/tailwind-output-flagged.css      | 816 +++++++++---------
 .../fixtures/tailwind-output-important.css    | 816 +++++++++---------
 .../tailwind-output-no-color-opacity.css      | 816 +++++++++---------
 __tests__/fixtures/tailwind-output.css        | 816 +++++++++---------
 __tests__/plugins/boxShadow.test.js           |  12 +-
 src/plugins/boxShadow.js                      |   6 +-
 src/plugins/ringWidth.js                      |   8 +-
 7 files changed, 1649 insertions(+), 1641 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index a6148577e4b2..8d26c3f9f2d7 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -19570,234 +19570,234 @@ video {
 
 .shadow-sm {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .shadow-2xl {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .shadow-inner {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .shadow-none {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus-within\:shadow-2xl:focus-within {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus-within\:shadow-inner:focus-within {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus-within\:shadow-none:focus-within {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-sm:hover {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-2xl:hover {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-inner:hover {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-none:hover {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-sm:focus {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-2xl:focus {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-inner:focus {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-none:focus {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
 }
 
 .ring-offset-transparent {
@@ -46679,234 +46679,234 @@ video {
 
   .sm\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .sm\:ring-offset-transparent {
@@ -73758,234 +73758,234 @@ video {
 
   .md\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .md\:ring-offset-transparent {
@@ -100837,234 +100837,234 @@ video {
 
   .lg\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .lg\:ring-offset-transparent {
@@ -127916,234 +127916,234 @@ video {
 
   .xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .xl\:ring-offset-transparent {
@@ -154995,234 +154995,234 @@ video {
 
   .\32xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .\32xl\:ring-offset-transparent {
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index cc17fcaad198..ad02ecafcf02 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -19570,234 +19570,234 @@ video {
 
 .shadow-sm {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .shadow-2xl {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .shadow-inner {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .shadow-none {
   --box-shadow: 0 0 #0000 !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .focus-within\:shadow-none:focus-within {
   --box-shadow: 0 0 #0000 !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .hover\:shadow-2xl:hover {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .hover\:shadow-inner:hover {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .hover\:shadow-none:hover {
   --box-shadow: 0 0 #0000 !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .focus\:shadow-2xl:focus {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .focus\:shadow-inner:focus {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
 }
 
 .focus\:shadow-none:focus {
   --box-shadow: 0 0 #0000 !important;
-  box-shadow: var(--box-shadow) !important;
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+  --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000) !important;
 }
 
 .ring-offset-transparent {
@@ -46679,234 +46679,234 @@ video {
 
   .sm\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .sm\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .sm\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .sm\:shadow-none {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .sm\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .sm\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .sm\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000) !important;
   }
 
   .sm\:ring-offset-transparent {
@@ -73758,234 +73758,234 @@ video {
 
   .md\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .md\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .md\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .md\:shadow-none {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .md\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .md\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .md\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000) !important;
   }
 
   .md\:ring-offset-transparent {
@@ -100837,234 +100837,234 @@ video {
 
   .lg\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .lg\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .lg\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .lg\:shadow-none {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .lg\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .lg\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .lg\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000) !important;
   }
 
   .lg\:ring-offset-transparent {
@@ -127916,234 +127916,234 @@ video {
 
   .xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .xl\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .xl\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .xl\:shadow-none {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .xl\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .xl\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000) !important;
   }
 
   .xl\:ring-offset-transparent {
@@ -154995,234 +154995,234 @@ video {
 
   .\32xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .\32xl\:shadow-none {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .\32xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .\32xl\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow) !important;
   }
 
   .\32xl\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000 !important;
-    box-shadow: var(--box-shadow) !important;
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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;
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff) !important;
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5)) !important;
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000) !important;
   }
 
   .\32xl\:ring-offset-transparent {
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index 5ddfe3467650..ec4664b8e8d1 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -17724,234 +17724,234 @@ video {
 
 .shadow-sm {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .shadow-2xl {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .shadow-inner {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .shadow-none {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus-within\:shadow-2xl:focus-within {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus-within\:shadow-inner:focus-within {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus-within\:shadow-none:focus-within {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-sm:hover {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-2xl:hover {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-inner:hover {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-none:hover {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-sm:focus {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-2xl:focus {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-inner:focus {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-none:focus {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
 }
 
 .ring-offset-transparent {
@@ -42277,234 +42277,234 @@ video {
 
   .sm\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .sm\:ring-offset-transparent {
@@ -66800,234 +66800,234 @@ video {
 
   .md\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .md\:ring-offset-transparent {
@@ -91323,234 +91323,234 @@ video {
 
   .lg\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .lg\:ring-offset-transparent {
@@ -115846,234 +115846,234 @@ video {
 
   .xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .xl\:ring-offset-transparent {
@@ -140369,234 +140369,234 @@ video {
 
   .\32xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .\32xl\:ring-offset-transparent {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index a6148577e4b2..8d26c3f9f2d7 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -19570,234 +19570,234 @@ video {
 
 .shadow-sm {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .shadow-2xl {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .shadow-inner {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .shadow-none {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus-within\:shadow-2xl:focus-within {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus-within\:shadow-inner:focus-within {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus-within\:shadow-none:focus-within {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-sm:hover {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-2xl:hover {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-inner:hover {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .hover\:shadow-none:hover {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-sm:focus {
   --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-2xl:focus {
   --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-inner:focus {
   --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
 }
 
 .focus\:shadow-none:focus {
   --box-shadow: 0 0 #0000;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+  --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+  --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+  box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
 }
 
 .ring-offset-transparent {
@@ -46679,234 +46679,234 @@ video {
 
   .sm\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .sm\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .sm\:ring-offset-transparent {
@@ -73758,234 +73758,234 @@ video {
 
   .md\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .md\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .md\:ring-offset-transparent {
@@ -100837,234 +100837,234 @@ video {
 
   .lg\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .lg\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .lg\:ring-offset-transparent {
@@ -127916,234 +127916,234 @@ video {
 
   .xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .xl\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .xl\:ring-offset-transparent {
@@ -154995,234 +154995,234 @@ video {
 
   .\32xl\:shadow-sm {
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:shadow-2xl {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:shadow-inner {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:shadow-none {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-2xl:focus-within {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus-within\:shadow-none:focus-within {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-2xl:hover {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-inner:hover {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:hover\:shadow-none:hover {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-2xl:focus {
     --box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-inner:focus {
     --box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow);
   }
 
   .\32xl\:focus\:shadow-none:focus {
     --box-shadow: 0 0 #0000;
-    box-shadow: var(--box-shadow);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(0 + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(4px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(8px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), 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);
+    --ring-offset-shadow: 0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff);
+    --ring-shadow: 0 0 0 calc(3px + var(--ring-offset-width, 0px)) var(--ring-color, rgba(59, 130, 246, 0.5));
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--box-shadow, 0 0 #0000);
   }
 
   .\32xl\:ring-offset-transparent {
diff --git a/__tests__/plugins/boxShadow.test.js b/__tests__/plugins/boxShadow.test.js
index f19be79dacc7..c1a7453dd869 100644
--- a/__tests__/plugins/boxShadow.test.js
+++ b/__tests__/plugins/boxShadow.test.js
@@ -46,19 +46,23 @@ 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': 'var(--box-shadow)',
+          'box-shadow':
+            'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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': 'var(--box-shadow)',
+          'box-shadow':
+            'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
         },
         '.-shadow': {
           '--box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-          'box-shadow': 'var(--box-shadow)',
+          'box-shadow':
+            'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), 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': 'var(--box-shadow)',
+          'box-shadow':
+            'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
         },
       },
       variants: ['responsive'],
diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js
index 588af1a8c79e..6562d622de85 100644
--- a/src/plugins/boxShadow.js
+++ b/src/plugins/boxShadow.js
@@ -9,7 +9,11 @@ export default function () {
           nameClass('shadow', modifier),
           {
             '--box-shadow': value === 'none' ? '0 0 #0000' : value,
-            'box-shadow': 'var(--box-shadow)',
+            'box-shadow': [
+              `var(--ring-offset-shadow, 0 0 #0000)`,
+              `var(--ring-shadow, 0 0 #0000)`,
+              `var(--box-shadow)`,
+            ].join(', '),
           },
         ]
       })
diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js
index 8a6c20887f02..41ca3a0ba827 100644
--- a/src/plugins/ringWidth.js
+++ b/src/plugins/ringWidth.js
@@ -21,11 +21,11 @@ export default function () {
         return [
           nameClass('ring', modifier),
           {
-            '--ring-width': value,
-            '--ring-color-default': ringColorDefault,
+            '--ring-offset-shadow': `0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff)`,
+            '--ring-shadow': `0 0 0 calc(${value} + var(--ring-offset-width, 0px)) var(--ring-color, ${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(--ring-offset-shadow)`,
+              `var(--ring-shadow)`,
               `var(--box-shadow, 0 0 #0000)`,
             ].join(', '),
           },