@layer tstdl.base, tstdl.components;
@layer tstdl.base {
:root {
  /* tailwind zinc */
  --tsl-color-neutral-50: 250 250 250;
  --tsl-color-neutral-100: 244 244 245;
  --tsl-color-neutral-200: 228 228 231;
  --tsl-color-neutral-300: 212 212 216;
  --tsl-color-neutral-400: 161 161 170;
  --tsl-color-neutral-500: 113 113 122;
  --tsl-color-neutral-600: 82 82 91;
  --tsl-color-neutral-700: 63 63 70;
  --tsl-color-neutral-800: 39 39 42;
  --tsl-color-neutral-900: 24 24 27;
  --tsl-color-neutral-950: 9 9 11;

  /* tailwind sky */
  --tsl-color-accent-50: 240 249 255;
  --tsl-color-accent-100: 224 242 254;
  --tsl-color-accent-200: 186 230 253;
  --tsl-color-accent-300: 125 211 252;
  --tsl-color-accent-400: 56 189 248;
  --tsl-color-accent-500: 14 165 233;
  --tsl-color-accent-600: 2 132 199;
  --tsl-color-accent-700: 3 105 161;
  --tsl-color-accent-800: 7 89 133;
  --tsl-color-accent-900: 12 74 110;
  --tsl-color-accent-950: 8 47 73;
}

.tsl-tw,
.tsl-tw *,
.tsl-tw ::before,
.tsl-tw ::after,
.tsl-tw::before,
.tsl-tw::after {
  @apply border-neutral-400/75 dark:border-neutral-600/75;
}

.content-grid {
  --content-max: 120ch;
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(var(--content-max), 100% - var(--gap) * 2);
  --popout: minmax(0, 3rem);
  --feature: minmax(0, 8rem);
  --feature-xl: minmax(0, 10rem);

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [feature-xl-start] var(--feature-xl)
    [feature-start] var(--feature)
    [popout-start] var(--popout)
    [content-start] var(--content) [content-end]
    var(--popout) [popout-end]
    var(--feature) [feature-end]
    var(--feature-xl) [feature-xl-end]
    var(--full) [full-end];

  > :not(.popout, .feature, .feature-xl, .full) {
    grid-column: content;
  }

  > .popout {
    grid-column: popout;
  }

  > .feature {
    grid-column: feature;
  }

  > .feature-xl {
    grid-column: feature-xl;
  }

  > .full {
    grid-column: full;
  }
}

.mat-ripple {
  overflow: hidden;
  position: relative;

  &:not(:empty) {
    transform: translateZ(0);
  }
}

.mat-ripple.mat-ripple-unbounded {
  overflow: visible;
}

.mat-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;

  transition:
    opacity,
    transform 0ms cubic-bezier(0, 0, 0.2, 1);

  transform: scale3d(0, 0, 0);
  background-color: rgb(0 0 0 / 0.1);
}


*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  
}

.tsl-tw .pointer-events-none, .tsl-tw.pointer-events-none {
  pointer-events: none
}

.tsl-tw .visible, .tsl-tw.visible {
  visibility: visible
}

.tsl-tw .invisible, .tsl-tw.invisible {
  visibility: hidden
}

.tsl-tw .collapse, .tsl-tw.collapse {
  visibility: collapse
}

.tsl-tw .static, .tsl-tw.static {
  position: static
}

.tsl-tw .fixed, .tsl-tw.fixed {
  position: fixed
}

.tsl-tw .absolute, .tsl-tw.absolute {
  position: absolute
}

.tsl-tw .relative, .tsl-tw.relative {
  position: relative
}

.tsl-tw .sticky, .tsl-tw.sticky {
  position: sticky
}

.tsl-tw .inset-0, .tsl-tw.inset-0 {
  inset: 0px
}

.tsl-tw .inset-2, .tsl-tw.inset-2 {
  inset: 0.5rem
}

.tsl-tw .inset-x-0, .tsl-tw.inset-x-0 {
  left: 0px;
  right: 0px
}

.tsl-tw .bottom-0, .tsl-tw.bottom-0 {
  bottom: 0px
}

.tsl-tw .right-1, .tsl-tw.right-1 {
  right: 0.25rem
}

.tsl-tw .right-2, .tsl-tw.right-2 {
  right: 0.5rem
}

