@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');

  html {
    font-family: Nunito, -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
    'Helvetica Neue',Arial,'Noto Sans',sans-serif, 'Apple Color Emoji','Segoe UI Emoji',
    'Segoe UI Symbol','Noto Color Emoji';
  }

  body {
    margin: 0;
    background-color: var(--normal-bg);
    color: var(--normal-fg);
  }

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

::backdrop{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
}
.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;
    }
}
.pointer-events-none{
    pointer-events: none;
}
.visible{
    visibility: visible;
}
.absolute{
    position: absolute;
}
.relative{
    position: relative;
}
.left-0{
    left: 0px;
}
.left-1\/2{
    left: 50%;
}
.right-2{
    right: 0.5rem;
}
.right-2\.5{
    right: 0.625rem;
}
.top-0{
    top: 0px;
}
.top-1\/2{
    top: 50%;
}
.z-10{
    z-index: 10;
}
.z-20{
    z-index: 20;
}
.z-\[999\]{
    z-index: 999;
}
.m-0{
    margin: 0px;
}
.ml-auto{
    margin-left: auto;
}
.box-border{
    box-sizing: border-box;
}
.flex{
    display: flex;
}
.inline-flex{
    display: inline-flex;
}
.aspect-square{
    aspect-ratio: 1 / 1;
}
.h-fit{
    height: -moz-fit-content;
    height: fit-content;
}
.h-full{
    height: 100%;
}
.h-min{
    height: -moz-min-content;
    height: min-content;
}
.h-screen{
    height: 100vh;
}
.min-h-\[2rem\]{
    min-height: 2rem;
}
.min-h-\[3\.5rem\]{
    min-height: 3.5rem;
}
.min-h-\[3rem\]{
    min-height: 3rem;
}
.w-fit{
    width: -moz-fit-content;
    width: fit-content;
}
.w-full{
    width: 100%;
}
.w-screen{
    width: 100vw;
}
.min-w-\[2rem\]{
    min-width: 2rem;
}
.min-w-\[3\.5rem\]{
    min-width: 3.5rem;
}
.min-w-\[3rem\]{
    min-width: 3rem;
}
.max-w-\[568px\]{
    max-width: 568px;
}
.origin-center{
    transform-origin: center;
}
.translate-x-\[-50\%\]{
    --tw-translate-x: -50%;
    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-\[-50\%\]{
    --tw-translate-y: -50%;
    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));
}
.rotate-180{
    --tw-rotate: 180deg;
    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-0{
    --tw-scale-x: 0;
    --tw-scale-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));
}
.animate-\[ripple_0\.6s_linear\]{
    animation: ripple 0.6s linear;
}
.cursor-none{
    cursor: none;
}
.cursor-pointer{
    cursor: pointer;
}
.select-none{
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.list-none{
    list-style-type: none;
}
.flex-row{
    flex-direction: row;
}
.flex-col{
    flex-direction: column;
}
.items-center{
    align-items: center;
}
.justify-center{
    justify-content: center;
}
.gap-1{
    gap: 0.25rem;
}
.gap-2{
    gap: 0.5rem;
}
.gap-4{
    gap: 1rem;
}
.overflow-hidden{
    overflow: hidden;
}
.overflow-y-auto{
    overflow-y: auto;
}
.overflow-x-hidden{
    overflow-x: hidden;
}
.rounded-\[inherit\]{
    border-radius: inherit;
}
.rounded-full{
    border-radius: 9999px;
}
.rounded-lg{
    border-radius: 0.5rem;
}
.rounded-md{
    border-radius: 0.375rem;
}
.rounded-xl{
    border-radius: 0.75rem;
}
.border{
    border-width: 1px;
}
.border-solid{
    border-style: solid;
}
.border-none{
    border-style: none;
}
.border-\[var\(--floating-border\)\]{
    border-color: var(--floating-border);
}
.\!bg-\[var\(--muted-bg\)\]{
    background-color: var(--muted-bg) !important;
}
.bg-\[var\(--bg\)\]{
    background-color: var(--bg);
}
.bg-\[var\(--floating-bg\)\]{
    background-color: var(--floating-bg);
}
.bg-\[var\(--muted-bg\)\]{
    background-color: var(--muted-bg);
}
.bg-black\/40{
    background-color: rgb(0 0 0 / 0.4);
}
.bg-transparent{
    background-color: transparent;
}
.\!p-0{
    padding: 0px !important;
}
.p-0{
    padding: 0px;
}
.p-2{
    padding: 0.5rem;
}
.px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-2\.5{
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4{
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-5{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.text-center{
    text-align: center;
}
.align-middle{
    vertical-align: middle;
}
.text-base{
    font-size: 14px;
    line-height: 20px;
}
.text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-\[var\(--bg\)\]{
    color: var(--bg);
}
.text-\[var\(--fg\)\]{
    color: var(--fg);
}
.text-\[var\(--floating-fg\)\]{
    color: var(--floating-fg);
}
.text-\[var\(--muted-fg\)\]{
    color: var(--muted-fg);
}
.opacity-10{
    opacity: 0.1;
}
.opacity-30{
    opacity: 0.3;
}
.shadow-none{
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.outline{
    outline-style: solid;
}
.outline-2{
    outline-width: 2px;
}
.outline-offset-\[-2px\]{
    outline-offset: -2px;
}
.outline-\[var\(--bg\)\]{
    outline-color: var(--bg);
}
.backdrop-blur{
    --tw-backdrop-blur: blur(8px);
    -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-colors{
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 225ms;
}
.transition-transform{
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 225ms;
}
.\!duration-150{
    transition-duration: 150ms !important;
}
.ease-in{
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

* {
  color: inherit;
  box-sizing: border-box;
}

::-moz-selection {
  background: var(--accent-bg-20);
}

::selection {
  background: var(--accent-bg-20);
}

:focus-visible {
  outline: 1px solid var(--accent-bg);
}

/* width */
::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: inherit;
}

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--accent-bg);
  box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.25);
}
.hover\:bg-\[var\(--bg\)\]:hover{
    background-color: var(--bg);
}
.hover\:bg-\[var\(--hover\)\]:hover{
    background-color: var(--hover);
}
.hover\:bg-\[var\(--hover-10\)\]:hover{
    background-color: var(--hover-10);
}
.hover\:text-\[var\(--fg\)\]:hover{
    color: var(--fg);
}

@keyframes ripple {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}