/* @import 'components/audiobook.card.scss';
@import 'components/audiobook.single.scss';
@import 'components/page.audiobook.scss';
@import 'components/playlist.standard.scss'; 
@import 'components/marketing.banner.scss';
@import 'components/slider.banners.scss';
@import 'components/slider.audiobooks.scss'; */
[x-cloak] {
  display: none !important;
}

.splide__pagination__page.is-active {
  background: #333;
}

body {
  font-family: "Inter", sans-serif;
}

.font-brand-headline {
  font-family: "InterDisplay", sans-serif;
  font-weight: 600;
}

.font-brand-text {
  font-family: "Inter Text", sans-serif;
}

.font-semibold {
  font-weight: 600;
}

.text-huge {
  font-size: 10rem;
  line-height: 1;
}

.hover\:scale-102:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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));
}

.group-hover\:scale-102:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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));
}

.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.sidebar-left {
  width: 230px;
  height: 100%;
  max-width: 330px;
  min-width: 230px;
}

.hairline {
  height: 1px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
}

:is(.dark .hairline) {
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
}

.ab-grid {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .ab-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .ab-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ab-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .ab-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .ab-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ab-grid-5 {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .ab-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .ab-grid-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ab-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .ab-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .ab-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.ab-grid-4 {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .ab-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .ab-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ab-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .ab-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .ab-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ab-grid-no-padding {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .ab-grid-no-padding {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .ab-grid-no-padding {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ab-grid-no-padding {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .ab-grid-no-padding {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .ab-grid-no-padding {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.ab-grid-search {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .ab-grid-search {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .ab-grid-search {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ab-grid-search {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .ab-grid-search {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .ab-grid-search {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.cluster-grid {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .cluster-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .cluster-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cluster-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .cluster-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .cluster-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.cluster-grid-5 {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .cluster-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .cluster-grid-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cluster-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .cluster-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .cluster-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.card-grid {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding: 0.75rem;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.nav-grid {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (min-width: 640px) {
  .nav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .nav-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .nav-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .nav-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .nav-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.nav-icon {
  margin-right: 0.5rem;
  height: 1.25rem;
  width: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(142 142 147 / var(--tw-text-opacity));
}

:is(.dark .nav-icon) {
  --tw-text-opacity: 1;
  color: rgb(142 142 147 / var(--tw-text-opacity));
}

.stage-grid {
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .stage-grid {
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* .stage-grid {
    @apply grid w-full grid-cols-1 gap-6 sm:gap-8 px-6 sm:px-0 mt-12 sm:grid-cols-2 sm:mx-auto max-w-7xl;
} */
.detail-grid {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.75rem;
}
@media (min-width: 640px) {
  .detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .detail-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .detail-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {
  .detail-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.detail-grid-mobile {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  max-width: 80rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0.75rem;
}

.text-green {
  --tw-text-opacity: 1;
  color: rgb(50 199 89 / var(--tw-text-opacity));
}

:is(.dark .text-green) {
  --tw-text-opacity: 1;
  color: rgb(50 215 75 / var(--tw-text-opacity));
}

.text-yellow {
  --tw-text-opacity: 1;
  color: rgb(255 204 0 / var(--tw-text-opacity));
}

:is(.dark .text-yellow) {
  --tw-text-opacity: 1;
  color: rgb(255 214 10 / var(--tw-text-opacity));
}

.text-blue {
  --tw-text-opacity: 1;
  color: rgb(0 122 255 / var(--tw-text-opacity));
}

:is(.dark .text-blue) {
  --tw-text-opacity: 1;
  color: rgb(10 132 255 / var(--tw-text-opacity));
}

.text-pink {
  --tw-text-opacity: 1;
  color: rgb(255 55 95 / var(--tw-text-opacity));
}

:is(.dark .text-pink) {
  --tw-text-opacity: 1;
  color: rgb(255 55 95 / var(--tw-text-opacity));
}

.bg-scheme {
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
}

:is(.dark .bg-scheme) {
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
}

.bg-scheme-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
}

:is(.dark .bg-scheme-hover:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
}

.bg-scheme-hover-4:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 209 214 / var(--tw-bg-opacity));
}

:is(.dark .bg-scheme-hover-4:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 60 / var(--tw-bg-opacity));
}

.bg-scheme-5 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
}

:is(.dark .bg-scheme-5) {
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
}

.bg-scheme-bw {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

:is(.dark .bg-scheme-bw) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-scheme-invert {
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
}

:is(.dark .bg-scheme-invert) {
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
}

.text-scheme {
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

:is(.dark .text-scheme) {
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

.text-scheme-5 {
  --tw-text-opacity: 1;
  color: rgb(44 44 46 / var(--tw-text-opacity));
}

:is(.dark .text-scheme-5) {
  --tw-text-opacity: 1;
  color: rgb(229 229 234 / var(--tw-text-opacity));
}

.text-scheme-4 {
  --tw-text-opacity: 1;
  color: rgb(58 58 60 / var(--tw-text-opacity));
}

:is(.dark .text-scheme-4) {
  --tw-text-opacity: 1;
  color: rgb(209 209 214 / var(--tw-text-opacity));
}

.text-scheme-3 {
  --tw-text-opacity: 1;
  color: rgb(72 72 74 / var(--tw-text-opacity));
}

:is(.dark .text-scheme-3) {
  --tw-text-opacity: 1;
  color: rgb(199 199 204 / var(--tw-text-opacity));
}

.text-scheme-2 {
  --tw-text-opacity: 1;
  color: rgb(99 99 102 / var(--tw-text-opacity));
}

:is(.dark .text-scheme-2) {
  --tw-text-opacity: 1;
  color: rgb(174 174 178 / var(--tw-text-opacity));
}

.text-scheme-1 {
  --tw-text-opacity: 1;
  color: rgb(142 142 147 / var(--tw-text-opacity));
}

:is(.dark .text-scheme-1) {
  --tw-text-opacity: 1;
  color: rgb(142 142 147 / var(--tw-text-opacity));
}

.text-scheme-invert {
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .text-scheme-invert) {
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

.border-scheme {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
}

:is(.dark .border-scheme) {
  --tw-border-opacity: 1;
  border-color: rgb(44 44 46 / var(--tw-border-opacity));
}

.border-scheme-4 {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(209 209 214 / var(--tw-border-opacity));
}

:is(.dark .border-scheme-4) {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 60 / var(--tw-border-opacity));
}

.hover-scale {
  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));
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}

.theme-button-hover {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
  font-weight: 600;
}

.theme-button-hover:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 209 214 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
}

:is(.dark .theme-button-hover) {
  --tw-border-opacity: 1;
  border-color: rgb(44 44 46 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .theme-button-hover:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 60 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
}

.theme-button-hover-fuchsia {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(232 121 249 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 70 239 / var(--tw-bg-opacity));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  font-weight: 600;
}

.theme-button-hover-fuchsia:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(192 38 211 / var(--tw-bg-opacity));
}

.theme-button-hover-green {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  font-weight: 600;
}

.theme-button-hover-green:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.theme-button-hover-blue {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  font-weight: 600;
}

.theme-button-hover-blue:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.theme-button-hover-rec {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
  font-weight: 600;
}

.theme-button-hover-rec:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 209 214 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
}

:is(.dark .theme-button-hover-rec) {
  --tw-border-opacity: 1;
  border-color: rgb(44 44 46 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .theme-button-hover-rec:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 60 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
}

.theme-button-hover-active {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(64 200 224 / var(--tw-bg-opacity));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
  font-weight: 600;
}

.theme-button-hover-active:hover {
  --tw-border-opacity: 1;
  border-color: rgb(165 243 252 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
}

.theme-button-hover-req {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
  font-weight: 600;
}

.theme-button-hover-req:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 209 214 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
}

:is(.dark .theme-button-hover-req) {
  --tw-border-opacity: 1;
  border-color: rgb(44 44 46 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .theme-button-hover-req:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 60 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
}

.theme-button-rectangle-hover {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
  font-weight: 600;
}

.theme-button-rectangle-hover:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 209 214 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
}

:is(.dark .theme-button-rectangle-hover) {
  --tw-border-opacity: 1;
  border-color: rgb(44 44 46 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .theme-button-rectangle-hover:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 60 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
}

.theme-button-hover-rectangle-fuchsia {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(232 121 249 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(217 70 239 / var(--tw-bg-opacity));
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  font-weight: 600;
}

.theme-button-hover-rectangle-fuchsia:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(192 38 211 / var(--tw-bg-opacity));
}

.text-shadow {
  text-shadow: rgba(0, 0, 0, 0.25) 2px 2px 0px;
}

.btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

.group:hover .btn {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
}

:is(.dark .btn) {
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .group:hover .btn) {
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 60 / var(--tw-bg-opacity));
}

.btn-link-check {
  margin-top: 1rem;
  display: inline-flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

.btn-link-check:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 209 214 / var(--tw-bg-opacity));
}

:is(.dark .btn-link-check) {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 60 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .btn-link-check:hover) {
  --tw-bg-opacity: 1;
  background-color: rgb(72 72 74 / var(--tw-bg-opacity));
}

.btn-icon {
  margin-left: 0.75rem;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

.btn-icon:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 209 214 / var(--tw-bg-opacity));
}

:is(.dark .btn-icon) {
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .btn-icon):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 60 / var(--tw-bg-opacity));
}

.btn-icon-only {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

.btn-icon-only:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 209 214 / var(--tw-bg-opacity));
}

:is(.dark .btn-icon-only) {
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .btn-icon-only):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 60 / var(--tw-bg-opacity));
}

.btn-icon-selected {
  margin-left: 0.75rem;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

.btn-icon-selected:hover {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #15803d var(--tw-gradient-to-position);
}

:is(.dark .btn-icon-selected) {
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

.btn-icon-only-selected {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

.btn-icon-only-selected:hover {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #15803d var(--tw-gradient-to-position);
}

:is(.dark .btn-icon-only-selected) {
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

.btn-filter {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

.btn-filter:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 209 214 / var(--tw-bg-opacity));
}

:is(.dark .btn-filter) {
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

:is(.dark .btn-filter):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(58 58 60 / var(--tw-bg-opacity));
}

.btn-rectangle {
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding: 0.75rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(44 44 46 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-rectangle:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}

:is(.dark .btn-rectangle) {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 60 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(229 229 234 / var(--tw-text-opacity));
}
.btn-rectangle .icon {
  margin-left: auto;
  margin-right: auto;
  height: 2rem;
  width: 2rem;
}

.btn-rectangle-active {
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  padding: 0.75rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-rectangle-active:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}
.btn-rectangle-active .icon {
  margin-left: auto;
  margin-right: auto;
  height: 2rem;
  width: 2rem;
}

.btn-round {
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding: 0.75rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(44 44 46 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-round:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}

:is(.dark .btn-round) {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 60 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(229 229 234 / var(--tw-text-opacity));
}
.btn-round .icon {
  margin-left: auto;
  margin-right: auto;
  height: 2rem;
  width: 2rem;
}

.btn-round-active {
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  padding: 0.75rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-round-active:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}
.btn-round-active .icon {
  margin-left: auto;
  margin-right: auto;
  height: 2rem;
  width: 2rem;
}

.button-wrapper {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #f5f5f5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 245 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #d4d4d4 var(--tw-gradient-to-position);
  padding: 0.125rem;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .button-wrapper {
  --tw-gradient-from: #e5e5e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #a3a3a3 var(--tw-gradient-to-position);
}

:is(.dark .button-wrapper) {
  --tw-gradient-from: #48484a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(72 72 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #2c2c2e var(--tw-gradient-to-position);
}

:is(.dark .group:hover .button-wrapper) {
  --tw-gradient-from: #636366 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 99 102 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #3a3a3c var(--tw-gradient-to-position);
}
.button-wrapper .button-inner {
  cursor: pointer;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #f5f5f5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 245 245 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #e5e5e5 var(--tw-gradient-to-position);
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}
.group:hover .button-wrapper .button-inner {
  --tw-gradient-from: #e5e5e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #d4d4d4 var(--tw-gradient-to-position);
}
:is(.dark .button-wrapper .button-inner) {
  --tw-gradient-from: #3a3a3c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(58 58 60 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #2c2c2e var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:is(.dark .group:hover .button-wrapper .button-inner) {
  --tw-gradient-from: #48484a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(72 72 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #3a3a3c var(--tw-gradient-to-position);
}

.inp-standard {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

:is(.dark .inp-standard) {
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .inp-standard {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.inp-select {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

:is(.dark .inp-select) {
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .inp-select {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.version-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
}

:is(.dark .version-chip) {
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

.version-chip-search {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1rem;
}

.tracking-title {
  letter-spacing: 0.3rem;
}

.overflow-y-inherit {
  overflow-y: inherit;
}

.text-10xl {
  font-size: 10rem;
  line-height: 1;
}

.stage-header-height {
  height: 50rem;
}

.footer-shadow {
  box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.1);
}

.footer-shadow-dark {
  box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.5);
}

.cover-blur.loaded > img {
  opacity: 1;
}

.cover-blur > img {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.shop-logo > svg {
  height: 4rem;
  width: auto;
}

.pagination-button {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(28 28 30 / var(--tw-text-opacity));
  font-weight: 600;
}

:is(.dark .pagination-button) {
  --tw-border-opacity: 1;
  border-color: rgb(44 44 46 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
}

.pagination-button-hover:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 209 214 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 234 / var(--tw-bg-opacity));
}

:is(.dark .pagination-button-hover:hover) {
  --tw-border-opacity: 1;
  border-color: rgb(58 58 60 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(44 44 46 / var(--tw-bg-opacity));
}

.pagination-button-active:active {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

:is(.dark .pagination-button-active:active) {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.pagination-button-current-page {
  display: inline-flex;
  align-items: center;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
  font-weight: 600;
}

:is(.dark .pagination-button-current-page) {
  --tw-border-opacity: 1;
  border-color: rgb(44 44 46 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.pagination-dots {
  display: inline-flex;
  align-items: center;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 234 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 247 / var(--tw-bg-opacity));
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(142 142 147 / var(--tw-text-opacity));
  font-weight: 600;
}

:is(.dark .pagination-dots) {
  --tw-border-opacity: 1;
  border-color: rgb(44 44 46 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(142 142 147 / var(--tw-text-opacity));
}

.pill {
  margin-left: 0.5rem;
  display: inline;
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
  border-radius: 0.3rem;
}

@media (min-width: 768px) {
  .pill {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.pill-sm {
  margin-left: 0.5rem;
  display: inline;
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 30 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(242 242 247 / var(--tw-text-opacity));
  border-radius: 0.3rem;
}

@media (min-width: 768px) {
  .pill-sm {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.rounded-box {
  border-radius: 1rem;
}

.rounded-pill {
  border-radius: 0.3rem;
}

.rounded-cover {
  border-radius: 5%;
}

.z-90 {
  z-index: 90;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}
.transition-fade {
  transition: 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

/* tinder */
#cover_swiper {
  height: 30vh;
  aspect-ratio: 1/1;
  perspective: 1000px;
  perspective-origin: center 50%;
  transform-style: preserve-3d;
  position: relative;
}

.cover-card {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  transform: translateZ(calc(-10px * var(--i))) translateY(calc(10px * var(--i))) rotate(calc(-4deg * var(--i)));
  filter: drop-shadow(2px 2px 20px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: transform 0.5s;
}

.cover-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}

#like,
#dislike {
  font-size: 16vh;
  border-radius: 50%;
  padding: 20px;
  position: relative;
  z-index: 1;
  animation-name: animation1;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  /* don't run animation at the beginning */
  animation-play-state: paused;
}

#like.trigger,
#dislike.trigger {
  animation-name: animation2;
}

#like {
  color: red;
  background-color: rgba(255, 255, 255, 0.5);
}

#dislike {
  color: #ccc;
  background-color: rgba(0, 0, 0, 0.5);
}

@keyframes animation1 {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}
@keyframes animation2 {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}
.border-glow {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #000, #272727);
  border-radius: 5%;
}

.border-glow:before,
.border-glow:after {
  content: "";
  position: absolute;
  border-radius: 5%;
  left: -2px;
  top: -2px;
  background: linear-gradient(45deg, #03CCFF, #007C9C, #1DD1FF, #005469, #00A5CF, #03CCFF, #007C9C, #1DD1FF, #005469, #00A5CF);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: steam 20s linear infinite;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 400% 0;
  }
}
.border-glow:after {
  filter: blur(15px);
}

html.is-changing .transition-fade {
  transition: opacity 0.25s;
  opacity: 1;
}

/* Define the styles for the unloaded pages */
html.is-animating .transition-fade {
  opacity: 0;
}