/*
 * Страница задачи: условие, подсказки, проверка ответа и врезки сбоку.
 * Ниже, отдельным разделом, — страница разбора: у неё свой адрес, но тот же
 * каркас, и слаг (а значит и этот файл) у них общий.
 *
 * Собрано из task_page.html и task_solution.html. Правок против макета четыре,
 * и все из-за того, что страница должна работать без скрипта.
 *
 * Первая: разделы не спрятаны. В макете .tab-panel сразу display:none, здесь
 * прятать их можно только после того, как скрипт дописал .tabbed, — иначе без
 * JS от страницы остался бы один заголовок. По той же причине подчёркивание
 * активного таба тоже живёт внутри .tabbed: без него .tabs это просто якорные
 * ссылки, и отмечать в них «текущий» нечего.
 *
 * Вторая: подсказки и общий текст задания — <details>, а не кнопка с классом
 * .open, поэтому раскрытие описано через [open], а запертый уровень (.locked)
 * глушит summary, потому что его навешивает скрипт.
 *
 * Третья: вердикт приходит с сервера уже нарисованным, так что .verdict
 * видимый сразу и класса .show у него нет. Исходов три: к «верно» и «мимо»
 * добавился .na — у части задач нет проверенного ключа.
 *
 * Четвёртая: условие приезжает из базы, и в нём бывают таблица, выносная
 * формула, цитата и листинг. В макете их не было — эти блоки взяты из
 * paragraph-tasks.css и пересчитаны на токены сайта.
 */

  .page.task { padding-top: 26px; padding-bottom: 76px; }

  /* Врезок сбоку пять, колонка длиннее экрана — липкой она не держится. */
  .page.task .rail { position: static; max-height: none; overflow: visible; gap: 14px; }

  /* ---------- хлебные крошки ---------- */
  /* Повторяют крошки каталога: файл стилей на страницу один. */
  .crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .crumbs a { font-weight: 500; }
  .crumbs a:hover { color: var(--accent); }
  .crumbs .mi { font-size: 15px; color: var(--muted-2); }
  .crumbs .cur {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-2);
  }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 22px;
    align-items: start;
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  /* ---------- шапка задачи ---------- */
  .task-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--border); }
  .task-head-top { display: flex; align-items: flex-start; gap: 16px; }
  .task-num {
    width: 54px; height: 54px;
    flex: none;
    border-radius: 16px;
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent-700) 100%);
    color: white;
    display: grid;
    place-items: center;
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 8px 20px -8px var(--accent-glow);
  }
  /* У задачи без номера в квадрате её код: серифом в шесть знаков он не влезает. */
  .task-num.mono {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 500;
  }

  .task-title { min-width: 0; }
  .task-title h1 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .task-title .sub { font-size: 13px; color: var(--muted); }
  .task-title .sub b { color: var(--ink-2); font-weight: 500; }

  .task-actions { margin-left: auto; display: flex; gap: 6px; }
  .ico-btn {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    place-items: center;
    color: var(--muted);
    transition: all 0.18s;
  }
  .ico-btn:hover { background: var(--surface-2); color: var(--ink); }
  .ico-btn .mi { font-size: 18px; }

  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .chip .mi { font-size: 13px; }
  .chip-green { background: var(--green-soft); color: #0d7c3f; }
  .chip-yellow { background: var(--yellow-soft); color: #916b00; }
  .chip-red { background: var(--red-soft); color: #b62222; }
  .chip-violet { background: var(--accent-50); color: var(--accent-700); }
  .chip-ghost { background: var(--surface-2); color: var(--muted); }
  .chip-ghost.mono { letter-spacing: 0.03em; }
  /* Код банка внутри ярлыка источника: моноширинный он, а подпись рядом — нет. */
  .chip .mono {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  /* ---------- табы разделов ---------- */
  .tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 8px 26px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 15px 13px;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.16s, border-color 0.16s;
  }
  .tab:hover { color: var(--ink); }
  .tab.on { color: var(--ink); }
  .tab .badge {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
  }
  .tab.on .badge { background: var(--accent-50); color: var(--accent-700); }
  /* Таб-ссылка уводит на отдельный адрес — помечаем стрелкой. */
  .tab-link .out { font-size: 15px; color: var(--muted-2); }
  .tab-link:hover .out { color: var(--accent); }

  .tab-panel { padding: 26px; }
  /* Без скрипта разделы идут друг за другом, поэтому им нужна граница. */
  .tab-panel + .tab-panel { border-top: 1px solid var(--border); }

  /*
   * Скрипт дописал .tabbed: теперь таб действительно переключает, и только
   * теперь панели можно прятать, а полосу табов — делать липкой.
   */
  .card.tabbed .tab-panel { display: none; border-top: 0; }
  .card.tabbed .tab-panel.on { display: block; }
  .card.tabbed .tabs { position: sticky; top: 59px; z-index: 30; }
  .card.tabbed .tab.on { border-bottom-color: var(--accent); }

  /* ---------- общий текст задания ---------- */
  .material {
    margin-bottom: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow: hidden;
  }
  .material > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    cursor: pointer;
    font-size: 13.5px;
    list-style: none;
  }
  .material > summary::-webkit-details-marker { display: none; }
  .material > summary b { font-weight: 600; min-width: 0; }
  .m-kind {
    flex: none;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-50);
    color: var(--accent-700);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .material > summary .caret {
    margin-left: auto;
    flex: none;
    font-size: 18px;
    color: var(--muted-2);
    transition: transform 0.2s;
  }
  .material[open] > summary .caret { transform: rotate(180deg); }
  .m-body {
    padding: 0 16px 16px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-body);
    max-height: 420px;
    overflow-y: auto;
  }
  /* Короткий текст с картинкой: окно в 420px ниже самой картинки, и она
     оказалась бы видна только краем. Прокрутку снимаем — крутится страница, —
     а картинку ужимаем на пятую часть, чтобы вопрос не уехал далеко вниз. */
  .material.flat .m-body { max-height: none; overflow: visible; }
  .material.flat .illus img { max-height: 416px; }

  /* ---------- условие ---------- */
  .statement { font-size: 16.5px; line-height: 1.62; color: var(--ink-body); }
  .statement p + p,
  .m-body p + p,
  .hint-body p + p { margin-top: 12px; }

  .figure {
    margin: 22px 0;
    padding: 22px 18px 14px;
    background: var(--surface-2);
    border-radius: var(--radius);
    text-align: center;
    overflow-x: auto;
  }
  .figure svg { max-width: 100%; height: auto; }
  .figure .caption {
    display: block;
    margin-top: 10px;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--muted-2);
  }

  /* Растровая иллюстрация. Фона под ней нет, в отличие от .figure: сканы из
     банка почти всегда на своём белом, и серая подложка вокруг выглядит как
     рамка вокруг рамки.
     Потолок по высоте нужен из-за перерисовок: модель отдаёт квадрат 1024, и
     в полный рост он уводит поле ответа за нижний край экрана. Сканы банка
     мельче потолка и рисуются как есть — увеличивать их незачем, они от этого
     только замылятся. */
  .illus { margin: 22px 0; text-align: center; }
  .illus img {
    /* Обе стороны auto: иначе потолок по высоте ужмёт только её, а ширина
       останется от атрибута — и картинка растянется. */
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
    border-radius: calc(var(--radius) - 4px);
  }
  .illus figcaption {
    margin-top: 10px;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted-2);
  }
  .illus .zoom { display: inline-block; max-width: 100%; }

  /* Оригинал из банка под перерисовкой: строка-ссылка, пока закрыта. */
  .origin { margin-top: 12px; text-align: center; }
  .origin > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--muted-2);
    list-style: none;
  }
  .origin > summary::-webkit-details-marker { display: none; }
  .origin > summary:hover { color: var(--accent-700); }
  .origin > summary .caret { font-size: 16px; transition: transform 0.2s; }
  .origin[open] > summary .caret { transform: rotate(180deg); }
  .origin > a { display: inline-block; max-width: 100%; margin-top: 10px; }

  /* ---------- условие банка ---------- */
  /* Оригинал всего условия, в отличие от оригинала одной картинки, — полоса во
     всю ширину под условием: её надо заметить, не разглядывая. Но полоса
     служебная, и пока она закрыта, набрана как подпись, а не как кнопка
     действия: за ней идут ответ и «Проверить», спорить с ними ей нечем. */
  .origin-task {
    margin: 18px 0 0;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }
  .origin-task > summary {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--muted);
  }
  .origin-task[open] > summary {
    border-bottom: 1px solid var(--border);
    color: var(--ink-2);
  }

  /* Разметка банка набрана таблицами с атрибутами: цвета ячеек, рамки в один
     пиксель, шрифт Word. Своё оформление ей не навязываем — сверяют именно с
     тем, как задание выглядит у ФИПИ. Ограничиваем только ширину: там сплошь
     width="100%" на вложенных таблицах, и без прокрутки широкая матрица
     растягивает страницу. */
  .origin-task .o-body {
    overflow-x: auto;
    padding: 12px;
    background: var(--surface);
    border-radius: 0 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px);
    font: 13px/1.5 Arial, Helvetica, sans-serif;
    color: var(--ink-body);
  }
  .origin-task .o-body img { max-width: 100%; height: auto; }
  .origin-task .o-body p { margin: 0 0 8px; }
  .origin-task .o-body table { border-collapse: separate; }

  /* ---------- таблица данных ---------- */
  /* Во всю ширину карточки: матрица из коротких чисел иначе жмётся к левому
     краю и висит в полосе текста узким огрызком. Таблице, которая и по
     содержимому шире карточки, 100% не мешают — она раздвинется сама и уедет
     в горизонтальную прокрутку. */
  .datatable {
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .datatable .scroll { overflow-x: auto; }
  .datatable table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .datatable th {
    padding: 10px 14px;
    text-align: left;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
  }
  .datatable td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--ink-body);
  }
  .datatable tr:last-child td { border-bottom: 0; }
  .datatable td.is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 13px;
  }
  /* Шапка числовой колонки прижимается туда же, куда и числа под ней. */
  .datatable th.is-num { text-align: right; }
  /* Вне матрицы числовая колонка сжимается по содержимому, а свободную ширину
     забирает текст: иначе столбик из двузначных чисел растягивается на пол-
     таблицы и отрывается от строки, к которой относится. */
  .datatable:not(.is-matrix) th.is-num,
  .datatable:not(.is-matrix) td.is-num { width: 1%; }
  /* Само число не рвём, а заголовок над ним переносится: «номер билета» в одну
     строку на телефоне уводит в прокрутку таблицу, которая иначе влезает. */
  .datatable:not(.is-matrix) td.is-num { white-space: nowrap; }
  .datatable td.is-mark { background: var(--yellow-soft); font-weight: 600; color: var(--ink); }
  .datatable th[scope="row"] {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
  .datatable tr:last-child th[scope="row"] { border-bottom: 0; }
  /* Матрицу читают по пересечению строки и столбца, поэтому клетки по центру. */
  .datatable.is-matrix th,
  .datatable.is-matrix td,
  .datatable.is-matrix th.is-num,
  .datatable.is-matrix td.is-num { text-align: center; }
  .datatable .caption {
    padding: 9px 14px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
  }

  /* ---------- выносная формула ---------- */
  .formula-block {
    position: relative;
    margin: 20px 0;
    padding: 20px 56px 20px 24px;
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--accent-50) 100%);
    border: 1px solid var(--accent-100);
    border-radius: var(--radius);
    text-align: center;
    font-size: 17px;
    overflow-x: auto;
  }
  .formula-block .num {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 12px;
    color: var(--muted);
  }

  /* ---------- цитата-источник ---------- */
  .quote {
    margin: 20px 0;
    padding: 16px 20px 14px 26px;
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .q-text {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink);
  }
  .q-ref { margin-top: 8px; font-size: 12px; color: var(--muted); }
  .q-ref b { color: var(--ink-2); font-weight: 600; }

  /* ---------- листинг ---------- */
  .codesrc {
    margin: 20px 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #0a0a0a;
    color: #e6e6ea;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.55;
  }
  .cs-head {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: "Geist", sans-serif;
    font-size: 11.5px;
    color: #a0a0aa;
  }
  .codesrc pre { padding: 14px 18px; overflow-x: auto; }
  .codesrc .ln {
    display: inline-block;
    width: 24px;
    margin-right: 14px;
    text-align: right;
    color: #45454f;
    user-select: none;
  }

  /* ---------- чего пока нет: запись, картинка ---------- */
  .pending {
    margin: 20px 0;
    padding: 16px 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
  }
  .pending b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
  .pending p { font-size: 13px; line-height: 1.5; color: var(--muted); }

  /* ---------- аудирование ----------
     Плеер браузерный: свой пришлось бы учить перемотке, клавиатуре и
     экранным читалкам, а родной это уже умеет. Рамка — как у файлов к
     заданию, чтобы запись читалась частью условия, а не рекламным блоком. */
  .stmt-audio {
    margin: 20px 0;
    padding: 14px 16px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .sa-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .sa-ico { flex: none; width: 22px; height: 22px; color: var(--accent); }
  .sa-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
  .sa-text b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  .sa-text span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .stmt-audio audio { display: block; width: 100%; height: 40px; }
  .sa-src {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
  }
  .sa-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .sa-src a:hover { color: var(--accent); }

  /* ---------- прилагаемые файлы ----------
     Строкой, а не карточкой: файлов у задачи один-два, и крупная плашка
     перетянула бы внимание с условия на кнопку. */
  .stmt-files { margin: 20px 0; }
  .sf-head {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .stmt-files ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .sf-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
  }
  .sf-item:hover { border-color: var(--accent-200); background: var(--accent-50); }
  .sf-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sf-ico { width: 22px; height: 22px; color: var(--accent); }
  .sf-text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.35; }
  .sf-text b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  .sf-text span { font-size: 12.5px; color: var(--muted); }
  .sf-text .sf-in { color: var(--muted-2); overflow-wrap: anywhere; }
  .sf-dl { width: 20px; height: 20px; color: var(--muted); }
  .sf-item:hover .sf-dl { color: var(--accent); }

  /* ---------- добавка к условию ---------- */
  .answer-note {
    margin-top: 18px;
    padding: 12px 16px;
    background: var(--surface-2);
    border-radius: var(--radius);
    font-size: 13.5px;
    color: var(--muted);
  }
  .answer-note b { color: var(--ink-2); font-weight: 600; }

  /* ---------- поле ответа ---------- */
  .answer-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
  .answer-block .lbl {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .a-note {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 72ch;
  }
  .a-note b { color: var(--ink-2); font-weight: 600; }

  .answer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .answer-input {
    width: 190px;
    padding: 13px 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 17px;
    font-weight: 500;
    outline: none;
    transition: all 0.18s;
  }
  .answer-input::placeholder { color: var(--muted-2); font-weight: 400; }
  .answer-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
  .answer-input.ok { border-color: var(--green); background: var(--green-tint); }
  .answer-input.no { border-color: var(--red); background: var(--red-tint); }

  /* ---------- раскладка ответа ---------- */

  /*
   * Варианты, соответствие, порядок и пропуски. Взято из paragraph-tasks.css и
   * пересчитано на токены сайта, как и блоки условия выше.
   *
   * Против макета одно расхождение, и оно то же, что у всей страницы: в макете
   * вариант — это <button> с классом .is-selected от скрипта, здесь <label> с
   * настоящим radio внутри.
   *
   * Поэтому выбранное состояние описано через :checked, а не классом с сервера:
   * класс приезжает только с ответом страницы, а отметиться вариант должен в
   * тот момент, когда по нему щёлкнули. Маркер перекрашивает соседний селектор,
   * строку целиком — :has: маркер важнее, и он работает и там, где :has нет.
   *
   * Сам input не спрятан display:none — так он выпал бы из обхода с клавиатуры;
   * он размером в точку под маркером, и его видно только по фокусной рамке.
   */
  .task-a-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .task-a-opts .opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .task-a-opts .opt:hover { border-color: var(--accent-200); background: var(--accent-50); }
  .task-a-opts .opt input {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0;
    opacity: 0;
  }
  .task-a-opts .marker {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border: 1.5px solid var(--muted-2);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    transition: all 0.15s;
  }
  .task-a-opts.is-single .marker { border-radius: 50%; }
  .task-a-opts.is-multi .marker { border-radius: 5px; }
  .task-a-opts .opt-t { flex: 1; }

  .task-a-opts .opt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
  .task-a-opts input:checked ~ .marker {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
  }
  .task-a-opts .opt:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-50);
    color: var(--accent-700);
  }
  .task-a-opts.is-ok input:checked ~ .marker { background: var(--green); border-color: var(--green); }
  .task-a-opts.is-ok .opt:has(input:checked) {
    border-color: var(--green);
    background: var(--green-tint);
    color: #0d7c3f;
  }
  .task-a-opts.is-no input:checked ~ .marker { background: var(--red); border-color: var(--red); }
  .task-a-opts.is-no .opt:has(input:checked) {
    border-color: var(--red);
    background: var(--red-tint);
    color: #b62222;
  }

  /* Соответствие: две стопки рядом, заголовки — одной строкой сетки. */
  .task-a-match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 14px;
    margin-bottom: 16px;
  }
  .task-a-match.is-solo { grid-template-columns: minmax(0, 1fr); }
  .task-a-match .col-h {
    padding-bottom: 4px;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .task-a-match .m-col { display: flex; flex-direction: column; gap: 8px; }
  .task-a-match .row-left,
  .task-a-match .row-right,
  .task-a-seq .seq-item,
  .task-a-tf .tf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink);
  }
  .task-a-match .key,
  .task-a-seq .key,
  .task-a-tf .key {
    flex: none;
    min-width: 20px;
    font-family: Charter, "Bitstream Charter", Georgia, serif;
    font-style: italic;
    font-size: 18px;
    color: var(--accent);
  }
  .task-a-match .row-t,
  .task-a-seq .row-t,
  .task-a-tf .row-t { flex: 1; }

  /* Выбор номера: select, а не кнопка-«пикер» из макета — без JS выбирать нечем. */
  .picker {
    flex: none;
    margin-left: auto;
    min-width: 54px;
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface-2);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
  }
  .picker:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
  .task-a-match.is-ok .picker,
  .task-a-seq.is-ok .picker { border-color: var(--green); background: var(--green-tint); color: #0d7c3f; }
  .task-a-match.is-no .picker,
  .task-a-seq.is-no .picker { border-color: var(--red); background: var(--red-tint); color: #b62222; }

  /* Последовательность: пункты сверху, места под ними одной строкой. */
  .task-a-seq { margin-bottom: 16px; }
  .task-a-seq .seq-items { display: flex; flex-direction: column; gap: 8px; }
  .task-a-seq .seq-order {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .task-a-seq .seq-order .picker { margin-left: 0; }
  .task-a-seq .seq-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted-2);
  }

  /* Верно / неверно: две кнопки в строке утверждения. */
  .task-a-tf { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .task-a-tf .tf-row { align-items: flex-start; }
  .task-a-tf .tf-btns { flex: none; display: flex; gap: 6px; margin-left: auto; }
  .task-a-tf .tf-b {
    position: relative;
    padding: 5px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
  }
  .task-a-tf .tf-b input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .task-a-tf .tf-b:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
  .task-a-tf .tf-b:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-50);
    color: var(--accent-700);
  }

  /* Текст с пропусками: поле стоит в строке, где пропуск, и не рвёт абзац. */
  .task-a-blank { margin-bottom: 16px; }
  .task-a-blank .blank-tpl { font-size: 15px; line-height: 2.1; color: var(--ink-body); }
  .blank-input {
    width: 9ch;
    padding: 3px 8px;
    border: 0;
    border-bottom: 1.5px solid var(--accent-200);
    border-radius: 4px 4px 0 0;
    background: var(--accent-50);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 14px;
    color: var(--ink);
    outline: none;
  }
  .task-a-blank .picker { margin-left: 0; max-width: 100%; vertical-align: baseline; }
  .blank-input:focus { border-bottom-color: var(--accent); background: var(--surface-2); }
  .task-a-blank.is-ok .blank-input { border-bottom-color: var(--green); background: var(--green-tint); }
  .task-a-blank.is-no .blank-input { border-bottom-color: var(--red); background: var(--red-tint); }

  /* Узкая колонка: столбцы соответствия встают друг под друга. */
  @media (max-width: 720px) {
    .task-a-match { grid-template-columns: minmax(0, 1fr); }
    .task-a-match .col-h:nth-of-type(2) { display: none; }
    .task-a-tf .tf-row { flex-wrap: wrap; }
    .task-a-tf .tf-btns { margin-left: 30px; }
  }

  /* Кнопки: на светлой странице главное действие тёмное, второе — обведённое. */
  .btn-dark:hover { background: var(--accent); }
  .btn-line {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--ink-2);
  }
  .btn-line:hover { border-color: var(--accent-200); color: var(--accent-700); }
  .btn-accent { background: var(--accent); color: white; }
  .btn-accent:hover { background: var(--accent-600); }
  .btn-sm { padding: 9px 15px; font-size: 13px; }
  .btn .mi { font-size: 17px; }

  /* ---------- вердикт ---------- */
  .verdict {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.55;
  }
  .verdict .v-h { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 6px; }
  .v-mark {
    flex: none;
    box-sizing: border-box;
    width: 22px; height: 22px;
    padding: 3px;
    border-radius: 50%;
    font-size: 16px;
    color: white;
  }
  .verdict .v-body { color: var(--ink-body); }
  .verdict a { color: var(--accent-700); font-weight: 600; border-bottom: 1px solid var(--accent-200); }
  .verdict.ok { background: var(--green-tint); border: 1px solid #bfe9d1; color: #0d7c3f; }
  .verdict.ok .v-mark { background: var(--green); }
  .verdict.no { background: var(--red-tint); border: 1px solid #f6cdcd; color: #b62222; }
  .verdict.no .v-mark { background: var(--red); }
  /* Третий исход: ключа нет, сверяет ученик — поэтому ни зелёный, ни красный. */
  .verdict.na { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink-2); }
  .verdict.na .v-mark { background: var(--muted); }
  /* Эталон рядом со ссылками на разбор — не акцентным цветом, чтобы его не
     принимали за ссылку. */
  .v-ans {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
  }
  .v-miss { margin: 6px 0; padding-left: 20px; list-style: disc; }
  .v-miss li { margin-top: 2px; }

  /* ---------- инструменты ---------- */
  .tools-row { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
  .tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
  }
  .tool-chip .g {
    width: 20px; height: 20px;
    flex: none;
    border-radius: 6px;
    display: grid;
    place-items: center;
  }
  .tool-chip .g .mi { font-size: 12px; }
  .g-violet { background: var(--accent-50); color: var(--accent-700); }
  .g-blue { background: var(--blue-soft); color: #1a6fd0; }
  .g-yellow { background: var(--yellow-soft); color: #916b00; }

  /* ---------- подсказки ---------- */
  .hints-intro {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--accent-50);
    border-radius: var(--radius);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--accent-700);
  }
  .hints-intro .bulb {
    width: 26px; height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    display: grid;
    place-items: center;
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-size: 15px;
  }

  .hint {
    margin-bottom: 12px;
    border: 1px dashed var(--accent-200);
    border-radius: var(--radius);
    background: var(--accent-50);
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
  }
  .hint > summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-700);
    list-style: none;
  }
  .hint > summary::-webkit-details-marker { display: none; }
  .hint .lv {
    width: 26px; height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    display: grid;
    place-items: center;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
  }
  .hint .h-t { min-width: 0; }
  .hint .tail {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
  }
  .hint .t-note {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    opacity: 0.75;
  }
  .hint .caret { font-size: 18px; transition: transform 0.2s; }
  .hint[open] .caret { transform: rotate(90deg); }
  .hint-body {
    padding: 0 16px 16px 53px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-body);
  }

  /* Последний уровень — фактически решение, поэтому предупреждающий жёлтый. */
  .hint.direct { border-color: #f3dfa0; background: var(--yellow-soft); }
  .hint.direct > summary { color: #916b00; }
  .hint.direct .lv { background: var(--yellow); color: #4a3600; }

  /*
   * Запертый уровень: класс навешивает скрипт, открыть его нечем — значит и
   * summary не должен реагировать на клик.
   */
  .hint.locked { border-style: solid; border-color: var(--border); background: var(--surface-2); }
  .hint.locked > summary { color: var(--muted-2); cursor: default; pointer-events: none; }
  .hint.locked .lv { background: var(--surface-3); color: var(--muted-2); }

  .hints-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
  }
  .hints-foot .t { font-size: 14px; min-width: 0; }
  .hints-foot .t b { display: block; font-weight: 600; margin-bottom: 2px; }
  .hints-foot .t small { font-size: 13px; color: var(--muted); }
  .hints-foot .btn { margin-left: auto; }

  /* ---------- соседние задачи ---------- */
  .nav-strip {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 26px;
    border-top: 1px solid var(--border);
  }
  .nav-link { display: flex; align-items: center; gap: 10px; color: var(--muted); transition: color 0.18s; }
  .nav-link:hover { color: var(--ink); }
  .nav-link.next { text-align: right; margin-left: auto; }
  .nav-link small { display: block; font-size: 11px; color: var(--muted-2); }
  .nav-link b { font-size: 13.5px; font-weight: 600; }
  .nav-link .arrow { flex: none; color: var(--muted-2); }
  .nav-link .mi { font-size: 18px; }

  /* ---------- хвост для выдачи ---------- */
  .seo { margin-top: 26px; padding: 26px; }
  .seo h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
  .seo p { font-size: 14px; line-height: 1.65; color: var(--muted); }
  .seo p + p { margin-top: 10px; }
  .seo-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
  .seo-links a,
  .seo-links span {
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
  }
  .seo-links a:hover { background: var(--accent-50); color: var(--accent-700); }

  /* ---------- врезки сбоку ---------- */
  .box { padding: 18px; }
  .box h3 {
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .box-p { font-size: 13.5px; line-height: 1.55; color: var(--ink-body); }
  .box-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
  .box-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-700);
  }
  .box-link:hover { color: var(--accent); }
  .box-link .mi { font-size: 16px; }
  /* Внутри врезки рамка уже есть — своя была бы рамкой в рамке. */
  .box .soon { padding: 0; border: 0; background: none; }

  .similar { display: flex; flex-direction: column; gap: 2px; }
  .similar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: 10px;
    font-size: 13.5px;
    transition: background 0.16s;
  }
  .similar a:hover { background: var(--surface-2); }
  .similar .n {
    width: 26px; height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    display: grid;
    place-items: center;
    font-size: 11px;
  }
  .similar .tx { min-width: 0; line-height: 1.3; }
  .similar .tx small { display: block; font-size: 11px; color: var(--muted-2); }

  .cta-box {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: var(--radius-lg);
    color: white;
    background: linear-gradient(140deg, #1a1530 0%, #2a1f55 40%, var(--accent) 100%);
  }
  .cta-box::after {
    content: "";
    position: absolute;
    width: 180px; height: 180px;
    right: -60px; top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
  }
  .cta-box > * { position: relative; }
  .cta-box b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
  .cta-box p { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); margin-bottom: 14px; }
  .cta-box .btn { background: white; color: var(--ink); }
  .cta-box .btn:hover { background: rgba(255, 255, 255, 0.88); }

  /* ==================== страница разбора ==================== */
  /*
   * Тот же файл, потому что это та же страница: крошки, шапка, полоса разделов,
   * правая колонка и хвост у них общие, а отличается только начинка панели.
   * Панель здесь одна, поэтому .panel, а не .tab-panel: складывать во вкладки
   * нечего, и sticky у .tabs не включается — он живёт внутри .tabbed.
   */
  .panel { padding: 26px; }

  /* ---------- повтор условия ---------- */
  /* Условие на этой странице фон, а не главное, поэтому плашкой, а не текстом. */
  .recap {
    padding: 18px 20px;
    border-radius: var(--radius);
    background: var(--surface-2);
  }
  .recap .h {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .recap .statement { font-size: 15.5px; }
  .recap .material { margin-top: 0; }
  /* Чертёж, шапка таблицы и подпись в макете серые — на серой плашке их не видно. */
  .recap .figure,
  .recap .datatable th,
  .recap .datatable td.is-mark,
  .recap .datatable .caption { background: var(--surface); }
  .recap .material,
  .recap .datatable { border-color: var(--border-strong); }
  .recap-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-700);
  }
  .recap-link:hover { color: var(--accent); }
  .recap-link .mi { font-size: 16px; }

  /* ---------- предупреждение про ответ ---------- */
  .spoiler {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 16px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    font-size: 13.5px;
    color: var(--muted);
  }
  .spoiler .t { min-width: 0; }
  .spoiler .t b { display: block; margin-bottom: 2px; font-size: 14px; color: var(--ink); }
  .spoiler .btn { margin-left: auto; }

  /* ---------- заголовок раздела ---------- */
  .sec-h {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 32px 0 18px;
  }
  .sec-h h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
  .sec-h .note { font-size: 13px; color: var(--muted); }

  /* ---------- шаги ---------- */
  /*
   * Заголовков у шагов в данных нет, поэтому вся разметка цепочки — номер в
   * кружке и линия слева. Без линии это был бы просто набор абзацев с цифрами.
   */
  .steps { position: relative; padding-left: 44px; }
  .steps::before {
    content: "";
    position: absolute;
    left: 15px; top: 6px; bottom: 26px;
    width: 2px;
    background: linear-gradient(var(--accent-200), var(--border));
  }
  .step { position: relative; padding-bottom: 26px; }
  .step:last-child { padding-bottom: 0; }
  .step .dot {
    position: absolute;
    left: -44px; top: -2px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent-200);
    color: var(--accent-700);
    display: grid;
    place-items: center;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 500;
  }
  .step .dot .mi { font-size: 17px; }
  /* Последний шаг — тот, в котором получается ответ. */
  .step.final .dot { background: var(--green); border-color: var(--green); color: white; }
  .step p { font-size: 15.5px; line-height: 1.62; color: var(--ink-body); }
  .step p + p { margin-top: 9px; }

  .fx {
    display: block;
    margin: 13px 0;
    padding: 15px 18px;
    background: var(--surface-2);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent-200);
    text-align: center;
    overflow-x: auto;
  }
  .fx.result { background: var(--green-tint); border-left-color: var(--green); }

  /* ---------- ответ ---------- */
  .answer-final {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding: 22px 26px;
    border-radius: var(--radius-lg);
    background: var(--green-tint);
    border: 1px solid #bfe9d1;
  }
  .answer-final .a-main { min-width: 0; }
  .answer-final .lbl {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--green);
  }
  .answer-final .big {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 46px;
    line-height: 1;
    color: #0d7c3f;
  }
  /* У задания с развёрнутым решением «ответ» — это абзац, а не строка в бланк. */
  .answer-final .long { font-size: 15px; line-height: 1.6; color: #0d7c3f; }
  .answer-final .long p + p { margin-top: 8px; }
  .answer-final .cells-wrap { margin-left: auto; text-align: right; }
  .answer-final .cells { display: flex; gap: 4px; }
  .answer-final .cell {
    width: 30px; height: 38px;
    border-radius: 6px;
    background: var(--surface);
    border: 1.5px solid #bfe9d1;
    display: grid;
    place-items: center;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 17px;
    color: #0d7c3f;
  }
  .answer-final .cells-wrap small {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
  }
  .a-warn,
  .a-ok {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
  }
  .a-warn .mi,
  .a-ok .mi { flex: none; margin-top: 2px; font-size: 16px; }
  .a-warn .mi { color: var(--yellow); }
  .a-ok .mi { color: var(--green); }

  /* ---------- частые ошибки ---------- */
  /* Доли неверных ответов из макета нет: статистику решений мы не собираем. */
  .miss-list { display: flex; flex-direction: column; gap: 10px; }
  .miss {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .miss .x {
    flex: none;
    box-sizing: border-box;
    margin-top: 1px;
    width: 20px; height: 20px;
    padding: 2px;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red);
    font-size: 16px;
  }
  .miss p { font-size: 14px; line-height: 1.55; color: var(--ink-body); }

  /* ---------- дальше по теме ---------- */
  .next-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
  }
  .next-strip .t { min-width: 0; }
  .next-strip .t b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; }
  .next-strip .t small { font-size: 13px; color: var(--muted); }
  .next-strip .btn { margin-left: auto; }

  /* ---------- узкие экраны ---------- */
  @media (max-width: 1000px) {
    .layout { grid-template-columns: 1fr; }
    .page.task { padding-top: 18px; }
  }
  @media (max-width: 620px) {
    .task-head { padding: 18px 16px 14px; }
    .task-head-top { gap: 12px; flex-wrap: wrap; }
    .task-title { flex: 1 1 180px; }
    .task-num { width: 44px; height: 44px; border-radius: 13px; font-size: 22px; }
    .task-num.mono { font-size: 10px; }
    .task-title h1 { font-size: 18px; }
    /* Кнопок три, и в одну строку с заголовком они уже не ложатся. */
    .task-actions { order: 3; width: 100%; margin-left: 0; }
    .tabs { padding: 6px 16px 0; }
    .card.tabbed .tabs { top: 57px; }
    .tab-panel { padding: 20px 16px; }
    .tab-panel + .tab-panel { padding-top: 20px; }
    .statement { font-size: 15.5px; }
    .answer-input { width: 100%; }
    .answer-row .btn { flex: 1 1 auto; justify-content: center; }
    .hint-body { padding-left: 16px; }
    .hints-foot .btn { margin-left: 0; width: 100%; justify-content: center; }
    .nav-strip { flex-direction: column; padding: 16px; }
    .nav-link.next { margin-left: 0; text-align: left; flex-direction: row-reverse; justify-content: flex-end; }
    .seo { padding: 20px 16px; }

    .panel { padding: 20px 16px; }
    .recap { padding: 14px 16px; }
    .spoiler .btn { margin-left: 0; width: 100%; justify-content: center; }
    .sec-h { margin-top: 26px; }
    .steps { padding-left: 34px; }
    .steps::before { left: 11px; }
    .step .dot { left: -34px; width: 24px; height: 24px; font-size: 11px; }
    .step .dot .mi { font-size: 14px; }
    .fx { padding: 12px 14px; }
    .answer-final { padding: 18px; }
    .answer-final .big { font-size: 38px; }
    /* Клетки бланка в строку с ответом не влезают — они уходят под него. */
    .answer-final .cells-wrap { margin-left: 0; text-align: left; }
    .next-strip { padding: 16px; }
    .next-strip .btn { margin-left: 0; width: 100%; justify-content: center; }
  }