*, :after, :before{
    --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:rgba(59,130,246,.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:rgba(59,130,246,.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: ;
}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/
*, :after, :before{
    box-sizing:border-box;
    border:0 solid #e5e7eb
}
:after, :before{
    --tw-content:""
}
:host, html{
    line-height:1.5;
    -webkit-text-size-adjust:100%;
    -moz-tab-size:4;
    -o-tab-size:4;
    tab-size:4;
    font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-feature-settings:normal;
    font-variation-settings:normal;
    -webkit-tap-highlight-color:transparent
}
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-feature-settings:normal;
    font-variation-settings:normal;
    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-feature-settings:inherit;
    font-variation-settings:inherit;
    font-size:100%;
    font-weight:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    color:inherit;
    margin:0;
    padding:0
}
button, select{
    text-transform:none
}
button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]){
    -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
}
fieldset,legend{
    padding:0
}
menu,ol,ul{
    list-style:none;
    margin:0;
    padding:0
}
dialog{
    padding:0
}
textarea{
    resize:vertical
}
input::-moz-placeholder,textarea::-moz-placeholder{
    opacity:1;color:#9ca3af
}
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]:where(:not([hidden=until-found])){
    display:none
}
[multiple], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], input:where(:not([type])), select, textarea{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-color:#fff;
    border-color:#6b7280;
    border-width:1px;
    border-radius:0;
    padding:.5rem .75rem;
    font-size:1rem;
    line-height:1.5rem;
    --tw-shadow:0 0 #0000
}
[multiple]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, input:where(:not([type])):focus, select:focus, textarea:focus{
    outline:2px solid transparent;
    outline-offset:2px;
    --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width:0px;
    --tw-ring-offset-color:#fff;
    --tw-ring-color:#2563eb;
    --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);
    border-color:#2563eb
}
input ::-moz-placeholder, textarea::-moz-placeholder{
    color:#6b7280;
    opacity:1
}
input::placeholder, textarea::placeholder{
    color:#6b7280;
    opacity:1
}
::-webkit-datetime-edit-fields-wrapper{
    padding:0
}
::-webkit-date-and-time-value{
    min-height:1.5em;
    text-align:inherit
}
::-webkit-datetime-edit{
    display:inline-flex
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-meridiem-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-year-field{
    padding-top:0;
    padding-bottom:0
}
select{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position:right .5rem center;
    background-repeat:no-repeat;
    background-size:1.5em 1.5em;
    padding-right:2.5rem;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact
}
[multiple], [size]:where(select:not([size="1"])){
    background-image:none;
    background-position:0 0;
    background-repeat:unset;
    background-size:initial;
    padding-right:.75rem;
    -webkit-print-color-adjust:unset;
    print-color-adjust:unset
}
[type=checkbox], [type=radio]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding:0;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    display:inline-block;
    vertical-align:middle;
    background-origin:border-box;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    flex-shrink:0;
    height:1rem;
    width:1rem;
    color:#2563eb;
    background-color:#fff;
    border-color:#6b7280;
    border-width:1px;
    --tw-shadow:0 0 #0000
}
[type=checkbox]{
    border-radius:0
}
[type=radio]{
    border-radius:100%
}
[type=checkbox]:focus, [type=radio]:focus{
    outline:2px solid transparent;
    outline-offset:2px;
    --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
    --tw-ring-offset-width:2px;
    --tw-ring-offset-color:#fff;
    --tw-ring-color:#2563eb;
    --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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow:var(--tw-ring-offset-shadow),
    var(--tw-ring-shadow),
    var(--tw-shadow)}[type=checkbox]:checked,
                     [type=radio]:checked{
                         border-color:transparent;
                         background-color:currentColor;
                         background-size:100% 100%;
                         background-position:50%;
                         background-repeat:no-repeat
                     }
