@charset "UTF-8";
@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SFProDisplay-Regular.eot");
    src: local("SF Pro Display"), url("../fonts/SFProDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay-Regular.woff2") format("woff2"), url("../fonts/SFProDisplay-Regular.woff") format("woff"), url("../fonts/SFProDisplay-Regular.ttf") format("truetype"), url("../fonts/SFProDisplay-Regular.svg#SFProDisplay-Regular") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SFProDisplay-Medium.eot");
    src: local("SF Pro Display"), url("../fonts/SFProDisplay-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay-Medium.woff2") format("woff2"), url("../fonts/SFProDisplay-Medium.woff") format("woff"), url("../fonts/SFProDisplay-Medium.ttf") format("truetype"), url("../fonts/SFProDisplay-Medium.svg#SFProDisplay-Medium") format("svg");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SFProDisplay-Semibold.eot");
    src: local("SF Pro Display"), url("../fonts/SFProDisplay-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProDisplay-Semibold.woff2") format("woff2"), url("../fonts/SFProDisplay-Semibold.woff") format("woff"), url("../fonts/SFProDisplay-Semibold.ttf") format("truetype"), url("../fonts/SFProDisplay-Semibold.svg#SFProDisplay-Semibold") format("svg");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Text";
    src: url("../fonts/SFProText-Regular.eot");
    src: local("SF Pro Text"), url("../fonts/SFProText-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProText-Regular.woff2") format("woff2"), url("../fonts/SFProText-Regular.woff") format("woff"), url("../fonts/SFProText-Regular.ttf") format("truetype"), url("../fonts/SFProText-Regular.svg#SFProText-Regular") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Text";
    src: url("../fonts/SFProText-Medium.eot");
    src: local("SF Pro Text"), url("../fonts/SFProText-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProText-Medium.woff2") format("woff2"), url("../fonts/SFProText-Medium.woff") format("woff"), url("../fonts/SFProText-Medium.ttf") format("truetype"), url("../fonts/SFProText-Medium.svg#SFProText-Medium") format("svg");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Text";
    src: url("../fonts/SFProText-Semibold.eot");
    src: local("SF Pro Text"), url("../fonts/SFProText-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/SFProText-Semibold.woff2") format("woff2"), url("../fonts/SFProText-Semibold.woff") format("woff"), url("../fonts/SFProText-Semibold.ttf") format("truetype"), url("../fonts/SFProText-Semibold.svg#SFProText-Semibold") format("svg");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Mono";
    src: url("../fonts/SFMono-Regular.eot");
    src: local("SF Mono"), url("../fonts/SFMono-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/SFMono-Regular.woff2") format("woff2"), url("../fonts/SFMono-Regular.woff") format("woff"), url("../fonts/SFMono-Regular.ttf") format("truetype"), url("../fonts/SFMono-Regular.svg#SFMono-Regular") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*::after,
*::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

