/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
.link--\+vXRk {
    display: block;
    color: rgb(var(--surface-on-primary));
    text-decoration: none;
    width: 100%;

    /* В Safari svg требует указать высоту,
     поэтому прибегаем к хаку с нижним паддингом
     и абсолютным позиционированием */
    height: 0;
    padding-bottom: calc(30 * 100% / 187);
    position: relative;
}
.image--GBKky {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
}
.image--GBKky > svg {
    height: 100%;
}
.text--9YBh3 {
    position: absolute;
    margin: 0;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.body-primary--I41vN {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}
@media (min-width: 760px) {
.body-primary--I41vN {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }
.body-secondary--K6ni1 {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}
@media (min-width: 760px) {
.body-secondary--K6ni1 {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }
.body-large--IL1i0, .input--20LC0, .label--ngBuN, .listItem--v\+HqB {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large-bold--Rdde5 {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--93\+Q5 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.input--20LC0::-moz-placeholder {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.input--20LC0:-ms-input-placeholder {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-medium-bold--KTfY5, .input--20LC0::placeholder {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--DVEIC {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small-bold--YLBEM {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
.form--Eg6H5 {
    --search-form-base-height: 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.form--Eg6H5[data-open='true'] {
    width: 100%
}
@media (min-width: 1230px) {
.form--Eg6H5[data-open='true'] {
        width: 330px
}
    }
.inputWrapper--aeyxP {
    display: flex;
    align-items: center;
    flex-grow: 1;
    max-width: 100%;
}
.input--20LC0, .label--ngBuN {
    /* Эти блоки должны быть визуально идентичны,
     * чтобы при клике по кнопке «Поиск» не было
     * скачков */
    color: rgb(var(--surface-on-secondary));
}
.input--20LC0::-moz-placeholder {
    /* Если приписать селектор плейсхолдера через
     * запятую, как сделано выше, то IE11 не будет
     * принимать все эти стили разом. */
    text-transform: uppercase;
    letter-spacing: 1px;
}
.input--20LC0:-ms-input-placeholder {
    /* Если приписать селектор плейсхолдера через
     * запятую, как сделано выше, то IE11 не будет
     * принимать все эти стили разом. */
    text-transform: uppercase;
    letter-spacing: 1px;
}
.input--20LC0::placeholder {
    /* Если приписать селектор плейсхолдера через
     * запятую, как сделано выше, то IE11 не будет
     * принимать все эти стили разом. */
    text-transform: uppercase;
    letter-spacing: 1px;
}
.label--ngBuN {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}
.loupe--JGOTU {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    outline: none;
    height: 35px;
    width: 35px;
    color: rgb(var(--surface-on-secondary));
}
.loupe--JGOTU:disabled {
    color: var(--surface-on-disabled);
}
.input--20LC0 {
    /* Изначально инпут скрыт и появляется только при клике на лупу.
    Чтобы при появлении в инпут ставился фокус,
    он должен присутствовать на странице (display: none не подходит),
    поэтому скрываем его с помощью нулевой ширины */
    width: 0;
    padding: 0;
    flex-grow: 1;
    margin: 0;
    box-sizing: border-box;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;
    background: none;
    border: none;
    outline: none;

    /* Высота обязательно нужна для Safari,
     * иначе строка будет сказать */
    /*
     * Высота меньше на 1px нужна из-за бага
     * в хроме при котором он рисует странную
     * жёлтую линию, от которой даже дебаггер глючит.
     * Этот хак подобран вручную.
     * Компенсируем уменьшение высоты паддингом
     * на всякий случай.
     * TODO: Через пару релизов Хрома проверить воспроизводится ли баг
     * TODO: и удалить нафиг этот странный хак
     * @See https://jira.tcsbank.ru/browse/TJ-1802?focusedCommentId=9850897&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-9850897
     */
    height: calc(var(--search-form-base-height) - 1px);
}
.input--20LC0::-moz-placeholder {
    color: rgb(var(--surface-on-placeholder));
}
.input--20LC0:-ms-input-placeholder {
    color: rgb(var(--surface-on-placeholder));
}
.input--20LC0::placeholder {
    color: rgb(var(--surface-on-placeholder));
}
.input--20LC0::-webkit-search-cancel-button {
    display: none;
}
.input--20LC0:-webkit-autofill {
    box-shadow: 0 0 0 10px white inset;
}
.form--Eg6H5[data-open='true'] .input--20LC0 {
    width: auto;
    padding: 0 10px
}
@media (min-width: 760px) {
.form--Eg6H5[data-open='true'] .input--20LC0 {
        max-width: 285px
}
    }
.close--WFdPo {
    display: inline-block;
    padding: 0;
    border: none;
    width: 13px;
    height: 13px;
    color: rgb(var(--surface-on-secondary));
    background: none;
    flex-shrink: 0;
    outline: none;
    position: relative;
    cursor: pointer;
}
/* Увеличивает кликабельную область */
.close--WFdPo::after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.suggest--AJs7\+ {
    position: absolute;
    z-index: 10;
    left: -20px;
    right: -20px;
    top: calc(100% + 10px);
    background-color: rgb(var(--surface-primary));
    box-shadow: 0 5px 8px -2px rgba(0, 0, 0, 0.1);
    padding: 0 5px 20px;
    opacity: 0;
    visibility: hidden
}
@media (min-width: 760px) {
.suggest--AJs7\+ {
        left: 0;
        right: -15px;
        padding: 10px 10px 20px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}
    }
.suggest--AJs7\+[data-open='true'] {
    opacity: 1;
    visibility: visible;
}
.suggestBorder--lAJ6M {
    height: 1px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    background: rgb(var(--border-separator))
}
@media (min-width: 760px) {
.suggestBorder--lAJ6M {
        display: none
}
    }
.list--eY4LS {
    margin: 0;
    padding: 0;
}
.listItem--v\+HqB {
    list-style: none;
    text-transform: lowercase;
    border-radius: 5px;
}
.listItem--v\+HqB[data-active='true'] {
    background-color: rgb(var(--surface-hover));
}
.link--AsiwO {
    display: block;
    color: rgb(var(--surface-on-primary));
    text-decoration: none;
    padding: 10px;
}
@media (hover: hover) {
    .label--ngBuN:hover .loupe--JGOTU {
        color: rgb(var(--surface-on-hover));
    }

    .clean--HxImu:hover {
        color: rgb(var(--surface-on-hover));
    }
}

.hamburgerMenu--YVvV- {
    width: 24px;
    height: 20px;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    transform: rotate(180deg);
    margin: -5px;
    padding: 5px;
    box-sizing: content-box;
    cursor: pointer;

    /* В Safari из-за трансформаций криво отображается аутлайн,
   поэтому ставим overflow: hidden */
    overflow: hidden
}

@media (--tablet-small) {

.hamburgerMenu--YVvV- {
        transform: rotate(0);
        margin: 0;
        padding: 0
}
    }

@media (hover: hover) {
    .hamburgerMenu--YVvV-:hover span {
        background-color: rgb(var(--surface-on-hover));
    }
}

.hamburgerMenu--YVvV-:not(.focus-visible--85Smv):focus {
    outline: none;
}

.hamburgerMenu--YVvV-:not(:focus-visible):focus {
    outline: none;
}

.hamburgerMenu--YVvV-.focus-visible--85Smv {
    outline: 2px rgba(46, 46, 229, 0.4);
    outline-offset: 2px;
    outline-style: auto;
}

.hamburgerMenu--YVvV-:focus-visible {
    outline: 2px rgba(46, 46, 229, 0.4);
    outline-offset: 2px;
    outline-style: auto;
}

.checkbox--XTtzO {
    display: none;
}

.hamburgerMenu--YVvV- > span {
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: rgb(var(--surface-on-secondary));
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.3s ease;
}

.checkbox--XTtzO:checked ~ span:nth-last-child(1) {
    transform: translateY(-9px) rotate(-45deg);
}

.checkbox--XTtzO:checked ~ span:nth-last-child(2) {
    opacity: 0;
}

.checkbox--XTtzO:checked ~ span:nth-last-child(3) {
    transform: translateY(9px) rotate(45deg);
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.interface-heading-one--XXSyB {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}
@media (min-width: 760px) {
.interface-heading-one--XXSyB {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }
.interface-primary--oFQHu {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}
.interface-secondary--5O4\+o, .item--m-U9b {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}
.interface-error--XaSCg {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}
@media (min-width: 760px) {
.interface-error--XaSCg {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }
.interface-caption--dvFku {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}
.interface-heading--pS2Dz {
    font: var(--interface-heading-mobile)
}
@media (min-width: 760px) {
.interface-heading--pS2Dz {
        font: var(--interface-heading)
}
    }
/* stylelint-disable at-rule-no-unknown */
/* Тут меняются отступы лейаута (20px на мобиле, 0 далее) */
/* Но так как в макетах встречаются элементы */
/* на всю ширину, мы выносим это во внутренние обёртки (см. article/Grid) */
/* чтобы избежать отрицательных марджинов */
/* Тут число колонок внутренней сетки становится равным 4 */
/* Тут число колонок внутренней сетки становится равным 6 */
/* Появляется десктопный хэдер с бургером */
/* Появляется левая колонка */
/* Появляется правая колонка */
/* Перестраивается лейаут статьи, подложка перестает тянуться */
/* stylelint-enable at-rule-no-unknown */
.item--m-U9b {
    text-decoration: none;
    color: rgb(var(--surface-on-secondary));
    display: block;
    width: 100%;
    position: relative;
    cursor: pointer;
}
/* Отключает стандартные стили кнопок */
button.item--m-U9b {
    padding: 0;
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
}
.item--m-U9b:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    left: 50px;
    right: 0;
    top: 100%;
    height: 1px;
    background-color: rgb(var(--border-separator))
}
@media (min-width: 1024px) {
.item--m-U9b:not(:last-child)::after {
        display: none
}
    }
.inner--83zD8 {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 0
}
@media (min-width: 1024px) {
.inner--83zD8 {
        padding: 7px 0
}
    }
@media (hover: hover) {
    .item--m-U9b:hover::before {
        content: '';
        display: block;
        position: absolute;
        left: -5px;
        right: -5px;
        top: 2px;
        bottom: 2px;
        background-color: rgb(var(--surface-primary));
        border-radius: 5px;
    }

    .item--m-U9b:hover .icon--JheX4[data-bg='true'] {
        border: none;
        background-color: unset;
    }
}
.icon--JheX4 {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    overflow: hidden;
    margin: 0;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}
@media (min-width: 1024px) {
.icon--JheX4 {
        margin-right: 15px
}
    }
.icon--JheX4[data-bg='true'] {
    border: 1px solid rgb(var(--border-surface));
    background-color: rgb(var(--surface-primary));
}
.icon--JheX4 svg {
    display: block;
}
.img--le2xP {
    max-width: 100%;
}
.text--kwYYq {
    min-height: 30px;
    display: flex;
    align-items: center;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.heading-one--FkwB5, .h1--Ca-aj {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}
@media (min-width: 760px) {
.heading-one--FkwB5, .h1--Ca-aj {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }
.heading-two--AjxVh, .h2--Lt114 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}
@media (min-width: 760px) {
.heading-two--AjxVh, .h2--Lt114 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }
.heading-three--hnfbq, .h3--VFXzP {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--c3u\+x, .h4--DnhVz, .title--5p189 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}
@media (min-width: 760px) {
.heading-four--c3u\+x, .h4--DnhVz, .title--5p189 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }
.heading-five--iKDS-, .h5--NFvaC {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--UMRQM, .h6--rlaXg {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}
@media (min-width: 760px) {
.heading-six--UMRQM, .h6--rlaXg {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }
/* stylelint-disable at-rule-no-unknown */
/* Тут меняются отступы лейаута (20px на мобиле, 0 далее) */
/* Но так как в макетах встречаются элементы */
/* на всю ширину, мы выносим это во внутренние обёртки (см. article/Grid) */
/* чтобы избежать отрицательных марджинов */
/* Тут число колонок внутренней сетки становится равным 4 */
/* Тут число колонок внутренней сетки становится равным 6 */
/* Появляется десктопный хэдер с бургером */
/* Появляется левая колонка */
/* Появляется правая колонка */
/* Перестраивается лейаут статьи, подложка перестает тянуться */
/* stylelint-enable at-rule-no-unknown */
.title--5p189 {
    color: rgb(var(--surface-on-primary));
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: 10px
}
@media (min-width: 1024px) {
.title--5p189 {
        margin-bottom: 13px
}
    }
.services--UVfHh {
    margin-bottom: 20px
}
@media (min-width: 760px) {
.services--UVfHh {
        margin-bottom: 40px
}
    }
@media (min-width: 1024px) {
.services--UVfHh {
        margin-bottom: 24px
}
    }

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.interface-heading-one--J3VnD {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}

@media (min-width: 760px) {

.interface-heading-one--J3VnD {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }

.interface-primary--s9t-R {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}

.interface-secondary--BTP7v, .link--\+\+oh7 {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}

.interface-error--\+zQjM {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}

@media (min-width: 760px) {

.interface-error--\+zQjM {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }

.interface-caption--B1IjD {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}

.interface-heading--POV8v {
    font: var(--interface-heading-mobile)
}

@media (min-width: 760px) {

.interface-heading--POV8v {
        font: var(--interface-heading)
}
    }

.link--\+\+oh7 {
    color: rgb(var(--surface-on-secondary));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.arrow--s\+OBS {
    margin-left: 7px;
    display: flex;
    align-items: center;
}

.arrow--s\+OBS[data-direction='down'] {
    margin-left: 10px;
}

@media (hover: hover) {
    .link--\+\+oh7:hover {
        color: rgb(var(--surface-on-hover));
    }
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.heading-one--y2N8p, .h1--FowQY {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}
@media (min-width: 760px) {
.heading-one--y2N8p, .h1--FowQY {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }
.heading-two--REzSS, .h2--V8Mi3 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}
@media (min-width: 760px) {
.heading-two--REzSS, .h2--V8Mi3 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }
.heading-three--YTiuz, .h3--x1OPy {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--Jz5j0, .h4---xR\+I, .title--oJuDj {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}
@media (min-width: 760px) {
.heading-four--Jz5j0, .h4---xR\+I, .title--oJuDj {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }
.heading-five--u2hic, .h5--zbx62 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--5s0rk, .h6--OPS4P {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}
@media (min-width: 760px) {
.heading-six--5s0rk, .h6--OPS4P {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }
/* stylelint-disable at-rule-no-unknown */
/* Тут меняются отступы лейаута (20px на мобиле, 0 далее) */
/* Но так как в макетах встречаются элементы */
/* на всю ширину, мы выносим это во внутренние обёртки (см. article/Grid) */
/* чтобы избежать отрицательных марджинов */
/* Тут число колонок внутренней сетки становится равным 4 */
/* Тут число колонок внутренней сетки становится равным 6 */
/* Появляется десктопный хэдер с бургером */
/* Появляется левая колонка */
/* Появляется правая колонка */
/* Перестраивается лейаут статьи, подложка перестает тянуться */
/* stylelint-enable at-rule-no-unknown */
.title--oJuDj {
    color: rgb(var(--surface-on-primary));
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: 10px
}
@media (min-width: 1024px) {
.title--oJuDj {
        margin-bottom: 13px
}
    }
.flows--ps3wv {
    margin-bottom: 10px
}
@media (min-width: 1024px) {
.flows--ps3wv {
        margin-bottom: 13px
}
    }

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
.footer--mvPZv {
    padding-top: 20px;
}
.socials--HdCeY {
    margin: 0 -10px
}
@media (min-width: 820px) {
.socials--HdCeY {
        margin-left: -7px;
        margin-right: -7px
}
    }
.link--PiJd6 {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}
.social--CFbXz {
    /* Для старого фронта,
    т.к. там всем элементам ставится border-box */
    box-sizing: content-box;
    display: inline-block;
    width: 25px;
    height: 25px;
    padding: 0 10px;
    color: rgba(var(--surface-on-primary), var(--opacity-control-disabled));
    margin-bottom: 20px
}
@media (min-width: 820px) {
.social--CFbXz {
        width: 20px;
        height: 20px;
        padding: 0 7px
}
    }
.wrap--kKcWm {
    display: inline-block;
}
@media (hover: hover) {
    .social--CFbXz:hover {
        color: rgb(var(--control-#000));
        color: rgb(var(--control-initial));
    }
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
.tj-light-theme {
    /* Основной набор цветов задаётся триадами */
    /* для смешивания с токенами opacity */

    /* Цвета фоновой заливки страниц */

    --background-primary: 247, 247, 247;
    --background-secondary: 255, 255, 255;

    /* Цвета поверхностей */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-accent: 26, 26, 26;
    --surface-top: 0, 0, 0;

    --surface-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);
    --surface-award-hover: linear-gradient(137deg, rgb(254, 234, 160), rgb(242, 196, 92) 52%, rgb(235, 176, 73) 92%);

    --surface-interactive: 232, 236, 255;
    --surface-interactive-hover: 220, 224, 242;

    --surface-positive: 239, 249, 242;
    --surface-positive-hover: 227, 237, 230;

    --surface-warning: 253, 247, 242;
    --surface-warning-hover: 240, 235, 230;

    --surface-negative: 254, 243, 242;
    --surface-negative-hover: 241, 231, 230;

    /* Общие цвета для --surface-primary и --surface-secondary */
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));
    --surface-hover: 242, 242, 242;

    /* Цвета текста */

    --surface-on-primary: 0, 0, 0;
    --surface-on-secondary: 0, 0, 0;
    --surface-on-interactive: 20, 20, 204;
    --surface-on-positive: 2, 131, 35;
    --surface-on-warning: 209, 70, 0;
    --surface-on-negative: 235, 16, 0;
    --surface-on-static: 0, 0, 0;
    --surface-on-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);

    /* Общие цвета для --surface-on-primary и --surface-on-secondary */
    /* В темной теме серый текст (--surface-on-secondary) становится белым
    в состоянии disabled. Поэтому мы не можем просто
    менять прозрачность и проще сразу завести готовый цвет.
    И хотя в светлой теме черный остается черным, пишем по аналогии */
    --surface-on-disabled: rgba(0, 0, 0, var(--opacity-surface-on-disabled));
    --surface-on-initial: 166, 166, 166;
    --surface-on-placeholder: 128, 128, 128;
    --surface-on-hover: 77, 77, 77;

    /* Интерактивные элементы */

    --interactive-accent: 46, 46, 229;
    --interactive-accent-hover: 0, 0, 178;

    --interactive-positive: 77, 153, 108;
    --interactive-positive-hover: 20, 102, 48;

    --interactive-negative: 242, 69, 53;
    --interactive-negative-hover: 189, 30, 19;

    --interactive-warning: 204, 123, 82;
    --interactive-warning-hover: 153, 71, 31;

    --interactive-additional: 0, 206, 51;
    --interactive-additional-hover: 43, 217, 87;

    --interactive-on-primary: 255, 255, 255;
    --interactive-on-secondary: 0, 0, 0;

    /* Бордеры */

    --border-surface: 237, 237, 237;
    --border-separator: 229, 229, 229;
    --border-initial: 204, 204, 204;
    --border-hover: 179, 179, 179;
    --border-focus: 138, 138, 229;

    --border-interactive-positive: 49, 155, 76;
    --border-interactive-positive-disabled: 2, 131, 35;
    --border-interactive-positive-hover: 31, 102, 48;

    --border-interactive-warning: 209, 70, 0;
    --border-interactive-warning-disabled: 209, 70, 0;
    --border-interactive-warning-hover: 128, 53, 0;

    --border-interactive-negative: 239, 61, 48;
    --border-interactive-negative-disabled: 235, 16, 0;
    --border-interactive-negative-hover: 153, 25, 15;

    /* Иконки и элементы управления */

    --control-initial: 128, 128, 128;
    --control-hover: 77, 77, 77;

    /* Кнопки */

    --button-primary: 51, 51, 51;
    --button-primary-hover: 3, 3, 3;

    --button-secondary: 234, 234, 234;
    --button-secondary-hover: 219, 219, 219;

    --button-tertiary: 179, 179, 179;
    --button-tertiary-hover: 77, 77, 77;

    --color-neutral-primary-on: white;
    --color-neutral-primary-on-inverted: black;

    /* Цвета для выделения в тексте */

    --color-highlight: #ffeea4;
    --color-highlight-on: #000000;

    /* Переменные Opacity */

    /* значения опасити для подстановки в rgba */
    /* см https://www.figma.com/file/bwHohqLTCYoIk1rMAtRj2ujo/%D0%A2%E2%80%93%E2%80%93%D0%96-%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=273%3A84&viewport=-3710%2C2256%2C0.7162620425224304 */

    --opacity-surface-top: 0.5;
    --opacity-surface-disabled: 0.02;

    --opacity-surface-on-disabled: 0.3;

    --opacity-interactive-disabled: 0.3;

    --opacity-border-disabled: 0.05;
    --opacity-border-interactive-disabled: 0.1;

    --opacity-meta-initial: 0.3;
    --opacity-meta-hover: 0.7;

    --opacity-control-disabled: 0.2;
}
.tj-dark-theme {
    background-color: rgb(var(--background-primary));
    color: rgb(var(--surface-on-primary));

    /* Основной набор цветов задаётся триадами */
    /* для смешивания с токенами opacity */

    /* Цвета фоновой заливки страниц */

    --background-primary: 18, 21, 28;
    --background-secondary: 18, 21, 28;

    /* Цвета поверхностей */

    --surface-primary: 32, 35, 42;
    --surface-secondary: 32, 35, 42;
    --surface-accent: 225, 228, 242;
    --surface-top: 0, 0, 0;

    --surface-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);
    --surface-award-hover: linear-gradient(137deg, rgb(254, 234, 160), rgb(242, 196, 92) 52%, rgb(235, 176, 73) 92%);

    --surface-interactive: 51, 51, 102;
    --surface-interactive-hover: 62, 62, 117;

    --surface-positive: 41, 68, 51;
    --surface-positive-hover: 62, 87, 71;

    --surface-warning: 65, 56, 50;
    --surface-warning-hover: 84, 76, 71;

    --surface-negative: 65, 45, 50;
    --surface-negative-hover: 84, 66, 71;

    /* Общие цвета для --surface-primary и --surface-secondary */
    --surface-disabled: rgba(255, 255, 255, var(--opacity-surface-disabled));
    --surface-hover: 42, 44, 51;

    /* Цвета текста */

    --surface-on-primary: 255, 255, 255;
    --surface-on-secondary: 208, 208, 210;
    --surface-on-interactive: 178, 189, 255;
    --surface-on-positive: 132, 255, 143;
    --surface-on-warning: 255, 198, 140;
    --surface-on-negative: 255, 140, 140;
    --surface-on-static: 0, 0, 0;
    --surface-on-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);

    /* Общие цвета для --surface-on-primary и --surface-on-secondary */
    /* В темной теме серый текст (--surface-on-secondary) становится белым
    в состоянии disabled. Поэтому мы не можем просто
    менять прозрачность и проще сразу завести готовый цвет */
    --surface-on-disabled: rgba(255, 255, 255, var(--opacity-surface-on-disabled));
    --surface-on-initial: 113, 114, 119;
    --surface-on-placeholder: 136, 138, 141;
    --surface-on-hover: 231, 232, 232;

    /* Интерактивные элементы */

    --interactive-accent: 82, 82, 204;
    --interactive-accent-hover: 118, 118, 217;

    --interactive-positive: 40, 133, 78;
    --interactive-positive-hover: 99, 153, 121;

    --interactive-negative: 153, 46, 46;
    --interactive-negative-hover: 204, 82, 82;

    --interactive-warning: 153, 92, 61;
    --interactive-warning-hover: 78, 131, 107;

    --interactive-additional: 132, 255, 143;
    --interactive-additional-hover: 134, 191, 149;

    --interactive-on-primary: 255, 255, 255;
    --interactive-on-secondary: 255, 255, 255;

    /* Бордеры */

    --border-surface: 41, 44, 51;
    --border-separator: 62, 65, 70;
    --border-initial: 89, 91, 96;
    --border-hover: 136, 138, 141;
    --border-focus: 130, 139, 187;

    --border-interactive-positive: 109, 208, 120;
    --border-interactive-positive-disabled: 132, 255, 143;
    --border-interactive-positive-hover: 166, 255, 176;

    --border-interactive-warning: 204, 158, 112;
    --border-interactive-warning-disabled: 204, 158, 112;
    --border-interactive-warning-hover: 255, 217, 178;

    --border-interactive-negative: 208, 116, 118;
    --border-interactive-negative-disabled: 255, 140, 140;
    --border-interactive-negative-hover: 255, 166, 168;

    /* Иконки и элементы управления */

    --control-initial: 136, 138, 141;
    --control-hover: 208, 208, 210;

    /* Кнопки */

    --button-primary: 245, 245, 249;
    --button-primary-hover: 255, 255, 255;

    --button-secondary: 54, 57, 63;
    --button-secondary-hover: 65, 68, 73;

    --button-tertiary: 136, 138, 141;
    --button-tertiary-hover: 255, 255, 255;

    --color-neutral-primary-on: black;
    --color-neutral-primary-on-inverted: white;

    /* Цвета для выделения в тексте */

    --color-highlight: #d0d0d2;
    --color-highlight-on: #040406;

    /* Переменные Opacity */

    /* значения опасити для подстановки в rgba */
    /* см https://www.figma.com/file/iFuWTdbKPNbKM6TeSUL896/UI-Kit?node-id=2288%3A160 */

    --opacity-surface-top: 0.5;
    --opacity-surface-disabled: 0.03;

    --opacity-surface-on-disabled: 0.3;

    --opacity-interactive-disabled: 0.3;

    --opacity-border-disabled: 0.05;
    --opacity-border-interactive-disabled: 0.15;

    --opacity-meta-initial: 0.5;
    --opacity-meta-hover: 0.9;

    --opacity-control-disabled: 0.2;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.interface-heading-one--z241X {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}
@media (min-width: 760px) {
.interface-heading-one--z241X {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }
.interface-primary--XvEiC {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}
.interface-secondary--nXRjT, .button--vjFJQ {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}
.interface-error--5HE-U {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}
@media (min-width: 760px) {
.interface-error--5HE-U {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }
.interface-caption--XqAJy, .button--vjFJQ[data-size='small'] {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}
.interface-heading--OmTd6 {
    font: var(--interface-heading-mobile)
}
@media (min-width: 760px) {
.interface-heading--OmTd6 {
        font: var(--interface-heading)
}
    }
/* Базовая кнопка (primary accent): */
.button--vjFJQ {
    /* задаём пропертям дефолтные значения */
    --background-color: var(--interactive-accent);
    --hover: var(--interactive-accent-hover); /* подключаем типографику */
    color: white;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    outline: none;
    border-radius: 10px;
    box-sizing: border-box;

    /* задаём размеры и отступы */
    width: 100%;
    padding: 15px 25px;
    margin-top: 30px;

    /* это реализация, использующая custom property */
    background-color: rgb(var(--background-color));
}
@media (hover: hover) {
    .button--vjFJQ:hover {
        background-color: rgb(var(--hover));
        cursor: pointer;
    }
}
@media (min-width: 760px) {
    .button--vjFJQ {
        width: auto;
        min-width: 160px;
        margin-top: 40px;
    }
}
.button--vjFJQ[data-size='small'] {

    padding: 5px 15px;
    margin-top: 25px;
    border-radius: 5px;
}
@media (min-width: 760px) {
    .button--vjFJQ[data-size='small'] {
        min-width: auto;
        margin-top: 35px;
    }
}
/* Для демонстративных целей и случаев, когда кнопка отправится в обёртку */
.button--vjFJQ[data-nomargin='true'] {
    margin: 0;
}
/* Соседство кнопок должно идти после nomagrin стиля */
.button--vjFJQ + .button--vjFJQ {
    margin-top: 10px;
}
@media (min-width: 760px) {
    .button--vjFJQ + .button--vjFJQ {
        margin-left: 10px;
        margin-top: 0;
    }
}
/* Чтобы избежать дублирования, задаём цвета в разных состояниях переменными */
/* и далее переопределяем только переменные: */
/* https://increment.com/frontend/a-users-guide-to-css-variables/#css-variables-facilitate-style-encapsulation  */
/* а дальше начинам переопределять проперти для разных модификаторов */
/* Акцентные кнопки: */
.button--vjFJQ[data-accent='success'] {
    --background-color: var(--interactive-positive);
    --hover: var(--interactive-positive-hover);
}
.button--vjFJQ[data-accent='warning'] {
    --background-color: var(--interactive-warning);
    --hover: var(--interactive-warning-hover);
}
.button--vjFJQ[data-accent='error'] {
    --background-color: var(--interactive-negative);
    --hover: var(--interactive-negative-hover);
}
/* Нейтральные кнопки */
.button--vjFJQ[data-group='neutral'] {
    color: var(--color-neutral-primary-on);
    background-color: rgb(var(--button-primary));
}
/* модификации */
.button--vjFJQ[data-group='neutral'][data-secondary='true'] {
    color: var(--color-neutral-primary-on-inverted);
    background-color: rgb(var(--button-secondary));
}
/* у третьей нейтральной кнопки нет фона, */
/* вместо этого у нее бордер */
.button--vjFJQ[data-group='neutral'][data-tertiary='true'] {
    color: var(--color-neutral-primary-on-inverted);
    background: none;
    border: 1px solid rgb(var(--button-tertiary));
}
@media (hover: hover) {
    .button--vjFJQ[data-group='neutral']:hover {
        background-color: rgb(var(--button-primary-hover));
    }

    .button--vjFJQ[data-group='neutral'][data-secondary='true']:hover {
        background-color: rgb(var(--button-secondary-hover));
    }

    .button--vjFJQ[data-group='neutral'][data-tertiary='true']:hover {
        border-color: rgb(var(--button-tertiary-hover));
        background: none;
    }
}
/* disabled описываем в конце, чтобы перебить специфичность */
.button--vjFJQ[disabled], .button--vjFJQ[disabled]:hover {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: default;
    opacity: var(--opacity-interactive-disabled);
}
.button--vjFJQ[data-fullsize='true'] {
    width: 100%;
}
.button--vjFJQ[data-only-icon='true'] {
    padding: 0;
    margin: 0;
    min-width: 50px;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
/* stylelint-disable at-rule-no-unknown */
/* Тут меняются отступы лейаута (20px на мобиле, 0 далее) */
/* Но так как в макетах встречаются элементы */
/* на всю ширину, мы выносим это во внутренние обёртки (см. article/Grid) */
/* чтобы избежать отрицательных марджинов */
/* Тут число колонок внутренней сетки становится равным 4 */
/* Тут число колонок внутренней сетки становится равным 6 */
/* Появляется десктопный хэдер с бургером */
/* Появляется левая колонка */
/* Появляется правая колонка */
/* Перестраивается лейаут статьи, подложка перестает тянуться */
/* stylelint-enable at-rule-no-unknown */
.aside--K8WDo {
    box-sizing: border-box;
    width: 100%;
    /*
   * На больших экранах навбар должен занимать всё
   * доступное место по высоте, а на маленьких — высоту контента.
   * Если указать height: 100% — то на маленьких экранах навбар будет
   * не влезать и сработает оверфлоу. Если вместе с height: 100%
   * указать min-height: fit-content, то браузер будет считать,
   * что 100% больше, чем размер контента. А вот указание
   * минимальной высоты без указания просто высоты (т.е. height: auto)
   * работает как надо.
   */
    min-height: 100%;

    padding: 25px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}
@media (min-width: 760px) {
.aside--K8WDo {
        padding: 30px
}
    }
@media (min-width: 1024px) {
.aside--K8WDo {
        width: var(--navbar-width)
}
    }
.main--ph-Sq {
    margin-bottom: 50px;
}
.writeButton--CU9v1 {
    display: block;
    margin-bottom: 30px;
    max-width: 100%;
    margin-top: 40px
}
@media (min-width: 1110px) {
.writeButton--CU9v1 {
        display: none
}
    }
@media (min-width: 760px) {
.writeButton--CU9v1 {
        margin-top: 0;
        max-width: 230px
}
    }

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
/* stylelint-disable at-rule-no-unknown */
/* Тут меняются отступы лейаута (20px на мобиле, 0 далее) */
/* Но так как в макетах встречаются элементы */
/* на всю ширину, мы выносим это во внутренние обёртки (см. article/Grid) */
/* чтобы избежать отрицательных марджинов */
/* Тут число колонок внутренней сетки становится равным 4 */
/* Тут число колонок внутренней сетки становится равным 6 */
/* Появляется десктопный хэдер с бургером */
/* Появляется левая колонка */
/* Появляется правая колонка */
/* Перестраивается лейаут статьи, подложка перестает тянуться */
/* stylelint-enable at-rule-no-unknown */
:root {
    --header-desktop-height: 81px;
}
.root--5Aqhf {
    min-height: 81px;
    min-height: var(--header-desktop-height)
}
@media (min-width: 1024px) {
.root--5Aqhf {
        margin-bottom: 30px
}
    }
.root--5Aqhf[data-page='article'] {
    margin-bottom: 20px
}
@media (min-width: 1024px) {
.root--5Aqhf[data-page='article'] {
        margin-bottom: 30px
}
    }
.header--L\+Les {
    background: rgb(var(--background-primary));
    padding: 15px 20px 30px;
    box-sizing: border-box;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 4
}
@media (min-width: 1024px) {
.header--L\+Les {
        border-bottom: 1px solid rgb(var(--border-separator));
        padding: 20px 30px
}
    }
.root--5Aqhf[data-page='article'] .header--L\+Les {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}
.root--5Aqhf[data-page='urania'] .header--L\+Les {
    position: relative;
}
@media (min-width: 1024px) {
.root--5Aqhf .header--L\+Les[data-fixed='true'] {
        position: fixed
}
    }
.main--k75Jx {
    display: flex;
    align-items: center;
    min-height: 40px;
}
.logo--4Z2Q3 {
    min-width: 100px;
    max-width: 148px;
    flex-grow: 1
}
@media (min-width: 375px) {
.logo--4Z2Q3 {
        max-width: unset;
        width: 148px;
        flex-grow: 0
}
    }
@media (min-width: 760px) {
.logo--4Z2Q3 {
        width: 186px
}
    }
.desktopNav--QLAmH {
    display: none;
    margin-left: 20px
}
@media (min-width: 1024px) {
.desktopNav--QLAmH {
        display: block
}
    }
.desktopNav--QLAmH[data-hide='true'] {
    display: none
}
@media (min-width: 1230px) {
.desktopNav--QLAmH[data-hide='true'] {
        display: unset
}
    }
@media (min-width: 375px) {
.spacer--oHB7K {
        flex-grow: 1
}
    }
.spacer--oHB7K[data-hide='true'] {
    display: none
}
@media (min-width: 1230px) {
.spacer--oHB7K[data-hide='true'] {
        display: unset
}
    }
.search--DFL9S {
    margin-left: 12px;
}
.search--DFL9S[data-wide='true'] {
    flex-grow: 1;
    margin-left: 0
}
@media (min-width: 760px) {
.search--DFL9S[data-wide='true'] {
        margin-left: 20px
}
    }
@media (min-width: 1230px) {
.search--DFL9S[data-wide='true'] {
        flex-grow: 0
}
    }
.notifications--6JGUH {
    margin-left: 8px
}
@media (min-width: 760px) {
.notifications--6JGUH {
        margin-left: 13px
}
    }
.profile--8XPzd {
    margin-left: 13px
}
@media (min-width: 760px) {
.profile--8XPzd {
        margin-left: 18px
}
    }
.menu--CwByF {
    margin-left: 18px
}
@media (min-width: 760px) {
.menu--CwByF {
        margin-left: 23px
}
    }
@media (min-width: 1024px) {
.menu--CwByF {
        order: -1;
        margin-left: 0;
        margin-right: 20px
}
    }
.menu--CwByF[data-hide-on-mobile='true'] {
    display: none
}
@media (min-width: 760px) {
.menu--CwByF[data-hide-on-mobile='true'] {
        display: unset
}
    }
@media (min-width: 1110px) {
.menu--CwByF[data-hide-on-desktop='true'] {
        display: none
}
    }
.logo--4Z2Q3[data-hide-on-mobile='true'], .notifications--6JGUH[data-hide-on-mobile='true'], .profile--8XPzd[data-hide-on-mobile='true'] {
    display: none
}
@media (min-width: 760px) {
.logo--4Z2Q3[data-hide-on-mobile='true'], .notifications--6JGUH[data-hide-on-mobile='true'], .profile--8XPzd[data-hide-on-mobile='true'] {
        display: unset
}
    }
.mobileNav--15R4t {
    margin-top: 15px
}
@media (min-width: 1024px) {
.mobileNav--15R4t {
        display: none
}
    }
.writeButton--G2fPI {
    margin-left: 15px;
    display: none
}
@media (min-width: 1110px) {
.writeButton--G2fPI {
        display: block
}
    }
.container--\+kHQu {
    --navbar-width: 290px;

    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden
}
@media (min-width: 1024px) {
.container--\+kHQu {
        top: 81px;
        top: var(--header-desktop-height)
}
    }
@media (min-width: 1110px) {
.container--\+kHQu {
        display: block
}
    }
.container--\+kHQu[data-hide-on-desktop='true'] {
    display: none;
}
.container--\+kHQu[data-active='true'] {
    display: block;
    right: 0;
    z-index: 100;
}
.close--rbjSJ {
    position: absolute;
    z-index: 1;
    top: 25px;
    right: 20px
}
@media (min-width: 1024px) {
.close--rbjSJ {
        display: none
}
    }
@media (min-width: 760px) {
.close--rbjSJ {
        right: 30px;
        top: 30px
}
    }
.overlay--Vpofr {
    position: fixed;
    top: 81px;
    top: var(--header-desktop-height);
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(var(--surface-top), var(--opacity-surface-top));
    display: none;
}
@media (min-width: 1024px) {
.container--\+kHQu[data-active='true'] .overlay--Vpofr {
        display: block
}
    }
@media (--screen-always-show-navbar) {
.container--\+kHQu[data-always-on-desktop='true'] .overlay--Vpofr {
        display: none
}
    }
@media (min-width: 820px) {
.container--\+kHQu[data-flows-page='true'] .overlay--Vpofr {
        display: none
}
    }
.content--QnLkC {
    background: rgb(var(--background-primary))
}
@media (min-width: 1024px) {
.content--QnLkC {
        position: fixed;
        left: 0;
        right: 0;
        top: 81px;
        top: var(--header-desktop-height);
        width: var(--navbar-width);
        height: calc(100vh - 81px);
        height: calc(100vh - var(--header-desktop-height));
        overflow-y: auto;
        overflow-x: hidden
}
    }
.content--QnLkC:not(:hover) {
    /* For Firefox 64+ scrollbar */
    scrollbar-width: none;
    /* this will hide the scrollbar in old mozilla based browsers */
    overflow: -moz-scrollbars-none;
    /* this will hide the scrollbar in internet explorers */
    -ms-overflow-style: none
}
.content--QnLkC:not(:hover)::-webkit-scrollbar {
        display: none;
    }

.picture--VQhIa {
    max-width: 100%;
    max-height: 100%;
}

.picture--VQhIa[data-stretched='true'] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.image--VJISJ {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.picture--VQhIa[data-covered='true'] .image--VJISJ {
    -o-object-fit: cover;
       object-fit: cover;
}

.picture--VQhIa[data-stretched='true'] .image--VJISJ {
    width: 100%;
    height: 100%;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
/* stylelint-disable at-rule-no-unknown, value-keyword-case */
.avatars--N8apC {
    display: inline-flex;
    position: relative;
    vertical-align: top;
}
.container--PGlrl {
    display: inline-flex;
}
.container--PGlrl[data-visible='false'] {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
}
.avatar--HROdR {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}
.avatar--HROdR:not(:first-child) {
    margin-left: -6px;
}
@media (min-width: 760px) {
.avatars--N8apC[data-size='medium'] .avatar--HROdR {
        width: 30px;
        height: 30px
}
    }
.avatars--N8apC[data-size='large'] .avatar--HROdR {
    width: 40px;
    height: 40px;
}
@media (min-width: 760px) {
.avatars--N8apC[data-size='medium'] .avatar--HROdR:not(:first-child) {
        margin-left: -7px
}
    }
.avatars--N8apC[data-size='large'] .avatar--HROdR:not(:first-child) {
    margin-left: -10px;
}
.avatar--HROdR[data-placeholder='true'] {
    color: rgb(var(--border-surface));
}
.avatar--HROdR[data-placeholder='true']:last-child {
    background: rgb(var(--border-surface));
}
.avatar--HROdR[data-placeholder='true'] svg {
    max-width: 100%;
    max-height: 100%;
}
.image--g50HN {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.mask--YP-XG {
    /* Для Safari */
    height: 0;
}
/* stylelint-enable at-rule-no-unknown, value-keyword-case */
/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.heading-one--DlK0-, .h1--5DCKH {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}
@media (min-width: 760px) {
.heading-one--DlK0-, .h1--5DCKH {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }
.heading-two--gNFkS, .h2--jXHqw {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}
@media (min-width: 760px) {
.heading-two--gNFkS, .h2--jXHqw {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }
.heading-three--3GoSe, .h3--smeRh {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--By5nG, .h4--la1Hj {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}
@media (min-width: 760px) {
.heading-four--By5nG, .h4--la1Hj {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }
.heading-five--Nc6qK, .h5--ZtzWo, .text--plKrs {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--He4tC, .h6--jepJq {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}
@media (min-width: 760px) {
.heading-six--He4tC, .h6--jepJq {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }
.pill--Or\+va {
    box-sizing: border-box;
    text-decoration: none;
    color: rgb(var(--surface-on-primary));
    background-color: rgb(var(--surface-primary));
    border: 1px solid rgb(var(--border-surface));
    border-radius: 20px;
    padding: 4px;
    display: flex;
    align-items: center;
    min-height: 35px;
    position: relative
}
@media (min-width: 820px) {
.pill--Or\+va {
        min-height: 40px
}
    }
.pill--Or\+va + .pill--Or\+va {
    margin-left: 5px
}
@media (min-width: 820px) {
.pill--Or\+va + .pill--Or\+va {
        margin-left: 15px
}
    }
.text--plKrs {
    margin-left: 10px;
    margin-right: 10px
}
@media (min-width: 760px) {
.text--plKrs {
        margin-right: 15px
}
    }
@media (min-width: 760px) {
.text--plKrs:only-child {
        margin-left: 15px
}
    }
@media (hover: hover) {
    .pill--Or\+va:hover {
        border-color: rgb(var(--border-hover));
    }
}

@-webkit-keyframes showOpacity--fEAif {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes showOpacity--fEAif {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.progressCircle--9D79Z {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke: rgb(var(--interactive-additional));
    stroke-linecap: round;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
    -webkit-animation-delay: 300ms;
            animation-delay: 300ms;
    -webkit-animation-name: showOpacity--fEAif;
            animation-name: showOpacity--fEAif;
    -webkit-animation-duration: 600ms;
            animation-duration: 600ms;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@-webkit-keyframes showOpacity--lThYz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes showOpacity--lThYz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
.root--JNu-p {
    position: relative;
    margin: -5px;
    width: 35px;
    height: 35px;

    /* Для Safari, чтобы не появлялся вертикальный скролл у меню */
    overflow: hidden
}
@media (min-width: 820px) {
.root--JNu-p {
        width: 40px;
        height: 40px
}
    }
.finished--Cl1Je {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--surface-award);
    -webkit-animation-delay: 500ms;
            animation-delay: 500ms;
    -webkit-animation-name: showOpacity--lThYz;
            animation-name: showOpacity--lThYz;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-duration: 600ms;
            animation-duration: 600ms;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}
.imageWrapper--AE1Hx {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
    -webkit-animation-delay: 500ms;
            animation-delay: 500ms;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation: increaseImage--fGEnz ease-out, rotateImage--OJ4Cd linear, showOpacity--lThYz ease-in-out;
            animation: increaseImage--fGEnz ease-out, rotateImage--OJ4Cd linear, showOpacity--lThYz ease-in-out;
    -webkit-animation-duration: 600ms;
            animation-duration: 600ms
}
@media (min-width: 820px) {
.imageWrapper--AE1Hx {
        width: 30px;
        height: 30px
}
    }
.image--3gHsN {
    display: block;
    width: 100%;
    height: 100%;
}
@-webkit-keyframes rotateImage--OJ4Cd {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
@keyframes rotateImage--OJ4Cd {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes increaseImage--fGEnz {
    from {
        width: 2px;
        height: 2px;
        top: 17.5px;
        left: 17.5px;
    }

    to {
        width: 25px;
        height: 25px;
        top: 5px;
        left: 5px;
    }
}
@keyframes increaseImage--fGEnz {
    from {
        width: 2px;
        height: 2px;
        top: 17.5px;
        left: 17.5px;
    }

    to {
        width: 25px;
        height: 25px;
        top: 5px;
        left: 5px;
    }
}
@media (min-width: 820px) {
    @-webkit-keyframes increaseImage--fGEnz {
        from {
            width: 2px;
            height: 2px;
            top: 22.5px;
            left: 22.5px;
        }

        to {
            width: 30px;
            height: 30px;
            top: 5px;
            left: 5px;
        }
    }
    @keyframes increaseImage--fGEnz {
        from {
            width: 2px;
            height: 2px;
            top: 22.5px;
            left: 22.5px;
        }

        to {
            width: 30px;
            height: 30px;
            top: 5px;
            left: 5px;
        }
    }
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
.uraniaIcon--MLJer {
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #333333;
    color: rgb(var(--interactive-on-primary));
    padding: 4px 0;
    display: flex;
    justify-content: center
}
@media (min-width: 820px) {
.uraniaIcon--MLJer {
        width: 30px;
        height: 30px;
        padding: 5px 0
}
    }
.uraniaIcon--MLJer svg {
    height: 100%;
}
.uraniaIcon--MLJer[data-is-loaded='false'] {
    background-color: rgb(var(--border-surface));
    -webkit-animation-name: skeletonAnimate--0dA4d;
            animation-name: skeletonAnimate--0dA4d;
    -webkit-animation-duration: 1000ms;
            animation-duration: 1000ms;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}
@-webkit-keyframes skeletonAnimate--0dA4d {
    from, to {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}
@keyframes skeletonAnimate--0dA4d {
    from, to {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
.themisIcon--6JrFN {
    --bg-color: #333333;

    box-sizing: border-box;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--bg-color);
    color: rgb(var(--interactive-on-primary));
    padding: 4px 0;
    display: flex;
    justify-content: center;
    align-items: center
}
@media (min-width: 820px) {
.themisIcon--6JrFN {
        width: 30px;
        height: 30px;
        padding: 5px 0
}
    }
.betaIcon--AO5Tw {
    position: relative;
    top: -2px;
    left: -7px;
    color: rgb(var(--surface-on-placeholder))
}
@media (min-width: 820px) {
.betaIcon--AO5Tw {
        top: -2px;
        left: -12px
}
    }

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
.desktopNav--VJNTz {
    display: flex;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.heading-one--1QNtO, .h1--wRjpF {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}
@media (min-width: 760px) {
.heading-one--1QNtO, .h1--wRjpF {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }
.heading-two--UYMj6, .h2--vTYTF {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}
@media (min-width: 760px) {
.heading-two--UYMj6, .h2--vTYTF {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }
.heading-three--\+iinJ, .h3--7oEIQ {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--bELie, .h4--3wSqL {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}
@media (min-width: 760px) {
.heading-four--bELie, .h4--3wSqL {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }
.heading-five--Zv2Bz, .h5--07HQ1, .navItem--8GwrD, .arrowLink--NbChL {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--5q\+AM, .h6--p\+TnF {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}
@media (min-width: 760px) {
.heading-six--5q\+AM, .h6--p\+TnF {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }
.mobileNav--w-Q1A {
    --image-width: 25px;

    overflow: hidden;
    margin: 0 -20px
}
@media (min-width: 760px) {
.mobileNav--w-Q1A {
        margin: 0 -20px 0 -30px
}
    }
.scroller--4GMLu {
    overflow: auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
    /* For Firefox 64+ scrollbar */
    scrollbar-width: none;
    /* this will hide the scrollbar in old mozilla based browsers */
    overflow: -moz-scrollbars-none;
    /* this will hide the scrollbar in internet explorers */
    -ms-overflow-style: none
}
@media (min-width: 760px) {
.scroller--4GMLu {
        padding: 0 30px
}
    }
.scroller--4GMLu::-webkit-scrollbar {
    display: none;
}
.flows--4hEoA {
    display: flex;
    align-items: center;
    margin-left: 15px;
}
.navItem--8GwrD, .arrowLink--NbChL {
    text-decoration: none;
    color: rgb(var(--surface-on-primary));
    display: flex;
    align-items: center;
}
.navItem--8GwrD {
    margin-right: 25px;
}
.arrowLink--NbChL {
    min-height: var(--image-width);
    display: flex;
    align-items: center;
}
.imageWrapper--O06dZ {
    width: var(--image-width);
    height: var(--image-width);
    margin: 0;
    margin-right: 10px;
}
.image--gpeEF {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}
.title--l0Cew {
    white-space: nowrap;
}
.arrow---LVB- {
    display: inline-flex;
    margin-left: 6px;
}

.button--ogIUX {
    background: none;
    border: 0;
    padding: 0;
    display: flex;
    color: rgb(var(--surface-on-secondary));
    cursor: pointer;
}

.button--ogIUX:disabled {
    color: var(--surface-on-disabled);
    cursor: default;
    pointer-events: none;
}

.link--9Fk92 {
    display: flex;
    position: relative;
}

.image--9Nkzx, .blank--UH5Vn {
    height: 35px;
    width: 35px;
    border-radius: 50%;
}

.image--9Nkzx {
    -o-object-fit: cover;
       object-fit: cover;
}

.blank--UH5Vn {
    background-color: rgb(var(--surface-on-placeholder));
}

@media (hover: hover) {
    .button--ogIUX:not(:disabled):hover {
        color: rgb(var(--surface-on-hover));
    }
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
.root--yGUiF {
    display: inline-block;
    position: relative;
}
.popover--5ETTB {
    position: absolute;
    z-index: 500;
    left: 50%;
    bottom: -5px;
}
.popover--5ETTB[data-visible='false'] {
    visibility: hidden;
}
.arrow--C9uRN {
    box-sizing: border-box;
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgb(var(--border-separator)) transparent;
    top: 1px;
    transform: translateX(-50%);
    z-index: 1;
}
.arrow--C9uRN::before {
    content: '';
    box-sizing: border-box;
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgb(var(--surface-primary)) transparent;
    top: 1px;
    transform: translateX(-50%);
}
.content--p0jKK {
    box-sizing: border-box;
    width: 100vw;
    background: rgb(var(--surface-primary));
    border-radius: 15px;
    color: rgb(var(--surface-on-primary));
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    border: 1px solid rgb(var(--border-separator));
    box-shadow: 0 5px 10px rgb(var(--border-none));
    box-shadow: 0 5px 10px rgb(var(--border-initial));
    overflow: hidden
}
@media (min-width: 760px) {
.content--p0jKK {
        max-width: 360px
}
    }

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}
.body-primary--KCDoG, .paragraph--YbKz\+ {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}
@media (min-width: 760px) {
.body-primary--KCDoG, .paragraph--YbKz\+ {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }
.body-secondary--RduKs, .paragraph--YbKz\+[data-grade='secondary'] {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}
@media (min-width: 760px) {
.body-secondary--RduKs, .paragraph--YbKz\+[data-grade='secondary'] {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }
.body-large--B8tXW, .paragraph--YbKz\+[data-grade='large'] {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large-bold--JE-QC, .paragraph--YbKz\+[data-grade='large'][data-bold='true'] {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--lKlMO, .paragraph--YbKz\+[data-grade='medium'] {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium-bold--Jf1UJ, .paragraph--YbKz\+[data-grade='medium'][data-bold='true'] {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--TfHuQ, .paragraph--YbKz\+[data-grade='small'] {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small-bold--RuGSV, .paragraph--YbKz\+[data-grade='small'][data-bold='true'] {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
.paragraph--YbKz\+ {
    margin-top: 0;
    margin-bottom: 20px
}
@media (min-width: 760px) {
.paragraph--YbKz\+ {
        margin-bottom: 25px
}
    }
@media (min-width: 820px) {
.paragraph--YbKz\+ {
        padding-right: 20px
}
    }
.paragraph--YbKz\+[data-grade='secondary'] {
    margin-bottom: 10px
}
@media (min-width: 760px) {
.paragraph--YbKz\+[data-grade='secondary'] {
        margin-bottom: 20px
}
    }
.paragraph--YbKz\+[data-grade='large'] {
    margin-bottom: 20px;
}
.paragraph--YbKz\+[data-grade='medium'] {
    margin-bottom: 10px;
}
.paragraph--YbKz\+[data-grade='small'] {
    margin-bottom: 10px;
}
.paragraph--YbKz\+[data-nomargin='true'] {
    margin-bottom: 0;
}
.paragraph--YbKz\+[data-nopadding='true'] {
    padding-right: 0;
}
.paragraph--YbKz\+[data-opacity='true'] {
    opacity: var(--opacity-meta-1);
    opacity: var(--opacity-meta-initial);
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.body-primary--OItpx {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}

@media (min-width: 760px) {

.body-primary--OItpx {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }

.body-secondary--FA30d {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}

@media (min-width: 760px) {

.body-secondary--FA30d {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }

.body-large--s7iQo {
    font: 17px/25px Graphik;
    font: var(--body-large);
}

.body-large-bold--gC3hL {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}

.body-medium--4mKsD, .content--eRhjH {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}

.body-medium-bold--xLXzO, .content--eRhjH b {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}

.body-small--0AzVi {
    font: 13px/15px Graphik;
    font: var(--body-small);
}

.body-small-bold--5Bh6D {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}

.tj-light-theme {
    /* Основной набор цветов задаётся триадами */
    /* для смешивания с токенами opacity */

    /* Цвета фоновой заливки страниц */

    --background-primary: 247, 247, 247;
    --background-secondary: 255, 255, 255;

    /* Цвета поверхностей */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-accent: 26, 26, 26;
    --surface-top: 0, 0, 0;

    --surface-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);
    --surface-award-hover: linear-gradient(137deg, rgb(254, 234, 160), rgb(242, 196, 92) 52%, rgb(235, 176, 73) 92%);

    --surface-interactive: 232, 236, 255;
    --surface-interactive-hover: 220, 224, 242;

    --surface-positive: 239, 249, 242;
    --surface-positive-hover: 227, 237, 230;

    --surface-warning: 253, 247, 242;
    --surface-warning-hover: 240, 235, 230;

    --surface-negative: 254, 243, 242;
    --surface-negative-hover: 241, 231, 230;

    /* Общие цвета для --surface-primary и --surface-secondary */
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));
    --surface-hover: 242, 242, 242;

    /* Цвета текста */

    --surface-on-primary: 0, 0, 0;
    --surface-on-secondary: 0, 0, 0;
    --surface-on-interactive: 20, 20, 204;
    --surface-on-positive: 2, 131, 35;
    --surface-on-warning: 209, 70, 0;
    --surface-on-negative: 235, 16, 0;
    --surface-on-static: 0, 0, 0;
    --surface-on-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);

    /* Общие цвета для --surface-on-primary и --surface-on-secondary */
    /* В темной теме серый текст (--surface-on-secondary) становится белым
    в состоянии disabled. Поэтому мы не можем просто
    менять прозрачность и проще сразу завести готовый цвет.
    И хотя в светлой теме черный остается черным, пишем по аналогии */
    --surface-on-disabled: rgba(0, 0, 0, var(--opacity-surface-on-disabled));
    --surface-on-initial: 166, 166, 166;
    --surface-on-placeholder: 128, 128, 128;
    --surface-on-hover: 77, 77, 77;

    /* Интерактивные элементы */

    --interactive-accent: 46, 46, 229;
    --interactive-accent-hover: 0, 0, 178;

    --interactive-positive: 77, 153, 108;
    --interactive-positive-hover: 20, 102, 48;

    --interactive-negative: 242, 69, 53;
    --interactive-negative-hover: 189, 30, 19;

    --interactive-warning: 204, 123, 82;
    --interactive-warning-hover: 153, 71, 31;

    --interactive-additional: 0, 206, 51;
    --interactive-additional-hover: 43, 217, 87;

    --interactive-on-primary: 255, 255, 255;
    --interactive-on-secondary: 0, 0, 0;

    /* Бордеры */

    --border-surface: 237, 237, 237;
    --border-separator: 229, 229, 229;
    --border-initial: 204, 204, 204;
    --border-hover: 179, 179, 179;
    --border-focus: 138, 138, 229;

    --border-interactive-positive: 49, 155, 76;
    --border-interactive-positive-disabled: 2, 131, 35;
    --border-interactive-positive-hover: 31, 102, 48;

    --border-interactive-warning: 209, 70, 0;
    --border-interactive-warning-disabled: 209, 70, 0;
    --border-interactive-warning-hover: 128, 53, 0;

    --border-interactive-negative: 239, 61, 48;
    --border-interactive-negative-disabled: 235, 16, 0;
    --border-interactive-negative-hover: 153, 25, 15;

    /* Иконки и элементы управления */

    --control-initial: 128, 128, 128;
    --control-hover: 77, 77, 77;

    /* Кнопки */

    --button-primary: 51, 51, 51;
    --button-primary-hover: 3, 3, 3;

    --button-secondary: 234, 234, 234;
    --button-secondary-hover: 219, 219, 219;

    --button-tertiary: 179, 179, 179;
    --button-tertiary-hover: 77, 77, 77;

    --color-neutral-primary-on: white;
    --color-neutral-primary-on-inverted: black;

    /* Цвета для выделения в тексте */

    --color-highlight: #ffeea4;
    --color-highlight-on: #000000;

    /* Переменные Opacity */

    /* значения опасити для подстановки в rgba */
    /* см https://www.figma.com/file/bwHohqLTCYoIk1rMAtRj2ujo/%D0%A2%E2%80%93%E2%80%93%D0%96-%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=273%3A84&viewport=-3710%2C2256%2C0.7162620425224304 */

    --opacity-surface-top: 0.5;
    --opacity-surface-disabled: 0.02;

    --opacity-surface-on-disabled: 0.3;

    --opacity-interactive-disabled: 0.3;

    --opacity-border-disabled: 0.05;
    --opacity-border-interactive-disabled: 0.1;

    --opacity-meta-initial: 0.3;
    --opacity-meta-hover: 0.7;

    --opacity-control-disabled: 0.2;
}

.notification--Vt\+Kd {
    position: relative;
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-column-gap: 10px;
    text-decoration: none;
    color: var(--surface-on-primary);
    padding: 10px 20px;
    transition: 0.2s ease-in-out;
}

.notification--Vt\+Kd:first-child {
    margin-top: 15px;
    padding-top: 20px;
}

.notification--Vt\+Kd:last-child {
    padding-bottom: 20px;
}

.imageWrap--JC1lz {
    position: relative;
}

.imageWrap--JC1lz::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    display: block;
    top: 32px;
    right: -5px;
    background-size: contain;
    background-repeat: no-repeat;
}

.image--Ts5tX, .imageBlank--M3q9p {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

.imageBlank--M3q9p {
    background-color: rgba(var(--surface-top), var(--opacity-surface-top));
}

.text--BPS7K {
    margin: 0;
}

.timeAgo--bxNE6 {
    opacity: 0.5;
    margin: 0;
}

.notification--Vt\+Kd[data-is-seen='false'] {
    background-color: rgb(var(--background-primary));
}

.notification--Vt\+Kd[data-action='comment_like'] .imageWrap--JC1lz::before, .notification--Vt\+Kd[data-action='article_like'] .imageWrap--JC1lz::before {
    background-image: url(https://static2.tinkoffjournal.ru/janus/ada55fd481e87e4976325ef69fdc5be6c53a5f28/like-938c6bbf24e99b81fb1dc90c29bc3cce.png);
}

.notification--Vt\+Kd[data-action='comment_dislike'] .imageWrap--JC1lz::before {
    background-image: url(https://static2.tinkoffjournal.ru/janus/ada55fd481e87e4976325ef69fdc5be6c53a5f28/dislike-76089279159811240a9383b647ae17e8.png);
}

.notification--Vt\+Kd[data-action='editors_choice'] .imageWrap--JC1lz::before {
    background-image: url(https://static2.tinkoffjournal.ru/janus/ada55fd481e87e4976325ef69fdc5be6c53a5f28/pin-349e5ae3fc31e9d3c522446a91147b06.png);
}

.notification--Vt\+Kd[data-action='favorite'] .imageWrap--JC1lz::before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA+CAMAAAC8/6OBAAAA6lBMVEUAAAASEhIPDw8HBwcAAAAjIyPFxcUFBQUFBQUEBAQEBAQBAQEEBAQCAgLxX1zkWlgDAwMCAgICAgICAgL0YF3ZVVPzbWvkX17zd3XyZmP3gX/lZGLRUlCSOjrjWlflWVfpaWfvbWzwX1vZVVPpXFnJUE2bPzx0Ly/nXVn2YV75i4n4a2ntXlv0f3zbV1XwYWGLODisQ0NMHBxSIiKxQ0P4Yl/5bmv8pqT6i4n5f337qqj7oZ/7mZf6kI75e3j5dnT5cnD4amf4ZWL8rqz7paP6g4H6jIr7nZv6h4X6lJL7lZP6iIX7nZz5g4HUtlRTAAAANXRSTlMABgQJAQIBDBEPFBYZHMWLISUqH+STxIvFxcOLcjevi4iF14FVT0xGRPHg4NijomRWRDY1F/VbKLIAAANCSURBVEjHzZbZWtswEIWxLY1tmTYlkJCyU6Cl+w6h+0KhJOX9X6dnZhTJBmKSm349ieVY419nNFFiLfwXIn7PJWMMkbGEszW3Dk+42+JF1trU6pms56eNb/ieNLV6qKwewA3QZs5iYuTWJEnlBXGjZ/STkE1H+BAjUHZNnhUslgifDDFy2D+apqcvlTORwggEaP9kOF3jXWAWdYkUWVi9e3LcptFhknBFYy2sxXz2T3+26nkGt5CiTirLdj+0ay3PMLVghorDKt89DTqWI15KA4oxX30DL0Dlzsd2rZViNknRwIqpc+jPubY4y6GX8mmtAJVYtSJiqywvdj61a1CIGQlGXAxYFesXowu8RyOcLripv9EMnFKKGSvTcuuf2zVwBVNWvXRahVs/OxsOcZyphrFVDapIAZtQ4/Fvlrb6acx9OLjpu7Jkiqie4eqvui4v9RQ7+q4AlaS+hhPqpF39ClSWEMX1hAxXv7SLqTxJQoaJUl/bdR9UqEagOt/aJVQGymiK3uuoXYEiQBS8vrfLU+nk+9Iadn606y6osHwNWa3h9vt2KZWSUsZXvjMLlYEiwdSrmo1KQuXn8ErmppxS1v/ZJLNmmHOG4Vc5O6VrHiLxKq9muPLq2ZQa1uZVqleEHnW7W7dXA1QTgl7c4GVJqRvWxoM3YJa63d4Na4Oav5Qa9HbJqzfN6/qK2sLt90QBi162uQ63AwRk+Q5rGdxekwpe1PTqCbQoYm6juTZSqlcelELCVJVzrqoW2e/h48baiP8bkeqJT+UKkQMHbEW99KGiEHsleDoItbEMCExZ5nlelsDYbnNFKP9MiesQ1AFDKAFDYDIIHDBwjHXQGxavUIJt7r1ehJyDkexNgOVsB3Bz46DgaaXh+WXVDGHIqZHfFWXS73y/Ps5B+S9Mw4ijCmoku66JHSK+n/dSsRyCscSIIUNkZbhMylL6wZSCkKK6sTTGlSJDnHszYPnhoCJQiIoUsrKNhB0HknqAlJoEEY5bOo7ENATkVksRYpxLgDimUa2w1RFRHbJ1jGTmFi/dAzZHRIyFlhp7WFwRR0ULV0JwQ5inagnjNTEO435UQaHohiiCxEiAYhBhHFN34Dzgv9dfpdoe28nkDmQAAAAASUVORK5CYII=);
}

.notification--Vt\+Kd[data-action='reply'] .imageWrap--JC1lz::before, .notification--Vt\+Kd[data-action='reply_in_thread'] .imageWrap--JC1lz::before, .notification--Vt\+Kd[data-action='article_comment'] .imageWrap--JC1lz::before {
    background-image: url(https://static2.tinkoffjournal.ru/janus/ada55fd481e87e4976325ef69fdc5be6c53a5f28/reply-f53515364b43146f96956e71ddfcdec8.png);
}

.notification--Vt\+Kd[data-action='new_hero'] .imageWrap--JC1lz::before, .notification--Vt\+Kd[data-action='published_article'] .imageWrap--JC1lz::before {
    background-image: url(https://static2.tinkoffjournal.ru/janus/ada55fd481e87e4976325ef69fdc5be6c53a5f28/hero-8c299d6894358b067aef1e04c8ceefe0.png);
}

.notification--Vt\+Kd[data-action='ban'] .imageWrap--JC1lz::before {
    background-image: url(https://static2.tinkoffjournal.ru/janus/ada55fd481e87e4976325ef69fdc5be6c53a5f28/ban-b8b8a0a1e44a5bdb9f28c254b9e40eea.png);
}

.notification--Vt\+Kd[data-action='unban'] .imageWrap--JC1lz::before {
    background-image: url(https://static2.tinkoffjournal.ru/janus/ada55fd481e87e4976325ef69fdc5be6c53a5f28/feast-ea038225849b29b0e2aabceb8e23b800.png);
}

.notification--Vt\+Kd[data-action='custom'] .imageWrap--JC1lz::before {
    background-image: url(https://static2.tinkoffjournal.ru/janus/ada55fd481e87e4976325ef69fdc5be6c53a5f28/custom-34b62edc452eb5868fa138a451afd4b7.png);
}

@media (hover: hover) {
    .notification--Vt\+Kd:hover {
        background-color: rgb(var(--surface-hover));
    }
}

button.icon--\+JKji {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: rgb(var(--control-#000));
    color: rgb(var(--control-initial));
    cursor: pointer;
}

button.icon--\+JKji:disabled {
    color: rgba(var(--surface-on-secondary), var(--opacity-control-disabled));
}

button.icon--\+JKji:focus:not(.focus-visible--USO2F) {
    outline: none;
}

button.icon--\+JKji:focus:not(:focus-visible) {
    outline: none;
}

button.icon--\+JKji svg {
    display: block;
}

@media (hover: hover) {
    button.icon--\+JKji:not(:disabled):hover {
        color: rgb(var(--control-hover));
    }
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.interface-heading-one--rX5at {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile)
}

@media (min-width: 760px) {

.interface-heading-one--rX5at {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop)
}
    }

.interface-primary--6Hnqh {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}

.interface-secondary--pncC7 {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}

.interface-error--MURw4, .notificationWrap--BV-ua[data-error='true'] {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile)
}

@media (min-width: 760px) {

.interface-error--MURw4, .notificationWrap--BV-ua[data-error='true'] {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop)
}
    }

.interface-caption--7HPcL {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}

.interface-heading--74u2W {
    font: var(--interface-heading-mobile)
}

@media (min-width: 760px) {

.interface-heading--74u2W {
        font: var(--interface-heading)
}
    }

.notificationsPopover--x45yD {
    height: calc(1vh * 100 - 58px);
    height: calc(var(--notification-popover-vh, 1vh) * 100 - 58px);
    overflow-x: scroll
}

@media (min-width: 760px) {

.notificationsPopover--x45yD {
        max-height: calc(100vh - 80px);
        height: auto
}
    }

.notificationWrap--BV-ua {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    min-height: 350px;
    height: calc(100vh - 52px)
}

@media (min-width: 760px) {

.notificationWrap--BV-ua {
        height: auto
}
    }

.notificationWrap--BV-ua[data-loading='true'] {
    justify-content: start
}

@media (min-width: 760px) {

.notificationWrap--BV-ua[data-loading='true'] {
        justify-content: center
}
    }

.notificationWrap--BV-ua[data-error='true'] {
    color: rgb(var(--surface-on-negative));
}

.skeleton--m\+Tv6 {
    margin-bottom: 20px;
    width: 100%;
}

.message--ss2x\+ {
    margin-top: 20px;
    width: 80%;
    line-height: 20px;
}

.message--ss2x\+ > p {
    padding-right: 0;
}

.bell--WwNSQ svg {
    width: 95px;
    height: 100px;
    opacity: var(--opacity-surface-on-disabled);
}

.skeleton--YGV6W [data-skeleton='true'] {
    -webkit-animation: skeletonAnimate--RP3FK 3s linear infinite;
            animation: skeletonAnimate--RP3FK 3s linear infinite;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    background-size: 1000px 100%;
}

@-webkit-keyframes skeletonAnimate--RP3FK {
    from {
        background-position: -1000px 0;
    }

    to {
        background-position: 1000px 0;
    }
}

@keyframes skeletonAnimate--RP3FK {
    from {
        background-position: -1000px 0;
    }

    to {
        background-position: 1000px 0;
    }
}

.notificationSkeleton--s6Dd8 {
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-gap: 10px;
}

.notificationSkeletonCircle--4TQt6 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.notificationSkeletonLines--3ms7o {
    display: grid;
    grid-gap: 10px 0;
}

.notificationSkeletonLine--B5frh {
    width: 100%;
    height: 15px;
    border-radius: 4px;
}

.notificationSkeletonLineMini--z64q- {
    width: 70%;
    height: 15px;
    border-radius: 4px;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Regular-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/graphik-medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('https://static2.tinkoffjournal.ru/fonts/Graphik-Semibold-Converted.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Charter';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/charter-regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-regular.v2.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-medium.v2.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Ruble Sans';
    src:
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff2') format('woff2'),
        url('https://static-cdn.tinkoffjournal.ru/fonts/ruble-sans-semibold.v2.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

:root {
    /* Title */
    --title-mobile: bold 32px/35px Graphik;
    --title-desktop: bold 45px/50px Graphik;

    --subtitle-mobile: 24px/30px Graphik;
    --subtitle-desktop: 30px/35px Graphik;

    /* Heading */
    --heading-one-mobile: bold 28px/30px Graphik;
    --heading-one-desktop: bold 38px/45px Graphik;

    --heading-two-mobile: bold 24px/30px Graphik;
    --heading-two-desktop: bold 28px/35px Graphik;

    --heading-three: bold 21px/25px Graphik;

    --heading-four-mobile: bold 17px/20px Graphik;
    --heading-four-desktop: bold 21px/25px Graphik;

    --heading-five: bold 17px/20px Graphik;

    --heading-six-mobile: bold 15px/20px Graphik;
    --heading-six-desktop: bold 17px/20px Graphik;

    /* Body */
    --body-primary-mobile: 17px/25px Charter;
    --body-primary-desktop: 21px/30px Charter;

    --body-secondary-mobile: 15px/20px Graphik;
    --body-secondary-desktop: 17px/25px Graphik;

    --body-large: 17px/25px Graphik;

    --body-large-bold: bold 17px/25px Graphik;

    --body-medium: 15px/20px Graphik;

    --body-medium-bold: bold 15px/20px Graphik;

    --body-small: 13px/15px Graphik;

    --body-small-bold: bold 13px/15px Graphik;

    /* Interface */

    --interface-heading-one-desktop: bold 24px/30px Graphik;
    --interface-heading-one-mobile: bold 21px/25px Graphik;

    --interface-primary: 17px/25px Graphik;

    --interface-secondary: 17px/20px Graphik;

    --interface-caption: 15px/20px Graphik;

    --interface-error-mobile: 13px/15px Graphik;
    --interface-error-desktop: 15px/20px Graphik;

    /* Accent */
    --accent-number: 45px/50px Graphik;

    --accent-quote-mobile: 25px/35px Graphik;
    --accent-quote-desktop: 35px/50px Graphik;

    --accent-lead-mobile: 23px/30px Charter;
    --accent-lead-desktop: 27px/35px Charter;

    --accent-bold-mobile: bold 16px/25px Graphik;
    --accent-bold-desktop: bold 19px/30px Graphik;

    --accent-label-mobile: 13px/15px Graphik;
    --accent-label-desktop: 15px/20px Graphik;
}

/* stylelint-disable at-rule-no-unknown */

/* stylelint-enable at-rule-no-unknown */

.heading-one--etZ4P, .h1--iDvYf {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile)
}

@media (min-width: 760px) {

.heading-one--etZ4P, .h1--iDvYf {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop)
}
    }

.heading-two--53aEi, .h2--TBzop {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile)
}

@media (min-width: 760px) {

.heading-two--53aEi, .h2--TBzop {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop)
}
    }

.heading-three--jNSSc, .h3--CzIWc, .count--ca2En {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}

.heading-four--Lh8X8, .h4--6DXww {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile)
}

@media (min-width: 760px) {

.heading-four--Lh8X8, .h4--6DXww {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop)
}
    }

.heading-five--JEWEu, .h5--mvL93 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}

.heading-six--ROIm\+, .h6--aaiSe {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile)
}

@media (min-width: 760px) {

.heading-six--ROIm\+, .h6--aaiSe {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop)
}
    }

.bell--Op9fh {
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border: none;
    outline: none;
    color: rgb(var(--surface-on-secondary));
    background: transparent;
    padding: 0;
}

.bell--Op9fh:disabled {
    color: var(--surface-on-disabled);
    cursor: default;
    pointer-events: none;
}

.count--ca2En {
    display: inherit;
    justify-content: inherit;
    align-items: inherit;
    background-color: rgb(var(--interactive-accent));
    color: rgb(var(--interactive-on-primary));
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.icon--hwnXt {
    display: inline-flex;
}

.icon--hwnXt[data-is-active='true'] {
    color: rgb(var(--interactive-accent));
}

@media (hover: hover) {
    .bell--Op9fh:hover {
        color: rgb(var(--surface-on-hover));
    }
    .count--ca2En:hover {
        background-color: rgb(var(--interactive-accent-hover));
    }
    .icon--hwnXt[data-is-active='true']:hover {
        color: rgb(var(--interactive-accent-hover));
    }
}

html.lockOverflowX--iRn-Y, html.lockOverflowX--iRn-Y body {
    overflow: hidden;
    position: relative;
    height: 100vh;
}

.tj-light-theme {
    /* Основной набор цветов задаётся триадами */
    /* для смешивания с токенами opacity */

    /* Цвета фоновой заливки страниц */

    --background-primary: 247, 247, 247;
    --background-secondary: 255, 255, 255;

    /* Цвета поверхностей */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-accent: 26, 26, 26;
    --surface-top: 0, 0, 0;

    --surface-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);
    --surface-award-hover: linear-gradient(137deg, rgb(254, 234, 160), rgb(242, 196, 92) 52%, rgb(235, 176, 73) 92%);

    --surface-interactive: 232, 236, 255;
    --surface-interactive-hover: 220, 224, 242;

    --surface-positive: 239, 249, 242;
    --surface-positive-hover: 227, 237, 230;

    --surface-warning: 253, 247, 242;
    --surface-warning-hover: 240, 235, 230;

    --surface-negative: 254, 243, 242;
    --surface-negative-hover: 241, 231, 230;

    /* Общие цвета для --surface-primary и --surface-secondary */
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));
    --surface-hover: 242, 242, 242;

    /* Цвета текста */

    --surface-on-primary: 0, 0, 0;
    --surface-on-secondary: 0, 0, 0;
    --surface-on-interactive: 20, 20, 204;
    --surface-on-positive: 2, 131, 35;
    --surface-on-warning: 209, 70, 0;
    --surface-on-negative: 235, 16, 0;
    --surface-on-static: 0, 0, 0;
    --surface-on-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);

    /* Общие цвета для --surface-on-primary и --surface-on-secondary */
    /* В темной теме серый текст (--surface-on-secondary) становится белым
    в состоянии disabled. Поэтому мы не можем просто
    менять прозрачность и проще сразу завести готовый цвет.
    И хотя в светлой теме черный остается черным, пишем по аналогии */
    --surface-on-disabled: rgba(0, 0, 0, var(--opacity-surface-on-disabled));
    --surface-on-initial: 166, 166, 166;
    --surface-on-placeholder: 128, 128, 128;
    --surface-on-hover: 77, 77, 77;

    /* Интерактивные элементы */

    --interactive-accent: 46, 46, 229;
    --interactive-accent-hover: 0, 0, 178;

    --interactive-positive: 77, 153, 108;
    --interactive-positive-hover: 20, 102, 48;

    --interactive-negative: 242, 69, 53;
    --interactive-negative-hover: 189, 30, 19;

    --interactive-warning: 204, 123, 82;
    --interactive-warning-hover: 153, 71, 31;

    --interactive-additional: 0, 206, 51;
    --interactive-additional-hover: 43, 217, 87;

    --interactive-on-primary: 255, 255, 255;
    --interactive-on-secondary: 0, 0, 0;

    /* Бордеры */

    --border-surface: 237, 237, 237;
    --border-separator: 229, 229, 229;
    --border-initial: 204, 204, 204;
    --border-hover: 179, 179, 179;
    --border-focus: 138, 138, 229;

    --border-interactive-positive: 49, 155, 76;
    --border-interactive-positive-disabled: 2, 131, 35;
    --border-interactive-positive-hover: 31, 102, 48;

    --border-interactive-warning: 209, 70, 0;
    --border-interactive-warning-disabled: 209, 70, 0;
    --border-interactive-warning-hover: 128, 53, 0;

    --border-interactive-negative: 239, 61, 48;
    --border-interactive-negative-disabled: 235, 16, 0;
    --border-interactive-negative-hover: 153, 25, 15;

    /* Иконки и элементы управления */

    --control-initial: 128, 128, 128;
    --control-hover: 77, 77, 77;

    /* Кнопки */

    --button-primary: 51, 51, 51;
    --button-primary-hover: 3, 3, 3;

    --button-secondary: 234, 234, 234;
    --button-secondary-hover: 219, 219, 219;

    --button-tertiary: 179, 179, 179;
    --button-tertiary-hover: 77, 77, 77;

    --color-neutral-primary-on: white;
    --color-neutral-primary-on-inverted: black;

    /* Цвета для выделения в тексте */

    --color-highlight: #ffeea4;
    --color-highlight-on: #000000;

    /* Переменные Opacity */

    /* значения опасити для подстановки в rgba */
    /* см https://www.figma.com/file/bwHohqLTCYoIk1rMAtRj2ujo/%D0%A2%E2%80%93%E2%80%93%D0%96-%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=273%3A84&viewport=-3710%2C2256%2C0.7162620425224304 */

    --opacity-surface-top: 0.5;
    --opacity-surface-disabled: 0.02;

    --opacity-surface-on-disabled: 0.3;

    --opacity-interactive-disabled: 0.3;

    --opacity-border-disabled: 0.05;
    --opacity-border-interactive-disabled: 0.1;

    --opacity-meta-initial: 0.3;
    --opacity-meta-hover: 0.7;

    --opacity-control-disabled: 0.2;
}

.tj-dark-theme {
    background-color: rgb(var(--background-primary));
    color: rgb(var(--surface-on-primary));

    /* Основной набор цветов задаётся триадами */
    /* для смешивания с токенами opacity */

    /* Цвета фоновой заливки страниц */

    --background-primary: 18, 21, 28;
    --background-secondary: 18, 21, 28;

    /* Цвета поверхностей */

    --surface-primary: 32, 35, 42;
    --surface-secondary: 32, 35, 42;
    --surface-accent: 225, 228, 242;
    --surface-top: 0, 0, 0;

    --surface-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);
    --surface-award-hover: linear-gradient(137deg, rgb(254, 234, 160), rgb(242, 196, 92) 52%, rgb(235, 176, 73) 92%);

    --surface-interactive: 51, 51, 102;
    --surface-interactive-hover: 62, 62, 117;

    --surface-positive: 41, 68, 51;
    --surface-positive-hover: 62, 87, 71;

    --surface-warning: 65, 56, 50;
    --surface-warning-hover: 84, 76, 71;

    --surface-negative: 65, 45, 50;
    --surface-negative-hover: 84, 66, 71;

    /* Общие цвета для --surface-primary и --surface-secondary */
    --surface-disabled: rgba(255, 255, 255, var(--opacity-surface-disabled));
    --surface-hover: 42, 44, 51;

    /* Цвета текста */

    --surface-on-primary: 255, 255, 255;
    --surface-on-secondary: 208, 208, 210;
    --surface-on-interactive: 178, 189, 255;
    --surface-on-positive: 132, 255, 143;
    --surface-on-warning: 255, 198, 140;
    --surface-on-negative: 255, 140, 140;
    --surface-on-static: 0, 0, 0;
    --surface-on-award: linear-gradient(137deg, rgb(254, 228, 135), rgb(216, 169, 62) 52%, rgb(208, 149, 44) 92%);

    /* Общие цвета для --surface-on-primary и --surface-on-secondary */
    /* В темной теме серый текст (--surface-on-secondary) становится белым
    в состоянии disabled. Поэтому мы не можем просто
    менять прозрачность и проще сразу завести готовый цвет */
    --surface-on-disabled: rgba(255, 255, 255, var(--opacity-surface-on-disabled));
    --surface-on-initial: 113, 114, 119;
    --surface-on-placeholder: 136, 138, 141;
    --surface-on-hover: 231, 232, 232;

    /* Интерактивные элементы */

    --interactive-accent: 82, 82, 204;
    --interactive-accent-hover: 118, 118, 217;

    --interactive-positive: 40, 133, 78;
    --interactive-positive-hover: 99, 153, 121;

    --interactive-negative: 153, 46, 46;
    --interactive-negative-hover: 204, 82, 82;

    --interactive-warning: 153, 92, 61;
    --interactive-warning-hover: 78, 131, 107;

    --interactive-additional: 132, 255, 143;
    --interactive-additional-hover: 134, 191, 149;

    --interactive-on-primary: 255, 255, 255;
    --interactive-on-secondary: 255, 255, 255;

    /* Бордеры */

    --border-surface: 41, 44, 51;
    --border-separator: 62, 65, 70;
    --border-initial: 89, 91, 96;
    --border-hover: 136, 138, 141;
    --border-focus: 130, 139, 187;

    --border-interactive-positive: 109, 208, 120;
    --border-interactive-positive-disabled: 132, 255, 143;
    --border-interactive-positive-hover: 166, 255, 176;

    --border-interactive-warning: 204, 158, 112;
    --border-interactive-warning-disabled: 204, 158, 112;
    --border-interactive-warning-hover: 255, 217, 178;

    --border-interactive-negative: 208, 116, 118;
    --border-interactive-negative-disabled: 255, 140, 140;
    --border-interactive-negative-hover: 255, 166, 168;

    /* Иконки и элементы управления */

    --control-initial: 136, 138, 141;
    --control-hover: 208, 208, 210;

    /* Кнопки */

    --button-primary: 245, 245, 249;
    --button-primary-hover: 255, 255, 255;

    --button-secondary: 54, 57, 63;
    --button-secondary-hover: 65, 68, 73;

    --button-tertiary: 136, 138, 141;
    --button-tertiary-hover: 255, 255, 255;

    --color-neutral-primary-on: black;
    --color-neutral-primary-on-inverted: white;

    /* Цвета для выделения в тексте */

    --color-highlight: #d0d0d2;
    --color-highlight-on: #040406;

    /* Переменные Opacity */

    /* значения опасити для подстановки в rgba */
    /* см https://www.figma.com/file/iFuWTdbKPNbKM6TeSUL896/UI-Kit?node-id=2288%3A160 */

    --opacity-surface-top: 0.5;
    --opacity-surface-disabled: 0.03;

    --opacity-surface-on-disabled: 0.3;

    --opacity-interactive-disabled: 0.3;

    --opacity-border-disabled: 0.05;
    --opacity-border-interactive-disabled: 0.15;

    --opacity-meta-initial: 0.5;
    --opacity-meta-hover: 0.9;

    --opacity-control-disabled: 0.2;
}

/* stylelint-disable at-rule-no-unknown */
/* stylelint-enable at-rule-no-unknown */
/* stylelint-disable at-rule-no-unknown */
/* Тут меняются отступы лейаута (20px на мобиле, 0 далее) */
/* Но так как в макетах встречаются элементы */
/* на всю ширину, мы выносим это во внутренние обёртки (см. article/Grid) */
/* чтобы избежать отрицательных марджинов */
/* Тут число колонок внутренней сетки становится равным 4 */
/* Тут число колонок внутренней сетки становится равным 6 */
/* Появляется десктопный хэдер с бургером */
/* Появляется левая колонка */
/* Появляется правая колонка */
/* Перестраивается лейаут статьи, подложка перестает тянуться */
/* stylelint-enable at-rule-no-unknown */
:root {
    --header-desktop-height: 81px;
}
.root--Yb2lh {
    min-height: 81px;
    min-height: var(--header-desktop-height)
}
@media (min-width: 1024px) {
.root--Yb2lh {
        margin-bottom: 30px
}
    }
.root--Yb2lh[data-page='article'] {
    margin-bottom: 20px
}
@media (min-width: 1024px) {
.root--Yb2lh[data-page='article'] {
        margin-bottom: 30px
}
    }
.header--mxa1h {
    background: rgb(var(--background-primary));
    padding: 15px 20px 30px;
    box-sizing: border-box;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 4
}
@media (min-width: 1024px) {
.header--mxa1h {
        border-bottom: 1px solid rgb(var(--border-separator));
        padding: 20px 30px
}
    }
.root--Yb2lh[data-page='article'] .header--mxa1h {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}
.root--Yb2lh[data-page='urania'] .header--mxa1h {
    position: relative;
}
@media (min-width: 1024px) {
.root--Yb2lh .header--mxa1h[data-fixed='true'] {
        position: fixed
}
    }
.main--vziGX {
    display: flex;
    align-items: center;
    min-height: 40px;
}
.logo--9HkIm {
    min-width: 100px;
    max-width: 148px;
    flex-grow: 1
}
@media (min-width: 375px) {
.logo--9HkIm {
        max-width: unset;
        width: 148px;
        flex-grow: 0
}
    }
@media (min-width: 760px) {
.logo--9HkIm {
        width: 186px
}
    }
.desktopNav--Pqp6c {
    display: none;
    margin-left: 20px
}
@media (min-width: 1024px) {
.desktopNav--Pqp6c {
        display: block
}
    }
.desktopNav--Pqp6c[data-hide='true'] {
    display: none
}
@media (min-width: 1230px) {
.desktopNav--Pqp6c[data-hide='true'] {
        display: unset
}
    }
@media (min-width: 375px) {
.spacer--kvh3l {
        flex-grow: 1
}
    }
.spacer--kvh3l[data-hide='true'] {
    display: none
}
@media (min-width: 1230px) {
.spacer--kvh3l[data-hide='true'] {
        display: unset
}
    }
.search--TjCXF {
    margin-left: 12px;
}
.search--TjCXF[data-wide='true'] {
    flex-grow: 1;
    margin-left: 0
}
@media (min-width: 760px) {
.search--TjCXF[data-wide='true'] {
        margin-left: 20px
}
    }
@media (min-width: 1230px) {
.search--TjCXF[data-wide='true'] {
        flex-grow: 0
}
    }
.notifications--6JKlw {
    margin-left: 8px
}
@media (min-width: 760px) {
.notifications--6JKlw {
        margin-left: 13px
}
    }
.profile--gqDnq {
    margin-left: 13px
}
@media (min-width: 760px) {
.profile--gqDnq {
        margin-left: 18px
}
    }
.menu--qgScB {
    margin-left: 18px
}
@media (min-width: 760px) {
.menu--qgScB {
        margin-left: 23px
}
    }
@media (min-width: 1024px) {
.menu--qgScB {
        order: -1;
        margin-left: 0;
        margin-right: 20px
}
    }
.menu--qgScB[data-hide-on-mobile='true'] {
    display: none
}
@media (min-width: 760px) {
.menu--qgScB[data-hide-on-mobile='true'] {
        display: unset
}
    }
@media (min-width: 1110px) {
.menu--qgScB[data-hide-on-desktop='true'] {
        display: none
}
    }
.logo--9HkIm[data-hide-on-mobile='true'], .notifications--6JKlw[data-hide-on-mobile='true'], .profile--gqDnq[data-hide-on-mobile='true'] {
    display: none
}
@media (min-width: 760px) {
.logo--9HkIm[data-hide-on-mobile='true'], .notifications--6JKlw[data-hide-on-mobile='true'], .profile--gqDnq[data-hide-on-mobile='true'] {
        display: unset
}
    }
.mobileNav--It6mw {
    margin-top: 15px
}
@media (min-width: 1024px) {
.mobileNav--It6mw {
        display: none
}
    }
.writeButton--PUvUL {
    margin-left: 15px;
    display: none
}
@media (min-width: 1110px) {
.writeButton--PUvUL {
        display: block
}
    }