/* 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 — карточки и плашки. Разделяет их
     не тень, а контур: дизайн строится на тональных слоях, а не на
     подъёме элементов над фоном. */
  /* Палитра ролика «How it works» (video/avatars): бумага, мягкий зелёный,
     оранжевый — звук, прогресс и «следующий шаг». */
  --mentora-bg: #fbf9f2;
  --mentora-bg-secondary: #f3f0e6;
  --mentora-border: #e4dfd2;
  --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: #3f6f5f;
  --teal-hover: #2f5649;
  --teal-text: #335c4e;
  --teal-dim: rgba(63, 111, 95, 0.10);
  --teal-border: rgba(63, 111, 95, 0.30);
  /* Оранжевый не для текста: белый на нём не дотягивает до AA. Заливки,
     кнопка звука, кольцо следующего урока, волна. */
  --tc-orange: #ff5500;
  --tc-orange-soft: #ffe7da;

  /* Тревога одна на весь курс: и «неверно», и идущая запись. Раньше она
     была вписана шестью разными местами прямо в правила. */
  --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: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  /* Заголовки — как в ролике. Только крупный кегль: для фраз урока этот
     шрифт слишком контрастный, нидерландский текст остаётся в Source Serif. */
  --font-head: 'DM Serif Display', 'Source Serif 4', Georgia, 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-method-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: var(--mentora-bg-secondary);
  border: 1px solid var(--mentora-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
@media (min-width: 640px) {
  .tc-method-strip {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 18px 20px;
  }
}
.tc-method-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tc-method-num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--teal-text);
  text-transform: uppercase;
}
.tc-method-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mentora-text-primary);
  line-height: 1.3;
}
.tc-method-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--mentora-text-secondary);
}

/* --- список юнитов --- */
.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-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 auto; 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); }
/* Форма из текста под словарной: «heten» в списке и «heet» в тексте — для
   A0 это два разных слова, пока их не свести на одной строке. */
.tc-card-form { display: block; margin-top: 2px; font-size: 13px; font-weight: 400;
  color: var(--mentora-text-tertiary); }
/* Закрытый словарь: перевод не исчезает, а прячется под плашку — иначе
   строка схлопывается и глаз теряет место. */
.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; }
.tc-pattern b { font-weight: 700; color: var(--teal-text); }

/* --- вопросы (день 5 и 6) --- */

/* Место под док только там, где он есть: на днях без звука эти 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; }
/* На десктопе меню во время выбора остаётся на экране. Человек, которого
   просят рассказать о себе, должен видеть, куда он попал и что его ждёт
   дальше, — пустая страница с тремя вопросами этого не показывает.

   Но переключаться там пока некуда: словарь, грамматика и настройки до
   выбора языка и профессии показали бы чужие слова и чужого героя.
   Поэтому меню показано и заблокировано, а не спрятано: видно, что
   разделы есть, и видно, что они ещё не открыты.

   Блокировка двойная. pointer-events снимает мышь, но не клавиатуру:
   Tab по-прежнему уводил бы фокус в невидимую ссылку и уносил человека
   из выбора. Фокус и доступность закрывает inert из course.js.

   Верхняя полоса на десктопе при этом снова уходит: она держала бренд
   на экране, пока панели не было, и рядом с ней дублирует его.

   На телефоне панели по-прежнему нет: там её работу делает полоса. */
@media (min-width: 900px) {
  .tc-onboarding .tc-side { display: flex; }
  .tc-onboarding .tc-topbar { display: none; }
  .tc-onboarding .tc-nav { opacity: .38; }
  .tc-onboarding .tc-nav a { pointer-events: none; cursor: default; }
  .tc-onboarding .tc-nav a:hover { background: none; }
}

.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); }
}

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

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

.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; }

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

   Проверка нужна не ради оценки, поэтому здесь нет ни таймера, ни процентов,
   ни красных крестов во всю строку: только «верно» зелёным и верный ответ
   рядом с ошибкой. */
/* Задание — компактный блок посреди экрана, как и любой другой шаг.

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

   Теперь высоту задаёт содержимое, а сцена ставит блок по центру — так же,
   как текст, конструкцию и «послушать». Ответы оказываются в середине
   экрана, а не у нижнего края: до них дотягивается тот же палец, но
   пустоты между вопросом и ними больше нет. */
.tc-task { display: flex; flex-direction: column; gap: 18px; }

/* Смена шага. Раньше сцена подменялась в том же кадре — единственное место
   урока, где было видно, что это веб-страница, а не приложение. Класс вешает
   draw() на .tc-stage после сборки шага. */
.tc-task-enter { animation: tc-task-in 260ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes tc-task-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Остановка после ошибки: подпись и «Дальше». Отделены от вариантов, чтобы
   кнопку нельзя было нажать той же инерцией, что и неверный ответ. */
.tc-task-foot { display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; margin-top: 4px; }
.tc-task-note { margin: 0; font-size: 15px; color: var(--mentora-text-tertiary); }
.tc-task-why { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--mentora-accent, #1b7569); font-size: 15px; line-height: 1.55; }

.tc-task.is-wrong .tc-slots { animation: tc-shake 400ms ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .tc-task-enter,
  .tc-task.is-wrong .tc-slots { animation: none; }
}
.tc-task-q { margin: 0; font-size: 30px; line-height: 1.3; font-weight: 600;
  letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }

/* Интерактивный слот пропуска: аккуратная плашка с мягким пульсом фокуса */
.tc-gap-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  min-width: 90px;
  min-height: 38px;
  padding: 0 10px;
  margin: 0 6px 0 2px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--mentora-border-mid);
  background: var(--mentora-bg-secondary);
  color: var(--mentora-text-primary);
  font-size: 0.95em;
  font-weight: 600;
  box-sizing: border-box;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  position: relative;
}

.tc-gap-slot:not(.is-filled) {
  animation: tc-pulse-gap 2.6s ease-in-out infinite;
}

@keyframes tc-pulse-gap {
  0%, 100% {
    border-color: var(--mentora-border-mid);
    background: var(--mentora-bg-secondary);
  }
  50% {
    border-color: var(--teal-border);
    background: var(--teal-dim);
  }
}

.tc-gap-fill {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px) scale(0.94);
  transition: opacity 220ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.tc-gap-slot.is-filled {
  animation: none;
  border-style: solid;
  min-width: auto;
}

.tc-gap-slot.is-filled .tc-gap-fill {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.tc-gap-slot.is-right {
  border-color: var(--teal);
  background: var(--teal-dim);
  color: var(--teal-text);
  box-shadow: 0 0 0 1px var(--teal);
  animation: tc-pop-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tc-gap-slot.is-wrong {
  border-color: var(--tc-alert);
  background: rgba(186, 26, 26, 0.08);
  color: var(--tc-alert);
  animation: tc-shake 400ms ease-in-out;
}

.tc-gap-slot.is-corrected {
  animation: tc-pop-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tc-pop-in {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes tc-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.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-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; }
/* Низ страницы = высота подвала (её пишет course.js в --tc-foot-h): с плеером
   подвал в два ряда, и последняя строка текста уходила под него без прокрутки. */
.tc-in-lesson .tc-page { padding: 0 0 calc(var(--tc-foot-h, 96px) + 8px);
  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); }
/* Ряд подвала: обычно в нём одна «Далі» на всю ширину, но шаги с
   озвучкой (fullTextStep) добавляют слева play/pause — тогда кнопка
   действия сжимается до flex:1, а не съезжает с центра. */
.tc-foot-row { display: flex; align-items: center; gap: 10px;
  max-width: 690px; margin: 0 auto; }
.tc-cta { display: block; width: 100%; 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; }
.tc-foot-row .tc-cta { flex: 1; min-width: 0; }
.tc-play-foot { width: 54px; height: 54px; min-width: 54px;
  border-radius: 50%; align-self: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.tc-play-foot svg { width: 24px; height: 24px; }
@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-order-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tc-play.tc-play-small.tc-order-play { width: 48px; height: 48px; min-width: 48px;
  border-radius: 50%; margin: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.tc-play.tc-play-small.tc-order-play svg { width: 22px; height: 22px; }

.tc-full-text { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.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-finish .tc-toggle { align-self: center; margin-top: 6px; }

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

   #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.is-locked {
  opacity: 0.52;
  cursor: not-allowed;
  border-style: dashed;
  background: rgba(0,0,0,.02);
}
.tc-day.is-locked:hover {
  border-color: var(--mentora-border);
  background: rgba(0,0,0,.02);
}
.tc-day.is-locked .tc-day-n,
.tc-day.is-locked .tc-day-t {
  color: var(--mentora-text-tertiary);
}
.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); }

/* --- рисунок строфы -----------------------------------------------------

   Кадр из видео юнита, поставленный рядом с текстом. Пропорции у генератора
   16:9, и высоту держит контейнер, а не картинка: без этого при смене строки
   страница прыгала бы на высоту рисунка, пока грузится следующий.

   Ширина ограничена: на широком экране картинка во всю колонку перетягивает
   внимание с текста, ради которого сюда пришли. */
.tc-art { margin: 0; align-self: center; width: 100%; max-width: 520px;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--mentora-bg-secondary); }

/* Разбор ментора на экране экзамена: ответ приходит туда же, где сдавали.
   Пока ответа нет, блок остаётся на месте бледным — «ещё не разобрано» тоже
   ответ, и человеку важнее знать, что запись дошла, чем видеть пустоту. */
.tc-review { margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-lg);
  border: 1px solid var(--mentora-border); background: var(--mentora-bg-secondary); }
.tc-review h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.tc-review .tc-review-body { margin: 8px 0 0; white-space: pre-wrap; }
.tc-review.is-waiting .tc-review-body { color: var(--mentora-text-tertiary); }

/* Сцена строфы — рисунок — стоит на месте, пока листаются строки.
   Раньше она ехала в общем потоке: на строфе из четырёх строк с переводом
   низ текста прятался под кнопкой «дальше», а прокрутка к нему уносила
   картинку наверх. Play теперь в подвале, а не в самой сцене — меньше
   высоты уходит под то, что не текст.

   Высота считается от экрана, а не от ширины колонки: на ноутбуке с низким
   окном картинка в 520 px съедала бы весь экран, и прилипшая сцена не
   оставила бы места строкам, ради которых она прилипла. */
.tc-scene { position: sticky; top: 64px; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-bottom: 12px; background: var(--mentora-bg); }
/* Высота рисунка считается от экрана: прилипшая сцена, занявшая половину
   телефона, мешала бы ровно тому, ради чего прилипла. */
.tc-scene .tc-art { width: auto; height: min(30vh, 50.6vw); max-width: 100%; }
@media (max-width: 719px) {
  .tc-scene { gap: 10px; }
}
.tc-art[hidden] { display: none; }
.tc-art-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-art-shot[hidden] { display: none; }

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

   Нидерландский крупнее перевода, но перевод не курсивом: целый абзац
   курсивом читается тяжелее, а читают его не носители языка. */
.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-line, а не в общем
   медиаблоке страницы: медиазапрос не добавляет специфичности, и оттуда
   его перебивало базовое объявление — строфа занимала вдвое больше
   экрана, чем задумано. */
@media (min-width: 720px) {
  .tc-line { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px;
    align-items: start; }
  .tc-hide-tr .tc-line { grid-template-columns: 1fr; }
}

.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-ahead { display: block; margin: 2px 0 4px; font-size: 13px;
  color: var(--mentora-text-tertiary); }

/* Словарь юнита поверх урока: лист снизу на телефоне, окно по центру на
   широком экране. Прокручивается он сам, а не страница под ним, — иначе
   при закрытии урок оказывался бы не там, где его оставили. */
.tc-sheet { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, #000 38%, transparent); }
.tc-sheet-box { width: 100%; max-width: 640px; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--mentora-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--mentora-border); }
.tc-sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.tc-sheet-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.tc-sheet-head .tc-toggle { margin-left: auto; }
.tc-sheet .tc-cards { overflow-y: auto; }
/* Кнопка словаря стоит в одном ряду с крестиком выхода и выглядит так же:
   это выход к справке, а не действие урока, и звать в неё цветом незачем. */
.tc-words-btn { flex: 0 0 auto; width: 40px; height: 40px; display: grid;
  place-items: center; cursor: pointer; border-radius: var(--radius-md);
  border: 1px solid var(--mentora-border); background: var(--mentora-bg);
  color: var(--mentora-text-secondary); }