.tsl-tw .top-0, .tsl-tw.top-0 {
  top: 0px
}

.tsl-tw .top-1, .tsl-tw.top-1 {
  top: 0.25rem
}

.tsl-tw .top-2, .tsl-tw.top-2 {
  top: 0.5rem
}

.tsl-tw .isolate, .tsl-tw.isolate {
  isolation: isolate
}

.tsl-tw .col-span-1, .tsl-tw.col-span-1 {
  grid-column: span 1 / span 1
}

.tsl-tw .col-span-10, .tsl-tw.col-span-10 {
  grid-column: span 10 / span 10
}

.tsl-tw .col-span-2, .tsl-tw.col-span-2 {
  grid-column: span 2 / span 2
}

.tsl-tw .col-span-3, .tsl-tw.col-span-3 {
  grid-column: span 3 / span 3
}

.tsl-tw .col-span-4, .tsl-tw.col-span-4 {
  grid-column: span 4 / span 4
}

.tsl-tw .col-span-5, .tsl-tw.col-span-5 {
  grid-column: span 5 / span 5
}

.tsl-tw .col-span-6, .tsl-tw.col-span-6 {
  grid-column: span 6 / span 6
}

.tsl-tw .col-span-7, .tsl-tw.col-span-7 {
  grid-column: span 7 / span 7
}

.tsl-tw .col-span-8, .tsl-tw.col-span-8 {
  grid-column: span 8 / span 8
}

.tsl-tw .col-span-9, .tsl-tw.col-span-9 {
  grid-column: span 9 / span 9
}

.tsl-tw .col-start-2, .tsl-tw.col-start-2 {
  grid-column-start: 2
}

.tsl-tw .row-span-1, .tsl-tw.row-span-1 {
  grid-row: span 1 / span 1
}

.tsl-tw .row-span-10, .tsl-tw.row-span-10 {
  grid-row: span 10 / span 10
}

.tsl-tw .row-span-2, .tsl-tw.row-span-2 {
  grid-row: span 2 / span 2
}

.tsl-tw .row-span-3, .tsl-tw.row-span-3 {
  grid-row: span 3 / span 3
}

.tsl-tw .row-span-4, .tsl-tw.row-span-4 {
  grid-row: span 4 / span 4
}

.tsl-tw .row-span-5, .tsl-tw.row-span-5 {
  grid-row: span 5 / span 5
}

.tsl-tw .row-span-6, .tsl-tw.row-span-6 {
  grid-row: span 6 / span 6
}

.tsl-tw .row-span-7, .tsl-tw.row-span-7 {
  grid-row: span 7 / span 7
}

.tsl-tw .row-span-8, .tsl-tw.row-span-8 {
  grid-row: span 8 / span 8
}

.tsl-tw .row-span-9, .tsl-tw.row-span-9 {
  grid-row: span 9 / span 9
}

.tsl-tw .-mx-6, .tsl-tw.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem
}

.tsl-tw .-my-5, .tsl-tw.-my-5 {
  margin-top: -1.25rem;
  margin-bottom: -1.25rem
}

.tsl-tw .my-0\.5, .tsl-tw.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem
}

.tsl-tw .my-1\.5, .tsl-tw.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem
}

.tsl-tw .my-6, .tsl-tw.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem
}

.tsl-tw .-mb-5, .tsl-tw.-mb-5 {
  margin-bottom: -1.25rem
}

.tsl-tw .-ml-6, .tsl-tw.-ml-6 {
  margin-left: -1.5rem
}

.tsl-tw .-mr-6, .tsl-tw.-mr-6 {
  margin-right: -1.5rem
}

.tsl-tw .-mt-5, .tsl-tw.-mt-5 {
  margin-top: -1.25rem
}

.tsl-tw .mb-2, .tsl-tw.mb-2 {
  margin-bottom: 0.5rem
}

.tsl-tw .ml-3, .tsl-tw.ml-3 {
  margin-left: 0.75rem
}

.tsl-tw .mt-1, .tsl-tw.mt-1 {
  margin-top: 0.25rem
}

.tsl-tw .mt-2, .tsl-tw.mt-2 {
  margin-top: 0.5rem
}

.tsl-tw .mt-4, .tsl-tw.mt-4 {
  margin-top: 1rem
}

.tsl-tw .mt-8, .tsl-tw.mt-8 {
  margin-top: 2rem
}

