/* Dutch course — built on the EU site's tokens so it is part of the site,
   not a widget bolted onto it. Only what the course itself needs is new. */

/* ── ТОКЕНЫ КУРСА ─────────────────────────────────────────────────────────

   Палитра «Clinical Dutch» переопределяется здесь, а не в style.css, и это
   намеренно: course.css грузят только index.html и unit.html курса, поэтому
   блок ниже физически не может докрасить лендинг. Имена переменных те же,
   что на сайте, — ни одно правило ниже по файлу трогать не пришлось.

   Когда лендинг решат перевести на ту же палитру, этот блок переезжает в
   :root у style.css целиком, и отсюда удаляется. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
}

:root {
  /* Уровень 0 — страница, уровень 1 — карточки и плашки. Разделяет их
     не тень, а контур: дизайн строится на тональных слоях, а не на
     подъёме элементов над фоном. */
  --mentora-bg: #faf9f6;
  --mentora-bg-secondary: #f4f3f1;
  --mentora-border: #e5e4e0;
  --mentora-border-mid: #c1c8c2;

  --mentora-text: #1a1c1a;
  --mentora-text-primary: #1a1c1a;
  --mentora-text-secondary: #414844;
  /* Не #717973 из макета: там это цвет контура, а не текста. Мелким
     кеглем на плашке #f4f3f1 он даёт 4.04 — ниже AA, а этим цветом
     набраны подписи дней, номера юнитов и хлебные крошки. */
  --mentora-text-tertiary: #5f6763;
  --dark: #1a1c1a;

  /* Тот же токен --teal, но зелёный теперь тёмный, «сосновый»: у него
     контраст 10:1 к фону, и он работает как основной цвет действия,
     а не как акцент. */
  --teal: #1b4332;
  --teal-hover: #012d1d;
  --teal-text: #1b4332;
  --teal-dim: rgba(27, 67, 50, 0.08);
  --teal-border: rgba(27, 67, 50, 0.24);

  /* Тревога одна на весь курс: и «неверно», и идущая запись. Раньше она
     была вписана шестью разными местами прямо в правила. */
  --tc-alert: #ba1a1a;
  --tc-alert-soft: color-mix(in srgb, var(--tc-alert) 35%, var(--mentora-bg));

  /* Скругления жёстче: 4 px у элементов, 8 px у групп, круглых кнопок нет.
     Курс должен читаться как справочник, а не как игра. */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 8px;

  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* Весь нидерландский — серифом, весь интерфейс и переводы — Inter. Это
   несущая идея макета: язык, который учат, выглядит печатным текстом,
   а не подписью в приложении. Правило держится на lang="nl", который
   course.js уже проставляет на каждом нидерландском элементе, поэтому
   JS здесь не меняется вовсе.

   Селектор нарочно одноклассовый: у .tc-pattern pre специфичность выше,
   и колонки конструкций остаются в Inter, где выравнивание пробелами
   ещё как-то держится. Сериф их развалит. */
[lang="nl"] { font-family: var(--font-display); }

/* width: 100% здесь несущая, а не декоративная. .tc-page лежит внутри
   .tc-col, а это колонка-флекс: по поперечной оси элемент растянулся бы
   сам, но auto-поля отменяют растяжение — они забирают свободное место
   первыми. Без явной ширины колонка съёживалась до содержимого и вставала
   лентой посреди пустого экрана: на юните с короткими названиями дней
   («Tekst», «Woorden», «Spreken») это 256 px в окне 1440, то есть шестая
   часть ширины. max-width при этом не срабатывал вовсе — ограничивать
   было нечего. */
