#selector.page::before {
    display: none !important;
}

#selector.page.animating::before {
    display: none !important;
}

#selector.page.year-active::before {
    display: none !important;
}

#why .section-title .line span {
    display: flex;
    flex-wrap: wrap;
    width: max-content;
}

#hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-32);
    width: 100%;
    max-width: 1240px;
    overflow: visible;
    height: auto;
    margin-top: var(--space-0);
    margin-bottom: var(--space-80);
    justify-content: space-between;
}

#hero .info {
    display: flex;
    flex-direction: column;
    margin-left: var(--space-42);
}

#hero .title {
    margin-bottom: var(--space-20);
    width: 100%;
    max-width: 695px;
}

#hero .h1-extrabold {
    color: var(--primary-main);
}

#hero .subtitle {
    margin-bottom: var(--space-25);
    color: var(--primary-text-secondary);
}

#hero .about {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: max-content;
    height: 68px;
}

#hero .about span {
    color: var(--primary-text-secondary);
}

#hero .cta {
    display: flex;
    gap: var(--space-10);
    margin-bottom: var(--space-10);
    width: max-content;
}

#hero .buttons .secondary {
    width: 300px;
}

#hero .hero-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    perspective: 1200px;
}

#hero .window-mockup {
    overflow: visible;
    width: 100%;
    height: auto;
    min-width: 675px;
    max-width: 850px;
    box-shadow: var(--effect-shadow);
    transform: rotateY(-20deg);
    transition: transform 0.6s ease;
    backface-visibility: hidden;
}

#hero .mascot {
    position: absolute;
    top: var(--space-n180);
    overflow: visible;
    width: 210px;
    rotate: -3deg;
}

#fund {
    display: flex;
    flex-direction: row;
    gap: var(--space-16);
    align-items: center;
    justify-content: space-between;
    justify-self: center;
    box-sizing: border-box;
    margin-bottom: var(--space-80);
    padding: var(--space-20);
    width: 100%;
    max-width: 948px;
    color: var(--primary-text-main);
    background-color: var(--background-surface);
    border-radius: var(--radius-s);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#why .advantages {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    width: 100%;
}

#why .advantage {
    display: flex;
    flex-direction: row;
    gap: var(--space-40);
    padding: var(--space-20);
    width: 100%;
    transition: transform var(--trans-smooth), box-shadow var(--trans-smooth), border-color 0.4s ease;
}

#why .advantage.level {
    background: var(--primary-main-5);
    border: 1px solid var(--primary-main-10);
    border-radius: var(--radius-m);
}

#why .advantage.training {
    background: var(--blue-main-5);
    border: 1px solid var(--blue-main-10);
    border-radius: var(--radius-m);
}

#why .advantage.olympiads {
    background: var(--green-main-5);
    border: 1px solid var(--green-main-10);
    border-radius: var(--radius-m);
}

#why .advantage .bg-icon {
    transition: transform var(--trans-bounce);
}

#why .info {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

#why .info .h3 {
    color: var(--text-inverted);
    transition: color var(--trans-base);
}

#why .level .body-l {
    color: var(--primary-text-muted);
}

#why #chart {
    background: var(--primary-main-10);
}

#why #chart span {
    color: var(--primary-main);
}

#why .training .body-l {
    color: var(--blue-text-muted);
}

#why #list-check {
    background: var(--blue-main-10);
}

#why #list-check span {
    color: var(--blue-main);
}

#why .olympiads .body-l {
    color: var(--green-text-muted);
}

#why #trophy {
    background: var(--green-main-10);
}

#why #trophy span {
    color: var(--green-main);
}

#cheatcode {
    width: 100%;
    margin-top: var(--space-80);
    background-image: url(../../assets/webp/cheatcode-background.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    transition: background-size 0.8s ease;
}

#cheatcode img {
    width: 466px;
    height: 519px;
    transition: filter var(--trans-base);
    animation: floatMascot var(--float-duration) ease-in-out infinite;
}

#cheatcode .info {
    display: flex;
    justify-content: center;
    gap: var(--space-16);
    width: 100%;
    margin-top: var(--space-50);
    margin-bottom: var(--space-80);
}

#cheatcode .wet {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin-top: var(--space-60);
    padding: var(--space-20);
    width: 658px;
    height: max-content;
    background-color: var(--background-surface-90);
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    transition: transform var(--trans-smooth), box-shadow 0.5s ease, background-color var(--trans-base), border var(--trans-base);
    cursor: default;
}

#cheatcode .h1-extrabold {
    transition: text-shadow var(--trans-medium), color var(--trans-medium);
}

#cheatcode .wet span {
    width: 100%;
    text-align: center;
}

#cheatcode .body-l {
    color: var(--primary-text-secondary);
}

@keyframes floatMascot {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

#practice {
    margin: var(--space-80) var(--space-0);
}

#practice .card-name {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-10);
}

#practice .subtitle {
    color: var(--primary-text-secondary);
}

#practice .exercise-section {
    width: 100%;
}