.tsl-tw .block, .tsl-tw.block {
  display: block
}

.tsl-tw .flex, .tsl-tw.flex {
  display: flex
}

.tsl-tw .table, .tsl-tw.table {
  display: table
}

.tsl-tw .grid, .tsl-tw.grid {
  display: grid
}

.tsl-tw .contents, .tsl-tw.contents {
  display: contents
}

.tsl-tw .hidden, .tsl-tw.hidden {
  display: none
}

.tsl-tw .h-0, .tsl-tw.h-0 {
  height: 0px
}

.tsl-tw .h-1\.5, .tsl-tw.h-1\.5 {
  height: 0.375rem
}

.tsl-tw .h-4, .tsl-tw.h-4 {
  height: 1rem
}

.tsl-tw .h-64, .tsl-tw.h-64 {
  height: 16rem
}

.tsl-tw .h-\[2px\], .tsl-tw.h-\[2px\] {
  height: 2px
}

.tsl-tw .h-\[50rem\], .tsl-tw.h-\[50rem\] {
  height: 50rem
}

.tsl-tw .h-auto, .tsl-tw.h-auto {
  height: auto
}

.tsl-tw .h-full, .tsl-tw.h-full {
  height: 100%
}

.tsl-tw .max-h-0, .tsl-tw.max-h-0 {
  max-height: 0px
}

.tsl-tw .max-h-96, .tsl-tw.max-h-96 {
  max-height: 24rem
}

.tsl-tw .min-h-0, .tsl-tw.min-h-0 {
  min-height: 0px
}

.tsl-tw .w-1\.5, .tsl-tw.w-1\.5 {
  width: 0.375rem
}

.tsl-tw .w-1\/2, .tsl-tw.w-1\/2 {
  width: 50%
}

.tsl-tw .w-12, .tsl-tw.w-12 {
  width: 3rem
}

.tsl-tw .w-4, .tsl-tw.w-4 {
  width: 1rem
}

.tsl-tw .w-8, .tsl-tw.w-8 {
  width: 2rem
}

.tsl-tw .w-96, .tsl-tw.w-96 {
  width: 24rem
}

.tsl-tw .w-full, .tsl-tw.w-full {
  width: 100%
}

.tsl-tw .min-w-24, .tsl-tw.min-w-24 {
  min-width: 6rem
}

.tsl-tw .max-w-\[45ch\], .tsl-tw.max-w-\[45ch\] {
  max-width: 45ch
}

.tsl-tw .flex-grow, .tsl-tw.flex-grow {
  flex-grow: 1
}

.tsl-tw .grow, .tsl-tw.grow {
  flex-grow: 1
}

.tsl-tw .transform, .tsl-tw.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))
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1)
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1)
  }
}

.tsl-tw .animate-bounce, .tsl-tw.animate-bounce {
  animation: bounce 1s infinite
}

@keyframes pulse {
  50% {
    opacity: .5
  }
}

.tsl-tw .animate-pulse, .tsl-tw.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

.tsl-tw .cursor-pointer, .tsl-tw.cursor-pointer {
  cursor: pointer
}

.tsl-tw .cursor-text, .tsl-tw.cursor-text {
  cursor: text
}

.tsl-tw .resize-none, .tsl-tw.resize-none {
  resize: none
}

.tsl-tw .resize, .tsl-tw.resize {
  resize: both
}

.tsl-tw .break-inside-avoid, .tsl-tw.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid
}

.tsl-tw .grid-flow-col, .tsl-tw.grid-flow-col {
  grid-auto-flow: column
}

.tsl-tw .grid-cols-1, .tsl-tw.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr))
}

.tsl-tw .grid-cols-10, .tsl-tw.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr))
}

.tsl-tw .grid-cols-2, .tsl-tw.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.tsl-tw .grid-cols-3, .tsl-tw.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.tsl-tw .grid-cols-4, .tsl-tw.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.tsl-tw .grid-cols-5, .tsl-tw.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.tsl-tw .grid-cols-6, .tsl-tw.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}

.tsl-tw .grid-cols-7, .tsl-tw.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr))
}

.tsl-tw .grid-cols-8, .tsl-tw.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr))
}

.tsl-tw .grid-cols-9, .tsl-tw.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr))
}