.tc-page { width: 100%; max-width: 780px; margin: 0 auto;
  /* сверху только воздух: высоту фиксированной шапки уже держит
     padding-top у body, второй такой же отступ съедал четверть экрана */
  padding: 20px 20px calc(150px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 24px; }

.tc-crumbs { display: flex; gap: 8px; font-size: 13px;
  color: var(--mentora-text-tertiary); }
.tc-crumbs a { color: var(--teal-text); text-decoration: none; }
.tc-crumbs a:hover { text-decoration: underline; }

.tc-head h1 { font-family: var(--font-display); font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15; margin: 0 0 6px; color: var(--mentora-text-primary); }
.tc-meta { font-size: 14px; color: var(--mentora-text-secondary); margin: 0; }
.tc-lede { font-size: 16px; line-height: 1.7; color: var(--mentora-text-secondary);
  max-width: 62ch; margin: 8px 0 0; }

/* --- список юнитов --- */
.tc-units { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.tc-units a { display: grid; grid-template-columns: 28px 1fr auto;
  gap: 4px 12px; align-items: center; padding: 14px 16px; text-decoration: none;
  color: inherit; border: 1px solid var(--mentora-border);
  border-radius: var(--radius-lg); background: var(--mentora-bg);
  transition: background 160ms ease, border-color 160ms ease; }
.tc-units a:hover { border-color: var(--teal-border); background: var(--teal-dim); }
.tc-units a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-unit-n { font-family: var(--font-mono); font-size: 13px;
  color: var(--mentora-text-tertiary); }
.tc-unit-t { font-weight: 600; font-size: 16px; }
.tc-unit-m { font-size: 13px; color: var(--mentora-text-tertiary);
  white-space: nowrap; }
/* Шесть дней юнита одной строкой под названием: видно, где остановился,
   без единой цифры. */
.tc-unit-p { grid-column: 2 / -1; display: flex; gap: 4px; }
.tc-unit-p i { flex: 1; max-width: 34px; height: 3px; border-radius: 2px;
  background: var(--mentora-border-mid); }
.tc-unit-p i.on { background: var(--teal); }

/* --- voice --- */
.tc-voice { border-top: 1px solid var(--mentora-border); padding-top: 20px;
  display: flex; flex-direction: column; gap: 10px; }
.tc-voice h2 { font-size: 17px; margin: 0; }
.tc-voice-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tc-voice button { padding: 9px 18px; font: inherit;
  border: 1px solid var(--teal); border-radius: var(--radius-md);
  background: var(--mentora-bg); color: var(--teal-text); cursor: pointer; }
.tc-voice button.is-recording { border-color: var(--tc-alert); color: var(--tc-alert); }
.tc-voice button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.tc-note { font-size: 13px; color: var(--mentora-text-tertiary); margin: 0; }
.tc-error { font-size: 14px; color: var(--tc-alert); margin: 0; }
.tc-warn { font-size: 14px; padding: 11px 15px; border-radius: var(--radius-md);
  background: var(--mentora-bg-secondary); border: 1px solid var(--mentora-border); }

/* Две колонки — только когда для них правда есть ширина. Ниже — текст
   и перевод друг под другом: перенос по два слова в колонке хуже,
   чем строка во всю ширину. */
@media (min-width: 720px) {
  .tc-page { padding-top: 32px; }
  .tc-line { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .tc-hide-tr .tc-line { grid-template-columns: 1fr; }
  .tc-dock-in { flex-direction: row; align-items: center; gap: 18px; }
  .tc-tempos { margin-left: auto; }
  .tc-tempos button { flex: 0 0 auto; }
}

/* Account: не стена перед курсом, а причина завести его потом */
.tc-account { border: 1px solid var(--mentora-border); border-radius: var(--radius-lg);
  background: var(--mentora-bg-secondary); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px; }
.tc-account p { margin: 0; font-size: 14.5px; line-height: 1.65;
  color: var(--mentora-text-secondary); }
.tc-account-links { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.tc-btn { display: inline-block; padding: 9px 18px; border-radius: var(--radius-md);
  background: var(--teal); color: #fff; text-decoration: none; font-size: 14px; }
.tc-btn:hover { background: var(--teal-hover); }
/* Кнопка входа — везде <button>, а не ссылка: до перехода надо сходить
   за кодом привязки. */
button.tc-btn { border: 0; font: inherit; font-size: 14px; cursor: pointer; }
button.tc-btn[disabled] { opacity: .6; cursor: default; }
.tc-account-links a:not(.tc-btn) { color: var(--teal-text); font-size: 14px; }

/* --- офлайн --- */
.tc-offline { display: flex; }
.tc-save { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 16px; font: inherit; font-size: 14px; cursor: pointer;
  border: 1px solid var(--mentora-border); border-radius: var(--radius-md);
  background: var(--mentora-bg); color: var(--mentora-text-secondary);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.tc-save:hover { border-color: var(--teal-border); background: var(--teal-dim); }
.tc-save:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-save:disabled { opacity: .65; cursor: default; }
.tc-save.is-saved { border-color: var(--teal-border); background: var(--teal-dim);
  color: var(--teal-text); }
.tc-save.is-saved::before { content: "✓"; font-weight: 700; }
/* Очередь прогресса — не ошибка: человек ничего не сделал не так. */
.tc-error.is-soft { color: var(--mentora-text-secondary); }

/* --- словарь --- */
.tc-words-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between; }
.tc-cards { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }
.tc-card { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: baseline; min-height: 44px; padding: 10px 14px;
  border-radius: var(--radius-md); }
.tc-card:nth-child(odd) { background: var(--mentora-bg-secondary); }
.tc-card-nl { font-size: 17px; font-weight: 500; }
.tc-card-gloss { font-size: 15px; color: var(--mentora-text-secondary); }
/* Закрытый словарь: перевод не исчезает, а прячется под плашку — иначе
   строка схлопывается и глаз теряет место. */
.is-covered .tc-card-gloss { color: transparent; background: var(--mentora-border);
  border-radius: 4px; cursor: pointer; }
.is-covered .tc-card.is-open .tc-card-gloss { color: var(--mentora-text-secondary);
  background: none; }

/* --- конструкции --- */
.tc-pattern { border: 1px solid var(--mentora-border); border-radius: var(--radius-lg);
  padding: 16px 18px; }
.tc-pattern h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600;
  color: var(--teal-text); }
.tc-pattern pre { margin: 0; font-family: var(--font-body); font-size: 17px;
  line-height: 1.7; white-space: pre-wrap; }

/* --- вопросы (день 5 и 6) --- */
.tc-qs { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; counter-reset: q; }
.tc-q { border: 1px solid var(--mentora-border); border-radius: var(--radius-lg); }
.tc-q-btn { display: flex; flex-direction: column; gap: 4px; width: 100%;
  min-height: 52px; padding: 13px 16px; font: inherit; text-align: left;
  cursor: pointer; background: none; border: 0; color: inherit;
  border-radius: var(--radius-lg); }
.tc-q-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-q span[lang] { font-size: 17px; }
.tc-q-a { font-size: 15px; color: var(--teal-text); visibility: hidden; }
.tc-q.is-open .tc-q-a { visibility: visible; }
.tc-q.is-plain { padding: 13px 16px; font-size: 17px; }

/* Место под док только там, где он есть: на днях без звука эти 150 px
   были бы пустой полосой внизу. Сколько именно оставить снизу, решают
   правила в разделе оболочки: у страницы под ней вкладки, у урока —
   кнопка шага. Общего «сорок пикселей» тут больше нет: они выигрывали
   у правила урока по специфичности и задвигали последнюю строку текста
   под кнопку «Continue». */

/* --- первый заход: выбор персонажа и языка -----------------------------

   Пока человек не ответил, кто он, экран принадлежит вопросу: витрина,
   боковое меню и полоса вкладок уходят. Разделы курса до этого выбора
   всё равно бессмысленны — тексты, город и слова зависят от ответа.
   Брендовая строка остаётся: у человека, которого просят о себе
   рассказать, должно быть видно, кого он спрашивает. */
.tc-onboarding .tc-side,
.tc-onboarding .tc-tabs { display: none; }
/* Предложение завести аккаунт во время выбора — второй призыв рядом
   с первым: человека просят войти раньше, чем он выбрал страну. */
.tc-onboarding .tc-account { display: none; }
body.tc-onboarding .tc-page {
  padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* Витрина на время выбора сжимается до строки: имя курса и обещание.
   Совсем убрать её нельзя — h1 этой страницы должен остаться в отрисованной
   разметке, этот адрес единственная дверь курса в поиске. Но абзац про
   диплом человеку, который уже открыл курс, читать незачем. */
.tc-onboarding .tc-head h1 { font-family: var(--font-body); font-size: 12px;
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mentora-text-secondary); margin: 0 0 2px; }
.tc-onboarding .tc-head .tc-meta { font-size: 12.5px;
  color: var(--mentora-text-tertiary); }
.tc-onboarding .tc-head .tc-lede { display: none; }

/* А тому, кто уже ответил, витрина не нужна вовсе: он пришёл заниматься,
   и первое, что он должен видеть, — свои юниты.

   Селектор с data-course-only обязателен. Класс .tc-head носит ещё и шапка
   юнита, которую рисует home(), — с ней правило прятало у юнита название
   и строку «сколько дней сделано». Витрина отличается от неё именно этим
   атрибутом: она принадлежит оглавлению, а не всякому экрану. */
.tc-known .tc-head[data-course-only] { display: none; }
@media (min-width: 900px) {
  .tc-onboarding .tc-topbar { display: flex; }
}

.tc-choose { display: flex; flex-direction: column; gap: 22px; max-width: 620px; }
/* Заголовок страницы — название курса, поэтому вопрос здесь h2, а не
   второй h1. Крупный он всё равно: на этом экране действие — ответ. */
.tc-choose > h2 { margin: 0; font-family: var(--font-display);
  font-size: clamp(26px, 5.4vw, 34px); line-height: 1.15; font-weight: 400;
  color: var(--mentora-text-primary); }
/* Вводный абзац принадлежит заголовку, а не следующему за ним вопросу. */
.tc-choose > .tc-hint { margin: -14px 0 0; max-width: 52ch; }
.tc-choose-block { display: flex; flex-direction: column; gap: 10px; }
/* Та же надпись, что над блоками в оглавлении: у разделов курса один
   способ называться. */
.tc-choose-block h2 { margin: 0; font-family: var(--font-body); font-size: 12px;
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mentora-text-secondary); }

/* Сетка, а не перенос строки. Раньше это был flex-wrap, и три страны
   ложились как «две и одна», а профессии — тремя плитками разной ширины
   по длине слова verpleegkundige. Рваный ряд читается как сломанная
   вёрстка, даже когда каждая плитка на месте. */
.tc-choose-group { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .tc-choose-group { grid-template-columns: repeat(3, 1fr); }
}
/* Язык — первый вопрос: из него выводится и сценарий. Подписи короткие
   и без второй строки, поэтому не строки списка, а плитки в ряд. */
.tc-choose-lang { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) {
  .tc-choose-lang { grid-template-columns: repeat(5, 1fr); }
}
.tc-choose-lang .tc-pick { flex-direction: row; align-items: center;
  justify-content: center; min-height: 52px; padding: 12px; text-align: center; }

/* Пояснение под названием вопроса, а не под всей формой: «Dutch stays
   Dutch» относится к языку подсказок и больше ни к чему. */
.tc-choose-block > .tc-note { margin: -4px 0 2px; }

/* На телефоне плитка — строка списка: название слева, кто и где — справа.
   В два этажа каждая занимала по 65 px, одиннадцать вариантов не влезали
   и на два экрана, а половина ширины строки при этом пустовала. */
.tc-choose-group:not(.tc-choose-lang) .tc-pick {
  flex-direction: row; align-items: baseline; justify-content: space-between;
  gap: 12px; min-height: 56px; }
@media (min-width: 560px) {
  .tc-choose-group:not(.tc-choose-lang) .tc-pick {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 2px; min-height: 68px; }
}
.tc-choose-lang .tc-pick strong { font-size: 15px; }

.tc-pick { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  justify-content: center; min-height: 60px; padding: 12px 16px; font: inherit;
  cursor: pointer;
  border: 1px solid var(--mentora-border); border-radius: var(--radius-lg);
  background: var(--mentora-bg); color: inherit; text-align: left;
  transition: background 160ms ease, border-color 160ms ease,
              transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.tc-pick strong { font-size: 16px; font-weight: 600; }
.tc-pick span { font-size: 13px; color: var(--mentora-text-tertiary); }
/* Наведение только там, где есть чем наводить: на телефоне :hover
   срабатывает по касанию и остаётся висеть на плитке, которую человек
   уже отпустил, — рядом с настоящим выбранным состоянием это читается
   как два выбранных ответа. */
@media (hover: hover) and (pointer: fine) {
  .tc-pick:hover { border-color: var(--teal-border); background: var(--teal-dim); }
}
.tc-pick:active { transform: scale(0.97); }
.tc-pick.is-on { border-color: var(--teal); background: var(--teal-dim);
  box-shadow: 0 0 0 1px var(--teal); }
.tc-pick.is-on strong { color: var(--teal-text); }
.tc-pick.is-on span { color: var(--teal-text); }
.tc-pick:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.tc-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; }
.tc-lang { display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--mentora-text-tertiary); }
.tc-lang select { min-height: 44px; padding: 8px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--mentora-border); border-radius: var(--radius-md);
  background: var(--mentora-bg); color: var(--mentora-text-secondary); }
.tc-lang select:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* --- упражнения ---------------------------------------------------------

   Проверка нужна не ради оценки, поэтому здесь нет ни таймера, ни процентов,
   ни красных крестов во всю строку: только «верно» зелёным и верный ответ
   рядом с ошибкой. */
.tc-quiz { border-top: 1px solid var(--mentora-border); padding-top: 18px;
  display: flex; flex-direction: column; gap: 14px; }
.tc-quiz-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; }
.tc-quiz-head h2 { margin: 0; font-size: 17px; }
.tc-quiz-n { font-family: var(--font-mono); font-size: 13px;
  color: var(--mentora-text-tertiary); font-variant-numeric: tabular-nums; }