#practice .exercise {
    display: flex;
    gap: var(--space-16);
    align-items: stretch;
    padding: var(--space-20);
    width: 100%;
    height: 580px;
    min-height: auto;
    background-color: var(--background-surface);
    border-radius: var(--radius-m);
    transition: min-height var(--trans-base);
    animation: fadeIn var(--trans-smooth) forwards;
}

#practice .info {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-self: stretch;
}

#practice .h4 {
    width: 100%;
}

#practice .answers {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: var(--space-20) var(--space-0);
    width: 100%;
}

#practice-hint-box {
    margin-bottom: var(--space-20);
}

#practice .answer {
    padding: var(--space-15);
    width: 100%;
    background-color: var(--background-page);
    border-radius: var(--radius-m);
    transition: all var(--trans-base);
    cursor: pointer;
}

#practice .buttons {
    display: flex;
    gap: var(--space-10);
    margin-top: var(--space-auto);
    padding-top: var(--space-20);
    width: 100%;
}

#practice .buttons .primary {
    width: 100%;
}

#practice img {
    width: 466px;
    height: 100%;
    animation: floatExerciseMascot var(--float-duration) ease-in-out infinite;
    object-fit: contain;
}

#practice-mascot {
    filter: blur(0) opacity(1);
    transition: filter var(--duration-fast) var(--ease-in-out);
}

#practice-mascot.mascot-fade {
    filter: blur(8px) opacity(0);
}

@keyframes floatExerciseMascot {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(-1.5deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

#practice .answer.correct {
    color: var(--green-text-main);
    background-color: var(--green-background);
    border: 1px solid var(--green-main);
    pointer-events: none;
}

#practice .answer.wrong {
    color: var(--red-text-main);
    background-color: var(--red-background);
    border: 1px solid var(--red-main);
    pointer-events: none;
}

#practice .answer.disabled {
    background-color: var(--background-page);
    opacity: 0.6;
    pointer-events: none;
}

#btn-action.disabled {
    color: var(--primary-text-secondary);
    background: var(--primary-text-secondary-20);
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

#btn-hint.disabled {
    color: var(--primary-text-secondary);
    background: transparent;
    border-color: var(--primary-text-secondary-20);
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

#practice .answer.selected {
    color: var(--primary-main);
    background-color: var(--primary-main-5);
    box-shadow: inset 0 0 0 1px var(--primary-main);
    transform: var(--right-shift-3);
}

.hint-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-n7);
    padding: var(--space-16) var(--space-20);
    width: 100%;
    background-color: var(--yellow-background);
    border: 1px dashed var(--yellow-main-50);
    border-radius: var(--radius-m);
    animation: fadeIn var(--trans-medium);
}

.hint-box .caption-bold {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    color: var(--yellow-text-main);
}

.hint-box .caption {
    width: 100%;
    color: var(--yellow-text-secondary);
}

.explanation-box {
    margin: var(--space-0) var(--space-0) var(--space-20) var(--space-0);
    padding: var(--space-20);
    width: 100%;
    background-color: var(--background-page);
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    animation: slideDown var(--trans-smooth);
}

.explanation-box.success {
    background-color: var(--green-background);
    border-color: var(--green-main-25);
}

.explanation-box.error {
    background-color: var(--red-background);
    border-color: var(--red-main-25);
}

.explanation-box .status-text {
    display: block;
    margin-bottom: var(--space-5);
}

.explanation-box.success .status-text {
    color: var(--green-text-main);
}

.explanation-box.error .status-text {
    color: var(--red-text-main);
}

.knowledge-map-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-20);
    width: 100%;
    max-width: 400px;
}

.map-node {
    display: flex;
    gap: var(--space-15);
    align-items: center;
    padding: var(--space-15);
    width: 100%;
    background: var(--background-surface);
    border: 1px solid var(--background-page);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    transition: transform var(--trans-smooth);
}

.map-node .node-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

.map-node .node-info {
    display: flex;
    flex-direction: column;
}

.map-node .node-info .caption {
    color: var(--primary-text-secondary);
}

.map-line {
    margin: var(--space-5) var(--space-0);
    width: 2px;
    height: 30px;
    background-color: var(--background-input-stroke);
}

.map-node.completed .node-icon {
    color: var(--green-main);
    background-color: var(--green-main-10);
}

.map-line.completed {
    background-color: var(--green-main);
}

.map-node.current {
    border-color: var(--primary-main-25);
    box-shadow: var(--primary-faint-glow);
}

.map-node.current .node-icon {
    color: var(--text-inverted);
    background-color: var(--primary-main);
}

.map-node.locked {
    background: var(--background-page);
    opacity: 0.7;
    box-shadow: none;
}

.map-node.locked .node-icon {
    color: var(--primary-text-secondary);
    background-color: var(--background-input-stroke);
}

#map-mascot-img {
    margin-left: var(--space-40);
    width: 300px;
    height: auto;
    animation: floatExerciseMascot var(--float-duration) ease-in-out infinite;
}

#practice-header .title,
#practice-header .subtitle {
    transition: opacity var(--trans-base);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fading-out {
    animation: fadeOut var(--trans-base) forwards !important;
    pointer-events: none;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
}