.tsl-tw .grid-cols-\[1fr\2c auto\], .tsl-tw.grid-cols-\[1fr\2c auto\] {
  grid-template-columns: 1fr auto
}

.tsl-tw .grid-cols-\[auto\2c 1fr\2c auto\], .tsl-tw.grid-cols-\[auto\2c 1fr\2c auto\] {
  grid-template-columns: auto 1fr auto
}

.tsl-tw .grid-cols-\[auto\2c auto\], .tsl-tw.grid-cols-\[auto\2c auto\] {
  grid-template-columns: auto auto
}

.tsl-tw .grid-cols-\[auto_auto\], .tsl-tw.grid-cols-\[auto_auto\] {
  grid-template-columns: auto auto
}

.tsl-tw .grid-cols-subgrid, .tsl-tw.grid-cols-subgrid {
  grid-template-columns: subgrid
}

.tsl-tw .grid-rows-\[auto\2c auto\], .tsl-tw.grid-rows-\[auto\2c auto\] {
  grid-template-rows: auto auto
}

.tsl-tw .grid-rows-\[repeat\(3\2c auto\)\], .tsl-tw.grid-rows-\[repeat\(3\2c auto\)\] {
  grid-template-rows: repeat(3,auto)
}

.tsl-tw .flex-col, .tsl-tw.flex-col {
  flex-direction: column
}

.tsl-tw .flex-wrap, .tsl-tw.flex-wrap {
  flex-wrap: wrap
}

.tsl-tw .content-end, .tsl-tw.content-end {
  align-content: flex-end
}

.tsl-tw .items-start, .tsl-tw.items-start {
  align-items: flex-start
}

.tsl-tw .items-center, .tsl-tw.items-center {
  align-items: center
}

.tsl-tw .justify-end, .tsl-tw.justify-end {
  justify-content: flex-end
}

.tsl-tw .justify-center, .tsl-tw.justify-center {
  justify-content: center
}

.tsl-tw .justify-between, .tsl-tw.justify-between {
  justify-content: space-between
}

.tsl-tw .gap-1, .tsl-tw.gap-1 {
  gap: 0.25rem
}

.tsl-tw .gap-1\.5, .tsl-tw.gap-1\.5 {
  gap: 0.375rem
}

.tsl-tw .gap-2, .tsl-tw.gap-2 {
  gap: 0.5rem
}

.tsl-tw .gap-4, .tsl-tw.gap-4 {
  gap: 1rem
}

.tsl-tw .gap-x-2, .tsl-tw.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem
}

.tsl-tw .gap-x-6, .tsl-tw.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem
}

.tsl-tw .gap-y-2, .tsl-tw.gap-y-2 {
  row-gap: 0.5rem
}

.tsl-tw .gap-y-4, .tsl-tw.gap-y-4 {
  row-gap: 1rem
}

.tsl-tw :is(.space-y-2 > :not([hidden]) ~ :not([hidden])), .tsl-tw:is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}

.tsl-tw :is(.space-y-8 > :not([hidden]) ~ :not([hidden])), .tsl-tw:is(.space-y-8 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse))
}

.tsl-tw .place-self-center, .tsl-tw.place-self-center {
  place-self: center
}

.tsl-tw .self-start, .tsl-tw.self-start {
  align-self: flex-start
}

.tsl-tw .self-stretch, .tsl-tw.self-stretch {
  align-self: stretch
}

.tsl-tw .justify-self-start, .tsl-tw.justify-self-start {
  justify-self: start
}

.tsl-tw .justify-self-end, .tsl-tw.justify-self-end {
  justify-self: end
}

.tsl-tw .overflow-hidden, .tsl-tw.overflow-hidden {
  overflow: hidden
}

.tsl-tw .overflow-clip, .tsl-tw.overflow-clip {
  overflow: clip
}

.tsl-tw .overflow-y-auto, .tsl-tw.overflow-y-auto {
  overflow-y: auto
}

.tsl-tw .truncate, .tsl-tw.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.tsl-tw .text-wrap, .tsl-tw.text-wrap {
  text-wrap: wrap
}

.tsl-tw .text-nowrap, .tsl-tw.text-nowrap {
  text-wrap: nowrap
}

.tsl-tw .break-words, .tsl-tw.break-words {
  overflow-wrap: break-word
}

.tsl-tw .rounded, .tsl-tw.rounded {
  border-radius: 0.25rem
}