/* Задание — компактный блок посреди экрана, как и любой другой шаг.

   Раньше оно растягивалось на min-height: calc(100vh - 260px), а варианты
   ответа прижимались к его низу через margin-top: auto. Два выдуманных
   числа сразу: 260 не совпадало ни с одной реальной высотой полосы и
   кнопки, а 100vh на телефоне — это экран вместе с адресной строкой,
   заведомо больше видимой части. Между вопросом и ответами оставалось
   пол-экрана пустоты, и на коротком экране ответы уезжали под сгиб.

   Теперь высоту задаёт содержимое, а сцена ставит блок по центру — так же,
   как текст, конструкцию и «послушать». Ответы оказываются в середине
   экрана, а не у нижнего края: до них дотягивается тот же палец, но
   пустоты между вопросом и ними больше нет. */
.tc-task { display: flex; flex-direction: column; gap: 18px; }
.tc-task-q { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 600;
  letter-spacing: -0.01em; }
.tc-task-opts { display: flex; flex-direction: column; gap: 10px; }
.tc-opt { display: block; width: 100%; min-height: 60px; padding: 16px 20px;
  font: inherit; font-size: 18px; text-align: left;
  cursor: pointer; border-radius: var(--radius-lg);
  border: 1px solid var(--mentora-border); background: var(--mentora-bg);
  color: inherit; transition: background 160ms ease, border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .tc-opt:hover { border-color: var(--teal-border); background: var(--teal-dim); }
}
.tc-opt:active:not(:disabled) { transform: scale(0.98); }
.tc-opt:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-opt.is-right { border-color: var(--teal); background: var(--teal-dim);
  color: var(--teal-text); font-weight: 600; }
