/* «Математические навыки»: генерируемые задания s вводом числа или выбором варианта, схемой и решением. Оформление общее s «Наглядными задачами». */
:is(.ms_training, .ms_modal_scheme) {
    --ms-main: var(--accent);
    --ms-given: var(--progress);
    --ms-unknown: var(--orange3);
    --ms-aux: var(--turq);
    --ms-on-color: #fff;
    color: var(--main);
}
.ms_training {
    justify-content: flex-start;
    align-items: center;
    padding: clamp(26px, 7vh, 64px) 24px 26px;
}
:is(.ms_training, .ms_modal_scheme) *, :is(.ms_training, .ms_modal_scheme) *::before, :is(.ms_training, .ms_modal_scheme) *::after { box-sizing: border-box; }
:is(.ms_training, .ms_modal_scheme) [hidden] { display: none !important; }
.ms_training .ms_card { width: min(100%, 760px); display: grid; grid-template-columns: 1fr; row-gap: 18px; }
.ms_training.has_board .ms_card {
    width: min(100%, 1000px);
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.05fr);
    grid-template-areas: "main board";
    column-gap: 34px;
    align-items: start;
}
/* Named areas only where the card has a scheme: otherwise they would create implicit columns. */
.ms_training:is(.has_board, .has_after_board) .ms_main { grid-area: main; }
.ms_training:is(.has_board, .has_after_board) .ms_board { grid-area: board; }
.ms_training .ms_main { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ms_training .ms_check { margin-top: 16px; }
.ms_training.has_board .ms_main { align-items: flex-start; text-align: left; }
.ms_training .ms_task { margin: 0; font-size: clamp(19px, 1.5vw, 22px); font-weight: var(--main_bolder_weight); line-height: 1.5; }
.ms_training .ms_task .katex { font-size: 1.04em; }
.ms_training .ms_nowrap { white-space: nowrap; }
/* A long formula still breaks after «=» inside; only its end stays glued to the unit or punctuation after it. */
.ms_training .ms_nowrap > .katex { white-space: normal; }
.ms_training .ms_formula { margin: 9px 0 0; padding: .2em 0 .4em; font-size: clamp(24px, 2.4vw, 30px); max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.ms_training .ms_formula .katex-display { margin: 0; }
/* Several parts of a formula (math-skills-linalg.js: A and B) stand in a row and wrap on a narrow screen. */
.ms_training .ms_formula.is_parts:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3em 1.1em; }
:is(.ms_training, .ms_modal_scheme) .ms_board {
    align-self: center;
    margin: 0;
    padding: 10px 8px 6px;
    border-radius: 22px;
    background-color: var(--secondary_background);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--lightgray_2) 70%, transparent) 1.2px, transparent 1.6px);
    background-size: 22px 22px;
    background-position: 11px 11px;
}
/* An illustration of the answer below the task. */
.ms_training.has_after_board .ms_card { grid-template-areas: "main" "board"; }
.ms_training.has_after_board .ms_board { width: min(100%, 520px); justify-self: center; }
:is(.ms_training, .ms_modal_scheme) .ms_diagram { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; }

/* Answer: fields or option buttons, and the solution button. */
.ms_training .ms_answer_row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; width: 100%; }
.ms_training.has_board .ms_answer_row { justify-content: flex-start; }
.ms_training .ms_answer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ms_training .ms_field { display: inline-flex; align-items: center; gap: 8px; }
.ms_training .ms_label, .ms_training .ms_unit { font-size: 22px; font-weight: var(--main_bolder_weight); white-space: nowrap; }
.ms_training .ms_input_shell { position: relative; width: 160px; height: 70px; flex: 0 0 auto; }
.ms_training .ms_answer.is_multi .ms_input_shell { width: 112px; }
.ms_training .ms_input {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    border: var(--border);
    border-width: 3px;
    border-radius: 14px;
    outline: none;
    background: var(--white);
    color: var(--main);
    font: inherit;
    font-weight: var(--main_bolder_weight);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
/* The shared form reset fixes inputs at 17px with !important. Keep answers large. */
.ms_training .ms_input { font-size: 32px !important; }
.ms_training .ms_input::placeholder { color: transparent; opacity: 0; }
.ms_training .ms_placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    font-size: 20px;
    font-weight: var(--main_bold_weight);
    pointer-events: none;
}
.ms_training .ms_input:not(:placeholder-shown) + .ms_placeholder { opacity: 0; }
.ms_training .ms_input:focus { border-color: var(--blue3); outline: none; box-shadow: none; }
.ms_training .ms_input_shell.is_wrong .ms_input { border-color: var(--red); color: var(--red); }
.ms_training.is_correct .ms_input { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--white)); }
.ms_training.is_revealed .ms_input { border-color: var(--accent); color: var(--accent); }
/* A fraction answer: the whole part beside the numerator over the denominator. */
.ms_training .ms_fraction_field { gap: 10px; }
.ms_training .ms_fraction { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.ms_training .ms_fraction_bar { width: 100%; height: 3px; border-radius: 2px; background: var(--main); }
.ms_training .ms_answer.is_multi .ms_fraction_field .ms_input_shell { width: 84px; height: 54px; }
.ms_training .ms_fraction_field .ms_input { font-size: 26px !important; }
.ms_training.is_correct .ms_fraction_bar { background: var(--green); }
.ms_training.is_revealed .ms_fraction_bar { background: var(--accent); }
.ms_training .ms_fraction_field.is_wrong .ms_fraction_bar { background: var(--red); }
/* Several fractions in one answer (core.fractionListFields): «5/6 = □/□» groups side by side, apart from each other. */
.ms_training .ms_answer.is_fraction_list { column-gap: 40px; row-gap: 16px; }
.ms_training .ms_answer.is_fraction_list .ms_label { font-size: 24px; }

.ms_training.ms_mode_choice .ms_answer_row { flex-direction: column; align-items: stretch; }
.ms_training.ms_mode_choice .ms_answer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 620px);
    align-self: center;
}
.ms_training.ms_mode_choice.has_board .ms_answer { align-self: flex-start; }
.ms_training.ms_mode_choice .ms_answer.is_long { grid-template-columns: 1fr; }
/* register(slug, { trio: true }): three short options in one row («<», «=», «>»). */
.ms_training.ms_mode_choice .ms_answer.is_trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A word option of a trio that wraps («Ни четная, ни нечетная») keeps its lines centered. */
.ms_training.ms_mode_choice .ms_answer.is_trio .ms_option { text-align: center; }
/* The three buttons of a row keep one height when one of them wraps. */
.ms_training.ms_mode_choice .ms_answer.is_trio { align-items: stretch; }
/* An empty slot of a formula (\colorbox of the topic files): a rounded grey square with a grey question mark in the header face. */
.ms_training .katex .colorbox { border-radius: .22em; background-color: var(--lightgray) !important; }
/* KaTeX puts the box's content beside the .colorbox background, in .boxpad. */
.ms_training .katex .boxpad * { color: color-mix(in srgb, var(--disabled_text) 50%, var(--lightgray)) !important; font-family: var(--header_font) !important; }
.ms_training.ms_mode_choice .ms_help { align-self: center; }
.ms_training.ms_mode_choice.has_board .ms_help { align-self: flex-start; }
.ms_training .ms_option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 10px 14px;
    border: var(--border);
    border-bottom-width: 4px;
    border-radius: 14px;
    background: var(--white);
    color: var(--main) !important;
    font-family: var(--main_font);
    font-size: 21px;
    font-weight: var(--main_bolder_weight);
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.ms_training .ms_option .katex { font-size: 1.05em; }
.ms_training .ms_option:hover:not(:disabled) { background: var(--secondary_button_hover); }
.ms_training .ms_option:focus-visible { outline: 3px solid var(--blue3); outline-offset: 2px; }
/* Inactive options keep the main text color (the shared disabled style would fade them). */
.ms_training .ms_answer .ms_option:disabled { cursor: default; color: var(--main) !important; opacity: 1; }
.ms_training .ms_answer .ms_option.is_wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--white)); color: var(--red) !important; }
.ms_training .ms_answer .ms_option.is_correct { border-color: var(--green); background: var(--transp_green); color: var(--green) !important; }
.ms_training .ms_option.is_answer { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--white)); }

