@import"https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap";*,: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 / .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 / .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:
}

*,:before,:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

:before,:after {
    --tw-content: ""
}

html,:host {
    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,samp,pre {
    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,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

ol,ul,menu {
    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
}

button,[role=button] {
    cursor: pointer
}

:disabled {
    cursor: default
}

img,svg,video,canvas,audio,iframe,embed,object {
    display: block;
    vertical-align: middle
}

img,video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.bottom-0 {
    bottom: 0
}

.bottom-14 {
    bottom: 3.5rem
}

.left-0 {
    left: 0
}

.left-1 {
    left: .25rem
}

.right-0 {
    right: 0
}

.top-0 {
    top: 0
}

.top-6 {
    top: 1.5rem
}

.top-\[2\.74rem\] {
    top: 2.74rem
}

.z-20 {
    z-index: 20
}

.z-30 {
    z-index: 30
}

.col-span-full {
    grid-column: 1 / -1
}

.m-1 {
    margin: .25rem
}

.m-2 {
    margin: .5rem
}

.m-4 {
    margin: 1rem
}

.mx-1 {
    margin-left: .25rem;
    margin-right: .25rem
}

.my-\[2rem\] {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.mb-1 {
    margin-bottom: .25rem
}

.mb-10 {
    margin-bottom: 2.5rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-\[1\.4rem\] {
    margin-bottom: 1.4rem
}

.mb-\[12rem\] {
    margin-bottom: 12rem
}

.mb-\[3rem\] {
    margin-bottom: 3rem
}

.mb-\[5rem\] {
    margin-bottom: 5rem
}

.ml-2 {
    margin-left: .5rem
}

.ml-4 {
    margin-left: 1rem
}

.ml-\[-10px\] {
    margin-left: -10px
}

.ml-\[1\.5rem\] {
    margin-left: 1.5rem
}

.ml-\[1rem\] {
    margin-left: 1rem
}

.ml-\[2\.5rem\] {
    margin-left: 2.5rem
}

.ml-\[2rem\] {
    margin-left: 2rem
}

.ml-\[3\.5rem\] {
    margin-left: 3.5rem
}

.ml-\[3rem\] {
    margin-left: 3rem
}

.ml-\[4rem\] {
    margin-left: 4rem
}

.mr-2 {
    margin-right: .5rem
}

.mr-3 {
    margin-right: .75rem
}

.mr-4 {
    margin-right: 1rem
}

.mr-\[0\.1rem\] {
    margin-right: .1rem
}

.mt-0 {
    margin-top: 0
}

.mt-1 {
    margin-top: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-3 {
    margin-top: .75rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-\[11rem\] {
    margin-top: 11rem
}

.mt-\[1rem\] {
    margin-top: 1rem
}

.mt-\[5rem\] {
    margin-top: 5rem
}

.mt-\[8\.3rem\] {
    margin-top: 8.3rem
}

.mt-\[8rem\] {
    margin-top: 8rem
}

.mt-\[9rem\] {
    margin-top: 9rem
}

.block {
    display: block
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.h-1 {
    height: .25rem
}

.h-11 {
    height: 2.75rem
}

.h-\[0px\] {
    height: 0px
}

.h-\[1\.2rem\] {
    height: 1.2rem
}

.h-\[1\.3rem\] {
    height: 1.3rem
}

.h-\[1\.5rem\] {
    height: 1.5rem
}

.h-\[1\.84rem\] {
    height: 1.84rem
}

.h-\[10\.5rem\] {
    height: 10.5rem
}

.h-\[10rem\] {
    height: 10rem
}

.h-\[11\.96rem\] {
    height: 11.96rem
}

.h-\[11\.9rem\] {
    height: 11.9rem
}

.h-\[13rem\] {
    height: 13rem
}

.h-\[1rem\] {
    height: 1rem
}

.h-\[2\.35rem\] {
    height: 2.35rem
}

.h-\[2\.5rem\] {
    height: 2.5rem
}

.h-\[2\.9rem\] {
    height: 2.9rem
}

.h-\[22rem\] {
    height: 22rem
}

.h-\[2rem\] {
    height: 2rem
}

.h-\[3\.5rem\] {
    height: 3.5rem
}

.h-\[3\.6rem\] {
    height: 3.6rem
}

.h-\[3rem\] {
    height: 3rem
}

.h-\[40rem\] {
    height: 40rem
}

.h-\[45rem\] {
    height: 45rem
}

.h-\[61px\] {
    height: 61px
}

.h-\[8rem\] {
    height: 8rem
}

.h-\[9rem\] {
    height: 9rem
}

.h-auto {
    height: auto
}

.h-fit {
    height: -moz-fit-content;
    height: fit-content
}

.h-screen {
    height: 100vh
}

.max-h-\[20rem\] {
    max-height: 20rem
}

.w-11 {
    width: 2.75rem
}

.w-\[1\.2rem\] {
    width: 1.2rem
}

.w-\[10rem\] {
    width: 10rem
}

.w-\[12\.5rem\] {
    width: 12.5rem
}

.w-\[14rem\] {
    width: 14rem
}

.w-\[15rem\] {
    width: 15rem
}

.w-\[2\.35rem\] {
    width: 2.35rem
}

.w-\[2rem\] {
    width: 2rem
}

.w-\[3rem\] {
    width: 3rem
}

.w-\[5rem\] {
    width: 5rem
}

.w-\[6rem\] {
    width: 6rem
}

.w-\[7\.9rem\] {
    width: 7.9rem
}

.w-\[7rem\] {
    width: 7rem
}

.w-\[80px\] {
    width: 80px
}

.w-\[8rem\] {
    width: 8rem
}

.w-\[9\.5rem\] {
    width: 9.5rem
}

.w-\[90\%\] {
    width: 90%
}

.w-\[97\%\] {
    width: 97%
}

.w-\[98\%\] {
    width: 98%
}

.w-\[9rem\] {
    width: 9rem
}

.w-auto {
    width: auto
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content
}

.w-full {
    width: 100%
}

.w-max {
    width: -moz-max-content;
    width: max-content
}

.w-screen {
    width: 100vw
}

.flex-grow {
    flex-grow: 1
}

.cursor-pointer {
    cursor: pointer
}

.list-disc {
    list-style-type: disc
}

.list-none {
    list-style-type: none
}

.appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.grid-flow-col {
    grid-auto-flow: column
}

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

.grid-rows-1 {
    grid-template-rows: repeat(1,minmax(0,1fr))
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.place-items-center {
    place-items: center
}

.items-center {
    align-items: center
}

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-around {
    justify-content: space-around
}

.gap-1 {
    gap: .25rem
}

.gap-10 {
    gap: 2.5rem
}

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-\[0\.2rem\] {
    gap: .2rem
}

.gap-\[0\.3rem\] {
    gap: .3rem
}

.gap-\[0\.5rem\] {
    gap: .5rem
}

.gap-\[1\.4rem\] {
    gap: 1.4rem
}

.gap-\[1\.5rem\] {
    gap: 1.5rem
}

.gap-\[1rem\] {
    gap: 1rem
}

.gap-\[2rem\] {
    gap: 2rem
}

.gap-\[4rem\] {
    gap: 4rem
}

.self-center {
    align-self: center
}

.overflow-auto {
    overflow: auto
}

.overflow-hidden {
    overflow: hidden
}

.overflow-clip {
    overflow: clip
}

.overflow-scroll {
    overflow: scroll
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-x-clip {
    overflow-x: clip
}

.overflow-y-clip {
    overflow-y: clip
}

.overflow-x-scroll {
    overflow-x: scroll
}

.overflow-y-scroll {
    overflow-y: scroll
}

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

.rounded {
    border-radius: .25rem
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-3xl {
    border-radius: 1.5rem
}

.rounded-\[3rem\] {
    border-radius: 3rem
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-md {
    border-radius: .375rem
}

.rounded-l-lg {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem
}

.rounded-r-lg {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem
}

.rounded-tl-2xl {
    border-top-left-radius: 1rem
}

.rounded-tl-xl {
    border-top-left-radius: .75rem
}

.rounded-tr-2xl {
    border-top-right-radius: 1rem
}

.rounded-tr-xl {
    border-top-right-radius: .75rem
}

.border {
    border-width: 1px
}

.border-\[0\.1px\] {
    border-width: .1px
}

.border-\[1px\] {
    border-width: 1px
}

.border-\[\#8f8f8f6e\] {
    border-color: #8f8f8f6e
}

.border-zinc-700 {
    --tw-border-opacity: 1;
    border-color: rgb(63 63 70 / var(--tw-border-opacity, 1))
}

.bg-\[\#2c2c2c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1))
}

.bg-transparent {
    background-color: transparent
}

.bg-auto {
    background-size: auto
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.p-1 {
    padding: .25rem
}

.p-10 {
    padding: 2.5rem
}

.p-2 {
    padding: .5rem
}

.p-3 {
    padding: .75rem
}

.p-4 {
    padding: 1rem
}

.p-8 {
    padding: 2rem
}

.p-\[0\.1rem\] {
    padding: .1rem
}

.px-1 {
    padding-left: .25rem;
    padding-right: .25rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-\[1\.4rem\] {
    padding-left: 1.4rem;
    padding-right: 1.4rem
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.pb-2 {
    padding-bottom: .5rem
}

.pb-5 {
    padding-bottom: 1.25rem
}

.pb-\[1rem\] {
    padding-bottom: 1rem
}

.pb-\[4rem\] {
    padding-bottom: 4rem
}

.pl-1 {
    padding-left: .25rem
}

.pl-2 {
    padding-left: .5rem
}

.pl-3 {
    padding-left: .75rem
}

.pl-5 {
    padding-left: 1.25rem
}

.pl-6 {
    padding-left: 1.5rem
}

.pl-\[1\.2rem\] {
    padding-left: 1.2rem
}

.pl-\[1\.5rem\] {
    padding-left: 1.5rem
}

.pl-\[1rem\] {
    padding-left: 1rem
}

.pl-\[2rem\] {
    padding-left: 2rem
}

.pr-1 {
    padding-right: .25rem
}

.pr-10 {
    padding-right: 2.5rem
}

.pr-2 {
    padding-right: .5rem
}

.pt-2 {
    padding-top: .5rem
}

.pt-3 {
    padding-top: .75rem
}

.pt-5 {
    padding-top: 1.25rem
}

.pt-\[10rem\] {
    padding-top: 10rem
}

.pt-\[26rem\] {
    padding-top: 26rem
}

.pt-\[3rem\] {
    padding-top: 3rem
}

.text-center {
    text-align: center
}

.font-sans {
    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"
}

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

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

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

.text-\[0\.60rem\] {
    font-size: .6rem
}

.text-\[0\.70rem\] {
    font-size: .7rem
}

.text-\[0\.75rem\] {
    font-size: .75rem
}

.text-\[1\.1rem\] {
    font-size: 1.1rem
}

.text-\[1\.8rem\] {
    font-size: 1.8rem
}

.text-\[13px\] {
    font-size: 13px
}

.text-\[14px\] {
    font-size: 14px
}

.text-\[3rem\] {
    font-size: 3rem
}

.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
}

.text-\[\#fd3a4e\] {
    --tw-text-opacity: 1;
    color: rgb(253 58 78 / var(--tw-text-opacity, 1))
}

.text-\[\#ff3448\] {
    --tw-text-opacity: 1;
    color: rgb(255 52 72 / var(--tw-text-opacity, 1))
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
}

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

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

.text-zinc-200 {
    --tw-text-opacity: 1;
    color: rgb(228 228 231 / var(--tw-text-opacity, 1))
}

.text-zinc-600 {
    --tw-text-opacity: 1;
    color: rgb(82 82 91 / var(--tw-text-opacity, 1))
}

.opacity-0 {
    opacity: 0
}

.opacity-100 {
    opacity: 1
}

.opacity-65 {
    opacity: .65
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(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-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(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)
}

.shadow-zinc-600 {
    --tw-shadow-color: #52525b;
    --tw-shadow: var(--tw-shadow-colored)
}

.drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / .04)) drop-shadow(0 4px 3px rgb(0 0 0 / .1));
    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)
}

.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)
}

.backdrop-brightness-\[0\.4\] {
    --tw-backdrop-brightness: brightness(.4);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-brightness-\[0\.6\] {
    --tw-backdrop-brightness: brightness(.6);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition-all {
    transition-property: all;
    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-200 {
    transition-duration: .2s
}

.duration-300 {
    transition-duration: .3s
}

.duration-500 {
    transition-duration: .5s
}

.duration-700 {
    transition-duration: .7s
}

.duration-75 {
    transition-duration: 75ms
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4,0,.2,1)
}

:root {
    --bg-color: #fafafa;
    --text-color: #09090B;
    --card-bg: #eeeeee;
    --card-border: #d8d8d8;
    --player-bg: linear-gradient(0deg, #fafafa 0%, #ececec 45%, #fafafa 100%);
    --navbar-bg: #fafafa;
    --scrollbar-bg: #e2e2e2;
    --scrollbar-thumb: #bebebec0;
    --slider-thumb: #fff;
    --slider-thumb-border: #252525;
    --icon-color: #09090B;
    --navigator: #fff;
    --shadow: #00000049;
    --suggest: #dedee0
}

[data-theme=dark] {
    --bg-color: #09090B;
    --text-color: #fafafa;
    --suggest: #141414;
    --card-bg: #0d0d0e;
    --card-border: #181818;
    --player-bg: linear-gradient(0deg, #09090B 0%, #09090B 45%, #09090B 100%);
    --navbar-bg: #09090B;
    --scrollbar-bg: #2e2e2e;
    --scrollbar-thumb: #313131;
    --slider-thumb: #1f1f1f;
    --slider-thumb-border: #ffffff;
    --icon-color: #fafafa;
    --navigator: #09090B;
    --shadow: #ffffff49
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
    transition: background-color ease,color ease
}

body::-webkit-scrollbar {
    display: none
}

.search {
    color: var(--navbar-bg)
}

.navbar {
    background-color: var(--navbar-bg);
    z-index: 3
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color)
}

.Player {
    background: var(--player-bg)
}

.arrow-btn,.arrow-btnn {
    color: var(--bg-color)
}

.arrow-btn:hover {
    color: var(--text-color)
}

.icon {
    color: var(--icon-color)
}

input[type=text] {
    border: 1px solid var(--card-border)
}

.scroll::-webkit-scrollbar {
    height: 5px;
    background: var(--scrollbar-bg);
    border-radius: 20px
}

.scroll::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 20px
}

.scroll::-webkit-scrollbar-thumb:hover {
    background-color: #555
}

.range {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 5px;
    outline: none;
    position: relative;
    background: var(--slider-track)
}

.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: var(--slider-thumb);
    border: 2px solid var(--slider-thumb-border);
    border-radius: 50%;
    cursor: pointer;
    translate: -1px;
    position: relative;
    z-index: 2
}

li {
    font-size: .75rem
}

li:hover {
    text-decoration: underline
}

.volume[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 30px;
    background: var(--slider-thumb);
    border: 1px solid var(--slider-thumb-border)
}

.volume[type=range] {
    display: flex;
    -webkit-appearance: none;
    height: 2px
}

.scroll-smooth {
    scroll-behavior: smooth
}

.scroll-hide::-webkit-scrollbar {
    display: none
}

.scroll-hide {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.blur-active {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: -webkit-backdrop-filter .3s ease;
    transition: backdrop-filter .3s ease;
    transition: backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease
}

.footer {
    border-top: 1px solid var(--card-border)
}

.profile {
    box-shadow: 0 0 35px var(--card-border)
}

.bg {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABmJLR0QA/wD/AP+gvaeTAAABt0lEQVRYhe3Vv2tTURTA8U9tatq0sdFWRETEwcFfiOgggiguDg4u7p39HwT/ATc3/wPFQWf/Dh1UJFQoaAcxVmtr2jjcU1pt38t7Bclyv3C5gZN73veec5JHJpPJZDKZzIjoYG7UEv/SwW18xCDWMp7gxAi9wHU8wlPbcjvXMm7UTdrYp0wbx3EWM3iHBXxHs+DMPF7iCrpVHzS+D7l7mMK1ELwaqxH5WrhQcHYKs3hV9WEHasotSJWYxxFMxz6Hg1JlJ4bkuK9G56p8sYXD+BkyTfTjc0dqcQPrITkYkq+N53H2LR4rafnYkGSXcF6q0GZIzWIJ53BUmsUWPmESa7gzJO9OetKIvN8rWDaDt3ATZ3BSuvFESPVxSmp1W5qtzdj7OF1DsIljeLFXsKzFd0OuHUmWpPbNYNXfszcZFxjDrxpyW1wuCpQJ/giRplSdDWnOSG35JlVsWupET/rRre/KNJxuUaCsxV1ptnr4EvtnfMWHEO5Ll1zFYsTWpL+fqgzwQHr77KKsgl08w0XbldoSXsQKfoeQkFvBoYpiG3iDh3hd8UxtxqVLFr09MplMJpPJZP4vfwC7GlB+/KEorgAAAABJRU5ErkJggg==);
    margin-left: .5rem;
    height: 72px;
    width: 72px;
    -o-object-fit: cover;
    object-fit: cover
}

[data-theme=dark] .bg {
    background: url("data:image/svg+xml,%3csvg%20viewBox='0%200%2040%2040'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6.63%2022.82a.74.74%200%200%201%200%20.21l-.17%201.3a.15.15%200%200%201-.29%200L6%2023a.74.74%200%200%201%200-.21l.19-1.51a.12.12%200%200%201%20.24%200Zm.84-2.49a.1.1%200%200%200-.19%200L7%2022.83V23l.27%202.27a.13.13%200%200%200%20.25%200L7.77%2023v-.19Zm1.08-.46a.12.12%200%200%200-.23%200L8%2022.77a1.61%201.61%200%200%200%200%20.31l.26%202.62a.14.14%200%200%200%20.28%200l.26-2.62a1.61%201.61%200%200%200%200-.31Zm1.17-.13a.15.15%200%200%200-.3%200l-.24%203a1.31%201.31%200%200%200%200%20.28l.24%202.73a.15.15%200%200%200%20.3%200l.28-2.69a2.53%202.53%200%200%200%200-.28Zm1.15.14a.16.16%200%200%200-.32%200l-.24%202.91v.27l.24%202.75a.16.16%200%200%200%20.32%200l.23-2.75a1.22%201.22%200%200%200%200-.27ZM12%2018.16a.19.19%200%200%200-.38%200l-.22%204.67a1.21%201.21%200%200%200%200%20.19l.21%202.8a.19.19%200%200%200%20.38%200l.21-2.8v-.19Zm1.05-1a.19.19%200%200%200-.37%200l-.22%205.65V23l.22%202.81a.19.19%200%200%200%20.37%200L13.3%2023a1.21%201.21%200%200%200%200-.19Zm1.25-.48a.22.22%200%200%200-.43%200l-.19%206.15V23l.19%202.82a.22.22%200%200%200%20.43%200l.22-2.82a.76.76%200%200%200%200-.15Zm1.17-.2a.25.25%200%200%200-.5%200l-.23%206.33a1.21%201.21%200%200%200%200%20.19l.26%202.86a.25.25%200%200%200%20.5%200l.24-2.86a1.21%201.21%200%200%200%200-.19Zm1.18.12a.29.29%200%200%200-.58%200l-.2%206.22a1%201%200%200%200%200%20.17l.19%202.81a.29.29%200%200%200%20.58%200l.24-2.8a.49.49%200%200%200%200-.17Zm1.22.25a.29.29%200%200%200-.58%200l-.2%206a1%201%200%200%200%200%20.17l.19%202.8a.29.29%200%200%200%20.58%200L18.1%2023a1%201%200%200%200%200-.17Zm2.33-1.75a.35.35%200%200%200-.69%200l-.14%207.75V23l.14%202.71a.35.35%200%200%200%20.69%200l.18-2.71v-.11Zm-1.19.63a.3.3%200%200%200-.59%200l-.19%207.1V23l.19%202.79a.3.3%200%200%200%20.59%200l.23-2.79v-.15Zm2%2010.3h9.46a3.41%203.41%200%201%200%20.06-6.82%203.51%203.51%200%200%200-1.17.2.16.16%200%200%201-.21-.14%206.11%206.11%200%200%200-8.34-4.95.34.34%200%200%200-.21.3v11a.4.4%200%200%200%20.47.43Z'%20fill='%23ffffff'%20class='fill-000000'%3e%3c/path%3e%3c/svg%3e")
}

[data-theme=dark] .song-info,[data-theme=dark] .b-bottom {
    border-bottom: 1px solid #2b2b2b
}

[data-theme=dark] .fy {
    color: #828283
}

[data-theme=dark] .Musi {
    color: #fafafa
}

.fy {
    color: #848485
}

.Musi {
    color: #09090b
}

.Musi,.fy {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
    font-weight: bolder
}

.imgs:hover {
    filter: brightness(.5)
}

.imgs:hover .play {
    display: flex
}

.song-info,.b-bottom {
    border-bottom: 1px solid #e4e4e4
}

.song-info:hover {
    background-color: var(--slider-thumb);
    border: 1px solid var(--scrollbar-thumb);
    cursor: pointer;
    border-radius: 5px
}

.search-btn {
    background: var(--text-color)
}

.footer-section {
    padding-top: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 4rem;
    border-top: 1px solid #2b2b2b
}

.Navigator {
    background: var(--navigator)
}

.theme-toggle {
    width: 40px;
    height: 40px;
    background-color: var(--bg-color);
    border-radius: 25px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform .2s ease-in-out
}

.theme-toggle:hover {
    transform: scale(1.1)
}

.theme-icon {
    font-size: 24px;
    transition: color .3s ease-in-out
}

.sun {
    color: #fbc02d
}

.moon {
    color: #ffe600
}

.liked {
    --tw-shadow: 0 5px 50px -12px var(--shadow);
    --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)
}

.suggestionSection {
    background: var(--suggest);
    border: 1px solid var(--card-border);
    -webkit-backdrop-filter: var(--tw-shadow-color);
    backdrop-filter: var(--tw-shadow-color)
}

.hoover {
    background-color: var(--card-bg)
}

.hoover:hover {
    background: var(--card-border)
}

.toggle-btn {
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700
}

.lyrics-content {
    text-align: center;
    margin-top: 15px;
    padding: 10px 20px 0;
    background: var(--card-bg);
    border-radius: 8px solid var(--card-border);
    overflow-y: auto
}

.hover\:scale-110:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:scale-125:hover {
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:text-\[\#fd3a4e\]:hover {
    --tw-text-opacity: 1;
    color: rgb(253 58 78 / var(--tw-text-opacity, 1))
}

.hover\:text-\[\#ff3448\]:hover {
    --tw-text-opacity: 1;
    color: rgb(255 52 72 / var(--tw-text-opacity, 1))
}

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

.hover\:underline:hover {
    text-decoration-line: underline
}

.hover\:brightness-\[0\.65\]:hover {
    --tw-brightness: brightness(.65);
    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)
}

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

.active\:scale-90:active {
    --tw-scale-x: .9;
    --tw-scale-y: .9;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.active\:text-\[\#fd3a4e\]:active {
    --tw-text-opacity: 1;
    color: rgb(253 58 78 / var(--tw-text-opacity, 1))
}

@media (min-width: 640px) {
    .sm\:grid-rows-2 {
        grid-template-rows:repeat(2,minmax(0,1fr))
    }

    .sm\:pl-\[3rem\] {
        padding-left: 3rem
    }

    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }
}

@media (min-width: 1024px) {
    .lg\:bottom-0 {
        bottom:0
    }

    .lg\:left-auto {
        left: auto
    }

    .lg\:top-\[4\.5rem\] {
        top: 4.5rem
    }

    .lg\:m-3 {
        margin: .75rem
    }

    .lg\:mx-8,.lg\:mx-\[2rem\] {
        margin-left: 2rem;
        margin-right: 2rem
    }

    .lg\:my-\[4rem\] {
        margin-top: 4rem;
        margin-bottom: 4rem
    }

    .lg\:mb-0 {
        margin-bottom: 0
    }

    .lg\:mb-\[4rem\] {
        margin-bottom: 4rem
    }

    .lg\:ml-1 {
        margin-left: .25rem
    }

    .lg\:ml-4 {
        margin-left: 1rem
    }

    .lg\:ml-\[2\.8rem\] {
        margin-left: 2.8rem
    }

    .lg\:ml-\[3\.5rem\] {
        margin-left: 3.5rem
    }

    .lg\:ml-\[3rem\] {
        margin-left: 3rem
    }

    .lg\:ml-\[4rem\] {
        margin-left: 4rem
    }

    .lg\:ml-\[5\.5rem\] {
        margin-left: 5.5rem
    }

    .lg\:ml-\[6\.5rem\] {
        margin-left: 6.5rem
    }

    .lg\:mt-4 {
        margin-top: 1rem
    }

    .lg\:mt-8 {
        margin-top: 2rem
    }

    .lg\:mt-\[6em\] {
        margin-top: 6em
    }

    .lg\:mt-\[6rem\] {
        margin-top: 6rem
    }

    .lg\:block {
        display: block
    }

    .lg\:flex {
        display: flex
    }

    .lg\:hidden {
        display: none
    }

    .lg\:h-\[12rem\] {
        height: 12rem
    }

    .lg\:h-\[15rem\] {
        height: 15rem
    }

    .lg\:h-\[17rem\] {
        height: 17rem
    }

    .lg\:h-\[3\.5rem\] {
        height: 3.5rem
    }

    .lg\:h-\[4\.5rem\] {
        height: 4.5rem
    }

    .lg\:h-\[40rem\] {
        height: 40rem
    }

    .lg\:h-\[6rem\] {
        height: 6rem
    }

    .lg\:w-\[12rem\] {
        width: 12rem
    }

    .lg\:w-\[15rem\] {
        width: 15rem
    }

    .lg\:w-\[36\%\] {
        width: 36%
    }

    .lg\:w-\[70\%\] {
        width: 70%
    }

    .lg\:w-\[8rem\] {
        width: 8rem
    }

    .lg\:w-auto {
        width: auto
    }

    .lg\:w-full {
        width: 100%
    }

    .lg\:w-max {
        width: -moz-max-content;
        width: max-content
    }

    .lg\:-translate-x-\[37rem\] {
        --tw-translate-x: -37rem;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:cursor-pointer {
        cursor: pointer
    }

    .lg\:grid-flow-col-dense {
        grid-auto-flow: column dense
    }

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

    .lg\:grid-cols-none {
        grid-template-columns: none
    }

    .lg\:grid-rows-2 {
        grid-template-rows: repeat(2,minmax(0,1fr))
    }

    .lg\:flex-row {
        flex-direction: row
    }

    .lg\:flex-wrap {
        flex-wrap: wrap
    }

    .lg\:items-center {
        align-items: center
    }

    .lg\:justify-center {
        justify-content: center
    }

    .lg\:gap-10 {
        gap: 2.5rem
    }

    .lg\:gap-2 {
        gap: .5rem
    }

    .lg\:gap-3\.5 {
        gap: .875rem
    }

    .lg\:gap-\[\.35rem\] {
        gap: .35rem
    }

    .lg\:gap-\[0\.66rem\] {
        gap: .66rem
    }

    .lg\:gap-\[1\.5rem\] {
        gap: 1.5rem
    }

    .lg\:gap-\[20rem\] {
        gap: 20rem
    }

    .lg\:gap-\[2rem\] {
        gap: 2rem
    }

    .lg\:gap-\[4rem\] {
        gap: 4rem
    }

    .lg\:overflow-auto {
        overflow: auto
    }

    .lg\:rounded {
        border-radius: .25rem
    }

    .lg\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .lg\:px-2 {
        padding-left: .5rem;
        padding-right: .5rem
    }

    .lg\:pl-5 {
        padding-left: 1.25rem
    }

    .lg\:pl-\[2\.5rem\] {
        padding-left: 2.5rem
    }

    .lg\:pl-\[2rem\] {
        padding-left: 2rem
    }

    .lg\:pl-\[3rem\] {
        padding-left: 3rem
    }

    .lg\:pt-5 {
        padding-top: 1.25rem
    }

    .lg\:pt-\[6rem\] {
        padding-top: 6rem
    }

    .lg\:text-center {
        text-align: center
    }

    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem
    }

    .lg\:text-\[0\.75rem\] {
        font-size: .75rem
    }

    .lg\:text-\[0\.875rem\] {
        font-size: .875rem
    }

    .lg\:text-\[0\.90rem\] {
        font-size: .9rem
    }

    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .lg\:text-sm {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .lg\:font-bold {
        font-weight: 700
    }

    .lg\:font-semibold {
        font-weight: 600
    }

    .lg\:shadow-xl {
        --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(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)
    }

    .lg\:hover\:scale-105:hover {
        --tw-scale-x: 1.05;
        --tw-scale-y: 1.05;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:hover\:scale-110:hover {
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:hover\:text-\[\#fd3a4e\]:hover {
        --tw-text-opacity: 1;
        color: rgb(253 58 78 / var(--tw-text-opacity, 1))
    }

    .lg\:hover\:text-\[\#ff3448\]:hover {
        --tw-text-opacity: 1;
        color: rgb(255 52 72 / var(--tw-text-opacity, 1))
    }
}