.tc-opt.is-wrong { border-color: var(--tc-alert); color: var(--tc-alert); }
.tc-opt.is-used { opacity: .35; }
.tc-opt:disabled { cursor: default; }
.tc-bank { flex-direction: row; flex-wrap: wrap; }
.tc-bank .tc-opt { width: auto; min-height: 52px; padding: 13px 16px; }
.tc-slots { min-height: 52px; padding: 13px 16px; font-size: 18px; line-height: 1.5;
  border-radius: var(--radius-lg); background: var(--mentora-bg-secondary);
  border: 1px solid var(--mentora-border); }
.tc-task.is-checked .tc-slots { border-color: var(--teal); }
.tc-task.is-wrong .tc-slots { border-color: var(--tc-alert); color: var(--tc-alert); }
.tc-undo { align-self: flex-start; }
/* Второстепенное действие рядом с главным: «Show translation», «Cover
   translations», «Undo», «Again», «Translation» в плеере, «See the word
   list». Шесть кнопок в разных местах курса жили вообще без единого
   правила — браузер рисовал их своей системной серой кнопкой, и высота
   выходила 22 px при пальце в 44. */
.tc-toggle { display: inline-flex; align-items: center; justify-content: center;
  /* Кнопка шириной по подписи, а не во всю колонку: в колонке-флексе
     inline-flex всё равно растянулся бы до края. */
  width: fit-content; max-width: 100%;
  min-height: 44px; padding: 10px 16px; font: inherit; font-size: 14px;
  font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--teal-text); background: transparent;
  border: 1px solid var(--teal-border); border-radius: var(--radius-md);
  transition: background 160ms ease, border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .tc-toggle:hover { background: var(--teal-dim); border-color: var(--teal); }
}
.tc-toggle:active { transform: scale(0.97); }
.tc-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Нажатое состояние переключателя видно, а не угадывается по подписи. */
.tc-toggle[aria-pressed="true"] { background: var(--teal-dim); border-color: var(--teal); }

.tc-quiz-result { margin: 0; font-size: 17px; }
.tc-explain { margin: 0 0 12px; font-size: 15px; line-height: 1.65;
  color: var(--mentora-text-secondary); }

/* Привязанный курс — спокойное состояние, а не ещё один призыв: человек
   уже сделал, что от него хотели. */
.tc-account.is-linked { background: var(--teal-dim); border-color: var(--teal-border); }
.tc-account button.tc-btn { border: 0; font: inherit; font-size: 14px;
  cursor: pointer; min-height: 44px; }