.tsl-tw .rounded-\[inherit\], .tsl-tw.rounded-\[inherit\] {
  border-radius: inherit
}

.tsl-tw .rounded-full, .tsl-tw.rounded-full {
  border-radius: 9999px
}

.tsl-tw .rounded-lg, .tsl-tw.rounded-lg {
  border-radius: 0.5rem
}

.tsl-tw .rounded-md, .tsl-tw.rounded-md {
  border-radius: 0.375rem
}

.tsl-tw .rounded-none, .tsl-tw.rounded-none {
  border-radius: 0px
}

.tsl-tw .rounded-xl, .tsl-tw.rounded-xl {
  border-radius: 0.75rem
}

.tsl-tw .rounded-l-none, .tsl-tw.rounded-l-none {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px
}

.tsl-tw .rounded-r-\[inherit\], .tsl-tw.rounded-r-\[inherit\] {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit
}

.tsl-tw .rounded-r-none, .tsl-tw.rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px
}

.tsl-tw .border, .tsl-tw.border {
  border-width: 1px
}

.tsl-tw .border-2, .tsl-tw.border-2 {
  border-width: 2px
}

.tsl-tw .border-4, .tsl-tw.border-4 {
  border-width: 4px
}

.tsl-tw .border-\[1\.5px\], .tsl-tw.border-\[1\.5px\] {
  border-width: 1.5px
}

.tsl-tw .border-b-2, .tsl-tw.border-b-2 {
  border-bottom-width: 2px
}

.tsl-tw .border-l, .tsl-tw.border-l {
  border-left-width: 1px
}

.tsl-tw .border-l-2, .tsl-tw.border-l-2 {
  border-left-width: 2px
}

.tsl-tw .border-r, .tsl-tw.border-r {
  border-right-width: 1px
}

.tsl-tw .border-r-2, .tsl-tw.border-r-2 {
  border-right-width: 2px
}

.tsl-tw .border-r-4, .tsl-tw.border-r-4 {
  border-right-width: 4px
}

.tsl-tw .border-t, .tsl-tw.border-t {
  border-top-width: 1px
}

.tsl-tw .border-t-2, .tsl-tw.border-t-2 {
  border-top-width: 2px
}

.tsl-tw .border-t-\[1\.5px\], .tsl-tw.border-t-\[1\.5px\] {
  border-top-width: 1.5px
}

.tsl-tw .border-solid, .tsl-tw.border-solid {
  border-style: solid
}

.tsl-tw .border-dashed, .tsl-tw.border-dashed {
  border-style: dashed
}

.tsl-tw .border-neutral-300, .tsl-tw.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--tsl-color-neutral-300) / var(--tw-border-opacity, 1))
}

.tsl-tw .border-neutral-400, .tsl-tw.border-neutral-400 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--tsl-color-neutral-400) / var(--tw-border-opacity, 1))
}

.tsl-tw .border-neutral-50, .tsl-tw.border-neutral-50 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--tsl-color-neutral-50) / var(--tw-border-opacity, 1))
}

.tsl-tw .border-neutral-500\/40, .tsl-tw.border-neutral-500\/40 {
  border-color: rgb(var(--tsl-color-neutral-500) / 0.4)
}

.tsl-tw .border-r-current, .tsl-tw.border-r-current {
  border-right-color: currentColor
}

.tsl-tw .bg-accent-700, .tsl-tw.bg-accent-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--tsl-color-accent-700) / var(--tw-bg-opacity, 1))
}

.tsl-tw .bg-black\/40, .tsl-tw.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4)
}

.tsl-tw .bg-neutral-100, .tsl-tw.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--tsl-color-neutral-100) / var(--tw-bg-opacity, 1))
}

.tsl-tw .bg-neutral-300, .tsl-tw.bg-neutral-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--tsl-color-neutral-300) / var(--tw-bg-opacity, 1))
}

.tsl-tw .bg-transparent, .tsl-tw.bg-transparent {
  background-color: transparent
}

.tsl-tw .bg-white, .tsl-tw.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.tsl-tw .bg-white\/30, .tsl-tw.bg-white\/30 {
  background-color: rgb(255 255 255 / 0.3)
}

.tsl-tw .fill-current, .tsl-tw.fill-current {
  fill: currentColor
}