#trainer {
    margin-bottom: var(--space-80);
}

#trainer .trainer-comparison {
    width: 100%;
}

#trainer .trainer-comparison .buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
    width: 100%;
    margin-top: var(--space-60);
    margin-bottom: var(--space-100);
}

#trainer .section-title.blue .line {
    justify-content: start;
    width: 100%;
}

#trainer .section-title.blue .highlight {
    color: var(--blue-main);
    background: var(--blue-main-15);
}

#trainer .info {
    margin-right: var(--space-n80);
    width: 100%;
}

#trainer .comparison {
    display: flex;
    gap: var(--space-16);
    align-items: stretch;
    width: 100%;
}

#trainer .comparison div {
    width: 100%;
}

#trainer .differences {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    text-align: center;
}

#trainer .title {
    margin-bottom: var(--space-10);
    height: 47px;
}

#trainer .difference,
#trainer .title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-0);
    height: 47px;
    transition: all var(--trans-base);
}

#trainer .other-tests {
    display: flex;
    flex-direction: column;
    transition: all var(--trans-base);
}

#trainer .other-tests .differences {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    gap: var(--space-8);
}

#trainer .other-tests .title {
    width: 100%;
    color: var(--red-text-muted);
    background: var(--red-main-10);
    border: 1px solid var(--red-main-5);
    border-radius: var(--radius-full);
}

#trainer .other-tests .difference {
    flex-grow: 1;
    height: auto;
    color: var(--red-text-secondary);
    background: var(--red-main-5);
    border: 1px solid var(--red-main-10);
    border-radius: var(--radius-full);
}

#trainer .olympus-trainer div {
    color: var(--text-inverted);
    border-radius: var(--radius-m);
}

#trainer .olympus-trainer .title {
    background: var(--primary-main);
}

#trainer .olympus-trainer .difference {
    padding: var(--space-10);
    height: auto;
    background: var(--primary-main-10);
    border: 1px solid var(--primary-main-10);
}

#trainer #bot {
    display: flex;
    align-items: center;
    overflow: visible;
    width: 100%;
}

#trainer img {
    width: 50%;
    height: 50%;
}

#trainer #bot .advantages {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin-bottom: var(--space-20);
}

#trainer #bot .advantages.body-l {
    color: var(--blue-text-muted);
}

#trainer #bot .advantage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-0);
    width: 562px;
    text-align: center;
    background: var(--blue-main-5);
    border-radius: var(--radius-m);
}

#trainer #bot .buttons {
    display: flex;
    gap: var(--space-10);
    width: 562px;
}

#trainer #bot button,
#trainer #bot a {
    width: 100%;
}

#trainer #bot .section-title:not(.tablet-item) .h1 {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start;
}

#progress {
    margin-bottom: var(--space-100);
}

#progress .info {
    display: flex;
    gap: var(--space-16);
    align-items: center;
    overflow: visible;
    width: 100%;
}

#progress .advantages {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    overflow: visible;
    box-sizing: border-box;
    width: 466px;
}

#progress .advantage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-26);
    width: 466px;
    background-color: var(--background-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    transition: transform var(--trans-smooth), box-shadow var(--trans-medium), border-color var(--trans-medium);
    cursor: default;
}

#progress .advantage .advantage-title {
    display: flex;
    flex-direction: column;
}

#progress .advantage .advantage-title .body-l {
    transition: color var(--trans-base);
}

#progress .advantage .advantage-title .body-s {
    color: var(--primary-text-secondary);
}

#progress .icon {
    color: var(--primary-main-25);
    transition: transform var(--trans-bounce), color var(--trans-medium);
}

#progress .desktop-item {
    display: block;
    width: 100%;
    height: 376px;
}

#progress img {
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
}

@keyframes floatProgress {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

#community {
    margin-bottom: var(--space-80);
}

#community .feedbacks {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 450px;
}

#community .student-feedback {
    position: relative;
    flex-shrink: 0;
    width: 9%;
    height: 100%;
    padding: var(--space-10);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    overflow: hidden;
    cursor: pointer;
    transition: width var(--transition-slow), transform var(--transition-smooth), box-shadow var(--transition-smooth);
    will-change: width, transform;
}

#community .student-feedback.active {
    width: 70%;
    cursor: default;
}

#community .student-feedback::before {
    position: absolute;
    inset: var(--space-0);
    z-index: 1;
    content: '';
    background: linear-gradient(180deg, var(--black-0) 0%, var(--black-30) 100%);
    opacity: 1;
    transition: opacity var(--transition-smooth);
}

#community .student-feedback.active::before {
    opacity: 0;
}

#community .collapsed-content {
    position: absolute;
    top: var(--space-0);
    left: var(--space-0);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-15);
    width: 100%;
    height: 100%;
    background: var(--background-page-30);
    border-radius: var(--radius-m);
    backdrop-filter: blur(2px);
    opacity: 1;
    pointer-events: none;
    transition: opacity var(--trans-smooth), background-color var(--trans-medium), backdrop-filter var(--trans-medium);
}

#community .student-feedback.active .collapsed-content {
    opacity: 0;
    pointer-events: none;
}

