.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;
}
.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;
}
.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--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--E26wW, .h1--SVOjV, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--E26wW, .h1--SVOjV, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--OqRNe, .h2--W_JsM, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--OqRNe, .h2--W_JsM, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--hsA1D, .h3--m2V1l, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--XVnlU, .h4--S_qBY {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--XVnlU, .h4--S_qBY {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--V0sCd, .h5--NYlKQ, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--pX4bX, .h6--ZP8PM {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--pX4bX, .h6--ZP8PM {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--r3wpI {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--r3wpI {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--r3wpI b, .body-primary--r3wpI strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--r3wpI b, .body-primary--r3wpI strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--S8lzM {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--S8lzM {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--S8lzM b, .body-secondary--S8lzM strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--S8lzM b, .body-secondary--S8lzM strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--cIaYQ, .dynamicContent--WnFNO a, .dynamicContent--WnFNO p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--cIaYQ b, .body-large--cIaYQ strong, .body-large-bold--ZtUtM, .dynamicContent--WnFNO a b, .dynamicContent--WnFNO a strong, .dynamicContent--WnFNO p b, .dynamicContent--WnFNO p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--_XnsR {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--_XnsR b, .body-medium--_XnsR strong, .body-medium-bold--EzKCa {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--LzO6X {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--LzO6X b, .body-small--LzO6X strong, .body-small-bold--g524E {
    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--WnFNO h3 {
    margin-bottom: 10px;
}
.dynamicContent--WnFNO h2 {
    margin-bottom: 25px;
}
.dynamicContent--WnFNO a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--WnFNO a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--WnFNO ol, .dynamicContent--WnFNO ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--WnFNO ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--WnFNO p {
    margin: 0 0 20px 0;
}
.dynamicContent--WnFNO p:last-child {
    margin-bottom: 0;
}
.dynamicContent--WnFNO ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--WnFNO ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--WnFNO ul li {
    margin-bottom: 10px;
}
.dynamicContent--WnFNO ol li {
    margin-bottom: 5px;
}
.dynamicContent--WnFNO ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--WnFNO ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--WnFNO 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--z16s3 {
    position: relative;
    height: 100%;
}
.currentSelected--YQi_6 {
    position: relative;
    display: inline-block;
    outline: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
}
.currentSelected--YQi_6::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    right: 1px;
    top: 50%;
    margin-top: -9px;
    border: solid rgb(var(--outline-interactive));
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease-in-out;
}
.open--otQ38 .currentSelected--YQi_6::after {
    transform: rotate(225deg);
    margin-top: -4px;
}
.selectedLabel--CErSq {
    color: rgb(var(--outline-interactive));
    padding-right: 20px;
    display: inline-block;
}
.option--ILshs {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
    color: rgb(var(--outline-secondary));
    outline: 0;
    width: 100%;
    padding: 0 15px;
    text-align: left;
    box-sizing: border-box;
    margin: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    height: 45px;
    display: flex;
    align-items: center;
}
.selected--GjkzM {
    background-color: rgb(var(--surface-interactive));
}
.optionsContainer--wBkMD {
    background: rgb(var(--background-secondary));
    box-shadow: 0 5px 10px rgba(var(--outline-primary), 0.2);
    border: 1px solid rgb(var(--outline-slight));
    border-radius: 15px;
    position: absolute;
    top: 28px;
    right: -17px;
    z-index: 1;
    box-sizing: border-box;
    padding: 10px 0;
    width: 220px;
}
.optionsContainer--wBkMD::after {
    content: '';
    position: absolute;
    bottom: calc(100% - 3px);
    right: 32px;
    height: 7px;
    width: 7px;
    background: rgb(var(--background-secondary));
    transform: translateX(-50%) rotate(45deg);
    border-top: 1px solid rgb(var(--outline-slight));
    border-left: 1px solid rgb(var(--outline-slight));
}
@media (hover: hover) {
    .selectedLabel--CErSq: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%;
    }

    .option--ILshs:hover {
        background: rgb(var(--surface-hover));
    }

    .selected--GjkzM:hover {
        background-color: rgb(var(--surface-interactive));
    }
}

.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--xWlgK, .h1--UjP5F, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--xWlgK, .h1--UjP5F, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--syoMn, .h2--g7_YX, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--syoMn, .h2--g7_YX, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--b4OTY, .h3--FoIYf, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--iwfhd, .h4--KXe4E {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--iwfhd, .h4--KXe4E {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--uGDrQ, .h5--_RkN8, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--OW1_e, .h6--M0iEh {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--OW1_e, .h6--M0iEh {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--Qfyuy {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--Qfyuy {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--Qfyuy b, .body-primary--Qfyuy strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--Qfyuy b, .body-primary--Qfyuy strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--HEy5O {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--HEy5O {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--HEy5O b, .body-secondary--HEy5O strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--HEy5O b, .body-secondary--HEy5O strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--sqCfz, .dynamicContent--Yh936 a, .dynamicContent--Yh936 p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--sqCfz b, .body-large--sqCfz strong, .body-large-bold--Tfihu, .dynamicContent--Yh936 a b, .dynamicContent--Yh936 a strong, .dynamicContent--Yh936 p b, .dynamicContent--Yh936 p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--iZKrK {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--iZKrK b, .body-medium--iZKrK strong, .body-medium-bold--eztCo {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--UQs_I {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--UQs_I b, .body-small--UQs_I strong, .body-small-bold--yIh5U {
    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--Yh936 h3 {
    margin-bottom: 10px;
}
.dynamicContent--Yh936 h2 {
    margin-bottom: 25px;
}
.dynamicContent--Yh936 a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--Yh936 a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--Yh936 ol, .dynamicContent--Yh936 ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--Yh936 ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--Yh936 p {
    margin: 0 0 20px 0;
}
.dynamicContent--Yh936 p:last-child {
    margin-bottom: 0;
}
.dynamicContent--Yh936 ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--Yh936 ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--Yh936 ul li {
    margin-bottom: 10px;
}
.dynamicContent--Yh936 ol li {
    margin-bottom: 5px;
}
.dynamicContent--Yh936 ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--Yh936 ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--Yh936 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--RLAaA::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    right: 1px;
    top: 50%;
    margin-top: -9px;
    border: solid rgb(var(--outline-interactive));
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.2s ease-in-out;
}
.root--RLAaA {
    position: relative;
    display: inline-block;
    outline: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
}
.selectedLabel--mgZUu {
    color: rgb(var(--outline-interactive));
    padding-right: 20px;
    display: inline-block;
}
.nativeSelect--i5FNZ {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    outline: none;
    color: rgb(var(--outline-interactive));
    padding-right: 20px;
    display: inline-block;
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
    border: none;
    background: none;
    margin-left: 5px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
}
.removeOpacity--kCmEo {
    opacity: 1;
}
.addOpacity--ylbQm {
    opacity: 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--Bn3aG, .h1--MFYxf, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--Bn3aG, .h1--MFYxf, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--GzD88, .h2--OyEAn, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--GzD88, .h2--OyEAn, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--_s6Up, .h3--ibJy4, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--crqYT, .h4--TShlS {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--crqYT, .h4--TShlS {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--aANiB, .h5--QvsK3, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--DE7Q2, .h6--cU_A4 {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--DE7Q2, .h6--cU_A4 {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--dKkYp {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--dKkYp {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--dKkYp b, .body-primary--dKkYp strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--dKkYp b, .body-primary--dKkYp strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--Lxxo8 {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--Lxxo8 {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--Lxxo8 b, .body-secondary--Lxxo8 strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--Lxxo8 b, .body-secondary--Lxxo8 strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--Uhhku, .dynamicContent--G330U a, .dynamicContent--G330U p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--Uhhku b, .body-large--Uhhku strong, .body-large-bold--gJKcd, .dynamicContent--G330U a b, .dynamicContent--G330U a strong, .dynamicContent--G330U p b, .dynamicContent--G330U p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--pr9Ho {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--pr9Ho b, .body-medium--pr9Ho strong, .body-medium-bold--c3yvQ {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--cY6GM {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--cY6GM b, .body-small--cY6GM strong, .body-small-bold--zPrmd {
    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--G330U h3 {
    margin-bottom: 10px;
}
.dynamicContent--G330U h2 {
    margin-bottom: 25px;
}
.dynamicContent--G330U a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--G330U a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--G330U ol, .dynamicContent--G330U ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--G330U ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--G330U p {
    margin: 0 0 20px 0;
}
.dynamicContent--G330U p:last-child {
    margin-bottom: 0;
}
.dynamicContent--G330U ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--G330U ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--G330U ul li {
    margin-bottom: 10px;
}
.dynamicContent--G330U ol li {
    margin-bottom: 5px;
}
.dynamicContent--G330U ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--G330U ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--G330U 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--pJF4h {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
    color: rgb(var(--outline-secondary));
    outline: 0;
    cursor: pointer;
    text-align: right;
    padding: 2px 0;
    position: relative;
    right: 1px;
}

.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;
}
.interface-heading-one--Js3zl {
    font: bold 21px/25px Graphik;
    font: var(--interface-heading-one-mobile);
}
@media (min-width: 760px) {
.interface-heading-one--Js3zl {
        font: bold 24px/30px Graphik;
        font: var(--interface-heading-one-desktop);
}
    }
.interface-primary--GyNF6, .caption--ry0jC {
    font: 17px/25px Graphik;
    font: var(--interface-primary);
}
.interface-secondary--gA6kL {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
}
.interface-error--MK9NG {
    font: 13px/15px Graphik;
    font: var(--interface-error-mobile);
}
@media (min-width: 760px) {
.interface-error--MK9NG {
        font: 15px/20px Graphik;
        font: var(--interface-error-desktop);
}
    }
.interface-caption--KB44u {
    font: 15px/20px Graphik;
    font: var(--interface-caption);
}
.interface-heading--Gj9Nz {
    font: var(--interface-heading-mobile);
}
@media (min-width: 760px) {
.interface-heading--Gj9Nz {
        font: var(--interface-heading);
}
    }
.control--HuW2n {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}
.control--HuW2n[data-disabled='true'] {
    cursor: inherit;
}
.control--HuW2n[data-nomargin='true'] {
    margin-bottom: 0;
}
.input--vbaz5 {
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
}
.toggler--BUuHm {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 21px;
    height: 21px;
    border-radius: 5px;
    background: rgb(var(--background-secondary));
    border: 1px solid rgb(var(--outline-faint));
    margin-right: 10px;
}
/* Синхронизируем скорость смены цветов у всех классов */
.caption--ry0jC, .toggler--BUuHm, .check--ESwg9 {
    transition: all 0.2s ease;
}
.control--HuW2n[data-disabled='true'] .toggler--BUuHm {
    border-color: rgba(var(--outline-primary), var(--opacity-border-disabled));
    background: var(--surface-disabled);
}
.check--ESwg9 {
    position: absolute;
    left: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(var(--fill-interactive));
    opacity: 0;
}
.check--ESwg9[data-visible='true'] {
    opacity: 1;
}
.caption--ry0jC {
    color: rgb(var(--outline-secondary));
}
.control--HuW2n[data-disabled='true'] .caption--ry0jC {
    color: var(--outline-disabled);
}
@media (hover: hover) {
    .control--HuW2n[data-disabled='false']:hover .caption--ry0jC {
        color: rgb(var(--outline-hover));
    }

    .control--HuW2n[data-disabled='false']:hover .toggler--BUuHm {
        border-color: rgb(var(--outline-faint-hover));
    }

    .control--HuW2n[data-disabled='false']:hover .check--ESwg9 {
        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--feMqg, .h1--acajF, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--feMqg, .h1--acajF, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--sEvF_, .h2--C2WaD, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--sEvF_, .h2--C2WaD, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--bpdsS, .h3--Ft5xk, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--vR7q1, .h4--dnH8F {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--vR7q1, .h4--dnH8F {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--M4jCa, .h5--qq2Lt, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--UekCx, .h6--hL597 {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--UekCx, .h6--hL597 {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--BJfz6 {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--BJfz6 {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--BJfz6 b, .body-primary--BJfz6 strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--BJfz6 b, .body-primary--BJfz6 strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--PvIQU {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--PvIQU {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--PvIQU b, .body-secondary--PvIQU strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--PvIQU b, .body-secondary--PvIQU strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--e9hsm, .dynamicContent--pCCrl a, .dynamicContent--pCCrl p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--e9hsm b, .body-large--e9hsm strong, .body-large-bold--w5tqP, .dynamicContent--pCCrl a b, .dynamicContent--pCCrl a strong, .dynamicContent--pCCrl p b, .dynamicContent--pCCrl p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--_qa0M {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--_qa0M b, .body-medium--_qa0M strong, .body-medium-bold--CY4gw {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--KP9ki {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--KP9ki b, .body-small--KP9ki strong, .body-small-bold--v2KFL {
    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--pCCrl h3 {
    margin-bottom: 10px;
}
.dynamicContent--pCCrl h2 {
    margin-bottom: 25px;
}
.dynamicContent--pCCrl a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--pCCrl a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--pCCrl ol, .dynamicContent--pCCrl ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--pCCrl ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--pCCrl p {
    margin: 0 0 20px 0;
}
.dynamicContent--pCCrl p:last-child {
    margin-bottom: 0;
}
.dynamicContent--pCCrl ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--pCCrl ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--pCCrl ul li {
    margin-bottom: 10px;
}
.dynamicContent--pCCrl ol li {
    margin-bottom: 5px;
}
.dynamicContent--pCCrl ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--pCCrl ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--pCCrl 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--wXPL4 {
    margin-top: 40px;
    margin-bottom: 30px;
}
.filtersHeader--caPDi {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.filter--yT3p_ {
    margin-right: 42px;
}
.filter--yT3p_:last-child {
    margin-right: 0;
}
.allFilters--SFJQ0 {
    display: flex;
    align-items: center;
    margin-bottom: -10px;
}

.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--LKfmy, .h1--YuLXl, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--LKfmy, .h1--YuLXl, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--dLgjU, .h2--wru2w, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--dLgjU, .h2--wru2w, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--rQWll, .h3--hkdyl, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--eveMV, .h4--l68D7 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--eveMV, .h4--l68D7 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--mWYXj, .h5--pgaxh, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--flrrW, .h6--LHUO_ {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--flrrW, .h6--LHUO_ {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--onmxC {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--onmxC {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--onmxC b, .body-primary--onmxC strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--onmxC b, .body-primary--onmxC strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--GX7NW {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--GX7NW {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--GX7NW b, .body-secondary--GX7NW strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--GX7NW b, .body-secondary--GX7NW strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--CHZGV, .dynamicContent--i8Z1M a, .dynamicContent--i8Z1M p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--CHZGV b, .body-large--CHZGV strong, .body-large-bold--BN6kw, .dynamicContent--i8Z1M a b, .dynamicContent--i8Z1M a strong, .dynamicContent--i8Z1M p b, .dynamicContent--i8Z1M p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--ft_k9 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--ft_k9 b, .body-medium--ft_k9 strong, .body-medium-bold--jPafN {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--WdDBU {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--WdDBU b, .body-small--WdDBU strong, .body-small-bold--pOqDS {
    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--i8Z1M h3 {
    margin-bottom: 10px;
}
.dynamicContent--i8Z1M h2 {
    margin-bottom: 25px;
}
.dynamicContent--i8Z1M a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--i8Z1M a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--i8Z1M ol, .dynamicContent--i8Z1M ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--i8Z1M ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--i8Z1M p {
    margin: 0 0 20px 0;
}
.dynamicContent--i8Z1M p:last-child {
    margin-bottom: 0;
}
.dynamicContent--i8Z1M ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--i8Z1M ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--i8Z1M ul li {
    margin-bottom: 10px;
}
.dynamicContent--i8Z1M ol li {
    margin-bottom: 5px;
}
.dynamicContent--i8Z1M ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--i8Z1M ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--i8Z1M 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--Reklx {
    margin-top: 40px;
    margin-bottom: 30px;
}
.filtersHeader--ppeyU {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.filterName--TiLXh {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
    color: rgb(var(--outline-interactive));
    background-image: linear-gradient(
        to right,
        rgb(var(--outline-interactive), var(--opacity-link-border)) 5px,
        transparent 4px
    );
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: calc(5px + 4px) 1px;
    cursor: pointer;
}
.allFilters--vnExD {
    margin-top: 20px;
    margin-bottom: -10px;
}
@media (hover: hover) {
    .filterName--TiLXh:hover {
        background-image: linear-gradient(
            to right,
            rgba(var(--outline-interactive), var(--opacity-link-border-hover)) 5px,
            transparent 4px
        );
    }
}

.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--_MPGd, .h1--AsdSW, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--_MPGd, .h1--AsdSW, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--JTNwX, .h2--RpVSV, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--JTNwX, .h2--RpVSV, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--ZMF25, .h3--B7JcR, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--jghHT, .h4--uQ1CP {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--jghHT, .h4--uQ1CP {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--SPBLJ, .h5--gA5Jf, h5, .noData--ThSHz {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--WBhY0, .h6--O_48t {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--WBhY0, .h6--O_48t {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--iEl60 {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--iEl60 {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--iEl60 b, .body-primary--iEl60 strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--iEl60 b, .body-primary--iEl60 strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--Qwm_A {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--Qwm_A {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--Qwm_A b, .body-secondary--Qwm_A strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--Qwm_A b, .body-secondary--Qwm_A strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--NtP0_, .dynamicContent--ExecG a, .dynamicContent--ExecG p, .lastUpdated--LbVJT {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--NtP0_ b, .body-large--NtP0_ strong, .body-large-bold--vnwll, .dynamicContent--ExecG a b, .dynamicContent--ExecG a strong, .dynamicContent--ExecG p b, .dynamicContent--ExecG p strong, .lastUpdated--LbVJT b, .lastUpdated--LbVJT strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--GAbub {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--GAbub b, .body-medium--GAbub strong, .body-medium-bold--gBhtL {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--DlVFR {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--DlVFR b, .body-small--DlVFR strong, .body-small-bold--muTQw {
    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--ExecG h3 {
    margin-bottom: 10px;
}
.dynamicContent--ExecG h2 {
    margin-bottom: 25px;
}
.dynamicContent--ExecG a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--ExecG a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--ExecG ol, .dynamicContent--ExecG ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--ExecG ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--ExecG p {
    margin: 0 0 20px 0;
}
.dynamicContent--ExecG p:last-child {
    margin-bottom: 0;
}
.dynamicContent--ExecG ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--ExecG ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--ExecG ul li {
    margin-bottom: 10px;
}
.dynamicContent--ExecG ol li {
    margin-bottom: 5px;
}
.dynamicContent--ExecG ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--ExecG ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--ExecG 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--IWaN_ {
    margin-top: 40px;
}
.courses--WTTAQ {
    display: block;
    margin: 0 20px;
}
@media (min-width: 760px) {
.courses--WTTAQ {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        margin: initial;
        margin-bottom: -20px;
}
    }
.hide--xzJ4b {
    display: none;
}
.courseItem--p5M_M {
    width: 100%;
    margin-bottom: 15px;
}
@media (min-width: 760px) {
.courseItem--p5M_M {
        width: calc(50% - 10px);
        margin-bottom: 20px;
}
    }
@media (min-width: 760px) {
.courseItem--p5M_M:nth-child(odd) {
        margin-right: 20px;
}
    }
.courseItem--p5M_M:last-child {
    margin-bottom: 0;
}
@media (min-width: 760px) {
.courseItem--p5M_M:last-child {
        margin-bottom: 20px;
}
    }
.noData--ThSHz {
    margin-top: 60px;
    color: rgb(var(--outline-secondary));
    margin-bottom: 60px;
}
.lastUpdated--LbVJT {
    color: rgb(var(--outline-placeholder));
    margin-top: 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--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--DEIQA, .h1--ku1kY, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--DEIQA, .h1--ku1kY, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--L3Zxd, .h2--bWcpz, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--L3Zxd, .h2--bWcpz, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--zNuBL, .h3--a8z4V, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--K_Et5, .h4--pMJil {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--K_Et5, .h4--pMJil {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--boPUg, .h5--FEhns, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--nZBna, .h6--EbJEZ {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--nZBna, .h6--EbJEZ {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--l9N_v {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--l9N_v {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--l9N_v b, .body-primary--l9N_v strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--l9N_v b, .body-primary--l9N_v strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--bcpe7 {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--bcpe7 {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--bcpe7 b, .body-secondary--bcpe7 strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--bcpe7 b, .body-secondary--bcpe7 strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--gS3hR, .dynamicContent--eQa90 a, .dynamicContent--eQa90 p, .showOptionalDesc--_LouJ {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--gS3hR b, .body-large--gS3hR strong, .body-large-bold--gSy6o, .dynamicContent--eQa90 a b, .dynamicContent--eQa90 a strong, .dynamicContent--eQa90 p b, .dynamicContent--eQa90 p strong, .showOptionalDesc--_LouJ b, .showOptionalDesc--_LouJ strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--jteo5 {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--jteo5 b, .body-medium--jteo5 strong, .body-medium-bold--HWoDI {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--kUxiG {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--kUxiG b, .body-small--kUxiG strong, .body-small-bold--gjioN {
    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--eQa90 h3 {
    margin-bottom: 10px;
}
.dynamicContent--eQa90 h2 {
    margin-bottom: 25px;
}
.dynamicContent--eQa90 a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--eQa90 a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--eQa90 ol, .dynamicContent--eQa90 ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--eQa90 ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--eQa90 p {
    margin: 0 0 20px 0;
}
.dynamicContent--eQa90 p:last-child {
    margin-bottom: 0;
}
.dynamicContent--eQa90 ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--eQa90 ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--eQa90 ul li {
    margin-bottom: 10px;
}
.dynamicContent--eQa90 ol li {
    margin-bottom: 5px;
}
.dynamicContent--eQa90 ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--eQa90 ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--eQa90 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--CqfgT {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    justify-content: space-between;
}
.logo--fUbfE {
    max-width: 100%;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(var(--outline-slight));
}
@media (min-width: 760px) {
.logo--fUbfE {
        width: 75px;
        height: 75px;
        border-radius: 75px;
}
    }
.schoolLinks--Dq3Ru {
    margin-top: 5px;
    display: flex;
}
.schoolLinks--Dq3Ru a {
    padding-bottom: 0;
}
.schoolCoursesLabel--QsXze {
    cursor: pointer;
    color: rgb(var(--outline-interactive));
    margin-left: 35px;
}
.schoolUrlLabel--wRStB {
    position: relative;
}
.schoolDesc--2p_ud {
    font: 17px/25px Graphik;
    font: var(--body-secondary-desktop);
    color: rgb(var(--outline-secondary));
    margin-bottom: 50px;
    max-width: 665px;
    width: 100%;
}
.optionalDesc--xln5c {
    margin-top: 20px;
}
.showOptionalDesc--_LouJ {
    color: rgb(var(--outline-placeholder));
    position: relative;
    cursor: pointer;
    background-image: linear-gradient(
        to right,
        rgb(var(--outline-placeholder), var(--opacity-link-border)) 5px,
        transparent 4px
    );
    background-repeat: repeat-x;
    background-position: 0 100%;

    /* calc(5px + 4px) это отступы между линиями, 1px это высота (в данном случи это будет как border-bottom выглядеть) */
    background-size: calc(5px + 4px) 1px;
    display: inline-block;
    margin-top: 5px;
}
.coursesHeaderTitle--p8Pvz {
    margin-top: 50px;
    margin-bottom: -15px;
}
@media (hover: hover) {
    .schoolCoursesLabel--QsXze: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%;
    }

    .showOptionalDesc--_LouJ:hover {
        color: rgb(var(--outline-hover));
        background-image: linear-gradient(
            to right,
            rgb(var(--outline-hover), var(--opacity-link-border)) 5px,
            transparent 4px
        );
    }
}

.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--Y2KsB, .h1--l80CK, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--Y2KsB, .h1--l80CK, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--xtbZw, .h2--jKWXa, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--xtbZw, .h2--jKWXa, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--fQWEB, .h3--qI3WA, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--uapPg, .h4--PfSpP {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--uapPg, .h4--PfSpP {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--E6obT, .h5--CGR9t, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--T_YWM, .h6--EHlBA {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--T_YWM, .h6--EHlBA {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--RBhQD {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--RBhQD {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--RBhQD b, .body-primary--RBhQD strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--RBhQD b, .body-primary--RBhQD strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--hmNKm {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--hmNKm {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--hmNKm b, .body-secondary--hmNKm strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--hmNKm b, .body-secondary--hmNKm strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--XS_Al, .dynamicContent--tVrCZ a, .dynamicContent--tVrCZ p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--XS_Al b, .body-large--XS_Al strong, .body-large-bold--KlCkO, .dynamicContent--tVrCZ a b, .dynamicContent--tVrCZ a strong, .dynamicContent--tVrCZ p b, .dynamicContent--tVrCZ p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--PUOit, .maxRatingTxt--MSfbi {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--PUOit b, .body-medium--PUOit strong, .body-medium-bold--vNPaN, .maxRatingTxt--MSfbi b, .maxRatingTxt--MSfbi strong {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--QOHY2 {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--QOHY2 b, .body-small--QOHY2 strong, .body-small-bold--ItprF {
    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--tVrCZ h3 {
    margin-bottom: 10px;
}
.dynamicContent--tVrCZ h2 {
    margin-bottom: 25px;
}
.dynamicContent--tVrCZ a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--tVrCZ a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--tVrCZ ol, .dynamicContent--tVrCZ ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--tVrCZ ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--tVrCZ p {
    margin: 0 0 20px 0;
}
.dynamicContent--tVrCZ p:last-child {
    margin-bottom: 0;
}
.dynamicContent--tVrCZ ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--tVrCZ ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--tVrCZ ul li {
    margin-bottom: 10px;
}
.dynamicContent--tVrCZ ol li {
    margin-bottom: 5px;
}
.dynamicContent--tVrCZ ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--tVrCZ ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--tVrCZ 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--ItoH2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 11px;
}
.ratingContainer--eS7vR {
    display: flex;
}
.totalRating--ZIpzS {
    font: 45px/50px Graphik;
    font: var(--accent-number);
    text-align: center;
    width: 65px;
    margin-right: 16px;
}
@media (min-width: 760px) {
.totalRating--ZIpzS {
        margin-right: 31px;
}
    }
.totalTestimonials--gAjAr {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.stars--cxzyp {
    text-align: right;
    margin-top: -5px;
}
.starsContainer--i_BKe {
    width: 100%;
    top: 13px;
    position: relative;
}

.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--wJRpF, .h1--cbimL, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--wJRpF, .h1--cbimL, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--qFSup, .h2--UtMrp, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--qFSup, .h2--UtMrp, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--MXJXn, .h3--QTxcm, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--XeQNO, .h4--Nh2lE {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--XeQNO, .h4--Nh2lE {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--TqTq_, .h5--Eh_Ln, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--rANqP, .h6--uTyEx {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--rANqP, .h6--uTyEx {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--TDIE4 {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--TDIE4 {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--TDIE4 b, .body-primary--TDIE4 strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--TDIE4 b, .body-primary--TDIE4 strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--mUZhB {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--mUZhB {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--mUZhB b, .body-secondary--mUZhB strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--mUZhB b, .body-secondary--mUZhB strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--Misov, .dynamicContent--PWZu1 a, .dynamicContent--PWZu1 p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--Misov b, .body-large--Misov strong, .body-large-bold--ES6iO, .dynamicContent--PWZu1 a b, .dynamicContent--PWZu1 a strong, .dynamicContent--PWZu1 p b, .dynamicContent--PWZu1 p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--MxVIZ {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--MxVIZ b, .body-medium--MxVIZ strong, .body-medium-bold--mB_2v {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--fmjcI {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--fmjcI b, .body-small--fmjcI strong, .body-small-bold--xFt0G {
    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--PWZu1 h3 {
    margin-bottom: 10px;
}
.dynamicContent--PWZu1 h2 {
    margin-bottom: 25px;
}
.dynamicContent--PWZu1 a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--PWZu1 a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--PWZu1 ol, .dynamicContent--PWZu1 ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--PWZu1 ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--PWZu1 p {
    margin: 0 0 20px 0;
}
.dynamicContent--PWZu1 p:last-child {
    margin-bottom: 0;
}
.dynamicContent--PWZu1 ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--PWZu1 ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--PWZu1 ul li {
    margin-bottom: 10px;
}
.dynamicContent--PWZu1 ol li {
    margin-bottom: 5px;
}
.dynamicContent--PWZu1 ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--PWZu1 ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--PWZu1 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--_STae {
    display: flex;
    margin-bottom: 5px;
    height: 7px;
}
.starCount--dT54W {
    margin-top: -13px;
    flex: 50px 0;
}
.ratingCount--eIy6L {
    width: 100%;
    flex: 1;
}
.star--FLFua {
    width: 10px;
    height: 8px;
}
.progressBar--ARTm_ {
    background: rgb(var(--outline-slight));
    border-radius: 5px;
    height: 3px;
    margin-left: 11px;
    position: relative;
}
.progressBar--ARTm_::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--filled-width);
    height: 3px;
    border-radius: 5px;
    background: var(--themis-rating-color);
    -webkit-animation: progressBarMoveAnimation--pOhWE 0.5s;
            animation: progressBarMoveAnimation--pOhWE 0.5s;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 0;
}
@-webkit-keyframes progressBarMoveAnimation--pOhWE {
    from {
        width: 0;
        opacity: 0;
        background: var(--outline-slight);
    }

    to {
        width: var(--filled-width);
        background: var(--themis-rating-color);
        opacity: 1;
    }
}
@keyframes progressBarMoveAnimation--pOhWE {
    from {
        width: 0;
        opacity: 0;
        background: var(--outline-slight);
    }

    to {
        width: var(--filled-width);
        background: var(--themis-rating-color);
        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--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--EPm1z, .h1--UAH3X, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--EPm1z, .h1--UAH3X, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--p7qWq, .h2--I3QN3, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--p7qWq, .h2--I3QN3, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--yXaGI, .h3--B7zHV, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--FNCJL, .h4--s4ST_ {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--FNCJL, .h4--s4ST_ {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--N8f0z, .h5--KCt9l, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--eui2m, .h6--hpe0g {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--eui2m, .h6--hpe0g {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--EF7MY {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--EF7MY {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--EF7MY b, .body-primary--EF7MY strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--EF7MY b, .body-primary--EF7MY strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--LR7Mj {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--LR7Mj {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--LR7Mj b, .body-secondary--LR7Mj strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--LR7Mj b, .body-secondary--LR7Mj strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--DvZTN, .dynamicContent--HDHwt a, .dynamicContent--HDHwt p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--DvZTN b, .body-large--DvZTN strong, .body-large-bold--YsyS6, .dynamicContent--HDHwt a b, .dynamicContent--HDHwt a strong, .dynamicContent--HDHwt p b, .dynamicContent--HDHwt p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--WfBna, .courseTitle--LgFC6, .date--ego3w {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--WfBna b, .body-medium--WfBna strong, .body-medium-bold--ecRkg, .courseTitle--LgFC6 b, .courseTitle--LgFC6 strong, .date--ego3w b, .date--ego3w strong {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--I6THt {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--I6THt b, .body-small--I6THt strong, .body-small-bold--mdvM4 {
    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--HDHwt h3 {
    margin-bottom: 10px;
}
.dynamicContent--HDHwt h2 {
    margin-bottom: 25px;
}
.dynamicContent--HDHwt a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--HDHwt a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--HDHwt ol, .dynamicContent--HDHwt ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--HDHwt ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--HDHwt p {
    margin: 0 0 20px 0;
}
.dynamicContent--HDHwt p:last-child {
    margin-bottom: 0;
}
.dynamicContent--HDHwt ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--HDHwt ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--HDHwt ul li {
    margin-bottom: 10px;
}
.dynamicContent--HDHwt ol li {
    margin-bottom: 5px;
}
.dynamicContent--HDHwt ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--HDHwt ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--HDHwt 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--JOz8F {
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
}
@media (min-width: 760px) {
.root--JOz8F {
        margin-bottom: 20px;
        padding: 25px 30px 30px;
}
    }
.root--JOz8F:last-child {
    margin-bottom: 0;
}
.testimonialTitle--E0ftt {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
    margin-bottom: 10px;
}
@media (min-width: 760px) {
.testimonialTitle--E0ftt {
        margin-bottom: 15px;
}
    }
.testimonialDesc--s6ptH {
    height: 300px;
    overflow: hidden;
}
@media (min-width: 760px) {
.testimonialDesc--s6ptH {
        height: 150px;
}
    }
.header--N2FDp {
    margin-bottom: 20px;
}
@media (min-width: 760px) {
.header--N2FDp {
        margin-bottom: 25px;
}
    }
.courseTitle--LgFC6 {
    color: rgb(var(--outline-placeholder));
    margin-top: 10px;
}
.star--MJWDi {
    width: 17.6px;
    height: 15.73px;
    margin-right: 7.98px;
}
.moreIcon--bGrm5 {
    margin-top: 5px;
    height: 20px;
}
.footer--gkc9U {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    align-items: center;
}
@media (min-width: 760px) {
.footer--gkc9U {
        margin-top: 30px;
}
    }
.date--ego3w {
    color: rgb(var(--outline-placeholder));
}
.testimonialLink--zgN2J {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.authorLink--Pbdot {
    z-index: 1;
}
.block--HMisa {
    margin-bottom: 25px;
}
.block--HMisa:last-child {
    margin-bottom: 0;
}
/* всё элементы под классом content это поле редактора из админке */
.content--tbkyT h3 {
    margin-bottom: 5px;
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.content--tbkyT p {
    margin: 0 0 25px 0;
}
@media (hover: hover) {
    .root--JOz8F:hover {
        border: 1px solid rgb(var(--outline-slight-hover));
    }

    .root--JOz8F:hover .moreIcon--bGrm5 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--Iw2kJ, .h1--n8QzR, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--Iw2kJ, .h1--n8QzR, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--z5Sfu, .h2--K9yET, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--z5Sfu, .h2--K9yET, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--M8AeS, .h3--NjB_1, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--ay84d, .h4--QX5i5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--ay84d, .h4--QX5i5 {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--srAdl, .h5--mpdY5, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--e_os0, .h6--EEbdv {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--e_os0, .h6--EEbdv {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--ZB_3m {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--ZB_3m {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--ZB_3m b, .body-primary--ZB_3m strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--ZB_3m b, .body-primary--ZB_3m strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--LHFVf {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--LHFVf {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--LHFVf b, .body-secondary--LHFVf strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--LHFVf b, .body-secondary--LHFVf strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--atBBG, .dynamicContent--WgWN6 a, .dynamicContent--WgWN6 p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--atBBG b, .body-large--atBBG strong, .body-large-bold--ZFw59, .dynamicContent--WgWN6 a b, .dynamicContent--WgWN6 a strong, .dynamicContent--WgWN6 p b, .dynamicContent--WgWN6 p strong, .noTestimonial--N4r09 {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--nvAsz {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--nvAsz b, .body-medium--nvAsz strong, .body-medium-bold--WFo7Y {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--Qv3kx {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--Qv3kx b, .body-small--Qv3kx strong, .body-small-bold--Q6D1_ {
    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--WgWN6 h3 {
    margin-bottom: 10px;
}
.dynamicContent--WgWN6 h2 {
    margin-bottom: 25px;
}
.dynamicContent--WgWN6 a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--WgWN6 a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--WgWN6 ol, .dynamicContent--WgWN6 ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--WgWN6 ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--WgWN6 p {
    margin: 0 0 20px 0;
}
.dynamicContent--WgWN6 p:last-child {
    margin-bottom: 0;
}
.dynamicContent--WgWN6 ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--WgWN6 ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--WgWN6 ul li {
    margin-bottom: 10px;
}
.dynamicContent--WgWN6 ol li {
    margin-bottom: 5px;
}
.dynamicContent--WgWN6 ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--WgWN6 ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--WgWN6 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--rXPGJ {
    margin-top: 30px;
}
@media (min-width: 760px) {
.root--rXPGJ {
        margin-top: 40px;
}
    }
.header--E7Sbo {
    margin-bottom: 20px;
}
.noTestimonial--N4r09 {
    margin-top: 50px;
    margin-bottom: 50px;
    color: rgb(var(--outline-secondary));
}

.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--snXRV, .h1--lGhNB, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--snXRV, .h1--lGhNB, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--yP7KQ, .h2--PV3Tj, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--yP7KQ, .h2--PV3Tj, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--y0IUW, .h3--rhnLs, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--W62CX, .h4--gRq4I {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--W62CX, .h4--gRq4I {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--Xl2hU, .h5--cWFlI, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--vreQs, .h6--hnxnB {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--vreQs, .h6--hnxnB {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--scM7Q {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--scM7Q {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--scM7Q b, .body-primary--scM7Q strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--scM7Q b, .body-primary--scM7Q strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--alW5p {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--alW5p {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--alW5p b, .body-secondary--alW5p strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--alW5p b, .body-secondary--alW5p strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--qzeIK, .dynamicContent--Diebl a, .dynamicContent--Diebl p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--qzeIK b, .body-large--qzeIK strong, .body-large-bold--qYN18, .dynamicContent--Diebl a b, .dynamicContent--Diebl a strong, .dynamicContent--Diebl p b, .dynamicContent--Diebl p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--r3eKy {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--r3eKy b, .body-medium--r3eKy strong, .body-medium-bold--AIt3f {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--IBF3U {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--IBF3U b, .body-small--IBF3U strong, .body-small-bold--khWNW {
    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--Diebl h3 {
    margin-bottom: 10px;
}
.dynamicContent--Diebl h2 {
    margin-bottom: 25px;
}
.dynamicContent--Diebl a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--Diebl a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--Diebl ol, .dynamicContent--Diebl ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--Diebl ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--Diebl p {
    margin: 0 0 20px 0;
}
.dynamicContent--Diebl p:last-child {
    margin-bottom: 0;
}
.dynamicContent--Diebl ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--Diebl ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--Diebl ul li {
    margin-bottom: 10px;
}
.dynamicContent--Diebl ol li {
    margin-bottom: 5px;
}
.dynamicContent--Diebl ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--Diebl ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--Diebl 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--iTKtH {
    display: flex;
    justify-content: space-between;
}
.search--tqjzx {
    max-width: 490px;
    width: 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--NYbNj, .h1--HGn_u, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--NYbNj, .h1--HGn_u, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--fXnV1, .h2--KU4k7, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--fXnV1, .h2--KU4k7, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--A0oeC, .h3--xTuEh, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--fHmc_, .h4--w0VLi {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--fHmc_, .h4--w0VLi {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--t7prw, .h5--OsXsm, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--S4UCy, .h6--izInH {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--S4UCy, .h6--izInH {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--j76IT {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--j76IT {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--j76IT b, .body-primary--j76IT strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--j76IT b, .body-primary--j76IT strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--h4y4_ {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--h4y4_ {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--h4y4_ b, .body-secondary--h4y4_ strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--h4y4_ b, .body-secondary--h4y4_ strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--lgzzG, .dynamicContent--aohdB a, .dynamicContent--aohdB p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--lgzzG b, .body-large--lgzzG strong, .body-large-bold--lBHrE, .dynamicContent--aohdB a b, .dynamicContent--aohdB a strong, .dynamicContent--aohdB p b, .dynamicContent--aohdB p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--zOEn_ {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--zOEn_ b, .body-medium--zOEn_ strong, .body-medium-bold--NXLMp {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--GdWWH {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--GdWWH b, .body-small--GdWWH strong, .body-small-bold--Eu5Jy {
    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--aohdB h3 {
    margin-bottom: 10px;
}
.dynamicContent--aohdB h2 {
    margin-bottom: 25px;
}
.dynamicContent--aohdB a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--aohdB a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--aohdB ol, .dynamicContent--aohdB ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--aohdB ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--aohdB p {
    margin: 0 0 20px 0;
}
.dynamicContent--aohdB p:last-child {
    margin-bottom: 0;
}
.dynamicContent--aohdB ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--aohdB ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--aohdB ul li {
    margin-bottom: 10px;
}
.dynamicContent--aohdB ol li {
    margin-bottom: 5px;
}
.dynamicContent--aohdB ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--aohdB ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--aohdB 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--VRkkw {
    position: relative;
}
.input--eNq8N {
    color: rgb(var(--outline-primary));
    box-sizing: border-box;
    width: 100%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
    height: 25px;
    padding: 0 20px 0 0;
    border: none;
    outline: 0;
    -webkit-user-select: auto;
       -moz-user-select: auto;
            user-select: auto;
    border-bottom: 1px solid rgb(var(--outline-0));
    border-bottom: 1px solid rgb(var(--outline-initial));
}
.root--VRkkw.withoutBgStyles--i1LY4 .input--eNq8N {
    background: none;
}
.root--VRkkw::after {
    content: '';
    width: 35px;
    height: 23px;
    right: 0;
    top: 0;
    background: linear-gradient(
        to right,
        rgba(var(--surface-primary), 0) 0,
        rgb(var(--surface-primary)) 40%,
        rgb(var(--surface-primary)) 70%
    );
    z-index: 0;
    position: absolute;
}
.root--VRkkw.withoutBgStyles--i1LY4::after {
    content: normal;
    content: initial;
}
input::-webkit-input-placeholder, input::-moz-placeholder, input:-ms-input-placeholder {
    color: rgb(var(--outline-placeholder));
}
.input--eNq8N:focus + .border--e53t_ {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: 0;
    background: rgb(var(--outline-focus));
}
.searchIconContainer--P_m9H {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.closeIconContainer--b8lAt {
    position: absolute;
    right: 0;
    bottom: -4px;
    fill: none;
    cursor: pointer;
    z-index: 1;
}
.closeIconContainer--b8lAt path {
    stroke: rgb(var(--fill-interactive));
}
.searchIconContainer--P_m9H path {
    fill: rgb(var(--outline-placeholder));
}
@media (hover: hover) {
    .input--eNq8N:hover {
        border-color: rgb(var(--outline-hover));
    }

    .input--eNq8N:focus:hover + .border--e53t_ {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        bottom: 0;
        background: rgb(var(--outline-focus));
    }

    .closeIconContainer--b8lAt:hover svg path {
        stroke: 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--RkLMA, .h1--jHqat, h1 {
    font: bold 28px/30px Graphik;
    font: var(--heading-one-mobile);
}
@media (min-width: 760px) {
.heading-one--RkLMA, .h1--jHqat, h1 {
        font: bold 38px/45px Graphik;
        font: var(--heading-one-desktop);
}
    }
.heading-two--fuSIe, .h2--KilJl, h2 {
    font: bold 24px/30px Graphik;
    font: var(--heading-two-mobile);
}
@media (min-width: 760px) {
.heading-two--fuSIe, .h2--KilJl, h2 {
        font: bold 28px/35px Graphik;
        font: var(--heading-two-desktop);
}
    }
.heading-three--zsPkk, .h3--FwChY, h3 {
    font: bold 21px/25px Graphik;
    font: var(--heading-three);
}
.heading-four--4jCDN, .h4--F0uwK {
    font: bold 17px/20px Graphik;
    font: var(--heading-four-mobile);
}
@media (min-width: 760px) {
.heading-four--4jCDN, .h4--F0uwK {
        font: bold 21px/25px Graphik;
        font: var(--heading-four-desktop);
}
    }
.heading-five--O0oA6, .h5--d9s7o, h5 {
    font: bold 17px/20px Graphik;
    font: var(--heading-five);
}
.heading-six--zeVDy, .h6--sUMNs {
    font: bold 15px/20px Graphik;
    font: var(--heading-six-mobile);
}
@media (min-width: 760px) {
.heading-six--zeVDy, .h6--sUMNs {
        font: bold 17px/20px Graphik;
        font: var(--heading-six-desktop);
}
    }
.body-primary--dMnNE {
    font: 17px/25px Charter;
    font: var(--body-primary-mobile);
}
@media (min-width: 760px) {
.body-primary--dMnNE {
        font: 21px/30px Charter;
        font: var(--body-primary-desktop);
}
    }
.body-primary--dMnNE b, .body-primary--dMnNE strong {
    font: bold 16px/25px Graphik;
    font: var(--accent-bold-mobile);
}
@media (min-width: 760px) {
.body-primary--dMnNE b, .body-primary--dMnNE strong {
        font: bold 19px/30px Graphik;
        font: var(--accent-bold-desktop);
}
    }
.body-secondary--It8Nl {
    font: 15px/20px Graphik;
    font: var(--body-secondary-mobile);
}
@media (min-width: 760px) {
.body-secondary--It8Nl {
        font: 17px/25px Graphik;
        font: var(--body-secondary-desktop);
}
    }
.body-secondary--It8Nl b, .body-secondary--It8Nl strong {
    font: bold 15px/20px Graphik;
    font: var(--body-secondary-bold-mobile);
}
@media (min-width: 760px) {
.body-secondary--It8Nl b, .body-secondary--It8Nl strong {
        font: bold 17px/25px Graphik;
        font: var(--body-secondary-bold-desktop);
}
    }
.body-large--IZoh_, .dynamicContent--THi4D a, .dynamicContent--THi4D p {
    font: 17px/25px Graphik;
    font: var(--body-large);
}
.body-large--IZoh_ b, .body-large--IZoh_ strong, .body-large-bold--z_MZw, .dynamicContent--THi4D a b, .dynamicContent--THi4D a strong, .dynamicContent--THi4D p b, .dynamicContent--THi4D p strong {
    font: bold 17px/25px Graphik;
    font: var(--body-large-bold);
}
.body-medium--XQMma {
    font: 15px/20px Graphik;
    font: var(--body-medium);
}
.body-medium--XQMma b, .body-medium--XQMma strong, .body-medium-bold--NZSER {
    font: bold 15px/20px Graphik;
    font: var(--body-medium-bold);
}
.body-small--krcDu {
    font: 13px/15px Graphik;
    font: var(--body-small);
}
.body-small--krcDu b, .body-small--krcDu strong, .body-small-bold--fvxSe {
    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--THi4D h3 {
    margin-bottom: 10px;
}
.dynamicContent--THi4D h2 {
    margin-bottom: 25px;
}
.dynamicContent--THi4D a {
    color: rgb(var(--outline-interactive)) !important;
}
.dynamicContent--THi4D a {

    /* это нужно потому-то из админке приходят инлайн стили */
    /* stylelint-disable */
    text-decoration: none;
    padding-bottom: 3px;
}
.dynamicContent--THi4D ol, .dynamicContent--THi4D ul {
    margin: 0;
    padding: 0;
}
.dynamicContent--THi4D ul {
    list-style: none;
    margin-top: 5px;
}
.dynamicContent--THi4D p {
    margin: 0 0 20px 0;
}
.dynamicContent--THi4D p:last-child {
    margin-bottom: 0;
}
.dynamicContent--THi4D ol {
    padding-left: 20px;
    margin-bottom: 25px;
}
.dynamicContent--THi4D ol:last-child {
    margin-bottom: 0;
}
.dynamicContent--THi4D ul li {
    margin-bottom: 10px;
}
.dynamicContent--THi4D ol li {
    margin-bottom: 5px;
}
.dynamicContent--THi4D ol li:last-child {
    margin-bottom: 0;
}
.dynamicContent--THi4D ul li:last-child {
    margin-bottom: 0;
}
/* появляется горизонтальный скорл из-за width: 100vw */
/* пока скрываю скрол */
div[data-id='footer-id'] {
    overflow-x: hidden;
}
@media (hover: hover) {
    .dynamicContent--THi4D 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--qfWhD {
    display: flex;
    justify-content: space-between;
}
.filterName--iDqdl {
    font: 17px/20px Graphik;
    font: var(--interface-secondary);
    color: rgb(var(--outline-interactive));
    background-image: linear-gradient(
        to right,
        rgb(var(--outline-interactive), var(--opacity-link-border)) 5px,
        transparent 4px
    );
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: calc(5px + 4px) 1px;
    cursor: pointer;
}
.search--L_pZm {
    margin-top: 20px;
}
@media (hover: hover) {
    .filterName--iDqdl:hover {
        background-image: linear-gradient(
            to right,
            rgba(var(--outline-interactive), var(--opacity-link-border-hover)) 5px,
            transparent 4px
        );
    }
}