*,
:after,
:before {
    box-sizing: border-box;
    line-height: 1.5;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

:root {
    width: 100%;
    font-feature-settings: "liga", "clig";
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    font-family: var(--font-family)
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem
}

#__next,
body,
html {
    display: flex;
    flex-direction: column
}

#__next,
body {
    flex-grow: 1
}

#__next,
body,
html {
    overscroll-behavior: contain
}

main {
    flex-grow: 1
}

body {
    margin: 0;
    overflow-x: hidden;
    /* text-wrap: balance; */
    -webkit-font-smoothing: antialiased
}

img {
    display: block;
    height: auto
}

button,
input,
textarea {
    font-family: inherit;
    font-size: inherit
}

canvas,
iframe,
img,
select,
svg,
textarea,
video {
    max-width: 100%
}

[hidden] {
    display: none !important
}

p {
    margin: 0
}

a {
    text-decoration: none
}

:root {
    --c-background: var(--c-mirage);
    --c-foreground: var(--c-dark--deeper);
    --c-primary-text: var(--c-white);
    --c-secondary-text: var(--c-white);
    --c-divider: var(--c-dark--light);
    --c-accent: var(--c-yellow);
    --c-modal-background: var(--c-dark);
    --c-modal-divider: var(--c-medium);
    --c-chat-background: var(--c-mirage);

    --c-header-background: rgba(16, 23, 32, .5);
    --c-black: #000;
    --c-dark: #222f41;
    --c-dark--deep: #1a222c;
    --c-dark--deeper: #101720;
    --c-dark--light: #273342;
    --c-light: #f1f4f9;
    --c-light-normal: #e3e8f2;
    --c-medium: #93a1c8;
    --c-medium-dark: #30435c;
    --c-white: #fff;
    --c-dark--gradient: linear-gradient(90deg, rgba(26, 34, 44, 0), #1a222c);
    --c-mirage--gradient: linear-gradient(0deg, rgba(22, 30, 41, 0), #161e29);
    --c-dark-transparent: rgba(34, 47, 65, .4);
    --c-dark--deeper-transparent: rgba(15, 23, 32, .4);
    --c-mirage: #161e29;
    --c-violet-light: #bd5cf8;
    --c-violet: #7d2aeb;
    --c-violet-deep: #6435a5;
    --c-violet--gradient: linear-gradient(55.86deg, #7d2aeb 28.33%, #bd5cf8 84.19%);
    --c-yellow: #ffd304;
    --c-pink: #ff29c3;
    --c-blue: #174aff;
    --c-blue-light: #184bff;
    --c-red: #ed5353;
    --c-green: #73ee00;
    --box-shadow: 0 0 15px 0 rgba(13, 29, 74, .11);




    --c-mirage: #ffffff;
    --c-dark--deeper: #f5f5f0;
    --c-my-stylus: #c7efff;
    --c-my-stylus-yellow: #e9ff70;
    --c-my-stylus-yellow-btn: #fbd771;






    --box-shadow-violet: 0px 0px 15px 0px var(--c-violet);
    --h1-font: bold 3.5rem/3.875rem var(--font-family-bold);
    --h2-font: bold 2.5rem/3rem var(--font-family-bold);
    --h3-font: bold 2rem/2.375rem var(--font-family-bold);
    --h4-font: bold 1.5rem/1.875rem var(--font-family-bold);
    --accent-header--desktop: bold 2.5rem/3.85rem var(--font-oddval-bold);
    --accent-header--tablet: bold 2rem/3rem var(--font-oddval-bold);
    --accent-header--mobile: bold 1.5rem/2.3rem var(--font-oddval-bold);
    --accent-header-small: bold 1.125rem/1.7rem var(--font-oddval-bold);
    --accent-header-super-small: bold 1rem/1.5rem var(--font-oddval-bold);
    --accent-header--middle: bold 1.75rem/2rem var(--font-oddval-medium);
    --accent-header: var(--accent-header--desktop);
    --h1-font--mobile: bold 2.25rem/2.5rem var(--font-family-bold);
    --h2-font--mobile: bold 1.75rem/2.125rem var(--font-family-bold);
    --h3-font--mobile: bold 1.5rem/1.875rem var(--font-family-bold);
    --h4-font--mobile: bold 1.25rem/1.625rem var(--font-family-bold);
    --text-extra-big: normal 1.25rem/1.625rem var(--font-family);
    --text-extra-big-bold: normal 1.25rem/1.625rem var(--font-family-bold);
    --text-big: normal 1.125rem/1.625rem var(--font-family);
    --text-big-bold: normal 1.125rem/1.625rem var(--font-family-bold);
    --text-medium: normal 1rem/1.375rem var(--font-family);
    --text-medium-bold: normal 1rem/1.375rem var(--font-family-bold);
    --text-small: normal 0.875rem/1.125rem var(--font-family);
    --text-small-bold: normal 0.875rem/1.125rem var(--font-family-bold);
    --text-super-small: normal 0.75rem/1rem var(--font-family);
    --text-super-small-bold: normal 0.75rem/1rem var(--font-family-bold);
    --text-extra-big--mobile: normal 1.125rem/1.625rem var(--font-family);
    --text-extra-big-bold--mobile: normal 1.125rem/1.625rem var(--font-family-bold);
    --text-big--mobile: normal 1rem/1.5rem var(--font-family);
    --text-big-bold--mobile: normal 1rem/1.5rem var(--font-family-bold);
    --text-medium--mobile: normal 0.875rem/1.125rem var(--font-family);
    --text-medium-bold--mobile: normal 0.875rem/1.125rem var(--font-family-bold);
    --text-small--mobile: normal 0.75rem/1rem var(--font-family);
    --text-small-bold--mobile: normal 0.75rem/1rem var(--font-family-bold);
    --text-super-small--mobile: normal 0.6875rem/0.875rem var(--font-family);
    --text-super-small-bold--mobile: normal 0.6875rem/0.875rem var(--font-family-bold);
    --app-max-width: 120rem;
    --chat-max-width: 1024px;
    --message-max-width: 100%
}

.accent {
    color: var(--c-accent)
}

[role=button]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none
}

@media (max-width:90rem) {
    :root {
        --accent-header: var(--accent-header--tablet)
    }
}

@media (max-width:48rem) {
    :root {
        --h1-font: var(--h1-font--mobile);
        --h2-font: var(--h2-font--mobile);
        --h3-font: var(--h3-font--mobile);
        --h4-font: var(--h4-font--mobile);
        --accent-header: var(--accent-header--mobile);
        --text-extra-big: var(--text-extra-big--mobile);
        --text-extra-big-bold: var(--text-extra-big-bold--mobile);
        --text-big: var(--text-big--mobile);
        --text-big-bold: var(--text-big-bold--mobile);
        --text-medium: var(--text-medium--mobile);
        --text-medium-bold: var(--text-medium-bold--mobile);
        --text-small: var(--text-small--mobile);
        --text-small-bold: var(--text-small-bold--mobile);
        --text-super-small: var(--text-super-small--mobile);
        --text-super-small-bold: var(--text-super-small-bold--mobile)
    }
}

body {
    color: var(--c-black);
    background-color: var(--c-background)
}

input:disabled[aria-busy=true],
input:disabled[data-is-loading] {
    cursor: wait;
    filter: grayscale(100%);
    opacity: .8
}

button:disabled[data-is-loading],
button[aria-busy=true][tabindex="-1"] {
    color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: 50%
}

button:disabled[data-is-loading]>svg,
button[aria-busy=true][tabindex="-1"]>svg {
    opacity: 0
}

:global(.IH) {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    left: 0
}

.IH {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    left: 0
}

button {
    cursor: pointer
}

ul {
/*     list-style-type: none */
}

ol,
ul {
    padding: 0;
    margin: 0
}

.container {
    width: 100%;
    padding: 0 5.5rem
}

.container-wide {
    padding: 0 3rem;
    width: 100%
}

@media (max-width:90rem) {

    .container,
    .container-wide {
        padding: 0 2rem
    }
}

@media (max-width:48rem) {

    .container,
    .container-wide {
        padding: 0 1.5rem
    }
}

.hideScrollbar::-webkit-scrollbar {
    display: none
}

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