[type=checkbox]:checked{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")
}
@media (forced-colors:active) {
    [type=checkbox]:checked{
        -webkit-appearance:auto;
        -moz-appearance:auto;
        appearance:auto
    }
}
[type=radio]:checked{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
}
@media (forced-colors:active) {
    [type=radio]:checked{
        -webkit-appearance:auto;
        -moz-appearance:auto;
        appearance:auto
    }
}
[type=checkbox]:checked:focus, [type=checkbox]:checked:hover, [type=radio]:checked:focus, [type=radio]:checked:hover{
    border-color:transparent;
    background-color:currentColor
}
[type=checkbox]:indeterminate{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
    border-color:transparent;
    background-color:currentColor;
    background-size:100% 100%;
    background-position:50%;
    background-repeat:no-repeat
}
@media (forced-colors:active) {
    [type=checkbox]:indeterminate{
        -webkit-appearance:auto;
        -moz-appearance:auto;
        appearance:auto
    }
}
[type=checkbox]:indeterminate:focus, [type=checkbox]:indeterminate:hover{
    border-color:transparent;
    background-color:currentColor
}
[type=file]{
    background:unset;
    border-color:inherit;
    border-width:0;
    border-radius:0;
    padding:0;
    font-size:unset;
    line-height:inherit
}
[type=file]:focus{
    outline:1px solid ButtonText;
    outline:1px auto -webkit-focus-ring-color
}
html{
    height:100%;
    font-family:Nunito,sans-serif
}
h1, h2, h3, h4, h5, h6{
    font-family:Quicksand,sans-serif
}
.container{
    width:100%
}
@media (min-width:640px){
    .container{
        max-width:640px
    }
}
@media (min-width:768px){
    .container{max-width:768px
    }
}
@media (min-width:1024px){
    .container{
        max-width:1024px
    }
}
@media (min-width:1280px){
    .container{
        max-width:1280px
    }
}
@media (min-width:1536px){
    .container{
        max-width:1536px
    }
}
.btn-primary{
    border-radius:.5rem;
    padding:.5rem 1rem;
    font-weight:600;
    transition-property:all;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.2s;
    --tw-bg-opacity:1;
    background-color:rgb(107 0 255/var(--tw-bg-opacity,1));
    --tw-text-opacity:1;
    color:rgb(255 255 255/var(--tw-text-opacity,1))
}
.btn-primary:active:focus, .btn-primary:focus{
    box-shadow:0 0 0 .1rem #fff,
    0 0 0 .25rem #258cfb
}
.btn-primary:hover{
    --tw-bg-opacity:1;
    background-color:rgb(70 23 157/var(--tw-bg-opacity,1))
}
.btn-secondary{
    border-radius:.5rem;
    padding:.5rem 1rem;
    font-weight:600;
    transition-property:all;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.2s;
    --tw-bg-opacity:1;
    background-color:rgb(20 184 166/var(--tw-bg-opacity,1));
    --tw-text-opacity:1;
    color:rgb(255 255 255/var(--tw-text-opacity,1))
}
.btn-secondary:active:focus, .btn-secondary:focus{
    box-shadow:0 0 0 .1rem #fff,
    0 0 0 .25rem #258cfb
}
.btn-secondary:hover{
    --tw-bg-opacity:1;
    background-color:rgb(13 148 136/var(--tw-bg-opacity,1))
}
.card{
    border-radius:.75rem;
    --tw-bg-opacity:1;
    background-color:rgb(255 255 255/var(--tw-bg-opacity,1));
    padding:1.5rem;
    --tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
    --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    transition-property:all;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.2s
}
.card, .card:hover{
    box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),
    var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.card:hover{
    --tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
    --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)
}
.card{
    transition:all .3s cubic-bezier(.4,0,.2,1)
}
.card:hover{
    transform:translateY(-5px) rotate(1deg)
}
.input{
    border-radius:.5rem;
    --tw-border-opacity:1;
    border-color:rgb(209 213 219/var(--tw-border-opacity,1))
}
.input:focus{
    --tw-border-opacity:1;
    border-color:rgb(107 0 255/var(--tw-border-opacity,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(3px + 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);
    --tw-ring-color:rgb(251 207 232/var(--tw-ring-opacity,1));
    --tw-ring-opacity:0.5
}
.\!tag, .tag{
    display:inline-flex;
    align-items:center;
    border-radius:9999px;
    --tw-bg-opacity:1;
    background-color:rgb(235 231 252/var(--tw-bg-opacity,1));
    padding:.25rem .75rem;
    font-size:.875rem;
    line-height:1.25rem;
    font-weight:500;
    --tw-text-opacity:1;
    color:rgb(70 23 157/var(--tw-text-opacity,1))
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border-width:0
}
.pointer-events-none{
    pointer-events:none
}
.fixed{
    position:fixed
}
.absolute{
    position:absolute
}
.relative{
    position:relative
}
.-inset-0\.5{
    inset:-.125rem
}
.inset-0{
    inset:0
}
.inset-x-0{
    left:0;
    right:0
}
.inset-y-0{
    top:0;
    bottom:0
}
.-bottom-1{
    bottom:-.25rem
}
.bottom-20{
    bottom:5rem
}
.bottom-40{
    bottom:10rem
}
.left-0{
    left:0
}
.left-10{
    left:2.5rem
}
.left-20{
    left:5rem
}
.right-0{
    right:0
}
.right-10{
    right:2.5rem
}
.right-20{
    right:5rem
}
.right-3{
    right:.75rem
}
.top-0{
    top:0
}
.top-2\.5{
    top:.625rem
}
.top-20{
    top:5rem
}
.top-40{
    top:10rem
}
.-z-10{
    z-index:-10
}
.z-50{
    z-index:50
}
.mx-auto{
    margin-left:auto;
    margin-right:auto
}
.mb-12{
    margin-bottom:3rem
}
.mb-16{
    margin-bottom:4rem
}
.mb-2{
    margin-bottom:.5rem
}
.mb-4{
    margin-bottom:1rem
}
.mb-6{
    margin-bottom:1.5rem
}
.mb-8{
    margin-bottom:2rem
}
.ml-1{
    margin-left:.25rem
}
.ml-2{
    margin-left:.5rem
}
.ml-3{
    margin-left:.75rem
}
.ml-4{
    margin-left:1rem
}
.ml-5{
    margin-left:1.25rem
}
.mr-1{
    margin-right:.25rem
}
.mr-2{
    margin-right:.5rem
}
.mr-4{
    margin-right:1rem
}
.mr-6{
    margin-right:1.5rem
}
.mt-1{
    margin-top:.25rem
}
.mt-12{
    margin-top:3rem
}
.mt-16{
    margin-top:4rem
}
.mt-2{
    margin-top:.5rem
}
.mt-3{
    margin-top:.75rem
}
.mt-4{
    margin-top:1rem
}
.mt-5{
    margin-top:1.25rem
}
.mt-6{
    margin-top:1.5rem
}
.mt-8{
    margin-top:2rem
}
.mt-auto{
    margin-top:auto
}
.line-clamp-1{
    -webkit-line-clamp:1
}
.line-clamp-1,
.line-clamp-3{
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical
}
.line-clamp-3{
    -webkit-line-clamp:3
}
.block{
    display:block
}
.inline-block{
    display:inline-block
}
.inline{
    display:inline
}
.flex{
    display:flex
}
.inline-flex{
    display:inline-flex
}
.table{
    display:table
}
.grid{
    display:grid
}
.hidden{
    display:none
}
.h-0\.5{
    height:.125rem
}
.h-10{
    height:2.5rem
}
.h-16{
    height:4rem
}
.h-32{
    height:8rem
}
.h-4{
    height:1rem
}
.h-40{
    height:10rem
}
.h-48{
    height:6rem
}
.h-49{
    height:10rem
}
.h-5{
    height:1.25rem
}
.h-56{
    height:14rem
}
.h-6{
    height:1.5rem
}
.h-\[300px\]{
    height:300px
}
.h-full{
    height:100%
}
.max-h-60{
    max-height:15rem
}
.max-h-96{
    max-height:24rem
}
.min-h-\[300px\]{
    min-height:300px
}
.min-h-\[400px\]{
    min-height:400px
}
.min-h-\[450px\]{
    min-height:450px
}
.min-h-full{
    min-height:100%
}
.min-h-screen{
    min-height:100vh
}
.w-0{
    width:0
}
.w-10{
    width:2.5rem
}
.w-4{
    width:1rem
}
.w-48{
    width:12rem
}
.w-5{
    width:1.25rem
}
.w-6{
    width:1.5rem
}
.w-64{
    width:16rem
}
.w-full{
    width:100%
}
.min-w-0{
    min-width:0
}
.min-w-full{
    min-width:100%
}
.max-w-2xl{
    max-width:42rem
}
.max-w-3xl{
    max-width:48rem
}
.max-w-4xl{
    max-width:56rem
}
.max-w-7xl{
    max-width:80rem
}
.max-w-md{
    max-width:28rem
}
.flex-1{
    flex:1 1 0%
}
.flex-shrink-0{
    flex-shrink:0
}
.flex-grow{
    flex-grow:1
}
.origin-left{
    transform-origin:left
}
.-translate-y-2{
    --tw-translate-y:-0.5rem
}
.-translate-y-2, .translate-y-0{
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}.translate-y-0{
     --tw-translate-y:0px
 }
.translate-y-4{
    --tw-translate-y:1rem
}
.scale-x-0, .translate-y-4{
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-x-0{
    --tw-scale-x:0
}
.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))
}
.animate-bounce{
    animation:bounce 1s infinite
}
.animate-bounce-slow{
    animation:bounce 3s infinite
}
@keyframes pulse{
     50%{
         opacity:.5
     }
}
.animate-pulse{
    animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite
}
.animate-wiggle{
    animation:wiggle 1s ease-in-out infinite
}
.cursor-not-allowed{
    cursor:not-allowed
}
.appearance-none{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none
}
.auto-rows-fr{
    grid-auto-rows:minmax(0,1fr)
}
.grid-cols-1{
    grid-template-columns:repeat(1,minmax(0,1fr))
}
.grid-cols-2{
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.flex-col{
    flex-direction:column
}
.flex-wrap{
    flex-wrap:wrap
}
.items-start{
    align-items:flex-start
}
.items-end{
    align-items:flex-end
}
.items-center{
    align-items:center
}
.justify-end{
    justify-content:flex-end
}
.justify-center{
    justify-content:center
}
.justify-between{
    justify-content:space-between
}
.gap-1{
    gap:.25rem
}
.gap-2{
    gap:.5rem
}
.gap-3{
    gap:.75rem
}
.gap-4{
    gap:1rem
}
.gap-6{
    gap:1.5rem
}
.gap-8{
    gap:2rem
}
.-space-y-px>:not([hidden])~:not([hidden]){
    --tw-space-y-reverse:0;
    margin-top:calc(-1px*(1 - var(--tw-space-y-reverse)));
    margin-bottom:calc(-1px*var(--tw-space-y-reverse))
}
.space-x-2>:not([hidden])~:not([hidden]){
    --tw-space-x-reverse:0;
    margin-right:calc(.5rem*var(--tw-space-x-reverse));
    margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))
}
.space-x-3>:not([hidden])~:not([hidden]){
    --tw-space-x-reverse:0;
    margin-right:calc(.75rem*var(--tw-space-x-reverse));
    margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))
}
.space-x-4>:not([hidden])~:not([hidden]){
    --tw-space-x-reverse:0;
    margin-right:calc(1rem*var(--tw-space-x-reverse));
    margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))
}
.space-x-6>:not([hidden])~:not([hidden]){
    --tw-space-x-reverse:0;
    margin-right:calc(1.5rem*var(--tw-space-x-reverse));
    margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))
}
.space-x-8>:not([hidden])~:not([hidden]){
    --tw-space-x-reverse:0;
    margin-right:calc(2rem*var(--tw-space-x-reverse));
    margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)))
}
.space-y-1>:not([hidden])~:not([hidden]){
    --tw-space-y-reverse:0;
    margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom:calc(.25rem*var(--tw-space-y-reverse))
}
.space-y-2>:not([hidden])~:not([hidden]){
    --tw-space-y-reverse:0;
    margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom:calc(.5rem*var(--tw-space-y-reverse))
}
.space-y-3>:not([hidden])~:not([hidden]){
    --tw-space-y-reverse:0;
    margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom:calc(.75rem*var(--tw-space-y-reverse))
}
.space-y-4>:not([hidden])~:not([hidden]){
    --tw-space-y-reverse:0;
    margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom:calc(1rem*var(--tw-space-y-reverse))
}
.space-y-6>:not([hidden])~:not([hidden]){
    --tw-space-y-reverse:0;
    margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))
}
.space-y-8>:not([hidden])~:not([hidden]){
    --tw-space-y-reverse:0;
    margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom:calc(2rem*var(--tw-space-y-reverse))
}
.divide-y>:not([hidden])~:not([hidden]){
    --tw-divide-y-reverse:0;
    border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));
    border-bottom-width:calc(1px*var(--tw-divide-y-reverse))
}
.divide-gray-100>:not([hidden])~:not([hidden]){
    --tw-divide-opacity:1;
    border-color:rgb(243 244 246/var(--tw-divide-opacity,1))
}
.divide-gray-200>:not([hidden])~:not([hidden]){
    --tw-divide-opacity:1;
    border-color:rgb(229 231 235/var(--tw-divide-opacity,1))
}
.overflow-hidden{
    overflow:hidden
}
.overflow-y-auto{
    overflow-y:auto
}
.truncate{
    overflow:hidden;
    text-overflow:ellipsis
}
.truncate,
.whitespace-nowrap{
    white-space:nowrap
}
.rounded{
    border-radius:.25rem
}
.rounded-2xl{
    border-radius:1rem
}
.rounded-full{
    border-radius:9999px
}
.rounded-lg{
    border-radius:.5rem
}
.rounded-md{
    border-radius:.375rem
}
.rounded-none{
    border-radius:0
}
.rounded-xl{
    border-radius:.75rem
}
.rounded-b-lg{
    border-bottom-right-radius:.5rem;
    border-bottom-left-radius:.5rem
}
.rounded-b-md{
    border-bottom-right-radius:.375rem;
    border-bottom-left-radius:.375rem
}
.rounded-t-md{
    border-top-left-radius:.375rem;
    border-top-right-radius:.375rem
}
.border{
    border-width:1px
}
.border-2{
    border-width:2px
}
.border-b{
    border-bottom-width:1px
}
.border-t{
    border-top-width:1px
}
.border-dashed{
    border-style:dashed
}
.border-blue-100{
    --tw-border-opacity:1;
    border-color:rgb(219 234 254/var(--tw-border-opacity,1))
}
.border-gray-100{
    --tw-border-opacity:1;
    border-color:rgb(243 244 246/var(--tw-border-opacity,1))
}
.border-gray-200{
    --tw-border-opacity:1;
    border-color:rgb(229 231 235/var(--tw-border-opacity,1))
}
.border-gray-300{
    --tw-border-opacity:1;
    border-color:rgb(209 213 219/var(--tw-border-opacity,1))
}
.border-indigo-100{
    --tw-border-opacity:1;
    border-color:rgb(224 231 255/var(--tw-border-opacity,1))
}
.border-pink-100{
    --tw-border-opacity:1;
    border-color:rgb(252 231 243/var(--tw-border-opacity,1))
}
.border-purple-100{
    --tw-border-opacity:1;
    border-color:rgb(243 232 255/var(--tw-border-opacity,1))
}
.border-purple-200{
    --tw-border-opacity:1;
    border-color:rgb(233 213 255/var(--tw-border-opacity,1))
}
.border-secondary-200{
    --tw-border-opacity:1;
    border-color:rgb(153 246 228/var(--tw-border-opacity,1))
}
.border-transparent{
    border-color:transparent
}
.border-yellow-200{
    --tw-border-opacity:1;
    border-color:rgb(254 240 138/var(--tw-border-opacity,1))
}
.bg-gray-100{
    --tw-bg-opacity:1;
    background-color:rgb(243 244 246/var(--tw-bg-opacity,1))
}
.bg-gray-200{
    --tw-bg-opacity:1;
    background-color:rgb(229 231 235/var(--tw-bg-opacity,1))
}
.bg-gray-300{
    --tw-bg-opacity:1;
    background-color:rgb(209 213 219/var(--tw-bg-opacity,1))
}
.bg-gray-50{
    --tw-bg-opacity:1;
    background-color:rgb(249 250 251/var(--tw-bg-opacity,1))
}
.bg-gray-500{
    --tw-bg-opacity:1;
    background-color:rgb(107 114 128/var(--tw-bg-opacity,1))
}
.bg-green-100{
    --tw-bg-opacity:1;
    background-color:rgb(220 252 231/var(--tw-bg-opacity,1))
}
.bg-indigo-600{
    --tw-bg-opacity:1;
    background-color:rgb(79 70 229/var(--tw-bg-opacity,1))
}
.bg-primary-50{
    --tw-bg-opacity:1;
    background-color:rgb(253 242 248/var(--tw-bg-opacity,1))
}
.bg-primary-500{
    --tw-bg-opacity:1;
    background-color:rgb(107 0 255/var(--tw-bg-opacity,1))
}
.bg-purple-100{
    --tw-bg-opacity:1;
    background-color:rgb(243 232 255/var(--tw-bg-opacity,1))
}
.bg-purple-600{
    --tw-bg-opacity:1;
    background-color:rgb(147 51 234/var(--tw-bg-opacity,1))
}
.bg-red-600{
    --tw-bg-opacity:1;
    background-color:rgb(220 38 38/var(--tw-bg-opacity,1))
}
.bg-secondary-50{
    --tw-bg-opacity:1;
    background-color:rgb(240 253 250/var(--tw-bg-opacity,1))
}
.bg-white{
    --tw-bg-opacity:1;
    background-color:rgb(255 255 255/var(--tw-bg-opacity,1))
}
.bg-yellow-100{
    --tw-bg-opacity:1;
    background-color:rgb(254 249 195/var(--tw-bg-opacity,1))
}
.bg-opacity-75{
    --tw-bg-opacity:0.75
}
.bg-gradient-to-br{
    background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))
}
.bg-gradient-to-r{
    background-image:linear-gradient(to right,var(--tw-gradient-stops))
}
.from-blue-50{
    --tw-gradient-from:#eff6ff var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(239,246,255,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-blue-500{
    --tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(59,130,246,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-indigo-50{
    --tw-gradient-from:#eef2ff var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(238,242,255,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-indigo-500{
    --tw-gradient-from:#6366f1 var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(99,102,241,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-pink-50{
    --tw-gradient-from:#fdf2f8 var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(253,242,248,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-pink-500{
    --tw-gradient-from:#ec4899 var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(236,72,153,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-primary-50{
    --tw-gradient-from:#fdf2f8 var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(253,242,248,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-primary-500{
    --tw-gradient-from: #7148ec var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(236,72,153,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-purple-100{
    --tw-gradient-from:#f3e8ff var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(243,232,255,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-purple-50{
    --tw-gradient-from:#faf5ff var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(250,245,255,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-purple-500{
    --tw-gradient-from:#a855f7 var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(168,85,247,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-purple-600{
    --tw-gradient-from:#9333ea var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(147,51,234,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-red-500{
    --tw-gradient-from:#ef4444 var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.from-yellow-100{
    --tw-gradient-from:#fef9c3 var(--tw-gradient-from-position);
    --tw-gradient-to:hsla(55,97%,88%,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.via-pink-500{
    --tw-gradient-to:rgba(236,72,153,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),#ec4899 var(--tw-gradient-via-position),var(--tw-gradient-to)
}
.via-purple-500{
    --tw-gradient-to:rgba(168,85,247,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),#a855f7 var(--tw-gradient-via-position),var(--tw-gradient-to)
}
.via-secondary-500{
    --tw-gradient-to:rgba(20,184,166,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),#14b8a6 var(--tw-gradient-via-position),var(--tw-gradient-to)
}
.to-amber-100{
    --tw-gradient-to:#fef3c7 var(--tw-gradient-to-position)
}
.to-blue-50{
    --tw-gradient-to:#eff6ff var(--tw-gradient-to-position)
}
.to-blue-500{
    --tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)
}
.to-indigo-100{
    --tw-gradient-to:#e0e7ff var(--tw-gradient-to-position)
}
.to-indigo-50{
    --tw-gradient-to:#eef2ff var(--tw-gradient-to-position)
}
.to-indigo-500{
    --tw-gradient-to:#6366f1 var(--tw-gradient-to-position)
}
.to-pink-50{
    --tw-gradient-to:#fdf2f8 var(--tw-gradient-to-position)
}
.to-pink-500{
    --tw-gradient-to:#ec4899 var(--tw-gradient-to-position)
}
.to-pink-600{
    --tw-gradient-to:#db2777 var(--tw-gradient-to-position)
}
.to-primary-500{
    --tw-gradient-to:#ec4899 var(--tw-gradient-to-position)
}
.to-purple-50{
    --tw-gradient-to:#faf5ff var(--tw-gradient-to-position)
}
.to-purple-500{
    --tw-gradient-to:#a855f7 var(--tw-gradient-to-position)
}
.to-red-500{
    --tw-gradient-to:#ef4444 var(--tw-gradient-to-position)
}
.to-secondary-50{
    --tw-gradient-to:#f0fdfa var(--tw-gradient-to-position)
}
.to-secondary-500{
    --tw-gradient-to:#14b8a6 var(--tw-gradient-to-position)
}
.bg-clip-text{
    -webkit-background-clip:text;
    background-clip:text
}
.object-cover{
    -o-object-fit:cover;
    object-fit:cover
}
.p-1{
    padding:.25rem
}
.p-2{
    padding:.5rem
}
.p-3{
    padding:.75rem
}
.p-4{
    padding:1rem
}
.p-6{
    padding:1.5rem
}
.p-8{
    padding:2rem
}
.px-2{
    padding-left:.5rem;
    padding-right:.5rem
}
.px-2\.5{
    padding-left:.625rem;
    padding-right:.625rem
}
.px-3{
    padding-left:.75rem;
    padding-right:.75rem
}
.px-4{
    padding-left:2rem;
    padding-right:2rem
}
.px-6{
    padding-left:1.5rem;
    padding-right:1.5rem
}
.py-0\.5{
    padding-top:.125rem;
    padding-bottom:.125rem
}
.py-1{
    padding-top:.25rem;
    padding-bottom:.25rem
}
.py-1\.5{
    padding-top:.375rem;
    padding-bottom:.375rem
}
.py-12{
    padding-top:3rem;
    padding-bottom:3rem
}
.py-2{
    padding-top:.5rem;
    padding-bottom:.5rem
}
.py-24{
    padding-top:6rem;
    padding-bottom:6rem
}
.py-3{
    padding-top:.75rem;
    padding-bottom:.75rem
}
.py-4{
    padding-top:1rem;
    padding-bottom:1rem
}
.py-5{
    padding-top:1.25rem;
    padding-bottom:1.25rem
}
.py-6{
    padding-top:1.5rem;
    padding-bottom:1.5rem
}
.py-8{
    padding-top:2rem;
    padding-bottom:2rem
}
.pb-20{
    padding-bottom:5rem
}
.pb-4{
    padding-bottom:1rem
}
.pl-10{
    padding-left:2.5rem
}
.pl-3{
    padding-left:.75rem
}
.pr-4{
    padding-right:1rem
}
.pt-4{
    padding-top:1rem
}
.pt-5{
    padding-top:1.25rem
}
.text-left{
    text-align:left
}
.text-center{
    text-align:center
}
.text-right{
    text-align:right
}
.align-bottom{
    vertical-align:bottom
}
.font-display{
    font-family:Quicksand,sans-serif
}
.text-2xl{
    font-size:1.5rem;
    line-height:2rem
}
.text-3xl{
    font-size:1.875rem;
    line-height:2.25rem
}
.text-4xl{
    font-size:2.25rem;
    line-height:2.5rem
}
.text-5xl{
    font-size:3rem;
    line-height:1
}
.text-6xl{
    font-size:3.75rem;
    line-height:1
}
.text-8xl{
    font-size:6rem;
    line-height:1
}
.text-base{
    font-size:1rem;
    line-height:1.5rem
}
.text-lg{
    font-size:1.125rem;
    line-height:1.75rem
}
.text-sm{
    font-size:.875rem;
    line-height:1.25rem
}
.text-xl{
    font-size:1.25rem;
    line-height:1.75rem
}
.text-xs{
    font-size:.75rem;
    line-height:1rem
}
.font-bold{
    font-weight:700
}
.font-extrabold{
    font-weight:800
}
.font-medium{
    font-weight:500
}
.font-semibold{
    font-weight:600
}
.uppercase{
    text-transform:uppercase
}
.italic{
    font-style:italic
}
.leading-5{
    line-height:1.25rem
}
.leading-6{
    line-height:1.5rem
}
.leading-8{
    line-height:2rem
}
.leading-none{
    line-height:1
}
.tracking-tight{
    letter-spacing:-.025em
}
.tracking-wider{
    letter-spacing:.05em
}
.text-gray-400{
    --tw-text-opacity:1;
    color:rgb(156 163 175/var(--tw-text-opacity,1))
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity, 1))
}
.text-gray-600{
    --tw-text-opacity:1;
    color:rgb(75 85 99/var(--tw-text-opacity,1))
}
.text-gray-700{
    --tw-text-opacity:1;
    color:rgb(55 65 81/var(--tw-text-opacity,1))
}
.text-gray-800{
    --tw-text-opacity:1;
    color:rgb(31 41 55/var(--tw-text-opacity,1))
}
.text-gray-900{
    --tw-text-opacity:1;
    color:rgb(17 24 39/var(--tw-text-opacity,1))
}
.text-green-600{
    --tw-text-opacity:1;
    color:rgb(22 163 74/var(--tw-text-opacity,1))
}
.text-green-800{
    --tw-text-opacity:1;
    color:rgb(22 101 52/var(--tw-text-opacity,1))
}
.text-indigo-600{
    --tw-text-opacity:1;
    color:rgb(79 70 229/var(--tw-text-opacity,1))
}
.text-primary-600{
    --tw-text-opacity:1;
    color:rgb(70 23 157/var(--tw-text-opacity,1))
}
.text-primary-700{
    --tw-text-opacity:1;
    color:rgb(190 24 93/var(--tw-text-opacity,1))
}
.text-purple-300{
    --tw-text-opacity:1;
    color:rgb(216 180 254/var(--tw-text-opacity,1))
}
.text-purple-500{
    --tw-text-opacity:1;
    color:rgb(168 85 247/var(--tw-text-opacity,1))
}
.text-purple-600{
    --tw-text-opacity:1;
    color:rgb(147 51 234/var(--tw-text-opacity,1))
}
.text-purple-700{
    --tw-text-opacity:1;
    color:rgb(126 34 206/var(--tw-text-opacity,1))
}
.text-purple-800{
    --tw-text-opacity:1;
    color:rgb(107 33 168/var(--tw-text-opacity,1))
}
.text-red-500{
    --tw-text-opacity:1;
    color:rgb(239 68 68/var(--tw-text-opacity,1))
}
.text-red-600{
    --tw-text-opacity:1;
    color:rgb(220 38 38/var(--tw-text-opacity,1))
}
.text-transparent{
    color:transparent
}
.text-white{
    --tw-text-opacity:1;
    color:rgb(255 255 255/var(--tw-text-opacity,1))
}
.text-yellow-700{
    --tw-text-opacity:1;
    color:rgb(161 98 7/var(--tw-text-opacity,1))
}
.text-yellow-800{
    --tw-text-opacity:1;
    color:rgb(133 77 14/var(--tw-text-opacity,1))
}
.placeholder-gray-500::-moz-placeholder{
    --tw-placeholder-opacity:1;
    color:rgb(107 114 128/var(--tw-placeholder-opacity,1))
}
.placeholder-gray-500::placeholder{
    --tw-placeholder-opacity:1;
    color:rgb(107 114 128/var(--tw-placeholder-opacity,1))
}
.opacity-0{
    opacity:0
}
.opacity-100{
    opacity:1
}
.opacity-20{
    opacity:.2
}
.opacity-25{
    opacity:.25
}
.opacity-5{
    opacity:.05
}
.opacity-50{
    opacity:.5
}
.shadow{
    --tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
    --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)
}
.shadow,
.shadow-lg{
    box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.shadow-lg{
    --tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
    --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)
}
.shadow-md{
    --tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
    --tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)
}
.shadow-md,
.shadow-sm{
    box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.shadow-sm{
    --tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);
    --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)
}
.shadow-xl{
    --tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
    --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
    box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.outline{
    outline-style:solid
}
.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)
}
.ring-gray-900\/5{
    --tw-ring-color:rgba(17,24,39,.05)
}
.blur{
    --tw-blur:blur(8px)
}
.blur,
.blur-xl{
    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)
}
.blur-xl{
    --tw-blur:blur(24px)
}
.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)
}
.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(.4,0,.2,1);
    transition-duration:.15s
}
.transition-all{
    transition-property:all;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.15s
}
.transition-colors{
    transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.15s
}
.transition-opacity{
    transition-property:opacity;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.15s
}
.transition-transform{
    transition-property:transform;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.15s
}
.duration-1000{
    transition-duration:1s
}
.duration-150{
    transition-duration:.15s
}
.duration-200{
    transition-duration:.2s
}
.duration-300{
    transition-duration:.3s
}
.ease-in{
    transition-timing-function:cubic-bezier(.4,0,1,1)
}
.ease-in-out{
    transition-timing-function:cubic-bezier(.4,0,.2,1)
}
.ease-out{
    transition-timing-function:cubic-bezier(0,0,.2,1)
}
html{
    font-size:14px
}
@media (min-width:768px){
    html{
        font-size:16px
    }
}
.btn-link.nav-link:focus, .btn:active:focus, .btn:focus, .form-check-input:focus, .form-control:focus{
    box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem #258cfb
}
.form-floating>.form-control-plaintext::-moz-placeholder, .form-floating>.form-control::-moz-placeholder{
    color:var(--bs-secondary-color);
    text-align:end
}
.form-floating>.form-control-plaintext::placeholder, .form-floating>.form-control::placeholder{
    color:var(--bs-secondary-color);
    text-align:end
}
.form-floating>.form-control-plaintext:focus::-moz-placeholder, .form-floating>.form-control:focus::-moz-placeholder{
    text-align:start
}
.form-floating>.form-control-plaintext:focus::placeholder, .form-floating>.form-control:focus::placeholder{
    text-align:start
}
@keyframes bounce-slow{
    0%,to{
        transform:translateY(0)
    }
    50%{
        transform:translateY(-25px)
    }
}
@keyframes gradient-xy{
    0%,to{
        background-size:400% 400%;background-position:0 0
    }
    50%{
        background-size:200% 200%;background-position:100% 100%
    }
}
@keyframes float{
    0%,to{
        transform:translateY(0) rotate(0deg)
    }
    50%{
        transform:translateY(-20px) rotate(5deg)
    }
}
@keyframes wiggle{
    0%,to{
        transform:rotate(0deg)
    }
    25%{
        transform:rotate(15deg)
    }
    75%{
        transform:rotate(-15deg)
    }
}
.animate-bounce-slow{
    animation:bounce-slow 3s infinite
}
.animate-bounce-slower{
    animation:bounce-slower 5s infinite
}
.animate-bounce-code{
    animation:bounce-code 1.5s infinite
}
.animate-gradient-xy{
    animation:gradient-xy 15s ease infinite
}
.animate-float{
    animation:float 6s ease-in-out infinite
}
.animate-wiggle{
    animation:wiggle 1s ease-in-out infinite
}
.-z-10{
    z-index:-10
}
.feature-toggle{
    position:relative;
    overflow:hidden
}
.feature-toggle:hover{
    transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(236,72,153,.2)
}
.feature-toggle:active{
    transform:translateY(0)
}
.toggle-state{
    margin-left:.5rem;
    font-size:.8em;
    opacity:.8
}
.focus-within\:ring-2:focus-within{
    --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(2px + 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)
}
.focus-within\:ring-primary-500:focus-within{
    --tw-ring-opacity:1;
    --tw-ring-color:rgb(107 0 255/var(--tw-ring-opacity,1))
}
.focus-within\:ring-purple-500:focus-within{
    --tw-ring-opacity:1;
    --tw-ring-color:rgb(168 85 247/var(--tw-ring-opacity,1))
}
.focus-within\:ring-offset-2:focus-within{
    --tw-ring-offset-width:2px
}
.hover\:-rotate-2:hover{
    --tw-rotate:-2deg
}
.hover\:-rotate-2:hover, .hover\:rotate-2:hover{
    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))
}
.hover\:rotate-2:hover{
    --tw-rotate:2deg
}
.hover\:scale-105:hover{
    --tw-scale-x:1.05;
    --tw-scale-y:1.05
}
.hover\:scale-105:hover, .hover\:scale-110:hover{
    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))
}
.hover\:scale-110:hover{
    --tw-scale-x:1.1;
    --tw-scale-y:1.1
}
.hover\:scale-150:hover{
    --tw-scale-x:1.5;
    --tw-scale-y:1.5
}
.hover\:scale-150:hover, .hover\:transform:hover{
    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))
}
.hover\:border-gray-400:hover{
    --tw-border-opacity:1;
    border-color:rgb(156 163 175/var(--tw-border-opacity,1))
}
.hover\:bg-gray-100:hover{
    --tw-bg-opacity:1;
    background-color:rgb(243 244 246/var(--tw-bg-opacity,1))
}
.hover\:bg-gray-300:hover{
    --tw-bg-opacity:1;
    background-color:rgb(209 213 219/var(--tw-bg-opacity,1))
}
.hover\:bg-gray-50:hover{
    --tw-bg-opacity:1;
    background-color:rgb(249 250 251/var(--tw-bg-opacity,1))
}
.hover\:bg-indigo-700:hover{
    --tw-bg-opacity:1;
    background-color:rgb(67 56 202/var(--tw-bg-opacity,1))
}
.hover\:bg-primary-50:hover{
    --tw-bg-opacity:1;
    background-color:rgb(253 242 248/var(--tw-bg-opacity,1))
}
.hover\:bg-primary-600:hover{
    --tw-bg-opacity:1;
    background-color:rgb(70 23 157/var(--tw-bg-opacity,1))
}
.hover\:bg-purple-200:hover{
    --tw-bg-opacity:1;
    background-color:rgb(233 213 255/var(--tw-bg-opacity,1))
}
.hover\:bg-purple-700:hover{
    --tw-bg-opacity:1;
    background-color:rgb(126 34 206/var(--tw-bg-opacity,1))
}
.hover\:bg-red-700:hover{
    --tw-bg-opacity:1;
    background-color:rgb(185 28 28/var(--tw-bg-opacity,1))
}
.hover\:from-indigo-600:hover{
    --tw-gradient-from:#4f46e5 var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(79,70,229,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.hover\:from-pink-600:hover{
    --tw-gradient-from:#db2777 var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(219,39,119,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.hover\:from-purple-100:hover{
    --tw-gradient-from:#f3e8ff var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(243,232,255,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.hover\:from-purple-600:hover{
    --tw-gradient-from:#9333ea var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(147,51,234,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.hover\:from-purple-700:hover{
    --tw-gradient-from:#7e22ce var(--tw-gradient-from-position);
    --tw-gradient-to:rgba(126,34,206,0) var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)
}
.hover\:to-indigo-100:hover{
    --tw-gradient-to:#e0e7ff var(--tw-gradient-to-position)
}
.hover\:to-indigo-600:hover{
    --tw-gradient-to:#4f46e5 var(--tw-gradient-to-position)
}
.hover\:to-pink-600:hover{
    --tw-gradient-to:#db2777 var(--tw-gradient-to-position)
}
.hover\:to-pink-700:hover{
    --tw-gradient-to:#be185d var(--tw-gradient-to-position)
}
.hover\:to-purple-600:hover{
    --tw-gradient-to:#9333ea var(--tw-gradient-to-position)
}
.hover\:text-gray-500:hover{
    --tw-text-opacity:1;
    color:rgb(107 114 128/var(--tw-text-opacity,1))
}
.hover\:text-gray-600:hover{
    --tw-text-opacity:1;
    color:rgb(75 85 99/var(--tw-text-opacity,1))
}
.hover\:text-green-900:hover{
    --tw-text-opacity:1;
    color:rgb(20 83 45/var(--tw-text-opacity,1))
}
.hover\:text-indigo-900:hover{
    --tw-text-opacity:1;
    color:rgb(49 46 129/var(--tw-text-opacity,1))
}
.hover\:text-primary-700:hover{
    --tw-text-opacity:1;
    color:rgb(190 24 93/var(--tw-text-opacity,1))
}
.hover\:text-primary-900:hover{
    --tw-text-opacity:1;
    color:rgb(131 24 67/var(--tw-text-opacity,1))
}
.hover\:text-purple-500:hover{
    --tw-text-opacity:1;
    color:rgb(168 85 247/var(--tw-text-opacity,1))
}
.hover\:text-purple-600:hover{
    --tw-text-opacity:1;
    color:rgb(147 51 234/var(--tw-text-opacity,1))
}
.hover\:text-red-900:hover{
    --tw-text-opacity:1;
    color:rgb(127 29 29/var(--tw-text-opacity,1))
}
.hover\:opacity-80:hover{
    opacity:.8
}
.hover\:shadow-2xl:hover{
    --tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);
    --tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)
}
.hover\:shadow-2xl:hover,.hover\:shadow-lg:hover{
    box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-lg:hover{
    --tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
    --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)
}
.hover\:shadow-xl:hover{
    --tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
    --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
    box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}
