@westpac/ui 0.48.0 → 0.50.0

package/dist/css/westpac-ui.css

@@ -2816,6 +2816,11 @@ body {
   line-height: 1.2;
   font-family: var(--fontFamily-brand-0), var(--fontFamily-brand-1), var(--fontFamily-brand-2), var(--fontFamily-brand-3), var(--fontFamily-brand-4), var(--fontFamily-brand-5), var(--fontFamily-brand-6), var(--fontFamily-brand-7), var(--fontFamily-brand-8), var(--fontFamily-brand-9);
 }
+.\!typography-body-8 {
+  font-size: 1.125rem !important;
+  line-height: 1.4 !important;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
+}
 .typography-body-8 {
   font-size: 1.125rem;
   line-height: 1.4;
@@ -3264,6 +3269,9 @@ body {
 .static {
   position: static;
 }
+.\!fixed {
+  position: fixed !important;
+}
 .fixed {
   position: fixed;
 }
@@ -3287,6 +3295,15 @@ body {
   top: 0rem;
   bottom: 0rem;
 }
+.\!bottom-0 {
+  bottom: 0rem !important;
+}
+.\!left-0 {
+  left: 0rem !important;
+}
+.\!top-auto {
+  top: auto !important;
+}
 .-left-1 {
   left: -0.375rem;
 }
@@ -3332,6 +3349,9 @@ body {
 .top-1 {
   top: 0.375rem;
 }
+.top-1\/2 {
+  top: 50%;
+}
 .top-3 {
   top: 1.125rem;
 }
@@ -3473,6 +3493,14 @@ body {
   margin-left: -1.5rem;
   margin-right: -1.5rem;
 }
+.-my-0\.5 {
+  margin-top: -0.1875rem;
+  margin-bottom: -0.1875rem;
+}
+.-my-1\.5 {
+  margin-top: -0.5625rem;
+  margin-bottom: -0.5625rem;
+}
 .-my-2 {
   margin-top: -0.75rem;
   margin-bottom: -0.75rem;
@@ -3485,6 +3513,10 @@ body {
   margin-left: 1.125rem;
   margin-right: 1.125rem;
 }
+.mx-\[-8vw\] {
+  margin-left: -8vw;
+  margin-right: -8vw;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -3493,6 +3525,10 @@ body {
   margin-top: 0rem;
   margin-bottom: 0rem;
 }
+.my-0\.5 {
+  margin-top: 0.1875rem;
+  margin-bottom: 0.1875rem;
+}
 .my-1 {
   margin-top: 0.375rem;
   margin-bottom: 0.375rem;
@@ -3509,6 +3545,14 @@ body {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
+.my-\[-0\.3125rem\] {
+  margin-top: -0.3125rem;
+  margin-bottom: -0.3125rem;
+}
+.my-\[-0\.5rem\] {
+  margin-top: -0.5rem;
+  margin-bottom: -0.5rem;
+}
 .\!mb-0 {
   margin-bottom: 0rem !important;
 }
@@ -3518,6 +3562,18 @@ body {
 .-ml-2 {
   margin-left: -0.75rem;
 }
+.-mr-1\.5 {
+  margin-right: -0.5625rem;
+}
+.-mr-2 {
+  margin-right: -0.75rem;
+}
+.-mr-2\.5 {
+  margin-right: -0.9375rem;
+}
+.-mr-3 {
+  margin-right: -1.125rem;
+}
 .-mt-1 {
   margin-top: -0.375rem;
 }
@@ -3545,6 +3601,12 @@ body {
 .mb-5 {
   margin-bottom: 1.875rem;
 }
+.mb-\[-0\.25rem\] {
+  margin-bottom: -0.25rem;
+}
+.mb-\[-0\.625rem\] {
+  margin-bottom: -0.625rem;
+}
 .mb-\[-1px\] {
   margin-bottom: -1px;
 }
@@ -3590,9 +3652,6 @@ body {
 .mt-0 {
   margin-top: 0rem;
 }
-.mt-0\.5 {
-  margin-top: 0.1875rem;
-}
 .mt-1 {
   margin-top: 0.375rem;
 }
@@ -3890,6 +3949,18 @@ body {
 .min-h-12 {
   min-height: 4.5rem;
 }
+.min-h-5 {
+  min-height: 1.875rem;
+}
+.min-h-6 {
+  min-height: 2.25rem;
+}
+.min-h-7 {
+  min-height: 2.625rem;
+}
+.min-h-8 {
+  min-height: 3rem;
+}
 .min-h-9 {
   min-height: 3.375rem;
 }
@@ -4127,10 +4198,18 @@ body {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-0 {
   --tw-translate-x: 0rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-x-1\/2 {
+  --tw-translate-x: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-x-\[-6px\] {
   --tw-translate-x: -6px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -4175,6 +4254,11 @@ body {
   --tw-rotate: -44deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -4221,6 +4305,17 @@ body {
 .animate-skeleton {
   animation: waveLines 2s infinite ease-out;
 }
+@keyframes slideUp {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.animate-slideUp {
+  animation: slideUp 0.4s ease;
+}
 .cursor-default {
   cursor: default;
 }
@@ -4230,6 +4325,9 @@ body {
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-none {
+  touch-action: none;
+}
 .touch-pan-x {
   --tw-pan-x: pan-x;
   touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
@@ -4308,9 +4406,15 @@ body {
 .gap-1 {
   gap: 0.375rem;
 }
+.gap-1\.5 {
+  gap: 0.5625rem;
+}
 .gap-2 {
   gap: 0.75rem;
 }
+.gap-2\.5 {
+  gap: 0.9375rem;
+}
 .gap-3 {
   gap: 1.125rem;
 }
@@ -4428,6 +4532,10 @@ body {
   border-top-left-radius: 0.1875rem;
   border-bottom-left-radius: 0.1875rem;
 }
+.rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
 .rounded-r {
   border-top-right-radius: 0.1875rem;
   border-bottom-right-radius: 0.1875rem;
@@ -4623,6 +4731,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(226 157 128 / var(--tw-border-opacity, 1));
 }
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+}
 .border-x-border {
   --tw-border-opacity: 1;
   border-left-color: rgba(var(--colors-border), var(--tw-border-opacity, 1));
@@ -4655,6 +4767,10 @@ body {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
+.border-l-borderDark {
+  --tw-border-opacity: 1;
+  border-left-color: rgba(var(--colors-borderDark), var(--tw-border-opacity, 1));
+}
 .border-l-hero {
   --tw-border-opacity: 1;
   border-left-color: rgba(var(--colors-hero), var(--tw-border-opacity, 1));
@@ -4740,6 +4856,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
+.bg-black\/20 {
+  background-color: rgb(0 0 0 / 0.2);
+}
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
@@ -5381,6 +5500,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--colors-primary-90), var(--tw-bg-opacity, 1));
 }
+.bg-primary\/5 {
+  background-color: rgba(var(--colors-primary), 0.05);
+}
 .bg-success {
   --tw-bg-opacity: 1;
   background-color: rgb(0 128 0 / var(--tw-bg-opacity, 1));
@@ -5561,6 +5683,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
+.\!bg-none {
+  background-image: none !important;
+}
 .bg-\[linear-gradient\(270deg\2c _\#fff_66\%\2c _transparent\)\] {
   background-image: linear-gradient(270deg, #fff 66%, transparent);
 }
@@ -5661,6 +5786,10 @@ body {
   padding-left: 1.125rem;
   padding-right: 1.125rem;
 }
+.px-3\.5 {
+  padding-left: 1.3125rem;
+  padding-right: 1.3125rem;
+}
 .px-4 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -5685,6 +5814,10 @@ body {
   padding-left: 0.9375rem;
   padding-right: 0.9375rem;
 }
+.px-\[8\%\] {
+  padding-left: 8%;
+  padding-right: 8%;
+}
 .py-1 {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
@@ -5742,6 +5875,9 @@ body {
 .pb-2 {
   padding-bottom: 0.75rem;
 }
+.pb-3 {
+  padding-bottom: 1.125rem;
+}
 .pb-4 {
   padding-bottom: 1.5rem;
 }
@@ -6115,6 +6251,9 @@ body {
 .leading-6 {
   line-height: 1.5rem;
 }
+.leading-9 {
+  line-height: 2.25rem;
+}
 .leading-\[1\.125rem\] {
   line-height: 1.125rem;
 }
@@ -6127,6 +6266,9 @@ body {
 .leading-\[1\.685rem\] {
   line-height: 1.685rem;
 }
+.leading-\[2\.125rem\] {
+  line-height: 2.125rem;
+}
 .leading-loose {
   line-height: 1.428571429;
 }
@@ -6246,6 +6388,9 @@ body {
 .underline {
   text-decoration-line: underline;
 }
+.line-through {
+  text-decoration-line: line-through;
+}
 .no-underline {
   text-decoration-line: none;
 }
@@ -8023,10 +8168,17 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-light), var(--tw-bg-opacity, 1));
   }
+  .hover\:bg-primary:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgba(var(--colors-primary), var(--tw-bg-opacity, 1));
+  }
   .hover\:bg-primary-70:hover {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-primary-70), var(--tw-bg-opacity, 1));
   }
+  .hover\:bg-primary\/5:hover {
+    background-color: rgba(var(--colors-primary), 0.05);
+  }
   .hover\:bg-white:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -8059,6 +8211,9 @@ body {
   clip: auto;
   white-space: normal;
 }
+.focus\:pointer-events-auto:focus {
+  pointer-events: auto;
+}
 .focus\:fixed:focus {
   position: fixed;
 }
@@ -8069,6 +8224,9 @@ body {
 .focus\:top-0:focus {
   top: 0rem;
 }
+.focus\:touch-auto:focus {
+  touch-action: auto;
+}
 .focus\:\!border-borderDark:focus {
   --tw-border-opacity: 1 !important;
   border-color: rgba(var(--colors-borderDark), var(--tw-border-opacity, 1)) !important;
@@ -8113,6 +8271,9 @@ body {
 .focus\:underline:focus {
   text-decoration-line: underline;
 }
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
 .focus\:\!shadow-none:focus {
   --tw-shadow: 0 0 #0000 !important;
   --tw-shadow-colored: 0 0 #0000 !important;
@@ -8533,6 +8694,9 @@ body {
   .xsl\:pointer-events-auto {
     pointer-events: auto;
   }
+  .xsl\:\!fixed {
+    position: fixed !important;
+  }
   .xsl\:fixed {
     position: fixed;
   }
@@ -8549,6 +8713,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .xsl\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .xsl\:\!left-0 {
+    left: 0rem !important;
+  }
+  .xsl\:\!top-auto {
+    top: auto !important;
+  }
   .xsl\:bottom-full {
     bottom: 100%;
   }
@@ -8561,6 +8734,9 @@ body {
   .xsl\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .xsl\:right-0 {
+    right: 0rem;
+  }
   .xsl\:top-0 {
     top: 0rem;
   }
@@ -8672,6 +8848,18 @@ body {
   .xsl\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .xsl\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .xsl\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
+  .xsl\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .xsl\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -8680,6 +8868,26 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .xsl\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .xsl\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+  .xsl\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .xsl\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .xsl\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .xsl\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .xsl\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -8704,6 +8912,12 @@ body {
   .xsl\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .xsl\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .xsl\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .xsl\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
@@ -8728,6 +8942,9 @@ body {
   .xsl\:mr-\[0\.25rem\] {
     margin-right: 0.25rem;
   }
+  .xsl\:mt-1 {
+    margin-top: 0.375rem;
+  }
   .xsl\:mt-2 {
     margin-top: 0.75rem;
   }
@@ -8748,6 +8965,9 @@ body {
   .xsl\:inline-flex {
     display: inline-flex;
   }
+  .xsl\:hidden {
+    display: none;
+  }
   .xsl\:size-15 {
     width: 5.625rem;
     height: 5.625rem;
@@ -8836,6 +9056,18 @@ body {
   .xsl\:min-h-12 {
     min-height: 4.5rem;
   }
+  .xsl\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .xsl\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .xsl\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .xsl\:min-h-8 {
+    min-height: 3rem;
+  }
   .xsl\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -8935,6 +9167,14 @@ body {
   .xsl\:flex-1 {
     flex: 1 1 0%;
   }
+  .xsl\:-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  .xsl\:translate-x-1\/2 {
+    --tw-translate-x: 50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
   .xsl\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -8967,12 +9207,42 @@ body {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+  .xsl\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .xsl\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .xsl\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .xsl\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .xsl\:cursor-pointer {
     cursor: pointer;
   }
+  .xsl\:touch-none {
+    touch-action: none;
+  }
   .xsl\:list-decimal {
     list-style-type: decimal;
   }
@@ -9006,9 +9276,15 @@ body {
   .xsl\:justify-between {
     justify-content: space-between;
   }
+  .xsl\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .xsl\:gap-2 {
     gap: 0.75rem;
   }
+  .xsl\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .xsl\:gap-3 {
     gap: 1.125rem;
   }
@@ -9024,6 +9300,9 @@ body {
   .xsl\:self-center {
     align-self: center;
   }
+  .xsl\:overflow-auto {
+    overflow: auto;
+  }
   .xsl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -9070,6 +9349,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .xsl\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .xsl\:border {
     border-width: 1px;
   }
@@ -9214,6 +9497,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .xsl\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .xsl\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -9295,6 +9581,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .xsl\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .xsl\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -9319,6 +9609,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .xsl\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .xsl\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -9335,14 +9629,26 @@ body {
     padding-left: 0.4375rem;
     padding-right: 0.4375rem;
   }
+  .xsl\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .xsl\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .xsl\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .xsl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .xsl\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .xsl\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -9360,6 +9666,9 @@ body {
   .xsl\:pb-12 {
     padding-bottom: 4.5rem;
   }
+  .xsl\:pb-3 {
+    padding-bottom: 1.125rem;
+  }
   .xsl\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -9534,6 +9843,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .xsl\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .xsl\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -9545,6 +9858,12 @@ body {
   .xsl\:underline {
     text-decoration-line: underline;
   }
+  .xsl\:opacity-0 {
+    opacity: 0;
+  }
+  .xsl\:opacity-100 {
+    opacity: 1;
+  }
   .xsl\:opacity-50 {
     opacity: 0.5;
   }
@@ -9553,6 +9872,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .xsl\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .xsl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -9836,6 +10160,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .xsl\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .xsl\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .xsl\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .xsl\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));
@@ -10048,6 +10381,9 @@ body {
   .sm\:pointer-events-auto {
     pointer-events: auto;
   }
+  .sm\:\!fixed {
+    position: fixed !important;
+  }
   .sm\:fixed {
     position: fixed;
   }
@@ -10069,6 +10405,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .sm\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .sm\:\!left-0 {
+    left: 0rem !important;
+  }
+  .sm\:\!top-auto {
+    top: auto !important;
+  }
   .sm\:bottom-full {
     bottom: 100%;
   }
@@ -10081,6 +10426,9 @@ body {
   .sm\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .sm\:right-0 {
+    right: 0rem;
+  }
   .sm\:top-0 {
     top: 0rem;
   }
@@ -10189,6 +10537,18 @@ body {
   .sm\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .sm\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .sm\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
+  .sm\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .sm\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -10197,9 +10557,29 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .sm\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .sm\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
   .sm\:-ml-4 {
     margin-left: -1.5rem;
   }
+  .sm\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .sm\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .sm\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .sm\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .sm\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -10227,6 +10607,12 @@ body {
   .sm\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .sm\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .sm\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .sm\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
@@ -10251,6 +10637,9 @@ body {
   .sm\:mr-\[0\.25rem\] {
     margin-right: 0.25rem;
   }
+  .sm\:mt-1 {
+    margin-top: 0.375rem;
+  }
   .sm\:mt-2 {
     margin-top: 0.75rem;
   }
@@ -10376,6 +10765,18 @@ body {
   .sm\:min-h-12 {
     min-height: 4.5rem;
   }
+  .sm\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .sm\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .sm\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .sm\:min-h-8 {
+    min-height: 3rem;
+  }
   .sm\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -10478,6 +10879,14 @@ body {
   .sm\:flex-1 {
     flex: 1 1 0%;
   }
+  .sm\:-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  .sm\:translate-x-1\/2 {
+    --tw-translate-x: 50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
   .sm\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -10510,12 +10919,42 @@ body {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+  .sm\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .sm\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .sm\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .sm\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .sm\:cursor-pointer {
     cursor: pointer;
   }
+  .sm\:touch-none {
+    touch-action: none;
+  }
   .sm\:list-decimal {
     list-style-type: decimal;
   }
@@ -10549,9 +10988,15 @@ body {
   .sm\:justify-between {
     justify-content: space-between;
   }
+  .sm\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .sm\:gap-2 {
     gap: 0.75rem;
   }
+  .sm\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .sm\:gap-3 {
     gap: 1.125rem;
   }
@@ -10567,6 +11012,9 @@ body {
   .sm\:self-center {
     align-self: center;
   }
+  .sm\:overflow-auto {
+    overflow: auto;
+  }
   .sm\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -10613,6 +11061,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .sm\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .sm\:border {
     border-width: 1px;
   }
@@ -10757,6 +11209,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .sm\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .sm\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -10841,6 +11296,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .sm\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .sm\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -10865,6 +11324,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .sm\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .sm\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -10889,14 +11352,26 @@ body {
     padding-left: 0.4375rem;
     padding-right: 0.4375rem;
   }
+  .sm\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .sm\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .sm\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .sm\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .sm\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .sm\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -10918,6 +11393,9 @@ body {
   .sm\:pb-12 {
     padding-bottom: 4.5rem;
   }
+  .sm\:pb-3 {
+    padding-bottom: 1.125rem;
+  }
   .sm\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -11100,6 +11578,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .sm\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .sm\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -11111,6 +11593,12 @@ body {
   .sm\:underline {
     text-decoration-line: underline;
   }
+  .sm\:opacity-0 {
+    opacity: 0;
+  }
+  .sm\:opacity-100 {
+    opacity: 1;
+  }
   .sm\:opacity-50 {
     opacity: 0.5;
   }
@@ -11119,6 +11607,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .sm\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .sm\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -11402,6 +11895,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .sm\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .sm\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .sm\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .sm\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));
@@ -11690,6 +12192,9 @@ body {
   .md\:pointer-events-auto {
     pointer-events: auto;
   }
+  .md\:\!fixed {
+    position: fixed !important;
+  }
   .md\:fixed {
     position: fixed;
   }
@@ -11706,6 +12211,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .md\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .md\:\!left-0 {
+    left: 0rem !important;
+  }
+  .md\:\!top-auto {
+    top: auto !important;
+  }
   .md\:bottom-full {
     bottom: 100%;
   }
@@ -11718,6 +12232,9 @@ body {
   .md\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .md\:right-0 {
+    right: 0rem;
+  }
   .md\:top-0 {
     top: 0rem;
   }
@@ -11830,10 +12347,22 @@ body {
     margin-left: -1.125rem;
     margin-right: -1.125rem;
   }
+  .md\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .md\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
   .md\:-my-3 {
     margin-top: -1.125rem;
     margin-bottom: -1.125rem;
   }
+  .md\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .md\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -11842,9 +12371,29 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .md\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .md\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
   .md\:-ml-3 {
     margin-left: -1.125rem;
   }
+  .md\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .md\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .md\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .md\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .md\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -11872,6 +12421,12 @@ body {
   .md\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .md\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .md\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .md\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
@@ -12016,6 +12571,18 @@ body {
   .md\:min-h-12 {
     min-height: 4.5rem;
   }
+  .md\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .md\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .md\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .md\:min-h-8 {
+    min-height: 3rem;
+  }
   .md\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -12115,6 +12682,14 @@ body {
   .md\:flex-1 {
     flex: 1 1 0%;
   }
+  .md\:-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  .md\:translate-x-1\/2 {
+    --tw-translate-x: 50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
   .md\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -12147,12 +12722,42 @@ body {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+  .md\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .md\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .md\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .md\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .md\:cursor-pointer {
     cursor: pointer;
   }
+  .md\:touch-none {
+    touch-action: none;
+  }
   .md\:list-decimal {
     list-style-type: decimal;
   }
@@ -12186,9 +12791,15 @@ body {
   .md\:justify-between {
     justify-content: space-between;
   }
+  .md\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .md\:gap-2 {
     gap: 0.75rem;
   }
+  .md\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .md\:gap-3 {
     gap: 1.125rem;
   }
@@ -12204,6 +12815,9 @@ body {
   .md\:self-center {
     align-self: center;
   }
+  .md\:overflow-auto {
+    overflow: auto;
+  }
   .md\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -12253,6 +12867,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .md\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .md\:border {
     border-width: 1px;
   }
@@ -12397,6 +13015,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .md\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .md\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -12496,6 +13117,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .md\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .md\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -12520,6 +13145,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .md\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .md\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -12552,14 +13181,26 @@ body {
     padding-left: 2.875rem;
     padding-right: 2.875rem;
   }
+  .md\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .md\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .md\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .md\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .md\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .md\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -12571,6 +13212,9 @@ body {
   .md\:pb-12 {
     padding-bottom: 4.5rem;
   }
+  .md\:pb-3 {
+    padding-bottom: 1.125rem;
+  }
   .md\:pb-4 {
     padding-bottom: 1.5rem;
   }
@@ -12748,6 +13392,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .md\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .md\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -12759,6 +13407,12 @@ body {
   .md\:underline {
     text-decoration-line: underline;
   }
+  .md\:opacity-0 {
+    opacity: 0;
+  }
+  .md\:opacity-100 {
+    opacity: 1;
+  }
   .md\:opacity-50 {
     opacity: 0.5;
   }
@@ -12767,6 +13421,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .md\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .md\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -13050,6 +13709,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .md\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .md\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .md\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .md\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));
@@ -13343,6 +14011,9 @@ body {
   .lg\:pointer-events-auto {
     pointer-events: auto;
   }
+  .lg\:\!fixed {
+    position: fixed !important;
+  }
   .lg\:fixed {
     position: fixed;
   }
@@ -13359,6 +14030,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .lg\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .lg\:\!left-0 {
+    left: 0rem !important;
+  }
+  .lg\:\!top-auto {
+    top: auto !important;
+  }
   .lg\:bottom-full {
     bottom: 100%;
   }
@@ -13371,6 +14051,9 @@ body {
   .lg\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .lg\:right-0 {
+    right: 0rem;
+  }
   .lg\:top-0 {
     top: 0rem;
   }
@@ -13479,6 +14162,18 @@ body {
   .lg\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .lg\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .lg\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
+  .lg\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .lg\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -13487,6 +14182,26 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .lg\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .lg\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+  .lg\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .lg\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .lg\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .lg\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .lg\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -13516,6 +14231,12 @@ body {
   .lg\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .lg\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .lg\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .lg\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
@@ -13543,6 +14264,9 @@ body {
   .lg\:mr-\[300px\] {
     margin-right: 300px;
   }
+  .lg\:mt-1 {
+    margin-top: 0.375rem;
+  }
   .lg\:mt-2 {
     margin-top: 0.75rem;
   }
@@ -13558,6 +14282,9 @@ body {
   .lg\:inline-flex {
     display: inline-flex;
   }
+  .lg\:hidden {
+    display: none;
+  }
   .lg\:size-15 {
     width: 5.625rem;
     height: 5.625rem;
@@ -13646,6 +14373,18 @@ body {
   .lg\:min-h-12 {
     min-height: 4.5rem;
   }
+  .lg\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .lg\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .lg\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .lg\:min-h-8 {
+    min-height: 3rem;
+  }
   .lg\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -13745,6 +14484,14 @@ body {
   .lg\:flex-1 {
     flex: 1 1 0%;
   }
+  .lg\:-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  .lg\:translate-x-1\/2 {
+    --tw-translate-x: 50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
   .lg\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -13777,12 +14524,42 @@ body {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+  .lg\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .lg\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .lg\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .lg\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .lg\:cursor-pointer {
     cursor: pointer;
   }
+  .lg\:touch-none {
+    touch-action: none;
+  }
   .lg\:list-decimal {
     list-style-type: decimal;
   }
@@ -13816,9 +14593,15 @@ body {
   .lg\:justify-between {
     justify-content: space-between;
   }
+  .lg\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .lg\:gap-2 {
     gap: 0.75rem;
   }
+  .lg\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .lg\:gap-3 {
     gap: 1.125rem;
   }
@@ -13834,6 +14617,9 @@ body {
   .lg\:self-center {
     align-self: center;
   }
+  .lg\:overflow-auto {
+    overflow: auto;
+  }
   .lg\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -13880,6 +14666,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .lg\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .lg\:border {
     border-width: 1px;
   }
@@ -14024,6 +14814,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .lg\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .lg\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -14115,6 +14908,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .lg\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .lg\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -14143,6 +14940,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .lg\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .lg\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -14163,14 +14964,26 @@ body {
     padding-left: 3.125rem;
     padding-right: 3.125rem;
   }
+  .lg\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .lg\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .lg\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .lg\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .lg\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .lg\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -14182,6 +14995,9 @@ body {
   .lg\:pb-12 {
     padding-bottom: 4.5rem;
   }
+  .lg\:pb-3 {
+    padding-bottom: 1.125rem;
+  }
   .lg\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -14356,6 +15172,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .lg\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .lg\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -14367,6 +15187,12 @@ body {
   .lg\:underline {
     text-decoration-line: underline;
   }
+  .lg\:opacity-0 {
+    opacity: 0;
+  }
+  .lg\:opacity-100 {
+    opacity: 1;
+  }
   .lg\:opacity-50 {
     opacity: 0.5;
   }
@@ -14375,6 +15201,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .lg\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .lg\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -14658,6 +15489,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .lg\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .lg\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .lg\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .lg\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));
@@ -14913,6 +15753,9 @@ body {
   .xl\:pointer-events-auto {
     pointer-events: auto;
   }
+  .xl\:\!fixed {
+    position: fixed !important;
+  }
   .xl\:fixed {
     position: fixed;
   }
@@ -14929,6 +15772,15 @@ body {
     left: 0rem;
     right: 0rem;
   }
+  .xl\:\!bottom-0 {
+    bottom: 0rem !important;
+  }
+  .xl\:\!left-0 {
+    left: 0rem !important;
+  }
+  .xl\:\!top-auto {
+    top: auto !important;
+  }
   .xl\:bottom-full {
     bottom: 100%;
   }
@@ -14941,6 +15793,9 @@ body {
   .xl\:left-\[0\.25rem\] {
     left: 0.25rem;
   }
+  .xl\:right-0 {
+    right: 0rem;
+  }
   .xl\:top-0 {
     top: 0rem;
   }
@@ -15049,6 +15904,18 @@ body {
   .xl\:row-span-6 {
     grid-row: span 6 / span 6;
   }
+  .xl\:-my-0\.5 {
+    margin-top: -0.1875rem;
+    margin-bottom: -0.1875rem;
+  }
+  .xl\:-my-1\.5 {
+    margin-top: -0.5625rem;
+    margin-bottom: -0.5625rem;
+  }
+  .xl\:mx-\[-8vw\] {
+    margin-left: -8vw;
+    margin-right: -8vw;
+  }
   .xl\:my-1 {
     margin-top: 0.375rem;
     margin-bottom: 0.375rem;
@@ -15057,6 +15924,26 @@ body {
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
   }
+  .xl\:my-\[-0\.3125rem\] {
+    margin-top: -0.3125rem;
+    margin-bottom: -0.3125rem;
+  }
+  .xl\:my-\[-0\.5rem\] {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+  .xl\:-mr-1\.5 {
+    margin-right: -0.5625rem;
+  }
+  .xl\:-mr-2 {
+    margin-right: -0.75rem;
+  }
+  .xl\:-mr-2\.5 {
+    margin-right: -0.9375rem;
+  }
+  .xl\:-mr-3 {
+    margin-right: -1.125rem;
+  }
   .xl\:-mt-1 {
     margin-top: -0.375rem;
   }
@@ -15081,6 +15968,12 @@ body {
   .xl\:mb-5 {
     margin-bottom: 1.875rem;
   }
+  .xl\:mb-\[-0\.25rem\] {
+    margin-bottom: -0.25rem;
+  }
+  .xl\:mb-\[-0\.625rem\] {
+    margin-bottom: -0.625rem;
+  }
   .xl\:mb-\[-1px\] {
     margin-bottom: -1px;
   }
@@ -15105,6 +15998,9 @@ body {
   .xl\:mr-\[0\.25rem\] {
     margin-right: 0.25rem;
   }
+  .xl\:mt-1 {
+    margin-top: 0.375rem;
+  }
   .xl\:mt-2 {
     margin-top: 0.75rem;
   }
@@ -15120,6 +16016,9 @@ body {
   .xl\:inline-flex {
     display: inline-flex;
   }
+  .xl\:hidden {
+    display: none;
+  }
   .xl\:size-15 {
     width: 5.625rem;
     height: 5.625rem;
@@ -15208,6 +16107,18 @@ body {
   .xl\:min-h-12 {
     min-height: 4.5rem;
   }
+  .xl\:min-h-5 {
+    min-height: 1.875rem;
+  }
+  .xl\:min-h-6 {
+    min-height: 2.25rem;
+  }
+  .xl\:min-h-7 {
+    min-height: 2.625rem;
+  }
+  .xl\:min-h-8 {
+    min-height: 3rem;
+  }
   .xl\:min-h-9 {
     min-height: 3.375rem;
   }
@@ -15299,6 +16210,14 @@ body {
   .xl\:flex-1 {
     flex: 1 1 0%;
   }
+  .xl\:-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  .xl\:translate-x-1\/2 {
+    --tw-translate-x: 50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
   .xl\:translate-x-\[-6px\] {
     --tw-translate-x: -6px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -15331,12 +16250,42 @@ body {
     --tw-rotate: -44deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
+  .xl\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  .xl\:animate-fadeIn {
+    animation: fadeIn 0.2s ease;
+  }
+  @keyframes slideUp {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .xl\:animate-slideUp {
+    animation: slideUp 0.4s ease;
+  }
   .xl\:cursor-not-allowed {
     cursor: not-allowed;
   }
   .xl\:cursor-pointer {
     cursor: pointer;
   }
+  .xl\:touch-none {
+    touch-action: none;
+  }
   .xl\:list-decimal {
     list-style-type: decimal;
   }
@@ -15370,9 +16319,15 @@ body {
   .xl\:justify-between {
     justify-content: space-between;
   }
+  .xl\:gap-1\.5 {
+    gap: 0.5625rem;
+  }
   .xl\:gap-2 {
     gap: 0.75rem;
   }
+  .xl\:gap-2\.5 {
+    gap: 0.9375rem;
+  }
   .xl\:gap-3 {
     gap: 1.125rem;
   }
@@ -15388,6 +16343,9 @@ body {
   .xl\:self-center {
     align-self: center;
   }
+  .xl\:overflow-auto {
+    overflow: auto;
+  }
   .xl\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -15434,6 +16392,10 @@ body {
     border-top-right-radius: 0.1875rem;
     border-bottom-right-radius: 0.1875rem;
   }
+  .xl\:rounded-t {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
   .xl\:border {
     border-width: 1px;
   }
@@ -15578,6 +16540,9 @@ body {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-background), var(--tw-bg-opacity, 1));
   }
+  .xl\:bg-black\/20 {
+    background-color: rgb(0 0 0 / 0.2);
+  }
   .xl\:bg-border {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-border), var(--tw-bg-opacity, 1));
@@ -15659,6 +16624,10 @@ body {
     padding-left: 0rem;
     padding-right: 0rem;
   }
+  .xl\:px-0\.5 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
   .xl\:px-1 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
@@ -15683,6 +16652,10 @@ body {
     padding-left: 1.125rem;
     padding-right: 1.125rem;
   }
+  .xl\:px-3\.5 {
+    padding-left: 1.3125rem;
+    padding-right: 1.3125rem;
+  }
   .xl\:px-4 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -15699,14 +16672,26 @@ body {
     padding-left: 0.4375rem;
     padding-right: 0.4375rem;
   }
+  .xl\:px-\[8\%\] {
+    padding-left: 8%;
+    padding-right: 8%;
+  }
   .xl\:py-1\.5 {
     padding-top: 0.5625rem;
     padding-bottom: 0.5625rem;
   }
+  .xl\:py-2 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
   .xl\:py-3 {
     padding-top: 1.125rem;
     padding-bottom: 1.125rem;
   }
+  .xl\:py-\[0\.25rem\] {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .xl\:py-\[0\.3125rem\] {
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
@@ -15718,6 +16703,9 @@ body {
   .xl\:pb-12 {
     padding-bottom: 4.5rem;
   }
+  .xl\:pb-3 {
+    padding-bottom: 1.125rem;
+  }
   .xl\:pb-5 {
     padding-bottom: 1.875rem;
   }
@@ -15892,6 +16880,10 @@ body {
     --tw-text-opacity: 1;
     color: rgba(var(--colors-text-10), var(--tw-text-opacity, 1));
   }
+  .xl\:text-text-50 {
+    --tw-text-opacity: 1;
+    color: rgba(var(--colors-text-50), var(--tw-text-opacity, 1));
+  }
   .xl\:text-warning {
     --tw-text-opacity: 1;
     color: rgb(197 59 0 / var(--tw-text-opacity, 1));
@@ -15903,6 +16895,12 @@ body {
   .xl\:underline {
     text-decoration-line: underline;
   }
+  .xl\:opacity-0 {
+    opacity: 0;
+  }
+  .xl\:opacity-100 {
+    opacity: 1;
+  }
   .xl\:opacity-50 {
     opacity: 0.5;
   }
@@ -15911,6 +16909,11 @@ body {
     --tw-shadow-colored: inset 0 0 0 2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+  .xl\:shadow-\[0_5px_10px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
+    --tw-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    --tw-shadow-colored: 0 5px 10px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
   .xl\:shadow-\[inset_0px_1px_0_0_var\(--tw-shadow-color\)\2c inset_0_-1px_0_0_var\(--tw-shadow-color\)\] {
     --tw-shadow: inset 0px 1px 0 0 var(--tw-shadow-color),inset 0 -1px 0 0 var(--tw-shadow-color);
     --tw-shadow-colored: inset 0px 1px 0 0 var(--tw-shadow-color), inset 0 -1px 0 0 var(--tw-shadow-color);
@@ -16194,6 +17197,15 @@ body {
       background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
   }
+  .xl\:focus\:pointer-events-auto:focus {
+    pointer-events: auto;
+  }
+  .xl\:focus\:touch-auto:focus {
+    touch-action: auto;
+  }
+  .xl\:focus\:opacity-100:focus {
+    opacity: 1;
+  }
   .xl\:active\:bg-hero-50:active {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--colors-hero-50), var(--tw-bg-opacity, 1));