ul,
ol {
    padding: 0;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

input,
button,
textarea,
select {
    font: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
}

address {
    font-style: normal;
}

html {
    scroll-padding-top: 75px;
}

@media (min-width: 1024px) {
    html {
        scroll-padding-top: 200px;
    }
}

html,
body {
    height: 100%;
}

body {
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: var(--default);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

body.lock {
    height: 100vh;
    overflow: hidden;
    position: relative;
    touch-action: none;
    -ms-touch-action: none;
}

body.overlay {
    height: 100%;
    overflow: hidden;
    position: relative;
    touch-action: none;
    -ms-touch-action: none;
}

body.overlay::before {
    content: "";
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.72);
    z-index: 101;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

main {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.container {
    max-width: 1264px;
    padding: 0 32px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .container {
        padding: 0 16px;
    }
}

@media (max-width: 389px) {
    .container {
        padding: 0 10px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "SF Pro Display", Helvetica, Arial, sans-serif;
    font-style: normal;
}

.hidden {
    overflow: hidden;
}

button {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

mark {
    font-family: "SF Mono", monospace;
    letter-spacing: normal;
    background-color: transparent;
    color: inherit;
    word-wrap: break-word;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid var(--g300);
    background-color: var(--g50);
}

section + section {
    margin-top: 100px;
}

@media (max-width: 768px) {
    section + section {
        margin-top: 80px;
    }
}

.home {
    padding-bottom: 60px;
}

.drop-down {
    display: inline-block;
    border-radius: 12px;
    border: 1px solid var(--g300);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-transition: background-color 0.2s, border-color 0.2s;
    -o-transition: background-color 0.2s, border-color 0.2s;
    transition: background-color 0.2s, border-color 0.2s;
}

.drop-down select {
    padding: 14px 36px 14px 16px;
    background-color: transparent;
    border: none;
    outline: transparent;
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.33;
    color: var(--g700);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

.drop-down svg {
    width: 12px;
    height: 12px;
    stroke: var(--g700);
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 12px;
    z-index: 0;
    -webkit-transition: stroke 0.2s;
    -o-transition: stroke 0.2s;
    transition: stroke 0.2s;
}

.star {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.star svg {
    width: 100%;
    height: 100%;
    fill: var(--accent);
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px);
}

@media (min-width: 1024px) {
    .no-touch .drop-down:hover {
        border-color: var(--g400);
        background-color: var(--g50);
    }

    .no-touch .drop-down:hover select {
        color: var(--g900);
    }

    .no-touch .drop-down:hover svg {
        stroke: var(--g900);
    }

    .no-touch .warning a:hover {
        opacity: 0.7;
    }
}

.footer {
    padding: 0 24px 24px;
}

@media (max-width: 1099px) {
    .footer {
        padding: 0;
    }
}

.footer__wrap {
    background-color: var(--g900);
    border-radius: 32px;
    color: var(--default);
}

@media (max-width: 1099px) {
    .footer__wrap {
        border-radius: 0;
    }
}

.footer__top {
    padding: 32px 0 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .footer__top {
        padding: 40px 0 20px;
    }
}

.footer__col:not(:last-child) {
    margin-right: 30px;
}

@media (max-width: 767px) {
    .footer__col:not(:last-child) {
        width: 100%;
        padding-bottom: 28px;
        border-bottom: 1px solid var(--g800);
        margin: 0 0 20px;
    }
}

@media (max-width: 1023px) {
    .footer__col:first-child {
        width: 100%;
        margin: 0 0 32px;
    }
}

@media (max-width: 767px) {
    .footer__col:first-child {
        padding-bottom: 0;
        border-bottom: none;
    }
}

.footer__logo {
    display: block;
    margin-bottom: 13px;
}

.footer__logo.logo span {
    color: var(--default);
}

.footer__description {
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.24px;
    color: var(--g600);
}

.footer__title {
    display: block;
    padding-top: 6px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: -0.442px;
    margin-bottom: 12px;
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

@media (max-width: 1023px) {
    .footer__title {
        padding-top: 0;
    }
}

.footer__link {
    display: block;
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.33;
    letter-spacing: -0.24px;
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

.footer__link svg {
    display: inline-block;
    width: 9px;
    height: 9px;
    fill: var(--g600);
    opacity: 0;
    margin-left: 3px;
    -webkit-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    transform: translateX(-5px);
    -webkit-transition: opacity 0.15s, -webkit-transform 0.35s;
    transition: opacity 0.15s, -webkit-transform 0.35s;
    -o-transition: opacity 0.15s, transform 0.35s;
    transition: opacity 0.15s, transform 0.35s;
    transition: opacity 0.15s, transform 0.35s, -webkit-transform 0.35s;
}

.footer__bottom {
    padding: 10px 0;
    border-top: 1px solid var(--g800);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.footer__bottom .sn__sublist {
    padding-bottom: 16px;
    top: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}

.footer__lang {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.24px;
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    position: relative;
    cursor: pointer;
}

@media (max-width: 389px) {
    .footer__lang {
        padding: 8px;
    }
}

.footer__lang::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("../images/lang-icon.svg");
    margin-right: 12px;
}

@media (max-width: 389px) {
    .footer__lang::before {
        margin-right: 6px;
    }
}

@media (min-width: 1024px) {
    .no-touch .footer__link:hover {
        color: var(--g600);
    }

    .no-touch .footer__link:hover svg {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    .no-touch .footer__lang:hover {
        background-color: var(--g800);
    }

    .no-touch a.footer__title:hover {
        color: var(--g500);
    }
}

.breadcrumbs {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: var(--g900);
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .breadcrumbs {
        margin-bottom: 12px;
    }
}

.breadcrumbs__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (max-width: 1023px) {
    .breadcrumbs__list {
        display: none;
    }
}

.breadcrumbs__item {
    padding-right: 36px;
    position: relative;
}

.breadcrumbs__item::after {
    content: "";
    width: 9px;
    height: 9px;
    background-image: url("./../images/arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.breadcrumbs__item:last-child::after {
    display: none;
}

.breadcrumbs__link {
    display: inline-block;
    color: inherit;
    -webkit-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}

.breadcrumbs span.breadcrumbs__link {
    cursor: default;
    color: var(--g700);
}

.breadcrumbs__prevpage {
    display: none;
    padding: 5px 0 5px 26px;
    position: relative;
}

.breadcrumbs__prevpage::before {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url("./../images/arrow.svg");
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 1023px) {
    .breadcrumbs__prevpage {
        display: inline-block;
    }
}

@media (min-width: 1024px) {
    .no-touch a.breadcrumbs__link:hover {
        color: var(--g700);
    }
}

.btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 100px;
    border: 1px solid var(--g300);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: var(--g900);
    text-align: center;
    -webkit-transition: border-color 0.2s, background-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
    -o-transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s;
    transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
}

.btn--color {
    color: var(--default);
    background-color: var(--accent);
    border-color: transparent;
}

@media (min-width: 1024px) {
    .no-touch .btn:hover {
        background-color: var(--g50);
        border-color: var(--g900);
        -webkit-box-shadow: inset 0 0 0 1px var(--g900);
        box-shadow: inset 0 0 0 1px var(--g900);
    }

    .no-touch .btn--color:hover {
        background-color: #194cc7;
        border-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

.page {
    padding: 145px 0 132px;
}

@media (max-width: 1439px) {
    .page {
        padding-bottom: 108px;
    }
}

@media (max-width: 1023px) {
    .page {
        padding-top: 112px;
    }
}

@media (max-width: 767px) {
    .page {
        padding: 100px 0 80px;
    }
}

.logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.logo img {
    width: 40px;
    height: 40px;
    margin-right: 16px;
}

@media (max-width: 389px) {
    .logo img {
        margin-right: 10px;
    }
}

.logo span {
    font-family: "SF Pro Rounded", "SF Pro Display";
    font-weight: 600;
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: 0.374px;
    color: var(--g900);
}

@media (max-width: 389px) {
    .logo span {
        font-size: 16px;
    }
}

.menu {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 1099px) {
    .menu {
        position: static;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.menu__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 1099px) {
    .menu__list {
        display: block;
    }
}

.menu__item {
    position: relative;
}

@media (max-width: 1099px) {
    .menu__item {
        border-bottom: 1px solid var(--g300);
    }
}

.menu__item:not(:last-child) {
    margin-right: 8px;
}

@media (max-width: 1099px) {
    .menu__item:not(:last-child) {
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    .menu__item:last-child {
        border-bottom: transparent;
    }
}

.menu__link {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    color: var(--g700);
    -webkit-transition: background-color 0.2s, color 0.2s;
    -o-transition: background-color 0.2s, color 0.2s;
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
}

@media (max-width: 1179px) {
    .menu__link {
        padding: 12px;
    }
}

@media (max-width: 1099px) {
    .menu__link {
        padding: 20px 0;
        border-radius: 0;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.65;
        letter-spacing: -0.442px;
        color: var(--g900);
        position: relative;
    }
}

.menu__link--active {
    color: var(--g900);
}

.menu__link--active.menu__link--withicon svg {
    fill: var(--g900);
}

.menu__link--more {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 1099px) {
    .menu__link--more {
        border-bottom: 1px solid var(--g300);
    }
}

.menu__link--more svg {
    width: 12px;
    height: 12px;
    stroke: var(--g700);
    margin-left: 8px;
    -webkit-transition: stroke 0.2s, -webkit-transform 0.2s;
    transition: stroke 0.2s, -webkit-transform 0.2s;
    -o-transition: transform 0.2s, stroke 0.2s;
    transition: transform 0.2s, stroke 0.2s;
    transition: transform 0.2s, stroke 0.2s, -webkit-transform 0.2s;
}

@media (max-width: 1099px) {
    .menu__link--more svg {
        display: none;
    }
}

.menu__link--withicon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.menu__link--withicon svg {
    width: 14px;
    height: 14px;
    margin-right: 10px;
    fill: var(--default);
    -webkit-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-transition: fill 0.2s;
    -o-transition: fill 0.2s;
    transition: fill 0.2s;
    fill: var(--g900);
}

@media (min-width: 1100px) {
    .menu__link--withicon svg {
        fill: var(--g700);
    }
}

@media (min-width: 1100px) {
    .menu__sublist {
        padding-top: 14px;
        position: absolute;
        left: 0;
        opacity: 0;
        visibility: hidden;
    }

    .menu__sublist--active {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 1099px) {
    .menu__sublist .menu__item {
        border-bottom: none;
    }

    .menu__sublist .menu__item:last-child .menu__link::after {
        display: none;
    }

    .menu__sublist .menu__link {
        padding-left: 24px;
    }

    .menu__sublist .menu__link::after {
        content: "";
        height: 1px;
        background-color: var(--g300);
        position: absolute;
        left: 24px;
        right: 0;
        bottom: 0;
    }
}

@media (min-width: 1100px) {
    .menu__sublist-wrap {
        min-width: 170px;
        padding: 10px;
        border-radius: 12px;
        background-color: var(--default);
        -webkit-box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        -webkit-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        transition: opacity 0.2s;
    }

    .menu__sublist-wrap .menu__item {
        margin-right: 0;
    }

    .menu__sublist-wrap .menu__link {
        color: var(--g700);
    }
}

@media (min-width: 1100px) {
    .no-touch .menu__link:hover {
        background-color: var(--g100);
        color: var(--g900);
    }
}

@media (min-width: 1024px) {
    .no-touch .menu__item:hover .menu__link--more svg {
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }

    .no-touch .menu__item:hover .menu__sublist {
        opacity: 1;
        visibility: visible;
    }

    .no-touch .menu__link--more:hover svg {
        stroke: var(--g900);
    }

    .no-touch .menu__link--withicon:hover svg {
        fill: var(--g900);
    }

    .no-touch .menu__sublist-wrap .menu-link:hover {
        background-color: transparent;
        color: var(--g900);
    }
}

@media (max-width: 1099px) and (min-width: 1023px) {
    .no-touch .menu__link {
        -webkit-transition: color 0.2s;
        -o-transition: color 0.2s;
        transition: color 0.2s;
    }

    .no-touch .menu__link:hover {
        color: var(--g700);
    }

    .no-touch .menu__link--withicon:hover svg {
        fill: var(--g700);
    }
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--g200);
    z-index: 100;
    background-color: var(--default);
}

@media (max-width: 1099px) {
    .header {
        height: 60px;
    }
}

@media (max-width: 767px) {
    .header.menu-open {
        background-color: var(--default) !important;
        border-bottom-color: var(--g300);
    }

    .header.menu-open .header__logo span {
        color: var(--g900) !important;
    }

    .header.menu-open .header__btn {
        background-color: transparent !important;
        color: var(--g900) !important;
    }

    .header.menu-open .header__btn::before, .header.menu-open .header__btn::after {
        background-color: var(--g900) !important;
    }
}

.header.menu-open .header__btn {
    color: var(--default);
}

@media (max-width: 1099px) and (min-width: 768px) {
    .header.menu-open .header__btn {
        background-color: var(--g800);
    }
}

@media (max-width: 767px) {
    .header.menu-open .header__btn {
        background-color: transparent;
        color: var(--g900);
    }
}

.header.menu-open .header__btn span {
    display: none;
}

.header.menu-open .header__btn::before {
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    top: 50%;
    background-color: var(--default);
}

@media (max-width: 767px) {
    .header.menu-open .header__btn::before {
        background-color: var(--g900);
    }
}

.header.menu-open .header__btn::after {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    -ms-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: 50%;
    background-color: var(--default);
}

@media (max-width: 767px) {
    .header.menu-open .header__btn::after {
        background-color: var(--g900);
    }
}

.header.menu-open .header__inner {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.header__wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

.header__btn {
    display: none;
    background-color: transparent;
    border: none;
    padding: 12px 48px 12px 12px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
    text-align: center;
    color: var(--g900);
    position: relative;
    margin-right: -12px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .header__btn {
        margin-right: 0;
        padding-right: 36px;
    }
}

.header__btn::before, .header__btn::after,
.header__btn span {
    content: "";
    display: inline-block;
    height: 2px;
    width: 18px;
    background-color: var(--g900);
    position: absolute;
    right: 15px;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    -o-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

@media (max-width: 767px) {
    .header__btn::before, .header__btn::after,
    .header__btn span {
        right: 3px;
    }
}

.header__btn::before {
    top: 15px;
}

.header__btn::after {
    bottom: 15px;
}

.header__btn span {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media (max-width: 1099px) {
    .header__btn {
        display: block;
    }
}

@media (max-width: 1099px) {
    .header__inner {
        max-width: 375px;
        width: 100%;
        padding: 0 20px;
        border-radius: 12px;
        background-color: var(--default);
        -webkit-box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        position: fixed;
        right: 20px;
        top: 72px;
        -webkit-transform: translateX(150%);
        -ms-transform: translateX(150%);
        transform: translateX(150%);
        overflow-y: auto;
    }
}

@media (max-width: 767px) {
    .header__inner {
        max-width: 100%;
        padding: 0 16px;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        left: 0;
        right: 0;
        top: 60px;
        bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

@media (max-width: 1099px) {
    .header__socials {
        padding: 8px 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .header__socials {
        margin: auto 0 30px;
    }
}

@media (min-width: 1100px) and (max-width: 1180px) {
    .header .sn__link {
        width: 44px;
        height: 44px;
        padding: 10px;
    }
}

.header .sn__link svg {
    fill: var(--g700);
}

.header--home {
    position: absolute;
    padding: 64px 0 0;
    border: none;
    background-color: transparent;
}

@media (max-width: 1099px) {
    .header--home {
        padding: 8px 0;
    }
}

@media (max-width: 1299px) and (min-width: 1100px) {
    .header--home .header__wrap {
        padding: 0 20px;
    }
}

.header--home .header__logo span {
    color: var(--default);
}

.header--home .header__btn {
    color: var(--default);
}

.header--home .header__btn span, .header--home .header__btn::before, .header--home .header__btn::after {
    background-color: var(--default);
}

@media (min-width: 1100px) {
    .header--home .menu__link {
        color: var(--default);
    }

    .header--home .menu__link--more svg {
        stroke: var(--default);
    }

    .header--home .menu__link--withicon svg {
        fill: var(--default);
    }

    .header--home .menu__sublist .menu__link {
        background-color: transparent;
        color: var(--g700);
    }

    .header--home .sn__link svg {
        fill: var(--default);
    }
}

@media (max-width: 767px) {
    .header--home.menu-open {
        position: fixed;
    }
}

@media (min-width: 1024px) {
    .no-touch .header .sn__link:hover {
        background-color: var(--g100);
    }

    .no-touch .header .sn__link:hover svg {
        fill: var(--g900);
    }

    .no-touch .header--home .sn__link:hover {
        background-color: var(--g800);
    }

    .no-touch .header--home .sn__link:hover svg {
        fill: var(--default);
    }
}

@media (min-width: 1100px) {
    .no-touch .header--home .menu__link:hover {
        background-color: var(--g800);
        color: var(--default);
    }

    .no-touch .header--home .menu__link--more:hover svg {
        stroke: var(--default);
    }

    .no-touch .header--home .menu__link--withicon:hover svg {
        fill: var(--default);
    }

    .no-touch .header--home .menu__sublist .menu__link:hover {
        background-color: var(--g100);
        color: var(--g900);
    }
}

.sn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.sn--gray .sn__link svg {
    fill: var(--g700);
}

.sn__item {
    position: relative;
}

.sn__item:not(:last-child) {
    margin-right: 8px;
}

@media (max-width: 389px) {
    .sn__item:not(:last-child) {
        margin-right: 4px;
    }
}

.sn__link {
    display: block;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 12px;
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

@media (max-width: 389px) {
    .sn__link {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
}

.sn__link svg {
    width: 24px;
    height: 24px;
    fill: var(--default);
    -webkit-transition: fill 0.2s;
    -o-transition: fill 0.2s;
    transition: fill 0.2s;
}

.sn__sublist {
    padding-top: 14px;
    position: absolute;
    left: 0;
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 1179px) {
    .sn__sublist {
        display: none;
    }
}

.sn__sublist-wrap {
    min-width: 170px;
    padding: 10px;
    border-radius: 12px;
    background-color: var(--default);
    -webkit-box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
    box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.sn__sublist-link {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    color: var(--g700);
    -webkit-transition: background-color 0.2s, color 0.2s;
    -o-transition: background-color 0.2s, color 0.2s;
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .no-touch .sn--gray .sn-link:hover {
        background-color: var(--g100);
    }

    .no-touch .sn--gray .sn-link:hover svg {
        fill: var(--g900);
    }

    .no-touch .sn__item:hover .sn__sublist {
        opacity: 1;
        visibility: visible;
    }

    .no-touch .sn__link:hover {
        background-color: var(--g800);
    }

    .no-touch .sn__link:hover svg.mastodon {
        fill: #6364FF;
    }

    .no-touch .sn__link:hover svg.telegram {
        fill: #2AABEE;
    }

    .no-touch .sn__link:hover svg.instagram[data-color="1"] {
        fill: #FEB500;
    }

    .no-touch .sn__link:hover svg.instagram[data-color="2"] {
        fill: #F82C47;
    }

    .no-touch .sn__link:hover svg.instagram[data-color="3"] {
        fill: #E101AF;
    }

    .no-touch .sn__link:hover svg.instagram[data-color="4"] {
        fill: #E101AF;
    }

    .no-touch .sn__link:hover svg.instagram[data-color="5"] {
        fill: #7C2EF6;
    }

    .no-touch .sn__link:hover svg.twitter {
        fill: #479AE9;
    }

    .no-touch .sn__sublist-link:hover {
        background-color: var(--g100);
        color: var(--g900);
    }
}

.person-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px 16px 12px 24px;
    border: 1px solid var(--g300);
    border-radius: 100px;
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: var(--g900);
    -webkit-transition: border-color 0.2s, background-color 0.2s;
    -o-transition: border-color 0.2s, background-color 0.2s;
    transition: border-color 0.2s, background-color 0.2s;
}

.person-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--g900);
    margin-left: 12px;
}

.person-btn--noicon {
    padding: 12px 24px;
}

.person-btn--noicon svg {
    display: none;
}

@media (min-width: 1024px) {
    .no-touch .person-btn:hover {
        border-color: var(--g400);
        background-color: var(--g50);
    }
}

.man-card {
    display: block;
    padding: 20px 20px 12px;
    border-radius: 12px;
    border: 1px solid var(--g300);
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    color: var(--g700);
    -webkit-transition: border-color 0.2s, background-color 0.2s;
    -o-transition: border-color 0.2s, background-color 0.2s;
    transition: border-color 0.2s, background-color 0.2s;
}

.man-card--empty {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-style: dashed;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
}

.man-card__title {
    display: block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.38px;
    color: var(--g900);
    margin-bottom: 4px;
}

.man-card__info {
    display: block;
    margin-bottom: 12px;
}

.man-card__btn {
    display: inline-block;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px 24px;
    border: 1px solid var(--g300);
    border-radius: 100px;
    color: var(--g900);
    -webkit-transition: border-color 0.2s;
    -o-transition: border-color 0.2s;
    transition: border-color 0.2s;
}

.man-card__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
}

.man-card__main svg {
    width: 24px;
    height: 24px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    stroke: var(--g700);
    -webkit-transition: stroke 0.2s;
    -o-transition: stroke 0.2s;
    transition: stroke 0.2s;
    margin-left: auto;
}

.man-card__image {
    width: 68px;
    height: 68px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
}

@media (max-width: 389px) {
    .man-card__image {
        width: 58px;
        height: 58px;
    }
}

.man-card__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.man-card__box {
    margin-right: 12px;
}

.man-card__name {
    font-family: "SF Pro Display", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g900);
}

.man-card__nickname {
    display: block;
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.442px;
}

.man-card__apps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.man-card__app {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--g300);
    position: relative;
    margin: 0 8px 8px 0;
    -webkit-transition: border-color 0.2s;
    -o-transition: border-color 0.2s;
    transition: border-color 0.2s;
}

.man-card__app img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .man-card__app::after {
        content: attr(data-title);
        position: absolute;
        left: 0;
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
        top: -8px;
        z-index: 1;
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid var(--g800);
        background-color: var(--g900);
        -webkit-box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.33;
        color: var(--default);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.4s;
        -o-transition: opacity 0.4s;
        transition: opacity 0.4s;
    }
}

@media (min-width: 1024px) {
    .no-touch .man-card:hover {
        border-color: var(--g400);
        background-color: var(--g50);
    }

    .no-touch .man-card:hover .man-card__main svg {
        stroke: var(--g900);
    }

    .no-touch .man-card:hover .man-card__btn {
        border-color: var(--g400);
    }

    .no-touch .man-card__app:hover {
        border-color: var(--g400);
    }

    .no-touch .man-card__app:hover::after {
        opacity: 1;
        visibility: visible;
    }
}

.repo-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--g300);
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    color: var(--g700);
}

@media (max-width: 1023px) {
    .repo-card {
        display: block;
    }
}

.repo-card__main {
    display: block;
    padding-right: 20px;
}

@media (max-width: 1023px) {
    .repo-card__main {
        padding: 0 0 20px;
    }
}

.repo-card__title {
    display: inline-block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g900);
    margin-bottom: 8px;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.repo-card__name {
    font-weight: 600;
}

.repo-card__name::before {
    content: "/ ";
    font-weight: 400;
}

.repo-card__descr {
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.442px;
    margin-bottom: 8px;
}

.repo-card__rate {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
}

.repo-card__author {
    width: 330px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px 0 20px 16px;
    border-left: 1px solid var(--g300);
    margin-left: auto;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

@media (max-width: 1023px) {
    .repo-card__author {
        width: 100%;
        margin: 0;
        padding: 20px 0 0;
        border-left: none;
        border-top: 1px solid var(--g300);
    }
}

.repo-card__author-image {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
}

.repo-card__author-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.repo-card__author-position {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.33;
    text-transform: uppercase;
}

.repo-card__author-name {
    display: block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: var(--g900);
}

.repo-card__rate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.repo-card__rate span {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.repo-card__rate svg {
    width: 20px;
    height: 20px;
    fill: var(--g700);
    margin-right: 4px;
}

.repo-card__today-rate {
    color: var(--accent);
    margin-left: 16px;
}

.repo-card__today-rate svg {
    fill: var(--accent);
}

@media (min-width: 1024px) {
    .no-touch .repo-card__title:hover {
        opacity: 0.7;
    }

    .no-touch .repo-card__author:hover {
        opacity: 0.7;
    }
}

.evolution-card {
    display: block;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--g300);
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    color: var(--g700);
}

.evolution-card__main {
    margin-bottom: 20px;
}

.evolution-card__id {
    display: block;
    font-family: "SF Mono", monospace;
    font-size: 16px;
    letter-spacing: -0.5px;
}

.evolution-card__title {
    display: inline-block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g900);
    margin-bottom: 8px;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.evolution-card__descr {
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.442px;
    margin-bottom: 8px;
}

.evolution-card__status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: auto;
    font-family: "SF Mono", monospace;
    font-size: 16px;
    letter-spacing: -0.5px;
}

.evolution-card__status > .point {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
}

.evolution-card__authors {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--g300);
    margin-bottom: -20px;
}

.evolution-card__author {
    width: 25%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 20px;
    margin-bottom: 20px;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

@media (max-width: 1023px) {
    .evolution-card__author {
        width: 50%;
    }
}

@media (max-width: 767px) {
    .evolution-card__author {
        width: 100%;
    }
}

.evolution-card__author-image {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
}

.evolution-card__author-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.evolution-card__author-position {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.33;
    text-transform: uppercase;
}

.evolution-card__author-name {
    display: block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.38px;
    color: var(--g900);
}

@media (min-width: 1024px) {
    .no-touch .evolution-card__title:hover {
        opacity: 0.7;
    }

    .no-touch .evolution-card__author:hover {
        opacity: 0.7;
    }
}

.topic {
    margin-bottom: 40px;
}

@media (max-width: 1023px) {
    .topic {
        margin-bottom: 25px;
    }
}

.topic__title {
    font-family: "SF Pro Display", sans-serif;
    font-weight: 500;
    font-size: 57px;
    line-height: 1.19;
    letter-spacing: 0.285px;
    color: var(--g900);
    margin-bottom: 12px;
}

@media (max-width: 1023px) {
    .topic__title {
        font-size: 43px;
        letter-spacing: 0.387px;
    }
}

@media (max-width: 767px) {
    .topic__title {
        font-size: 34px;
        letter-spacing: 0.37px;
    }
}

.topic__title a {
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

.topic__title a svg {
    display: inline-block;
    width: 32px;
    height: 32px;
    fill: var(--g900);
    margin-left: 4px;
    -webkit-transition: margin 0.2s, fill 0.2s;
    -o-transition: margin 0.2s, fill 0.2s;
    transition: margin 0.2s, fill 0.2s;
}

@media (max-width: 1023px) {
    .topic__title a svg {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 767px) {
    .topic__title a svg {
        width: 16px;
        height: 16px;
    }
}

.topic__descr {
    font-family: "SF Pro Display", sans-serif;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: var(--g700);
    margin-top: 20px;
}

.topic__descr a {
    color: var(--accent);
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.topic__descr + * {
    margin-top: 25px;
}

@media (min-width: 1024px) {
    .no-touch .topic__title a:hover {
        color: var(--g700);
    }

    .no-touch .topic__title a:hover svg {
        fill: var(--g700);
        margin-left: 10px;
    }

    .no-touch .topic__descr a:hover {
        opacity: 0.7;
    }
}

.content {
    font-family: "SF Pro Display", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: var(--g800);
}

.content__head {
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    color: var(--g700);
}

.content__head-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--g300);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.33;
    letter-spacing: -0.24px;
}

@media (max-width: 1023px) {
    .content__head-info {
        padding-bottom: 2px;
    }
}

@media (max-width: 767px) {
    .content__head-info {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding-bottom: 18px;
    }
}

.content__author-trigger {
    display: none;
}

@media (max-width: 1023px) {
    .content__author-trigger {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 12px;
        border-radius: 12px;
        -webkit-transition: background-color 0.2s;
        -o-transition: background-color 0.2s;
        transition: background-color 0.2s;
        margin-left: -12px;
        cursor: pointer;
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    .content__author-trigger.active {
        background-color: var(--g100);
    }
}

@media (max-width: 767px) {
    .content__author-trigger {
        width: 100%;
        padding: 0;
        margin: 0 0 16px;
        pointer-events: none;
    }
}

.content .content__author-image {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 12px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .content .content__author-image {
        width: 56px;
        height: 56px;
        margin-right: 16px;
    }
}

.content__author-name {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: var(--g900);
}

@media (max-width: 767px) {
    .content__author-name {
        font-family: "SF Pro Display", sans-serif;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.38px;
    }
}

@media (max-width: 1023px) {
    .content__reading-time {
        margin-left: auto;
    }

    .content__reading-time::after {
        content: "•";
        display: inline-block;
        padding: 0 7px 0 3px;
    }
}

@media (max-width: 767px) {
    .content__reading-time {
        margin-left: 0;
    }
}

.content > * {
    margin-bottom: 32px;
}

.content .figure {
    min-height: 100px;
}

.content .figcaption {
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    font-style: italic;
    text-align: center;
    letter-spacing: -0.442px;
    color: var(--g700);
    margin-top: 16px;
}

.content .img {
    min-height: 250px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--g300);
    background-color: var(--g50);
}

.content .img--full {
    min-height: auto;
    -o-object-fit: contain;
    object-fit: contain;
}

.content .video {
    border-radius: 12px;
    border: 1px solid var(--g300);
    background-color: var(--g50);
}

.content .code {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--g300);
    background-color: var(--g50);
}

.content .code pre {
    margin: 0;
}

.content .code pre code {
    padding-right: 75px;
}

.content .code code {
    display: block;
    padding: 16px;
    background-color: inherit;
    overflow-x: auto;
    font-family: "SF Mono", monospace;
    font-size: 18px;
}

@media (max-width: 767px) {
    .content .code code {
        font-size: 17px;
    }
}

.content .code-copy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background-color: var(--g50);
    border: 1px solid var(--g300);
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0;
    -webkit-transition: border-color 0.2s;
    -o-transition: border-color 0.2s;
    transition: border-color 0.2s;
}

.content .code-copy svg {
    stroke: var(--g700);
    -webkit-transition: stroke 0.2s;
    -o-transition: stroke 0.2s;
    transition: stroke 0.2s;
}

@media (min-width: 1024px) {
    .content .code-copy::after {
        content: attr(data-title);
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
        top: -8px;
        z-index: 1;
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid var(--g800);
        background-color: var(--g900);
        -webkit-box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.33;
        color: var(--default);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.4s;
        -o-transition: opacity 0.4s;
        transition: opacity 0.4s;
    }
}

.content .a {
    color: var(--accent);
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.content .ul {
    list-style: disc;
}

@media (max-width: 1439px) {
    .content .ol,
    .content .ul {
        padding-left: 25px;
    }
}

.content .title1 {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: 0.37px;
    color: var(--g900);
}

@media (max-width: 767px) {
    .content .title1 {
        font-size: 28px;
    }
}

.content .title2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: 0.352px;
    color: var(--g900);
}

.content .title3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: 0.352px;
    color: var(--g900);
}

.content .title4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: 0.352px;
    color: var(--g900);
}

.content *:not(.content__head) + .title-row {
    margin-top: 60px;
}

.content .title-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
}

.content .title-row + .title-row {
    margin-top: 20px;
}

.content .copy {
    padding: 0;
    width: 24px;
    height: 24px;
    margin-left: 16px;
    border: none;
    background-color: transparent;
    position: relative;
}

@media (min-width: 1024px) {
    .content .copy::after {
        content: attr(data-title);
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
        top: -8px;
        z-index: 1;
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid var(--g800);
        background-color: var(--g900);
        -webkit-box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
        font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.33;
        color: var(--default);
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.4s;
        -o-transition: opacity 0.4s;
        transition: opacity 0.4s;
    }
}

.content .copy svg {
    stroke: var(--g700);
    -webkit-transition: stroke 0.2s;
    -o-transition: stroke 0.2s;
    transition: stroke 0.2s;
}

.content .copy__success {
    display: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    top: -8px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--g800);
    background-color: var(--g900);
    -webkit-box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
    box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.33;
    color: var(--default);
    white-space: nowrap;
    z-index: 2;
}

@media (max-width: 1023px) {
    .content .copy__success {
        left: 100%;
        -webkit-transform: translate(-100%, -100%);
        -ms-transform: translate(-100%, -100%);
        transform: translate(-100%, -100%);
    }
}

.content .copy__success::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 7px;
    background-image: url(../images/check-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-right: 5px;
}

@media (min-width: 1024px) {
    .no-touch .content .code-copy:hover {
        border-color: var(--g400);
    }

    .no-touch .content .code-copy:hover::after,
    .no-touch .content .copy:hover::after {
        opacity: 1;
        visibility: visible;
    }

    .no-touch .content .code-copy:hover svg,
    .no-touch .content .copy:hover svg {
        stroke: var(--g900);
    }

    .no-touch .content a:not(.grid a):hover {
        opacity: 0.7;
    }
}

.grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -12px;
}

@media (max-width: 767px) {
    .grid {
        display: block;
    }
}

@media (max-width: 389px) {
    .grid {
        margin: 0 -10px;
    }
}

.grid li {
    padding: 0 12px;
    margin-bottom: 24px;
    width: 100%;
}

@media (max-width: 389px) {
    .grid li {
        padding: 0 10px;
    }
}

.grid li > * {
    height: 100%;
}

.grid--col2 li {
    width: 50%;
}

@media (max-width: 767px) {
    .grid--col2 li {
        width: 100%;
    }
}

.grid--col3 li {
    width: 33.3%;
}

@media (max-width: 1023px) {
    .grid--col3 li {
        width: 50%;
    }
}

@media (max-width: 767px) {
    .grid--col3 li {
        width: 100%;
    }
}

.grid--col4 li {
    width: 25%;
}

@media (max-width: 1023px) {
    .grid--col4 li {
        width: 33.3%;
    }
}

@media (max-width: 767px) {
    .grid--col4 li {
        width: 100%;
    }
}

.card {
    display: block;
    padding: 20px;
    border: 1px solid var(--g300);
    border-radius: 12px;
    -webkit-transition: border-color 0.2s, background-color 0.2s;
    -o-transition: border-color 0.2s, background-color 0.2s;
    transition: border-color 0.2s, background-color 0.2s;
    position: relative;
}

.card__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.442px;
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .card__header {
        display: block;
        margin-bottom: 12px;
    }
}

.card__header--small {
    font-size: 12px;
    line-height: 1.33;
    color: var(--g700);
    margin-bottom: 8px;
}

.card__header--small .card__category {
    color: inherit;
    text-transform: uppercase;
}

.card__category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 500;
    color: var(--g900);
    margin-right: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .card__category {
        margin: 0 0 8px;
    }
}

.card__category-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    position: relative;
    margin-right: 12px;
    background-image: url(./../images/tutorial.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center;
}

.card__category-icon::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: rgba(30, 92, 240, 0.08);
    position: absolute;
    left: 0;
    top: 0;
}

.card__info {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--g700);
}

.card__reading-time {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.card__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 15px;
}

.card__head .card__url {
    margin-top: 0;
    margin-left: auto;
}

.card__image {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 54px;
}

.card__image svg,
.card__image img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.card__image + .card__url {
    margin-left: 15px;
}

.card__icon {
    width: 24px;
    height: 32px;
    position: absolute;
    top: 20px;
    right: 20px;
    stroke: var(--g700);
    -webkit-transition: stroke 0.2s;
    -o-transition: stroke 0.2s;
    transition: stroke 0.2s;
}

.card__icon + .card__title {
    padding-right: 32px;
}

.card__title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g900);
}

@media (max-width: 767px) {
    .card__title {
        font-size: 20px;
        letter-spacing: 0.38px;
    }
}

.card__content {
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.442px;
    color: var(--g700);
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
    margin-top: 6px;
}

.card__url {
    display: inline-block;
    font-family: "SF Mono", monospace;
    font-size: 14px;
    color: var(--g700);
    letter-spacing: normal;
    margin-top: 8px;
}

@media (min-width: 1024px) {
    .no-touch .card:hover {
        border-color: var(--g400);
        background-color: var(--g50);
    }

    .no-touch .card:hover .card__content {
        color: var(--g800);
    }

    .no-touch .card:hover .card__icon {
        stroke: var(--g900);
    }
}

.more-content {
    padding-top: 40px;
    border-top: 1px solid var(--g300);
    margin-top: 40px;
}

.more-content__title {
    display: block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: 0.364px;
    color: var(--g900);
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .more-content__title {
        font-size: 22px;
    }
}

.tutorial-card {
    display: block;
    padding: 20px;
    border: 1px solid var(--g300);
    border-radius: 12px;
    -webkit-transition: border-color 0.2s, background-color 0.2s;
    -o-transition: border-color 0.2s, background-color 0.2s;
    transition: border-color 0.2s, background-color 0.2s;
}

.tutorial-card__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.442px;
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .tutorial-card__header {
        display: block;
        margin-bottom: 12px;
    }
}