.tc-account button.tc-btn:disabled { opacity: .6; cursor: default; }


/* --- урок ---------------------------------------------------------------

   Во время занятия человек занимается, а не выбирает раздел меню: шапка
   сайта уходит, экран занимает урок. Подвала на страницах курса нет
   вовсе — маркетинговые ссылки посреди занятия уводят из него, а на
   телефоне это ещё и лишний экран прокрутки под каждым уроком. */
.tc-in-lesson .mh,
.tc-in-lesson .tc-crumbs { display: none; }
/* Занятие занимает страницу целиком: заголовок раздела, вводный текст
   и предложение завести аккаунт во время урока — это чужие голоса. */
body.tc-in-lesson .tc-page > *:not(#tc-units):not(#tc-unit) { display: none; }
.tc-in-lesson body, body.tc-in-lesson { padding-top: 0 !important; }
.tc-in-lesson .tc-page { padding: 0 0 calc(96px + env(safe-area-inset-bottom));
  gap: 0; max-width: 720px; }

.tc-lesson-bar { position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: var(--mentora-bg); border-bottom: 1px solid var(--mentora-border); }
.tc-close { width: 40px; height: 40px; flex: 0 0 auto; font-size: 17px;
  cursor: pointer; border-radius: var(--radius-md); border: 1px solid var(--mentora-border);
  background: var(--mentora-bg); color: var(--mentora-text-secondary); }
.tc-close:hover { background: var(--teal-dim); color: var(--teal-text); }
.tc-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-progress2 { flex: 1; height: 8px; border-radius: 999px;
  background: var(--mentora-bg-secondary); overflow: hidden; }
.tc-progress2 i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--teal); transition: width 260ms ease; }
.tc-step-n { font-family: var(--font-mono); font-size: 12px;
  color: var(--mentora-text-tertiary); font-variant-numeric: tabular-nums; }

/* Шаг занятия — экран, а не абзац. Раньше содержимое прижималось к верху,
   а кнопка стояла внизу на своём фиксированном месте: на коротком шаге
   (три строки текста, одна карточка конструкции, одна кнопка «слушать»)
   между ними оставалось от трети до двух третей экрана пустоты, и человек
   искал, не потерялось ли там что-то ещё.

   Колонка теперь считается по-настоящему: страница занимает высоту экрана,
   сцена забирает всё, что осталось между полосой прогресса и кнопкой,
   и короткий шаг стоит в этом промежутке по центру. Длинный шаг растит
   сцену собой и прокручивается как прежде — flex-элемент не сжимается
   меньше своего содержимого. */
body.tc-in-lesson .tc-page { min-height: 100vh; min-height: 100svh; }
.tc-in-lesson #tc-unit, .tc-in-lesson #tc-units { flex: 1; gap: 0; }

.tc-stage { display: flex; flex-direction: column; gap: 18px;
  padding: 24px 16px 8px; }
.tc-in-lesson .tc-stage { flex: 1; justify-content: center; }
/* Кнопка занимает низ экрана целиком: это единственное действие шага,
   и целиться в неё не нужно. */
.tc-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--mentora-bg) 92%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--mentora-border); }
.tc-cta { display: block; width: 100%; max-width: 690px; margin: 0 auto;
  min-height: 54px; padding: 15px 20px; font: inherit; font-size: 17px;
  font-weight: 600; cursor: pointer; border-radius: var(--radius-lg);
  border: 1px solid var(--teal); background: var(--teal); color: #fff;
  transition: background 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .tc-cta:hover { background: var(--teal-hover); }
}
/* Ни одного :active на весь курс не было — ни одна кнопка не отзывалась
   на палец, и интерфейс на телефоне казался неживым. */