.tsl-tw .object-cover, .tsl-tw.object-cover {
  -o-object-fit: cover;
     object-fit: cover
}

.tsl-tw .object-top, .tsl-tw.object-top {
  -o-object-position: top;
     object-position: top
}

.tsl-tw .p-0, .tsl-tw.p-0 {
  padding: 0px
}

.tsl-tw .p-0\.5, .tsl-tw.p-0\.5 {
  padding: 0.125rem
}

.tsl-tw .p-2, .tsl-tw.p-2 {
  padding: 0.5rem
}

.tsl-tw .p-4, .tsl-tw.p-4 {
  padding: 1rem
}

.tsl-tw .px-1\.5, .tsl-tw.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem
}

.tsl-tw .px-2, .tsl-tw.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem
}

.tsl-tw .px-3, .tsl-tw.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem
}

.tsl-tw .px-6, .tsl-tw.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}

.tsl-tw .py-0\.5, .tsl-tw.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem
}

.tsl-tw .py-1, .tsl-tw.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem
}

.tsl-tw .py-1\.5, .tsl-tw.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem
}

.tsl-tw .py-2, .tsl-tw.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

.tsl-tw .py-3, .tsl-tw.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem
}

.tsl-tw .py-4, .tsl-tw.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem
}

.tsl-tw .py-5, .tsl-tw.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem
}

.tsl-tw .pb-1\.5, .tsl-tw.pb-1\.5 {
  padding-bottom: 0.375rem
}

.tsl-tw .pb-2, .tsl-tw.pb-2 {
  padding-bottom: 0.5rem
}

.tsl-tw .pb-2\.5, .tsl-tw.pb-2\.5 {
  padding-bottom: 0.625rem
}

.tsl-tw .pb-5, .tsl-tw.pb-5 {
  padding-bottom: 1.25rem
}

.tsl-tw .pl-4, .tsl-tw.pl-4 {
  padding-left: 1rem
}

.tsl-tw .pl-6, .tsl-tw.pl-6 {
  padding-left: 1.5rem
}

.tsl-tw .pr-1, .tsl-tw.pr-1 {
  padding-right: 0.25rem
}

.tsl-tw .pr-2, .tsl-tw.pr-2 {
  padding-right: 0.5rem
}

.tsl-tw .pr-6, .tsl-tw.pr-6 {
  padding-right: 1.5rem
}

.tsl-tw .pt-1, .tsl-tw.pt-1 {
  padding-top: 0.25rem
}

.tsl-tw .pt-2, .tsl-tw.pt-2 {
  padding-top: 0.5rem
}

.tsl-tw .pt-5, .tsl-tw.pt-5 {
  padding-top: 1.25rem
}

.tsl-tw .text-left, .tsl-tw.text-left {
  text-align: left
}

.tsl-tw .text-center, .tsl-tw.text-center {
  text-align: center
}

.tsl-tw .text-right, .tsl-tw.text-right {
  text-align: right
}

.tsl-tw .align-top, .tsl-tw.align-top {
  vertical-align: top
}

.tsl-tw .align-middle, .tsl-tw.align-middle {
  vertical-align: middle
}

.tsl-tw .align-bottom, .tsl-tw.align-bottom {
  vertical-align: bottom
}

.tsl-tw .text-2xl, .tsl-tw.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem
}

.tsl-tw .text-3xl, .tsl-tw.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem
}

.tsl-tw .text-4xl, .tsl-tw.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem
}

.tsl-tw .text-5xl, .tsl-tw.text-5xl {
  font-size: 3rem;
  line-height: 1
}

.tsl-tw .text-6xl, .tsl-tw.text-6xl {
  font-size: 3.75rem;
  line-height: 1
}

.tsl-tw .text-\[0\.9rem\], .tsl-tw.text-\[0\.9rem\] {
  font-size: 0.9rem
}

.tsl-tw .text-\[0\], .tsl-tw.text-\[0\] {
  font-size: 0
}

.tsl-tw .text-base, .tsl-tw.text-base {
  font-size: 1rem;
  line-height: 1.5rem
}

.tsl-tw .text-lg, .tsl-tw.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem
}

.tsl-tw .text-sm, .tsl-tw.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem
}

.tsl-tw .text-xl, .tsl-tw.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem
}

.tsl-tw .text-xs, .tsl-tw.text-xs {
  font-size: 0.75rem;
  line-height: 1rem
}