#community .collapsed-content .name {
    white-space: nowrap;
    text-shadow: 0 2px 10px var(--black-10);
    transform: rotate(180deg);
    transition: transform var(--trans-smooth), color 0.3s ease;
    text-orientation: mixed;
    writing-mode: vertical-rl;
}

#community .collapsed-content .class {
    position: absolute;
    bottom: var(--space-20);
    padding: var(--space-4) var(--space-8);
    white-space: nowrap;
}

#community .review-text {
    position: relative;
    z-index: 3;
    margin-left: var(--space-auto);
    padding: var(--space-20);
    width: 309px;
    height: 100%;
    background: var(--background-surface-70);
    border: 1px solid var(--background-surface-50);
    border-radius: var(--radius-m);
    opacity: 0;
    backdrop-filter: var(--bg-blur);
    transform: translateX(30px);
    transition: opacity var(--trans-medium), transform var(--trans-medium);
    will-change: opacity, transform;
    pointer-events: none;
}

#community .student-feedback.active .review-text {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
    margin: var(--space-auto) var(--space-0);
    margin-left: var(--space-auto);
    transition: opacity var(--transition-smooth) 0.2s, transform var(--transition-smooth) 0.2s;
}

#community .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#community .name-class {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-10);
    width: 100%;
}

#community .class {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-10);
    border-radius: var(--radius-full);
    backdrop-filter: var(--bg-blur);
}

#community .metric {
    margin-bottom: var(--space-10);
    width: 100%;
    line-height: 1;
    text-align: center;
}

#bot .buttons {
    flex-direction: column;
}

#community .quote {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-auto);
    padding: var(--space-10);
    width: 100%;
    border-left: 2px solid;
    border-radius: var(--radius-m);
    transition: transform var(--trans-base);
}

#community .quote .review {
    width: 100%;
}

#community .quote .icon {
    transition: transform var(--trans-bounce);
}

#community .was-became {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
}

#community .was-became .progress {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-5) var(--space-15);
    width: 100%;
    border-radius: var(--radius-m);
    transition: transform var(--trans-base), background-color var(--trans-base);
}

#community .was-became .progress .icon {
    transition: transform var(--trans-bounce);
}

#community .was-became .progress .text {
    display: flex;
    flex-direction: column;
}

#community .student-feedback.green {
    background-color: var(--green-background);
    background-image: url(../../assets/webp/artem-portrait.webp);
}

#community .student-feedback.green .quote .icon,
#community .student-feedback.green .progress .icon,
#community .student-feedback.green {
    color: var(--green-main);
    border-color: var(--green-main);
}

#community .student-feedback.green .quote,
#community .student-feedback.green .progress,
#community .student-feedback.green .class {
    background: var(--green-main-10);
    border-color: var(--green-main);
}

#community .student-feedback.green .body-s,
#community .student-feedback.green .h3 {
    color: var(--green-text-main);
}

#community .student-feedback.green .metric span {
    color: var(--green-text-main-80);
}

#community .student-feedback.green .quote .review,
#community .student-feedback.green .class {
    color: var(--green-text-main-70);
}

#community .student-feedback.green .progress .caption {
    color: var(--green-text-main-50);
}

#community .student-feedback.pink {
    background-color: var(--pink-background);
    background-image: url(../../assets/webp/polina-portrait.webp);
}

#community .student-feedback.pink .collapsed-content .class,
#community .student-feedback.green .collapsed-content .class,
#community .student-feedback.blue .collapsed-content .class,
#community .student-feedback.orange .collapsed-content .class {
    transition: background var(--transition-fast), color var(--transition-fast);
}

#community .student-feedback.pink .quote .icon,
#community .student-feedback.pink .progress .icon,
#community .student-feedback.pink {
    color: var(--pink-main);
    border-color: var(--pink-main);
}

#community .student-feedback.pink .quote,
#community .student-feedback.pink .progress,
#community .student-feedback.pink .class {
    background: var(--pink-main-10);
    border-color: var(--pink-main);
}

#community .student-feedback.pink .body-s,
#community .student-feedback.pink .h3 {
    color: var(--pink-text-main);
}

#community .student-feedback.pink .metric span {
    color: var(--pink-text-main-80);
}

#community .student-feedback.pink .quote .review,
#community .student-feedback.pink .class {
    color: var(--pink-text-main-70);
}

#community .student-feedback.pink .progress .caption {
    color: var(--pink-text-main-50);
}

#community .student-feedback.blue {
    background-color: var(--blue-background);
    background-image: url(../../assets/webp/maxim-portrait.webp);
}

#community .student-feedback.blue .quote .icon,
#community .student-feedback.blue .progress .icon,
#community .student-feedback.blue {
    color: var(--blue-main);
    border-color: var(--blue-main);
}

#community .student-feedback.blue .quote,
#community .student-feedback.blue .progress,
#community .student-feedback.blue .class {
    background: var(--blue-main-10);
    border-color: var(--blue-main);
}

#community .student-feedback.blue .body-s,
#community .student-feedback.blue .h3 {
    color: var(--blue-text-main);
}