.ms_training .ms_help {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    min-width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;
    border-radius: 50%;
}
.ms_training .ms_help_icon {
    width: 22px;
    height: 22px;
    background-color: var(--secondary);
    mask: url('../../../../img/icons/question-circle.svg') center / contain no-repeat;
    -webkit-mask: url('../../../../img/icons/question-circle.svg') center / contain no-repeat;
}
/* The calculator toggle: inactive is secondary, the open calculator turns it into the main button. */
.ms_training .ms_calc_toggle { display: inline-flex; justify-content: center; align-items: center; width: 54px; min-width: 54px; height: 54px; min-height: 54px; padding: 0; border-radius: 50%; }
.ms_training .ms_calc_icon {
    width: 24px;
    height: 24px;
    background-color: var(--secondary);
    mask: url('../../../../img/icons/calculator.svg') center / contain no-repeat;
    -webkit-mask: url('../../../../img/icons/calculator.svg') center / contain no-repeat;
}
.ms_training .ms_calc_toggle:not(.secondary) .ms_calc_icon { background-color: var(--white); }
.ms_training .ms_calc_slot { display: flex; justify-content: center; width: 100%; }
/* The scheme stays at the top, so that opening the calculator does not move it. */
.ms_training.ms_with_calc .ms_board { align-self: start; }
.ms_training.has_board .ms_calc_slot { justify-content: flex-start; }
.ms_training .ms_keypad .mini_keypad { margin-left: auto; margin-right: auto; }
.ms_training.has_board .ms_keypad .mini_keypad { margin-left: 0; }
.ms_training .mini_keypad.ms_keypad_wide { grid-template-columns: repeat(7, 52px); }
.ms_training .mini_key_gap { display: block; }
.ms_training .ms_message { margin: 12px 0 0; min-height: 26px; font-size: 17px; line-height: 1.5; color: var(--red); }
/* The worked solution opens in the site's modal window; «Next» under the answer takes the place of «Check». */
.ms_training .ms_next_inline { margin-top: 16px; }
.ms_training :is(.ms_check, .ms_next_inline)[hidden] { display: none; }
/* On a computer the solution stands under the task (from 1100px; the window is for phones and tablets): a row of the card
   under the task and its scheme, as wide as both columns. */
.ms_training .ms_solution_inline {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
    padding: 28px 32px 30px;
    border: var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent) 4%, var(--secondary_background));
    text-align: left;
}
.ms_training .ms_solution_inline h3 { margin: 0; font-size: 24px; }
.ms_training .ms_solution_inline ol { margin: 16px 0 0; padding-left: 28px; font-size: 20px; line-height: 1.6; }
.ms_training .ms_solution_inline li { padding-left: 4px; overflow-wrap: anywhere; }
.ms_training .ms_solution_inline li + li { margin-top: 12px; }
.ms_training .ms_solution_inline li:last-child { font-weight: var(--main_bolder_weight); }
.ms_training .ms_solution_inline .katex { font-size: 1.1em; }
.ms_training .ms_solution_inline .ms_option_figure { display: inline-block; width: 120px; vertical-align: middle; }
/* Generous paddings and type: the window is read, not glanced at (the user's request of 22.10.2026). */
.ms_solution_modal .modal-content { max-width: 640px; padding: 28px 22px 26px; text-align: left; }
@media (min-width: 500px) { .ms_solution_modal .modal-content { padding: 40px 40px 36px; } }
@media (min-width: 768px) { .ms_solution_modal .modal-content { padding: 48px 56px 44px; } }
.ms_solution_modal .modal-content h3 { font-size: 28px; }
.ms_solution_modal .modal-content:focus { outline: none; }
.ms_solution_modal .close { flex: none; padding: 0; border: 0; background: none; appearance: none; }
.ms_solution_modal ol { margin: 22px 0 0; padding-left: 28px; font-size: 20px; line-height: 1.6; }
.ms_solution_modal li { overflow-wrap: anywhere; }
.ms_solution_modal li { padding-left: 4px; }
.ms_solution_modal li + li { margin-top: 14px; }
.ms_solution_modal li:last-child { font-weight: var(--main_bolder_weight); }
.ms_solution_modal .katex { font-size: 1.1em; }
.ms_solution_modal .ms_option_figure { display: inline-block; width: 120px; vertical-align: middle; }
.ms_solution_modal .ms_next { margin-top: 34px; min-width: 160px; min-height: 52px; }
/* The scheme with the answer under the steps: the scheme rules apply to .ms_modal_scheme as well (:is(.ms_training, .ms_modal_scheme)). */
.ms_solution_modal .ms_modal_scheme { margin-top: 28px; }
.ms_solution_modal .ms_modal_scheme .ms_board { width: min(100%, 480px); margin: 0 auto; }
.ms_solution_modal .ms_modal_scheme .ms_board:has(.ms_scheme_ph_symbol) { width: min(100%, 300px); }
.ms_solution_modal .ms_modal_scheme .ms_diagram { pointer-events: none; }