.tutorial-card__category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 500;
    color: var(--g900);
    margin-right: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .tutorial-card__category {
        margin: 0 0 8px;
    }
}

.tutorial-card__category-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    position: relative;
    margin-right: 12px;
    background-image: url(./../images/tutorial.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center;
}

.tutorial-card__category-icon::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: rgba(30, 92, 240, 0.08);
    position: absolute;
    left: 0;
    top: 0;
}

.tutorial-card__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--g700);
}

.tutorial-card__reading-time {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.tutorial-card__title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g900);
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .tutorial-card__title {
        font-size: 20px;
        letter-spacing: 0.38px;
    }
}

.tutorial-card__content {
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.442px;
    color: var(--g700);
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

@media (min-width: 1024px) {
    .no-touch .tutorial-card:hover {
        border-color: var(--g400);
        background-color: var(--g50);
    }

    .no-touch .tutorial-card:hover .tutorial-card__content {
        color: var(--g800);
    }
}

.app-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}

@media (max-width: 767px) {
    .app-card {
        display: block;
        text-align: left;
    }
}

.app-card__main {
    margin-bottom: auto;
    cursor: pointer;
}

@media (max-width: 767px) {
    .app-card__main {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        text-align: left;
    }
}

.app-card__image {
    display: block;
    width: 152px;
    height: 152px;
    border-radius: 32px;
    overflow: hidden;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    margin: 0 auto;
}

