::after,
 ::before {
     box-sizing: border-box;
     border-width: 0;
     border-style: solid;
     border-color: #e5e7eb
 }
 
 ::after,
 ::before {
     --tw-content: ''
 }
 
 html {
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     -moz-tab-size: 4;
     tab-size: 4;
     font-family: Figtree, sans-serif;
     font-feature-settings: normal
 }
 
 body {
     margin: 0;
     line-height: inherit
 }
 
 hr {
     height: 0;
     color: inherit;
     border-top-width: 1px
 }
 
 abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-size: inherit;
     font-weight: inherit
 }
 
 a {
     color: inherit;
     text-decoration: inherit
 }
 
 b,
 strong {
     font-weight: bolder
 }
 
 code,
 kbd,
 pre,
 samp {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     font-size: 1em
 }
 
 small {
     font-size: 80%
 }
 
 sub,
 sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline
 }
 
 sub {
     bottom: -.25em
 }
 
 sup {
     top: -.5em
 }
 
 table {
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse
 }
 
 button,
 input,
 optgroup,
 select,
 textarea {
     font-family: inherit;
     font-size: 100%;
     font-weight: inherit;
     line-height: inherit;
     color: inherit;
     margin: 0;
     padding: 0
 }
 
 button,
 select {
     text-transform: none
 }
 
 [type=button],
 [type=reset],
 [type=submit],
 button {
     -webkit-appearance: button;
     background-color: transparent;
     background-image: none
 }
 
 :-moz-focusring {
     outline: auto
 }
 
 :-moz-ui-invalid {
     box-shadow: none
 }
 
 progress {
     vertical-align: baseline
 }
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
     height: auto
 }
 
 [type=search] {
     -webkit-appearance: textfield;
     outline-offset: -2px
 }
 
 ::-webkit-search-decoration {
     -webkit-appearance: none
 }
 
 ::-webkit-file-upload-button {
     -webkit-appearance: button;
     font: inherit
 }
 
 summary {
     display: list-item
 }
 
 blockquote,
 dd,
 dl,
 figure,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 hr,
 p,
 pre {
     margin: 0
 }
 
 fieldset {
     margin: 0;
     padding: 0
 }
 
 legend {
     padding: 0
 }
 
 menu,
 ol,
 ul {
     list-style: none;
     margin: 0;
     padding: 0
 }
 
 textarea {
     resize: vertical
 }
 
 input::placeholder,
 textarea::placeholder {
     opacity: 1;
     color: #9ca3af
 }
 
 [role=button],
 button {
     cursor: pointer
 }
 
 :disabled {
     cursor: default
 }
 
 audio,
 canvas,
 embed,
 iframe,
 img,
 object,
 svg,
 video {
     display: block;
     vertical-align: middle
 }
 
 img,
 video {
     max-width: 100%;
     height: auto
 }
 
 [hidden] {
     display: none
 }
 
 *,
 ::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-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:
 }
 
 ::-webkit-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-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:
 }
 
 ::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-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:
 }
 
 .relative {
     position: relative
 }
 
 .mx-auto {
     margin-left: auto;
     margin-right: auto
 }
 
 .mx-6 {
     margin-left: 1.5rem;
     margin-right: 1.5rem
 }
 
 .ml-4 {
     margin-left: 1rem
 }
 
 .mt-16 {
     margin-top: 4rem
 }
 
 .mt-6 {
     margin-top: 1.5rem
 }
 
 .mt-4 {
     margin-top: 1rem
 }
 
 .-mt-px {
     margin-top: -1px
 }
 
 .mr-1 {
     margin-right: 0.25rem
 }
 
 .flex {
     display: flex
 }
 
 .inline-flex {
     display: inline-flex
 }
 
 .grid {
     display: grid
 }
 
 .h-16 {
     height: 4rem
 }
 
 .h-7 {
     height: 1.75rem
 }
 
 .h-6 {
     height: 1.5rem
 }
 
 .h-5 {
     height: 1.25rem
 }
 
 .min-h-screen {
     min-height: 100vh
 }
 
 .w-auto {
     width: auto
 }
 
 .w-16 {
     width: 4rem
 }
 
 .w-7 {
     width: 1.75rem
 }
 
 .w-6 {
     width: 1.5rem
 }
 
 .w-5 {
     width: 1.25rem
 }
 
 .max-w-7xl {
     max-width: 80rem
 }
 
 .shrink-0 {
     flex-shrink: 0
 }
 
 .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))
 }
 
 .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr))
 }
 
 .items-center {
     align-items: center
 }
 
 .justify-center {
     justify-content: center
 }
 
 .gap-6 {
     gap: 1.5rem
 }
 
 .gap-4 {
     gap: 1rem
 }
 
 .self-center {
     align-self: center
 }
 
 .rounded-lg {
     border-radius: 0.5rem
 }
 
 .rounded-full {
     border-radius: 9999px
 }
 
 .bg-gray-100 {
     --tw-bg-opacity: 1;
     background-color: rgb(243 244 246 / var(--tw-bg-opacity))
 }
 
 .bg-white {
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
 
 .bg-red-50 {
     --tw-bg-opacity: 1;
     background-color: rgb(254 242 242 / var(--tw-bg-opacity))
 }
 
 .bg-dots-darker {
     background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(0,0,0,0.07)'/%3E%3C/svg%3E")
 }
 
 .from-gray-700\/50 {
     --tw-gradient-from: rgb(55 65 81 / 0.5);
     --tw-gradient-to: rgb(55 65 81 / 0);
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
 }
 
 .via-transparent {
     --tw-gradient-to: rgb(0 0 0 / 0);
     --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to)
 }
 
 .bg-center {
     background-position: center
 }
 
 .stroke-red-500 {
     stroke: #ef4444
 }
 
 .stroke-gray-400 {
     stroke: #9ca3af
 }
 
 .p-6 {
     padding: 1.5rem
 }
 
 .px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem
 }
 
 .text-center {
     text-align: center
 }
 
 .text-right {
     text-align: right
 }
 
 .text-xl {
     font-size: 1.25rem;
     line-height: 1.75rem
 }
 
 .text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem
 }
 
 .font-semibold {
     font-weight: 600
 }
 
 .leading-relaxed {
     line-height: 1.625
 }
 
 .text-gray-600 {
     --tw-text-opacity: 1;
     color: rgb(75 85 99 / var(--tw-text-opacity))
 }
 
 .text-gray-900 {
     --tw-text-opacity: 1;
     color: rgb(17 24 39 / var(--tw-text-opacity))
 }
 
 .text-gray-500 {
     --tw-text-opacity: 1;
     color: rgb(107 114 128 / var(--tw-text-opacity))
 }
 
 .underline {
     -webkit-text-decoration-line: underline;
     text-decoration-line: underline
 }
 
 .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale
 }
 
 .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
 .shadow-gray-500\/20 {
     --tw-shadow-color: rgb(107 114 128 / 0.2);
     --tw-shadow: var(--tw-shadow-colored)
 }
 
 .transition-all {
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms
 }
 
 .selection\:bg-red-500 *::selection {
     --tw-bg-opacity: 1;
     background-color: rgb(239 68 68 / var(--tw-bg-opacity))
 }
 
 .selection\:text-white *::selection {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity))
 }
 
 .selection\:bg-red-500::selection {
     --tw-bg-opacity: 1;
     background-color: rgb(239 68 68 / var(--tw-bg-opacity))
 }
 
 .selection\:text-white::selection {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity))
 }
 
 .hover\:text-gray-900:hover {
     --tw-text-opacity: 1;
     color: rgb(17 24 39 / var(--tw-text-opacity))
 }
 
 .hover\:text-gray-700:hover {
     --tw-text-opacity: 1;
     color: rgb(55 65 81 / var(--tw-text-opacity))
 }
 
 .focus\:rounded-sm:focus {
     border-radius: 0.125rem
 }
 
 .focus\:outline:focus {
     outline-style: solid
 }
 
 .focus\:outline-2:focus {
     outline-width: 2px
 }
 
 .focus\:outline-red-500:focus {
     outline-color: #ef4444
 }
 
 .group:hover .group-hover\:stroke-gray-600 {
     stroke: #4b5563
 }
 
 .z-10 {
     z-index: 10
 }
 
 @media (prefers-reduced-motion: no-preference) {
     .motion-safe\:hover\:scale-\[1\.01\]:hover {
         --tw-scale-x: 1.01;
         --tw-scale-y: 1.01;
         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))
     }
 }
 
 @media (prefers-color-scheme: dark) {
     .dark\:bg-gray-900 {
         --tw-bg-opacity: 1;
         background-color: rgb(17 24 39 / var(--tw-bg-opacity))
     }
     .dark\:bg-gray-800\/50 {
         background-color: rgb(31 41 55 / 0.5)
     }
     .dark\:bg-red-800\/20 {
         background-color: rgb(153 27 27 / 0.2)
     }
     .dark\:bg-dots-lighter {
         background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E")
     }
     .dark\:bg-gradient-to-bl {
         background-image: linear-gradient(to bottom left, var(--tw-gradient-stops))
     }
     .dark\:stroke-gray-600 {
         stroke: #4b5563
     }
     .dark\:text-gray-400 {
         --tw-text-opacity: 1;
         color: rgb(156 163 175 / var(--tw-text-opacity))
     }
     .dark\:text-white {
         --tw-text-opacity: 1;
         color: rgb(255 255 255 / var(--tw-text-opacity))
     }
     .dark\:shadow-none {
         --tw-shadow: 0 0 #0000;
         --tw-shadow-colored: 0 0 #0000;
         box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
     }
     .dark\: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)
     }
     .dark\:ring-inset {
         --tw-ring-inset: inset
     }
     .dark\:ring-white\/5 {
         --tw-ring-color: rgb(255 255 255 / 0.05)
     }
     .dark\:hover\:text-white:hover {
         --tw-text-opacity: 1;
         color: rgb(255 255 255 / var(--tw-text-opacity))
     }
     .group:hover .dark\:group-hover\:stroke-gray-400 {
         stroke: #9ca3af
     }
 }
 
 @media (min-width: 640px) {
     .sm\:fixed {
         position: fixed
     }
     .sm\:top-0 {
         top: 0px
     }
     .sm\:right-0 {
         right: 0px
     }
     .sm\:ml-0 {
         margin-left: 0px
     }
     .sm\:flex {
         display: flex
     }
     .sm\:items-center {
         align-items: center
     }
     .sm\:justify-center {
         justify-content: center
     }
     .sm\:justify-between {
         justify-content: space-between
     }
     .sm\:text-left {
         text-align: left
     }
     .sm\:text-right {
         text-align: right
     }
 }
 
 @media (min-width: 768px) {
     .md\:grid-cols-2 {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }
 }
 
 @media (min-width: 1024px) {
     .lg\:gap-8 {
         gap: 2rem
     }
     .lg\:p-8 {
         padding: 2rem
     }
 }