.tsl-tw .font-bold, .tsl-tw.font-bold {
  font-weight: 700
}

.tsl-tw .font-medium, .tsl-tw.font-medium {
  font-weight: 500
}

.tsl-tw .font-semibold, .tsl-tw.font-semibold {
  font-weight: 600
}

.tsl-tw .uppercase, .tsl-tw.uppercase {
  text-transform: uppercase
}

.tsl-tw .leading-4, .tsl-tw.leading-4 {
  line-height: 1rem
}

.tsl-tw .text-amber-500, .tsl-tw.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1))
}

.tsl-tw .text-blue-500, .tsl-tw.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1))
}

.tsl-tw .text-emerald-500, .tsl-tw.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1))
}

.tsl-tw .text-neutral-50, .tsl-tw.text-neutral-50 {
  --tw-text-opacity: 1;
  color: rgb(var(--tsl-color-neutral-50) / var(--tw-text-opacity, 1))
}

.tsl-tw .text-neutral-600, .tsl-tw.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--tsl-color-neutral-600) / var(--tw-text-opacity, 1))
}

.tsl-tw .text-neutral-800, .tsl-tw.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(var(--tsl-color-neutral-800) / var(--tw-text-opacity, 1))
}

.tsl-tw .text-neutral-900, .tsl-tw.text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(var(--tsl-color-neutral-900) / var(--tw-text-opacity, 1))
}

.tsl-tw .text-red-500, .tsl-tw.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.tsl-tw .text-yellow-500, .tsl-tw.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1))
}

.tsl-tw .underline, .tsl-tw.underline {
  text-decoration-line: underline
}

.tsl-tw .opacity-0, .tsl-tw.opacity-0 {
  opacity: 0
}

.tsl-tw .opacity-40, .tsl-tw.opacity-40 {
  opacity: 0.4
}

.tsl-tw .opacity-60, .tsl-tw.opacity-60 {
  opacity: 0.6
}

.tsl-tw .opacity-70, .tsl-tw.opacity-70 {
  opacity: 0.7
}

.tsl-tw .opacity-75, .tsl-tw.opacity-75 {
  opacity: 0.75
}

.tsl-tw .opacity-80, .tsl-tw.opacity-80 {
  opacity: 0.8
}

.tsl-tw .shadow, .tsl-tw.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.tsl-tw .shadow-lg, .tsl-tw.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.tsl-tw .outline, .tsl-tw.outline {
  outline-style: solid
}

.tsl-tw .outline-1, .tsl-tw.outline-1 {
  outline-width: 1px
}

.tsl-tw .outline-2, .tsl-tw.outline-2 {
  outline-width: 2px
}

.tsl-tw .outline-offset-4, .tsl-tw.outline-offset-4 {
  outline-offset: 4px
}

.tsl-tw .outline-accent-600, .tsl-tw.outline-accent-600 {
  outline-color: rgb(var(--tsl-color-accent-600) / 1)
}

.tsl-tw .outline-neutral-600\/10, .tsl-tw.outline-neutral-600\/10 {
  outline-color: rgb(var(--tsl-color-neutral-600) / 0.1)
}

.tsl-tw .ring-1, .tsl-tw.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.tsl-tw .ring-inset, .tsl-tw.ring-inset {
  --tw-ring-inset: inset
}

.tsl-tw .ring-lime-500, .tsl-tw.ring-lime-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(132 204 22 / var(--tw-ring-opacity, 1))
}

.tsl-tw .blur, .tsl-tw.blur {
  --tw-blur: blur(8px);
  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)
}

.tsl-tw .filter, .tsl-tw.filter {
  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)
}

.tsl-tw .transition, .tsl-tw.transition {
  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-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.tsl-tw .ease-in-out, .tsl-tw.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.tsl-tw .contain-strict, .tsl-tw.contain-strict {
  contain: strict
}

.tsl-tw .empty\:hidden:empty, .tsl-tw.empty\:hidden:empty {
  display: none
}

.tsl-tw .hover\:cursor-pointer:hover, .tsl-tw.hover\:cursor-pointer:hover {
  cursor: pointer
}

.tsl-tw .hover\:bg-neutral-50:hover, .tsl-tw.hover\:bg-neutral-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--tsl-color-neutral-50) / var(--tw-bg-opacity, 1))
}