@media (max-width: 1023px) {
    .app-card__image {
        width: 112px;
        height: 112px;
        border-radius: 20px;
    }
}

@media (max-width: 767px) {
    .app-card__image {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        margin: 0 20px 0 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }
}

@media (max-width: 389px) {
    .app-card__image {
        width: 48px;
        height: 48px;
        margin-right: 12px;
    }
}

.app-card__image img {
    width: 100%;
    height: 100%;
}

.app-card__title {
    font-family: "SF Pro Display", sans-serif;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.38px;
    color: var(--g900);
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
    padding-top: 20px;
}

@media (max-width: 767px) {
    .app-card__title {
        padding-top: 0;
    }
}

.app-card__description {
    display: block;
    font-size: 15px;
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: var(--g700);
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
    margin-top: 4px;
}

.app-card .person-btn {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .app-card .person-btn {
        margin-top: 12px;
        position: relative;
        left: 84px;
    }
}

@media (max-width: 389px) {
    .app-card .person-btn {
        left: 64px;
    }
}

@media (min-width: 1024px) {
    .no-touch .app-card__main:hover .app-card__image {
        opacity: 0.72;
    }

    .no-touch .app-card__main:hover .app-card__title {
        color: var(--g700);
    }

    .no-touch .app-card__main:hover .app-card__description {
        color: var(--g500);
    }
}

