.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/ffeef389f08f181af9253545bef544f337acf1b7/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--XxvBM, .h1--M1G54, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--XxvBM, .h1--M1G54, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--e4l7s, .h2--qwtF0, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--e4l7s, .h2--qwtF0, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--mAIhh, .h3--lig0N, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--IVbw6, .h4--etZsE {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--IVbw6, .h4--etZsE {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--dCrAb, .h5--YImyr, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--Hvwnp, .h6--miS5p {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--Hvwnp, .h6--miS5p {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--bfoEl {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--bfoEl {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--bfoEl b, .body-primary--bfoEl strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--bfoEl b, .body-primary--bfoEl strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--Q0Pnr {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--Q0Pnr {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--Q0Pnr b, .body-secondary--Q0Pnr strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--Q0Pnr b, .body-secondary--Q0Pnr strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--g2vsN, .dynamicContent--SQr1U a, .dynamicContent--SQr1U p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--g2vsN b, .body-large--g2vsN strong, .body-large-bold--ZBcIy, .dynamicContent--SQr1U a b, .dynamicContent--SQr1U a strong, .dynamicContent--SQr1U p b, .dynamicContent--SQr1U p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--oRZzY {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--oRZzY b, .body-medium--oRZzY strong, .body-medium-bold--nEGbg {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--pt90E {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--pt90E b, .body-small--pt90E strong, .body-small-bold--lo6nb {
    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--SQr1U h3 {
    margin-bottom: 10px;
}
.dynamicContent--SQr1U h2 {
    margin-bottom: 25px;
}
.dynamicContent--SQr1U a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--SQr1U a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--SQr1U ol, .dynamicContent--SQr1U ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--SQr1U ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--SQr1U p {
    margin: 0 0 20px 0;
}
.dynamicContent--SQr1U p:last-child {
    margin-bottom: 0;
}
.dynamicContent--SQr1U ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--SQr1U ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--SQr1U ul li {
    margin-bottom: 10px;
}
.dynamicContent--SQr1U ol li {
    margin-bottom: 5px;
}
.dynamicContent--SQr1U ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--SQr1U ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--SQr1U 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--V3bso {
    background: rgb(var(--surface-primary));
    border: 1px solid rgb(var(--outline-slight));
    box-sizing: border-box;
    border-radius: 15px;
    padding: 20px;
    margin: 0 -20px;
}
@media (min-width: 760px) {
.root--V3bso {
        margin: 0;
        margin: initial;
        padding: 25px 30px;
}
    }
.smallPadding--ZcN2R {
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    margin: 0;
    margin: initial;
}
.withCardPadding--TQ24L {
    padding: 15px;
}
@media (min-width: 760px) {
.withCardPadding--TQ24L {
        padding: 20px;
}
    }
.link--CZU9y {
    display: block;
    text-decoration: none;
    outline: 0;
    color: rgb(var(--outline-primary));
}
@media (hover: hover) {
    .withHover--PCCQy:hover {
        cursor: pointer;
        box-shadow: 0 2px 15px rgba(var(--outline-primary), 0.15);
    }
}

.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--Yafwx {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--Yafwx {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--Yafwx b, .body-primary--Yafwx strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--Yafwx b, .body-primary--Yafwx strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--xxyk3 {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--xxyk3 {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--xxyk3 b, .body-secondary--xxyk3 strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--xxyk3 b, .body-secondary--xxyk3 strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--W4l0z {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--W4l0z b, .body-large--W4l0z strong, .body-large-bold--UpxPK {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--Yfds7, .caption--PSQ76 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--Yfds7 b, .body-medium--Yfds7 strong, .body-medium-bold--wpXPt, .caption--PSQ76 b, .caption--PSQ76 strong {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--auIjj {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--auIjj b, .body-small--auIjj strong, .body-small-bold--cIB77 {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
.caption--PSQ76 {
    margin-top: 15px;
    margin-bottom: 30px;
}
@media (min-width: 820px) {
.caption--PSQ76 {
        margin-top: 20px;
        margin-bottom: 50px;
}
    }
.caption--PSQ76[data-nomargin='true'] {
    margin: 0;
}

.button--OId6S {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(var(--surface-primary));
    color: rgb(var(--outline-#000));
    color: rgb(var(--outline-initial));
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2), 0 0 2px rgba(2, 0, 20, 0.18);
    cursor: pointer;
    outline: none;
    opacity: 1;
    visibility: visible;
    transition: all 0.2s linear;
}

.button--OId6S[data-hidden='true'] {
    opacity: 0;
    visibility: hidden;
}

.button--OId6S.focus-visible--Hu35b {
    color: rgb(var(--outline-hover));
}

.button--OId6S:focus-visible {
    color: rgb(var(--outline-hover));
}

.button--OId6S > svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.button--OId6S[data-direction='left'] > svg {
    left: 14px;
}

.button--OId6S[data-direction='right'] > svg {
    right: 14px;
}

@media (hover: hover) {
    .button--OId6S: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;
}
.body-primary--oKZAx {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--oKZAx {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--oKZAx b, .body-primary--oKZAx strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--oKZAx b, .body-primary--oKZAx strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--EjLZ6 {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--EjLZ6 {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--EjLZ6 b, .body-secondary--EjLZ6 strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--EjLZ6 b, .body-secondary--EjLZ6 strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--Koxxb {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--Koxxb b, .body-large--Koxxb strong, .body-large-bold--NO2XY {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--bH8yz, .counter--LNtKV {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--bH8yz b, .body-medium--bH8yz strong, .body-medium-bold--JuGa0, .counter--LNtKV b, .counter--LNtKV strong {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--UuYFE {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--UuYFE b, .body-small--UuYFE strong, .body-small-bold--W5eEh {
    font: bold 13px/15px Graphik;
    font: var(--body-small-bold);
}
.inner--QJLYC {
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.scroller--ARuy7 {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow: auto;

    /* this will hide the scrollbar in old mozilla based browsers */
    overflow: -moz-scrollbars-none;

    /* For Firefox 64+ scrollbar */
    scrollbar-width: none;

    /* this will hide the scrollbar in internet explorers */
    -ms-overflow-style: none;
}
@media (min-width: 820px) {
.scroller--ARuy7 {
        scroll-snap-type: none;
}
    }
.scroller--ARuy7::-webkit-scrollbar {
    display: none;
    height: 0;
    background: transparent;
}
.scroller--ARuy7[data-dragging='true'] {
    scroll-snap-type: none;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.scroller--ARuy7 > * {
    --scroll-margin: 20px;

    scroll-snap-align: start;
    scroll-margin-left: var(--scroll-margin);

    /* Для Safari */
    scroll-snap-margin: var(--scroll-margin);
    flex-shrink: 0;
    -webkit-user-drag: none;
    padding-right: 20px;

    /* Сейчас в базовых стилях из старого фронта всем
    элементам на странице проставляется box-sizing: border-box.
    Поэтому явно ставим */
    box-sizing: content-box;
}
@media (min-width: 760px) {
.scroller--ARuy7 > * {
        --scroll-margin: 30px;
}
    }
.scroller--ARuy7 > *:first-child {
    padding-left: 20px;
}
@media (min-width: 760px) {
.scroller--ARuy7 > *:first-child {
        padding-left: 30px;
}
    }
@media (min-width: 760px) {
.scroller--ARuy7 > *:last-child {
        /* Дизайн был рассчитан, на то, что ширина карусели 760px,
         а бордеры как бы накладываются сверху.
         Т.к. в css бордеры так не работают, получилась ширина в 758px.
         В итоге последний клик по кнопке прокручивает 2px.
         Чтобы это исправить, уменьшаем отступ на это два пикселя */
        padding-right: 28px;
}
    }
.swiper--t1tgJ[data-fotorama='true'] .scroller--ARuy7 > * {
    padding-right: 5px;
}
@media (min-width: 760px) {
.swiper--t1tgJ[data-fotorama='true'] .scroller--ARuy7 > * {
        --scroll-margin: calc((100vw - 700px) / 2);

        padding-right: 10px;
}
    }
.swiper--t1tgJ[data-fotorama='true'] .scroller--ARuy7 > *:first-child {
    padding-left: var(--scroll-margin);
}
@media (min-width: 820px) {
.swiper--t1tgJ[data-fotorama='true'] .scroller--ARuy7 > *:first-child {
        padding-left: 0;
}
    }
.swiper--t1tgJ[data-fotorama='true'] .scroller--ARuy7 > *:last-child {
    padding-right: var(--scroll-margin);
}
@media (min-width: 820px) {
.swiper--t1tgJ[data-fotorama='true'] .scroller--ARuy7 > *:last-child {
        padding-right: 0;
}
    }
.button--FtCCp {
    position: absolute;
    top: 35px;
    z-index: 1;
    display: none;
    width: 40px;
    height: 40px;
}
@media (min-width: 820px) {
.button--FtCCp {
        display: block;
}
    }
.button--FtCCp[data-control='prev'] {
    left: 0;
    transform: translateX(-50%);
}
.button--FtCCp[data-control='next'] {
    right: 0;
    transform: translateX(50%);
}
.swiper--t1tgJ[data-fotorama='true'] .button--FtCCp {
    top: 50%;
}
.swiper--t1tgJ[data-fotorama='true'] .button--FtCCp[data-control='prev'] {
    transform: translate(-50%, -50%);
}
.swiper--t1tgJ[data-fotorama='true'] .button--FtCCp[data-control='next'] {
    transform: translate(50%, -50%);
}
.description--YulcI {
    display: flex;
    margin: 0 auto;
    padding: 0 20px;
}
@media (min-width: 760px) {
.description--YulcI {
        max-width: 700px;
        padding: 0;
}
    }
@media (min-width: 820px) {
.description--YulcI {
        max-width: 760px;
}
    }
.counter--LNtKV {
    font-feature-settings: "tnum";
    font-variant: tabular-nums;
    min-width: 45px;
    margin-right: 5px;
    margin-top: 15px;
}
@media (min-width: 820px) {
.counter--LNtKV {
        margin-top: 20px;
}
    }
.counter--LNtKV[data-nomargin='true'] {
    margin: 0;
}

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

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

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

.image--PKuN2[data-position='bottom'] {
    -o-object-position: bottom;
       object-position: bottom;
}

.image--PKuN2[data-position='top'] {
    -o-object-position: top;
       object-position: top;
}

.image--PKuN2[data-position='left'] {
    -o-object-position: left;
       object-position: left;
}

.image--PKuN2[data-position='right'] {
    -o-object-position: right;
       object-position: right;
}

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

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



.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--eiMcF, .h1--ZCSBk, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--eiMcF, .h1--ZCSBk, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--Dz00q, .h2--aEb0F, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--Dz00q, .h2--aEb0F, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--DprBh, .h3--t9Vxd, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--wMTKt, .h4--vywl8 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--wMTKt, .h4--vywl8 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--TqRkz, .h5--VWAie, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--dpO03, .h6--H7jNS {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--dpO03, .h6--H7jNS {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--qzVCd {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--qzVCd {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--qzVCd b, .body-primary--qzVCd strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--qzVCd b, .body-primary--qzVCd strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--S7Vmj {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--S7Vmj {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--S7Vmj b, .body-secondary--S7Vmj strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--S7Vmj b, .body-secondary--S7Vmj strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--qeTe5, .dynamicContent--RASjG a, .dynamicContent--RASjG p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--qeTe5 b, .body-large--qeTe5 strong, .body-large-bold--FHq2V, .dynamicContent--RASjG a b, .dynamicContent--RASjG a strong, .dynamicContent--RASjG p b, .dynamicContent--RASjG p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--U2Mwl {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--U2Mwl b, .body-medium--U2Mwl strong, .body-medium-bold--HosGa, .root--rG4Te {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--sCcXL {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--sCcXL b, .body-small--sCcXL strong, .body-small-bold--YtRat {
    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--RASjG h3 {
    margin-bottom: 10px;
}
.dynamicContent--RASjG h2 {
    margin-bottom: 25px;
}
.dynamicContent--RASjG a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--RASjG a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--RASjG ol, .dynamicContent--RASjG ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--RASjG ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--RASjG p {
    margin: 0 0 20px 0;
}
.dynamicContent--RASjG p:last-child {
    margin-bottom: 0;
}
.dynamicContent--RASjG ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--RASjG ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--RASjG ul li {
    margin-bottom: 10px;
}
.dynamicContent--RASjG ol li {
    margin-bottom: 5px;
}
.dynamicContent--RASjG ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--RASjG ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--RASjG 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--rG4Te {
    display: flex;
    align-items: center;
    color: rgb(var(--outline-secondary));
    outline: 0;
    text-decoration: none;
}
.avatar--W8v7E {
    margin-right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    position: relative;
    top: -1px;
    overflow: hidden;
}
@media (hover: hover) {
    .withUrl--sT0kh: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--z0jMw, .h1--pLwt4, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--z0jMw, .h1--pLwt4, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--Tuxcb, .h2--SqXf1, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--Tuxcb, .h2--SqXf1, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--BW5vJ, .h3--jnT0y, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--CqBVq, .h4--Kyaar {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--CqBVq, .h4--Kyaar {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--JglU9, .h5--Nvczh, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--CoQmJ, .h6--lAn8C {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--CoQmJ, .h6--lAn8C {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--VtGgF {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--VtGgF {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--VtGgF b, .body-primary--VtGgF strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--VtGgF b, .body-primary--VtGgF strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--RkEmM {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--RkEmM {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--RkEmM b, .body-secondary--RkEmM strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--RkEmM b, .body-secondary--RkEmM strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--Ce0Zp, .dynamicContent--ybEyB a, .dynamicContent--ybEyB p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--Ce0Zp b, .body-large--Ce0Zp strong, .body-large-bold--bh7vp, .dynamicContent--ybEyB a b, .dynamicContent--ybEyB a strong, .dynamicContent--ybEyB p b, .dynamicContent--ybEyB p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--YSYgA {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--YSYgA b, .body-medium--YSYgA strong, .body-medium-bold--rXpCu {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--SBBAq {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--SBBAq b, .body-small--SBBAq strong, .body-small-bold--ObICf {
    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--ybEyB h3 {
    margin-bottom: 10px;
}
.dynamicContent--ybEyB h2 {
    margin-bottom: 25px;
}
.dynamicContent--ybEyB a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--ybEyB a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--ybEyB ol, .dynamicContent--ybEyB ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--ybEyB ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--ybEyB p {
    margin: 0 0 20px 0;
}
.dynamicContent--ybEyB p:last-child {
    margin-bottom: 0;
}
.dynamicContent--ybEyB ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--ybEyB ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--ybEyB ul li {
    margin-bottom: 10px;
}
.dynamicContent--ybEyB ol li {
    margin-bottom: 5px;
}
.dynamicContent--ybEyB ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--ybEyB ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--ybEyB 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%;
    }
}
.highlightFill--HLIU6 {
    fill: var(--themis-rating-color);
    stop-opacity: 1;
    stop-color: var(--themis-rating-color);
}
.fill--mDakA {
    fill: var(--outline-disabled);
    stop-color: var(--outline-disabled);
    stop-opacity: 1;
}

.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--CPF6d, .h1--V8w1k, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--CPF6d, .h1--V8w1k, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--GiWNu, .h2--dcblu, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--GiWNu, .h2--dcblu, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--yD2aw, .h3--N_575, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--CMYnb, .h4--sb4xI {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--CMYnb, .h4--sb4xI {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--PkfAN, .h5--SITi7, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--ctc3X, .h6--iqYXk {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--ctc3X, .h6--iqYXk {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--RncNx {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--RncNx {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--RncNx b, .body-primary--RncNx strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--RncNx b, .body-primary--RncNx strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--JVGo2 {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--JVGo2 {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--JVGo2 b, .body-secondary--JVGo2 strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--JVGo2 b, .body-secondary--JVGo2 strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--kvHXF, .dynamicContent--A9GJW a, .dynamicContent--A9GJW p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--kvHXF b, .body-large--kvHXF strong, .body-large-bold--UNmuk, .dynamicContent--A9GJW a b, .dynamicContent--A9GJW a strong, .dynamicContent--A9GJW p b, .dynamicContent--A9GJW p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--uzDdp {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--uzDdp b, .body-medium--uzDdp strong, .body-medium-bold--YyUbk {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--IjZj5 {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--IjZj5 b, .body-small--IjZj5 strong, .body-small-bold--x8Qfj {
    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--A9GJW h3 {
    margin-bottom: 10px;
}
.dynamicContent--A9GJW h2 {
    margin-bottom: 25px;
}
.dynamicContent--A9GJW a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--A9GJW a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--A9GJW ol, .dynamicContent--A9GJW ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--A9GJW ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--A9GJW p {
    margin: 0 0 20px 0;
}
.dynamicContent--A9GJW p:last-child {
    margin-bottom: 0;
}
.dynamicContent--A9GJW ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--A9GJW ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--A9GJW ul li {
    margin-bottom: 10px;
}
.dynamicContent--A9GJW ol li {
    margin-bottom: 5px;
}
.dynamicContent--A9GJW ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--A9GJW ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--A9GJW 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--JtZhM {
    position: relative;
    display: flex;
    margin-bottom: 10px;
}
.star--C5zl8 {
    width: 20px;
    height: 18px;
    margin-right: 5px;
}
.small--hoCsZ {
    margin-bottom: 0;
}
.small--hoCsZ .star--C5zl8 {
    width: 16px;
    height: 14.4px;
}
.star--C5zl8:last-child {
    margin-right: 0;
}

.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--wapkU, .h1--P8cpu, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--wapkU, .h1--P8cpu, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--tNppi, .h2--IXqv8, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--tNppi, .h2--IXqv8, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--eIqad, .h3--Gc6hL, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--ESGao, .h4--tbXj6 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--ESGao, .h4--tbXj6 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--tlXuX, .h5--lHbY6, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--Ig_cn, .h6--kYnYp {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--Ig_cn, .h6--kYnYp {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--flLBb {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--flLBb {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--flLBb b, .body-primary--flLBb strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--flLBb b, .body-primary--flLBb strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--gLV4u {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--gLV4u {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--gLV4u b, .body-secondary--gLV4u strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--gLV4u b, .body-secondary--gLV4u strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--rgb62, .dynamicContent--il83W a, .dynamicContent--il83W p, .testimonialTitle--UO0cW {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--rgb62 b, .body-large--rgb62 strong, .body-large-bold--UNxxV, .dynamicContent--il83W a b, .dynamicContent--il83W a strong, .dynamicContent--il83W p b, .dynamicContent--il83W p strong, .testimonialTitle--UO0cW b, .testimonialTitle--UO0cW strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--fKWvt, .schoolTitle--Br0ih {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--fKWvt b, .body-medium--fKWvt strong, .body-medium-bold--l4u23, .courseTitle--NeSfv, .schoolTitle--Br0ih b, .schoolTitle--Br0ih strong {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--Hg6bw {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--Hg6bw b, .body-small--Hg6bw strong, .body-small-bold--T2cVz {
    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--il83W h3 {
    margin-bottom: 10px;
}
.dynamicContent--il83W h2 {
    margin-bottom: 25px;
}
.dynamicContent--il83W a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--il83W a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--il83W ol, .dynamicContent--il83W ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--il83W ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--il83W p {
    margin: 0 0 20px 0;
}
.dynamicContent--il83W p:last-child {
    margin-bottom: 0;
}
.dynamicContent--il83W ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--il83W ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--il83W ul li {
    margin-bottom: 10px;
}
.dynamicContent--il83W ol li {
    margin-bottom: 5px;
}
.dynamicContent--il83W ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--il83W ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--il83W 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--CkAHw {
    background: rgb(var(--surface-secondary));
    height: 230px;
    width: 320px;
    border: none;
}
.fullSize--kyBcQ {
    width: 100%;
    height: 100%;
    margin-bottom: 15px;
}
@media (min-width: 760px) {
.fullSize--kyBcQ {
        margin-bottom: 0;
}
    }
.fullSize--kyBcQ:last-child {
    margin-bottom: 0;
}
.cardHeader--CUy0J {
    height: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cardFooter--nTVVD {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    height: 60px;
}
.courseTitle--NeSfv {
    color: rgb(var(--outline-secondary));
}
.schoolTitle--Br0ih {
    color: rgb(var(--outline-placeholder));
}
.testimonialTitle--UO0cW {
    height: 110px;
    position: relative;
}
.testimonialTitle--UO0cW span {
    white-space: nowrap;
}
.testimonialTitle--UO0cW svg {
    position: relative;
    top: 6px;
    left: 5px;
}
@media (hover: hover) {
    .root--CkAHw:hover {
        background: rgb(var(--surface-hover));
    }

    .root--CkAHw:hover .testimonialTitle--UO0cW svg rect {
        fill: 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--fcsIm, .h1--WmQWU, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--fcsIm, .h1--WmQWU, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--GkKuM, .h2--xH79H, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--GkKuM, .h2--xH79H, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--yaLwU, .h3--IVrXa, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--TjXYT, .h4--b0kPA {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--TjXYT, .h4--b0kPA {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--VlK86, .h5--RZg57, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--jBC4G, .h6--VkDjZ {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--jBC4G, .h6--VkDjZ {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--W53W4 {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--W53W4 {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--W53W4 b, .body-primary--W53W4 strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--W53W4 b, .body-primary--W53W4 strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--ikWJZ {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--ikWJZ {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--ikWJZ b, .body-secondary--ikWJZ strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--ikWJZ b, .body-secondary--ikWJZ strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--CimBM, .dynamicContent--HumUG a, .dynamicContent--HumUG p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--CimBM b, .body-large--CimBM strong, .body-large-bold--kuxJv, .dynamicContent--HumUG a b, .dynamicContent--HumUG a strong, .dynamicContent--HumUG p b, .dynamicContent--HumUG p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--A2wCs {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--A2wCs b, .body-medium--A2wCs strong, .body-medium-bold--lmhNc {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--kiIzd {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--kiIzd b, .body-small--kiIzd strong, .body-small-bold--FlWiN {
    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--HumUG h3 {
    margin-bottom: 10px;
}
.dynamicContent--HumUG h2 {
    margin-bottom: 25px;
}
.dynamicContent--HumUG a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--HumUG a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--HumUG ol, .dynamicContent--HumUG ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--HumUG ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--HumUG p {
    margin: 0 0 20px 0;
}
.dynamicContent--HumUG p:last-child {
    margin-bottom: 0;
}
.dynamicContent--HumUG ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--HumUG ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--HumUG ul li {
    margin-bottom: 10px;
}
.dynamicContent--HumUG ol li {
    margin-bottom: 5px;
}
.dynamicContent--HumUG ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--HumUG ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--HumUG 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--w9T_N {
    margin-top: 40px;
}
.header--NUzYD {
    margin-bottom: 25px;
}
.allTestimonials--dpAsh {
    margin: 0 -20px;
    position: relative;
}
@media (min-width: 760px) {
.allTestimonials--dpAsh {
        margin: 0 -30px;
}
    }
.item--SLhap {
    margin-right: 10px;
    width: 320px;
    height: 100%;
    box-sizing: border-box;
    padding-right: 0;
}
.item--SLhap:last-child {
    margin-right: 0;
}
.item--SLhap:first-child {
    margin-left: 20px;
    padding-left: 0;
}
@media (min-width: 760px) {
.item--SLhap:first-child {
        margin-left: 30px;
}
    }

.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--KaOfF, .h1--EAWjE, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--KaOfF, .h1--EAWjE, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--n6neT, .h2--KyEop, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--n6neT, .h2--KyEop, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--mJJ6C, .h3--ZN7RI, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--Jokl6, .h4--LegpU {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--Jokl6, .h4--LegpU {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--Qmd8b, .h5--gNKgI, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--_mZ9W, .h6--Riho5 {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--_mZ9W, .h6--Riho5 {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--bal6t {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--bal6t {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--bal6t b, .body-primary--bal6t strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--bal6t b, .body-primary--bal6t strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--_dauV {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--_dauV {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--_dauV b, .body-secondary--_dauV strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--_dauV b, .body-secondary--_dauV strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--LLhcD, .dynamicContent--H8jld a, .dynamicContent--H8jld p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--LLhcD b, .body-large--LLhcD strong, .body-large-bold--VMSkr, .dynamicContent--H8jld a b, .dynamicContent--H8jld a strong, .dynamicContent--H8jld p b, .dynamicContent--H8jld p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--Rvo5q {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--Rvo5q b, .body-medium--Rvo5q strong, .body-medium-bold--tOfRI {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--zmOPp {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--zmOPp b, .body-small--zmOPp strong, .body-small-bold--n8xoT {
    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--H8jld h3 {
    margin-bottom: 10px;
}
.dynamicContent--H8jld h2 {
    margin-bottom: 25px;
}
.dynamicContent--H8jld a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--H8jld a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--H8jld ol, .dynamicContent--H8jld ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--H8jld ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--H8jld p {
    margin: 0 0 20px 0;
}
.dynamicContent--H8jld p:last-child {
    margin-bottom: 0;
}
.dynamicContent--H8jld ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--H8jld ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--H8jld ul li {
    margin-bottom: 10px;
}
.dynamicContent--H8jld ol li {
    margin-bottom: 5px;
}
.dynamicContent--H8jld ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--H8jld ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--H8jld 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--F5aNw {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
    background-color: rgb(var(--fill-interactive));
    color: rgb(var(--outline-light-static));
    outline: 0;
    text-decoration: none;
    border-radius: 10px;
    height: 50px;
    display: block;
    box-sizing: border-box;
    padding: 15px 30px;
    text-align: center;
}
@media (min-width: 760px) {
.root--F5aNw {
        display: inline-block;
}
    }
@media (hover: hover) {
    .root--F5aNw:hover {
        background-color: rgb(var(--fill-interactive-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--LShHc, .h1--FQqit, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--LShHc, .h1--FQqit, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--DS1mA, .h2--K1VLk, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--DS1mA, .h2--K1VLk, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--E6fJo, .h3--sVhxz, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--eM64c, .h4--t3mPY {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--eM64c, .h4--t3mPY {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--Vol4j, .h5--oQnQ2, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--LASrt, .h6--INmZF {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--LASrt, .h6--INmZF {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--Kgyld {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--Kgyld {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--Kgyld b, .body-primary--Kgyld strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--Kgyld b, .body-primary--Kgyld strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--RGWZc {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--RGWZc {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--RGWZc b, .body-secondary--RGWZc strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--RGWZc b, .body-secondary--RGWZc strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--gD8vN, .dynamicContent--tVCrY a, .dynamicContent--tVCrY p, .root--BgF31.bigFont--dqo_V {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--gD8vN b, .body-large--gD8vN strong, .body-large-bold--cO8Xg, .dynamicContent--tVCrY a b, .dynamicContent--tVCrY a strong, .dynamicContent--tVCrY p b, .dynamicContent--tVCrY p strong, .root--BgF31.bigFont--dqo_V b, .root--BgF31.bigFont--dqo_V strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--cXMws, .root--BgF31 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--cXMws b, .body-medium--cXMws strong, .body-medium-bold--azC4u, .root--BgF31 b, .root--BgF31 strong {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--FfNd9 {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--FfNd9 b, .body-small--FfNd9 strong, .body-small-bold--JpH9O {
    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--tVCrY h3 {
    margin-bottom: 10px;
}
.dynamicContent--tVCrY h2 {
    margin-bottom: 25px;
}
.dynamicContent--tVCrY a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--tVCrY a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--tVCrY ol, .dynamicContent--tVCrY ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--tVCrY ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--tVCrY p {
    margin: 0 0 20px 0;
}
.dynamicContent--tVCrY p:last-child {
    margin-bottom: 0;
}
.dynamicContent--tVCrY ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--tVCrY ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--tVCrY ul li {
    margin-bottom: 10px;
}
.dynamicContent--tVCrY ol li {
    margin-bottom: 5px;
}
.dynamicContent--tVCrY ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--tVCrY ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--tVCrY 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--BgF31 {
    color: rgb(var(--outline-interactive));
    text-decoration: none;
    padding-bottom: 3px;
    outline: 0;
    position: relative;
}
.root--BgF31.withArrow--rygZU {
    margin-right: 35px;
}
.iconContainer--yygLU {
    background: rgb(var(--fill-interactive));
    width: 30px;
    height: 30px;
    border-radius: 30px;
    position: absolute;
    top: -8px;
    right: -35px;
}
.iconContainer--yygLU svg {
    position: absolute;
    top: 50%;
    margin-top: -6px;
    left: 50%;
    margin-left: -7px;
}
.iconContainer--yygLU svg path {
    fill: rgb(var(--surface-primary));
}
.iconContainer--yygLU.diagonalRightArrow--cKRDw {
    background: none;
    position: absolute;
    top: 50%;
    margin-top: -5.5px;
    right: -18px;
    width: 11px;
    height: 11px;
    border-radius: 0;
    border-radius: initial;
}
.iconContainer--yygLU.diagonalRightArrow--cKRDw svg path {
    fill: rgb(var(--fill-interactive));
}
@media (hover: hover) {
    .root--BgF31: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--BgF31:hover .iconContainer--yygLU {
        background: rgb(var(--fill-interactive-hover));
    }

    .root--BgF31:hover .iconContainer--yygLU.diagonalRightArrow--cKRDw {
        background: none;
    }

    .root--BgF31.withArrow--rygZU:hover {
        background-image: none;
    }
}

.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--Qb4xJ, .h1--zbntC, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--Qb4xJ, .h1--zbntC, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--nTKU9, .h2--lUT4c, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--nTKU9, .h2--lUT4c, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--tCtRa, .h3--MLo2Y, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--jvhac, .h4--qyaUX {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--jvhac, .h4--qyaUX {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--XANAp, .h5--Mp30X, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--UUGzw, .h6--HFVsD {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--UUGzw, .h6--HFVsD {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--KdYyY {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--KdYyY {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--KdYyY b, .body-primary--KdYyY strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--KdYyY b, .body-primary--KdYyY strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--Up2yW {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--Up2yW {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--Up2yW b, .body-secondary--Up2yW strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--Up2yW b, .body-secondary--Up2yW strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--Af83J, .dynamicContent--iU9l2 a, .dynamicContent--iU9l2 p, .big--WaARS .count--Z8vTo {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--Af83J b, .body-large--Af83J strong, .body-large-bold--k9IJ7, .dynamicContent--iU9l2 a b, .dynamicContent--iU9l2 a strong, .dynamicContent--iU9l2 p b, .dynamicContent--iU9l2 p strong, .big--WaARS .count--Z8vTo b, .big--WaARS .count--Z8vTo strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--Dc7hC, .count--Z8vTo {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--Dc7hC b, .body-medium--Dc7hC strong, .body-medium-bold--iJ9hD, .count--Z8vTo b, .count--Z8vTo strong {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--oONTd {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--oONTd b, .body-small--oONTd strong, .body-small-bold--mw9q6 {
    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--iU9l2 h3 {
    margin-bottom: 10px;
}
.dynamicContent--iU9l2 h2 {
    margin-bottom: 25px;
}
.dynamicContent--iU9l2 a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--iU9l2 a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--iU9l2 ol, .dynamicContent--iU9l2 ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--iU9l2 ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--iU9l2 p {
    margin: 0 0 20px 0;
}
.dynamicContent--iU9l2 p:last-child {
    margin-bottom: 0;
}
.dynamicContent--iU9l2 ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--iU9l2 ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--iU9l2 ul li {
    margin-bottom: 10px;
}
.dynamicContent--iU9l2 ol li {
    margin-bottom: 5px;
}
.dynamicContent--iU9l2 ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--iU9l2 ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--iU9l2 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--iCik8 {
    display: flex;
    align-items: center;
}
.count--Z8vTo {
    color: rgb(var(--outline-placeholder));
}
.big--WaARS .count--Z8vTo {
    color: rgb(var(--outline-secondary));
    margin-left: 10px;
}
.rating--h9lQO, .total--B_DnF {
    display: flex;
    align-items: center;
    margin-right: 10px;
}
.total--B_DnF .count--Z8vTo {
    margin-left: 0;
}
.totalLink--j1L2b .count--Z8vTo {
    cursor: pointer;
    color: rgb(var(--outline-interactive));
    line-height: 21px;
}
.big--WaARS.rating--h9lQO {
    margin-right: 20px;
}
.star--_C5B7 {
    width: 16px;
    height: 14.4px;
    margin-right: 5px;
    position: relative;
    top: -1px;
}
.shortRating--NY9EV {
    margin-left: 10px;
    margin-right: 0;
    position: relative;
    top: 1px;
}
@media (hover: hover) {
    .totalLink--j1L2b:hover .count--Z8vTo {
        background-image: linear-gradient(rgb(var(--outline-interactive)), rgb(var(--outline-interactive)));
        background-repeat: repeat-x;
        background-size: 100% 1px;
        background-position: 0 100%;
    }
}

.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--xSMAe, .h1--sEhz0, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--xSMAe, .h1--sEhz0, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--kfV6Y, .h2--I9Oje, h2, .cost--AI0zh {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--kfV6Y, .h2--I9Oje, h2, .cost--AI0zh {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--ZnrsS, .h3--ajtoM, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--y8qVo, .h4--Xe5em {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--y8qVo, .h4--Xe5em {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--uS4VL, .h5--rmAEq, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--HiChQ, .h6--zztwy {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--HiChQ, .h6--zztwy {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--TRpOE {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--TRpOE {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--TRpOE b, .body-primary--TRpOE strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--TRpOE b, .body-primary--TRpOE strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--t7_2f {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--t7_2f {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--t7_2f b, .body-secondary--t7_2f strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--t7_2f b, .body-secondary--t7_2f strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--IoMWT, .dynamicContent--FOaTe a, .dynamicContent--FOaTe p, .courseTitle--hCzgk {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--IoMWT b, .body-large--IoMWT strong, .body-large-bold--2q272, .dynamicContent--FOaTe a b, .dynamicContent--FOaTe a strong, .dynamicContent--FOaTe p b, .dynamicContent--FOaTe p strong, .courseTitle--hCzgk b, .courseTitle--hCzgk strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--_deFQ, .period--JvTRv, .installment--B9ngh, .schoolTitle--OH9_0 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--_deFQ b, .body-medium--_deFQ strong, .body-medium-bold--UFmLX, .period--JvTRv b, .period--JvTRv strong, .installment--B9ngh b, .installment--B9ngh strong, .schoolTitle--OH9_0 b, .schoolTitle--OH9_0 strong {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--IqqRN {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--IqqRN b, .body-small--IqqRN strong, .body-small-bold--BlY7e {
    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--FOaTe h3 {
    margin-bottom: 10px;
}
.dynamicContent--FOaTe h2 {
    margin-bottom: 25px;
}
.dynamicContent--FOaTe a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--FOaTe a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--FOaTe ol, .dynamicContent--FOaTe ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--FOaTe ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--FOaTe p {
    margin: 0 0 20px 0;
}
.dynamicContent--FOaTe p:last-child {
    margin-bottom: 0;
}
.dynamicContent--FOaTe ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--FOaTe ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--FOaTe ul li {
    margin-bottom: 10px;
}
.dynamicContent--FOaTe ol li {
    margin-bottom: 5px;
}
.dynamicContent--FOaTe ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--FOaTe ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--FOaTe 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--D38vq {
    cursor: pointer;
    position: relative;
}
@media (min-width: 760px) {
.root--D38vq {
        width: 370px;
        height: 235px;
}
    }
.mainCourseUrl--pvs9k {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.header--mC3nC {
    margin-bottom: 10px;
}
@media (min-width: 760px) {
.header--mC3nC {
        height: 136px;
}
    }
.courseTitle--hCzgk {
    color: rgb(var(--outline-secondary));
}
.courseLink--ECQPo {
    margin-top: -4px;
    margin-right: -2px;
}
.period--JvTRv {
    color: rgb(var(--outline-placeholder));
    margin-top: 5px;
}
.installment--B9ngh {
    color: rgb(var(--outline-placeholder));
}
.cost--AI0zh {
    color: rgb(var(--outline-secondary));
}
.cost--AI0zh.isWithInstallment--X4R1G {
    margin-bottom: 45px;
}
.costFree--BvYys {
    margin-top: -1px;
}
.school--qiGcq {
    margin-bottom: 5px;
    display: flex;
}
.schoolLogo--mEzgX {
    margin-right: 5px;
    height: 15px;
    width: 15px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(var(--outline-slight));
}
.schoolTitle--OH9_0 {
    color: rgb(var(--outline-placeholder));
    outline: 0;
    text-decoration: none;
    position: relative;
}
.bottom--dPvRF {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bottomIsFree--KZ9_d {
    margin-top: 28px;
}
.bottomIsInstallment--vFmRI {
    margin-top: 25px;
}
@media (min-width: 760px) {
.bottomIsInstallment--vFmRI {
        margin-top: 30px;
}
    }
.rating--nzeFZ {
    margin-top: 1px;
}
.subFooter--Nmm6B {
    margin-top: 25px;
}
@media (min-width: 760px) {
.subFooter--Nmm6B {
        height: 55px;
        margin-top: 0;
        margin-top: initial;
}
    }
@media (hover: hover) {
    .root--D38vq:hover .arrowHover--GaxZL {
        background: rgb(var(--fill-interactive-hover));
    }

    .schoolTitle--OH9_0: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--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--xa8Ko, .h1--BJ7zl, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--xa8Ko, .h1--BJ7zl, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--n7ZIF, .h2--hcwmH, h2, .title--ZX3qt {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--n7ZIF, .h2--hcwmH, h2, .title--ZX3qt {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--_421r, .h3--N2ZQJ, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--jIBKs, .h4--V0WJs {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--jIBKs, .h4--V0WJs {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--xT7ao, .h5--Fo5vZ, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--IIHsv, .h6--KD6QF {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--IIHsv, .h6--KD6QF {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--e3sUn {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--e3sUn {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--e3sUn b, .body-primary--e3sUn strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--e3sUn b, .body-primary--e3sUn strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--sEK2p {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--sEK2p {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--sEK2p b, .body-secondary--sEK2p strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--sEK2p b, .body-secondary--sEK2p strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--n1Bgg, .dynamicContent--QRDid a, .dynamicContent--QRDid p, .courseInfo--_igRT, .noOtherCourses--HqC05 {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--n1Bgg b, .body-large--n1Bgg strong, .body-large-bold--TpSqD, .dynamicContent--QRDid a b, .dynamicContent--QRDid a strong, .dynamicContent--QRDid p b, .dynamicContent--QRDid p strong, .courseInfo--_igRT b, .courseInfo--_igRT strong, .noOtherCourses--HqC05 b, .noOtherCourses--HqC05 strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--jLfEZ {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--jLfEZ b, .body-medium--jLfEZ strong, .body-medium-bold--BzzA7 {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--fVRp5, .date--R9SHc {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--fVRp5 b, .body-small--fVRp5 strong, .body-small-bold--X2r49, .date--R9SHc b, .date--R9SHc strong {
    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--QRDid h3 {
    margin-bottom: 10px;
}
.dynamicContent--QRDid h2 {
    margin-bottom: 25px;
}
.dynamicContent--QRDid a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--QRDid a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--QRDid ol, .dynamicContent--QRDid ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--QRDid ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--QRDid p {
    margin: 0 0 20px 0;
}
.dynamicContent--QRDid p:last-child {
    margin-bottom: 0;
}
.dynamicContent--QRDid ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--QRDid ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--QRDid ul li {
    margin-bottom: 10px;
}
.dynamicContent--QRDid ol li {
    margin-bottom: 5px;
}
.dynamicContent--QRDid ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--QRDid ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--QRDid 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--rysbd {
    position: relative;
}
.title--ZX3qt {
    color: rgb(var(--outline-secondary));
    margin-bottom: 10px;
    margin-top: 10px;
}
.courseInfo--_igRT {
    margin-top: 30px;
    color: rgb(var(--outline-secondary));
}
.courseTitle--AKlB8 {
    margin-top: 5px;
}
.cost--rJCru {
    margin-top: 5px;
    color: rgb(var(--outline-placeholder));
}
.content--VsJiL {
    margin: 30px 0;
}
/* всё элементы под классом content это поле редактора из админке */
.content--VsJiL h3 {
    margin-bottom: 10px;
}
.block--nUEtX {
    margin-bottom: 25px;
}
.block--nUEtX:last-child {
    margin-bottom: 0;
}
.date--R9SHc {
    color: rgb(var(--outline-secondary));
    position: relative;
    margin-left: 7px;
    padding-left: 7px;
}
.date--R9SHc::before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: -1px;
    width: 2px;
    height: 2px;
    border-radius: 2px;
    background: rgb(var(--outline-secondary));
}
.dotSeparator--jSSYB {
    display: flex;
    align-items: center;
}
.otherCoursesHeader--SYRmJ {
    margin-top: 40px;
}
.otherCourses--p66oN {
    display: block;
    margin: 25px 20px 0 20px;
}
@media (min-width: 760px) {
.otherCourses--p66oN {
        display: flex;
        flex-wrap: wrap;
        margin: 25px 0 0 0;
}
    }
.courseItem--imlve {
    width: 100%;
    margin-bottom: 15px;
}
@media (min-width: 760px) {
.courseItem--imlve {
        margin-bottom: 20px;
        width: calc(50% - 10px);
}
    }
@media (min-width: 760px) {
.courseItem--imlve:nth-child(odd) {
        margin-right: 20px;
}
    }
.courseItem--imlve:last-child {
    margin-bottom: 0;
}
@media (min-width: 760px) {
.courseItem--imlve:last-child {
        margin-bottom: 20px;
}
    }
.noOtherCourses--HqC05 {
    background: rgb(var(--surface-secondary));
    color: rgb(var(--outline-placeholder));
    margin-top: 30px;
    padding: 15px;
    border-radius: 10px;
}