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

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

    --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: 188, 90, 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-accent-positive: 132, 255, 143;
    --surface-on-accent-negative: 255, 140, 140;

    /* В темной теме серый текст (--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-surface-secondary-hover: 209, 209, 209;
    --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: 188, 90, 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: 255, 255, 255;
    --color-neutral-primary-on-inverted: 0, 0, 0;

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

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

    /* Переменные 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-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 {
    /* TODO: Данные значения должны проставляться на уровне приложений, поэтому впоследствии будет выпилено, а меинтейнерам приложений передана данная информация */
    background-color: rgb(var(--background-primary));
    color: rgb(var(--surface-on-primary));

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

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

    --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-accent-positive: 2, 131, 35;
    --surface-on-accent-negative: 235, 16, 0;

    /* В темной теме серый текст (--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-surface-secondary-hover: 91, 95, 101;
    --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: 0, 0, 0;
    --color-neutral-primary-on-inverted: 255, 255, 255;

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

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

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

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

    --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;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-light-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-hover: 242, 242, 242;

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

    --opacity-surface-disabled: 0.02;
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));

    --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-accent: 26, 26, 26;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 0, 0, 0;
    --outline-secondary: 0, 0, 0;
    --outline-hover: 77, 77, 77;
    --outline-placeholder: 128, 128, 128;
    --outline-initial: 166, 166, 166;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(0, 0, 0, var(--opacity-outline-disabled));

    --outline-faint: 204, 204, 204;
    --outline-faint-hover: 179, 179, 179;
    --outline-slight: 229, 229, 229;
    --outline-slight-hover: 209, 209, 209;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        0,
        0,
        0,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 138, 138, 229;
    --outline-interactive: 20, 20, 204;
    --outline-interactive-hover: 1, 1, 160;
    --outline-positive: 0, 132, 34;
    --outline-positive-hover: 30, 109, 50;

    --opacity-outline-positive-disabled: 0.1;
    --outline-positive-disabled: rgba(
        2,
        131,
        35,
        var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 182, 87, 0;
    --outline-warning-hover: 128, 53, 0;

    --opacity-outline-warning-disabled: 0.1;
    --outline-warning-disabled: rgba(
        209,
        70,
        0,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 219, 33, 19;
    --outline-negative-hover: 153, 25, 15;

    --opacity-outline-negative-disabled: 0.1;
    --outline-negative-disabled: rgba(
        219,
        33,
        19,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 255, 255, 255;
    --outline-positive-accent: 109, 208, 120;
    --outline-negative-accent: 208, 116, 118;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(0, 0, 0, var(--opacity-fill-disabled));

    --fill-hover: 77, 77, 77;
    --fill-highlight: 255, 238, 164;
    --fill-primary: 51, 51, 51;
    --fill-primary-hover: 3, 3, 3;
    --fill-secondary: 234, 234, 234;
    --fill-secondary-hover: 219, 219, 219;
    --fill-interactive: 46, 46, 229;
    --fill-interactive-hover: 0, 0, 178;
    --fill-additional: 0, 206, 51;
    --fill-additional-hover: 43, 217, 87;
    --fill-positive: 53, 128, 84;
    --fill-positive-hover: 20, 102, 48;
    --fill-warning: 175, 95, 55;
    --fill-warning-hover: 153, 71, 31;
    --fill-negative: 212, 59, 45;
    --fill-negative-hover: 189, 30, 19;

    /* 
      Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens
    */
    --opacity-link-border: 0.3;
    --opacity-link-border-hover: 0.7;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-dark-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 32, 35, 42;
    --surface-secondary: 32, 35, 42;
    --surface-hover: 42, 44, 51;

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

    --opacity-surface-disabled: 0.03;
    --surface-disabled: rgba(255, 255, 255, var(--opacity-surface-disabled));

    --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-accent: 225, 228, 242;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 255, 255, 255;
    --outline-secondary: 208, 208, 210;
    --outline-hover: 231, 232, 232;
    --outline-placeholder: 136, 138, 141;
    --outline-initial: 113, 114, 119;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(255, 255, 255, var(--opacity-outline-disabled));

    --outline-faint: 89, 91, 96;
    --outline-faint-hover: 136, 138, 141;
    --outline-slight: 62, 65, 70;
    --outline-slight-hover: 91, 95, 101;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        255,
        255,
        255,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 130, 139, 187;
    --outline-interactive: 147, 162, 255;
    --outline-interactive-hover: 129, 129, 246;
    --outline-positive: 109, 208, 120;
    --outline-positive-hover: 166, 255, 176;

    --opacity-outline-positive-disabled: 0.15;
    --outline-positive-disabled: rgba(
        132,
        255,
        143 var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 204, 158, 112;
    --outline-warning-hover: 255, 217, 178;

    --opacity-outline-warning-disabled: 0.15;
    --outline-warning-disabled: rgba(
        204,
        158,
        112,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 218, 133, 134;
    --outline-negative-hover: 255, 166, 168;

    --opacity-outline-negative-disabled: 0.15;
    --outline-negative-disabled: rgba(
        218,
        133,
        134,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 0, 0, 0;
    --outline-positive-accent: 49, 155, 76;
    --outline-negative-accent: 239, 61, 48;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(255, 255, 255, var(--opacity-fill-disabled));

    --fill-hover: 208, 208, 210;
    --fill-highlight: 208, 208, 210;
    --fill-primary: 245, 245, 249;
    --fill-primary-hover: 255, 255, 255;
    --fill-secondary: 54, 57, 63;
    --fill-secondary-hover: 65, 68, 73;
    --fill-interactive: 102, 116, 204;
    --fill-interactive-hover: 122, 134, 204;
    --fill-additional: 132, 255, 143;
    --fill-additional-hover: 173, 255, 181;
    --fill-positive: 40, 133, 78;
    --fill-positive-hover: 99, 153, 121;
    --fill-warning: 204, 123, 82;
    --fill-warning-hover: 178, 131, 107;
    --fill-negative: 178, 65, 65;
    --fill-negative-hover: 204, 82, 82;

    /* Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens */
    --opacity-link-border: 0.5;
    --opacity-link-border-hover: 0.7;
}
@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://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 {
    --modal-index: 2001;
}
/*
    Переменные ссылок нельзя вешать на :root, потому что они зависят
    от цветов темы. Вешаем их на контейнер темы
*/
.tj-light-theme, .tj-dark-theme {
    --color-link-border: rgba(
        var(--outline-interactive),
        var(--opacity-link-border)
    );
    --color-link-border-hover: rgba(
        var(--outline-interactive),
        var(--opacity-link-border-hover)
    );

    --color-link-positive-border: rgba(
        var(--outline-positive),
        var(--opacity-link-border)
    );
    --color-link-positive-border-hover: rgba(
        var(--outline-positive),
        var(--opacity-link-border-hover)
    );

    --color-link-negative-border: rgba(
        var(--outline-negative),
        var(--opacity-link-border)
    );
    --color-link-negative-border-hover: rgba(
        var(--outline-negative),
        var(--opacity-link-border-hover)
    );

    --color-link-warning-border: rgba(
        var(--outline-warning),
        var(--opacity-link-border)
    );
    --color-link-warning-border-hover: rgba(
        var(--outline-warning),
        var(--opacity-link-border-hover)
    );

    --color-link-placeholder-border: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border)
    );
    --color-link-placeholder-border-hover: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border-hover)
    );

    --color-link-dim-border: rgba(
        var(--outline-initial),
        var(--opacity-link-border)
    );
    --color-link-dim-border-hover: rgba(
        var(--outline-initial),
        var(--opacity-link-border-hover)
    );
}
: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-secondary-bold-mobile: bold 15px/20px Graphik;
    --body-secondary-bold-desktop: bold 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-static: 32px/35px 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;

    --accent-impact: 23px/25px Graphik;
}
.body-primary--uI1zx {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--uI1zx {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--uI1zx b, .body-primary--uI1zx strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--uI1zx b, .body-primary--uI1zx strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--lxP_q {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--lxP_q {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--lxP_q b, .body-secondary--lxP_q strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--lxP_q b, .body-secondary--lxP_q strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--OBKol {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--OBKol b, .body-large--OBKol strong, .body-large-bold--HTDuG {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--dHkd5 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--dHkd5 b, .body-medium--dHkd5 strong, .body-medium-bold--kKBT7 {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--JP7f5 {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--JP7f5 b, .body-small--JP7f5 strong, .body-small-bold--LNoDL {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
/* Добавляем тег в селекторы, чтобы повысить их вес.
Это нужно для того, чтобы стили кита не перебивались
стилями из старого фронта */
.a--fWzcg, a.a--fWzcg, span.a--fWzcg {
    color: rgb(var(--outline-interactive));
    text-decoration: none;
    cursor: pointer;
    padding-bottom: 3px;
}
@media (hover: hover) {
        .a--fWzcg:hover, a.a--fWzcg:hover, span.a--fWzcg:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--outline-interactive));
            background-image: linear-gradient(
                var(--color-link-border-hover),
                var(--color-link-border-hover)
            );
            background-repeat: repeat-x;
            background-size: 100% 1px;
            background-position: 0 100%;
        }
    }
a.a--fWzcg[data-pseudo='true'], span.a--fWzcg[data-pseudo='true'] {
    background-image: linear-gradient(
        to right,
        var(--color-link-border) 5px,
        transparent 4px
    );
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: calc(5px + 4px) 1px;
}
@media (hover: hover) {
        a.a--fWzcg[data-pseudo='true']:hover, span.a--fWzcg[data-pseudo='true']:hover {
            background-image: linear-gradient(
                to right,
                var(--color-link-border-hover) 5px,
                transparent 4px
            );
        }
    }
a.a--fWzcg[data-secondary='true'], span.a--fWzcg[data-secondary='true'] {
    color: rgb(var(--outline-secondary));
    background-image: linear-gradient(
        rgba(var(--outline-secondary), var(--opacity-link-border)),
        rgba(var(--outline-secondary), var(--opacity-link-border))
    );
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 100% 1px;
}
@media (hover: hover) {
        a.a--fWzcg[data-secondary='true']:hover, span.a--fWzcg[data-secondary='true']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--outline-secondary));
            background-image: linear-gradient(
                rgba(
                    var(--outline-secondary),
                    var(--opacity-link-border-hover)
                ),
                rgba(var(--outline-secondary), var(--opacity-link-border-hover))
            );
        }
    }
a.a--fWzcg[data-surface='positive'], span.a--fWzcg[data-surface='positive'] {
    color: rgb(var(--outline-positive));
    background-image: linear-gradient(
        var(--color-link-positive-border),
        var(--color-link-positive-border)
    );
}
@media (hover: hover) {
        a.a--fWzcg[data-surface='positive']:hover, span.a--fWzcg[data-surface='positive']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--outline-positive));
            background-image: linear-gradient(
                var(--color-link-positive-border-hover),
                var(--color-link-positive-border-hover)
            );
        }
    }