@media (max-width: 1023px) {
    .apps-section .grid li {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .apps-section .grid li {
        margin-bottom: 20px;
    }
}

.lib-card {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 20px;
    border-radius: 12px;
    background-color: var(--default);
    border: 1px solid var(--g300);
    -webkit-transition: border-color 0.2s, background-color 0.2s;
    -o-transition: border-color 0.2s, background-color 0.2s;
    transition: border-color 0.2s, background-color 0.2s;
}

.lib-card__media {
    height: 192px;
    border-radius: 8px;
    background-color: var(--g100);
    margin-bottom: 20px;
    overflow: hidden;
}

@media (max-width: 767px) {
    .lib-card__media {
        height: auto;
        background-color: transparent;
    }
}

.lib-card__media video,
.lib-card__media img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    -o-object-fit: cover;
    object-fit: cover;
}

.lib-card__title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g900);
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .lib-card__title {
        font-size: 20px;
        letter-spacing: 0.38px;
    }
}

.lib-card__info {
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.442px;
    color: var(--g700);
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
    margin-bottom: 16px;
}

.lib-card__link {
    min-height: 36px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -0.442px;
    color: var(--accent);
    margin-top: auto;
    padding-left: 34px;
    position: relative;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.lib-card__link svg {
    width: 20px;
    height: 20px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    fill: var(--accent);
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media (min-width: 1024px) {
    .no-touch .lib-card__link:hover {
        opacity: 0.7;
    }
}

.aside {
    max-width: 384px;
    width: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .aside {
        max-width: none;
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }
}

.aside > *:not(:last-child) {
    margin-bottom: 25px;
}

@media (max-width: 767px) {
    .aside > *:not(:last-child) {
        margin-bottom: 20px;
    }
}

@media (max-width: 1023px) {
    .contribution {
        display: none;
    }
}

.contribution__title {
    display: block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g900);
    margin-bottom: 8px;
}

.contribution__descr {
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.442px;
    color: var(--g700);
}

.contribution__descr a {
    position: relative;
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

.contribution__descr a::before {
    content: "";
    height: 1px;
    width: 100%;
    background-color: var(--g300);
    position: absolute;
    bottom: -4px;
    left: 0;
}

@media (min-width: 1024px) {
    .no-touch .contribution__descr a:hover {
        color: var(--g900);
    }
}

@media (max-width: 1023px) {
    .categories {
        margin-bottom: 25px;
    }
}

.categories__title {
    display: block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g900);
    margin-bottom: 20px;
}

@media (max-width: 1023px) {
    .categories__title {
        display: none;
    }
}

.categories__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (max-width: 1023px) {
    .categories__list {
        overflow-x: auto;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        margin: 0 -32px 0;
        padding-left: 32px;
    }
}

@media (max-width: 767px) {
    .categories__list {
        margin: 0 -16px 0;
        padding-left: 16px;
    }
}

@media (max-width: 389px) {
    .categories__list {
        margin: 0 -10px 0;
        padding-left: 10px;
    }
}

.categories__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.categories__item {
    margin: 0 12px 12px 0;
}

@media (max-width: 1023px) {
    .categories__item {
        margin: 0 12px 0 0;
    }

    .categories__item:last-child {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-right: 0;
    }

    .categories__item:last-child::after {
        display: inline-block;
        content: "";
        width: 32px;
        height: 0;
    }
}

@media (max-width: 767px) {
    .categories__item:last-child::after {
        width: 16px;
    }
}

@media (max-width: 389px) {
    .categories__item:last-child::after {
        width: 10px;
    }
}

.category {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 13px 24px;
    border: none;
    border-radius: 100px;
    background-color: transparent;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
    text-align: center;
    color: var(--g900);
    -webkit-transition: background-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
    transition: background-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
    -o-transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
    transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
    transition: box-shadow 0.2s, background-color 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
    outline: transparent;
    position: relative;
}

@media (max-width: 1023px) {
    .category {
        white-space: nowrap;
    }
}

.category::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: inherit;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid var(--g300);
    -webkit-transition: border 0.2s;
    -o-transition: border 0.2s;
    transition: border 0.2s;
}

.category svg {
    width: 0;
    height: 14px;
    stroke: var(--g900);
    margin-left: 0px;
    -webkit-transition: width 0.2s, margin 0.2s, stroke 0.2s;
    -o-transition: width 0.2s, margin 0.2s, stroke 0.2s;
    transition: width 0.2s, margin 0.2s, stroke 0.2s;
}

.category--active {
    background-color: var(--g50);
}

.category--active::after {
    border-width: 2px;
    border-color: var(--g900);
}

.category--active svg {
    width: 14px;
    margin-left: 15px;
}

@media (min-width: 1024px) {
    .no-touch .category:hover {
        background-color: var(--g50);
        border-color: var(--g400);
    }

    .no-touch .category--active:hover {
        color: var(--g700);
    }

    .no-touch .category--active:hover::after {
        border-color: var(--g400);
    }

    .no-touch .category--active:hover svg {
        stroke: var(--g700);
    }
}

.aside-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media (max-width: 1023px) {
    .aside-section {
        -webkit-box-pack: initial;
        -ms-flex-pack: initial;
        justify-content: initial;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

@media (min-width: 1024px) {
    .aside-section > *:not(.aside) {
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content;
    }
}

.aside-section .person-card {
    margin-bottom: 96px;
}

@media (min-width: 1024px) {
    .aside-section {
        --aside-width: 384px;
    }

    .aside-section * + .aside,
    .aside-section .aside + * {
        margin-left: 30px;
    }

    .aside-section > .aside {
        width: var(--aside-width);
    }

    .aside-section > *:not(aside) {
        width: calc(100% - var(--aside-width) - 30px);
        max-width: 690px;
    }
}

.aside-section--full > *:not(aside) {
    max-width: none;
}

.person-card {
    padding: 40px 20px 0;
    border-radius: 12px;
    border: 1px solid var(--g300);
    position: relative;
}

.person-card__image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
}

.person-card__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.person-card__name {
    display: block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.352px;
    text-align: center;
    color: var(--g900);
    margin-bottom: 8px;
}

.person-card__descr {
    display: block;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.442px;
    text-align: center;
    color: var(--g700);
    margin-bottom: 32px;
}

.person-card__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 -6px;
    padding-bottom: 28px;
}