/* Schemes */
:is(.ms_training, .ms_modal_scheme) .ms_svg_text { fill: var(--main); font-family: var(--main_font); font-size: 17px; font-weight: var(--main_bolder_weight); font-variant-numeric: tabular-nums; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_muted { fill: var(--secondary); font-size: 15px; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_big { font-size: 26px; font-family: var(--header_font); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_math { font-family: KaTeX_Math, 'Times New Roman', serif; font-style: italic; font-size: 21px; }
:is(.ms_training, .ms_modal_scheme) .ms_chip rect { stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_chip_text { font-family: var(--main_font); font-size: 18px; font-weight: var(--main_boldest_weight); font-variant-numeric: tabular-nums; }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_given rect { fill: color-mix(in srgb, var(--ms-given) 13%, var(--white)); stroke: color-mix(in srgb, var(--ms-given) 55%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_given .ms_chip_text { fill: color-mix(in srgb, var(--ms-given) 72%, var(--main)); }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_plain rect { fill: var(--white); stroke: var(--lightgray_2); }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_plain .ms_chip_text { fill: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_aux rect { fill: color-mix(in srgb, var(--ms-aux) 14%, var(--white)); stroke: color-mix(in srgb, var(--ms-aux) 60%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_aux .ms_chip_text { fill: color-mix(in srgb, var(--ms-aux) 70%, var(--main)); }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_unknown rect { fill: var(--ms-unknown); stroke: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_correct rect { fill: var(--green); stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_revealed rect { fill: var(--accent); stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_chip:is(.is_unknown, .is_correct, .is_revealed) .ms_chip_text { fill: var(--ms-on-color); }
:is(.ms_training, .ms_modal_scheme) .ms_arrow { fill: none; stroke: var(--secondary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_given { stroke: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_aux { stroke: var(--ms-aux); }
:is(.ms_training, .ms_modal_scheme) .ms_axis { fill: none; stroke: var(--main); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_tick { fill: none; stroke: var(--main); stroke-width: 1.8; opacity: .8; }
:is(.ms_training, .ms_modal_scheme) .ms_grid { fill: none; stroke: var(--lightgray_2); stroke-width: 1; }
:is(.ms_training, .ms_modal_scheme) .ms_curve { fill: none; stroke: var(--ms-main); stroke-width: 3.2; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_curve.is_aux { stroke: var(--ms-aux); }
:is(.ms_training, .ms_modal_scheme) .ms_band { stroke-width: 8; stroke-linecap: round; opacity: .8; fill: none; }
:is(.ms_training, .ms_modal_scheme) .ms_band.is_unknown { stroke: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_band.is_correct { stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_band.is_revealed { stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_band.is_given { stroke: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_band.is_aux { stroke: var(--ms-aux); }
:is(.ms_training, .ms_modal_scheme) .ms_point { stroke-width: 2.6; }
:is(.ms_training, .ms_modal_scheme) .ms_point.is_open { fill: var(--white); stroke: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_point.is_closed { fill: var(--main); stroke: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_point.is_correct { fill: var(--green); stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_point.is_correct.is_open, :is(.ms_training, .ms_modal_scheme) .ms_point.is_revealed.is_open { fill: var(--white); }
:is(.ms_training, .ms_modal_scheme) .ms_point.is_revealed { fill: var(--accent); stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_shape { fill: color-mix(in srgb, var(--ms-main) 9%, var(--white)); stroke: var(--ms-main); stroke-width: 2.6; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_shape.is_aux { fill: color-mix(in srgb, var(--ms-aux) 12%, var(--white)); stroke: var(--ms-aux); }
:is(.ms_training, .ms_modal_scheme) .ms_shape.is_given { fill: color-mix(in srgb, var(--ms-given) 14%, var(--white)); stroke: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_shape.is_unknown { fill: color-mix(in srgb, var(--ms-unknown) 22%, var(--white)); stroke: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_shape.is_correct { fill: color-mix(in srgb, var(--green) 20%, var(--white)); stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_shape.is_revealed { fill: color-mix(in srgb, var(--accent) 18%, var(--white)); stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_shape.is_plain { fill: var(--white); stroke: var(--lightgray_2); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_pip { fill: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_dot { stroke: var(--white); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_dot.is_a { fill: var(--ms-main); }
:is(.ms_training, .ms_modal_scheme) .ms_dot.is_b { fill: var(--ms-aux); }
:is(.ms_training, .ms_modal_scheme) .ms_dot.is_c { fill: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_dot.is_d { fill: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_dot.is_hit { stroke: var(--green); stroke-width: 4; }

/* Targets of a scheme (marks of a scale, hooks of a lever): the answer is a tap on one of them. */
.ms_training:is(.ms_mode_target, .ms_mode_marks) .ms_answer:empty { display: none; }
:is(.ms_training .ms_target, .ms_modal_scheme .ms_target_copy) { fill: transparent; stroke: none; cursor: pointer; outline: none; transition: fill .2s; -webkit-tap-highlight-color: transparent; }
:is(.ms_training .ms_target, .ms_modal_scheme .ms_target_copy):hover { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
:is(.ms_training .ms_target, .ms_modal_scheme .ms_target_copy):focus-visible { stroke: var(--blue3); stroke-width: 2.5; }
:is(.ms_training .ms_target, .ms_modal_scheme .ms_target_copy).is_wrong { fill: color-mix(in srgb, var(--red) 14%, transparent); stroke: var(--red); stroke-width: 2; cursor: default; }
:is(.ms_training .ms_target, .ms_modal_scheme .ms_target_copy).is_correct { fill: color-mix(in srgb, var(--green) 16%, transparent); stroke: var(--green); stroke-width: 2; }
:is(.ms_training .ms_target, .ms_modal_scheme .ms_target_copy).is_answer { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-width: 2; }
.ms_training.ms_targets_locked .ms_target { pointer-events: none; }
/* Marks on the scheme («Задание 13. Тригонометрические уравнения»): the places of the unit circle are small dots, a marked
   place is a big light blue point, a wrong one red; after the answer the roots are green (blue when shown) with their values,
   roots thrown out by the domain are open red points. «Check» and «?» stand in one row under the circle. */
.ms_training.ms_mode_marks :is(.ms_check, .ms_next_inline) { margin-top: 0; }
.ms_training.ms_stacked .ms_main > .ms_board:has(.ms_scheme_unit_marks) { width: min(100%, 440px); }
:is(.ms_training, .ms_modal_scheme) .ms_um_tick { fill: var(--secondary); }
/* A marked place is light blue like a selected answer of the site (the user, 04.11.2026); the pale --lightblue fill of
   the answer buttons would be lost on a point, so the point takes their border and text blues. */
:is(.ms_training, .ms_modal_scheme) .ms_point.is_marked { fill: var(--blue_border); stroke: var(--blue_text); }
:is(.ms_training, .ms_modal_scheme) .ms_point.is_wrong { fill: var(--red); stroke: var(--red); }
:is(.ms_training, .ms_modal_scheme) .ms_point.is_excluded { fill: var(--white); stroke: var(--red); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_root.is_correct { fill: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_root.is_revealed { fill: var(--accent); }
/* «Задание 13. Отбор корней на отрезке»: the same marks on a number line; the segment is a band with square brackets. */
.ms_training.ms_stacked .ms_main > .ms_board:has(.ms_scheme_segment_marks) { width: min(100%, 600px); }
:is(.ms_training, .ms_modal_scheme) .ms_um_segment { stroke: color-mix(in srgb, var(--ms-aux) 40%, transparent); stroke-width: 12; }
:is(.ms_training, .ms_modal_scheme) .ms_um_bracket { fill: none; stroke: var(--main); stroke-width: 2.4; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_um_division { stroke: var(--secondary); stroke-width: 1.6; }
/* The task in the center and the scheme right under it (the scheme moves into the main column). */
.ms_training.ms_stacked.has_board .ms_card { width: min(100%, 760px); grid-template-columns: 1fr; grid-template-areas: none; }
.ms_training.ms_stacked.has_board .ms_main { grid-area: auto; align-items: center; text-align: center; }
.ms_training.ms_stacked .ms_main > .ms_board { align-self: center; width: min(100%, 680px); margin-top: 18px; }
.ms_training.ms_stacked.has_board :is(.ms_answer_row, .ms_calc_slot) { justify-content: center; }
.ms_training.ms_stacked.ms_mode_choice.has_board :is(.ms_answer, .ms_help) { align-self: center; }
/* A single symbol of a circuit element and a small circuit need less room than a full-width scheme. */
.ms_training.ms_stacked .ms_main > .ms_board:has(.ms_scheme_ph_symbol) { width: min(100%, 300px); }
.ms_training.ms_stacked .ms_main > .ms_board:has(.ms_scheme_ph_circuit) { width: min(100%, 520px); }
/* Physics calculations take the figure screen of geometry (chetyrehugolniki.css): the task above the answer and the scheme
   beside both on a computer; below 1100px the task, the scheme right under it and the answer, aligned to the left. */
.ms_training.ms_figure .ms_card { row-gap: 20px; }
.ms_training.ms_figure .ms_head { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ms_training.ms_figure .ms_answer_row { margin-top: 0; }
.ms_training.ms_figure.has_board .ms_card { grid-template-areas: "head board" "main board"; grid-template-rows: auto 1fr; row-gap: 22px; }
.ms_training.ms_figure.has_board .ms_head { grid-area: head; align-self: end; align-items: flex-start; text-align: left; }
/* The solution on a computer: under the answer in its column, in the box and type of the geometry solution. */
.ms_training.ms_figure .ms_solution_inline { grid-column: auto; margin-top: 10px; padding: 18px 20px 20px; border-radius: 16px; }
.ms_training.ms_figure .ms_solution_inline h3 { font-size: 21px; }
.ms_training.ms_figure .ms_solution_inline ol { margin-top: 10px; padding-left: 24px; font-size: 17px; line-height: 1.5; }
.ms_training.ms_figure .ms_solution_inline li { padding-left: 0; }
.ms_training.ms_figure .ms_solution_inline li + li { margin-top: 8px; }
.ms_training.ms_figure .ms_solution_inline .katex { font-size: 1.02em; }

/* Physics schemes: bodies, vessels with liquid, forces, dimension lines and quantity chips. */
:is(.ms_training, .ms_modal_scheme) .ms_ph_sym { font-family: KaTeX_Math, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 21px; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_sub { font-size: 13px; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ground, :is(.ms_training, .ms_modal_scheme) .ms_ph_mark { fill: none; stroke: var(--secondary); stroke-width: 2.4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_hatch { fill: none; stroke: var(--secondary); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_dim { fill: none; stroke: var(--secondary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_dim.is_dash { stroke-dasharray: 5 5; opacity: .75; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_body { fill: color-mix(in srgb, var(--turq) 16%, var(--white)); stroke: var(--turq); stroke-width: 2.2; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_body.is_top { fill: color-mix(in srgb, var(--turq) 8%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_body.is_side { fill: color-mix(in srgb, var(--turq) 30%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_body.is_solid { fill: color-mix(in srgb, var(--bronze) 45%, var(--white)); stroke: color-mix(in srgb, var(--bronze) 65%, var(--main)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_box.is_ghost .ms_ph_body { fill: none; stroke-dasharray: 6 5; opacity: .6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_vessel { fill: none; stroke: var(--main); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_liquid { fill: color-mix(in srgb, var(--accent) 16%, var(--white)); stroke: none; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_surface { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_surface.is_wide { stroke-width: 3; stroke-dasharray: 14 8; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_scale { fill: color-mix(in srgb, var(--secondary) 12%, var(--white)); stroke: var(--secondary); stroke-width: 2; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_icon { fill: var(--white); stroke: var(--main); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_icon.is_fill { fill: color-mix(in srgb, var(--accent) 16%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_point { fill: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_string { fill: none; stroke: var(--main); stroke-width: 2; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_leg { fill: none; stroke: var(--turq); stroke-width: 7; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_leg.is_back, :is(.ms_training, .ms_modal_scheme) .ms_ph_ski.is_back { opacity: .55; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ski { stroke: var(--turq); stroke-width: 5; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_stairs { fill: none; stroke: var(--secondary); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_name { fill: var(--secondary); font-family: var(--main_font); font-size: 15px; font-weight: var(--main_bolder_weight); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force { color: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force line { stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force path { fill: currentColor; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force.is_aux { color: var(--ms-aux); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force.is_given { color: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force.is_unknown { color: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force.is_correct { color: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force.is_revealed { color: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_contact { fill: none; stroke-width: 6; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_contact.is_given { stroke: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_contact.is_unknown { stroke: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_contact.is_correct { stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_contact.is_revealed { stroke: var(--accent); }
/* Instruments, graphs, forces on a line and a lever. */
:is(.ms_training, .ms_modal_scheme) .ms_ph_tick { fill: none; stroke: var(--main); stroke-width: 1.6; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_scale { font-size: 14px; font-weight: var(--main_bold_weight); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_axis { font-family: KaTeX_Math, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 18px; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_line { fill: var(--accent); font-size: 16px; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_force { font-size: 15px; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_weight { fill: var(--main); font-size: 14px; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_scale.is_ruler { fill: color-mix(in srgb, var(--yellow) 22%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_vessel.is_glass { fill: var(--white); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_mercury { fill: var(--coral); stroke: none; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_pointer { fill: var(--accent); stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_hook { fill: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_point.is_correct { fill: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_point.is_revealed { fill: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_point.is_given { fill: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_area { stroke: none; opacity: .22; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_area.is_correct { fill: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_area.is_revealed { fill: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_weight rect { stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_weight.is_given rect { fill: color-mix(in srgb, var(--bronze) 45%, var(--white)); stroke: color-mix(in srgb, var(--bronze) 65%, var(--main)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_weight.is_unknown rect { fill: color-mix(in srgb, var(--ms-unknown) 22%, var(--white)); stroke: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_weight.is_correct rect { fill: color-mix(in srgb, var(--green) 22%, var(--white)); stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_weight.is_revealed rect { fill: color-mix(in srgb, var(--accent) 18%, var(--white)); stroke: var(--accent); }

/* Physics, grade 8: heat (flame, hot and cold liquids, ice, steam), circuit elements, a meter dial, a coil and a compass. */
:is(.ms_training, .ms_modal_scheme) .ms_ph_liquid.is_hot { fill: color-mix(in srgb, var(--coral) 20%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_liquid.is_warm { fill: color-mix(in srgb, var(--orange) 16%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_liquid.is_cold { fill: color-mix(in srgb, var(--accent) 22%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_liquid.is_melt { fill: color-mix(in srgb, var(--orange) 34%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_surface:is(.is_hot, .is_warm) { stroke: var(--coral); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_flame { fill: color-mix(in srgb, var(--orange) 70%, var(--white)); stroke: var(--coral); stroke-width: 1.6; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_flame.is_core { fill: color-mix(in srgb, var(--yellow) 75%, var(--white)); stroke: none; }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_cool { stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_wave { fill: none; stroke: var(--secondary); stroke-width: 2.2; stroke-linecap: round; opacity: .7; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_bubble { fill: var(--white); stroke: var(--accent); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_steam { fill: color-mix(in srgb, var(--secondary) 14%, var(--white)); stroke: color-mix(in srgb, var(--secondary) 45%, var(--white)); stroke-width: 1.4; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_drop { fill: color-mix(in srgb, var(--accent) 45%, var(--white)); stroke: var(--accent); stroke-width: 1.2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_scale.is_cold { fill: color-mix(in srgb, var(--accent) 16%, var(--white)); stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ice { fill: color-mix(in srgb, var(--accent) 12%, var(--white)); stroke: color-mix(in srgb, var(--accent) 70%, var(--white)); stroke-width: 2; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_box.is_hot .ms_ph_body { fill: color-mix(in srgb, var(--coral) 24%, var(--white)); stroke: var(--coral); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_box.is_hot .ms_ph_body.is_top { fill: color-mix(in srgb, var(--coral) 12%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_box.is_hot .ms_ph_body.is_side { fill: color-mix(in srgb, var(--coral) 36%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_flow { fill: none; stroke: var(--secondary); stroke-width: 2.2; stroke-dasharray: 6 5; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_icon.is_glow { fill: color-mix(in srgb, var(--yellow) 30%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_icon.is_hot { fill: color-mix(in srgb, var(--coral) 30%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_el_wire { fill: none; stroke: var(--main); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_el_wire.is_dash { stroke-dasharray: 3 3; }
:is(.ms_training, .ms_modal_scheme) .ms_el_line { fill: none; stroke: var(--main); stroke-width: 2.2; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_el_body { fill: var(--white); stroke: var(--main); stroke-width: 2.2; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_el_plate { stroke: var(--main); stroke-width: 2.2; }
:is(.ms_training, .ms_modal_scheme) .ms_el_plate.is_short { stroke-width: 5.5; }
:is(.ms_training, .ms_modal_scheme) .ms_el_head, :is(.ms_training, .ms_modal_scheme) .ms_el_node { fill: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_el_dot, :is(.ms_training, .ms_modal_scheme) .ms_el_open { fill: var(--white); stroke: var(--main); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_el_letter { fill: var(--main); font-family: var(--main_font); font-size: 17px; font-weight: var(--main_boldest_weight); text-anchor: middle; }
:is(.ms_training, .ms_modal_scheme) .ms_el_letter.is_big { font-size: 36px; }
:is(.ms_training, .ms_modal_scheme) .ms_el_letter.is_dial { font-size: 40px; fill: var(--secondary); }
:is(.ms_training, .ms_modal_scheme) .ms_el.is_focus :is(.ms_el_body, .ms_el_line, .ms_el_plate, .ms_el_dot) { stroke: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_el.is_focus :is(.ms_el_head) { fill: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_el.is_focus .ms_el_body { fill: color-mix(in srgb, var(--ms-unknown) 18%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_el.is_focus .ms_el_letter { fill: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_el.is_given .ms_el_body { fill: color-mix(in srgb, var(--ms-given) 13%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_el:is(.is_unknown) .ms_el_body { fill: color-mix(in srgb, var(--ms-unknown) 18%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_el:is(.is_correct) .ms_el_body { fill: color-mix(in srgb, var(--green) 18%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_el:is(.is_revealed) .ms_el_body { fill: color-mix(in srgb, var(--accent) 16%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_el { font-family: KaTeX_Math, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 18px; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_sign { font-size: 22px; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_inner { font-size: 12px; fill: var(--secondary); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_pole { font-size: 24px; font-family: var(--header_font); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_pole.is_n { fill: var(--coral); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_pole.is_s { fill: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_scale.is_meter { fill: color-mix(in srgb, var(--secondary) 6%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_needle { stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_pivot { fill: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_terminal { fill: var(--white); stroke: var(--secondary); stroke-width: 2.4; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_terminal.is_used { fill: var(--main); stroke: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_lead { stroke: var(--main); stroke-width: 2.4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_core { fill: color-mix(in srgb, var(--secondary) 24%, var(--white)); stroke: var(--secondary); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_tube { fill: color-mix(in srgb, var(--bronze) 10%, var(--white)); stroke: none; }
/* Places to tap that are not drawn otherwise (the ends of a coil) get a light dashed outline. */
:is(.ms_training .ms_target, .ms_modal_scheme .ms_target_copy).is_zone:not(.is_wrong, .is_correct, .is_answer, :focus-visible) { stroke: color-mix(in srgb, var(--secondary) 45%, transparent); stroke-width: 1.6; stroke-dasharray: 5 5; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_turn { fill: none; stroke: var(--bronze); stroke-width: 3.6; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_turn.is_back { stroke-width: 2; stroke-dasharray: 4 4; opacity: .65; }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_current { stroke: var(--accent); stroke-width: 2.6; }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_choice { stroke: var(--main); stroke-width: 2.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_source { fill: color-mix(in srgb, var(--secondary) 12%, var(--white)); stroke: var(--main); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_compass { fill: var(--white); stroke: var(--secondary); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_needle_n { fill: var(--coral); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_needle_s { fill: color-mix(in srgb, var(--accent) 55%, var(--white)); }
/* Options drawn as symbols or circuits. */
:is(.ms_training, .ms_modal_scheme) .ms_answer.is_figures .ms_option { min-height: 84px; padding: 8px 10px; }
:is(.ms_training, .ms_modal_scheme) .ms_option_figure { display: block; width: 100%; max-width: 240px; height: auto; max-height: 150px; overflow: visible; }
:is(.ms_training, .ms_modal_scheme) .ms_option.is_correct .ms_option_figure :is(.ms_el_wire, .ms_el_line, .ms_el_body, .ms_el_plate) { stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_option.is_wrong .ms_option_figure :is(.ms_el_wire, .ms_el_line, .ms_el_body, .ms_el_plate) { stroke: var(--red); }

/* Physics, grade 9: moving bodies, balls, candidate arrows of forces, springs, magnets and field symbols, a lens with rays. */
:is(.ms_training, .ms_modal_scheme) .ms_ph_ghost { opacity: .4; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ball { fill: color-mix(in srgb, var(--accent) 22%, var(--white)); stroke: var(--accent); stroke-width: 2.2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ball.is_ghost { fill: none; stroke-dasharray: 5 4; opacity: .7; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force.is_choice { color: var(--secondary); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_force.is_wrong { color: var(--red); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_flabel { font-size: 18px; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text:is(.is_flabel, .is_axis).is_correct { fill: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text:is(.is_flabel, .is_axis).is_revealed { fill: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_wedge { fill: color-mix(in srgb, var(--secondary) 12%, var(--white)); stroke: var(--secondary); stroke-width: 2; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_spring { fill: none; stroke: var(--bronze); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_runner { fill: none; stroke: var(--main); stroke-width: 2.4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_big :is(.ms_ph_icon, .ms_ph_body) { stroke-width: 1.3; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_puck { fill: color-mix(in srgb, var(--secondary) 55%, var(--white)); stroke: var(--secondary); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ice_line { stroke: color-mix(in srgb, var(--accent) 45%, var(--white)); stroke-width: 4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_magnet.is_n { fill: color-mix(in srgb, var(--coral) 22%, var(--white)); stroke: var(--coral); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_magnet.is_s { fill: color-mix(in srgb, var(--accent) 18%, var(--white)); stroke: var(--accent); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_fieldline { stroke: color-mix(in srgb, var(--secondary) 70%, transparent); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_field { stroke: var(--secondary); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_field { fill: var(--secondary); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_current { fill: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_region { fill: color-mix(in srgb, var(--accent) 5%, var(--white)); stroke: color-mix(in srgb, var(--secondary) 50%, transparent); stroke-width: 1.6; stroke-dasharray: 6 5; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across { color: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across circle { fill: var(--white); stroke: currentColor; stroke-width: 2.2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across circle.is_dot { fill: currentColor; stroke: none; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_field { color: var(--secondary); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_field circle:not(.is_dot) { stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_current { color: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_current circle:not(.is_dot) { fill: color-mix(in srgb, var(--accent) 10%, var(--white)); stroke-width: 3; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_choice { color: var(--secondary); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_wrong { color: var(--red); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_correct { color: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_revealed { color: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_rod { fill: none; stroke: color-mix(in srgb, var(--bronze) 75%, var(--white)); stroke-width: 8; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_axis_line { stroke: var(--main); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_lens { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_focus { font-size: 15px; fill: var(--secondary); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ray { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ray.is_dash { stroke-dasharray: 6 5; }
:is(.ms_training, .ms_modal_scheme) .is_virtual .ms_ph_force line { stroke-dasharray: 7 5; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_place { fill: var(--white); stroke: var(--main); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_place.is_wrong { fill: var(--red); stroke: var(--red); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_place.is_correct { fill: var(--green); stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_place.is_revealed { fill: var(--accent); stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_mark_line.is_correct .ms_ph_dim { stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_mark_line.is_revealed .ms_ph_dim { stroke: var(--accent); }
/* A tall lens picture and a wide picture of the left-hand rule need less width than the full scheme. */
.ms_training.ms_stacked .ms_main > .ms_board:has(:is(.ms_scheme_ph9_forces, .ms_scheme_ph9_lefthand)) { width: min(100%, 600px); }

/* Physics, grade 10: a circle of rotation, a lift cabin, a gas under a piston, a sample of a substance, isoprocess graphs,
   point charges with their field, a source with its internal resistance. */
:is(.ms_training, .ms_modal_scheme) .ms_ph_orbit { fill: none; stroke: var(--secondary); stroke-width: 2; stroke-dasharray: 7 6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_cabin { fill: color-mix(in srgb, var(--secondary) 6%, var(--white)); stroke: var(--secondary); stroke-width: 2.2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_rough { fill: color-mix(in srgb, var(--bronze) 45%, var(--white)); stroke: none; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_wood { fill: color-mix(in srgb, var(--bronze) 30%, var(--white)); stroke: color-mix(in srgb, var(--bronze) 70%, var(--main)); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_body.is_ghost, :is(.ms_training, .ms_modal_scheme) .ms_ph_puck.is_ghost { fill: none; stroke-dasharray: 6 5; opacity: .6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_tank { fill: color-mix(in srgb, var(--accent) 8%, var(--white)); stroke: var(--main); stroke-width: 2.4; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_formula { fill: var(--main); font-family: var(--main_font); font-size: 26px; font-weight: var(--main_boldest_weight); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_gas { fill: color-mix(in srgb, var(--accent) 9%, var(--white)); stroke: none; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_molecule { fill: color-mix(in srgb, var(--accent) 55%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_piston { fill: color-mix(in srgb, var(--secondary) 35%, var(--white)); stroke: var(--secondary); stroke-width: 1.8; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_rod_thin { stroke: var(--secondary); stroke-width: 4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_heat { stroke: var(--coral); stroke-width: 2.6; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_heat { fill: var(--coral); }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_process { stroke: var(--ms-main); stroke-width: 3; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_state { font-size: 17px; font-style: normal; font-family: var(--main_font); font-weight: var(--main_boldest_weight); }
:is(.ms_training, .ms_modal_scheme) .ms_grid.is_faint { opacity: .55; }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_part { stroke: var(--ms-aux); stroke-width: 2; stroke-dasharray: 5 4; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_part { fill: var(--ms-aux); font-size: 16px; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_charge { stroke-width: 2.2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_charge.is_plus { fill: color-mix(in srgb, var(--coral) 20%, var(--white)); stroke: var(--coral); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_charge.is_minus { fill: color-mix(in srgb, var(--accent) 18%, var(--white)); stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_sign { fill: none; stroke: var(--main); stroke-width: 2.6; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_qlabel { fill: var(--main); font-family: var(--main_font); font-size: 16px; font-weight: var(--main_boldest_weight); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_frame { fill: none; stroke: var(--secondary); stroke-width: 1.6; stroke-dasharray: 6 5; }
.ms_training.ms_stacked .ms_main > .ms_board:has(:is(.ms_scheme_ph10_iso, .ms_scheme_ph10_efield)) { width: min(100%, 600px); }

/* Physics, grade 11: forces across the picture, contours with the induced current and the answer pad of Lenz's rule, rails,
   a spring pendulum, a coil of a circuit, media and rays, a grating with its maxima, a metal plate with a photon. */
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_given { color: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_unknown { color: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_across.is_aux { color: var(--ms-aux); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_flabel.is_given { fill: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_flabel.is_unknown { fill: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_orbit:is(.is_correct, .is_revealed) { stroke-width: 2.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_orbit.is_correct { stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_orbit.is_revealed { stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_loop { fill: none; stroke: color-mix(in srgb, var(--bronze) 80%, var(--main)); stroke-width: 4.5; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_loop.is_back { stroke-width: 2.4; stroke-dasharray: 6 5; opacity: .6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_loop.is_turn { stroke-width: 2.4; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_flow_head { fill: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_flow_head.is_correct { fill: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_spin { color: var(--secondary); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_spin .is_line { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_spin .is_head { fill: currentColor; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_spin.is_wrong { color: var(--red); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_spin.is_correct { color: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_spin.is_revealed { color: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_pad { fill: var(--white); stroke: var(--secondary); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_pad.is_wrong { fill: color-mix(in srgb, var(--red) 12%, var(--white)); stroke: var(--red); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_pad.is_correct { fill: color-mix(in srgb, var(--green) 14%, var(--white)); stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_pad.is_revealed { fill: color-mix(in srgb, var(--accent) 12%, var(--white)); stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_pad { font-size: 16px; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_rail { stroke: var(--secondary); stroke-width: 3.4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_span { fill: color-mix(in srgb, var(--ms-unknown) 10%, transparent); stroke: none; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_body.is_correct { fill: color-mix(in srgb, var(--green) 20%, var(--white)); stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_body.is_revealed { fill: color-mix(in srgb, var(--accent) 18%, var(--white)); stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_coil { fill: none; stroke: color-mix(in srgb, var(--bronze) 80%, var(--main)); stroke-width: 2.6; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_coil.is_given { stroke: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_coil.is_unknown { stroke: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_coil.is_correct { stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_coil.is_revealed { stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_el:is(.is_given) .ms_el_plate { stroke: var(--ms-given); }
:is(.ms_training, .ms_modal_scheme) .ms_el:is(.is_unknown) .ms_el_plate { stroke: var(--ms-unknown); }
:is(.ms_training, .ms_modal_scheme) .ms_el:is(.is_correct) .ms_el_plate { stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_el:is(.is_revealed) .ms_el_plate { stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_medium { fill: color-mix(in srgb, var(--accent) 10%, var(--white)); stroke: none; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_medium.is_air { fill: color-mix(in srgb, var(--accent) 3%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_boundary { stroke: var(--secondary); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ray_head { fill: var(--orange); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ray.is_correct { stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ray.is_revealed { stroke: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ray_head.is_correct { fill: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_ray_head.is_revealed { fill: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_light { stroke: var(--orange); stroke-width: 2.4; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_grating { stroke: var(--secondary); stroke-width: 3; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_grating.is_ticks { fill: none; stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_screen { stroke: var(--main); stroke-width: 4; stroke-linecap: round; opacity: .7; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_beam { stroke: color-mix(in srgb, var(--orange) 55%, var(--white)); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_beam.is_key { stroke: var(--ms-unknown); stroke-width: 2.4; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_beam.is_correct { stroke: var(--green); stroke-width: 2.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_beam.is_revealed { stroke: var(--accent); stroke-width: 2.6; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_spot { fill: var(--orange); }
:is(.ms_training, .ms_modal_scheme) .ms_ph_plate { fill: color-mix(in srgb, var(--secondary) 30%, var(--white)); stroke: var(--secondary); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_photon { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_ph_photon_head { fill: var(--orange); }
.ms_training.ms_stacked .ms_main > .ms_board:has(.ms_scheme_ph11_lenz) { width: min(100%, 600px); }

/* Order of operations: the expression after the answer, the number of each action above its sign. */
:is(.ms_training, .ms_modal_scheme) .ms_order_text { fill: var(--main); font-family: var(--main_font); font-size: 30px; font-weight: var(--main_bolder_weight); font-variant-numeric: tabular-nums; }
:is(.ms_training, .ms_modal_scheme) .ms_order_text.is_answer.is_correct { fill: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_order_text.is_answer.is_revealed { fill: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_order_circle { fill: color-mix(in srgb, var(--ms-aux) 14%, var(--white)); stroke: color-mix(in srgb, var(--ms-aux) 60%, var(--white)); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_order_step { fill: color-mix(in srgb, var(--ms-aux) 70%, var(--main)); font-family: var(--main_font); font-size: 17px; font-weight: var(--main_boldest_weight); text-anchor: middle; }
:is(.ms_training, .ms_modal_scheme) .ms_order_tick { stroke: color-mix(in srgb, var(--ms-aux) 60%, var(--white)); stroke-width: 2; stroke-linecap: round; }
/* The order of the actions by a tap: a zone around each sign, the signs in the accent color of the trainer. */
:is(.ms_training, .ms_modal_scheme) .ms_order_text.is_tap_sign { fill: var(--blue_text); }
/* The exponent of a power is tapped like a sign: smaller, raised beside its base. */
:is(.ms_training, .ms_modal_scheme) .ms_order_text.is_power { font-size: 21px; }
:is(.ms_training .ms_target, .ms_modal_scheme .ms_target_copy).is_sign_zone:not(.is_wrong, .is_correct, .is_answer, :focus-visible) { fill: color-mix(in srgb, var(--blue3) 8%, transparent); stroke: color-mix(in srgb, var(--blue3) 40%, transparent); stroke-width: 1.4; }

/* Place value: a table of places with the classes or the integer and fractional parts, rounding on a number line. */
:is(.ms_training, .ms_modal_scheme) .ms_pv_group { fill: color-mix(in srgb, var(--ms-aux) 12%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_pv_group_text { fill: color-mix(in srgb, var(--ms-aux) 70%, var(--main)); font-family: var(--main_font); font-size: 14px; font-weight: var(--main_boldest_weight); }
:is(.ms_training, .ms_modal_scheme) .ms_pv_group_text.is_two { font-size: 13px; }
:is(.ms_training, .ms_modal_scheme) .ms_pv_label { fill: var(--secondary); font-family: var(--main_font); font-size: 13px; font-weight: var(--main_bold_weight); }
:is(.ms_training, .ms_modal_scheme) .ms_pv_cell { fill: var(--white); stroke: var(--lightgray_2); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_pv_cell.is_key { fill: color-mix(in srgb, var(--ms-main) 14%, var(--white)); stroke: var(--ms-main); stroke-width: 2.2; }
:is(.ms_training, .ms_modal_scheme) .ms_pv_cell.is_zero { fill: color-mix(in srgb, var(--ms-unknown) 16%, var(--white)); stroke: var(--ms-unknown); stroke-width: 2.2; }
:is(.ms_training, .ms_modal_scheme) .ms_pv_cell.is_aux { fill: color-mix(in srgb, var(--ms-aux) 12%, var(--white)); stroke: color-mix(in srgb, var(--ms-aux) 60%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_pv_digit, :is(.ms_training, .ms_modal_scheme) .ms_pv_comma { fill: var(--main); font-family: var(--header_font); font-size: 26px; font-weight: var(--main_bolder_weight); font-variant-numeric: tabular-nums; }
:is(.ms_training, .ms_modal_scheme) .ms_pv_comma { font-size: 30px; }
:is(.ms_training, .ms_modal_scheme) :is(.ms_pv_digit, .ms_pv_comma).is_answer.is_correct { fill: var(--green); }
:is(.ms_training, .ms_modal_scheme) :is(.ms_pv_digit, .ms_pv_comma).is_answer.is_revealed { fill: var(--accent); }
:is(.ms_training, .ms_modal_scheme) .ms_pv_sep { stroke: var(--secondary); stroke-width: 2; stroke-linecap: round; }
/* A table beside the question: «?» instead of the names, which appear with the answer. */
:is(.ms_training, .ms_modal_scheme) .ms_pv_label.is_masked { fill: var(--ms-unknown); font-size: 17px; font-weight: var(--main_boldest_weight); }
:is(.ms_training, .ms_modal_scheme) .ms_rd_axis { stroke: var(--main); stroke-width: 2; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_rd_tick { stroke: var(--main); stroke-width: 2.4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_rd_tick.is_mid { stroke: var(--secondary); stroke-width: 2; stroke-dasharray: 3 3; }
:is(.ms_training, .ms_modal_scheme) .ms_rd_arc { fill: none; stroke: var(--ms-aux); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_rd_point { fill: var(--ms-unknown); stroke: var(--white); stroke-width: 2; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_point { fill: color-mix(in srgb, var(--ms-unknown) 75%, var(--main)); font-size: 18px; }

/* Properties of operations and figures: arcs over grouped numbers, circles, segments, angles and polygons. */
:is(.ms_training, .ms_modal_scheme) .ms_order_text.is_sign { fill: var(--secondary); }
:is(.ms_training, .ms_modal_scheme) .ms_order_text.is_grouped { fill: color-mix(in srgb, var(--ms-aux) 70%, var(--main)); }
:is(.ms_training, .ms_modal_scheme) .ms_pr_arc { fill: none; stroke: color-mix(in srgb, var(--ms-aux) 70%, var(--white)); stroke-width: 2.4; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_fg_circle { fill: none; stroke: var(--main); stroke-width: 2.6; }
:is(.ms_training, .ms_modal_scheme) .ms_fg_disk { fill: color-mix(in srgb, var(--ms-main) 22%, var(--white)); stroke: var(--main); stroke-width: 2.6; }
:is(.ms_training, .ms_modal_scheme) .ms_fg_shape { fill: color-mix(in srgb, var(--ms-aux) 8%, var(--white)); stroke: var(--main); stroke-width: 2.6; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_fg_point { fill: var(--main); }
:is(.ms_training, .ms_modal_scheme) .ms_fg_line { stroke: var(--main); stroke-width: 3; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_fg_line.is_known { stroke: var(--ms-main); }
:is(.ms_training, .ms_modal_scheme) .ms_fg_line.is_dash { stroke: var(--ms-unknown); stroke-dasharray: 8 6; }
:is(.ms_training, .ms_modal_scheme) .ms_fg_mark { fill: none; stroke: var(--ms-aux); stroke-width: 2.4; stroke-linejoin: round; }
/* Figures from rectangles (ortho6): the cuts and the completing or cut-out rectangle of the solution. */
:is(.ms_training, .ms_modal_scheme) .ms_fg_cut { fill: none; stroke: var(--ms-unknown); stroke-width: 2.6; stroke-dasharray: 8 6; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_fg_cut.is_added { fill: color-mix(in srgb, var(--ms-unknown) 14%, transparent); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_piece { fill: color-mix(in srgb, var(--ms-unknown) 75%, var(--main)); font-size: 15px; }
/* The tree of variants (perebor_tree): the paths to the favourable numbers. */
:is(.ms_training, .ms_modal_scheme) .ms_arrow:is(.is_correct, .is_revealed) { stroke-width: 4; }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_correct { stroke: var(--green); }
:is(.ms_training, .ms_modal_scheme) .ms_arrow.is_revealed { stroke: var(--accent); }
/* Stacked schemes of figures would fill the whole card: the angle and the tap pictures keep a moderate size. */
.ms_training.ms_stacked .ms_main > .ms_board:has(.ms_scheme_angle_kind) { width: min(100%, 400px); }
.ms_training.ms_stacked .ms_main > .ms_board:has(:is(.ms_scheme_circle_parts, .ms_scheme_right_angles)) { width: min(100%, 520px); }

/* Primary-school gaps: rods of ten and single cubes, ticks of equal sides and side labels of a polygon. */
:is(.ms_training, .ms_modal_scheme) .ms_bl_rod { fill: color-mix(in srgb, var(--ms-main) 22%, var(--white)); stroke: var(--ms-main); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_bl_cut { stroke: color-mix(in srgb, var(--ms-main) 55%, var(--white)); stroke-width: 1.2; }
:is(.ms_training, .ms_modal_scheme) .ms_bl_cube { fill: color-mix(in srgb, var(--ms-unknown) 26%, var(--white)); stroke: var(--ms-unknown); stroke-width: 1.6; }
:is(.ms_training, .ms_modal_scheme) .ms_fg_tick { stroke: var(--main); stroke-width: 2.2; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.ms_pg_label { font-size: 17px; }

/* Modulus of a number: the coordinate line, brackets from zero to the numbers and the distances on chips, stacked fractions. */
:is(.ms_training, .ms_modal_scheme) .ms_md_axis { fill: none; stroke: var(--main); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_md_tick { stroke: var(--secondary); stroke-width: 1.8; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_md_bracket { fill: none; stroke: var(--ms-aux); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms_training, .ms_modal_scheme) .ms_md_frac { font-size: 15px; }
:is(.ms_training, .ms_modal_scheme) .ms_md_bar { stroke: var(--main); stroke-width: 1.6; stroke-linecap: round; }
:is(.ms_training, .ms_modal_scheme) .ms_chip.is_aux .ms_md_bar { stroke: color-mix(in srgb, var(--ms-aux) 70%, var(--main)); }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.is_zero { font-weight: var(--main_boldest_weight); }

/* An improper fraction and a mixed number (mixed_strips): whole strips, the shaded parts of the last one, the division line. */
:is(.ms_training, .ms_modal_scheme) .ms_mx_cell { fill: var(--white); stroke: var(--lightgray_2); stroke-width: 1.2; }
:is(.ms_training, .ms_modal_scheme) .ms_mx_cell.is_whole { fill: color-mix(in srgb, var(--ms-given) 30%, var(--white)); stroke: color-mix(in srgb, var(--ms-given) 60%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_mx_cell.is_part { fill: color-mix(in srgb, var(--ms-aux) 34%, var(--white)); stroke: color-mix(in srgb, var(--ms-aux) 65%, var(--white)); }
:is(.ms_training, .ms_modal_scheme) .ms_mx_strip { fill: none; stroke: var(--main); stroke-width: 1.8; }
:is(.ms_training, .ms_modal_scheme) .ms_svg_text.ms_mx_caption { font-size: 20px; font-weight: var(--main_boldest_weight); }
/* The least common denominator (common_strips): the borders of the given parts over the small common parts. */
:is(.ms_training, .ms_modal_scheme) .ms_cs_major { stroke: var(--main); stroke-width: 1.8; }

/* Statistics: every number has its own color. */
.train_stat .time_spent { color: var(--progress); }

@media (prefers-reduced-motion: no-preference) {
    .ms_training .ms_answer.is_entering > * { animation: ms-fade .3s ease-out backwards; }
    .ms_training .ms_answer.is_entering > :nth-child(2) { animation-delay: 50ms; }
    .ms_training .ms_answer.is_entering > :nth-child(3) { animation-delay: 100ms; }
    .ms_training .ms_answer.is_entering > :nth-child(4) { animation-delay: 150ms; }
    .ms_training .is_entering > * { animation: ms-fade .35s ease-out backwards; }
    .ms_training .is_named { animation: ms-fade .4s ease-out backwards; }
    :is(.ms_training, .ms_modal_scheme):is(.is_correct, .is_revealed) .ms_chip:is(.is_correct, .is_revealed) { animation: ms-pop .45s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
}
@keyframes ms-fade { from { opacity: 0; } }
@keyframes ms-pop { 0% { scale: .6; } 100% { scale: 1; } }

@media (max-width: 1100px) {
    .ms_training.has_board .ms_card { grid-template-columns: 1fr; grid-template-areas: "main" "board"; row-gap: 16px; width: min(100%, 640px); }
    .ms_training.has_board .ms_main { align-items: center; text-align: center; }
    .ms_training.has_board .ms_answer_row { justify-content: center; }
    .ms_training.has_board .ms_keypad .mini_keypad { margin-left: auto; }
    .ms_training.has_board .ms_calc_slot { justify-content: center; }
    .ms_training.ms_mode_choice.has_board :is(.ms_answer, .ms_help) { align-self: center; }
    .ms_training .ms_board { width: min(100%, 560px); justify-self: center; }
    .ms_training.ms_figure.has_board .ms_card { grid-template-areas: "head" "board" "main"; grid-template-rows: auto; row-gap: 16px; width: min(100%, 1000px); }
    .ms_training.ms_figure.has_board .ms_head { align-self: start; }
    .ms_training.ms_figure.has_board .ms_main { align-items: flex-start; text-align: left; }
    .ms_training.ms_figure.has_board :is(.ms_answer_row, .ms_calc_slot) { justify-content: flex-start; }
    .ms_training.ms_figure.has_board .ms_keypad .mini_keypad { margin-left: 0; }
}
@media (max-width: 480px) {
    .ms_training { padding: 16px 12px 20px; }
    .ms_training .ms_task { font-size: 17px; }
    .ms_training .ms_formula { font-size: 22px; }
    .ms_training .ms_input_shell { width: 128px; height: 62px; }
    .ms_training .ms_answer.is_multi .ms_input_shell { width: 88px; }
    .ms_training .ms_input { font-size: 28px !important; }
    .ms_training .ms_answer.is_multi .ms_fraction_field .ms_input_shell { width: 76px; height: 50px; }
    .ms_training .ms_fraction_field .ms_input { font-size: 24px !important; }
    .ms_training .ms_label, .ms_training .ms_unit { font-size: 20px; }
    .ms_training.ms_mode_choice .ms_answer { gap: 8px; }
    .ms_training .ms_option { min-height: 56px; padding: 8px 10px; font-size: 18px; }
    /* A trio with a long word option («Ни четная, ни нечетная») would wrap into four lines: the buttons stand in a column. */
    .ms_training.ms_mode_choice .ms_answer.is_trio.is_trio_words { grid-template-columns: 1fr; }
    /* The phone keypad is width: 100%: its wrapper spans the column instead of shrinking to the keys. */
    .ms_training .ms_keypad { width: 100%; }
    .ms_training .mini_keypad.ms_keypad_wide { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .ms_training :is(.ms_help, .ms_calc_toggle) { width: 50px; min-width: 50px; height: 50px; min-height: 50px; }
    .ms_solution_modal .modal-content h3 { font-size: 24px; }
    .ms_solution_modal ol { margin-top: 18px; padding-left: 24px; font-size: 18px; }
    .ms_solution_modal li + li { margin-top: 12px; }
}