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

/* Тут меняются отступы лейаута (20px на мобиле, 0 далее) */

/* Но так как в макетах встречаются элементы */

/* на всю ширину, мы выносим это во внутренние обёртки (см. article/Grid) */

/* чтобы избежать отрицательных марджинов */

/* Тут число колонок внутренней сетки становится равным 4 */

/* Тут число колонок внутренней сетки становится равным 6 */

/* Появляется десктопный хэдер с бургером */

/* Появляется левая колонка */

/* Появляется правая колонка */

/* Перестраивается лейаут статьи, подложка перестает тянуться */

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

/* stylelint-disable at-rule-no-unknown, value-keyword-case */

/* ширина сайдбаров */

/* ширина стакана на планшете */

/* ширина стакана на десктопе */

/* ширина шапки на десктопе, равна сумме layoutCenterWidthDesktop + layoutGap + layoutSidebarWidth */

.layout--1rDnF {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box
}

@media (min-width: 1110px) {

.layout--1rDnF {
        display: grid;
        grid-template-areas:
            'left . header header .'
            'left . center right .';
        grid-template-columns: 0fr 1fr 0fr 0fr 1fr;
        grid-template-rows: 0fr 1fr
}
    }

.header--ySda- {
    grid-area: header;
    max-width: calc(760px + 30px + 260px);
    margin-bottom: 20px
}

@media (min-width: 760px) {

.header--ySda- {
        margin-bottom: 30px
}
    }

.left--F9z1\+ {
    display: none;
    grid-area: left;
    width: 260px
}

@media (min-width: 1110px) {

.left--F9z1\+ {
        display: block
}
    }

.right--yDOd3 {
    display: none;
    grid-area: right;
    width: 260px;
    margin-left: 30px
}

@media (min-width: 1400px) {

.right--yDOd3 {
        display: block
}
    }

.center--FP2d3 {
    grid-area: center;
    position: relative;
    margin: 0 auto
}

@media (min-width: 820px) {

.center--FP2d3 {
        /* дальше не должно быть растяжек на весь экран */
        /* с этого момента мы отвечаем за ширину стакана */
        /* до этого он был 100%, чтобы внутренняя сетка */
        /* могла содержать выбивающиеся элементы */
        max-width: 760px
}
    }

@media (min-width: 1110px) {

.center--FP2d3 {
        width: 760px
}
    }

/* stylelint-enable at-rule-no-unknown, value-keyword-case */
.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 */
@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--rVySL {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile)
}
@media (min-width: 760px) {
.body-primary--rVySL {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop)
}
    }
.body-secondary--ApY1Y {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile)
}
@media (min-width: 760px) {
.body-secondary--ApY1Y {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop)
}
    }
.body-large--hqTXb, .logout--KkbR8, .link--a\+UU1 {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large-bold--y\+aFx {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--OITsT {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium-bold--0OdtF {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--tJ\+bt, .copyrightWrapper--6QQxF {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small-bold--OA08v {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
/* В идеальном мире футер не знал бы куда вставляется
 и тупо занимал бы 100% ширины. Но сейчас у нас на разных
 страницах разный лейаут, который рендерится
 вместе с контентом отдельно от футера.
 Поэтому приходится передавать тип страницы,
 а футер подстраивать под ширину лейаута на этой странице */
.footer--UOto8 {
    margin-top: 35px
}
@media (min-width: 760px) {
.footer--UOto8 {
        padding: 0 30px
}
    }
@media (min-width: 820px) {
.footer--UOto8 {
        margin: 50px auto 0
}
    }
@media (min-width: 760px) {
.footer--UOto8[data-page='default'], .footer--UOto8[data-page='with-aside'] {
        margin-left: auto;
        margin-right: auto;
        max-width: 700px;
        padding: 0
}
    }
@media (min-width: 820px) {
.footer--UOto8[data-page='default'], .footer--UOto8[data-page='with-aside'] {
        max-width: 760px
}
    }
.footer--UOto8[data-page='article'], .footer--UOto8[data-page='urania'] {
    /* В статьях внизу стоят рекомендосы,
    у них есть белая подложка,
    чтобы рекомендосы всегда были на белом фоне.
    Эта подложка наезжает на футер,
    поэтому ставим футеру z-index */
    position: relative;
    z-index: 10;

    /* В статьях нужно растягивать футер на 100% ширины экрана,
    но на body вешается класс лейаута, который ограничивает ширину контента.
    Приходится выкручиваться таким образом( */
    box-sizing: border-box;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}
.footer--UOto8[data-page='urania'] {
    max-width: 100%;
    margin-top: 150px;
}
/**
 * Эта часть нужна для того, чтобы на страницах статей всегда задавать белый фон подвалу.
 * TODO: Убрать это в редизайне статьи.
 */
.footer--UOto8[data-page='article'] {
    background: rgb(var(--surface-primary));
}
.inner--E16Ez {
    padding: 15px 20px 40px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgb(var(--border-separator))
}
@media (min-width: 760px) {
.inner--E16Ez {
        padding: 15px 0 20px
}
    }
.footer--UOto8, .logout--KkbR8, .link--a\+UU1, .mail--jPU6O {
    color: rgb(var(--surface-on-placeholder));
}
.main--jq9w- {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}
@media (min-width: 820px) {
.main--jq9w- {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px
}
    }
.links--Cjc5C {
    max-width: 540px;
}
.logout--KkbR8 {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}
.logout--KkbR8:disabled {
    visibility: hidden;
}
.link--a\+UU1 {
    text-decoration: none;
    display: block;
    margin-bottom: 5px
}
@media (min-width: 820px) {
.link--a\+UU1 {
        display: inline-block;
        margin-right: 15px
}
    }
.mail--jPU6O {
    text-decoration: none;
    margin-left: 5px;
}
.copyrightWrapper--6QQxF {
    display: flex;
}
.coatOfArms--vWkKz {
    width: 40px;
    height: 35px;
    margin-right: 10px;
}
.copyright--Rfkpj {
    white-space: nowrap;
    margin-bottom: 5px;
}
@media (hover: hover) {
    .link--a\+UU1:hover, .mail--jPU6O:hover, .logout--KkbR8:hover {
        color: rgb(var(--surface-on-hover));
    }
}