.tc-words-btn svg { width: 18px; height: 18px; }
.tc-words-btn:hover { background: var(--teal-dim); color: var(--teal-text); }
.tc-words-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (min-width: 720px) {
  .tc-sheet { align-items: center; }
  .tc-sheet-box { border-radius: var(--radius-lg); max-height: 78vh; }
}

.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); }

/* Блоки 2–5, свёрнутые в <details>: заголовок = <summary> с той же
   разметкой tc-blok, плюс шеврон вместо родного треугольника маркера. */
.tc-blok-acc { margin: 0; }
.tc-blok-acc summary.tc-blok { cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent; }
.tc-blok-acc summary.tc-blok::-webkit-details-marker { display: none; }
.tc-blok-acc summary.tc-blok::after {
  content: ""; width: 8px; height: 8px; margin-left: 4px;
  border-right: 1.6px solid var(--mentora-text-tertiary);
  border-bottom: 1.6px solid var(--mentora-text-tertiary);
  transform: rotate(45deg); transition: transform 160ms ease; }
.tc-blok-acc[open] summary.tc-blok::after { transform: rotate(-135deg); }
.tc-blok-acc .tc-units { margin-top: 10px; }

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

/* --- питч перед анкетой ---------------------------------------------------

   Раньше первым экраном была анкета выбора — три клика без единого слова
   о том, что это за курс. Сюда теперь ведут внешние ссылки (academy.html,
   страницы юнитов), и человек, который ещё ничего не решил, должен сначала
   увидеть питч и цену, а не форму. */
.tc-pitch { max-width: 640px; margin: 0 auto; text-align: center; }
.tc-pitch h1 { font-family: var(--font-display); font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15; margin: 0 0 12px; color: var(--mentora-text-primary); }
.tc-pitch-lede { max-width: 52ch; margin: 0 auto 28px; font-size: 16px;
  line-height: 1.6; color: var(--mentora-text-secondary); }
.tc-pitch .tc-method-strip { text-align: left; margin: 32px 0; }
.tc-pitch-cta { max-width: 420px; margin: 8px auto 0; }
.tc-pitch .tc-pricing { text-align: left; margin-top: 48px; }

/* --- заголовок раздела --- */
.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-pricing { margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--mentora-border); scroll-margin-top: 24px; }
.tc-consent { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0;
  font-size: 13.5px; line-height: 1.55; color: var(--mentora-text-secondary);
  cursor: pointer; max-width: 62ch; }
.tc-consent input { margin-top: 3px; flex-shrink: 0; }
.tc-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 8px; }
.tc-plan { border: 1px solid var(--mentora-border); border-radius: var(--radius-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  background: var(--mentora-bg-secondary); }
.tc-plan h3 { margin: 0; font-size: 17px; }
.tc-plan-price { margin: 0; font-size: 15px; font-weight: 600;
  color: var(--mentora-text-primary); }
.tc-plan ul { margin: 0; padding: 0 0 0 18px; font-size: 13.5px;
  color: var(--mentora-text-secondary); display: flex; flex-direction: column;
  gap: 4px; flex: 1; }
.tc-plan-rec { border-color: var(--teal-border); background: var(--mentora-bg-sage-dim); }
.tc-plan-tag { margin: 0 0 -4px; font-size: 12.5px; font-weight: 600;
  color: var(--teal-text); }
.tc-plan-note { margin: -6px 0 0; font-size: 13px; line-height: 1.45;
  color: var(--mentora-text-secondary); }
.tc-plan-buy { align-self: stretch; text-align: center; margin-top: 4px; }
.tc-plan-buy[disabled] { opacity: .6; cursor: default; }

/* --- справочник конструкций --- */
.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; }
.tc-side-email { word-break: break-all; }
/* Сдержаннее «Sign in»: это выход, не призыв к действию — обычная ссылка
   по виду, не кнопка с рамкой. */
.tc-side-out { padding: 0; border: 0; background: none; font: inherit;
  font-size: 13px; color: var(--mentora-text-tertiary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
.tc-side-out:hover { color: var(--teal-text); }

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

   Закрытое видно и названо. Спрятать юниты 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; }


/* --- Геймификация, серии и мастерство --- */
.tc-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tc-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 122, 0, 0.12);
  border: 1px solid rgba(255, 122, 0, 0.35);
  border-radius: var(--radius-full, 9999px);
  color: #ff7a00;
  font-weight: 700;
  font-size: 14px;
  animation: tc-pulse-glow 2s infinite ease-in-out;
}

@keyframes tc-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0.3); }
  50% { box-shadow: 0 0 12px 2px rgba(255, 122, 0, 0.3); }
}

.tc-mastery-box {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tc-mastery-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--mentora-text-secondary);
}

.tc-mastery-bar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--mentora-bg-secondary);
  overflow: hidden;
  border: 1px solid var(--mentora-border);
}

.tc-mastery-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--teal), #00b4d8);
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.tc-badge.is-bronze { background: rgba(205, 127, 50, 0.15); color: #cd7f32; }
.tc-badge.is-silver { background: rgba(192, 192, 192, 0.2); color: #8a8a8a; }
.tc-badge.is-gold { background: rgba(255, 215, 0, 0.2); color: #b8860b; }

/* Pass Navigation Tabs */
.tc-pass-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--mentora-border);
  padding-bottom: 8px;
}

.tc-pass-tab {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--mentora-text-secondary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 160ms ease;
  text-align: center;
}

.tc-pass-tab:hover {
  background: var(--teal-dim);
  color: var(--teal-text);
}

.tc-pass-tab.is-active {
  background: var(--teal-dim);
  border-color: var(--teal-border);
  color: var(--teal-text);
}

.tc-pass-tab.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.tc-pass-tab.is-locked:hover {
  background: transparent;
  color: var(--mentora-text-secondary);
}

/* Pass 2 Banner */
.tc-p2-banner {
  padding: 18px 20px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--teal-dim), var(--mentora-bg-secondary));
  border: 1px solid var(--teal-border);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tc-p2-banner h3 {
  margin: 0;
  font-size: 18px;
  color: var(--teal-text);
}

.tc-p2-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Blitz Sprint */
.tc-sprint-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tc-sprint-timer {
  font-size: 20px;
  font-weight: 700;
  color: #ff7a00;
  padding: 4px 12px;
  background: rgba(255, 122, 0, 0.12);
  border-radius: 20px;
}

.tc-sprint-arena {
  margin-top: 20px;
}