a.a--fWzcg[data-surface='negative'], span.a--fWzcg[data-surface='negative'] {
    color: rgb(var(--outline-negative));
    background-image: linear-gradient(
        var(--color-link-negative-border),
        var(--color-link-negative-border)
    );
}
@media (hover: hover) {
        a.a--fWzcg[data-surface='negative']:hover, span.a--fWzcg[data-surface='negative']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--outline-negative));
            background-image: linear-gradient(
                var(--color-link-negative-border-hover),
                var(--color-link-negative-border-hover)
            );
        }
    }
a.a--fWzcg[data-surface='warning'], span.a--fWzcg[data-surface='warning'] {
    color: rgb(var(--outline-warning));
    background-image: linear-gradient(
        var(--color-link-warning-border),
        var(--color-link-warning-border)
    );
}
@media (hover: hover) {
        a.a--fWzcg[data-surface='warning']:hover, span.a--fWzcg[data-surface='warning']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--outline-warning));
            background-image: linear-gradient(
                var(--color-link-warning-border-hover),
                var(--color-link-warning-border-hover)
            );
        }
    }
a.a--fWzcg[data-surface='placeholder'], span.a--fWzcg[data-surface='placeholder'] {
    color: rgb(var(--outline-placeholder));
    background-image: linear-gradient(
        var(--color-link-placeholder-border),
        var(--color-link-placeholder-border)
    );
}
@media (hover: hover) {
        a.a--fWzcg[data-surface='placeholder']:hover, span.a--fWzcg[data-surface='placeholder']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--outline-placeholder));
            background-image: linear-gradient(
                var(--color-link-placeholder-border-hover),
                var(--color-link-placeholder-border-hover)
            );
        }
    }