@media (max-width: 767px) {
    .person-card__links {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -20px 0;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .person-card__links::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

.person-card__link {
    margin: 0 6px 12px;
}

@media (max-width: 767px) {
    .person-card__link:first-child {
        margin-left: 20px;
    }
}

.person-card__footer {
    padding: 20px 0;
    border-top: 1px solid var(--g300);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.person-card__footer-image {
    width: 56px;
    height: 56px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
}

@media (max-width: 389px) {
    .person-card__footer-image {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }
}

.person-card__footer-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.person-card__footer-content {
    width: 100%;
    padding-right: 44px;
    position: relative;
}

@media (max-width: 389px) {
    .person-card__footer-content {
        padding-right: 24px;
    }
}

.person-card__footer-content svg {
    width: 24px;
    height: 24px;
    stroke: var(--g700);
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: stroke 0.2s;
    -o-transition: stroke 0.2s;
    transition: stroke 0.2s;
}

@media (max-width: 389px) {
    .person-card__footer-content svg {
        width: 20px;
        height: 20px;
    }
}

.person-card__footer-position {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.33;
    text-transform: uppercase;
    color: var(--g700);
}

.person-card__footer-name {
    display: block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: var(--g900);
}

@media (max-width: 389px) {
    .person-card__footer-name {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    .no-touch .person-card__footer:hover .person-card__footer-content svg {
        stroke: var(--g900);
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    .tutorial .person-card {
        max-width: 384px;
        position: absolute;
        background-color: var(--default);
        left: 20px;
        visibility: hidden;
        z-index: 1;
    }

    .tutorial .person-card--visible {
        visibility: visible;
    }
}

@media (max-width: 767px) {
    .tutorial .person-card {
        display: none;
    }
}

.table-of-content {
    border-bottom: 1px solid var(--g300);
    font-family: "SF Pro Display", sans-serif;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.38px;
    -webkit-transition: padding 0.2s;
    -o-transition: padding 0.2s;
    transition: padding 0.2s;
}

.table-of-content--active {
    padding-bottom: 40px;
}

.table-of-content--active .table-of-content__head {
    padding-top: 40px;
}

.table-of-content--active .table-of-content__title {
    color: var(--g900);
}

.table-of-content--active .table-of-content__title svg {
    fill: var(--g900);
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
}

.table-of-content__head {
    padding: 20px 0;
    cursor: pointer;
    -webkit-transition: color 0.2s, padding 0.2s;
    -o-transition: color 0.2s, padding 0.2s;
    transition: color 0.2s, padding 0.2s;
}

.table-of-content__title {
    display: block;
    padding-right: 20px;
    font-weight: 500;
    color: var(--g700);
    position: relative;
}

.table-of-content__title svg {
    width: 16px;
    height: 16px;
    fill: var(--g700);
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
    -webkit-transition: fill 0.2s, -webkit-transform 0.2s;
    transition: fill 0.2s, -webkit-transform 0.2s;
    -o-transition: fill 0.2s, transform 0.2s;
    transition: fill 0.2s, transform 0.2s;
    transition: fill 0.2s, transform 0.2s, -webkit-transform 0.2s;
}

.table-of-content__main {
    color: var(--accent);
    overflow: hidden;
    height: 0;
    padding-left: 25px;
    margin-left: -25px;
}

@media (max-width: 1439px) {
    .table-of-content__main {
        margin-left: 0;
    }
}

.table-of-content__main ul ul {
    margin-top: 0;
    padding-left: 32px;
}

.table-of-content__main ul ul li:first-child {
    margin-top: 8px;
}

.table-of-content__main ul ul li:not(:last-child) {
    margin-bottom: 8px;
}

.table-of-content__main li {
    position: relative;
}

.table-of-content__main li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--accent);
    position: absolute;
    left: -14px;
    top: 14px;
}

.table-of-content__main li:not(:last-child) {
    margin-bottom: 16px;
}

.table-of-content__main a {
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

@media (min-width: 1024px) {
    .no-touch .table-of-content__title:hover {
        color: var(--g900);
    }

    .no-touch .table-of-content__title:hover svg {
        fill: var(--g900);
    }

    .no-touch .table-of-content__main a:hover {
        opacity: 0.7;
    }
}

@media (max-width: 1023px) {
    .aside-navigation {
        display: none;
    }
}

@media (min-width: 1024px) {
    .aside-navigation--sticky {
        position: sticky;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

.aside-navigation--hidden {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 1023px) {
    .aside-navigation__list {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .aside-navigation__list {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 1023px) {
    .aside-navigation__item {
        text-align: center;
    }
}

.aside-navigation__item:not(:last-child) {
    margin-bottom: 20px;
}

@media (max-width: 1023px) {
    .aside-navigation__item:not(:last-child) {
        margin-bottom: 0;
    }
}

.aside-navigation__link {
    display: block;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.442px;
    color: var(--g800);
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
    position: relative;
}

@media (max-width: 1023px) {
    .aside-navigation__link {
        padding: 0 12px;
        color: var(--g900);
    }
}

@media (max-width: 389px) {
    .aside-navigation__link {
        font-size: 15px;
        padding: 0 10px;
    }
}

@media (min-width: 1024px) {
    .aside-navigation__link--sublink {
        padding-left: 12px;
    }
}

@media (min-width: 1024px) {
    .aside-navigation__link--level3 {
        padding-left: 24px;
    }
}

@media (min-width: 1024px) {
    .aside-navigation__link--active {
        font-weight: 600;
        color: var(--accent);
    }
}

@media (max-width: 1023px) {
    .aside-navigation__link--active {
        font-weight: 500;
    }
}

@media (min-width: 1024px) {
    .aside-navigation .slick-list::before, .aside-navigation .slick-list::after {
        content: "";
        width: 100%;
        height: 50px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(var(--default)), to(rgba(255, 255, 255, 0)));
        background-image: -o-linear-gradient(top, var(--default) 0%, rgba(255, 255, 255, 0) 100%);
        background-image: linear-gradient(180deg, var(--default) 0%, rgba(255, 255, 255, 0) 100%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .aside-navigation .slick-list::after {
        height: 70px;
        -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg);
        top: initial;
        bottom: 0;
    }
}

.aside-navigation .slick-arrow,
.aside-navigation .aside-navigation__arrow {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: transparent;
    border: 1px solid var(--g300);
    position: relative;
    -webkit-transition: border-color 0.2s, background-color 0.2s;
    -o-transition: border-color 0.2s, background-color 0.2s;
    transition: border-color 0.2s, background-color 0.2s;
    margin-bottom: 40px;
}

@media (max-width: 1023px) {
    .aside-navigation .slick-arrow,
    .aside-navigation .aside-navigation__arrow {
        width: 24px;
        height: 24px;
        border-radius: 0;
        border: none;
        margin: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }
}

.aside-navigation .slick-arrow svg,
.aside-navigation .aside-navigation__arrow svg {
    width: 16px;
    height: 16px;
    fill: var(--g900);
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
}

.aside-navigation .slick-next,
.aside-navigation .aside-navigation__next {
    margin: 20px 0 0;
}

.aside-navigation .slick-next svg,
.aside-navigation .aside-navigation__next svg {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
}

@media (max-width: 1023px) {
    .aside-navigation .slick-next,
    .aside-navigation .aside-navigation__next {
        margin: 0;
    }
}

@media (min-width: 1024px) {
    .no-touch .aside-navigation__link:hover {
        color: var(--g700);
    }

    .no-touch .aside-navigation__link--active:hover {
        color: var(--accent);
    }

    .no-touch .aside-navigation .slick-arrow:hover,
    .no-touch .aside-navigation .aside-navigation__arrow:hover {
        border-color: var(--g400);
        background-color: var(--g50);
    }
}

.calendar__quarter:not(:last-child) {
    padding-bottom: 48px;
    border-bottom: 1px solid var(--g300);
    margin-bottom: 56px;
}

.calendar__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-family: "SF Pro Display", sans-serif;
    margin-bottom: 32px;
}

.calendar__qname {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: 0.364px;
    color: var(--g900);
    margin-right: 25px;
}

@media (max-width: 389px) {
    .calendar__qname {
        font-size: 26px;
    }
}

.calendar__qdates {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g700);
}

@media (max-width: 767px) {
    .calendar__qdates {
        font-size: 20px;
        letter-spacing: 0.38px;
    }
}

@media (max-width: 389px) {
    .calendar__qdates {
        font-size: 18px;
    }
}

.calendar__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media (max-width: 1023px) {
    .calendar__inner {
        display: block;
    }
}

.calendar__month {
    width: 31%;
}

@media (max-width: 1023px) {
    .calendar__month {
        width: 100%;
    }

    .calendar__month:not(:last-child) {
        margin-bottom: 40px;
    }
}

.calendar__month[data-month].visible .tbody {
    font-weight: 600;
    color: var(--accent);
}

.calendar__month[data-month].visible .tbody::before {
    border-color: var(--g300);
    background-color: var(--g50);
}

.calendar__month .calendar-table {
    text-align: center;
}

.calendar__month .thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: var(--g700);
    margin-bottom: 16px;
}

.calendar__month .thead > span {
    width: 14.28%;
}

.calendar__month .tbody {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -0.442px;
    color: var(--g800);
    position: relative;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.calendar__month .tbody::before {
    content: "";
    width: calc(100% + 8px);
    height: calc(100% + 16px);
    border-radius: 12px;
    border: 1px solid transparent;
    position: absolute;
    left: -4px;
    top: -8px;
    z-index: -1;
    -webkit-transition: border-color 0.2s, background-color 0.2s;
    -o-transition: border-color 0.2s, background-color 0.2s;
    transition: border-color 0.2s, background-color 0.2s;
}

.calendar__month .tbody .tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.calendar__month .tbody .tr:not(:last-child) {
    margin-bottom: 8px;
}

.calendar__month .tbody .tr > span {
    width: 14.28%;
    padding: 8px 0;
    border: 1px solid transparent;
    -webkit-transition: background-color 0.2s, border-color 0.2s;
    -o-transition: background-color 0.2s, border-color 0.2s;
    transition: background-color 0.2s, border-color 0.2s;
}

.calendar__month .tbody .tr > span[data-pay-for] {
    font-weight: 600;
    color: var(--default);
    cursor: pointer;
    position: relative;
    z-index: 1;
    -webkit-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

.calendar__month .tbody .tr > span[data-pay-for]::before {
    content: "";
    height: 100%;
    width: 100%;
    max-width: 44px;
    border-radius: 12px;
    background-color: var(--g900);
    -webkit-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0;
    z-index: -1;
}

.calendar__month .tbody .tr > span[data-pay-for].past::before {
    background-color: var(--g700);
}

.calendar__month .tbody .tr > span[data-pay-for].active::before {
    background-color: var(--accent);
}

.calendar__month .tbody .tr > span[data-pay-for].active .calendar__tooltip {
    visibility: visible;
    opacity: 1;
}

.calendar__title {
    display: block;
    font-family: "SF Pro Display", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.352px;
    color: var(--g900);
    margin-bottom: 32px;
}

@media (max-width: 389px) {
    .calendar__title {
        font-size: 20px;
        margin-bottom: 22px;
    }
}

.calendar__tooltip {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--g800);
    background-color: var(--g900);
    -webkit-box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
    box-shadow: 0px 0px 4px rgba(27, 29, 31, 0.04), 0px 4px 24px rgba(27, 29, 31, 0.08);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: normal;
    color: var(--g600);
    text-align: left;
    position: absolute;
    top: -8px;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    opacity: 0;
    visibility: hidden;
}

.calendar__tooltip span {
    display: block;
    color: var(--default);
}

.head {
    margin: 24px 24px 0;
    background-color: var(--g900);
    border-radius: 32px;
    color: var(--default);
}

@media (max-width: 1099px) {
    .head {
        margin: 0;
        border-radius: 0;
    }
}

.head__wrap {
    padding-top: 205px;
}

@media (max-width: 1023px) {
    .head__wrap {
        padding-top: 148px;
    }
}

@media (max-width: 767px) {
    .head__wrap {
        padding-top: 136px;
    }
}

.head__title {
    font-family: "SF Pro Display", sans-serif;
    font-size: 57px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.285px;
    margin-bottom: 40px;
}

@media (max-width: 1023px) {
    .head__title {
        font-size: 43px;
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .head__title {
        font-size: 34px;
    }
}

.head__title span {
    display: block;
}

.head__title span:last-child {
    color: var(--g700);
}

.head__title a span {
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.head__title a svg {
    display: inline-block;
    width: 32px;
    height: 32px;
    fill: var(--default);
    margin-left: 6px;
    -webkit-transition: margin 0.2s, fill 0.2s;
    -o-transition: margin 0.2s, fill 0.2s;
    transition: margin 0.2s, fill 0.2s;
}

@media (max-width: 1023px) {
    .head__title a svg {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 767px) {
    .head__title a svg {
        width: 16px;
        height: 16px;
    }
}

.head .grid {
    margin-bottom: 32px;
}

@media (max-width: 1023px) {
    .head .grid {
        margin-bottom: 24px;
    }
}

.head .card {
    border-color: transparent;
    background-color: var(--g800);
}

.head .card__header {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--g600);
    margin-bottom: 7px;
}

.head .card__category {
    color: var(--g600);
    margin-right: 16px;
}

.head .card__category::before {
    display: none;
}

.head .card__info {
    color: var(--g600);
}

.head .card__category-icon {
    width: 16px;
    height: 16px;
    background-image: url(./../images/tutorial-home.svg);
    background-size: contain;
    margin-right: 8px;
}

.head .card__reading-time {
    display: none;
}

.head .card__title {
    color: var(--default);
    font-size: 21px;
}

@media (max-width: 767px) {
    .head .card__title {
        font-size: 20px;
    }
}

.head .card__content {
    color: var(--g600);
}

.head .card mark {
    padding: 0;
    border-radius: 0;
    border: none;
    background-color: transparent;
}

.head__bottom {
    padding: 20px 0 28px;
    border-top: 1px solid var(--g800);
}

@media (max-width: 767px) {
    .head__bottom {
        padding: 20px 0;
    }
}

.head__subtitle {
    font-size: 22px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0.352px;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .head__subtitle {
        margin-bottom: 16px;
    }
}

.head__categories {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.head__category {
    margin: 0 12px 12px 0;
}

.head__category-link {
    display: inline-block;
    padding: 14px 24px;
    border: 1px solid var(--g800);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    text-align: center;
    letter-spacing: -0.24px;
    color: var(--default);
    -webkit-transition: border-color 0.2s, background-color 0.2s;
    -o-transition: border-color 0.2s, background-color 0.2s;
    transition: border-color 0.2s, background-color 0.2s;
}

@media (min-width: 1024px) {
    .no-touch .head__title a:hover span:first-child {
        opacity: 0.72;
    }

    .no-touch .head__title a:hover svg {
        margin-left: 12px;
    }

    .no-touch .head__category-link:hover {
        border-color: var(--g700);
        background-color: var(--g800);
    }

    .no-touch .head .card:hover {
        background-color: var(--g800);
        border-color: var(--g700);
    }

    .no-touch .head .card:hover .card__content {
        color: var(--g400);
    }
}

.apps .grid li {
    margin-bottom: 80px;
}

@media (max-width: 1023px) {
    .apps .grid li {
        margin-bottom: 56px;
    }
}

@media (max-width: 767px) {
    .apps .grid li {
        position: relative;
        margin-bottom: 40px;
    }

    .apps .grid li:not(:last-child)::after {
        content: "";
        height: 1px;
        width: calc(100% - 108px);
        background-color: var(--g300);
        position: absolute;
        bottom: -20px;
        right: 12px;
    }
}

@media (max-width: 767px) and (max-width: 389px) {
    .apps .grid li:not(:last-child)::after {
        width: calc(100% - 84px);
    }
}

.table {
    overflow-x: auto;
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.24px;
    color: var(--g900);
    margin: 0 -32px;
    padding: 0 32px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (max-width: 767px) {
    .table {
        margin: 0 -16px;
        padding: 0 16px;
    }
}

@media (max-width: 389px) {
    .table {
        margin: 0 -10px;
        padding: 0 10px;
    }
}

.table::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.table__wrap {
    width: 1200px;
}

.table a {
    color: var(--accent);
}

.table .tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 14px 16px;
    border-radius: 12px;
}

.table .tr > span {
    width: 148px;
    position: relative;
}

.table .tr > span.beta::after {
    content: "Beta";
    padding: 4px 8px;
    border-radius: 4px;
    background-color: var(--accent);
    font-size: 12px;
    color: var(--default);
    margin-left: 10px;
}

.table .thead .tr {
    background-color: var(--g100);
    color: var(--g700);
}

.table .tbody .tr:nth-child(2n) {
    background-color: var(--g100);
}

.frameforks-table .tr > span {
    width: 148px;
}

.frameforks-table .tr > span:nth-child(1) {
    width: 298px;
}

.frameforks-table .tr > span:nth-child(6) {
    width: 170px;
}

.frameforks-table .tr > span:nth-child(7) {
    width: 140px;
}

@media (max-width: 1023px) {
    .versions-table .table__wrap {
        width: 960px;
    }
}

@media (max-width: 1023px) {
    .versions-table .tr > span:nth-child(1) {
        width: 96px;
    }
}

.versions-table .tr > span:nth-child(2) {
    width: 196px;
}

@media (max-width: 1023px) {
    .versions-table .tr > span:nth-child(2) {
        width: 152px;
    }
}

.versions-table .tr > span:nth-child(3) {
    width: 298px;
}

.versions-table .tr > span:nth-child(4) {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.chart {
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.442px;
    color: var(--g600);
    text-align: center;
}

@media (max-width: 767px) {
    .chart {
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .chart::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

@media (max-width: 389px) {
    .chart {
        margin: 0 -10px;
        padding: 0 10px;
    }
}

.chart__wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 767px) {
    .chart__wrap {
        width: 704px;
    }
}

.chart__col {
    max-width: 88px;
    width: 100%;
}

@media (max-width: 1023px) {
    .chart__col {
        padding: 0 4px;
    }
}

@media (max-width: 767px) {
    .chart__col {
        max-width: 78px;
    }
}

@media (min-width: 1024px) {
    .chart__col:not(:last-child) {
        margin-right: 12px;
    }
}

.chart__col.active .chart__bar {
    background-color: var(--accent);
}

.chart__graph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 275px;
    margin-bottom: 12px;
}

.chart__bar {
    width: 32px;
    border-radius: 8px;
    background-color: var(--g300);
    -webkit-transition: height 0.2s, background-color 0.2s;
    -o-transition: height 0.2s, background-color 0.2s;
    transition: height 0.2s, background-color 0.2s;
}

.chart__bar.selected {
    background-color: var(--accent);
}

.chart__period {
    font-size: 15px;
    line-height: 1.8;
    color: var(--g900);
}

.poll-form {
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -0.442px;
    color: var(--g900);
}

.poll-form--disabled .poll-form__label {
    pointer-events: none;
}

.poll-form__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.poll-form__label {
    display: inline-block;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    margin: 0 12px 12px 0;
}

.poll-form__el {
    display: inline-block;
    min-width: 100px;
    padding: 14px 32px;
    border-radius: 12px;
    border: 1px solid var(--g300);
    text-align: center;
    -webkit-transition: border-color 0.2s, background-color 0.2s, color 0.2s;
    -o-transition: border-color 0.2s, background-color 0.2s, color 0.2s;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

@media (max-width: 767px) {
    .poll-form__el {
        padding: 12px 24px;
    }
}

.poll-form__input {
    display: none;
}

.poll-form__input:checked + .poll-form__el {
    border-color: transparent;
    background-color: var(--accent);
    color: #fff;
}

@media (min-width: 1024px) {
    .no-touch .poll-form__label:hover .poll-form__el {
        border-color: var(--g400);
        background-color: var(--g50);
    }

    .no-touch .poll-form__label:hover .poll-form__input:checked + .poll-form__el {
        border-color: transparent;
        background-color: var(--accent);
        color: #fff;
    }
}

.warning {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--callout-border);
    border-radius: 12px;
    background-color: var(--callout-bg);
    font-family: "SF Pro Display", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: var(--callout-text);
    position: relative;
}

@media (max-width: 767px) {
    .warning {
        padding-left: 10px;
    }
}

@media (max-width: 389px) {
    .warning {
        font-size: 17px;
    }
}

.warning--banner {
    padding-right: 35px;
}

.warning--maxcontent {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
}

@media (max-width: 389px) {
    .warning {
        font-size: 17px;
    }
}

.warning__icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    fill: var(--callout-text);
}

@media (max-width: 767px) {
    .warning__icon {
        margin-right: 15px;
    }
}

.warning img {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
    margin-right: 10px;
}

@media (max-width: 767px) {
    .warning img {
        margin-right: 15px;
    }
}

.warning mark {
    border: 1px solid var(--callout-border);
    background-color: var(--callout-code);
}

.warning a {
    color: var(--accent);
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.warning__close {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
    fill: var(--g500);
    -webkit-transition: fill 0.2s;
    -o-transition: fill 0.2s;
    transition: fill 0.2s;
    cursor: pointer;
}

.warning__close:hover {
    fill: var(--g700);
}

.resolutions {
    font-family: "SF Pro Text", Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: -0.24px;
}

.resolutions img {
    -o-object-fit: contain;
    object-fit: contain;
    margin: 0 auto;
    background-color: var(--default);
}

.resolutions .devices {
    margin-bottom: 64px;
}

@media (max-width: 767px) {
    .resolutions .devices {
        margin-bottom: 32px;
    }
}

.resolutions__table {
    overflow-x: scroll;
    margin-right: calc(-50vw + 50%);
    padding-right: calc(50vw - 600px);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.resolutions__table::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media (max-width: 1263px) {
    .resolutions__table {
        margin: 0 -32px;
    }
}

@media (max-width: 767px) {
    .resolutions__table {
        margin: 0 -16px;
        font-size: 12px;
    }
}

@media (max-width: 389px) {
    .resolutions__table {
        margin: 0 -10px;
    }
}

.resolutions__row {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

@media (max-width: 1263px) {
    .resolutions__row {
        padding: 0 32px;
    }
}

@media (max-width: 767px) {
    .resolutions__row {
        padding: 0 16px;
    }
}

@media (max-width: 389px) {
    .resolutions__row {
        padding: 0 10px;
    }
}

.resolutions__row:not(:last-child) .resolutions__col::after {
    content: "";
    height: 1px;
    background-color: var(--g300);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -3;
}

.resolutions__row:first-child {
    text-align: center;
}

.resolutions__row:first-child .resolutions__col {
    padding-top: 12px;
    padding-bottom: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.resolutions__row:nth-child(2) .resolutions__col {
    padding-top: 24px;
}

.resolutions__row:nth-child(2) .resolutions__col:not(:nth-child(1)) {
    z-index: 1;
}

.resolutions__row:nth-child(2) .resolutions__col:not(:nth-child(1))::before {
    content: "";
    width: 1px;
    height: calc(100% - 30px);
    background-color: var(--accent);
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -2;
}

.resolutions__row:nth-child(3) .resolutions__col {
    padding-bottom: 24px;
}

.resolutions__row:nth-child(3) .resolutions__col:not(:nth-child(1)) {
    z-index: 1;
}

.resolutions__row:nth-child(3) .resolutions__col:not(:nth-child(1))::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--accent);
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -2;
}

.resolutions__row:nth-child(3) .resolutions__col:not(:nth-child(1)) .resolutions__image {
    position: relative;
}

.resolutions__row:nth-child(3) .resolutions__col:not(:nth-child(1)) .resolutions__image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    border: solid var(--accent);
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    -webkit-transform: translate(-50%, calc(-100% - 1px)) rotate(45deg);
    -ms-transform: translate(-50%, calc(-100% - 1px)) rotate(45deg);
    transform: translate(-50%, calc(-100% - 1px)) rotate(45deg);
}

.resolutions__row:nth-child(4) .resolutions__col:not(:nth-child(1)) {
    z-index: 1;
}

.resolutions__row:nth-child(4) .resolutions__col:not(:nth-child(1))::before {
    content: "";
    width: 1px;
    height: 25px;
    background-color: var(--accent);
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -2;
}

.resolutions__row:nth-child(4) .resolutions__col:not(:nth-child(1)) .resolutions__image {
    position: relative;
}

.resolutions__row:nth-child(4) .resolutions__col:not(:nth-child(1)) .resolutions__image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    border: solid var(--accent);
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    -webkit-transform: translate(-50%, calc(-100% - 1px)) rotate(45deg);
    -ms-transform: translate(-50%, calc(-100% - 1px)) rotate(45deg);
    transform: translate(-50%, calc(-100% - 1px)) rotate(45deg);
}

.resolutions__row:nth-child(3) .caption {
    margin-bottom: 16px;
}

.resolutions__row:nth-child(4) .resolutions__caption {
    font-size: 20px;
    font-weight: 500;
    color: var(--g100);
}

@media (prefers-color-scheme: dark) {
    .resolutions__row:nth-child(4) .resolutions__caption {
        color: var(--g900);
    }
}

.resolutions__col {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 154px;
    padding: 32px 8px;
    text-align: center;
    position: relative;
}

.resolutions__col:first-child {
    width: 200px;
    text-align: right;
    padding-right: 12px;
    border-right: 1px solid var(--g300);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: var(--default);
}

@media (max-width: 767px) {
    .resolutions__col:first-child {
        width: 160px;
    }
}

.resolutions__col .subtitle {
    font-family: "SF Pro Display", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.38px;
    color: var(--g800);
    margin-bottom: 5px;
}

.resolutions__col .text {
    font-family: "SF Pro Display", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.38px;
    color: var(--g600);
    word-wrap: break-word;
}

.resolutions__col .text p:not(:last-child) {
    margin-bottom: 5px;
}

.resolutions__col .caption {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: calc(100% - 8px);
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background-color: var(--default);
    font-size: 14px;
    line-height: 1.2;
    color: var(--accent);
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.resolutions__device {
    display: block;
    font-size: 16px;
    color: var(--g900);
    margin-top: 5px;
}

.resolutions__cross {
    width: 24px;
    height: 24px;
    padding: 4px;
    position: absolute;
    right: 6px;
    top: 6px;
    stroke: var(--g700);
    cursor: pointer;
}

.resolutions__image {
    margin: 0 auto;
    position: relative;
}

.resolutions__image svg {
    display: block;
    margin: 0 auto;
    background-color: var(--default);
}

.resolutions__caption {
    font-size: 14px;
    text-align: center;
    color: var(--g700);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.resolutions__caption span {
    display: block;
}

.devices {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: scroll;
    margin: 0 calc(-50vw + 50%);
    padding: 0 calc(50vw - 600px);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.devices::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media (max-width: 1263px) {
    .devices {
        margin: 0 -32px;
        padding: 0 32px;
    }
}

@media (max-width: 767px) {
    .devices {
        margin: 0 -16px;
        padding: 0 16px;
        font-size: 12px;
    }
}

@media (max-width: 389px) {
    .devices {
        margin: 0 -10px;
        padding: 0 10px;
    }
}

.devices__label {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    min-width: 150px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

@media (max-width: 767px) {
    .devices__label {
        min-width: 110px;
    }
}

.devices__label:not(:last-child) {
    margin-right: 16px;
}

@media (max-width: 1023px) {
    .devices__label:not(:last-child) {
        margin-right: 12px;
    }
}

.devices__label:hover .devices__span {
    border-color: var(--g400);
    background-color: var(--g50);
}

.devices__input {
    display: none;
}

.devices__input:checked + .devices__overlay {
    border-color: var(--g400);
    background-color: var(--g100);
}

.devices__overlay {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    border: 1px solid var(--g300);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    -webkit-transition: background-color 0.2s, border-color 0.2s;
    -o-transition: background-color 0.2s, border-color 0.2s;
    transition: background-color 0.2s, border-color 0.2s;
}

.devices .resolutions__image {
    margin: auto 0;
}

.devices .resolutions__image svg {
    background-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.devices .resolutions__device {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
}

@media (prefers-color-scheme: light) {
    :root {
        --g900: #1B1D1F;
        --g800: #383C40;
        --g700: #686E73;
        --g600: #888E94;
        --g500: #A3A8AD;
        --g400: #BDC2C7;
        --g300: #DCE1E5;
        --g200: #E9ECF0;
        --g100: #F5F7FA;
        --g50: #FCFEFF;
        --accent: #1E5CF0;
        --callout-bg: #FFFCEB;
        --callout-border: #E0DBBC;
        --callout-text: #7A6700;
        --callout-code: #FFFAE0;
        --default: #fff;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --g900: #E9ECF0;
        --g800: #BDC2C7;
        --g700: #888E94;
        --g600: #888E94;
        --g500: #A3A8AD;
        --g400: #494C4F;
        --g300: #292B2E;
        --g200: #1B1C1F;
        --g100: #141617;
        --g50: #0D0E0F;
        --accent: #4070E4;
        --callout-bg: #2E2C1F;
        --callout-border: #525045;
        --callout-text: #CCC7AB;
        --callout-code: #363324;
        --default: #000;
    }
}

@media (prefers-color-scheme: dark) and (min-width: 1100px) {
    .menu__sublist-wrap {
        background-color: var(--g100);
    }
}

@media (prefers-color-scheme: dark) {
    .sn__sublist-wrap {
        background-color: var(--g100);
    }
}

@media (prefers-color-scheme: dark) {
    .header.menu-open .header__btn {
        background-color: var(--g200);
        color: var(--g900);
    }

    .header.menu-open .header__btn::before, .header.menu-open .header__btn::after,
    .header.menu-open .header__btn span {
        background-color: var(--g900);
    }

    .header--home .header__logo span {
        color: var(--g900);
    }

    .header--home .header__btn {
        color: var(--g900);
    }

    .header--home .header__btn span, .header--home .header__btn::before, .header--home .header__btn::after {
        background-color: var(--g900);
    }
}

@media (prefers-color-scheme: dark) and (min-width: 1100px) {
    .header--home .menu__link {
        color: var(--g900);
    }

    .header--home .menu__link--more svg {
        stroke: var(--g900);
    }

    .header--home .menu__link--withicon svg {
        fill: var(--g900);
    }

    .header--home .sn__link svg {
        fill: var(--g900);
    }
}

@media (prefers-color-scheme: dark) {
    .breadcrumbs__item::after {
        background-image: url(./../images/arrow-inverted.svg);
    }

    .breadcrumbs__prevpage::before {
        background-image: url(./../images/arrow-inverted.svg);
    }
}

@media (prefers-color-scheme: dark) {
    .footer__wrap {
        background-color: var(--g50);
        color: var(--g900);
        border: 1px solid var(--g300);
    }
}

@media (prefers-color-scheme: dark) and (max-width: 1099px) {
    .footer__wrap {
        border: none;
        border-top: 1px solid var(--g300);
    }
}

@media (prefers-color-scheme: dark) {
    .footer__logo.logo span {
        color: var(--g900);
    }
}

@media (prefers-color-scheme: dark) {
    .footer__bottom {
        border-color: var(--g300);
    }
}

@media (prefers-color-scheme: dark) and (max-width: 767px) {
    .footer__col:not(:last-child) {
        border-color: var(--g300);
    }
}

@media (prefers-color-scheme: dark) {
    .sn__link svg {
        fill: var(--g900);
    }
}

@media (prefers-color-scheme: dark) {
    .head {
        background-color: var(--g50);
        color: var(--g900);
        border: 1px solid var(--g300);
    }
}

@media (prefers-color-scheme: dark) and (max-width: 1099px) {
    .head {
        border: none;
        border-bottom: 1px solid var(--g300);
    }
}

@media (prefers-color-scheme: dark) {
    .head__title a svg {
        fill: var(--g900);
    }
}

@media (prefers-color-scheme: dark) {
    .head .card {
        background-color: var(--g200);
    }

    .head .card__title {
        color: var(--g900);
    }
}

@media (prefers-color-scheme: dark) {
    .head__bottom {
        border-color: var(--g300);
    }
}

@media (prefers-color-scheme: dark) {
    .head__category-link {
        color: var(--g900);
        border-color: var(--g300);
    }
}

@media (prefers-color-scheme: dark) {
    .card__category-icon::before {
        background-color: rgba(64, 112, 228, 0.24);
    }
}

@media (prefers-color-scheme: dark) {
    .content .copy__success::before {
        background-image: url(../images/check-black.svg);
    }
}

@media (prefers-color-scheme: dark) {
    .hljs {
        color: var(--g800);
    }
}

@media (prefers-color-scheme: dark) and (min-width: 1024px) {
    .aside-navigation .slick-list::before, .aside-navigation .slick-list::after {
        background-image: -webkit-gradient(linear, left top, left bottom, from(var(--default)), to(rgba(0, 0, 0, 0)));
        background-image: -o-linear-gradient(top, var(--default) 0%, rgba(0, 0, 0, 0) 100%);
        background-image: linear-gradient(180deg, var(--default) 0%, rgba(0, 0, 0, 0) 100%);
    }
}

@media (prefers-color-scheme: dark) {
    .calendar__month .tbody .tr > span[data-pay-for].active {
        color: #fff;
    }
}

@media (prefers-color-scheme: dark) {
    .calendar__tooltip {
        color: var(--g400);
    }
}

@media (prefers-color-scheme: dark) and (max-width: 1099px) {
    .header__inner {
        background-color: var(--g100);
    }

    .tutorial .person-card {
        background-color: var(--g100);
    }
}

@media (prefers-color-scheme: dark) and (max-width: 767px) {
    .header.menu-open {
        background-color: var(--g100) !important;
    }

    .aside-navigation {
        background-color: var(--g100);
    }
}

@media (prefers-color-scheme: dark) {
    .no-touch .sn__sublist-link:hover {
        background-color: var(--g200);
    }
}

@media (prefers-color-scheme: dark) and (min-width: 1100px) {
    .no-touch .menu__sublist-wrap .menu__link:hover {
        background-color: var(--g200);
        color: var(--g900);
    }

    .no-touch .header--home .menu__link--more:hover svg {
        stroke: var(--g900);
    }

    .no-touch .header--home .menu__link--withicon:hover svg {
        fill: var(--g900);
    }

    .no-touch .header--home .menu__link:hover {
        background-color: var(--g100);
        color: var(--g900);
    }

    .no-touch .header--home .menu__sublist-wrap .menu__link:hover {
        background-color: var(--g200);
        color: var(--g900);
    }

    .no-touch .header--home .sn__link:hover {
        background-color: var(--g200);
    }

    .no-touch .header--home .sn__link:hover svg:not(.telegram, .mastodon, .twitter, .instagram) {
        fill: var(--g900);
    }
}

@media (prefers-color-scheme: dark) and (min-width: 1024px) {
    .no-touch .footer__lang:hover {
        background-color: var(--g200);
    }

    .no-touch .sn__link:hover {
        background-color: var(--g200);
    }

    .no-touch .head__category-link:hover {
        background-color: var(--g200);
        border-color: var(--g400);
    }

    .no-touch .head .card:hover {
        background-color: var(--g200);
        border-color: var(--g300);
    }

    .no-touch .head .card:hover .card__content {
        color: var(--g800);
    }
}