.tc-cta:active:not(:disabled) { transform: scale(0.98); }
.tc-cta { transition: background 160ms ease,
                      transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.tc-cta:disabled { opacity: .6; cursor: default; }
/* .tc-done-btn описывал только своё :disabled — и «Start the course»,
   главное действие первого экрана, браузер рисовал системной кнопкой:
   Arial, фаска border: 2px outset, высота 22 px. Теперь это .tc-cta,
   и отдельного вида у неё нет вовсе. */
.tc-done-btn:disabled { opacity: .5; cursor: default; }
.tc-cta[hidden] { display: none; }
/* У задания кнопки нет: шаг засчитывается выбором ответа. Полоса под ней
   оставалась на экране пустой — сорок восемь пикселей фона с рамкой и
   размытием, которые ничего не значат. */
.tc-in-lesson.tc-no-cta .tc-page {
  padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.tc-cta:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.tc-play-big { width: 72px; height: 72px; align-self: center; }
.tc-play-big svg { width: 32px; height: 32px; }
.tc-answer { margin: 0; font-size: 22px; font-weight: 600; color: var(--teal-text); }
.tc-finish { display: flex; flex-direction: column; gap: 10px;
  padding: 40px 0; text-align: center; }
.tc-finish h2 { margin: 0; font-family: var(--font-display); font-size: 30px; }

/* --- дом юнита ---

   #tc-unit — контейнер, в который скрипт рисует и дом юнита, и занятие.
   Он был обычным div'ом, и расстояния между блоками держались на случайных
   margin'ах соседей: кнопка «Day N» упиралась в список дней без единого
   пикселя зазора. */
#tc-unit { display: flex; flex-direction: column; gap: 20px; }

.tc-go { display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  width: 100%; padding: 20px; cursor: pointer; text-align: left;
  border: 1px solid var(--teal); border-radius: var(--radius-xl);
  background: var(--teal-dim); color: inherit; }
.tc-go:hover { background: color-mix(in srgb, var(--teal) 18%, transparent); }
.tc-go:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-go-k { font-family: var(--font-mono); font-size: 12px; color: var(--teal-text); }
.tc-go-t { font-size: 22px; font-weight: 600; }
.tc-go-c { font-size: 13px; color: var(--mentora-text-secondary); }

/* Шесть дней в столбик занимали пол-экрана высоты и четверть ширины.
   При двух колонках порядок чтения прежний — 1 2 / 3 4 / 5 6, — а список
   перестаёт быть лентой. Порог по ширине колонки, а не по наличию бокового
   меню: на планшете без меню она такая же широкая. */
.tc-days { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 720px) {
  .tc-days { display: grid; grid-template-columns: 1fr 1fr; }
}
.tc-day { display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px;
  width: 100%; min-height: 60px; padding: 14px 16px; cursor: pointer;
  text-align: left; border: 1px solid var(--mentora-border);
  border-radius: var(--radius-lg); background: var(--mentora-bg); color: inherit;
  transition: background 160ms ease, border-color 160ms ease; }
.tc-day:hover { border-color: var(--teal-border); background: var(--teal-dim); }
.tc-day:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-day.is-done .tc-day-n { color: var(--teal); font-weight: 700; }
.tc-day.is-next { border-color: var(--teal-border); }
.tc-day-n { grid-row: 1 / 3; font-family: var(--font-mono); font-size: 14px;
  color: var(--mentora-text-tertiary); }
.tc-day-t { font-size: 17px; font-weight: 600; }
.tc-day-s { font-size: 13px; color: var(--mentora-text-tertiary); }

/* --- строки текста ------------------------------------------------------

   Нидерландский крупнее перевода, но перевод не курсивом: целый абзац
   курсивом читается тяжелее, а читают его не носители языка. */
.tc-lines { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }
.tc-line { display: flex; flex-direction: column; gap: 4px; min-height: 44px;
  padding: 12px 14px; border-radius: var(--radius-lg); cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent; }
.tc-line:hover { background: var(--mentora-bg-secondary); }
/* Звучащая строка: полоска слева, а не только фон — на телефоне при ярком
   солнце фон почти не виден, а край строки видно всегда. */
.tc-line.is-now { background: var(--teal-dim);
  box-shadow: inset 3px 0 0 var(--teal); }
.tc-nl { font-size: 20px; line-height: 1.55; letter-spacing: -0.005em; }
.tc-tr { font-size: 15px; line-height: 1.55; color: var(--mentora-text-secondary); }

/* Круглый транспорт: играть — единственное действие на этом экране. */
.tc-play, .tc-ico { display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-md); border: 1px solid var(--teal);
  background: var(--teal); color: #fff;
  transition: background 160ms ease; }
.tc-play:hover { background: var(--teal-hover); }
.tc-play:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* --- словарь и повторения --- */
.tc-vocab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between; padding: 16px 18px;
  border: 1px solid var(--mentora-border); border-radius: var(--radius-lg);
  background: var(--mentora-bg-secondary); }
.tc-vocab-n { font-size: 15px; color: var(--mentora-text-secondary); }
.tc-vocab-n b { color: var(--mentora-text-primary); font-size: 17px; }
.tc-due { color: var(--teal-text); font-weight: 600; }
.tc-vocab-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.tc-vocab-acts .tc-btn { border: 0; font: inherit; font-size: 14px; cursor: pointer;
  min-height: 44px; }
.tc-vocab-unit { margin: 18px 0 6px; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mentora-text-tertiary); }
/* Поле лежит не во flex-строке, а прямо в колонке раздела, поэтому flex: 1
   ему ничего не давал: на телефоне поиск был шириной в 204 px — размер
   input по умолчанию — и упирался в кнопку «Repeat» без единого зазора. */
.tc-search { width: 100%; margin: 12px 0 16px; flex: 1;
  min-height: 44px; padding: 10px 16px; font: inherit;
  font-size: 15px; border-radius: var(--radius-md); border: 1px solid var(--mentora-border);
  background: var(--mentora-bg); color: inherit; }
.tc-search:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Начатое слово помечено краем, а не цветом текста: список читают глазами
   по нидерландской колонке, и перекрашивать её нельзя. */
.tc-card.is-seen { box-shadow: inset 3px 0 0 var(--teal); }

.tc-rate { display: flex; gap: 8px; width: 100%; max-width: 690px;
  margin: 0 auto; }
.tc-rate-b { flex: 1; min-height: 54px; padding: 14px 10px; font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-lg); border: 1px solid var(--mentora-border);
  background: var(--mentora-bg); color: inherit;
  transition: background 160ms ease, border-color 160ms ease; }
.tc-rate-b:disabled { opacity: .5; cursor: default; }
.tc-rate-b.is-again { border-color: var(--tc-alert-soft); color: var(--tc-alert); }
.tc-rate-b.is-good { border-color: var(--teal-border); color: var(--teal-text); }
.tc-rate-b.is-easy { border-color: var(--teal); background: var(--teal-dim);
  color: var(--teal-text); }

/* Атрибут hidden проигрывает любому классу с display: у .tc-account,
   .tc-offline и .tc-cab он есть, и скрытая секция оставалась
   на экране. Правило общее, потому что ошибка общая. */
[hidden] { display: none !important; }