#community .student-feedback.blue .metric span {
    color: var(--blue-text-main-80);
}

#community .student-feedback.blue .quote .review,
#community .student-feedback.blue .class {
    color: var(--blue-text-main-70);
}

#community .student-feedback.blue .progress .caption {
    color: var(--blue-text-main-50);
}

#community .student-feedback.orange {
    background-color: var(--orange-background);
    background-image: url(../../assets/webp/kseniya-portrait.webp);
}

#community .student-feedback.orange .progress .icon,
#community .student-feedback.orange {
    color: var(--orange-main);
}

#community .student-feedback.orange .quote .icon {
    color: var(--orange-main-25);
}

#community .student-feedback.green .quote .icon {
    color: var(--green-main-25);
}

#community .student-feedback.blue .quote .icon {
    color: var(--blue-main-25);
}

#community .student-feedback.pink .quote .icon {
    color: var(--pink-main-25);
}

#community .student-feedback.orange .quote,
#community .student-feedback.orange .progress,
#community .student-feedback.orange .class {
    background: var(--orange-main-10);
    border-color: var(--orange-main);
}

#community .student-feedback.orange .body-s,
#community .student-feedback.orange .h3 {
    color: var(--orange-text-main);
}

#community .student-feedback.orange .collapsed-content .h3 {
    color: var(--orange-main-50);
}

#community .student-feedback.orange .metric span {
    color: var(--orange-text-main-80);
}

#community .student-feedback.orange .quote .review,
#community .student-feedback.orange .class {
    color: var(--orange-text-main-70);
}

#community .student-feedback.orange .progress .caption {
    color: var(--orange-text-main-50);
}

#final-cta,
#faq {
    margin-bottom: var(--space-80);
}

#final-cta .caption,
#final-cta .subtitle {
    text-align: center;
    color: var(--primary-text-secondary);
}

#final-cta .subtitle {
    margin-top: var(--space-n20);
    margin-bottom: var(--space-50);
}

#final-cta button {
    margin-bottom: var(--space-10);
}

.pop-up .score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.pop-up .score .h1-extrabold {
    color: var(--primary-main);
}

.pop-up .score .body-s {
    color: var(--primary-text-secondary);
}

.pop-up .recommendations {
    display: flex;
    flex-direction: column;
    gap: var(--space-30);
    margin: var(--space-20) var(--space-0);
    padding: var(--space-20);
    width: 100%;
    background-color: var(--background-surface);
    border: 1px solid var(--primary-main-10);
    border-radius: var(--radius-m);
}

.pop-up .recommendations .icon {
    color: var(--primary-main);
}

.pop-up .recommendation {
    display: flex;
    gap: var(--space-10);
    align-items: center;
}

.pop-up .recommendation .info {
    display: flex;
    flex-direction: column;
}

.pop-up .recommendation .body-s {
    color: var(--primary-text-secondary);
}

.pop-up .recommendation .body-m {
    color: var(--primary-text-main);
}

.pop-up .repetition .body-l-medium {
    width: 100%;
    text-align: center;
}

.pop-up .repetition .body-s {
    width: 100%;
}

.pop-up .repetition .caption {
    color: var(--primary-text-muted);
}

.pop-up .repetition {
    width: 100%;
}

.pop-up .repetition span.body-l-medium {
    display: block;
    margin-bottom: var(--space-10);
}

.pop-up .recommendation img {
    width: 65px;
    height: auto;
    border-radius: var(--radius-s);
    box-shadow: var(--shadow);
}