.tsl-tw .hover\:outline:hover, .tsl-tw.hover\:outline:hover {
  outline-style: solid
}

.tsl-tw .focus\:outline-none:focus, .tsl-tw.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.tsl-tw .dark\:border-neutral-500:is(.tsl-dark *), .tsl-tw.dark\:border-neutral-500:is(.tsl-dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--tsl-color-neutral-500) / var(--tw-border-opacity, 1))
}

.tsl-tw .dark\:border-neutral-500\/60:is(.tsl-dark *), .tsl-tw.dark\:border-neutral-500\/60:is(.tsl-dark *) {
  border-color: rgb(var(--tsl-color-neutral-500) / 0.6)
}

.tsl-tw .dark\:border-neutral-500\/75:is(.tsl-dark *), .tsl-tw.dark\:border-neutral-500\/75:is(.tsl-dark *) {
  border-color: rgb(var(--tsl-color-neutral-500) / 0.75)
}

.tsl-tw .dark\:border-neutral-800:is(.tsl-dark *), .tsl-tw.dark\:border-neutral-800:is(.tsl-dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--tsl-color-neutral-800) / var(--tw-border-opacity, 1))
}

.tsl-tw .dark\:bg-accent-500:is(.tsl-dark *), .tsl-tw.dark\:bg-accent-500:is(.tsl-dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--tsl-color-accent-500) / var(--tw-bg-opacity, 1))
}

.tsl-tw .dark\:bg-neutral-700:is(.tsl-dark *), .tsl-tw.dark\:bg-neutral-700:is(.tsl-dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--tsl-color-neutral-700) / var(--tw-bg-opacity, 1))
}

.tsl-tw .dark\:bg-neutral-800:is(.tsl-dark *), .tsl-tw.dark\:bg-neutral-800:is(.tsl-dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--tsl-color-neutral-800) / var(--tw-bg-opacity, 1))
}

.tsl-tw .dark\:bg-neutral-900\/30:is(.tsl-dark *), .tsl-tw.dark\:bg-neutral-900\/30:is(.tsl-dark *) {
  background-color: rgb(var(--tsl-color-neutral-900) / 0.3)
}

.tsl-tw .dark\:text-neutral-100:is(.tsl-dark *), .tsl-tw.dark\:text-neutral-100:is(.tsl-dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--tsl-color-neutral-100) / var(--tw-text-opacity, 1))
}

.tsl-tw .dark\:text-neutral-200:is(.tsl-dark *), .tsl-tw.dark\:text-neutral-200:is(.tsl-dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--tsl-color-neutral-200) / var(--tw-text-opacity, 1))
}

.tsl-tw .dark\:text-neutral-300:is(.tsl-dark *), .tsl-tw.dark\:text-neutral-300:is(.tsl-dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--tsl-color-neutral-300) / var(--tw-text-opacity, 1))
}

.tsl-tw .dark\:text-neutral-50:is(.tsl-dark *), .tsl-tw.dark\:text-neutral-50:is(.tsl-dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--tsl-color-neutral-50) / var(--tw-text-opacity, 1))
}

.tsl-tw .dark\:opacity-85:is(.tsl-dark *), .tsl-tw.dark\:opacity-85:is(.tsl-dark *) {
  opacity: 0.85
}

.tsl-tw .dark\:outline-accent-400:is(.tsl-dark *), .tsl-tw.dark\:outline-accent-400:is(.tsl-dark *) {
  outline-color: rgb(var(--tsl-color-accent-400) / 1)
}

.tsl-tw .dark\:outline-neutral-100\/10:is(.tsl-dark *), .tsl-tw.dark\:outline-neutral-100\/10:is(.tsl-dark *) {
  outline-color: rgb(var(--tsl-color-neutral-100) / 0.1)
}

.tsl-tw .dark\:filter:is(.tsl-dark *), .tsl-tw.dark\:filter:is(.tsl-dark *) {
  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)
}

.tsl-tw .dark\:hover\:bg-neutral-600:hover:is(.tsl-dark *), .tsl-tw.dark\:hover\:bg-neutral-600:hover:is(.tsl-dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--tsl-color-neutral-600) / var(--tw-bg-opacity, 1))
}

@media (min-width: 640px) {
.tsl-tw .sm\:py-4, .tsl-tw.sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
  }
}
}