/* --- оболочка курса -----------------------------------------------------

   Сорок юнитов в пяти блоках, словарь и справочник конструкций — это уже
   приложение, а не страница. Раскладка та же, что в кабинете: на десктопе
   боковое меню, на телефоне полоса вкладок внизу, под большим пальцем.
   Маркетинговой шапки сайта здесь нет — она уводит из курса, а дорога
   назад лежит в брендовой строке меню. */
.tc-shell { display: flex; min-height: 100vh; }
.tc-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Шапки .mh на этих страницах нет, значит и место под неё держать не надо. */
body { padding-top: 0; }

/* overflow-x: hidden у body в style.css делает сам body прокручиваемым
   блоком — а он не прокручивается, у него высота по содержимому. Для всего
   внутри это значит, что ближайший предок с прокруткой не двигается, и
   position: sticky ни к чему не липнет: боковое меню уезжало вверх вместе
   со страницей. clip обрезает так же, но контейнером прокрутки не становится,
   и меню снова стоит на месте. Правило живёт здесь, потому что здесь оно и
   нужно: на лендинге sticky-элементов нет. */
body { overflow-x: clip; }

.tc-side { display: none; width: 248px; flex: 0 0 248px;
  padding: 22px 14px; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
  /* Разделы курса, дело человека и подвал на ноутбуке с невысоким экраном
     в 100vh не помещаются, а прокрутить меню было нечем: нижние пункты
     просто уходили за край. */
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--mentora-bg); border-right: 1px solid var(--mentora-border); }
.tc-side-brand { display: flex; flex-direction: column; gap: 2px;
  padding: 0 8px; text-decoration: none; color: inherit; }
.tc-side-brand span { font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--mentora-text-tertiary); }
.tc-side-foot { margin-top: auto; padding: 0 8px; font-size: 13px; }
.tc-side-foot a { color: var(--mentora-text-tertiary); }
.tc-side-foot a:hover { color: var(--teal-text); }

.tc-nav { display: flex; flex-direction: column; gap: 4px; }
.tc-nav a { display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 10px 12px; border-radius: var(--radius-md); font-size: 14.5px;
  color: var(--mentora-text-primary); text-decoration: none;
  transition: background 160ms ease, color 160ms ease; }
.tc-nav a:hover { background: var(--teal-dim); }
.tc-nav a.is-on { background: var(--teal); color: #fff; font-weight: 600; }
.tc-nav svg { width: 20px; height: 20px; flex: 0 0 20px; }

/* Верхняя полоса — только на телефоне: на десктопе её работу делает меню. */
.tc-topbar { display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--mentora-bg);
  border-bottom: 1px solid var(--mentora-border); }
.tc-topbar-logo img { display: block; }
.tc-topbar-t { margin-left: auto; font-family: var(--font-display);
  font-size: 17px; color: var(--mentora-text-secondary); }

.tc-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--mentora-bg);
  border-top: 1px solid var(--mentora-border);
  padding-bottom: env(safe-area-inset-bottom); }
.tc-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 9px 4px 10px; min-height: 56px; font-size: 11px;
  color: var(--mentora-text-tertiary); text-decoration: none; }
.tc-tabs a.is-on { color: var(--teal-text); font-weight: 600; }
.tc-tabs svg { width: 22px; height: 22px; }
/* Полоса вкладок закрывает низ страницы — под ней нужен воздух. */
body:not(.has-dock):not(.tc-in-lesson) .tc-page { padding-bottom: 88px; }

@media (min-width: 900px) {
  .tc-side { display: flex; }
  .tc-tabs, .tc-topbar { display: none; }
  body:not(.has-dock):not(.tc-in-lesson) .tc-page { padding-bottom: 48px; }
}

/* Во время занятия оболочка уходит целиком: человек занимается, а не
   выбирает раздел меню. */
.tc-in-lesson .tc-side,
.tc-in-lesson .tc-tabs,
.tc-in-lesson .tc-topbar { display: none; }

/* --- заголовок блока в списке --- */
.tc-blok { display: flex; align-items: baseline; gap: 12px;
  margin: 26px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--mentora-border); }
.tc-blok:first-child { margin-top: 4px; }
.tc-blok-t { font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--mentora-text-secondary); }
.tc-blok-l { margin-left: auto; font-size: 12px;
  color: var(--mentora-text-tertiary); }

/* Точки вместо чёрточек: шесть дней читаются как счёт, а не как шкала. */
.tc-unit-p i { flex: 0 0 auto; width: 7px; height: 7px; max-width: none;
  border-radius: 999px; }

/* --- заголовок раздела --- */
.tc-sect-h { font-family: var(--font-display); font-size: clamp(26px, 4vw, 34px);
  line-height: 1.15; margin: 0 0 4px; color: var(--mentora-text-primary); }

/* --- справочник конструкций --- */
.tc-gram { border-bottom: 1px solid var(--mentora-border); }
.tc-gram-b { display: flex; align-items: baseline; gap: 12px; width: 100%;
  min-height: 52px; padding: 13px 4px; font: inherit; text-align: left;
  cursor: pointer; background: none; border: 0; color: inherit; }
.tc-gram-b:hover .tc-gram-t { color: var(--teal-text); }
.tc-gram-b:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-gram-t { font-size: 17px; font-weight: 600; }
.tc-gram-b::after { content: "+"; margin-left: auto; font-size: 18px;
  color: var(--mentora-text-tertiary); }
.tc-gram.is-open .tc-gram-b::after { content: "−"; }
.tc-gram-body { display: flex; flex-direction: column; gap: 10px;
  padding: 2px 0 16px; }