@media (max-width: 1024px) {
    #hero {
        flex-direction: column;
        gap: var(--space-40);
        margin-bottom: var(--space-0);
    }

    #trainer .trainer-comparison button.secondary {
        width: 80%;
    }

    #hero button.primary.l {
        width: 100%;
    }

    #hero .info {
        align-items: center;
        margin-left: var(--space-0);
        width: 100%;
        text-align: center;
    }

    #hero .title {
        width: 100%;
        max-width: 600px;
    }

    #hero .buttons .secondary {
        display: flex;
        margin-left: var(--space-auto);
        width: 400px;
    }

    #hero .hero-media .mascot {
        left: var(--space-30);
        top: var(--space-n155);
        height: 200px;
    }

    #hero .window-mockup {
        margin-left: var(--space-n80);
        width: 100%;
    }

    #hero .cta {
        flex-direction: column;
        margin-bottom: var(--space-30);
        width: 100%;
    }

    #hero .cta .about {
        width: 100%;
        flex-direction: row;
        gap: var(--space-32);
        text-align: center;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        height: auto;
    }

    #hero .caption-bold {
        display: flex;
        flex-direction: column;
    }

    #hero .hero-media {
        margin: var(--space-50) var(--space-0) var(--space-80) var(--space-0);
    }

    #hero .tag {
        width: max-content;
        text-align: center;
    }

    #fund {
        padding: var(--space-20);
        width: 100%;
    }

    #why .bg-icon span {
        width: 25px;
        height: 25px;
    }

    #why .advantage {
        gap: var(--space-20);
        align-items: center;
    }

    #why .info {
        width: 100%;
    }

    #why .info span {
        width: 100%;
    }

    #cheatcode img {
        width: 332px;
        height: 369px;
    }

    #cheatcode .wet {
        margin-top: var(--space-0);
    }

    #cheatcode {
        width: 100%;
    }

    #practice img {
        width: 40%;
    }

    #practice .exercise {
        align-items: center;
        height: 600px;
    }

    #trainer img {
        display: none;
    }

    #trainer #bot .advantage {
        width: 100%;
    }

    #trainer #bot .advantages .advantage {
        width: 100%;
    }

    #trainer #bot .buttons {
        width: 100%;
    }

    #trainer .trainer-comparison .buttons {
        margin-bottom: var(--space-80);
        margin-top: var(--space-30);
    }

    #trainer #bot {
        padding: var(--space-0);
    }

    #trainer button.secondary.m {
        width: 80%;
    }

    #trainer .comparison>div>div>div {
        padding: var(--space-10);
        height: auto;
    }

    #trainer .section-title.tablet-item {
        display: flex;
    }

    #trainer .section-title {
        color: var(--text-inverted);
    }

    #trainer #bot .section-title.tablet-item .h1 {
        display: flex;
        flex-direction: column;
    }

    #trainer .section-title.blue .line {
        justify-content: center;
    }

    #progress #tablet {
        width: 332px;
        height: 340px;
    }

    #progress .advantages {
        gap: var(--space-16);
        justify-content: flex-start;
        width: 100%;
        height: 100%;
    }

    #progress .advantage {
        box-sizing: border-box;
        padding: var(--space-20);
        width: 100%;
        height: 100px;
    }

    #progress img.tablet-item {
        width: 50%;
        height: auto;
        max-width: 500px;
    }

    #progress .info {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #progress {
        margin-bottom: var(--space-80);
    }

    #community .feedbacks {
        flex-direction: column;
        gap: var(--space-12);
        height: auto;
    }

    #community .student-feedback {
        width: 100% !important;
        height: 80px;
        background-position: 50% 20%;
        background-size: cover;
        transition: height 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s ease, box-shadow 0.3s ease;
    }

    #community .student-feedback.active {
        flex-grow: 0;
        width: 100% !important;
        height: 420px;
        cursor: default;
    }

    #community .student-feedback.active .quote {
        margin-bottom: var(--space-auto);
    }

    #community .collapsed-content {
        flex-direction: row;
        justify-content: space-between;
        padding: var(--space-0) var(--space-30);
        transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, backdrop-filter 0.3s ease;
    }

    #community .student-feedback.active .collapsed-content {
        opacity: 0;
        pointer-events: none;
    }

    #community .collapsed-content .name {
        margin-top: var(--space-0);
        white-space: normal;
        transform: rotate(0deg) !important;
        text-orientation: mixed;
        writing-mode: horizontal-tb;
    }

    #community .student-feedback:not(.active):hover .collapsed-content .name {
        transform: none !important;
    }

    #community .collapsed-content .class {
        position: static;
        bottom: var(--space-auto);
    }

    .pop-up .diagnostic-mascot-img {
        left: var(--space-12p);
        margin-bottom: var(--space-n80);
        transform: scale(0.8);
    }

    #community .review-text {
        position: absolute;
        top: var(--space-10);
        right: var(--space-10);
        bottom: var(--space-10);
        width: calc(50% - 10px);
        height: calc(100% - 20px);
        background: var(--background-surface-90);
        border-radius: var(--radius-m);
        opacity: 0;
        transform: translateX(20px);
        pointer-events: none;
        transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.15s, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.15s;
    }

    #community .student-feedback.active .review-text {
        padding: var(--space-10);
        opacity: 1;
        transform: translateX(0);
        pointer-events: all;
    }

    #community .student-feedback:not(.active) .review-text {
        transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    #diagnostic-popup br.tablet-item {
        display: block;
    }

    #final-cta .section-title {
        display: flex;
    }

    #final-cta .section-title.tablet-item,
    #final-cta .body-l {
        display: flex;
        text-align: center;
    }

    #community .student-feedback.orange .collapsed-content .h3 {
        color: var(--orange-text-main);
    }
}