.hover\:shadow-pink-500\/25:hover{
    --tw-shadow-color: rgba(127, 72, 236, 0.25);
    --tw-shadow:var(--tw-shadow-colored)
}
.hover\:shadow-purple-500\/25:hover{
    --tw-shadow-color:rgba(168,85,247,.25);
    --tw-shadow:var(--tw-shadow-colored)
}
.focus\:z-10:focus{
    z-index:10
}
.focus\:border-indigo-500:focus{
    --tw-border-opacity:1;
    border-color:rgb(99 102 241/var(--tw-border-opacity,1))
}
.focus\:border-primary-500:focus{
    --tw-border-opacity:1;
    border-color:rgb(107 0 255/var(--tw-border-opacity,1))
}
.focus\:border-purple-500:focus{
    --tw-border-opacity:1;
    border-color:rgb(168 85 247/var(--tw-border-opacity,1))
}
.focus\:outline-none:focus{
    outline:2px solid transparent;
    outline-offset:2px
}
.focus\:ring-2:focus{
    --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(2px + 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)
}
.focus\:ring-indigo-500:focus{
    --tw-ring-opacity:1;
    --tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity,1))
}
.focus\:ring-primary-500:focus{
    --tw-ring-opacity:1;
    --tw-ring-color:rgb(107 0 255/var(--tw-ring-opacity,1))
}
.focus\:ring-purple-500:focus{
    --tw-ring-opacity:1;
    --tw-ring-color:rgb(168 85 247/var(--tw-ring-opacity,1))
}
.focus\:ring-offset-2:focus{
    --tw-ring-offset-width:2px
}
.group:hover .group-hover\:translate-x-1{
    --tw-translate-x:0.25rem
}
.group:hover .group-hover\:translate-x-1,.group:hover .group-hover\:translate-x-2{
    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 .group-hover\:translate-x-2{
    --tw-translate-x:0.5rem
}
.group:hover .group-hover\:rotate-12{
    --tw-rotate:12deg
}
.group:hover .group-hover\:rotate-12,.group:hover .group-hover\:scale-110{
    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 .group-hover\:scale-110{
    --tw-scale-x:1.1;
    --tw-scale-y:1.1
}
.group:hover .group-hover\:scale-125{
    --tw-scale-x:1.25;
    --tw-scale-y:1.25
}
.group:hover .group-hover\:scale-125,.group:hover .group-hover\:scale-x-100{
    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 .group-hover\:scale-x-100{
    --tw-scale-x:1
}
@keyframes bounce{
    0%,to{
        transform:translateY(-25%);
        animation-timing-function:cubic-bezier(.8,0,1,1)
    }
    50%{
        transform:none;
        animation-timing-function:cubic-bezier(0,0,.2,1)
    }
}
@keyframes bounce-slower{
    0%,to{
        transform:translateY(0)
    }
    50%{
        transform:translateY(-5px)
    }
}
@keyframes bounce-code{
    0%,to{
        transform:translateY(-3px)
    }
    50%{
        transform:translateY(3px)
    }
}
.group:hover .group-hover\:animate-bounce{
    animation:bounce 1s infinite
}
@keyframes ping{
    75%,to{
        transform:scale(2);
        opacity:0
    }
}
.group:hover .group-hover\:animate-ping{
    animation:ping 1s cubic-bezier(0,0,.2,1) infinite
}
.group:hover .group-hover\:text-gray-600{
    --tw-text-opacity:1;
    color:rgb(75 85 99/var(--tw-text-opacity,1))
}
.group:hover .group-hover\:text-purple-200{
    --tw-text-opacity:1;
    color:rgb(233 213 255/var(--tw-text-opacity,1))
}
.group:hover .group-hover\:text-purple-500{
    --tw-text-opacity:1;
    color:rgb(168 85 247/var(--tw-text-opacity,1))
}
.group:hover .group-hover\:opacity-100{
    opacity:1
}
.group:hover .group-hover\:opacity-75{
    opacity:.75
}
.group:hover .group-hover\:duration-200{
    transition-duration:.2s
}
@media (min-width:640px){
    .sm\:my-8{
        margin-top:2rem;margin-bottom:2rem
    }
    .sm\:ml-3{
        margin-left:.75rem
    }
    .sm\:ml-4{
        margin-left:1rem
    }
    .sm\:mt-0{
        margin-top:0
    }
    .sm\:mt-20{
        margin-top:5rem
    }
    .sm\:mt-4{
        margin-top:1rem
    }
    .sm\:block{
        display:block
    }
    .sm\:inline-block{
        display:inline-block
    }
    .sm\:flex{
        display:flex
    }
    .sm\:h-screen{
        height:100vh
    }
    .sm\:w-auto{
        width:auto
    }
    .sm\:w-full{
        width:100%
    }
    .sm\:max-w-lg{
        max-width:32rem
    }
    .sm\:translate-y-0{
        --tw-translate-y:0px
    }
    .sm\:scale-100,.sm\:translate-y-0{
        transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
    .sm\:scale-100{
        --tw-scale-x:1;
        --tw-scale-y:1
    }
    .sm\:scale-95{
        --tw-scale-x:.95;
        --tw-scale-y:.95;
        transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
    .sm\:grid-cols-2{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .sm\:flex-row{
        flex-direction:row
    }
    .sm\:flex-row-reverse{
        flex-direction:row-reverse
    }
    .sm\:items-start{
        align-items:flex-start
    }
    .sm\:items-center{
        align-items:center
    }
    .sm\:justify-between{
        justify-content:space-between
    }
    .sm\:rounded-lg{
        border-radius:.5rem
    }
    .sm\:p-0{
        padding:0
    }
    .sm\:p-6{
        padding:1.5rem
    }
    .sm\:px-6{
        padding-left:1.5rem;
        padding-right:1.5rem
    }
    .sm\:py-32{
        padding-top:8rem;
        padding-bottom:8rem
    }
    .sm\:text-left{
        text-align:left
    }
    .sm\:align-middle{
        vertical-align:middle
    }
    .sm\:text-3xl{
        font-size:1.875rem;
        line-height:2.25rem
    }
    .sm\:text-5xl{
        font-size:3rem;
        line-height:1
    }
    .sm\:text-sm{
        font-size:.875rem;
        line-height:1.25rem
    }
}
@media (min-width:768px){
    .md\:mb-0{
        margin-bottom:0
    }
    .md\:flex{
        display:flex
    }
    .md\:hidden{
        display:none
    }
    .md\:grid-cols-2{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .md\:grid-cols-3{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .md\:grid-cols-4{
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
    .md\:flex-row{
        flex-direction:row
    }
    .md\:items-center{
        align-items:center
    }
    .md\:text-5xl{
        font-size:3rem;line-height:1
    }
}
@media (min-width:1024px){
    .lg\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }
    .lg\:hidden{
        display:none
    }
    .lg\:max-w-none{
        max-width:none
    }
    .lg\:grid-cols-3{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .lg\:grid-cols-4{
        grid-template-columns:repeat(4,minmax(0,1fr))
    }
    .lg\:p-8{
        padding:2rem
    }
    .lg\:px-8{
        padding-left:2rem;
        padding-right:2rem
    }

    .code-block {
        background: #1e1e1e;
        color: #fff;
        padding: 14px;
        border-radius: 10px;
        overflow-x: auto;
        font-family: monospace;
        font-size: 14px;
        line-height: 1.5;
    }
}

/* custom scrollbars for code blocks */
    :root{
        --cb-track: rgba(255,255,255,0.03);
        --cb-thumb: #566985;
        --cb-thumb-hover: #405064;

        /* global / page scrollbar colours */
        --page-track: rgba(20,21,28,0.06);
        --page-thumb: rgba(30,41,59,0.95);
        --page-thumb-hover: rgba(30,42,61,0.95);
    }
    /* Global page scrollbars (WebKit + Firefox) */
    html, body {
        scrollbar-width: thin;
        scrollbar-color: var(--page-thumb) var(--page-track);
    }

    /* WebKit browsers (Chrome, Edge, Safari) */
    html::-webkit-scrollbar,body::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    html::-webkit-scrollbar-track,body::-webkit-scrollbar-track {
        background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
        border-radius: 999px;
        margin: 6px; /* gives some breathing room on the page */
    }
    html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--page-thumb), rgba(63,21,167,0.95));
        border-radius: 999px;
        border: 3px solid rgba(255,255,255,0.02);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 6px rgba(10,10,10,0.12);
        transition: background .12s ease, transform .06s ease;
    }
    html::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover {
        background: var(--page-thumb-hover);
        transform: translateY(-1px);
    }
    /* Corner / fallback */
    html::-webkit-scrollbar-corner,body::-webkit-scrollbar-corner {
        background: transparent;
    }

.bg-black-500{
    --tw-bg-opacity:1;
    background-color:rgb(0 0 0/var(--tw-bg-opacity,1))
}