/* --- настройки --- */
.tc-set { display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--mentora-border); }
.tc-set h2 { margin: 0; font-size: 17px; }
.tc-set p { margin: 0; }
.tc-set.tc-account { border: 1px solid var(--mentora-border); padding: 18px 20px; }

/* Элемент колоночного флекса по умолчанию не уже своего min-content, а
   в списке юнитов есть строка с white-space: nowrap. Без min-width: 0
   она распирала всю страницу на телефоне, и текст уезжал за экран. */
.tc-page, .tc-col > * { min-width: 0; }
.tc-unit-t, .tc-day-t, .tc-gram-t { min-width: 0; overflow-wrap: break-word; }

/* На узком экране счётчик слов встаёт под название, а не спорит с ним за
   ширину: «41 woorden · 7 te herhalen» в одну строку рядом с заголовком
   не помещается ни при каком кегле. */
@media (max-width: 599px) {
  .tc-units a { grid-template-columns: 28px 1fr; gap: 2px 12px; }
  .tc-unit-m { grid-column: 2; white-space: normal; font-size: 12.5px; }
  .tc-unit-p { grid-column: 2; margin-top: 4px; }
  .tc-blok { flex-wrap: wrap; gap: 4px 12px; }
}

/* --- дело человека в меню ------------------------------------------------

   Вошедший видит курс одним пунктом среди своих документов, а не отдельным
   продуктом: это одна дорога, просто её половина живёт на другом домене.
   Анонимному гостю этой группы нет вовсе — пока он не вошёл, никакого
   «его дела» не существует, и показывать ему ссылки в чужой кабинет
   значит обещать то, чего за ними нет. */
.tc-cab { display: flex; flex-direction: column; gap: 6px;
  padding-top: 18px; border-top: 1px solid var(--mentora-border); }
.tc-cab h2 { margin: 0 0 2px; padding: 0 12px; font-size: 11px;
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mentora-text-tertiary); }
.tc-cab .tc-nav span, .tc-nav-inline span { pointer-events: none; }
.tc-nav .is-on { background: var(--teal); color: #fff; font-weight: 600;
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 10px 12px; border-radius: var(--radius-md); font-size: 14.5px; }
.tc-nav .is-on svg { width: 20px; height: 20px; flex: 0 0 20px; }

/* В настройках та же группа, но горизонтально: на телефоне бокового меню
   нет, а дойти до документов оттуда надо. */
.tc-nav-inline { flex-direction: row; flex-wrap: wrap; gap: 6px; width: 100%; }
.tc-nav-inline a, .tc-nav-inline .is-on { min-height: 44px; }

.tc-side-foot { display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start; }
.tc-side-foot p { margin: 0; font-size: 12.5px;
  color: var(--mentora-text-tertiary); line-height: 1.5; }
.tc-side-in { display: inline-block; padding: 8px 14px; font-size: 13px;
  font-weight: 600; border-radius: var(--radius-md);
  border: 1px solid var(--teal); color: var(--teal-text);
  /* Вход — не ссылка, а запрос кода привязки, поэтому это <button>;
     собственный вид кнопки браузера здесь надо снять. */
  background: transparent; font-family: inherit; line-height: inherit;
  cursor: pointer; }
.tc-side-in:hover { background: var(--teal); color: #fff; }
.tc-side-in[disabled] { opacity: .6; cursor: default; }

/* --- закрытый юнит -------------------------------------------------------

   Закрытое видно и названо. Спрятать юниты 02–40 значило бы скрыть от
   человека, что курс продолжается; показать их бледными и с замком —
   сказать правду о том, где проходит граница. */
.tc-units a.is-shut { background: transparent; }
.tc-units a.is-shut .tc-unit-t,
.tc-units a.is-shut .tc-unit-n { color: var(--mentora-text-tertiary); }
.tc-units a.is-shut:hover { border-color: var(--teal-border);
  background: var(--teal-dim); }
.tc-units a.is-shut:hover .tc-unit-t { color: var(--teal-text); }
.tc-lock { grid-column: 3; grid-row: 1; display: flex; align-items: center;
  color: var(--mentora-text-tertiary); }
/* Замок занял третью колонку, и «Sign in to open» уезжало под номер
   юнита вместо названия. */
.tc-units a.is-shut .tc-unit-m { grid-column: 2; }
.tc-lock svg { width: 17px; height: 17px; }
.tc-gram-b.is-shut .tc-gram-t { color: var(--mentora-text-tertiary); }

.tc-shut { display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; padding: 48px 0; }
.tc-shut .tc-note { max-width: 52ch; font-size: 14.5px; line-height: 1.65;
  color: var(--mentora-text-secondary); }
.tc-shut-back { font-size: 14px; color: var(--mentora-text-tertiary); }
.tc-shut-back:hover { color: var(--teal-text); }
.tc-gram-body .tc-note { max-width: 52ch; }

/* На узком экране замок встаёт в свою строку вместе со счётчиком. */
@media (max-width: 599px) {
  .tc-lock { grid-column: 2; grid-row: auto; }
}

/* Полоса разработчика: адрес платформы на localhost не назван. В бой она
   не попадает — devBanner() зовётся только когда hostname локальный. */
.tc-dev { padding: 12px 16px; font-size: 13px; line-height: 1.6;
  background: #ffdad6; color: #93000a;
  border-bottom: 1px solid rgba(147, 0, 10, .25); }
.tc-dev code { padding: 1px 5px; border-radius: 3px;
  background: rgba(147, 0, 10, .1); font-family: var(--font-mono);
  font-size: 12.5px; }