@media (max-width: 480px) {
    #hero button {
        width: 100%;
    }

    #community .student-feedback.orange .collapsed-content .h3 {
        color: var(--orange-text-main);
    }

    #practice .buttons {
        padding-top: var(--space-0);
    }

    #hero .title,
    #hero .subtitle,
    #hero .info {
        width: 100%;
    }

    #hero .info {
        width: 100%;
    }

    #hero .buttons,
    #hero .cta {
        width: 100%;
    }

    #hero .cta {
        margin-bottom: var(--space-10);
    }

    #hero .buttons {
        margin-bottom: var(--space-30);
    }

    #hero .tag {
        display: none;
    }

    #hero .h1 {
        display: none;
        flex-direction: column;
        width: 343px;
    }

    #hero .cta .about {
        display: none;
    }

    #hero .cta .about.mobile-item {
        display: flex;
    }

    #hero .window-mockup {
        margin-left: var(--space-0);
        width: 100%;
        height: auto;
        min-width: 0;
        max-width: 100%;
    }

    #hero .h1 .line {
        justify-content: center;
    }

    #hero .h1 .line,
    #hero .h1 .line span {
        font-family: inherit;
    }

    #hero .tag.mobile-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    #hero .tag.mobile-item span {
        color: var(--primary-text-secondary);
    }

    #hero .subtitle {
        width: 343px;
        text-align: center;
    }

    #hero .subtitle br {
        display: none;
    }

    #hero .hero-media .mascot {
        display: none;
    }

    #hero .hero-media {
        margin: var(--space-n10) var(--space-0) var(--space-n40) var(--space-n25);
        width: 100%;
    }

    #fund {
        margin-bottom: var(--space-30);
        margin-top: var(--space-80);
        width: calc(100% - 32px) !important;
        padding: var(--space-10) var(--space-15);
    }

    #fund br {
        display: none;
    }

    #why .advantage {
        display: none;
    }

    #why .accordion {
        display: flex;
        gap: var(--space-10);
    }

    #why .accordion .accordion-item .h4 {
        color: var(--text-inverted);
        border-radius: var(--radius-m);
    }

    #why .accordion-title {
        gap: var(--space-16);
    }

    #why .accrodion-title .body-l-accent {
        margin-left: var(--space-n6);
    }

    #why .bg-icon {
        width: 40px;
        height: 40px;
    }

    #why .bg-icon .chart {
        width: 18px;
        height: 20px;
        width: 20px;
        height: 20px;
    }

    #why .bg-icon .list-check {
        width: 18px;
        height: 20px;
    }

    #why .bg-icon .trophy {
        width: 20px;
        height: 20px;
    }

    #why .accordion-item {
        padding: var(--space-16) var(--space-20);
    }

    #why .accordion-item.level {
        height: max-content;
        background: var(--primary-main-5);
        border: 1px solid var(--primary-main-10);
    }

    #why .accordion-item.level .body-m {
        color: var(--primary-text-muted);
    }

    #why .accordion-item.training {
        height: max-content;
        background: var(--blue-main-5);
        border: 1px solid var(--blue-main-10);
    }

    #why .accordion-item.training .body-m {
        color: var(--blue-text-muted);
    }

    #why .accordion-item.olympiads {
        height: max-content;
        background: var(--green-main-5);
        border: 1px solid var(--green-main-10);
    }

    #why .accordion-item.olympiads .body-m {
        color: var(--green-text-muted);
    }

    .pop-up .recommendation img {
        width: 50px;
    }

    #why .accordion-item.active .bg-more span {
        color: var(--red-main-50);
    }

    #cheatcode br {
        display: none;
    }

    #cheatcode .line span {
        display: flex;
        gap: var(--space-10);
    }

    #cheatcode img {
        width: 100%;
        height: auto;
    }

    #cheatcode .info {
        flex-direction: column;
        margin: var(--space-0) var(--space-0) var(--space-30) var(--space-0);
    }

    #cheatcode .wet {
        width: 100%;
    }

    #cheatcode .wet .body-l {
        display: none;
    }

    #cheatcode {
        margin-top: var(--space-30);
    }

    .pop-up .diagnostic-mascot-img {
        left: var(--space-6p);
    }

    #practice {
        margin: var(--space-40) var(--space-0);
    }

    #practice img {
        display: none;
    }

    #practice .exercise {
        padding: var(--space-10);
        height: auto;
        min-height: 520px;
        border-radius: var(--radius-s);
    }

    #progress .advantage .advantage-title {
        width: 100%;
    }

    #practice .info {
        width: 100%;
    }

    #practice #btn-hint {
        padding: var(--space-0);
    }

    #trainer .trainer-comparison .section-title {
        display: none;
    }

    #trainer .comparison .other-tests {
        display: none;
    }

    #trainer .trainer-comparison .buttons {
        margin: var(--space-30) var(--space-0) var(--space-40) var(--space-0);
    }

    #trainer .comparison .title {
        display: none;
    }

    #trainer .trainer-comparison .primary.m {
        padding: var(--space-0) var(--space-20);
        width: 54%;
    }

    #trainer img {
        top: var(--space-148);
        width: 163px;
        height: 146px;
    }

    #trainer .section-title.blue .line {
        width: 100%;
    }

    #trainer #bot .advantages {
        display: none;
        gap: var(--space-5);
        width: 100%;
    }

    #trainer #bot .advantages br {
        display: none;
    }

    #trainer #bot .advantages .advantage {
        padding: var(--space-15);
        width: 100%;
    }

    #trainer .section-title {
        color: var(--text-inverted);
    }

    #progress .h1-extrabold {
        margin-left: var(--space-5);
    }

    #progress .info {
        flex-direction: column;
    }

    #progress .advantage {
        width: 100%;
        height: 100%;
    }

    #progress img {
        width: 100%;
        height: auto;
    }

    #progress {
        margin-bottom: var(--space-40);
    }

    #community .feedbacks .review {
        display: none;
    }

    #community .student-feedback {
        height: 70px;
    }

    #community .student-feedback.active {
        height: 350px;
    }

    #community .student-feedback.active .quote {
        margin-bottom: var(--space-15);
    }

    #community .review-text {
        width: calc(55% - 10px);
    }

    #community .student-feedback.active .review-text {
        padding: var(--space-8);
        width: 200px;
        height: max-content;
    }

    #community .student-feedback .quote .icon {
        position: absolute;
        right: var(--space-15);
    }

    #community .content {
        height: max-content;
    }

    #community .collapsed-content {
        padding: var(--space-0) var(--space-16);
    }

    #community .class {
        text-align: center;
    }

    #community .was-became .progress {
        padding: var(--space-3) var(--space-10);
    }

    #community .name-class {
        margin-bottom: var(--space-5);
    }

    #community .metric {
        margin-bottom: var(--space-5);
    }

    #community .quote {
        padding: var(--space-8);
    }

    #final-cta .subtitle {
        width: 100%;
    }

    #final-cta .subtitle br {
        display: none;
    }
}