a.a--fWzcg[data-surface='dim'], span.a--fWzcg[data-surface='dim'] {
    color: rgb(var(--outline-#000));
    color: rgb(var(--outline-initial));
    background-image: linear-gradient(
        var(--color-link-dim-border),
        var(--color-link-dim-border)
    );
}
@media (hover: hover) {
        a.a--fWzcg[data-surface='dim']:hover, span.a--fWzcg[data-surface='dim']:hover {
            /* Дублируем цвет для старого фронта */
            color: rgb(var(--outline-#000));
            color: rgb(var(--outline-initial));
            background-image: linear-gradient(
                var(--color-link-dim-border-hover),
                var(--color-link-dim-border-hover)
            );
        }
    }
a.a--fWzcg[data-inverse='true'], span.a--fWzcg[data-inverse='true'] {
    color: rgba(var(--outline-inversed));
}
@media (hover: hover) {
        a.a--fWzcg[data-inverse='true']:hover, span.a--fWzcg[data-inverse='true']:hover {
            background-image: linear-gradient(
                rgba(var(--outline-inversed), var(--opacity-link-border-hover)),
                rgba(var(--outline-inversed), var(--opacity-link-border-hover))
            );
        }
    }
a.a--fWzcg[data-secondary='true'][data-inverse='true'], span.a--fWzcg[data-secondary='true'][data-inverse='true'] {
    color: rgba(var(--outline-inversed));
    background-image: linear-gradient(
        rgba(var(--outline-inversed), var(--opacity-link-border)),
        rgba(var(--outline-inversed), var(--opacity-link-border))
    );
}
@media (hover: hover) {
        a.a--fWzcg[data-secondary='true'][data-inverse='true']:hover, span.a--fWzcg[data-secondary='true'][data-inverse='true']:hover {
            background-image: linear-gradient(
                rgba(var(--outline-inversed), var(--opacity-link-border-hover)),
                rgba(var(--outline-inversed), var(--opacity-link-border-hover))
            );
        }
    }

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

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

    --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: 188, 90, 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-accent-positive: 132, 255, 143;
    --surface-on-accent-negative: 255, 140, 140;

    /* В темной теме серый текст (--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-surface-secondary-hover: 209, 209, 209;
    --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: 188, 90, 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: 255, 255, 255;
    --color-neutral-primary-on-inverted: 0, 0, 0;

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

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

    /* Переменные 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-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 {
    /* TODO: Данные значения должны проставляться на уровне приложений, поэтому впоследствии будет выпилено, а меинтейнерам приложений передана данная информация */
    background-color: rgb(var(--background-primary));
    color: rgb(var(--surface-on-primary));

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

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

    --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-accent-positive: 2, 131, 35;
    --surface-on-accent-negative: 235, 16, 0;

    /* В темной теме серый текст (--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-surface-secondary-hover: 91, 95, 101;
    --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: 0, 0, 0;
    --color-neutral-primary-on-inverted: 255, 255, 255;

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

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

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

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

    --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;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-light-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-hover: 242, 242, 242;

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

    --opacity-surface-disabled: 0.02;
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));

    --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-accent: 26, 26, 26;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 0, 0, 0;
    --outline-secondary: 0, 0, 0;
    --outline-hover: 77, 77, 77;
    --outline-placeholder: 128, 128, 128;
    --outline-initial: 166, 166, 166;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(0, 0, 0, var(--opacity-outline-disabled));

    --outline-faint: 204, 204, 204;
    --outline-faint-hover: 179, 179, 179;
    --outline-slight: 229, 229, 229;
    --outline-slight-hover: 209, 209, 209;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        0,
        0,
        0,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 138, 138, 229;
    --outline-interactive: 20, 20, 204;
    --outline-interactive-hover: 1, 1, 160;
    --outline-positive: 0, 132, 34;
    --outline-positive-hover: 30, 109, 50;

    --opacity-outline-positive-disabled: 0.1;
    --outline-positive-disabled: rgba(
        2,
        131,
        35,
        var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 182, 87, 0;
    --outline-warning-hover: 128, 53, 0;

    --opacity-outline-warning-disabled: 0.1;
    --outline-warning-disabled: rgba(
        209,
        70,
        0,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 219, 33, 19;
    --outline-negative-hover: 153, 25, 15;

    --opacity-outline-negative-disabled: 0.1;
    --outline-negative-disabled: rgba(
        219,
        33,
        19,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 255, 255, 255;
    --outline-positive-accent: 109, 208, 120;
    --outline-negative-accent: 208, 116, 118;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(0, 0, 0, var(--opacity-fill-disabled));

    --fill-hover: 77, 77, 77;
    --fill-highlight: 255, 238, 164;
    --fill-primary: 51, 51, 51;
    --fill-primary-hover: 3, 3, 3;
    --fill-secondary: 234, 234, 234;
    --fill-secondary-hover: 219, 219, 219;
    --fill-interactive: 46, 46, 229;
    --fill-interactive-hover: 0, 0, 178;
    --fill-additional: 0, 206, 51;
    --fill-additional-hover: 43, 217, 87;
    --fill-positive: 53, 128, 84;
    --fill-positive-hover: 20, 102, 48;
    --fill-warning: 175, 95, 55;
    --fill-warning-hover: 153, 71, 31;
    --fill-negative: 212, 59, 45;
    --fill-negative-hover: 189, 30, 19;

    /* 
      Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens
    */
    --opacity-link-border: 0.3;
    --opacity-link-border-hover: 0.7;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-dark-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 32, 35, 42;
    --surface-secondary: 32, 35, 42;
    --surface-hover: 42, 44, 51;

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

    --opacity-surface-disabled: 0.03;
    --surface-disabled: rgba(255, 255, 255, var(--opacity-surface-disabled));

    --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-accent: 225, 228, 242;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 255, 255, 255;
    --outline-secondary: 208, 208, 210;
    --outline-hover: 231, 232, 232;
    --outline-placeholder: 136, 138, 141;
    --outline-initial: 113, 114, 119;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(255, 255, 255, var(--opacity-outline-disabled));

    --outline-faint: 89, 91, 96;
    --outline-faint-hover: 136, 138, 141;
    --outline-slight: 62, 65, 70;
    --outline-slight-hover: 91, 95, 101;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        255,
        255,
        255,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 130, 139, 187;
    --outline-interactive: 147, 162, 255;
    --outline-interactive-hover: 129, 129, 246;
    --outline-positive: 109, 208, 120;
    --outline-positive-hover: 166, 255, 176;

    --opacity-outline-positive-disabled: 0.15;
    --outline-positive-disabled: rgba(
        132,
        255,
        143 var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 204, 158, 112;
    --outline-warning-hover: 255, 217, 178;

    --opacity-outline-warning-disabled: 0.15;
    --outline-warning-disabled: rgba(
        204,
        158,
        112,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 218, 133, 134;
    --outline-negative-hover: 255, 166, 168;

    --opacity-outline-negative-disabled: 0.15;
    --outline-negative-disabled: rgba(
        218,
        133,
        134,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 0, 0, 0;
    --outline-positive-accent: 49, 155, 76;
    --outline-negative-accent: 239, 61, 48;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(255, 255, 255, var(--opacity-fill-disabled));

    --fill-hover: 208, 208, 210;
    --fill-highlight: 208, 208, 210;
    --fill-primary: 245, 245, 249;
    --fill-primary-hover: 255, 255, 255;
    --fill-secondary: 54, 57, 63;
    --fill-secondary-hover: 65, 68, 73;
    --fill-interactive: 102, 116, 204;
    --fill-interactive-hover: 122, 134, 204;
    --fill-additional: 132, 255, 143;
    --fill-additional-hover: 173, 255, 181;
    --fill-positive: 40, 133, 78;
    --fill-positive-hover: 99, 153, 121;
    --fill-warning: 204, 123, 82;
    --fill-warning-hover: 178, 131, 107;
    --fill-negative: 178, 65, 65;
    --fill-negative-hover: 204, 82, 82;

    /* Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens */
    --opacity-link-border: 0.5;
    --opacity-link-border-hover: 0.7;
}
@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://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 {
    --modal-index: 2001;
}
/*
    Переменные ссылок нельзя вешать на :root, потому что они зависят
    от цветов темы. Вешаем их на контейнер темы
*/
.tj-light-theme, .tj-dark-theme {
    --color-link-border: rgba(
        var(--outline-interactive),
        var(--opacity-link-border)
    );
    --color-link-border-hover: rgba(
        var(--outline-interactive),
        var(--opacity-link-border-hover)
    );

    --color-link-positive-border: rgba(
        var(--outline-positive),
        var(--opacity-link-border)
    );
    --color-link-positive-border-hover: rgba(
        var(--outline-positive),
        var(--opacity-link-border-hover)
    );

    --color-link-negative-border: rgba(
        var(--outline-negative),
        var(--opacity-link-border)
    );
    --color-link-negative-border-hover: rgba(
        var(--outline-negative),
        var(--opacity-link-border-hover)
    );

    --color-link-warning-border: rgba(
        var(--outline-warning),
        var(--opacity-link-border)
    );
    --color-link-warning-border-hover: rgba(
        var(--outline-warning),
        var(--opacity-link-border-hover)
    );

    --color-link-placeholder-border: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border)
    );
    --color-link-placeholder-border-hover: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border-hover)
    );

    --color-link-dim-border: rgba(
        var(--outline-initial),
        var(--opacity-link-border)
    );
    --color-link-dim-border-hover: rgba(
        var(--outline-initial),
        var(--opacity-link-border-hover)
    );
}
: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-secondary-bold-mobile: bold 15px/20px Graphik;
    --body-secondary-bold-desktop: bold 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-static: 32px/35px 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;

    --accent-impact: 23px/25px Graphik;
}
.heading-one--d0JKr, .h1--ny82z, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--d0JKr, .h1--ny82z, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--MePSW, .h2--JI5v2, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--MePSW, .h2--JI5v2, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--EHDuu, .h3--rO4kn, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--V7pPn, .h4--nzYU8 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--V7pPn, .h4--nzYU8 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--Xz6Mt, .h5--NQOoi, h5, .button--oyNvs {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--QOiD1, .h6--O_By3 {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--QOiD1, .h6--O_By3 {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--gtLO0 {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--gtLO0 {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--gtLO0 b, .body-primary--gtLO0 strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--gtLO0 b, .body-primary--gtLO0 strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--m_hdQ {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--m_hdQ {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--m_hdQ b, .body-secondary--m_hdQ strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--m_hdQ b, .body-secondary--m_hdQ strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--I7j6J, .dynamicContent--kBJLM a, .dynamicContent--kBJLM p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--I7j6J b, .body-large--I7j6J strong, .body-large-bold--VrPUA, .dynamicContent--kBJLM a b, .dynamicContent--kBJLM a strong, .dynamicContent--kBJLM p b, .dynamicContent--kBJLM p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--Pa6L5 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--Pa6L5 b, .body-medium--Pa6L5 strong, .body-medium-bold--TRGFb {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--WgQ_9 {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--WgQ_9 b, .body-small--WgQ_9 strong, .body-small-bold--Enfaw {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
body {
    background: rgb(var(--background-primary));
    font: 17px/25px Graphik;
    font: var(--body-secondary-desktop);
    color: rgb(var(--outline-secondary));
    margin: 0;
    padding: 0;
    min-width: 360px;

    --themis-rating-color: #ff8a00;
}
h1, h2, h3, h5 {
    margin-top: 0;
    margin-bottom: 0;
    margin: 0;
}
h1 {
    color: rgb(var(--outline-primary));
}
h2 {
    color: rgb(var(--outline-secondary));
}
h3 {
    color: rgb(var(--outline-secondary));
}
h5 {
    color: rgb(var(--outline-secondary));
}
/* всё элементы под классом dynamicContent это поле редактора из админке */
/* нужно переписать стили из-за того что в этой поле может быть что угодно */
.dynamicContent--kBJLM h3 {
    margin-bottom: 10px;
}
.dynamicContent--kBJLM h2 {
    margin-bottom: 25px;
}
.dynamicContent--kBJLM a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--kBJLM a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--kBJLM ol, .dynamicContent--kBJLM ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--kBJLM ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--kBJLM p {
    margin: 0 0 20px 0;
}
.dynamicContent--kBJLM p:last-child {
    margin-bottom: 0;
}
.dynamicContent--kBJLM ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--kBJLM ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--kBJLM ul li {
    margin-bottom: 10px;
}
.dynamicContent--kBJLM ol li {
    margin-bottom: 5px;
}
.dynamicContent--kBJLM ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--kBJLM ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--kBJLM a:hover {
        background-image: linear-gradient(rgb(var(--outline-interactive)), rgb(var(--outline-interactive)));
        background-repeat: repeat-x;
        background-size: 100% 1px;
        background-position: 0 100%;
    }
}
header {
    height: 105px;
    position: relative;
    padding: 16px 20px 16px 20px;
    box-sizing: border-box;
    display: block;
}
@media (min-width: 760px) {
header {
        display: flex;
        align-items: center;
        height: 80px;
        padding: 0 30px;
}
    }
.withoutBorder--_YB1a {
    border-bottom: 0;
}
@media (min-width: 760px) {
.withoutBorder--_YB1a {
        border-bottom: 1px solid rgb(var(--outline-slight));
}
    }
.link--OCM4k {
    display: inline-block;
    outline: 0;
    text-decoration: none;
    height: 19.25px;
}
@media (min-width: 760px) {
.link--OCM4k {
        height: 21px;
}
    }
.link--OCM4k svg {
    width: 110px;
    height: 19.25px;
}
@media (min-width: 760px) {
.link--OCM4k svg {
        width: 120px;
        height: 21px;
}
    }
.icon--UvCx5 {
    align-items: center;
    background: #000000;
    display: flex;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-top: -12.5px;
    left: 5px;
    padding: 4px 5px 4px 7px;
    box-sizing: border-box;
}
@media (min-width: 760px) {
.icon--UvCx5 {
        height: 30px;
        padding: 5px 7px 5px 9px;
        width: 30px;
        margin-top: -15px;
}
    }
.buttonContainer--uWOLQ {
    display: flex;
    align-items: center;
    margin-top: 11px;
}
@media (min-width: 760px) {
.buttonContainer--uWOLQ {
        margin-left: 20px;
        margin-top: 0;
}
    }
.button--oyNvs {
    background: rgb(var(--fill-primary));
    color: rgb(var(--outline-inversed));
    border-radius: 50px;
    min-width: 164px;
    display: flex;
    align-items: center;
    text-align: center;
    text-decoration: none;
    outline: none;
    padding: 0 15px;
    box-sizing: border-box;
    margin-left: 5px;
    height: 35px;
    position: relative;
}
@media (min-width: 760px) {
.button--oyNvs {
        padding: 0 20px;
        margin-left: 10px;
        height: 40px;
        min-width: 174px;
}
    }
.main--iV5KI {
    background: rgb(var(--fill-secondary));
    color: rgb(var(--outline-primary));
    width: 156px;
    min-width: auto;
    padding: 0;
    position: relative;
    margin-left: 0;
}
@media (min-width: 760px) {
.main--iV5KI {
        width: 166px;
        padding: 0;
}
    }
.main--iV5KI span {
    position: absolute;
    left: 39px;
}
@media (min-width: 760px) {
.main--iV5KI span {
        left: 44px;
}
    }
.main--iV5KI span::after {
    top: 0.5px;
    content: '';
    background: url(https://static2.tinkoffjournal.ru/themis-facade/4427459da249edd9f3849ee72734b9a8d5a78e29/5b989ca6b721453826ee.svg);
    width: 7px;
    height: 12px;
    position: absolute;
    right: -9px;
}
@media (min-width: 760px) {
.main--iV5KI span::after {
        top: 1px;
}
    }
.icon--UvCx5 svg {
    height: 100%;
    width: 100%;
}
@media (hover: hover) {
    .button--oyNvs:hover {
        background: rgb(var(--fill-primary-hover));
    }

    .main--iV5KI:hover {
        background: rgb(var(--fill-secondary-hover));
    }
}

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

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

    --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: 188, 90, 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-accent-positive: 132, 255, 143;
    --surface-on-accent-negative: 255, 140, 140;

    /* В темной теме серый текст (--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-surface-secondary-hover: 209, 209, 209;
    --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: 188, 90, 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: 255, 255, 255;
    --color-neutral-primary-on-inverted: 0, 0, 0;

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

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

    /* Переменные 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-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 {
    /* TODO: Данные значения должны проставляться на уровне приложений, поэтому впоследствии будет выпилено, а меинтейнерам приложений передана данная информация */
    background-color: rgb(var(--background-primary));
    color: rgb(var(--surface-on-primary));

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

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

    --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-accent-positive: 2, 131, 35;
    --surface-on-accent-negative: 235, 16, 0;

    /* В темной теме серый текст (--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-surface-secondary-hover: 91, 95, 101;
    --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: 0, 0, 0;
    --color-neutral-primary-on-inverted: 255, 255, 255;

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

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

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

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

    --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;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-light-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-hover: 242, 242, 242;

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

    --opacity-surface-disabled: 0.02;
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));

    --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-accent: 26, 26, 26;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 0, 0, 0;
    --outline-secondary: 0, 0, 0;
    --outline-hover: 77, 77, 77;
    --outline-placeholder: 128, 128, 128;
    --outline-initial: 166, 166, 166;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(0, 0, 0, var(--opacity-outline-disabled));

    --outline-faint: 204, 204, 204;
    --outline-faint-hover: 179, 179, 179;
    --outline-slight: 229, 229, 229;
    --outline-slight-hover: 209, 209, 209;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        0,
        0,
        0,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 138, 138, 229;
    --outline-interactive: 20, 20, 204;
    --outline-interactive-hover: 1, 1, 160;
    --outline-positive: 0, 132, 34;
    --outline-positive-hover: 30, 109, 50;

    --opacity-outline-positive-disabled: 0.1;
    --outline-positive-disabled: rgba(
        2,
        131,
        35,
        var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 182, 87, 0;
    --outline-warning-hover: 128, 53, 0;

    --opacity-outline-warning-disabled: 0.1;
    --outline-warning-disabled: rgba(
        209,
        70,
        0,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 219, 33, 19;
    --outline-negative-hover: 153, 25, 15;

    --opacity-outline-negative-disabled: 0.1;
    --outline-negative-disabled: rgba(
        219,
        33,
        19,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 255, 255, 255;
    --outline-positive-accent: 109, 208, 120;
    --outline-negative-accent: 208, 116, 118;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(0, 0, 0, var(--opacity-fill-disabled));

    --fill-hover: 77, 77, 77;
    --fill-highlight: 255, 238, 164;
    --fill-primary: 51, 51, 51;
    --fill-primary-hover: 3, 3, 3;
    --fill-secondary: 234, 234, 234;
    --fill-secondary-hover: 219, 219, 219;
    --fill-interactive: 46, 46, 229;
    --fill-interactive-hover: 0, 0, 178;
    --fill-additional: 0, 206, 51;
    --fill-additional-hover: 43, 217, 87;
    --fill-positive: 53, 128, 84;
    --fill-positive-hover: 20, 102, 48;
    --fill-warning: 175, 95, 55;
    --fill-warning-hover: 153, 71, 31;
    --fill-negative: 212, 59, 45;
    --fill-negative-hover: 189, 30, 19;

    /* 
      Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens
    */
    --opacity-link-border: 0.3;
    --opacity-link-border-hover: 0.7;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-dark-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 32, 35, 42;
    --surface-secondary: 32, 35, 42;
    --surface-hover: 42, 44, 51;

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

    --opacity-surface-disabled: 0.03;
    --surface-disabled: rgba(255, 255, 255, var(--opacity-surface-disabled));

    --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-accent: 225, 228, 242;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 255, 255, 255;
    --outline-secondary: 208, 208, 210;
    --outline-hover: 231, 232, 232;
    --outline-placeholder: 136, 138, 141;
    --outline-initial: 113, 114, 119;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(255, 255, 255, var(--opacity-outline-disabled));

    --outline-faint: 89, 91, 96;
    --outline-faint-hover: 136, 138, 141;
    --outline-slight: 62, 65, 70;
    --outline-slight-hover: 91, 95, 101;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        255,
        255,
        255,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 130, 139, 187;
    --outline-interactive: 147, 162, 255;
    --outline-interactive-hover: 129, 129, 246;
    --outline-positive: 109, 208, 120;
    --outline-positive-hover: 166, 255, 176;

    --opacity-outline-positive-disabled: 0.15;
    --outline-positive-disabled: rgba(
        132,
        255,
        143 var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 204, 158, 112;
    --outline-warning-hover: 255, 217, 178;

    --opacity-outline-warning-disabled: 0.15;
    --outline-warning-disabled: rgba(
        204,
        158,
        112,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 218, 133, 134;
    --outline-negative-hover: 255, 166, 168;

    --opacity-outline-negative-disabled: 0.15;
    --outline-negative-disabled: rgba(
        218,
        133,
        134,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 0, 0, 0;
    --outline-positive-accent: 49, 155, 76;
    --outline-negative-accent: 239, 61, 48;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(255, 255, 255, var(--opacity-fill-disabled));

    --fill-hover: 208, 208, 210;
    --fill-highlight: 208, 208, 210;
    --fill-primary: 245, 245, 249;
    --fill-primary-hover: 255, 255, 255;
    --fill-secondary: 54, 57, 63;
    --fill-secondary-hover: 65, 68, 73;
    --fill-interactive: 102, 116, 204;
    --fill-interactive-hover: 122, 134, 204;
    --fill-additional: 132, 255, 143;
    --fill-additional-hover: 173, 255, 181;
    --fill-positive: 40, 133, 78;
    --fill-positive-hover: 99, 153, 121;
    --fill-warning: 204, 123, 82;
    --fill-warning-hover: 178, 131, 107;
    --fill-negative: 178, 65, 65;
    --fill-negative-hover: 204, 82, 82;

    /* Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens */
    --opacity-link-border: 0.5;
    --opacity-link-border-hover: 0.7;
}
@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://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 {
    --modal-index: 2001;
}
/*
    Переменные ссылок нельзя вешать на :root, потому что они зависят
    от цветов темы. Вешаем их на контейнер темы
*/
.tj-light-theme, .tj-dark-theme {
    --color-link-border: rgba(
        var(--outline-interactive),
        var(--opacity-link-border)
    );
    --color-link-border-hover: rgba(
        var(--outline-interactive),
        var(--opacity-link-border-hover)
    );

    --color-link-positive-border: rgba(
        var(--outline-positive),
        var(--opacity-link-border)
    );
    --color-link-positive-border-hover: rgba(
        var(--outline-positive),
        var(--opacity-link-border-hover)
    );

    --color-link-negative-border: rgba(
        var(--outline-negative),
        var(--opacity-link-border)
    );
    --color-link-negative-border-hover: rgba(
        var(--outline-negative),
        var(--opacity-link-border-hover)
    );

    --color-link-warning-border: rgba(
        var(--outline-warning),
        var(--opacity-link-border)
    );
    --color-link-warning-border-hover: rgba(
        var(--outline-warning),
        var(--opacity-link-border-hover)
    );

    --color-link-placeholder-border: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border)
    );
    --color-link-placeholder-border-hover: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border-hover)
    );

    --color-link-dim-border: rgba(
        var(--outline-initial),
        var(--opacity-link-border)
    );
    --color-link-dim-border-hover: rgba(
        var(--outline-initial),
        var(--opacity-link-border-hover)
    );
}
: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-secondary-bold-mobile: bold 15px/20px Graphik;
    --body-secondary-bold-desktop: bold 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-static: 32px/35px 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;

    --accent-impact: 23px/25px Graphik;
}
.heading-one--r0i6a, .h1--v7XSW, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--r0i6a, .h1--v7XSW, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--axTp2, .h2--c6cd7, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--axTp2, .h2--c6cd7, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--aDglS, .h3--Cbg0h, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--pDJmw, .h4--P5o1Z {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--pDJmw, .h4--P5o1Z {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--Iyi6k, .h5--_V3wF, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--JKKku, .h6--GOYo1 {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--JKKku, .h6--GOYo1 {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--LM79K {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--LM79K {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--LM79K b, .body-primary--LM79K strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--LM79K b, .body-primary--LM79K strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--LeGA7 {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--LeGA7 {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--LeGA7 b, .body-secondary--LeGA7 strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--LeGA7 b, .body-secondary--LeGA7 strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--U2FE7, .dynamicContent--UYuQy a, .dynamicContent--UYuQy p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--U2FE7 b, .body-large--U2FE7 strong, .body-large-bold--fI_nD, .dynamicContent--UYuQy a b, .dynamicContent--UYuQy a strong, .dynamicContent--UYuQy p b, .dynamicContent--UYuQy p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--oRp_0 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--oRp_0 b, .body-medium--oRp_0 strong, .body-medium-bold--mhtFV {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--Ojua2 {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--Ojua2 b, .body-small--Ojua2 strong, .body-small-bold--xwkhK {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
body {
    background: rgb(var(--background-primary));
    font: 17px/25px Graphik;
    font: var(--body-secondary-desktop);
    color: rgb(var(--outline-secondary));
    margin: 0;
    padding: 0;
    min-width: 360px;

    --themis-rating-color: #ff8a00;
}
h1, h2, h3, h5 {
    margin-top: 0;
    margin-bottom: 0;
    margin: 0;
}
h1 {
    color: rgb(var(--outline-primary));
}
h2 {
    color: rgb(var(--outline-secondary));
}
h3 {
    color: rgb(var(--outline-secondary));
}
h5 {
    color: rgb(var(--outline-secondary));
}
/* всё элементы под классом dynamicContent это поле редактора из админке */
/* нужно переписать стили из-за того что в этой поле может быть что угодно */
.dynamicContent--UYuQy h3 {
    margin-bottom: 10px;
}
.dynamicContent--UYuQy h2 {
    margin-bottom: 25px;
}
.dynamicContent--UYuQy a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--UYuQy a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--UYuQy ol, .dynamicContent--UYuQy ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--UYuQy ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--UYuQy p {
    margin: 0 0 20px 0;
}
.dynamicContent--UYuQy p:last-child {
    margin-bottom: 0;
}
.dynamicContent--UYuQy ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--UYuQy ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--UYuQy ul li {
    margin-bottom: 10px;
}
.dynamicContent--UYuQy ol li {
    margin-bottom: 5px;
}
.dynamicContent--UYuQy ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--UYuQy ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--UYuQy a:hover {
        background-image: linear-gradient(rgb(var(--outline-interactive)), rgb(var(--outline-interactive)));
        background-repeat: repeat-x;
        background-size: 100% 1px;
        background-position: 0 100%;
    }
}
.root--XTV8k {
    max-width: 760px;
    width: 100%;
    margin: auto auto 79px auto;
    padding: 0 20px;
    box-sizing: border-box;
}
@media (min-width: 760px) {
.root--XTV8k {
        padding: 0;
        margin: auto auto 97px auto;
}
    }
.note--RVSLJ {
    background: rgb(var(--fill-secondary));
    color: rgb(var(--outline-secondary));
    font: 15px/20px Graphik;
    font: var(--body-medium);
    margin-bottom: 25px;
    padding: 10px 20px;
}
@media (min-width: 760px) {
.note--RVSLJ {
        padding: 0;
        margin-bottom: 30px;
        height: 55px;
        font: 17px/25px Graphik;
        font: var(--body-large);
        display: flex;
        align-items: center;
        justify-content: center;
}
    }
.text--a1Lth {
    max-width: 760px;
    text-align: left;
    width: 100%;
}
.link--K3jmA {
    margin-left: 5px;
    display: inline-block;
}

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

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

    --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: 188, 90, 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-accent-positive: 132, 255, 143;
    --surface-on-accent-negative: 255, 140, 140;

    /* В темной теме серый текст (--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-surface-secondary-hover: 209, 209, 209;
    --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: 188, 90, 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: 255, 255, 255;
    --color-neutral-primary-on-inverted: 0, 0, 0;

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

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

    /* Переменные 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-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 {
    /* TODO: Данные значения должны проставляться на уровне приложений, поэтому впоследствии будет выпилено, а меинтейнерам приложений передана данная информация */
    background-color: rgb(var(--background-primary));
    color: rgb(var(--surface-on-primary));

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

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

    --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-accent-positive: 2, 131, 35;
    --surface-on-accent-negative: 235, 16, 0;

    /* В темной теме серый текст (--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-surface-secondary-hover: 91, 95, 101;
    --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: 0, 0, 0;
    --color-neutral-primary-on-inverted: 255, 255, 255;

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

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

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

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

    --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;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-light-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-hover: 242, 242, 242;

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

    --opacity-surface-disabled: 0.02;
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));

    --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-accent: 26, 26, 26;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 0, 0, 0;
    --outline-secondary: 0, 0, 0;
    --outline-hover: 77, 77, 77;
    --outline-placeholder: 128, 128, 128;
    --outline-initial: 166, 166, 166;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(0, 0, 0, var(--opacity-outline-disabled));

    --outline-faint: 204, 204, 204;
    --outline-faint-hover: 179, 179, 179;
    --outline-slight: 229, 229, 229;
    --outline-slight-hover: 209, 209, 209;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        0,
        0,
        0,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 138, 138, 229;
    --outline-interactive: 20, 20, 204;
    --outline-interactive-hover: 1, 1, 160;
    --outline-positive: 0, 132, 34;
    --outline-positive-hover: 30, 109, 50;

    --opacity-outline-positive-disabled: 0.1;
    --outline-positive-disabled: rgba(
        2,
        131,
        35,
        var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 182, 87, 0;
    --outline-warning-hover: 128, 53, 0;

    --opacity-outline-warning-disabled: 0.1;
    --outline-warning-disabled: rgba(
        209,
        70,
        0,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 219, 33, 19;
    --outline-negative-hover: 153, 25, 15;

    --opacity-outline-negative-disabled: 0.1;
    --outline-negative-disabled: rgba(
        219,
        33,
        19,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 255, 255, 255;
    --outline-positive-accent: 109, 208, 120;
    --outline-negative-accent: 208, 116, 118;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(0, 0, 0, var(--opacity-fill-disabled));

    --fill-hover: 77, 77, 77;
    --fill-highlight: 255, 238, 164;
    --fill-primary: 51, 51, 51;
    --fill-primary-hover: 3, 3, 3;
    --fill-secondary: 234, 234, 234;
    --fill-secondary-hover: 219, 219, 219;
    --fill-interactive: 46, 46, 229;
    --fill-interactive-hover: 0, 0, 178;
    --fill-additional: 0, 206, 51;
    --fill-additional-hover: 43, 217, 87;
    --fill-positive: 53, 128, 84;
    --fill-positive-hover: 20, 102, 48;
    --fill-warning: 175, 95, 55;
    --fill-warning-hover: 153, 71, 31;
    --fill-negative: 212, 59, 45;
    --fill-negative-hover: 189, 30, 19;

    /* 
      Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens
    */
    --opacity-link-border: 0.3;
    --opacity-link-border-hover: 0.7;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-dark-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 32, 35, 42;
    --surface-secondary: 32, 35, 42;
    --surface-hover: 42, 44, 51;

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

    --opacity-surface-disabled: 0.03;
    --surface-disabled: rgba(255, 255, 255, var(--opacity-surface-disabled));

    --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-accent: 225, 228, 242;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 255, 255, 255;
    --outline-secondary: 208, 208, 210;
    --outline-hover: 231, 232, 232;
    --outline-placeholder: 136, 138, 141;
    --outline-initial: 113, 114, 119;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(255, 255, 255, var(--opacity-outline-disabled));

    --outline-faint: 89, 91, 96;
    --outline-faint-hover: 136, 138, 141;
    --outline-slight: 62, 65, 70;
    --outline-slight-hover: 91, 95, 101;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        255,
        255,
        255,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 130, 139, 187;
    --outline-interactive: 147, 162, 255;
    --outline-interactive-hover: 129, 129, 246;
    --outline-positive: 109, 208, 120;
    --outline-positive-hover: 166, 255, 176;

    --opacity-outline-positive-disabled: 0.15;
    --outline-positive-disabled: rgba(
        132,
        255,
        143 var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 204, 158, 112;
    --outline-warning-hover: 255, 217, 178;

    --opacity-outline-warning-disabled: 0.15;
    --outline-warning-disabled: rgba(
        204,
        158,
        112,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 218, 133, 134;
    --outline-negative-hover: 255, 166, 168;

    --opacity-outline-negative-disabled: 0.15;
    --outline-negative-disabled: rgba(
        218,
        133,
        134,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 0, 0, 0;
    --outline-positive-accent: 49, 155, 76;
    --outline-negative-accent: 239, 61, 48;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(255, 255, 255, var(--opacity-fill-disabled));

    --fill-hover: 208, 208, 210;
    --fill-highlight: 208, 208, 210;
    --fill-primary: 245, 245, 249;
    --fill-primary-hover: 255, 255, 255;
    --fill-secondary: 54, 57, 63;
    --fill-secondary-hover: 65, 68, 73;
    --fill-interactive: 102, 116, 204;
    --fill-interactive-hover: 122, 134, 204;
    --fill-additional: 132, 255, 143;
    --fill-additional-hover: 173, 255, 181;
    --fill-positive: 40, 133, 78;
    --fill-positive-hover: 99, 153, 121;
    --fill-warning: 204, 123, 82;
    --fill-warning-hover: 178, 131, 107;
    --fill-negative: 178, 65, 65;
    --fill-negative-hover: 204, 82, 82;

    /* Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens */
    --opacity-link-border: 0.5;
    --opacity-link-border-hover: 0.7;
}
@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://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 {
    --modal-index: 2001;
}
/*
    Переменные ссылок нельзя вешать на :root, потому что они зависят
    от цветов темы. Вешаем их на контейнер темы
*/
.tj-light-theme, .tj-dark-theme {
    --color-link-border: rgba(
        var(--outline-interactive),
        var(--opacity-link-border)
    );
    --color-link-border-hover: rgba(
        var(--outline-interactive),
        var(--opacity-link-border-hover)
    );

    --color-link-positive-border: rgba(
        var(--outline-positive),
        var(--opacity-link-border)
    );
    --color-link-positive-border-hover: rgba(
        var(--outline-positive),
        var(--opacity-link-border-hover)
    );

    --color-link-negative-border: rgba(
        var(--outline-negative),
        var(--opacity-link-border)
    );
    --color-link-negative-border-hover: rgba(
        var(--outline-negative),
        var(--opacity-link-border-hover)
    );

    --color-link-warning-border: rgba(
        var(--outline-warning),
        var(--opacity-link-border)
    );
    --color-link-warning-border-hover: rgba(
        var(--outline-warning),
        var(--opacity-link-border-hover)
    );

    --color-link-placeholder-border: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border)
    );
    --color-link-placeholder-border-hover: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border-hover)
    );

    --color-link-dim-border: rgba(
        var(--outline-initial),
        var(--opacity-link-border)
    );
    --color-link-dim-border-hover: rgba(
        var(--outline-initial),
        var(--opacity-link-border-hover)
    );
}
: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-secondary-bold-mobile: bold 15px/20px Graphik;
    --body-secondary-bold-desktop: bold 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-static: 32px/35px 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;

    --accent-impact: 23px/25px Graphik;
}
.heading-one--EIK4I, .h1--wCy2z, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--EIK4I, .h1--wCy2z, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--luuV9, .h2--yMEmQ, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--luuV9, .h2--yMEmQ, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--Z40mU, .h3--vva2z, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--J0y6d, .h4--SVji4 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--J0y6d, .h4--SVji4 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--VXScC, .h5--bCIsw, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--RWqu7, .h6--o1oUS {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--RWqu7, .h6--o1oUS {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--fd7XB {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--fd7XB {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--fd7XB b, .body-primary--fd7XB strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--fd7XB b, .body-primary--fd7XB strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--K9kbe {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--K9kbe {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--K9kbe b, .body-secondary--K9kbe strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--K9kbe b, .body-secondary--K9kbe strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--T8IZ3, .dynamicContent--XuAex a, .dynamicContent--XuAex p, .root--SuSpR {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--T8IZ3 b, .body-large--T8IZ3 strong, .body-large-bold--KCU4P, .dynamicContent--XuAex a b, .dynamicContent--XuAex a strong, .dynamicContent--XuAex p b, .dynamicContent--XuAex p strong, .root--SuSpR b, .root--SuSpR strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--VtQkp {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--VtQkp b, .body-medium--VtQkp strong, .body-medium-bold--DJSOT {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--tRDGz {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--tRDGz b, .body-small--tRDGz strong, .body-small-bold--q36bh {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
body {
    background: rgb(var(--background-primary));
    font: 17px/25px Graphik;
    font: var(--body-secondary-desktop);
    color: rgb(var(--outline-secondary));
    margin: 0;
    padding: 0;
    min-width: 360px;

    --themis-rating-color: #ff8a00;
}
h1, h2, h3, h5 {
    margin-top: 0;
    margin-bottom: 0;
    margin: 0;
}
h1 {
    color: rgb(var(--outline-primary));
}
h2 {
    color: rgb(var(--outline-secondary));
}
h3 {
    color: rgb(var(--outline-secondary));
}
h5 {
    color: rgb(var(--outline-secondary));
}
/* всё элементы под классом dynamicContent это поле редактора из админке */
/* нужно переписать стили из-за того что в этой поле может быть что угодно */
.dynamicContent--XuAex h3 {
    margin-bottom: 10px;
}
.dynamicContent--XuAex h2 {
    margin-bottom: 25px;
}
.dynamicContent--XuAex a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--XuAex a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--XuAex ol, .dynamicContent--XuAex ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--XuAex ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--XuAex p {
    margin: 0 0 20px 0;
}
.dynamicContent--XuAex p:last-child {
    margin-bottom: 0;
}
.dynamicContent--XuAex ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--XuAex ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--XuAex ul li {
    margin-bottom: 10px;
}
.dynamicContent--XuAex ol li {
    margin-bottom: 5px;
}
.dynamicContent--XuAex ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--XuAex ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--XuAex a:hover {
        background-image: linear-gradient(rgb(var(--outline-interactive)), rgb(var(--outline-interactive)));
        background-repeat: repeat-x;
        background-size: 100% 1px;
        background-position: 0 100%;
    }
}
.root--SuSpR {
    color: rgb(var(--outline-placeholder));
    outline: none;
    text-decoration: none;
    position: relative;
    padding-left: 30px;
    margin-bottom: 25px;
    display: inline-block;
    box-sizing: border-box;
}
.root--SuSpR svg {
    width: 20px;
    height: 11px;
    margin-top: -5.5px;
    position: absolute;
    top: 50%;
    left: 0;
}
.root--SuSpR svg path {
    fill: rgb(var(--outline-initial));
}
@media (hover: hover) {
    .root--SuSpR:hover svg path {
        fill: rgb(var(--outline-hover));
    }

    .root--SuSpR:hover {
        color: rgb(var(--outline-hover));
    }
}

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

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

    --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: 188, 90, 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-accent-positive: 132, 255, 143;
    --surface-on-accent-negative: 255, 140, 140;

    /* В темной теме серый текст (--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-surface-secondary-hover: 209, 209, 209;
    --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: 188, 90, 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: 255, 255, 255;
    --color-neutral-primary-on-inverted: 0, 0, 0;

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

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

    /* Переменные 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-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 {
    /* TODO: Данные значения должны проставляться на уровне приложений, поэтому впоследствии будет выпилено, а меинтейнерам приложений передана данная информация */
    background-color: rgb(var(--background-primary));
    color: rgb(var(--surface-on-primary));

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

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

    --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-accent-positive: 2, 131, 35;
    --surface-on-accent-negative: 235, 16, 0;

    /* В темной теме серый текст (--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-surface-secondary-hover: 91, 95, 101;
    --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: 0, 0, 0;
    --color-neutral-primary-on-inverted: 255, 255, 255;

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

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

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

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

    --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;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-light-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 255, 255, 255;
    --surface-secondary: 247, 247, 247;
    --surface-hover: 242, 242, 242;

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

    --opacity-surface-disabled: 0.02;
    --surface-disabled: rgba(0, 0, 0, var(--opacity-surface-disabled));

    --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-accent: 26, 26, 26;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 0, 0, 0;
    --outline-secondary: 0, 0, 0;
    --outline-hover: 77, 77, 77;
    --outline-placeholder: 128, 128, 128;
    --outline-initial: 166, 166, 166;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(0, 0, 0, var(--opacity-outline-disabled));

    --outline-faint: 204, 204, 204;
    --outline-faint-hover: 179, 179, 179;
    --outline-slight: 229, 229, 229;
    --outline-slight-hover: 209, 209, 209;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        0,
        0,
        0,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 138, 138, 229;
    --outline-interactive: 20, 20, 204;
    --outline-interactive-hover: 1, 1, 160;
    --outline-positive: 0, 132, 34;
    --outline-positive-hover: 30, 109, 50;

    --opacity-outline-positive-disabled: 0.1;
    --outline-positive-disabled: rgba(
        2,
        131,
        35,
        var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 182, 87, 0;
    --outline-warning-hover: 128, 53, 0;

    --opacity-outline-warning-disabled: 0.1;
    --outline-warning-disabled: rgba(
        209,
        70,
        0,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 219, 33, 19;
    --outline-negative-hover: 153, 25, 15;

    --opacity-outline-negative-disabled: 0.1;
    --outline-negative-disabled: rgba(
        219,
        33,
        19,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 255, 255, 255;
    --outline-positive-accent: 109, 208, 120;
    --outline-negative-accent: 208, 116, 118;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(0, 0, 0, var(--opacity-fill-disabled));

    --fill-hover: 77, 77, 77;
    --fill-highlight: 255, 238, 164;
    --fill-primary: 51, 51, 51;
    --fill-primary-hover: 3, 3, 3;
    --fill-secondary: 234, 234, 234;
    --fill-secondary-hover: 219, 219, 219;
    --fill-interactive: 46, 46, 229;
    --fill-interactive-hover: 0, 0, 178;
    --fill-additional: 0, 206, 51;
    --fill-additional-hover: 43, 217, 87;
    --fill-positive: 53, 128, 84;
    --fill-positive-hover: 20, 102, 48;
    --fill-warning: 175, 95, 55;
    --fill-warning-hover: 153, 71, 31;
    --fill-negative: 212, 59, 45;
    --fill-negative-hover: 189, 30, 19;

    /* 
      Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens
    */
    --opacity-link-border: 0.3;
    --opacity-link-border-hover: 0.7;
}
/*
Ссылка на фигму: https://www.figma.com/file/M2qnsSmSyDqPccsiTqLZlw/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5-%D1%82%D0%BE%D0%BA%D0%B5%D0%BD%D1%8B?node-id=0-1&t=mSFTSWXFP1FScPer-0
*/
.tj-dark-theme {
    /* 
    Основной набор цветов задаётся триадами 
    для смешивания с токенами opacity 
    */

    /* Background токены */

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

    /* Surface токены */

    --surface-primary: 32, 35, 42;
    --surface-secondary: 32, 35, 42;
    --surface-hover: 42, 44, 51;

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

    --opacity-surface-disabled: 0.03;
    --surface-disabled: rgba(255, 255, 255, var(--opacity-surface-disabled));

    --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-accent: 225, 228, 242;

    --opacity-surface-top: 0.5;
    --surface-top: rgba(0, 0, 0, var(--opacity-surface-top));

    --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%
    );

    /* Outline токены */

    --outline-primary: 255, 255, 255;
    --outline-secondary: 208, 208, 210;
    --outline-hover: 231, 232, 232;
    --outline-placeholder: 136, 138, 141;
    --outline-initial: 113, 114, 119;

    --opacity-outline-disabled: 0.2;
    --outline-disabled: rgba(255, 255, 255, var(--opacity-outline-disabled));

    --outline-faint: 89, 91, 96;
    --outline-faint-hover: 136, 138, 141;
    --outline-slight: 62, 65, 70;
    --outline-slight-hover: 91, 95, 101;

    --opacity-outline-slight-disabled: 0.05;
    --outline-slight-disabled: rgba(
        255,
        255,
        255,
        var(--opacity-outline-slight-disabled)
    );

    --outline-focus: 130, 139, 187;
    --outline-interactive: 147, 162, 255;
    --outline-interactive-hover: 129, 129, 246;
    --outline-positive: 109, 208, 120;
    --outline-positive-hover: 166, 255, 176;

    --opacity-outline-positive-disabled: 0.15;
    --outline-positive-disabled: rgba(
        132,
        255,
        143 var(--opacity-outline-positive-disabled)
    );

    --outline-warning: 204, 158, 112;
    --outline-warning-hover: 255, 217, 178;

    --opacity-outline-warning-disabled: 0.15;
    --outline-warning-disabled: rgba(
        204,
        158,
        112,
        var(--opacity-outline-warning-disabled)
    );

    --outline-negative: 218, 133, 134;
    --outline-negative-hover: 255, 166, 168;

    --opacity-outline-negative-disabled: 0.15;
    --outline-negative-disabled: rgba(
        218,
        133,
        134,
        var(--opacity-outline-negative-disabled)
    );

    --outline-inversed: 0, 0, 0;
    --outline-positive-accent: 49, 155, 76;
    --outline-negative-accent: 239, 61, 48;
    --outline-dark-static: 0, 0, 0;
    --outline-light-static: 255, 255, 255;

    --outline-award: linear-gradient(
        137deg,
        rgb(254, 228, 135),
        rgb(216, 169, 62) 52%,
        rgb(208, 149, 44) 92%
    );

    /* Fill токены */

    --opacity-fill-disabled: 0.3;
    --fill-disabled: rgba(255, 255, 255, var(--opacity-fill-disabled));

    --fill-hover: 208, 208, 210;
    --fill-highlight: 208, 208, 210;
    --fill-primary: 245, 245, 249;
    --fill-primary-hover: 255, 255, 255;
    --fill-secondary: 54, 57, 63;
    --fill-secondary-hover: 65, 68, 73;
    --fill-interactive: 102, 116, 204;
    --fill-interactive-hover: 122, 134, 204;
    --fill-additional: 132, 255, 143;
    --fill-additional-hover: 173, 255, 181;
    --fill-positive: 40, 133, 78;
    --fill-positive-hover: 99, 153, 121;
    --fill-warning: 204, 123, 82;
    --fill-warning-hover: 178, 131, 107;
    --fill-negative: 178, 65, 65;
    --fill-negative-hover: 204, 82, 82;

    /* Токены со значениями opacity для подчеркивания ссылок, используются в links.tokens */
    --opacity-link-border: 0.5;
    --opacity-link-border-hover: 0.7;
}
@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://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 {
    --modal-index: 2001;
}
/*
    Переменные ссылок нельзя вешать на :root, потому что они зависят
    от цветов темы. Вешаем их на контейнер темы
*/
.tj-light-theme, .tj-dark-theme {
    --color-link-border: rgba(
        var(--outline-interactive),
        var(--opacity-link-border)
    );
    --color-link-border-hover: rgba(
        var(--outline-interactive),
        var(--opacity-link-border-hover)
    );

    --color-link-positive-border: rgba(
        var(--outline-positive),
        var(--opacity-link-border)
    );
    --color-link-positive-border-hover: rgba(
        var(--outline-positive),
        var(--opacity-link-border-hover)
    );

    --color-link-negative-border: rgba(
        var(--outline-negative),
        var(--opacity-link-border)
    );
    --color-link-negative-border-hover: rgba(
        var(--outline-negative),
        var(--opacity-link-border-hover)
    );

    --color-link-warning-border: rgba(
        var(--outline-warning),
        var(--opacity-link-border)
    );
    --color-link-warning-border-hover: rgba(
        var(--outline-warning),
        var(--opacity-link-border-hover)
    );

    --color-link-placeholder-border: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border)
    );
    --color-link-placeholder-border-hover: rgba(
        var(--outline-placeholder),
        var(--opacity-link-border-hover)
    );

    --color-link-dim-border: rgba(
        var(--outline-initial),
        var(--opacity-link-border)
    );
    --color-link-dim-border-hover: rgba(
        var(--outline-initial),
        var(--opacity-link-border-hover)
    );
}
: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-secondary-bold-mobile: bold 15px/20px Graphik;
    --body-secondary-bold-desktop: bold 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-static: 32px/35px 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;

    --accent-impact: 23px/25px Graphik;
}
.heading-one--Qkzz1, .h1--sfx73, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--Qkzz1, .h1--sfx73, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--pRJ4Q, .h2--V5o1M, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--pRJ4Q, .h2--V5o1M, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--cJdAe, .h3--zaPko, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--laJ5Q, .h4--bnJYs {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--laJ5Q, .h4--bnJYs {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--iBWWZ, .h5--qE84Q, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--ErvVF, .h6--Huxc9 {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--ErvVF, .h6--Huxc9 {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--bXCgl {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--bXCgl {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--bXCgl b, .body-primary--bXCgl strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--bXCgl b, .body-primary--bXCgl strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--cf7bO {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--cf7bO {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--cf7bO b, .body-secondary--cf7bO strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--cf7bO b, .body-secondary--cf7bO strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--oyxwK, .dynamicContent--gi0BS a, .dynamicContent--gi0BS p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--oyxwK b, .body-large--oyxwK strong, .body-large-bold--_RqZk, .dynamicContent--gi0BS a b, .dynamicContent--gi0BS a strong, .dynamicContent--gi0BS p b, .dynamicContent--gi0BS p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--p3Apk {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--p3Apk b, .body-medium--p3Apk strong, .body-medium-bold--vWymZ {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--W9JGn {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--W9JGn b, .body-small--W9JGn strong, .body-small-bold--ZW7SG {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
body {
    background: rgb(var(--background-primary));
    font: 17px/25px Graphik;
    font: var(--body-secondary-desktop);
    color: rgb(var(--outline-secondary));
    margin: 0;
    padding: 0;
    min-width: 360px;

    --themis-rating-color: #ff8a00;
}
h1, h2, h3, h5 {
    margin-top: 0;
    margin-bottom: 0;
    margin: 0;
}
h1 {
    color: rgb(var(--outline-primary));
}
h2 {
    color: rgb(var(--outline-secondary));
}
h3 {
    color: rgb(var(--outline-secondary));
}
h5 {
    color: rgb(var(--outline-secondary));
}
/* всё элементы под классом dynamicContent это поле редактора из админке */
/* нужно переписать стили из-за того что в этой поле может быть что угодно */
.dynamicContent--gi0BS h3 {
    margin-bottom: 10px;
}
.dynamicContent--gi0BS h2 {
    margin-bottom: 25px;
}
.dynamicContent--gi0BS a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--gi0BS a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--gi0BS ol, .dynamicContent--gi0BS ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--gi0BS ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--gi0BS p {
    margin: 0 0 20px 0;
}
.dynamicContent--gi0BS p:last-child {
    margin-bottom: 0;
}
.dynamicContent--gi0BS ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--gi0BS ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--gi0BS ul li {
    margin-bottom: 10px;
}
.dynamicContent--gi0BS ol li {
    margin-bottom: 5px;
}
.dynamicContent--gi0BS ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--gi0BS ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--gi0BS a:hover {
        background-image: linear-gradient(rgb(var(--outline-interactive)), rgb(var(--outline-interactive)));
        background-repeat: repeat-x;
        background-size: 100% 1px;
        background-position: 0 100%;
    }
}
.root--nxHbw {
    margin-top: 25px;
}