.tc-autoexam-progress {
  font-size: 13px;
  color: var(--mentora-text-secondary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.tc-sprint-result {
  text-align: center;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* Readiness Fork */
.tc-ready-fork {
  text-align: center;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.tc-ready-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Exam / Eindtoets */
.tc-exam-gate {
  text-align: center;
  padding: 36px 20px;
  border: 1px solid var(--teal-border);
  border-radius: var(--radius-xl);
  background: var(--teal-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tc-exam-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tc-exam-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tc-exam-item {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--mentora-bg-secondary);
  border: 1px solid var(--mentora-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tc-exam-q {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.tc-exam-rec-box {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tc-rec-btn.is-recording {
  background: rgba(186, 26, 26, 0.15);
  border-color: var(--tc-alert, #ba1a1a);
  color: var(--tc-alert, #ba1a1a);
  animation: tc-rec-pulse 1s infinite alternate;
}

@keyframes tc-rec-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

.tc-rec-preview {
  height: 38px;
  max-width: 260px;
}

.tc-finish-badge {
  font-size: 48px;
  margin-bottom: 8px;
}

/* ── ИКОНКИ В БЕЙДЖАХ И КНОПКАХ ───────────────────────────────────────────
   Иконки курса — SVG в потоке текста, а не эмодзи. Размер задаём в em,
   чтобы значок жил вместе с кеглем строки, а цвет наследуем: бейдж сам
   решает, бронзовый он или золотой, — иконка просто следует за ним. */
.tc-streak svg,
.tc-badge svg,
.tc-pass-tab svg,
.tc-p2-actions svg,
.tc-ready-actions svg,
.tc-rec-btn svg,
.tc-start-exam-btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  margin-right: 0.4em;
  vertical-align: -0.18em;
}

/* Кнопки режимов рисуют иконку и подпись одной строкой и по центру:
   без flex значок и текст расходятся по базовой линии на разных кеглях. */
.tc-pass-tab,
.tc-p2-actions button,
.tc-ready-actions button,
.tc-rec-btn,
.tc-start-exam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Трофей на финальном экране — тот же значок, что и в бейдже, только
   крупный; font-size здесь больше ничего не задаёт, задаёт размер сам svg. */
.tc-finish-badge svg {
  width: 56px;
  height: 56px;
  color: #b8860b;
}

/* ── ОЗВУЧКА КАРТОЧКИ ─────────────────────────────────────────────────────
   Третья колонка в .tc-card заведена всегда, но она auto: без кнопки её
   ширина — ноль, и карточка выглядит ровно как раньше. Так разметка одна
   и там, где звук есть, и там, где его нет. */
.tc-card-play {
  align-self: center;          /* baseline у кнопки со значком — не по месту */
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  border: 1px solid var(--mentora-border);
  border-radius: var(--radius-full, 9999px);
  background: var(--mentora-bg);
  color: var(--teal-text);
  transition: background 160ms ease, border-color 160ms ease;
}
.tc-card-play svg { width: 16px; height: 16px; }
.tc-card-play:hover { background: var(--teal-dim); border-color: var(--teal-border); }
.tc-card-play.is-playing { background: var(--teal-dim); border-color: var(--teal); }

/* В повторении карточка — не строка списка, а весь экран: кнопка встаёт
   под словом и крупнее, потому что это единственное, что на экране можно
   нажать до того, как показан перевод. */
.tc-recall-play { display: flex; justify-content: center; margin: 4px 0 18px; }
.tc-recall-play .tc-card-play { width: 52px; height: 52px; }
.tc-recall-play .tc-card-play svg { width: 22px; height: 22px; }

/* Переключатель темпа словаря. Тот же приём, что у темпов в доке плеера:
   выбор виден целиком, а не спрятан за выпадающим списком, — вариантов
   всего два и оба равноправны. */
.tc-wtempo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; flex-wrap: wrap;
}
.tc-wtempo-l {
  font-size: 13px; color: var(--mentora-text-secondary);
  margin-right: 2px;
}
.tc-wtempo button {
  min-height: 32px; padding: 5px 14px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--mentora-border);
  border-radius: var(--radius-full, 9999px);
  background: var(--mentora-bg); color: var(--mentora-text-secondary);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.tc-wtempo button:hover { border-color: var(--teal-border); color: var(--teal-text); }
.tc-wtempo button.is-on {
  background: var(--teal-dim); border-color: var(--teal); color: var(--teal-text);
}

/* Витрина юнитов на главной: ссылка на открытые страницы курса. Отдельный
   блок, а не строка в подвале, — по ней ходят и люди, и краулер. */
.tc-syllabus { border-top: 1px solid var(--mentora-border); padding-top: 18px;
  margin-top: 8px; }
.tc-syllabus h2 { margin: 0 0 6px; font-size: 17px; }
.tc-syllabus p { margin: 0 0 8px; color: var(--mentora-text-secondary); font-size: 15px; }
.tc-syllabus-langs { font-size: 15px; }

/* ================= Вид приложения (как у модуля B2) =================
   Только оформление поверх существующих классов: логика course.js не
   меняется. Скругления крупнее, карточки с мягкой тенью, нижние вкладки
   с «пилюлей» активного раздела, отклик на палец, переходы между экранами. */
:root { --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --app-green-soft: #e3efe8; --app-green-mid: #2d6a4f; --app-ease: cubic-bezier(.2,.8,.2,1); }
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; touch-action: manipulation; }
.tc-shell a, .tc-shell button, .tc-tabs, .tc-topbar, .tc-lesson-bar, .tc-foot {
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.tc-tabs a, .tc-day, .tc-go, .tc-units a, .tc-pass-tab, .tc-cta, .tc-close { -webkit-user-select: none; user-select: none; }

/* шапка на телефоне: полупрозрачная, как в приложениях */
.tc-topbar { position: sticky; top: 0; z-index: 25; padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--mentora-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }

/* нижние вкладки */
.tc-tabs { padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, #fff 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.tc-tabs a { gap: 2px; padding: 6px 0 4px; min-height: 0; border-radius: 12px; font-weight: 600;
  transition: color .2s, transform .12s var(--app-ease); }
.tc-tabs a:active { transform: scale(.92); }
.tc-tabs svg { width: 52px; height: 30px; padding: 4px 15px; border-radius: 99px; box-sizing: border-box;
  transition: background .25s; overflow: visible; }
.tc-tabs a.is-on svg { background: var(--app-green-soft); }

/* заголовки крупнее, «нативнее» */
.tc-head h1 { font-weight: 700; letter-spacing: -.01em; }

/* список юнитов */
.tc-units a { border-radius: var(--radius-lg); background: var(--paper);
  box-shadow: 0 1px 0 rgba(0,0,0,.03); transition: transform .14s var(--app-ease), background .2s, border-color .2s; }
.tc-units a:active { transform: scale(.985); }
.tc-unit-p i { height: 4px; border-radius: 99px; }
.tc-blok { border-bottom: 0; }
.tc-blok-t { letter-spacing: .06em; }

/* дом юнита: вкладки проходов — сегментированный переключатель */
.tc-pass-nav { background: var(--mentora-bg-secondary); padding: 4px; border-radius: 14px; gap: 4px; border: 0; }
.tc-pass-tab { border-radius: 11px !important; border: 0 !important; transition: background .2s, box-shadow .2s; }
.tc-pass-tab.is-active { background: var(--paper) !important; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px -6px rgba(0,0,0,.12); }

/* главная кнопка «продолжить» — как карточка-герой */
.tc-go { position: relative; padding: 20px 20px 18px; border: 0; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, var(--app-green-mid) 0%, var(--teal) 55%, #10281e 100%);
  box-shadow: 0 14px 30px -14px rgba(27,67,50,.55); transition: transform .14s var(--app-ease); }
.tc-go:hover { background: radial-gradient(120% 140% at 100% 0%, var(--app-green-mid) 0%, var(--teal) 55%, #10281e 100%); }
.tc-go:active { transform: scale(.98); }
.tc-go-k { color: rgba(255,255,255,.75); font-family: var(--font-body); font-weight: 600; letter-spacing: .04em; }
.tc-go-t { font-family: var(--font-display); font-size: 26px; }
.tc-go-c { color: rgba(255,255,255,.8); }
.tc-go::after { content: ""; position: absolute; right: 20px; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  border-radius: 50%; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z' fill='%231b4332'/%3E%3C/svg%3E") center/18px no-repeat; }

/* дни юнита */
.tc-day { background: var(--paper); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px var(--mentora-border);
  transition: transform .14s var(--app-ease), box-shadow .2s, background .2s; }
.tc-day:active:not(.is-locked) { transform: scale(.985); }
.tc-day-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--mentora-border); font-family: var(--font-body); font-weight: 700; font-size: 12px; align-self: center; }
.tc-day.is-done .tc-day-n { background: var(--teal); border-color: var(--teal); color: #fff; }
.tc-day.is-next { box-shadow: 0 0 0 2px var(--teal), 0 8px 20px -12px rgba(27,67,50,.5); }
.tc-day.is-next .tc-day-n { border-color: var(--teal); color: var(--teal); }
.tc-day.is-locked { border-style: solid; opacity: .55; box-shadow: 0 0 0 1px var(--mentora-border); background: transparent; }
.tc-mastery-bar, .tc-progress2 { border-radius: 99px; }
.tc-progress2 i { background: linear-gradient(90deg, var(--app-green-mid), var(--teal)); }

/* урок */
.tc-lesson-bar { padding-top: calc(12px + env(safe-area-inset-top)); border-bottom-color: transparent;
  background: color-mix(in srgb, var(--mentora-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
.tc-close { border: 0; border-radius: 50%; background: transparent; font-size: 20px; }
.tc-close:active { background: var(--teal-dim); }
.tc-foot { border-top: 0; background: linear-gradient(to top, var(--mentora-bg) 72%, color-mix(in srgb, var(--mentora-bg) 0%, transparent)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tc-cta { border: 0; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.tc-cta:active:not(:disabled) { transform: translateY(1px) scale(.99); box-shadow: none; }
.tc-opt { border-width: 1.5px; box-shadow: 0 2px 0 var(--mentora-border); background: var(--paper); }
.tc-opt:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.tc-opt.is-right { box-shadow: 0 2px 0 var(--teal); background: var(--app-green-soft); color: var(--teal-text); }
.tc-opt.is-wrong { box-shadow: 0 2px 0 var(--tc-alert); background: #fbe9e7; }
.tc-card { border-radius: var(--radius-lg); }
.tc-line { border-radius: 10px; }

/* переходы между страницами курса */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: tc-vt-out .22s var(--app-ease) both; }
::view-transition-new(root) { animation: tc-vt-in .28s var(--app-ease) both; }
@keyframes tc-vt-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes tc-vt-in { from { opacity: 0; transform: translateX(32px); } }
.tc-tabs { view-transition-name: tc-tabs; }
::view-transition-old(tc-tabs), ::view-transition-new(tc-tabs) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .tc-go, .tc-day, .tc-units a, .tc-tabs a { transition: none; }
}
@media (display-mode: standalone) { .tc-topbar { padding-top: calc(6px + env(safe-area-inset-top)); } }
.tc-go { margin-bottom: 6px; }

/* переключатель уровня A0–B1 | B1–B2+ (level.js) */
.tc-level { display: inline-flex; margin-left: auto; padding: 3px; gap: 2px; border-radius: 99px;
  background: var(--mentora-bg-secondary); box-shadow: inset 0 0 0 1px var(--mentora-border); }
.tc-level a { padding: 6px 11px; border-radius: 99px; font: 600 12.5px var(--font-body);
  color: var(--mentora-text-tertiary); text-decoration: none; white-space: nowrap; }
.tc-level a.is-on { background: var(--paper); color: var(--teal-text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.tc-side .tc-level { margin: 10px 0 6px; }

/* общий экран прогресса (#/progress) — тот же вид, что в модуле B2 */
.tc-p-streak { padding: 18px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #c2761b, #e0a24a);
  box-shadow: 0 14px 28px -16px rgba(183,121,31,.7); margin: 4px 0 14px; }
.tc-p-streak-n b { font: 700 44px/1 var(--font-display); }
.tc-p-streak-n span { font-weight: 600; opacity: .9; }
.tc-p-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
.tc-p-day { display: grid; justify-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; opacity: .9; }
.tc-p-day i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); font-style: normal; }
.tc-p-day.is-on i { background: var(--paper); color: #c2761b; }
.tc-p-day.is-today span { text-decoration: underline; text-underline-offset: 3px; }
.tc-p-levels { display: grid; gap: 10px; }
.tc-p-level { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1px var(--mentora-border); color: inherit; text-decoration: none;
  transition: transform .14s var(--app-ease); }
.tc-p-level:active { transform: scale(.98); }
.tc-p-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.tc-p-ring svg { position: absolute; inset: 0; }
.tc-p-ring circle { fill: none; stroke-width: 6; }
.tc-p-ring .bg { stroke: var(--mentora-border); }
.tc-p-ring .fg { stroke: var(--teal); stroke-linecap: round; transition: stroke-dashoffset .9s var(--app-ease); }
.tc-p-ring em { font-style: normal; font-weight: 700; font-size: 13px; }
.tc-p-level-t { display: grid; gap: 2px; }
.tc-p-level-t b { font: 700 19px var(--font-display); }
.tc-p-level-t span { font-size: 13px; color: var(--mentora-text-tertiary); }
.tc-p-go { font-weight: 700; font-size: 13px; color: var(--teal-text); }
.tc-p-level.is-locked .tc-p-level-t b { color: var(--mentora-text-secondary); }
.tc-p-install { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 18px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--mentora-border); }
.tc-p-install img { border-radius: 12px; flex: none; }
.tc-p-install > span { flex: 1; display: grid; gap: 2px; }
.tc-p-install b { font-size: 15px; }
.tc-p-install span span { font-size: 13px; color: var(--mentora-text-tertiary); }
.tc-p-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0 0 14px; border-radius: 16px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--mentora-border); color: inherit; text-decoration: none; font-weight: 600; }
.tc-p-link svg { width: 22px; height: 22px; color: var(--teal); }
.tc-p-link::after { content: "›"; margin-left: auto; font-size: 22px; color: var(--mentora-text-tertiary); }
.tc-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; font-weight: 600; }
.tc-switch input { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; margin: 0;
  border-radius: 99px; background: var(--mentora-border-mid); position: relative; cursor: pointer;
  transition: background .2s var(--app-ease); }
.tc-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--app-ease); }
.tc-switch input:checked { background: var(--teal); }
.tc-switch input:checked::after { transform: translateX(20px); }
.tc-switch input:disabled { opacity: .6; cursor: default; }

/* ================= Тёмная тема =================
   Курс учат вечером после смены, и белый лист в темноте бьёт по глазам.
   Тема идёт за системной настройкой телефона; в «Ещё» её можно поставить
   вручную — тогда на <html> висит data-theme, и он важнее системы.
   Меняются только токены: правила выше их читают и остаются едиными. */
:root { --paper: #fff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mentora-bg: #14161a;
    --mentora-bg-secondary: #1c2026;
    --paper: #1a1e24;
    --mentora-border: #2b3037;
    --mentora-border-mid: #3b424b;
    --mentora-text: #e8eae7;
    --mentora-text-primary: #e8eae7;
    --mentora-text-secondary: #c2c8c4;
    --mentora-text-tertiary: #97a09b;
    --dark: #e8eae7;
    /* Тёмно-сосновый на тёмном фоне не читается: в тёмной теме действие
       становится светло-зелёным, а текст на нём — тёмным. */
    --teal: #7fc9a2;
    --teal-hover: #9bd9b7;
    --teal-text: #9fd9bb;
    --teal-dim: rgba(127, 201, 162, 0.14);
    --teal-border: rgba(127, 201, 162, 0.32);
    --tc-alert: #ff9e94;
    --app-green-soft: #23392f;
    --app-green-mid: #4f9d78;
  }
  :root:not([data-theme="light"]) .tc-btn,
  :root:not([data-theme="light"]) .tc-cta,
  :root:not([data-theme="light"]) .tc-nav a.is-on,
  :root:not([data-theme="light"]) .tc-day.is-done .tc-day-n { color: #10231b; }
  :root:not([data-theme="light"]) .tc-go { color: #eaf6ef;
    background: radial-gradient(120% 140% at 100% 0%, #2f6a51 0%, #1d4534 55%, #10241b 100%); }
  :root:not([data-theme="light"]) .tc-go::after { background-color: #eaf6ef; }
  :root:not([data-theme="light"]) .tc-tabs { background: color-mix(in srgb, var(--paper) 90%, transparent); }
}

:root[data-theme="dark"] {
  --mentora-bg: #14161a;
  --mentora-bg-secondary: #1c2026;
  --paper: #1a1e24;
  --mentora-border: #2b3037;
  --mentora-border-mid: #3b424b;
  --mentora-text: #e8eae7;
  --mentora-text-primary: #e8eae7;
  --mentora-text-secondary: #c2c8c4;
  --mentora-text-tertiary: #97a09b;
  --dark: #e8eae7;
  --teal: #7fc9a2;
  --teal-hover: #9bd9b7;
  --teal-text: #9fd9bb;
  --teal-dim: rgba(127, 201, 162, 0.14);
  --teal-border: rgba(127, 201, 162, 0.32);
  --tc-alert: #ff9e94;
  --app-green-soft: #23392f;
  --app-green-mid: #4f9d78;
}
:root[data-theme="dark"] .tc-btn,
:root[data-theme="dark"] .tc-cta,
:root[data-theme="dark"] .tc-nav a.is-on,
:root[data-theme="dark"] .tc-day.is-done .tc-day-n { color: #10231b; }
:root[data-theme="dark"] .tc-go { color: #eaf6ef;
  background: radial-gradient(120% 140% at 100% 0%, #2f6a51 0%, #1d4534 55%, #10241b 100%); }
:root[data-theme="dark"] .tc-go::after { background-color: #eaf6ef; }
:root[data-theme="dark"] .tc-tabs { background: color-mix(in srgb, var(--paper) 90%, transparent); }

/* выбор темы в «Ещё» */
.tc-theme { display: flex; gap: 6px; padding: 4px; border-radius: 99px; background: var(--mentora-bg-secondary);
  box-shadow: inset 0 0 0 1px var(--mentora-border); width: fit-content; }
.tc-theme button { border: 0; background: transparent; padding: 7px 14px; border-radius: 99px; cursor: pointer;
  font: 600 14px var(--font-body); color: var(--mentora-text-tertiary); }
.tc-theme button.is-on { background: var(--paper); color: var(--teal-text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* Логотип нарисован тёмным по светлому — в тёмной теме он сливается с фоном. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tc-topbar-logo img,
  :root:not([data-theme="light"]) .tc-side-brand img,
  :root:not([data-theme="light"]) .m-brand img { filter: brightness(0) invert(1); opacity: .92; }
}
:root[data-theme="dark"] .tc-topbar-logo img,
:root[data-theme="dark"] .tc-side-brand img,
:root[data-theme="dark"] .m-brand img { filter: brightness(0) invert(1); opacity: .92; }
/* поиск */
.tc-find-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--mentora-text); text-decoration: none; flex: none; }
.tc-find-btn:active { background: var(--teal-dim); }
.tc-find { display: flex; gap: 8px; margin: 4px 0 18px; }
.tc-find input { flex: 1; min-width: 0; font: 16px var(--font-body); padding: 12px 14px;
  border: 1.5px solid var(--mentora-border); border-radius: var(--radius-lg);
  background: var(--paper); color: var(--mentora-text); }
.tc-find input:focus { outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 12%, transparent); }
.tc-find-out { display: grid; gap: 8px; }
.tc-find-hit { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-lg);
  background: var(--paper); box-shadow: 0 0 0 1px var(--mentora-border);
  color: inherit; text-decoration: none; transition: transform .14s var(--app-ease); }
.tc-find-hit:active { transform: scale(.985); }
.tc-find-k { font: 600 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal-text); }
.tc-find-t { font-size: 16px; line-height: 1.4; }
.tc-find-w { font-size: 12.5px; color: var(--mentora-text-tertiary); }


/* De niveaus als trap: een bezoeker moet in één blik zien dat de cursus niet
   bij B1 stopt, want juist de trede daarboven is wat het BIG-register vraagt. */
.tc-ladder { margin-top: 34px; }
.tc-ladder h2 { font-size: 22px; margin: 0 0 6px; }
.tc-ladder-lede { color: var(--mentora-text-secondary); font-size: 15px; line-height: 1.65; margin: 0 0 18px; max-width: 62ch; }
.tc-ladder-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; counter-reset: trede; }
.tc-step {
  border: 1px solid var(--mentora-border); border-radius: var(--radius-lg, 16px);
  padding: 14px 16px; background: var(--mentora-bg-secondary); min-width: 0;
}
.tc-step.is-open { border-color: var(--accent, currentColor); }
.tc-step-lvl {
  display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 6px;
}
.tc-step-t { display: block; font-size: 16px; margin-bottom: 4px; }
.tc-step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mentora-text-secondary); }
.tc-ladder-voet { margin: 14px 0 0; font-size: 13.5px; color: var(--mentora-text-secondary); }
@media (min-width: 720px) {
  .tc-ladder-list { grid-template-columns: repeat(4, 1fr); }
}

/* De trap staat tussen de gratis unit en de prijzen, waar de tekst gecentreerd
   is. Gecentreerde kaarttekst leest slecht, dus de kaarten zelf lijnen links. */
.tc-ladder .tc-step { text-align: left; }
.tc-ladder-lede { margin-left: auto; margin-right: auto; }


/* De routestrook: dezelfde vijf stappen als op de andere twee sites. */
.rs { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--mentora-border); text-align: left; }
.rs-kop { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; margin: 0 0 12px; }
.rs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr; }
.rs-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md, 12px); min-width: 0; background: var(--mentora-bg-secondary); }
.rs-item.is-nu { background: var(--accent, #7fd1a8); color: #10231b; }
.rs-n { font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: .75; }
.rs-t { font-weight: 600; font-size: 15px; }
a.rs-t { text-decoration: underline; }
.rs-wie { font-size: 13px; opacity: .8; }
.rs-voet { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--mentora-text-secondary); }
@media (min-width: 860px) { .rs-list { grid-template-columns: repeat(5, 1fr); } }


/* De zijbalk is het meubilair van iemand die al cursist is. Wie voor het eerst
   binnenkomt, ziet eerst waar hij is: een gewone kop met logo, en de inhoud.
   Zodra hij een profiel heeft (of terugkeert, zie tc-terug), staat het menu er. */
@media (min-width: 900px) {
  body:not(.tc-known) .tc-side { display: none; }
  body:not(.tc-known) .tc-topbar { display: flex; }
  html.tc-terug body .tc-side { display: flex; }
  html.tc-terug body .tc-topbar { display: none; }
}

/* ---------- Welkomstscherm (pitchScreen) ----------
   Opgebouwd naar het bureaubladontwerp: tekst over de volle breedte,
   luistervoorbeeld met equalizer, vier niveaus naast elkaar, vergelijking,
   donkere afsluiter. Tarieven pas onderaan. */
body.tc-welkom .tc-page { max-width: 1120px; }
.tc-pitch { max-width: none; text-align: left; display: flex; flex-direction: column; gap: 72px; }
/* Kinderen van een flexkolom krimpen anders niet onder hun inhoud: de tabel
   met min-width 520px duwde op een telefoon de hele pagina breder dan het scherm. */
.tc-pitch > *, .tc-demo > *, .tc-pitch-held > * { min-width: 0; max-width: 100%; }
.tc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tc-kicker { margin: 0 0 8px; font: 600 12px var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-text); text-align: center; }
.tc-pitch .tc-sect-h { text-align: center; margin: 0 0 24px; text-wrap: balance; }

.tc-pitch-held { text-align: center; display: flex; flex-direction: column; align-items: center; }
.tc-pitch-held h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 6vw, 64px);
  line-height: 1.05; letter-spacing: -.01em; margin: 8px 0 18px; text-wrap: balance; }
.tc-pitch-held .tc-pitch-lede { max-width: 64ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6;
  color: var(--mentora-text-secondary); margin: 0 auto; }
.tc-pitch-held .tc-method-strip { width: 100%; max-width: 980px; text-align: left; margin: 36px 0 32px;
  background: var(--mentora-bg-secondary); border: 1px solid var(--mentora-border); border-radius: 12px; }
.tc-pitch-held .tc-pitch-cta, .tc-band .tc-pitch-cta { width: auto; display: inline-flex; align-items: center;
  justify-content: center; padding-inline: 28px; border-radius: 999px; margin: 0; }

/* Luistervoorbeeld */
.tc-demo-card { max-width: 860px; margin: 0 auto; width: 100%; background: var(--mentora-bg);
  border: 1px solid var(--mentora-border); border-radius: 14px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 0 var(--mentora-border); }
/* Arts en patiënt in de spreekkamer. Eigen lichte kleuren, los van het thema;
   de gezichten zijn hier ingekleurd, in de cursus zelf blijven ze lijntekening. */
.tc-demo-scene { position: relative; height: 176px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; padding: 0 clamp(8px, 8%, 90px); }
.tc-demo-kamer { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-demo-scene .tc-avatar { --av-paper: #f6e2d0; position: relative; width: 150px; margin: 0; padding: 0; background: none;
  border-radius: 0; overflow: visible; transform-origin: 50% 100%; transition: transform 200ms ease, filter 200ms ease; }
.tc-demo-card.is-bezig .tc-demo-scene .tc-avatar:not(.is-praat) { filter: saturate(.75) brightness(.97); }
.tc-demo-scene .tc-avatar.is-praat { transform: scale(1.04); }
.tc-demo-scene .tooth { fill: #fff; }
.tc-demo-scene .tc-avatar svg > path:last-child { display: none; }
.tc-demo-scene .sth { stroke: #3f5560; }
.tc-demo-scene circle.sth { fill: #c8d2d6; }
.tc-demo-scene .gd { fill: #e2b84b; }
.tc-demo-scene [data-who="da"] .bd, .tc-demo-scene [data-who="da"] svg > .ln:not(.sth) { fill: #fff; }
.tc-demo-scene [data-who="da"] .hr { fill: #b8bdc2; }
.tc-demo-scene [data-who="dp"] .bd { fill: #3f8f88; }
.tc-demo-scene [data-who="dp"] .sj { fill: #f3ecdf; }
.tc-demo-scene [data-who="dp"] .hr { fill: #9c6a45; }
.tc-demo-bar { display: flex; align-items: center; gap: 14px; }
.tc-demo-play { flex: 0 0 52px; width: 52px; height: 52px; box-shadow: 0 2px 8px rgba(255,85,0,.35); border-radius: 50%; border: 0; cursor: pointer;
  background: #ff5500; display: grid; place-items: center; transition: transform 120ms ease; }
.tc-demo-play:active { transform: scale(.94); }
.tc-demo-play span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff; margin-left: 3px; }
.tc-demo-card.is-bezig .tc-demo-play span { width: 12px; height: 15px; border: 0; margin: 0;
  background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px); }
.tc-demo-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tc-demo-k { font: 600 11px var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mentora-text-tertiary); }
.tc-demo-t strong { font-size: 18px; font-weight: 600; }
.tc-demo-eq { display: block; width: 100%; height: 30px; color: #ff5500; }
.tc-demo-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tc-demo-golf { display: block; width: 100%; height: 64px; cursor: pointer; touch-action: none; color: #ff5500; border: 0 solid #c9ccd1; }
.tc-demo-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tc-demo-skips { display: flex; gap: 8px; }
.tc-demo-skips button { font: 600 13px var(--font-body); min-width: 44px; height: 30px; border-radius: 15px; border: 1px solid var(--mentora-border); background: transparent; color: var(--mentora-text); cursor: pointer; }
.tc-demo-skips button:hover { border-color: #ff5500; color: #ff5500; }
.tc-demo-golf:focus-visible, .tc-demo-skips button:focus-visible { outline: 2px solid #ff5500; outline-offset: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tc-demo-golf { border-color: #4a4f57; } }
:root[data-theme="dark"] .tc-demo-golf { border-color: #4a4f57; }
.tc-demo-tijd { flex: 0 0 auto; font: 13px var(--font-mono, ui-monospace, monospace); color: var(--mentora-text-tertiary);
  font-variant-numeric: tabular-nums; }
.tc-demo-tempo { display: inline-flex; align-self: flex-start; gap: 4px; padding: 3px; border-radius: 999px;
  background: var(--mentora-bg-secondary); }
.tc-demo-tempo button { border: 0; background: transparent; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  font: 600 13px var(--font-body); color: var(--mentora-text-tertiary); }
.tc-demo-tempo button.is-on { background: var(--mentora-bg); color: var(--mentora-text); box-shadow: 0 0 0 1px var(--mentora-border); }
.tc-demo-regels { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--mentora-border); padding-top: 14px; }
.tc-demo-beurt { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; }
.tc-demo-wie { font: 600 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mentora-text-tertiary); }
.tc-demo-beurt p { margin: 0; font-size: 18px; line-height: 1.6; }
.tc-demo-beurt [data-i] { border-radius: 4px; padding: 1px 2px; transition: background 160ms ease, color 160ms ease; }
.tc-demo-beurt [data-i].is-nu { background: var(--teal-dim); color: var(--teal-text); }
.tc-w { position: relative; border-bottom: 2px solid var(--teal-border); cursor: help; }
.tc-w:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }
.tc-demo-note { max-width: 860px; margin: 12px auto 0; font-size: 14px; color: var(--mentora-text-tertiary); text-align: center; }

/* Vier niveaus naast elkaar */
.tc-pitch .tc-ladder { margin: 0; }
.tc-pitch .tc-ladder h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 4vw, 38px); text-align: center; }
.tc-pitch .tc-ladder-lede { margin: 0 auto 26px; text-align: center; }
.tc-pitch .tc-ladder-voet { text-align: center; }
@media (min-width: 900px) {
  .tc-pitch .tc-ladder-list { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .tc-pitch .tc-step { height: 100%; }
}

/* Vergelijking */
.tc-vgl-wrap { max-width: 900px; margin: 0 auto; overflow-x: auto; border: 1px solid var(--mentora-border); border-radius: 12px; }
.tc-vgl table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.tc-vgl th, .tc-vgl td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--mentora-border); vertical-align: top; }
.tc-vgl tbody tr:last-child th, .tc-vgl tbody tr:last-child td { border-bottom: 0; }
.tc-vgl thead th { font-size: 13px; font-weight: 600; color: var(--mentora-text-tertiary); background: var(--mentora-bg-secondary); }
.tc-vgl tbody th { font-weight: 600; width: 22%; }
.tc-vgl td { color: var(--mentora-text-tertiary); }
.tc-vgl .is-ons { color: var(--mentora-text); font-weight: 600; background: var(--teal-dim); }
.tc-vgl thead .is-ons { color: var(--teal-text); }

/* Donkere afsluiter */
.tc-band { background: var(--teal); color: #fff; border-radius: 16px; padding: clamp(40px, 7vw, 72px) 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tc-band h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.5vw, 44px); line-height: 1.1; text-wrap: balance; }
.tc-band p { margin: 0 0 10px; opacity: .82; font-size: 16px; }
.tc-band .tc-cta-licht { background: #fff; color: var(--teal); border-color: #fff; }
.tc-band .tc-cta-licht:hover { background: rgba(255,255,255,.9); }

.tc-pitch-prijs .tc-pricing { margin-top: 0; }

@media (max-width: 640px) {
  .tc-pitch { gap: 52px; }
  .tc-demo-card { padding: 16px; }
  .tc-demo-scene { height: 138px; padding: 0 4px; }
  .tc-demo-scene .tc-avatar { width: 118px; }
  .tc-demo-beurt { grid-template-columns: 1fr; gap: 2px; }
  .tc-demo-beurt p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-demo-beurt [data-i], .tc-demo-play, .tc-demo-scene .tc-avatar { transition: none; }
}

.w-tip { position: fixed; z-index: 1000; max-width: min(280px, calc(100vw - 16px)); padding: 7px 11px; border-radius: 8px;
  background: #1a1c1a; color: #fff; font: 500 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* Eindtoets: план из четырёх частей и поле для ответа вписыванием */
.tc-exam-plan { display: flex; flex-direction: column; gap: 14px; }
.tc-exam-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: part; }
.tc-exam-parts li { counter-increment: part; display: grid; grid-template-columns: 28px 1fr auto; column-gap: 12px; align-items: baseline;
  padding: 12px 14px; border: 1px solid var(--mentora-border); border-radius: 12px; background: var(--mentora-bg); }
.tc-exam-parts li::before { content: counter(part); font-weight: 600; color: var(--mentora-text-tertiary); }
.tc-exam-parts li strong { font-weight: 600; }
.tc-exam-parts li span { grid-column: 2; font-size: 14px; color: var(--mentora-text-tertiary); }
.tc-exam-parts li em { grid-column: 3; grid-row: 1; font-style: normal; font-variant-numeric: tabular-nums; color: var(--mentora-text-tertiary); }
.tc-exam-parts li.is-done { border-color: var(--teal-border); background: var(--teal-dim); }
.tc-exam-parts li.is-done em { color: var(--teal-text); font-weight: 600; }
.tc-type { display: flex; gap: 10px; flex-wrap: wrap; }
.tc-type input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 18px; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--mentora-border); background: var(--mentora-bg); color: var(--mentora-text); }
.tc-type input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-type input.is-right { border-color: var(--teal); background: var(--teal-dim); }
.tc-type input.is-wrong { border-color: #c2410c; }
.tc-type .tc-cta { flex: 0 0 auto; width: auto; }
.tc-open-tag { font-weight: 600; }
.tc-self .tc-self-no { opacity: .85; }

/* Строфа, где второй голос спрашивает уже ученика */
.tc-ask { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 8px; padding: 12px 14px; border-radius: 12px;
  background: var(--teal-dim); border-left: 3px solid var(--teal); }
.tc-ask strong { font-weight: 600; color: var(--teal-text); }
.tc-ask span { font-size: 14px; color: var(--mentora-text-tertiary); line-height: 1.45; }
.tc-ask-turn { position: sticky; bottom: 90px; margin: 12px auto 0; width: max-content; max-width: 100%; padding: 8px 16px;
  border-radius: 999px; background: var(--teal); color: #fff; font-weight: 600; }

/* --- расписание занятий --- */
.tc-rs { align-items: stretch; }
.tc-rs h3 { margin: 6px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mentora-text-tertiary); }
.tc-rs-presets, .tc-rs-days, .tc-rs-row, .tc-rs-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tc-rs-preset, .tc-rs-days button { border: 1px solid var(--mentora-border); background: transparent; color: inherit;
  font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 99px; cursor: pointer; }
.tc-rs-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tc-rs-days button { min-width: 0; padding: 10px 0; font-size: 13px; }
.tc-rs-days button.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }
.tc-rs-row { gap: 14px; }
.tc-rs-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mentora-text-tertiary); }
.tc-rs-row input, .tc-rs-row select { font: inherit; font-size: 16px; padding: 8px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--mentora-border); background: var(--paper); color: inherit; }
.tc-rs-slots, .tc-rs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tc-rs-slots li { font-weight: 600; }
.tc-rs-list li { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.tc-rs-list b { flex: 0 0 auto; min-width: 150px; font-weight: 600; }
.tc-rs-list span { flex: 1 1 200px; color: var(--mentora-text-secondary, inherit); }
.tc-rs-link { border: 0; background: none; font: inherit; font-size: 14px; color: var(--teal-text); cursor: pointer; padding: 8px 4px; }
.tc-rs-acts button.tc-btn { border: 0; font: inherit; font-size: 14px; cursor: pointer; }

/* --- вторая неделя юнита --- */
.tc-extra { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.tc-extra h2 { margin: 0; font-size: 17px; }
.tc-read .tc-tr[hidden] { display: none; }
.tc-write { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; line-height: 1.5; padding: 12px 14px;
  border-radius: var(--radius-md); border: 1px solid var(--mentora-border); background: var(--paper); color: inherit;
  resize: vertical; }
.tc-write:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tc-write-key { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--mentora-bg-secondary); }
.tc-write-key h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mentora-text-tertiary); }
.tc-write-key p { margin: 0 0 14px; font-size: 17px; line-height: 1.5; }
.tc-write-key ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tc-write-q { margin: 0 0 12px; font-size: 17px; line-height: 1.5; }
.tc-write-doc { font-size: 15px; line-height: 1.45; }
.tc-talk-tips { font-size: 17px; line-height: 1.5; gap: 10px; }
/* Собеседник: линейный рисунок на бумаге, как кадры курса, в обеих темах. */
.tc-avatar { --av-paper: #fbf9f2; --av-pen: #1d1d1b; width: min(100%, 168px); margin: 0 auto 12px; padding: 10px 10px 0;
  background: var(--av-paper); border-radius: var(--radius-md); overflow: hidden; }
.tc-avatar svg { display: block; width: 100%; height: auto; }
.tc-avatar .ln { fill: var(--av-paper); stroke: var(--av-pen); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.tc-avatar .st { fill: none; stroke: var(--av-pen); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tc-avatar .thin { stroke-width: 1.4; }
.tc-avatar .thick { stroke-width: 3.4; }
.tc-avatar .ey { fill: var(--av-pen); transform-box: fill-box; transform-origin: center; transition: transform .07s; }
.tc-avatar .in { fill: #e9dfd0; stroke: var(--av-pen); stroke-width: 2.2; stroke-linejoin: round; }
.tc-avatar .tooth { fill: var(--av-paper); stroke: var(--av-pen); stroke-width: 1.4; stroke-linejoin: round; }
.tc-avatar .tooth.wide { stroke-width: 2.2; }
.tc-avatar .hd { transform-origin: 160px 250px; }
.tc-avatar .jaw { transform-box: fill-box; transform-origin: center top; }
.tc-avatar-again { display: block; margin: 0 auto 12px; }
.tc-write-words { margin: 0 0 12px; font-size: 14px; }
.tc-write-words summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.tc-write-words h4 { margin: 10px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tc-write-words ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tc-write-words li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tc-write-words button { font: inherit; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; }
.tc-write-words span { color: var(--mentora-text-secondary); }
.tc-write-tips { margin: 0 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--mentora-text-secondary, inherit); }
.tc-rs-list b { min-width: 0; flex: 1 1 100%; }
.tc-read-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.tc-play.tc-read-play { width: 48px; height: 48px; min-width: 48px; }
.tc-play.tc-read-play svg { width: 22px; height: 22px; }
.tc-ask-turn { display: flex; align-items: center; gap: 12px; }
.tc-ask-turn[hidden] { display: none; }
.tc-ask-go { border: 0; border-radius: 99px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600;
  background: #fff; color: var(--teal); cursor: pointer; min-height: 40px; }
.tc-ask-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tc-ask-turn { flex-wrap: wrap; justify-content: center; width: auto; border-radius: 22px; }
.tc-ask-hint { border: 1px solid rgba(255,255,255,.6); border-radius: 99px; padding: 8px 14px; font: inherit; font-size: 14px;
  background: transparent; color: #fff; cursor: pointer; min-height: 40px; }
.tc-ask-hint:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tc-ask-example { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--mentora-bg-secondary);
  font-family: var(--font-display, inherit); font-size: 18px; line-height: 1.45; }
.tc-ask-example[hidden] { display: none; }

/* --- занятие на сегодня --- */
.tc-today { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 18px 18px 20px;
  border: 1px solid var(--mentora-border); border-radius: 16px; background: var(--paper); }
.tc-today h2 { margin: 0; font-size: 19px; }
.tc-today .tc-set { padding: 0; border: 0; }
.tc-today .tc-set > h2 { display: none; }
.tc-today-go { align-self: stretch; text-align: center; padding: 13px 18px; font-size: 16px; text-decoration: none; }
.tc-today-link { font-size: 14px; color: var(--teal-text); }

/* Первая карточка оглавления: начать или продолжить урок. */
.tc-today.tc-next .tc-cta { display: block; text-align: center; text-decoration: none; margin-top: 10px; }
.tc-pass-nav[hidden], .tc-mastery-box[hidden] { display: none; }

/* Рабочий документ второй недели */
.tc-doc { background: var(--mentora-bg-secondary); border: 1px solid var(--mentora-border); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.tc-doc pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13.5px/1.55 ui-monospace, Menlo, monospace; }
.tc-doc-title { margin: 6px 0 0; font-size: 18px; }
.tc-doc-again { margin: 0 0 12px; }
.tc-doc-again summary { cursor: pointer; font-weight: 600; }
.tc-doc-words { margin-top: 10px; border-top: 1px solid var(--mentora-border); padding-top: 8px; }
.tc-doc-words summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.tc-doc-words dl { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.tc-doc-words dt { font-weight: 600; margin-top: 6px; }
.tc-doc-words dd { margin: 0; color: var(--mentora-text-secondary); }

/* ── Слой «как в ролике» (video/avatars, 2026-10-19) ─────────────────────
   Страница юнита: заголовок шрифтом ролика, шесть уроков линией шагов,
   следующий урок — светлая карточка с оранжевой кнопкой звука вместо
   тёмно-зелёного блока. Правила идут последними и перекрывают старые слои. */
:root[data-theme="dark"] { --tc-orange: #ff7a3d; --tc-orange-soft: #3a2418; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tc-orange: #ff7a3d; --tc-orange-soft: #3a2418; } }

body { font-family: var(--font-body); }
.tc-uhead { margin-bottom: 18px; }
.tc-uhead-k { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-text); margin-bottom: 6px; }
.tc-uhead h1 { font-family: var(--font-head); font-weight: 400; font-size: clamp(34px, 6vw, 52px); line-height: 1.05; letter-spacing: -.01em; }
.tc-uhead .tc-meta { margin-top: 6px; font-size: 15px; }
.tc-uhead .tc-mastery-box { margin-top: 14px; max-width: 420px; }
.tc-uhead .tc-mastery-bar { height: 6px; background: var(--mentora-border); }
.tc-uhead .tc-mastery-bar i { background: var(--tc-orange); }

/* Проходы — цепочка, как «Hear › Answer › Compare» в ролике. */
.tc-pass-nav { background: none; padding: 0; gap: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; margin: 6px 0 22px; }
.tc-pass-tab { flex: 0 0 auto; padding: 8px 16px !important; border-radius: 999px !important; border: 1px solid var(--mentora-border) !important;
  background: var(--paper) !important; font-size: 14px; font-weight: 600; color: var(--mentora-text-secondary); box-shadow: none !important; }
.tc-pass-tab + .tc-pass-tab { margin-left: 22px; position: relative; }
.tc-pass-tab + .tc-pass-tab::before { content: "\203A"; position: absolute; left: -16px; top: 50%; transform: translateY(-52%);
  color: var(--mentora-text-tertiary); font-weight: 400; pointer-events: none; }
.tc-pass-tab.is-active { background: var(--teal) !important; border-color: var(--teal) !important; color: #fff; }
:root[data-theme="dark"] .tc-pass-tab.is-active { color: #10231b; }
.tc-pass-tab.is-locked { opacity: .6; }

/* Следующий урок: светлая карточка, крупный заголовок, оранжевый круг. */
.tc-go { background: var(--paper) !important; color: var(--mentora-text-primary) !important; border: 1px solid var(--mentora-border) !important;
  border-radius: 20px; padding: 22px 88px 22px 24px; box-shadow: 0 1px 2px rgba(40,30,10,.04), 0 12px 32px -18px rgba(40,30,10,.25); }
.tc-go:hover { background: var(--paper) !important; border-color: var(--tc-orange) !important; }
.tc-go-k { color: var(--teal-text) !important; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.tc-go-t { font-family: var(--font-head) !important; font-weight: 400; font-size: 34px; line-height: 1.1; }
.tc-go-c { color: var(--mentora-text-secondary) !important; }
.tc-go::after { width: 52px !important; height: 52px !important; margin-top: -26px !important; right: 22px !important;
  background-color: var(--tc-orange) !important; border-radius: 50%; box-shadow: 0 6px 16px -6px var(--tc-orange); }
:root[data-theme="dark"] .tc-go { color: var(--mentora-text-primary) !important; }

/* Шесть уроков — линия шагов. Узко — вертикальная лента. */
.tc-steps { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 0 !important; margin: 26px 0 8px; counter-reset: none; }
.tc-steps li { position: relative; }
.tc-steps li + li::before { content: ""; position: absolute; top: 22px; right: 50%; width: 100%; height: 2px; background: var(--mentora-border); }
.tc-steps li:has(.is-done) + li::before { background: var(--teal); }
.tc-steps .tc-day { position: relative; display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  width: 100%; padding: 0 4px 6px !important; background: none !important; border: 0 !important; box-shadow: none !important; opacity: 1; }
.tc-steps .tc-day-n { width: 44px !important; height: 44px !important; font-size: 17px !important; font-family: var(--font-head);
  background: var(--paper); border: 2px solid var(--mentora-border-mid) !important; color: var(--mentora-text-primary); z-index: 1; }
.tc-steps .tc-day.is-done .tc-day-n { background: var(--teal) !important; border-color: var(--teal) !important; color: #fff; }
.tc-steps .tc-day.is-next .tc-day-n { border-color: var(--tc-orange) !important; color: var(--tc-orange);
  box-shadow: 0 0 0 6px var(--tc-orange-soft); }
.tc-steps .tc-day.is-locked .tc-day-n { color: var(--mentora-text-tertiary); font-size: 13px !important; }
.tc-steps .tc-day.is-locked { opacity: .7; }
.tc-steps .tc-day-t { font-family: var(--font-head); font-weight: 400; font-size: 18px; line-height: 1.15; }
.tc-steps .tc-day-s { font-size: 12.5px; line-height: 1.3; }
.tc-steps .tc-day:hover:not(.is-locked) .tc-day-n { border-color: var(--teal) !important; }
@media (max-width: 640px) {
  .tc-steps { grid-template-columns: 1fr; }
  .tc-steps li + li::before { top: -10px; left: 21px; right: auto; width: 2px; height: 30px; }
  .tc-steps .tc-day { flex-direction: row; text-align: left; align-items: center; gap: 14px; padding: 8px 0 !important; }
  .tc-steps .tc-day-t, .tc-steps .tc-day-s { display: block; }
  .tc-steps .tc-day > span:not(.tc-day-n) { flex: 0 1 auto; }
  .tc-steps .tc-day { display: grid !important; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 0; }
  .tc-steps .tc-day-n { grid-row: 1 / 3; }
}

/* Вторая неделя и практика — светлые карточки с тем же языком. */
.tc-extra h2 { font-family: var(--font-head); font-weight: 400; font-size: 26px; }
.tc-extra .tc-day { border-radius: 16px; }
.tc-steps .tc-day-n svg { width: 20px; height: 20px; }
.tc-steps .tc-day.is-locked .tc-day-n svg { width: 16px; height: 16px; }
.tc-go.has-pic { padding-left: 244px; min-height: 140px; justify-content: center; }
/* Кадр 900×506 с подписью внизу: подпись срезаем, берём верх сцены. */
.tc-go-pic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 216px; aspect-ratio: 900 / 420;
  height: auto; object-fit: cover; object-position: center top; border-radius: 12px; border: 1px solid var(--mentora-border); background: #f6f4ee; }
@media (max-width: 560px) { .tc-go.has-pic { padding: 132px 84px 20px 20px; } .tc-go-pic { left: 12px; top: 12px; transform: none; width: calc(100% - 24px); aspect-ratio: auto; height: 108px; } }
.tc-pass-tab svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
@media (max-width: 640px) {
  .tc-pass-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 2px 16px; }
  .tc-pass-nav::-webkit-scrollbar { display: none; }
  .tc-pass-tab { white-space: nowrap; }
}
.tc-extra .tc-day-n svg { width: 15px; height: 15px; }

/* Звук: оранжевая кнопка везде и полоса с волной (waveBar в course.js). */
.tc-play { background: var(--tc-orange) !important; color: #fff !important; border: 0 !important; border-radius: 50% !important;
  box-shadow: 0 6px 16px -8px var(--tc-orange); }
.tc-play:hover { background: color-mix(in srgb, var(--tc-orange) 88%, #000) !important; }
.tc-wave { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 7px 14px 7px 7px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--mentora-border); box-shadow: 0 1px 2px rgba(40,30,10,.04); }
.tc-wave .tc-play { width: 44px !important; height: 44px !important; min-width: 44px !important; }
.tc-wave .tc-play svg { width: 20px; height: 20px; }
.tc-wave-t { font: 600 13px/1 var(--font-mono, ui-monospace, monospace); color: var(--mentora-text-secondary);
  font-variant-numeric: tabular-nums; min-width: 34px; }
.tc-wave-c { flex: 1; min-width: 60px; height: 30px; display: block; }
.tc-foot-row:has(.tc-wave) { flex-wrap: wrap; }
.tc-foot-row .tc-wave { flex: 1 1 320px; }
.tc-dock > .tc-wave { border: 0; box-shadow: none; padding: 4px 4px 0; background: none; border-radius: 0; }
.tc-dock > .tc-wave .tc-wave-c { height: 26px; }
.tc-wave.tc-wave-big { width: 100%; max-width: 560px; align-self: center; margin: 18px auto; padding: 9px 18px 9px 9px; }
.tc-wave.tc-wave-big .tc-play { width: 56px !important; height: 56px !important; min-width: 56px !important; }
.tc-wave.tc-wave-big .tc-wave-c { height: 40px; }

/* Лента уровней вместо переключателя A0–B1 / B1–B2+. */
.tc-ribbon { margin: 8px 0 26px; }
.tc-ribbon ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.tc-ribbon li { position: relative; text-align: center; }
.tc-ribbon li + li::before { content: ""; position: absolute; top: 21px; right: 50%; width: 100%; height: 2px; background: var(--mentora-border); }
.tc-ribbon li.is-done + li::before, .tc-ribbon li.is-done::before, .tc-ribbon li.is-here::before { background: var(--teal); }
.tc-ribbon a, .tc-ribbon span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.tc-ribbon b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--mentora-border-mid); font: 400 15px var(--font-head); color: var(--mentora-text-primary); }
.tc-ribbon li.is-done b { background: var(--teal); border-color: var(--teal); color: #fff; }
.tc-ribbon li.is-here b { border-color: var(--tc-orange); color: var(--tc-orange); box-shadow: 0 0 0 6px var(--tc-orange-soft); }
.tc-ribbon small { font-size: 12px; color: var(--mentora-text-tertiary); min-height: 1.2em; }
.tc-ribbon li.is-here small { color: var(--tc-orange); font-weight: 700; }
.tc-ribbon a:hover b { border-color: var(--teal); }
@media (max-width: 420px) { .tc-ribbon b { width: 36px; height: 36px; font-size: 13px; } .tc-ribbon li + li::before { top: 17px; } .tc-ribbon small { font-size: 10.5px; } }

.tc-modules { margin: 30px 0 10px; }
.tc-modules h2 { font: 400 26px/1.15 var(--font-head); margin: 0 0 12px; }
.tc-modules-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.tc-module { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 18px; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--mentora-border); box-shadow: 0 1px 2px rgba(40,30,10,.04); }
.tc-module:hover { border-color: var(--tc-orange); }
.tc-module-l { font: 400 24px var(--font-head); color: var(--teal-text); }
.tc-module strong { font-weight: 600; font-size: 15px; line-height: 1.4; }
.tc-module-p { font-size: 13.5px; color: var(--mentora-text-tertiary); font-variant-numeric: tabular-nums; }

/* Spreken как сцена из ролика: цепочка шагов, облачка, собеседник и Лусия. */
.tc-chain { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tc-chain li { position: relative; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--mentora-border);
  background: var(--paper); font-size: 13.5px; font-weight: 600; color: var(--mentora-text-tertiary); }
.tc-chain li + li::before { content: "\203A"; position: absolute; left: -15px; top: 50%; transform: translateY(-52%); color: var(--mentora-text-tertiary); font-weight: 400; }
.tc-chain li.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }
.tc-chain li.is-done { color: var(--teal-text); border-color: var(--teal-border); }
:root[data-theme="dark"] .tc-chain li.is-on { color: #10231b; }

.tc-spk { position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: end; padding: 6px 0 0; margin: 4px 0 18px; }
.tc-spk.has-reply { grid-template-columns: 1fr 1fr; }
.tc-spk::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: 0; height: 1.5px; background: var(--mentora-pen, #1d1d1b); opacity: .55; }
.tc-spk-l, .tc-spk-r { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.tc-spk-r:empty { display: none; }
.tc-spk .tc-avatar { margin: 0; width: min(100%, 190px); background: none; border: 0; box-shadow: none; padding: 0; }
.tc-bubble { position: relative; margin: 0 !important; max-width: 520px; padding: 14px 18px !important; border-radius: 16px;
  background: var(--paper); border: 1.5px solid var(--mentora-pen, #1d1d1b); box-shadow: 0 8px 22px -16px rgba(40,30,10,.4);
  font-family: var(--font-display); font-size: clamp(19px, 3.4vw, 24px) !important; line-height: 1.35 !important; color: var(--mentora-text-primary); }
.tc-spk.has-av .tc-bubble::after, .tc-bubble.is-reply::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -8px;
  background: var(--paper); border-right: 1.5px solid var(--mentora-pen, #1d1d1b); border-bottom: 1.5px solid var(--mentora-pen, #1d1d1b); transform: rotate(45deg); }
.tc-spk:not(.has-av) .tc-spk-l .tc-bubble { align-self: stretch; max-width: none; }
.tc-spk:not(.has-av)::after { display: none; }
.tc-bubble.is-reply { border-color: var(--teal); }
.tc-bubble.is-reply::after { border-color: var(--teal); }
.tc-avatar-again { align-self: center; }
@media (max-width: 640px) {
  .tc-spk.has-reply { grid-template-columns: 1fr; }
  .tc-spk .tc-avatar { width: 150px; }
}
:root { --mentora-pen: #1d1d1b; }
:root[data-theme="dark"] { --mentora-pen: #e8eae7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mentora-pen: #e8eae7; } }
.tc-spk-l, .tc-spk-r { gap: 4px; }
.tc-spk .tc-bubble { margin-bottom: 10px !important; }

/* Разминка как в ролике: заголовок, оранжевая плитка «To review», задания в карточке. */
.tc-warm-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding: 8px 0 18px; }
.tc-warm-txt { flex: 1 1 280px; min-width: 0; }
.tc-warm-intro h2 { font: 400 clamp(30px, 5vw, 42px)/1.08 var(--font-head); margin: 0 0 10px; text-wrap: balance; }
.tc-warm-intro .tc-hint { font-size: 16px; }
.tc-warm-tile { flex: 0 0 auto; display: grid; place-items: center; gap: 4px; min-width: 128px; padding: 14px 20px 16px; border-radius: 16px;
  border: 1.5px solid var(--tc-orange); background: var(--paper); }
.tc-warm-tile span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mentora-text-secondary); }
.tc-warm-tile b { font: 400 44px/1 var(--font-head); color: var(--tc-orange); }
.tc-warm-intro .tc-toggle { flex-basis: 100%; justify-self: start; width: max-content; }
.tc-warm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.tc-warm-head span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-text); }
.tc-warm-head b { font: 600 13px var(--font-body); color: var(--tc-orange); font-variant-numeric: tabular-nums; }
.tc-warm-card { padding: 20px 22px; border-radius: 18px; background: var(--paper); border: 1.5px solid var(--mentora-pen); }
.tc-warm-card > :first-child { margin-top: 0; }
.tc-warm-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.tc-warm-intro .tc-toggle { grid-column: 1 / -1; justify-self: start; width: auto; flex-basis: auto; }
@media (max-width: 420px) { .tc-warm-intro { grid-template-columns: 1fr; } .tc-warm-tile { justify-self: start; } }

/* Главная курса как в ролике. */
.tc-today.tc-next { padding: 0; background: none; border: 0; box-shadow: none; margin-bottom: 14px; }
.tc-next-go { display: flex; flex-direction: column; gap: 4px; position: relative; text-decoration: none; width: 100%; box-sizing: border-box; }
.tc-today:not(.tc-next) { background: var(--paper); border: 1px solid var(--mentora-border); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(40,30,10,.04), 0 12px 32px -18px rgba(40,30,10,.25); }
.tc-today h2 { font: 400 26px/1.15 var(--font-head); }
.tc-today-go { background: var(--tc-orange) !important; border-color: var(--tc-orange) !important; color: #fff !important; border-radius: 999px; font-weight: 700; }

.tc-blok { margin-top: 30px; }
.tc-blok-t { font-family: var(--font-head) !important; font-weight: 400 !important; font-size: 22px !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--mentora-text-primary) !important; }
.tc-blok-l { font-weight: 700; color: var(--teal-text); letter-spacing: .06em; }
.tc-units { gap: 10px; }
.tc-units a { grid-template-columns: 44px 1fr auto; padding: 14px 18px 14px 14px; border-radius: 16px; background: var(--paper);
  border-color: var(--mentora-border); box-shadow: 0 1px 2px rgba(40,30,10,.04); }
.tc-units a:hover { background: var(--paper); border-color: var(--tc-orange); }
.tc-unit-n { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--mentora-border-mid); font: 400 16px var(--font-head) !important; color: var(--mentora-text-primary) !important; }
.tc-unit-t { font: 400 20px/1.2 var(--font-head); }
.tc-unit-p i { height: 4px; }
.tc-unit-p i.on { background: var(--tc-orange); }
.tc-units li:has(.tc-unit-p i:last-child.on) .tc-unit-n { background: var(--teal); border-color: var(--teal); color: #fff !important; }
@media (max-width: 560px) { .tc-go.has-pic::after { top: auto !important; bottom: 22px; margin-top: 0 !important; } }

/* ── Урок как в ролике (2026-10-19) ─────────────────────────────────────
   Каркас: в уроке нет бокового меню ни на какой ширине (правило для
   вернувшихся html.tc-terug его показывало, и колонка урока уезжала
   вправо от кнопки внизу). Кнопки: главная — зелёная «таблетка», вторые —
   контурные таблетки, звук — оранжевый круг. */
html body.tc-in-lesson .tc-side { display: none !important; }
body.tc-in-lesson .tc-col { margin-left: 0 !important; width: 100%; }
.tc-in-lesson .tc-page { max-width: 722px; } /* 690 кнопки + поля 16 */

.tc-cta, .tc-btn { border-radius: 999px !important; font-weight: 700; letter-spacing: .01em; }
.tc-cta { min-height: 54px; font-size: 17px; box-shadow: 0 8px 20px -12px rgba(63,111,95,.7) !important; }
.tc-toggle { border-radius: 999px !important; }

/* Текст урока крупнее: на большом экране 14–15 px читался как сноска. */
.tc-in-lesson .tc-hint { font-size: 16px; line-height: 1.55; }
.tc-in-lesson .tc-explain { font-size: 16.5px; }
.tc-task-q { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 4vw, 32px); line-height: 1.3; }

/* Варианты ответа — светлые карточки, наведение оранжевым. */
.tc-opt { border-radius: 16px !important; border: 1.5px solid var(--mentora-border) !important; background: var(--paper) !important;
  box-shadow: 0 1px 2px rgba(40,30,10,.05) !important; font-size: 18px; min-height: 58px; transition: border-color .15s, transform .1s; }
/* Только с мышью: на телефоне :hover «залипает» после тапа, и в следующем
   вопросе вариант на том же месте уже выглядел выбранным. */
@media (hover: hover) and (pointer: fine) { .tc-opt:hover:not(:disabled) { border-color: var(--tc-orange) !important; } }
.tc-opt.is-right { border-color: var(--teal) !important; background: var(--teal-dim) !important; }
.tc-opt.is-wrong { border-color: var(--tc-alert) !important; }

/* Patronen — карточка правила: заголовок шрифтом ролика, примеры крупно. */
.tc-pattern { background: var(--paper); border: 1.5px solid var(--mentora-pen) !important; border-radius: 20px !important; padding: 24px 26px !important;
  box-shadow: 0 12px 32px -22px rgba(40,30,10,.35); }
.tc-pattern h2 { font: 400 28px/1.15 var(--font-head) !important; color: var(--mentora-text-primary) !important; margin: 0 0 12px !important; text-wrap: balance; }
.tc-pattern .tc-explain { color: var(--mentora-text-secondary); }
.tc-pattern pre { font-family: var(--font-display) !important; font-size: 22px !important; line-height: 1.6 !important; margin-top: 14px !important;
  padding: 14px 18px; border-radius: 14px; background: var(--mentora-bg-secondary); }
.tc-pattern b { color: var(--tc-orange); font-weight: 700; }

/* Слова — строки-карточки вместо зебры. */
.tc-cards { gap: 8px; }
.tc-card { background: var(--paper) !important; border: 1px solid var(--mentora-border); border-radius: 14px; padding: 12px 16px; min-height: 52px; align-items: center; }
.tc-card-nl { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.tc-card-gloss { font-size: 15.5px; }
.tc-task-k { font-size: 12.5px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-text) !important; margin: 0 0 10px !important; }
.tc-in-lesson .tc-task { padding: 24px 26px 26px; border-radius: 20px; background: var(--paper); border: 1.5px solid var(--mentora-pen);
  box-shadow: 0 12px 32px -22px rgba(40,30,10,.35); }
.tc-warm-card .tc-task { padding: 0; border: 0; box-shadow: none; background: none; }
.tc-gap-slot { border: 0 !important; border-bottom: 2.5px solid var(--tc-orange) !important; border-radius: 0 !important; background: none !important;
  min-width: 3.2em; margin: 0 .2em; }
.tc-task-opts { gap: 10px; }
@media (min-width: 640px) { .tc-task-opts:has(.tc-opt:nth-child(4)) { display: grid !important; grid-template-columns: 1fr 1fr; } }
.tc-in-lesson .tc-finish h2, .tc-in-lesson .tc-resume h2, .tc-in-lesson .tc-stage > h2 { font-family: var(--font-head) !important; font-weight: 400 !important; font-size: clamp(28px, 4.5vw, 38px) !important; line-height: 1.1; }

/* Мультики юнитов (scene.js). Сцена 900×380; персонажи — бюсты avatar.js
   поверх фона, по центру своей точки. */
.tc-sc { position: relative; margin: 0; width: 100%; aspect-ratio: 900 / 380; border-radius: 18px; overflow: hidden;
  background: #fbf9f2; border: 1px solid var(--mentora-border); --pen: #1d1d1b;
  /* Сцена — бумага в любой теме: свои цвета, не токены темы. */
  --tc-orange: #ff5500; --tc-orange-soft: #ffe7da; --teal: #3f6f5f; }
.tc-sc-cam { position: absolute; inset: 0; transform-origin: 50% 86%; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.tc-sc .fur { fill: #fbf9f2; }
.tc-sc .bean { fill: #f4b4a4; stroke: none; }
.tc-sc .scr { stroke-dasharray: 70; }
.tc-sc.fx-typing .scr { animation: sc-type 2.6s steps(14) infinite; }
@keyframes sc-type { from { stroke-dashoffset: 70; } 70%, to { stroke-dashoffset: 0; } }
.tc-sc-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-sc-front { pointer-events: none; }
.tc-sc .ln { fill: #fbf9f2; stroke: var(--pen); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.tc-sc .st { fill: none; stroke: var(--pen); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tc-sc .thin { stroke-width: 1.4; }
.tc-sc .sky { fill: #f3f0e6; }
.tc-sc .mark { fill: var(--tc-orange-soft); }
.tc-sc .pin, .tc-sc .dot { fill: var(--tc-orange); stroke: none; }
.tc-sc .ey { fill: var(--pen); }
.tc-sc .leaf { fill: #e3efe8; }
.tc-sc .floor { stroke-width: 1.6; }
.tc-sc-people { position: absolute; inset: 0; }
.tc-sc .tc-sc-who { position: absolute; bottom: 13.2%; width: 27%; margin: 0; padding: 0; transform: translateX(-50%);
  background: none; border: 0; box-shadow: none; overflow: visible; transition: left .6s cubic-bezier(.2,.8,.2,1); }
.tc-sc .tc-sc-who.in-bed { bottom: 26%; width: 21%; }
.tc-sc .tc-sc-who.is-new { animation: sc-in .45s cubic-bezier(.2,.8,.2,1); }
.tc-sc .tc-sc-who svg > path:last-child { display: none; }  /* своя линия пола у бюста не нужна */
@keyframes sc-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* движение предметов */
.tc-sc .sc-min { animation: sc-spin 12s linear infinite; }
.tc-sc.fx-clock .sc-min { animation-duration: 2.4s; }
.tc-sc.fx-clock .sc-hour { animation: sc-spin 28.8s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.tc-sc.fx-phone .sc-phone { animation: sc-ring 1.6s ease-in-out infinite; }
.tc-sc .sc-rings { opacity: 0; }
.tc-sc.fx-phone .sc-rings { animation: sc-blinkop 1.6s ease-in-out infinite; }
@keyframes sc-ring { 0%, 40%, 100% { transform: rotate(0); } 5%, 15%, 25%, 35% { transform: rotate(-7deg); } 10%, 20%, 30% { transform: rotate(7deg); } }
@keyframes sc-blinkop { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tc-sc .sc-steam { animation: sc-steam 3s ease-in-out infinite; }
@keyframes sc-steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-8px); } }
.tc-sc .sc-ecg { stroke: var(--teal); stroke-dasharray: 120; animation: sc-ecg 1.4s linear infinite; }
@keyframes sc-ecg { from { stroke-dashoffset: 120; } to { stroke-dashoffset: -120; } }
.tc-sc .sc-drop { animation: sc-drop 2.2s ease-in infinite; }
@keyframes sc-drop { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.tc-sc .cloud { animation: sc-cloud 18s linear infinite; }
@keyframes sc-cloud { from { transform: translateX(-6px); } 50% { transform: translateX(10px); } to { transform: translateX(-6px); } }

/* кот */
.tc-sc .sc-breathe { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-breathe 3.2s ease-in-out infinite; }
@keyframes sc-breathe { 50% { transform: scale(1.04, 1.08); } }
.tc-sc .sc-z { font: 600 15px var(--font-body); fill: var(--pen); opacity: 0; animation: sc-z 3.2s ease-out infinite; }
.tc-sc .sc-z2 { animation-delay: 1.4s; font-size: 12px; }
@keyframes sc-z { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translate(10px, -14px); } }
.tc-sc .sc-tail { animation: sc-tail 2.4s ease-in-out infinite; }
@keyframes sc-tail { 50% { transform: rotate(-12deg); } }
.tc-sc .sc-blink { transform-box: fill-box; transform-origin: center; animation: sc-catblink 5s infinite; }
@keyframes sc-catblink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.tc-sc .sc-cat-walk { animation: sc-walk 16s linear infinite; }
@keyframes sc-walk { from { transform: translateX(-80px); } to { transform: translateX(980px); } }
.tc-sc .sc-cat > g, .tc-sc .sc-cat-walk > g { transform-box: view-box; }
.tc-sc .sc-cat-walk > g { scale: 1.35; transform-origin: 0 330px; }
.tc-sc .sc-leg1 { animation: sc-step .5s ease-in-out infinite; }
.tc-sc .sc-leg2 { animation: sc-step .5s ease-in-out infinite reverse; }
@keyframes sc-step { 50% { transform: translateX(3px); } }
.tc-sc .sc-paw { animation: sc-paw 1.1s ease-in-out infinite; }
@keyframes sc-paw { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-28deg); } }
.tc-sc .sc-yarn { transform-box: view-box; transform-origin: 44px -110px; animation: sc-swing 1.1s ease-in-out infinite; }
@keyframes sc-swing { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(9deg); } }
/* Лапа из-за края стола: тянется, хватает и утаскивает. Печенье/ручка на
   столе пропадает в тот же момент, что лапа уходит. */
.tc-sc .sc-arm { animation: sc-arm 7s ease-in-out infinite; }
@keyframes sc-arm { 0%, 30% { transform: translate(0, 150px); } 40% { transform: translate(0, -6px); } 46%, 52% { transform: translate(0, 0); } 66%, 100% { transform: translate(0, 150px); } }
.tc-sc:has(.sc-steal) .sc-cookie, .tc-sc:has(.sc-steal) .sc-pen { animation: sc-gone 7s step-end infinite; }
@keyframes sc-gone { 0%, 52% { opacity: 1; } 53%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }

.tc-sc.is-calm *, .tc-sc.is-calm .tc-sc-who { animation: none !important; }
.tc-scene.has-sc { background: none; }
.tc-sc .sc-loot { opacity: 0; animation: sc-loot 7s step-end infinite; }
@keyframes sc-loot { 0%, 52% { opacity: 0; } 53%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
.tc-sc .sc-txt { font: 600 15px var(--font-body); fill: var(--pen); }
.tc-sc .pill { fill: var(--tc-orange-soft); } .tc-sc .pill2 { fill: #e3efe8; }
.tc-sc .drape { fill: #e3efe8; }
.tc-sc .sc-curtain { transition: transform 1s; }
.tc-sc.fx-curtain .sc-curtain { animation: sc-curtain 6s ease-in-out infinite; }
@keyframes sc-curtain { 0%, 15% { transform: translateX(0); } 45%, 85% { transform: translateX(150px); } 100% { transform: translateX(0); } }
.tc-sc.fx-hot .sc-hot { stroke: var(--tc-orange); stroke-width: 3; animation: sc-blinkop 1.4s ease-in-out infinite; }
.tc-sc.fx-alarm .sc-ecg { stroke: #d6452a; animation-duration: .7s; }
.tc-sc .sc-glow { opacity: .6; }
/* немного цвета в волосах и украшениях, как в демо на главной */
.tc-sc [data-who="dp"] .hr { fill: #9c6a45; } .tc-sc [data-who="dp"] .sj { fill: #f3ecdf; }
.tc-sc [data-who="da"] .hr { fill: #b8bdc2; } .tc-sc .gd { fill: #e2b84b; }
.tc-sc [data-who="jv"] .hr { fill: #e2b07a; } .tc-sc [data-who="om"] .hr { fill: #c8ccd0; }
.tc-sc .tear { fill: #9ec9e6; stroke: var(--pen); stroke-width: 1; animation: sc-tear 1.8s ease-in infinite; }
.tc-sc .tear.t2 { animation-delay: .9s; }
@keyframes sc-tear { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
.tc-sc .sc-q { font: 700 30px var(--font-head); fill: var(--tc-orange); animation: sc-q 2.2s ease-in-out infinite; }
.tc-sc .sc-q.q2 { font-size: 22px; animation-delay: .6s; }
@keyframes sc-q { 0%, 100% { opacity: .2; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-4px); } }
.tc-sc.fx-balance .sc-balance { animation: sc-tilt 3.4s ease-in-out infinite; }
@keyframes sc-tilt { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.tc-sc.fx-hot2 .sc-hot2 { animation: sc-blinkop 1.2s ease-in-out infinite; }
.tc-sc .tc-sc-who.is-back { width: 19%; bottom: 17%; filter: saturate(.8); z-index: 0; }
.tc-sc .tc-sc-who:not(.is-back) { z-index: 1; }
.tc-sc .sc-chart { stroke: var(--teal); stroke-dasharray: 260; }
.tc-sc.fx-chart .sc-chart { animation: sc-type 3.4s ease-out infinite; }
.tc-sc.fx-wrong .sc-wrong { fill: var(--tc-orange-soft); stroke: var(--tc-orange); animation: sc-blinkop 1.4s ease-in-out infinite; }
.tc-sc.fx-note .sc-txt, .tc-sc.fx-note path.thin { }

/* Цветные сценки второй недели (spec.color): стены, мебель и одежда в цвете. */
.tc-sc.is-color { background: linear-gradient(#eaf2f6 0 86.8%, #f2e3cc 86.8%); }
.tc-sc.is-color .half2 { fill: #fbeedd; stroke: none; }
.tc-sc.is-color .split { stroke-width: 2; }
.tc-sc.is-color .sky { fill: #cfe6f5; }
.tc-sc.is-color .leaf { fill: #8fcf97; }
.tc-sc.is-color .pill { fill: #ffc7a8; } .tc-sc.is-color .pill2 { fill: #b9dfc9; }
.tc-sc.is-color .sc-phone .ln, .tc-sc.is-color .sc-handset { fill: #ff7a3d; }
.tc-sc .sc-handset { fill: #fbf9f2; stroke: var(--pen); stroke-width: 2; }
.tc-sc.is-color [data-who="l"] .bd { fill: #ffffff; }
.tc-sc.is-color [data-who="da"] .bd { fill: #4f6d94; } .tc-sc.is-color [data-who="da"] .hr { fill: #c7cbd1; }
.tc-sc.is-color [data-who="s"] .bd { fill: #b7a6dd; } .tc-sc.is-color [data-who="s"] .hr { fill: #e3b25b; }
.tc-sc.is-color [data-who="m"] .bd { fill: #7fb9a0; } .tc-sc.is-color [data-who="m"] .hr { fill: #6b4a33; }
.tc-sc.is-color [data-who="l"] .hr { fill: #3b2a20; }
.tc-sc.is-color .tc-avatar .ln:not(.hr):not(.bd):not(.gd):not(.sj) { fill: #fbe9dc; }
.tc-sc .sc-signal { stroke: var(--teal); stroke-dasharray: 6 6; animation: sc-sig 1s linear infinite; }
@keyframes sc-sig { to { stroke-dashoffset: -24; } }
.tc-sc.fx-cut .sc-signal { stroke: #d6452a; animation: sc-blinkop .6s steps(2) infinite; }
.tc-sc .sc-rec { fill: #d6452a; }
.tc-sc.fx-rec .sc-rec { animation: sc-blinkop 1s steps(2) infinite; }
.tc-sc:not(.is-color) .half2 { fill: none; }
.tc-sc .tc-sc-front { z-index: 2; }
/* Ночь (fx-night): тёмное окно с луной и приглушённая сцена. */
.tc-sc .night { fill: #2f3d58; }
.tc-sc.fx-night { background: #e6e8ef; }
.tc-sc.is-color.fx-night { background: linear-gradient(#c9d0e2 0 86.8%, #d9cdb8 86.8%); }
.tc-sc.is-color [data-who="dp"] .bd { fill: #e48a7b; }
.tc-sc.is-color [data-who="jv"] .bd, .tc-sc.is-color [data-who="om"] .bd { fill: #a9c8ec; }
.tc-sc.is-color [data-who="jv"] .hr { fill: #c9772f; }
/* Нижняя кнопка не заезжает под боковую панель там, где панель видна. */
@media (min-width: 900px) {
  .tc-onboarding:not(.tc-in-lesson) .tc-foot,
  body.tc-known:not(.tc-in-lesson) .tc-foot,
  html.tc-terug body:not(.tc-in-lesson) .tc-foot { left: 248px; }
}
.tc-unit-path { margin: -14px 0 18px; font-size: 13.5px; line-height: 1.5; }
/* Карточка цели на главной курса. */
.tc-goal { margin: 4px 0 22px; padding: 16px 18px; border: 1px solid var(--mentora-border); border-radius: var(--radius-lg); background: var(--mentora-bg-secondary); }
.tc-goal h2 { margin: 0 0 4px; font-size: 20px; }
.tc-goal-why { margin: 0 0 12px; font-size: 14px; color: var(--mentora-text-secondary); line-height: 1.5; }
.tc-goal-bar { height: 6px; border-radius: 99px; background: var(--mentora-border); overflow: hidden; }
.tc-goal-bar i { display: block; height: 100%; background: var(--tc-orange, #e5633a); }
.tc-goal-n { margin: 8px 0 2px; font-size: 14px; font-weight: 600; }
.tc-goal-then { margin: 0; font-size: 13.5px; color: var(--mentora-text-secondary); line-height: 1.5; }
.tc-mastery-how { margin: 6px 0 0; font-size: 12.5px; }
.tc-finish-next { margin: 14px 0 0; font-weight: 600; }
/* На телефоне три этапа говорения не влезали в строку, переносились, и «›»
   оставалась в начале второй строки. Узко — одна строка, этапы делят ширину. */
@media (max-width: 520px) {
  .tc-chain { flex-wrap: nowrap; gap: 0 14px; }
  .tc-chain li { flex: 1 1 0; min-width: 0; padding: 7px 8px; font-size: 12.5px; line-height: 1.25; text-align: center; }
  .tc-chain li + li::before { left: -11px; }
}
/* Ссылка на урок под несданной частью теста юнита. */
.tc-exam-parts .tc-exam-review { display: block; grid-column: 2 / -1; margin-top: 2px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--teal-text, var(--teal)); }
/* Список ошибок теста юнита: вопрос сверху серым, верный ответ под ним. */
.tc-mist-h { margin: 14px 0 6px; font-size: 14px; font-weight: 600; text-align: left; align-self: stretch; width: 100%; }
.tc-mist { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; display: grid; gap: 8px; width: 100%; align-self: stretch; }
.tc-mist li { padding: 10px 12px; border: 1px solid var(--mentora-border); border-radius: 10px; background: var(--mentora-bg-secondary); display: grid; gap: 2px; }
.tc-mist-q { font-size: 13.5px; color: var(--mentora-text-secondary); }
.tc-mist-a { font-size: 15.5px; font-weight: 600; color: var(--teal-text, var(--teal)); }
.tc-mist-s { font-size: 12.5px; color: var(--mentora-text-tertiary); }
.tc-mist-all { margin: 6px 0 16px; text-align: left; }
.tc-mist-all summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
/* Вход по почте прямо в курсе. */
.tc-login { position: fixed; inset: 0; z-index: 200; background: rgba(10,14,12,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tc-login-card { position: relative; width: 100%; max-width: 420px; background: var(--mentora-bg); color: var(--mentora-text-primary); border-radius: var(--radius-lg); padding: 24px 20px 20px; box-shadow: 0 18px 48px rgba(0,0,0,.25); }
.tc-login-card h2 { margin: 0 0 8px; font-size: 22px; }
.tc-login-card form { display: grid; gap: 12px; margin-top: 14px; }
.tc-login-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mentora-text-secondary); }
.tc-login-card input { font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--mentora-border); background: var(--mentora-bg-secondary); color: var(--mentora-text-primary); }
.tc-login-f2 input { letter-spacing: 6px; font-size: 22px; text-align: center; }
.tc-login-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 18px; color: var(--mentora-text-secondary); cursor: pointer; padding: 6px; }
.tc-login-other { border: 0; background: none; color: var(--teal-text, var(--teal)); font: inherit; font-weight: 600; cursor: pointer; padding: 4px; }
.tc-login-err { margin: 12px 0 0; color: #c0392b; font-size: 14px; }
/* Выйти — тихой ссылкой рядом с главной кнопкой, не второй кнопкой. */
.tc-account-out { background: none; border: 0; padding: 10px 0; min-height: 44px;
  font: inherit; font-size: 14px; color: var(--teal-text); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.tc-account-who strong { color: var(--mentora-text); font-weight: 600; word-break: break-all; }
/* Вошедший уже учится: на главной — его курс, без витрины. Подписка и
   другие уровни — в «Ещё», в карточке аккаунта. */
.tc-member .tc-head, .tc-member .tc-ladder, .tc-member .rs,
.tc-member .tc-syllabus, .tc-member main > #tc-account { display: none !important; }
.tc-access h3 { margin: 4px 0 6px; font-size: 15px; color: var(--mentora-text); }
.tc-access ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tc-access li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 14.5px; color: var(--mentora-text-secondary); }
.tc-access li strong { color: var(--mentora-text); font-weight: 600; }
.tc-access li.is-open span { color: var(--teal-text); }
.tc-access li a { color: var(--teal-text); }
.tc-pitch-start { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px 0 26px; }
.tc-pitch-lvl { margin: 0; font-size: 14.5px; color: var(--mentora-text-secondary); text-align: center; }
.tc-pitch-lvl a { color: var(--teal-text); }
/* Вход в верхней полосе на телефоне: заметно, но не громче курса. */
.tc-top-in { margin-left: 8px; padding: 7px 14px; min-height: 36px; border-radius: 999px;
  border: 1px solid var(--teal); background: transparent; color: var(--teal-text);
  font: 600 14px var(--font-body); cursor: pointer; }
.tc-topbar .tc-top-in + * { margin-left: 4px; }
.tc-side-in-top { margin: -10px 8px 0; align-self: flex-start; }
.tc-join-check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px; margin: 14px 0; font-weight: 400 !important; color: var(--mentora-text-primary) !important; }
.tc-join-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; }
.tc-login-card > .tc-cta { width: 100%; margin-top: 6px; }