@media (hover: hover) {
    #fund:hover {
        box-shadow: var(--shadow);
        transform: translateY(-3px) scale(1.01);
    }

    #why .advantage:hover,
    #progress .advantage:hover {
        box-shadow: var(--primary-faint-glow);
        filter: none;
        transform: translateY(-3px) scale(1.01);
    }

    #why .advantage.level:hover {
        border-color: var(--primary-main-25);
        box-shadow: var(--primary-faint-glow);
    }

    #why .advantage.training:hover {
        border-color: var(--blue-main-25);
        box-shadow: var(--blue-faint-glow);
    }

    #why .advantage.olympiads:hover {
        border-color: var(--green-main-25);
        box-shadow: var(--green-faint-glow);
    }

    #why .advantage:hover .bg-icon {
        transform: var(--scale-increase) var(--rotate-5);
    }

    #why .advantage:hover .info .h3 {
        color: var(--background-surface);
    }

    #cheatcode:hover img {
        filter: drop-shadow(var(--primary-faint-glow));
    }

    #cheatcode .wet:hover {
        background-color: var(--background-surface);
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3) var(--scale-increase);
    }

    #cheatcode .section-title:hover .h1-extrabold {
        text-shadow: var(--primary-glow);
        color: var(--primary-main-hover);
    }

    #practice .answer:hover {
        color: var(--primary-main);
        background-color: var(--primary-main-10);
        border-color: var(--primary-main-25);
        transform: var(--right-shift-3);
    }

    .map-node:hover {
        transform: scale(1.02);
    }

    #trainer .other-tests:hover {
        transform: var(--up-shift-3);
    }

    #trainer .other-tests:hover .title {
        color: var(--red-main);
    }

    #trainer .other-tests:hover .difference {
        color: var(--red-main-50);
    }

    #trainer .olympus-trainer:hover .title {
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3);
    }

    #trainer .olympus-trainer:hover .difference {
        transform: var(--up-shift-3);
    }

    #progress .advantage:hover {
        border-color: var(--primary-main-15);
        box-shadow: var(--primary-faint-glow);
        transform: var(--up-shift-3) var(--scale-increase);
    }

    #progress .advantage:hover .advantage-title .body-l {
        color: var(--primary-main);
    }

    #progress .advantage:hover .icon {
        color: var(--primary-main);
        transform: var(--scale-increase) var(--rotate-5);
    }

    #community .student-feedback:not(.active):hover {
        transform: var(--up-shift-3) var(--scale-increase);
    }

    #community .student-feedback:not(.active):hover .collapsed-content .name {
        color: var(--text-inverted);
        transform: rotate(180deg) translateY(5px);
    }

    #community .student-feedback:not(.active):hover .collapsed-content {
        background: var(--background-page-10);
        backdrop-filter: blur(1px);
    }

    #community .review-text:hover .quote {
        transform: translateX(3px);
    }

    #community .review-text:hover .quote .icon {
        transform: var(--scale-increase) var(--rotate-5);
    }

    #community .was-became .progress:hover {
        transform: var(--scale-increase);
    }

    #community .was-became .progress:hover .icon {
        transform: rotate(10deg) scale(1.1);
    }

    #community .student-feedback.green:hover {
        box-shadow: var(--green-faint-glow);
    }

    #community .student-feedback.pink:hover {
        box-shadow: var(--pink-faint-glow);
    }

    #community .student-feedback.pink:hover .collapsed-content .class {
        color: var(--pink-main);
        background: var(--pink-text-main);
    }

    #community .student-feedback.green:hover .collapsed-content .class {
        color: var(--green-main);
        background: var(--green-text-main);
    }

    #community .student-feedback.blue:hover .collapsed-content .class {
        color: var(--blue-main);
        background: var(--blue-text-main);
    }

    #community .student-feedback.orange:hover .collapsed-content .class {
        color: var(--orange-main);
        background: var(--orange-text-main);
    }

    #community .student-feedback.blue:hover {
        box-shadow: var(--blue-faint-glow);
    }

    #community .student-feedback.orange:hover {
        box-shadow: var(--orange-faint-glow);
    }
}