/* ============================================================
   Тетрадь аналитика — оформление курса.

   Направление: «наставник рядом». На странице два голоса.
   Первый — набранный текст курса: спокойный, книжный, в одну
   колонку на 66 знаков. Второй — реплики наставника: от руки,
   на левом поле, короткие. Второй голос — единственное место,
   где дизайн позволяет себе яркость; всё остальное тихое.

   ПРАВИЛО РАДИУСОВ (одно на весь проект):
     контейнеры (карточки, врезки, редактор, модалка) — 13px
     контролы (кнопки, поля, теги, чипы)              — 7px
     других радиусов в проекте нет.

   ПРАВИЛО ЦВЕТА: один акцент — фиолетовая ручка наставника.
   Маркер (жёлтый) отмечает только то, что спрашивают на
   собеседовании, и больше ничего. Зелёный, красный и янтарный
   несут смысл состояния (зачтено / ошибка / предупреждение)
   и нигде не декоративны.

   ПРАВИЛО РУКОПИСНОГО: Caveat — только короткие реплики,
   до полутора строк. Длинный рукописный текст нечитаем.
   ============================================================ */

/* ============================================================
   1. Токены
   ============================================================ */

:root {
  /* поверхности: тёплая бумага, почти белая */
  --paper:      #FCFAF6;
  --paper-2:    #F4F0E7;
  --card:       #FFFFFF;
  --grid:       #E8E2D5;

  /* линейки */
  --rule:       #E7E1D4;
  --rule-soft:  #F1EDE3;
  --rule-hard:  #CFC6B2;

  /* чернила: тёплый графит, а не подкрашенный чёрный */
  --ink:        #23201C;
  --ink-2:      #5A5349;
  --ink-3:      #7A7264;   /* 4.6:1 на бумаге — мелкие подписи читаемы */
  --ink-4:      #A79E8D;

  /* единственный акцент — ручка наставника */
  --pen:        #6B4FC9;
  --pen-2:      #8064DD;
  --pen-soft:   #F1EDFC;
  --pen-line:   #D6CBF3;
  --on-pen:     #FFFFFF;   /* текст на заливке ручкой */

  /* маркер: только термины, которые спрашивают на собеседовании */
  --mark:       #FFE59E;
  --mark-2:     #FFD86B;

  /* состояния */
  --green:      #2E6B4F;   --green-soft: #E8F1EA;   --green-line: #BFD9C7;
  --red:        #A83B2A;   --red-soft:   #FAEDE9;   --red-line:   #EDC8BF;
  --amber:      #8A5A12;   --amber-soft: #FBF1DC;   --amber-line: #E7D3A4;

  /* типографика */
  --sans:  "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --serif: "Literata", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --hand:  "Caveat", "Segoe Script", cursive;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* геометрия */
  --r:        7px;     /* контролы   */
  --r-lg:     13px;    /* контейнеры */
  --header-h: 58px;
  --wrap:     1020px;  /* главная */
  --lesson:   820px;   /* урок    */
  --measure:  66ch;
  --margin-w: 150px;   /* левое поле под реплики наставника */

  --shadow-1: 0 1px 2px rgba(35, 32, 28, .05);
  --shadow-2: 0 8px 26px -10px rgba(35, 32, 28, .16);
  --shadow-3: 0 26px 64px -20px rgba(35, 32, 28, .28);

  --ease:        cubic-bezier(.2, .6, .3, 1);
  --ease-spring: cubic-bezier(.22, 1, .3, 1);
}

[data-theme="dark"] {
  --paper:      #16130F;
  --paper-2:    #1D1A15;
  --card:       #1E1B16;
  --grid:       #2A251E;

  --rule:       #2E2921;
  --rule-soft:  #241F19;
  --rule-hard:  #453E33;

  --ink:        #EFEAE0;
  --ink-2:      #B7AE9F;
  --ink-3:      #978E7E;   /* 5.9:1 на тёмной бумаге */
  --ink-4:      #6B6355;

  --pen:        #B9A3FF;
  --pen-2:      #CDBCFF;
  --pen-soft:   #241E3A;
  --pen-line:   #3B3160;
  --on-pen:     #16130F;   /* ручка светлая — текст тёмный */

  --mark:       #6A5514;
  --mark-2:     #8A6E17;

  --green:      #6FC79B;   --green-soft: #14251C;   --green-line: #2A4536;
  --red:        #F0907C;   --red-soft:   #2C1A16;   --red-line:   #4C2C24;
  --amber:      #E0B361;   --amber-soft: #272014;   --amber-line: #453820;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2: 0 8px 26px -10px rgba(0, 0, 0, .65);
  --shadow-3: 0 26px 64px -20px rgba(0, 0, 0, .8);
}

/* ============================================================
   2. База
   ============================================================ */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 60px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--pen); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Заголовки набраны книжной засечкой: страница должна читаться как
   разобранный конспект, а не как интерфейс. Интерфейсные подписи
   (кнопки, ярлыки, навигация) остаются гротеском.               */
h1, h2 {
  margin: 0; font-family: var(--serif); font-weight: 700;
  letter-spacing: -0.016em; line-height: 1.15;
}
h3, h4 {
  margin: 0; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.25;
}

code, kbd, pre, .mono {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* текст только для экранного диктора */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

::selection { background: var(--pen-soft); color: var(--ink); }

.io-body, .modal, .theory pre, .drill-body {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-hard) transparent;
}

/* ---------- появление блоков при скролле (motion 5) ---------- */


/* ============================================================
   3. Шапка
   ============================================================ */

.hdr {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.hdr-in {
  max-width: var(--wrap); margin: 0 auto; height: 100%;
  padding: 0 32px;
  display: flex; align-items: center; gap: 18px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 600; font-size: 15px;
  text-decoration: none; white-space: nowrap;
  letter-spacing: -0.015em;
}
.brand:hover { text-decoration: none; }
/* знак — та же тетрадная клетка с галочкой, что в иконке вкладки */
.brand .mark { display: inline-flex; width: 24px; height: 24px; flex: none; }
.brand .mark svg { width: 24px; height: 24px; }
.mk-p { fill: var(--card); stroke: var(--rule-hard); }
.mk-m { fill: none; stroke: var(--pen-line); }
.mk-k { fill: none; stroke: var(--pen); }
.pb-n { font-variant-numeric: tabular-nums; }
.crumbs {
  font-size: 13.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumbs b { color: var(--ink-2); font-weight: 500; }
.hdr .spacer { margin-left: auto; }

.hdr-bar {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--pen); width: 0;
  transition: width .6s var(--ease);
}

.readbar {
  position: fixed; left: 0; top: var(--header-h); height: 2px;
  background: var(--pen); width: 0; z-index: 41; pointer-events: none;
  transition: width .1s linear;
}

.iconbtn {
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  height: 34px; min-width: 34px; padding: 0 11px; border-radius: var(--r);
  font: inherit; font-size: 13px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background-color .2s var(--ease), transform .12s var(--ease);
}
.iconbtn:hover { border-color: var(--ink-3); color: var(--ink); background: var(--paper-2); }
/* кнопки шапки не сжимаются уже своего текста — иначе подпись вылезает */
.hdr .iconbtn { flex: none; }
.iconbtn:active { transform: translateY(1px); }
.iconbtn svg { width: 15px; height: 15px; }

/* Тихий таймер: без секунд на экране — время считается само
   и видно на главной. Точка показывает, идёт ли учёт. */
.timer {
  font: inherit; font-size: 13px; color: var(--ink-3);
  border: 0; padding: 0; background: transparent;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .2s var(--ease);
}
.timer:hover { color: var(--ink-2); }
.timer.paused { opacity: .5; }
/* точка несёт состояние таймера: идёт или на паузе */
.timer::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); flex: none;
}
.timer.paused::before { background: var(--ink-4); }

/* ============================================================
   4. Обёртки
   ============================================================ */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.wrap.lesson-wrap { max-width: var(--lesson); }

/* ============================================================
   4a. Голос наставника
   ============================================================ */

/* Реплика на поле. На широком экране висит слева от колонки
   текста и не занимает её ширину; на узком становится обычным
   блоком с чертой слева. Внутри — от руки и коротко.        */
.aside {
  font-family: var(--hand);
  font-size: 21px; line-height: 1.3;
  color: var(--pen);
  margin: 0 0 18px;
  padding-left: 15px;
  border-left: 2px solid var(--pen-line);
}
.aside p { margin: 0 0 10px; }
.aside p:last-child { margin-bottom: 0; }

/* Поле выносится наружу, только если рядом с колонкой реально есть
   место: внешние поля должны вместить ширину реплики и зазор.
   Порог разный для урока (колонка 820px) и для главной (1020px) —
   с одним общим реплика уезжала бы за край экрана.               */
@media (min-width: 1200px) {
  .lesson-wrap .has-margin { position: relative; }
  .lesson-wrap .has-margin > .aside {
    position: absolute;
    left: calc(-1 * (var(--margin-w) + 26px));
    width: var(--margin-w);
    margin: 0; padding-left: 0; border-left: 0;
    text-align: right;
  }
}

@media (min-width: 1400px) {
  .hero-in.has-margin,
  .market.has-margin,
  .review.has-margin { position: relative; }
  .hero-in.has-margin > .aside,
  .market.has-margin > .aside,
  .review.has-margin > .aside {
    position: absolute;
    left: calc(-1 * (var(--margin-w) + 26px));
    width: var(--margin-w);
    margin: 0; padding-left: 0; border-left: 0;
    text-align: right;
  }
  /* Обложка сама является обёрткой, а блок со статистикой лежит
     внутри неё, поэтому его левый край сдвинут на отступ обёртки.
     Компенсируем, иначе две реплики стоят на разной вертикали. */
  .market.has-margin > .aside,
  .review.has-margin > .aside { left: calc(-1 * (var(--margin-w) + 26px + 32px)); }
}

/* Маркер. Ставится только на то, что спрашивают на собеседовании:
   если начать подсвечивать всё подряд, он перестанет что-либо значить. */
.hl {
  background-image: linear-gradient(
    transparent 58%, var(--mark) 58%, var(--mark) 93%, transparent 93%);
  padding: 0 2px;
}

/* Пояснение внутри разбора задачи: обычный текст, а не код. */
.d-say {
  font-family: var(--serif);
  font-size: 16.4px; line-height: 1.66;
  color: var(--ink-2);
  margin: 14px 0;
}
.d-say:first-child { margin-top: 0; }

/* ============================================================
   5. Главная — обложка
   ============================================================ */

/* Обложка держится на тексте и репликах на полях, а не на фактуре:
   ни клетки, ни градиента здесь нет намеренно. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.hero-in { position: relative; z-index: 1; padding-block: 72px 44px; }

.hero h1 {
  font-size: clamp(36px, 5.2vw, 54px);
  font-weight: 700; letter-spacing: -0.022em; max-width: 20ch;
  margin-bottom: 20px; line-height: 1.06;
}
.hero p.lede {
  font-family: var(--serif);
  font-size: 20px; line-height: 1.55; color: var(--ink-2);
  max-width: 46ch; margin: 0 0 36px;
}

/* карта прогресса: каждая клетка — урок */
.map { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.map-mod-h {
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px;
}
.map-cells { display: flex; gap: 4px; }
.cell {
  position: relative; display: block; padding: 0;
  width: 19px; height: 19px; border-radius: var(--r);
  border: 1.5px solid var(--rule-hard); background: var(--card);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.cell:hover { border-color: var(--pen); background: var(--pen-soft); }
.cell.done { border-color: var(--pen-line); }
/* галочка чуть вылезает за клетку — так её и ставят ручкой */
.cell .pen-tick { position: absolute; left: -2px; top: -7px; width: 25px; height: 25px; }
.cell.locked {
  border-style: dashed; border-color: var(--ink-4);
  opacity: .45; cursor: default; background: transparent;
}
.cell.locked:hover { background: transparent; border-color: var(--ink-4); }

/* Галочка ручкой наставника — на карте, в оглавлении и в момент решения. */
.pen-tick {
  display: block; overflow: visible; fill: none;
  stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 45% 70%;
}
.pen-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* единственное движение урока: галочка дорисовывается, когда задача решена */
.pen-tick.draw path { animation: pen-draw .6s .08s var(--ease) both; }
@keyframes pen-draw { from { stroke-dashoffset: 1; } }

/* Как дела — фразой наставника и календарём занятий, а не рядом цифр. */
.pace { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; }
.pace-say {
  margin: 0; flex: 1 1 300px; max-width: 520px;
  font-family: var(--hand); font-size: 26px; line-height: 1.22; color: var(--pen);
}
/* двенадцать недель точками: неделя — столбец, понедельник сверху,
   размер точки — сколько занимались в тот день */
.cal { display: flex; gap: 4px; flex: none; }
.cal-w { display: flex; flex-direction: column; gap: 4px; }
.cal-d { width: 11px; height: 11px; display: grid; place-items: center; border-radius: 50%; }
.cal-d::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.cal-d.l1::before { width: 5px; height: 5px; background: var(--pen); }
.cal-d.l2::before { width: 8px; height: 8px; background: var(--pen); }
.cal-d.l3::before { width: 11px; height: 11px; background: var(--pen); }
.cal-d.none::before { background: transparent; }
.cal-d.today { box-shadow: 0 0 0 1.5px var(--pen-line); }

/* рукописные строки переносятся ровно, без одинокого слова в конце */
.pace-say, .toc-say, .aside p { text-wrap: balance; }

/* Предложение перенести прогресс — только на пустом курсе. Тон
   спокойный: это подсказка, а не предупреждение. */
.carry {
  margin: 26px 0 0; font-size: 14.5px; color: var(--ink-2);
  max-width: 56ch; line-height: 1.55;
}

/* Вернуться к занятиям — первое, что нужно вернувшемуся человеку. */
.resume {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  max-width: 620px; margin: 0 0 36px; padding: 16px 18px 16px 20px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--pen-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.resume:hover { text-decoration: none; border-color: var(--pen); box-shadow: var(--shadow-2); }
.resume-txt { flex: 1 1 280px; min-width: 0; }
.resume-k { display: block; font-size: 13.5px; color: var(--ink-3); margin-bottom: 3px; }
.resume-t {
  display: block; font-family: var(--serif); font-size: 19px; font-weight: 700;
  letter-spacing: -0.012em; line-height: 1.25;
}
.resume-d { display: block; font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.resume-go {
  flex: none; padding: 10px 18px; border-radius: var(--r);
  background: var(--pen); color: var(--on-pen); font-size: 15px; font-weight: 600;
}
.resume:hover .resume-go { background: var(--pen-2); }

/* Повторение на главной: карточки вопросов те же, что в уроке. */
.review { padding: 44px 0 4px; }
.review-body { max-width: 720px; }
.review-intro {
  font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-2);
  max-width: 58ch; margin: 0 0 18px;
}
.review-later { font-size: 15px; color: var(--ink-2); margin: 0; }
.rv-meta { font-size: 13.5px; color: var(--ink-3); margin-bottom: 10px; }
.rv-next { margin-top: 14px; }

/* Пока подгружается модуль урока. */
.lazy-wait { padding: 96px 0; font-size: 17px; color: var(--ink-2); }

/* Плёнка при перетаскивании файла на страницу. */
.dropveil {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(2px);
}
.dropveil.show { display: flex; }
.dropveil span {
  font-family: var(--hand); font-size: 30px; color: var(--pen);
  border: 2px dashed var(--pen-line); border-radius: var(--r-lg);
  padding: 34px 46px; background: var(--card);
}

/* ============================================================
   6. Главная — оглавление
   ============================================================ */

.sec-title {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* Программа — не набор карточек, а оглавление тетради: номер, название,
   отточие, вид практики и галочка ручкой у пройденных. */
.toc { padding: 44px 0 20px; }
.toc-mod { padding: 26px 0 10px; border-top: 1px solid var(--rule-soft); }
.toc .sec-title + .toc-mod { border-top: 0; padding-top: 0; }
.toc-mh { display: flex; align-items: baseline; gap: 14px; }
.toc-mn {
  flex: none; min-width: 26px;
  font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--pen);
}
.toc-mt { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -0.014em; }
.toc-mw { margin-left: auto; flex: none; font-size: 13.5px; color: var(--ink-3); }
.toc-ms, .toc-say { margin: 6px 0 0 40px; max-width: 62ch; }
.toc-ms { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.toc-say { font-family: var(--hand); font-size: 20px; line-height: 1.2; color: var(--pen); }

.toc-list { list-style: none; margin: 12px 0 0; padding: 0; }
.toc-l { display: block; padding: 8px 0; color: var(--ink); text-decoration: none; }
.toc-l:hover { text-decoration: none; }
.toc-line { display: flex; align-items: baseline; gap: 10px; }
.toc-n { flex: none; min-width: 30px; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toc-tt { font-size: 16px; font-weight: 500; transition: color .15s var(--ease); }
.toc-l:hover .toc-tt { color: var(--pen); }
.toc-l.done .toc-tt { color: var(--ink-2); }
/* отточие: пустой элемент стоит на базовой линии строки */
.toc-lead { flex: 1 1 24px; min-width: 16px; border-bottom: 1.5px dotted var(--ink-4); transform: translateY(-4px); }
.toc-k { flex: none; font-size: 13px; color: var(--ink-3); }
.toc-c { flex: none; position: relative; width: 22px; align-self: stretch; }
.toc-c .pen-tick { position: absolute; left: 0; top: -3px; width: 24px; height: 24px; }
.toc-d { display: block; margin: 2px 0 0 40px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.toc-l.soon { color: var(--ink-3); cursor: default; }

/* ============================================================
   7. Главная — на чём построена программа
   ============================================================ */

.market { padding: 46px 0 10px; }
.market h2 { font-size: 24px; letter-spacing: -0.018em; margin-bottom: 8px; }
.market .note {
  font-family: var(--serif); font-size: 17px; line-height: 1.6;
  color: var(--ink-2); margin: 0 0 24px; max-width: 58ch;
}

/* асимметричная сетка: ведущий навык крупно, остальные списком */
.market-lead {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0; border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; background: var(--card);
}
.mk-hero { padding: 28px 30px; border-right: 1px solid var(--rule); }
.mk-hero .pct {
  font-family: var(--serif); font-size: 62px; font-weight: 600; color: var(--pen);
  line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.mk-hero .what { font-size: 19px; font-weight: 600; margin-top: 12px; letter-spacing: -0.02em; }
.mk-hero .where { font-size: 15px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }

.mk-rest { display: flex; flex-direction: column; }
.mk-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 22px; border-bottom: 1px solid var(--rule-soft);
}
.mk-row:last-child { border-bottom: 0; }
.mk-row .pct {
  font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--pen);
  min-width: 48px; font-variant-numeric: tabular-nums;
}
.mk-row .what { font-size: 14.5px; font-weight: 500; }
.mk-row .where { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* ============================================================
   8. Урок — шапка
   ============================================================ */

.lesson-head { padding: 44px 0 28px; }

.lesson-head .kicker {
  font-size: 13px; color: var(--ink-3);
  margin-bottom: 16px; display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.lesson-head h1 {
  font-size: clamp(30px, 4.6vw, 41px);
  letter-spacing: -0.02em; margin-bottom: 16px; line-height: 1.12;
}
.lesson-head .sub {
  font-family: var(--serif);
  color: var(--ink-2); max-width: var(--measure);
  font-size: 19px; line-height: 1.6; margin: 0;
}

/* план занятия */
.plan {
  margin-top: 30px;
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--card); overflow: hidden;
}
.plan-h {
  padding: 12px 18px; border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
}
.plan-h .total { margin-left: auto; color: var(--pen); letter-spacing: .02em; }
/* колонок ровно столько, сколько пунктов: сетка не оставляет
   висящую строку с одной ячейкой */
.plan-list { display: grid; grid-template-columns: repeat(var(--plan-cols, 4), minmax(0, 1fr)); }
.plan-item {
  padding: 15px 18px; border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.plan-item:last-child { border-right: 0; }
.plan-item .m {
  font-size: 13px; font-weight: 600; color: var(--pen); margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.plan-item .w { font-size: 14px; color: var(--ink-2); line-height: 1.45; }

/* якорная навигация по уроку */
.secnav {
  position: sticky; top: var(--header-h); z-index: 30;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  margin-top: 32px;
  overflow-x: auto; scrollbar-width: none;
}
.secnav::-webkit-scrollbar { display: none; }
.secnav-in {
  display: flex; gap: 4px; padding: 8px 0;
  max-width: var(--lesson); margin: 0 auto;
}
.secnav a {
  font-size: 13.5px; color: var(--ink-3); padding: 6px 12px;
  border-radius: var(--r); white-space: nowrap; text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.secnav a:hover { color: var(--ink); background: var(--paper-2); text-decoration: none; }
.secnav a.on { color: var(--pen); background: var(--pen-soft); font-weight: 500; }

/* ============================================================
   9. Урок — секции лонгрида
   ============================================================ */

.block { padding: 50px 0 0; }
.block:last-of-type { padding-bottom: 20px; }

.block-h {
  margin-bottom: 22px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.block-h h2 { font-size: 25px; letter-spacing: -0.018em; }

/* ---------- проза теории ---------- */

.theory {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink);
}
/* В тексте — старостильные цифры, как в книге; в таблицах и коде —
   ровные табличные, чтобы столбцы чисел читались. */
.theory, .ticket-b, .drill-body, .d-say, .review-intro, .hero p.lede, .lesson-head .sub {
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.theory table, .ticket-b table, .theory pre, .theory code, .drill-body pre, .drill-body code {
  font-variant-numeric: lining-nums tabular-nums;
}
.theory > * { max-width: var(--measure); }
/* длинный идентификатор в тексте, тикете или тесте переносится,
   а не растягивает страницу на узком экране; код в pre не трогаем */
:not(pre) > code, .ticket-b, .q-t, .q-opt { overflow-wrap: anywhere; }
/* длинная формула прокручивается сама, а не растягивает страницу */
.theory mjx-container[display="true"] {
  display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px 0;
  /* MathJax задаёт контейнеру min-width прямо в style — без !important
     формула не даёт себя сжать до ширины экрана */
  min-width: 0 !important;
}
.theory > pre, .theory > table, .theory > .callout,
.theory > .example, .theory > .cmp, .theory > figure { max-width: 100%; }

.theory h3 {
  font-family: var(--sans);
  font-size: 21px; margin: 42px 0 13px; letter-spacing: -0.024em;
  line-height: 1.26;
}
.theory h3:first-child { margin-top: 0; }
.theory h4 {
  font-family: var(--sans);
  font-size: 16.5px; margin: 28px 0 9px; color: var(--ink);
}
.theory p { margin: 0 0 18px; }
.theory ul, .theory ol { margin: 0 0 18px; padding-left: 25px; }
.theory li { margin-bottom: 9px; }
.theory li::marker { color: var(--ink-4); }
.theory strong { font-weight: 600; }
.theory em { font-style: italic; }
.theory hr { border: 0; border-top: 1px solid var(--rule); margin: 36px 0; }
.theory blockquote {
  margin: 0 0 18px; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--pen-line);
  color: var(--ink-2); font-style: italic;
}

.theory code {
  font-family: var(--mono);
  font-size: .84em; background: var(--paper-2); padding: 2px 5px;
  border-radius: var(--r); color: var(--ink);
  border: 1px solid var(--rule-soft);
}
.theory pre {
  font-family: var(--mono);
  font-size: 14.2px; line-height: 1.62; background: var(--card);
  border: 1px solid var(--rule); border-left: 3px solid var(--pen);
  border-radius: var(--r-lg); padding: 16px 19px; overflow-x: auto;
  margin: 0 0 20px;
}
.theory pre code { background: none; padding: 0; border: 0; font-size: inherit; }

.theory table {
  border-collapse: collapse; width: 100%; font-family: var(--sans);
  font-size: 14.5px; margin: 0 0 22px; line-height: 1.5;
}
.theory th, .theory td {
  border: 1px solid var(--rule); padding: 10px 14px;
  text-align: left; vertical-align: top;
}
.theory th { background: var(--paper-2); font-weight: 600; font-size: 13.5px; }
.theory tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--paper-2) 45%, transparent);
}

.theory .lead {
  font-size: 20px; line-height: 1.6; color: var(--ink-2);
  margin-bottom: 26px;
}

/* врезки */
.callout {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 17px 21px; margin: 0 0 22px;
  font-family: var(--sans); font-size: 15.4px; line-height: 1.6;
  background: var(--card);
}
.callout .ct {
  font-weight: 600; font-size: 14.5px; margin-bottom: 8px; display: block;
  font-family: var(--sans); letter-spacing: -0.01em;
}
.callout p { margin: 0 0 11px; }
.callout p:last-child { margin-bottom: 0; }
.callout ul, .callout ol { margin: 9px 0 0; padding-left: 21px; }
.callout li { margin-bottom: 7px; }
.callout code {
  font-family: var(--mono); font-size: .85em;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  padding: 1px 5px; border-radius: var(--r); border: 1px solid var(--rule-soft);
}

.callout.work  { border-left: 3px solid var(--green); background: var(--green-soft); border-color: var(--green-line); }
.callout.work .ct { color: var(--green); }
/* Заливки нет намеренно: полоса маркера должна читаться как маркер
   по бумаге, а на цветной плашке она мутнеет. */
.callout.jobs  { border-left: 3px solid var(--pen); background: var(--card); border-color: var(--pen-line); }
/* Единственная полоса маркера на урок. Больше нигде маркер не ставится:
   если подсвечивать всё подряд, он перестаёт что-либо значить. */
.callout.jobs .ct {
  color: var(--ink);
  background-image: linear-gradient(
    transparent 56%, var(--mark) 56%, var(--mark) 94%, transparent 94%);
  display: inline-block; padding: 0 3px; margin-bottom: 10px;
}
.callout.trap  { border-left: 3px solid var(--red); background: var(--red-soft); border-color: var(--red-line); }
.callout.trap .ct { color: var(--red); }
.callout.note  { border-left: 3px solid var(--ink-3); background: var(--paper-2); }
.callout.note .ct { color: var(--ink); }

/* разобранный пример */
.example {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  margin: 0 0 22px; background: var(--card); overflow: hidden;
}
.example-h {
  padding: 12px 20px; border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
}
.example-b { padding: 18px 20px 6px; font-family: var(--sans); font-size: 15.4px; }
.example-b pre { margin-bottom: 15px; border-left-color: var(--ink-4); }
.example-b p { margin: 0 0 15px; }
.example-b table { font-size: 13.8px; }

/* сравнение «плохо / хорошо» */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 22px; }
/* без min-width: 0 элемент сетки не сжимается уже своего содержимого —
   широкий код внутри растягивал страницу вместо собственной прокрутки */
.cmp > div { min-width: 0; }
.cmp > div {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 16px 18px; background: var(--card);
  font-family: var(--sans); font-size: 14.8px;
}
.cmp .bad { border-left: 3px solid var(--red); }
.cmp .good { border-left: 3px solid var(--green); }
.cmp .cmp-t {
  font-size: 13.5px; font-weight: 600; margin-bottom: 10px; display: block;
}
.cmp .bad .cmp-t { color: var(--red); }
.cmp .good .cmp-t { color: var(--green); }
.cmp pre {
  margin: 0 0 11px; font-size: 13.2px; border-left: 0;
  padding: 12px 14px; background: var(--paper-2);
  border: 1px solid var(--rule-soft); border-radius: var(--r);
  overflow-x: auto; font-family: var(--mono); line-height: 1.55;
}
.cmp p { margin: 0; }

/* ============================================================
   10. Урок — практика
   ============================================================ */

.ticket {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--card); margin-bottom: 22px;
  box-shadow: var(--shadow-1);
}
/* Задачу присылает конкретный человек — шапка должна читаться
   как сообщение от коллеги, а не как строка метаданных. */
.ticket-h {
  border-bottom: 1px solid var(--rule); padding: 15px 22px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 14.5px; color: var(--ink-2);
  background: var(--paper-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.ticket-h .from {
  color: var(--ink); font-weight: 600; font-size: 15.5px;
  letter-spacing: -0.012em;
}
.ticket-b {
  padding: 22px 24px; font-family: var(--serif);
  font-size: 17px; line-height: 1.68;
}
.ticket-b > * { max-width: var(--measure); }
.ticket-b p { margin: 0 0 15px; }
.ticket-b p:last-child { margin-bottom: 0; }
.ticket-b ul, .ticket-b ol { margin: 0 0 15px; padding-left: 24px; }
.ticket-b li { margin-bottom: 8px; }
.ticket-b code {
  font-family: var(--mono); font-size: .83em;
  background: var(--paper-2); padding: 2px 5px; border-radius: var(--r);
  border: 1px solid var(--rule-soft);
}
.ticket-b pre {
  font-family: var(--mono); font-size: 13.6px; line-height: 1.6;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 14px 16px; overflow-x: auto;
  margin: 0 0 15px; max-width: 100%;
}
.ticket-b table {
  font-family: var(--sans); font-size: 14.5px;
  border-collapse: collapse; margin-bottom: 15px;
}
.ticket-b th, .ticket-b td { border: 1px solid var(--rule); padding: 8px 12px; text-align: left; }
.ticket-b th { background: var(--paper-2); font-weight: 600; font-size: 13.5px; }

details.schema { margin-bottom: 20px; }
details.schema > summary {
  cursor: pointer; font-size: 14.5px; color: var(--ink-2);
  padding: 11px 0; border-bottom: 1px solid var(--rule); list-style: none;
  display: flex; align-items: center; gap: 9px;
  transition: color .18s var(--ease);
}
details.schema > summary:hover { color: var(--ink); }
details.schema > summary::-webkit-details-marker { display: none; }
details.schema > summary::before {
  content: "›"; color: var(--ink-3); font-size: 16px; line-height: 1;
  transition: transform .18s var(--ease); display: inline-block;
}
details.schema[open] > summary::before { transform: rotate(90deg); }
.schema-body { padding: 18px 0 6px; }
.schema-body pre {
  font-family: var(--mono);
  font-size: 13.4px; line-height: 1.58; margin: 0 0 15px; overflow-x: auto;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 15px 17px;
}
.schema-body p {
  margin: 0 0 13px; font-size: 15px; color: var(--ink-2);
  max-width: var(--measure); line-height: 1.6;
}
.schema-body code {
  font-family: var(--mono); font-size: .86em; background: var(--paper-2);
  padding: 1px 5px; border-radius: var(--r); border: 1px solid var(--rule-soft);
}

/* редактор */
.editor-shell {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--card); overflow: hidden; margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.editor-h {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 15px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  background: var(--paper-2);
}
.editor-h .spacer { margin-left: auto; }
.linkbtn {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--ink-3); text-decoration: underline;
  text-underline-offset: 3px; transition: color .18s var(--ease);
  font-family: var(--sans);
}
.linkbtn:hover { color: var(--pen); }

.CodeMirror {
  height: auto; font-family: var(--mono) !important; font-size: 14.5px;
  line-height: 1.62; background: var(--card); color: var(--ink);
  resize: vertical; overflow: auto !important;
  padding: 8px 0;
}
.CodeMirror-scroll { min-height: 300px; }
.CodeMirror-gutters { background: var(--card); border-right: 1px solid var(--rule-soft); }
.CodeMirror-linenumber { color: var(--ink-4); font-size: 12.5px; }
.CodeMirror-cursor { border-left: 2px solid var(--pen); }
.CodeMirror-selected { background: var(--pen-soft) !important; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection { background: var(--pen-soft); }
.cm-s-default .cm-keyword  { color: var(--pen); font-weight: 600; }
.cm-s-default .cm-string   { color: var(--green); }
.cm-s-default .cm-number   { color: var(--red); }
.cm-s-default .cm-comment  { color: var(--ink-3); font-style: italic; }
.cm-s-default .cm-builtin,
.cm-s-default .cm-def      { color: var(--pen-2); }
.cm-s-default .cm-variable-2 { color: var(--ink); }
.cm-s-default .cm-operator { color: var(--ink-2); }
.cm-s-default .cm-atom     { color: var(--red); }
.cm-s-default .cm-property { color: var(--ink); }

textarea.answer {
  width: 100%; min-height: 260px; resize: vertical;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card);
  color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.66;
  padding: 17px 19px; box-shadow: var(--shadow-1);
  transition: border-color .18s var(--ease);
}
textarea.answer:focus { border-color: var(--pen-line); }
textarea.answer::placeholder { color: var(--ink-3); }

/* кнопки */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.btn {
  font: inherit; font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
  padding: 10px 17px; border-radius: var(--r);
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover:not(:disabled) { border-color: var(--ink-3); background: var(--paper-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; }
.btn.primary { background: var(--pen); border-color: var(--pen); color: var(--on-pen); }
[data-theme="dark"] .btn.primary { color: #0E1218; }
.btn.primary:hover:not(:disabled) { background: var(--pen-2); border-color: var(--pen-2); }
.btn.check { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.btn.check:hover:not(:disabled) {
  background: color-mix(in srgb, var(--green-soft) 55%, var(--card)); border-color: var(--green);
}
.btn .k { font-family: var(--mono); font-size: 11px; opacity: .6; margin-left: 3px; }

/* статус проверки */
.status {
  display: none; align-items: flex-start; gap: 12px;
  border-radius: var(--r-lg); padding: 15px 18px; margin-bottom: 18px;
  font-size: 15px; line-height: 1.58; border: 1px solid transparent;
}
.status.show { display: flex; animation: fade-up .3s var(--ease-spring); }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }
.status.ok   { background: var(--green-soft); border-color: var(--green-line); }
.status.bad  { background: var(--red-soft);   border-color: var(--red-line); }
.status.warn { background: var(--amber-soft); border-color: var(--amber-line); }
.status .s-ico {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #FFFFFF; margin-top: 1px;
}
.status .s-ico svg { width: 13px; height: 13px; }
.status.ok   .s-ico { background: var(--green); }
.status.bad  .s-ico { background: var(--red); }
.status.warn .s-ico { background: var(--amber); }
.status .s-ico.s-pen { background: none; width: 26px; height: 26px; margin-top: -4px; }
.status .s-ico.s-pen .pen-tick { width: 26px; height: 26px; }
[data-theme="dark"] .status .s-ico { color: #0E1218; }
.status .s-body { color: var(--ink); }
.status .s-body b { display: block; margin-bottom: 4px; }
.status.ok   .s-body b { color: var(--green); }
.status.bad  .s-body b { color: var(--red); }
.status.warn .s-body b { color: var(--amber); }
.status .s-body .mono { font-family: var(--mono); font-size: 13px; }

/* вывод и эталон */
.io { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.io-box {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--card); display: flex; flex-direction: column; min-width: 0;
  overflow: hidden;
}
.io-h {
  padding: 10px 15px; border-bottom: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-2); font-weight: 500;
  background: var(--paper-2); display: flex; align-items: center; gap: 8px;
}
.io-h .spacer { margin-left: auto; }
.io-body { padding: 14px 15px; overflow: auto; max-height: 420px; min-height: 84px; }
.io-body pre {
  margin: 0; font-family: var(--mono); font-size: 13.2px; line-height: 1.55;
  white-space: pre; color: var(--ink);
}
.io-body pre .err { color: var(--red); }
.io-body .empty { color: var(--ink-3); font-size: 14px; font-family: var(--sans); }
.io-body pre mark.diff {
  background: var(--red-soft); color: var(--red); border-bottom: 2px solid var(--red);
  padding: 0 2px; border-radius: 2px;
}

table.res { border-collapse: collapse; font-size: 13px; font-family: var(--mono); }
table.res th, table.res td {
  border: 1px solid var(--rule); padding: 6px 11px; text-align: left; white-space: nowrap;
}
table.res th {
  background: var(--paper-2); font-weight: 500; color: var(--ink-2);
  position: sticky; top: 0;
}
table.res tr.rowdiff td { background: var(--red-soft); }
table.res td.num { text-align: right; }

/* ============================================================
   11. Урок — тренажёр
   ============================================================ */

.block-intro {
  font-family: var(--serif); font-size: 17px; line-height: 1.66;
  color: var(--ink-2); max-width: var(--measure); margin: 0 0 22px;
}

.drills { display: flex; flex-direction: column; gap: 12px; }

.drill {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--card); overflow: hidden;
  transition: border-color .2s var(--ease);
}
.drill:hover { border-color: var(--rule-hard); }
.drill > summary {
  padding: 16px 20px; cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 14px;
  font-size: 16px; font-weight: 500;
}
.drill > summary::-webkit-details-marker { display: none; }
.drill > summary::after {
  content: "+"; margin-left: auto; color: var(--ink-3);
  font-family: var(--sans); font-size: 20px; line-height: 1;
  transition: transform .22s var(--ease); flex: none;
}
.drill[open] > summary::after { transform: rotate(45deg); }
.drill > summary:hover { background: var(--paper-2); }
.drill .d-n {
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--pen);
  flex: none; min-width: 26px;
}
.drill .d-lvl {
  font-size: 11.5px; padding: 3px 9px; border-radius: var(--r);
  border: 1px solid var(--rule); color: var(--ink-3);
  flex: none; margin-left: 10px; font-weight: 400;
}
.drill .d-lvl.easy { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.drill .d-lvl.mid  { color: var(--pen);   border-color: var(--pen-line);   background: var(--pen-soft); }
.drill .d-lvl.hard { color: var(--red);   border-color: var(--red-line);   background: var(--red-soft); }

.drill-body {
  padding: 4px 20px 20px; border-top: 1px solid var(--rule-soft);
  font-family: var(--serif); font-size: 16.6px; line-height: 1.66;
}
.drill-body > * { max-width: var(--measure); }
.drill-body p { margin: 15px 0; }
.drill-body ul, .drill-body ol { padding-left: 24px; margin: 0 0 15px; }
.drill-body li { margin-bottom: 7px; }
.drill-body code {
  font-family: var(--mono); font-size: .84em; background: var(--paper-2);
  padding: 2px 5px; border-radius: var(--r); border: 1px solid var(--rule-soft);
}
.drill-body pre {
  font-family: var(--mono); font-size: 13.8px; line-height: 1.6;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 15px 17px; overflow-x: auto; margin: 0 0 15px;
  max-width: 100%;
}
.drill-body pre code { background: none; border: 0; padding: 0; font-size: inherit; }

.d-reveal { margin-top: 8px; border-top: 1px dashed var(--rule); padding-top: 14px; }
.d-reveal > summary {
  cursor: pointer; list-style: none; font-family: var(--sans);
  font-size: 13.5px; color: var(--ink-3); padding: 4px 0;
  transition: color .18s var(--ease);
}
.d-reveal > summary:hover { color: var(--pen); }
.d-reveal > summary::-webkit-details-marker { display: none; }
.d-reveal > summary::before { content: "› "; }
.d-reveal[open] > summary::before { content: "⌄ "; }

/* ============================================================
   12. Урок — самопроверка
   ============================================================ */

.quiz { display: flex; flex-direction: column; gap: 14px; }
.q {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--card); padding: 20px 22px;
}
.q-t {
  font-size: 16.5px; font-weight: 500; margin-bottom: 15px;
  display: flex; gap: 13px; align-items: baseline; line-height: 1.5;
}
.q-t .q-n { font-size: 12.5px; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }
.q-t code {
  font-family: var(--mono); font-size: .86em; background: var(--paper-2);
  padding: 2px 5px; border-radius: var(--r);
}
.q-opts { display: flex; flex-direction: column; gap: 8px; }
.q-opt {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 12px 15px; font-size: 15.2px; line-height: 1.5;
  background: var(--paper); text-align: left; width: 100%;
  color: var(--ink); font-family: var(--sans);
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              transform .12s var(--ease);
  min-height: 44px;
}
.q-opt:hover:not(:disabled) { border-color: var(--pen-line); background: var(--pen-soft); }
.q-opt:active:not(:disabled) { transform: translateY(1px); }
.q-opt .mk {
  font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--ink-2);
  flex: none; width: 16px; padding-top: 2px;
}
.q-opt.right { border-color: var(--green); background: var(--green-soft); }
.q-opt.right .mk { color: var(--green); }
.q-opt.wrong { border-color: var(--red); background: var(--red-soft); }
.q-opt.wrong .mk { color: var(--red); }
.q-opt:disabled { opacity: 1; }
.q-why {
  display: none; margin-top: 14px; padding: 13px 16px;
  border-radius: var(--r); background: var(--paper-2);
  border-left: 3px solid var(--pen);
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.q-why.show { display: block; animation: fade-up .3s var(--ease-spring); }
.q-why b { color: var(--ink); }
.q-why code {
  font-family: var(--mono); font-size: .87em; background: var(--card);
  padding: 1px 5px; border-radius: var(--r);
}

.quiz-score {
  margin-top: 18px; font-size: 14px; color: var(--ink-3);
  display: flex; align-items: center; gap: 10px;
}
.quiz-score b { color: var(--pen); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   13. Урок — что почитать
   ============================================================ */

.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.link-card {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 17px 19px; background: var(--card); color: var(--ink);
  text-decoration: none; display: block;
  transition: border-color .18s var(--ease);
}
.link-card:hover { text-decoration: none; border-color: var(--pen-line); }
.link-card .lk-src {
  font-size: 12.5px; color: var(--ink-3);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.link-card .lk-src .lang {
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--rule); border-radius: var(--r); padding: 1px 5px;
}
.link-card .lk-t {
  font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 7px;
  color: var(--ink); transition: color .18s var(--ease); letter-spacing: -0.015em;
}
.link-card:hover .lk-t { color: var(--pen); }
.link-card .lk-d { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* ============================================================
   14. Заметки и переход дальше
   ============================================================ */

.notes-wrap { margin-top: 12px; }
textarea.notes {
  width: 100%; min-height: 140px; resize: vertical;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card);
  color: var(--ink); font-family: var(--serif); font-size: 16.4px; line-height: 1.65;
  padding: 16px 18px;
  transition: border-color .18s var(--ease);
}
textarea.notes:focus { border-color: var(--pen-line); }
textarea.notes::placeholder { color: var(--ink-3); }
.notes-hint { font-size: 13px; color: var(--ink-3); margin-top: 8px; }

.lesson-nav {
  border-top: 1px solid var(--rule); margin-top: 50px; padding: 28px 0 72px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.navlink {
  color: var(--ink-2); font-size: 14.5px; text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--r); padding: 11px 16px;
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease),
              background-color .18s var(--ease);
  min-height: 44px; display: inline-flex; align-items: center;
}
.navlink:hover {
  border-color: var(--ink-3); color: var(--ink);
  text-decoration: none; background: var(--paper-2);
}
.navlink.dim { opacity: .35; pointer-events: none; }
.lesson-nav .spacer { margin-left: auto; }

/* ============================================================
   15. Модалка, тост, загрузка, плашки
   ============================================================ */

.modal-bg {
  position: fixed; inset: 0; background: rgba(13, 18, 26, .5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 90; padding: 20px;
}
.modal-bg.show { display: flex; animation: fade-in .22s var(--ease); }
@keyframes fade-in { from { opacity: 0; } }
.modal {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  max-width: 720px; width: 100%; max-height: 84vh; overflow: auto;
  box-shadow: var(--shadow-3);
  animation: modal-in .26s var(--ease-spring);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.99); } }
.modal-h {
  padding: 17px 24px; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16.5px;
  position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.modal-h .spacer { margin-left: auto; }
.modal-b { padding: 22px 24px 28px; font-size: 15.6px; line-height: 1.65; }
.modal-b p { margin: 0 0 14px; }
.modal-b ol, .modal-b ul { padding-left: 23px; margin: 0 0 14px; }
.modal-b li { margin-bottom: 9px; }
.modal-b pre {
  font-family: var(--mono); font-size: 13.6px; line-height: 1.6;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 16px 18px; overflow-x: auto; margin: 0 0 14px; white-space: pre;
}
.modal-b code {
  font-family: var(--mono); font-size: .86em; background: var(--paper-2);
  padding: 2px 5px; border-radius: var(--r); border: 1px solid var(--rule-soft);
}
/* Подсказки — это и есть наставник: он подходит и что-то говорит.
   Номер шага набран его рукой, сама подсказка — обычным текстом. */
.hint-step { border-left: 2px solid var(--pen-line); padding-left: 18px; margin-bottom: 22px; }
.hint-step .hs-n {
  font-family: var(--hand); font-size: 20px; line-height: 1.2;
  color: var(--pen); margin-bottom: 4px;
}
.hint-step p { margin: 0; font-family: var(--serif); }

.loader {
  display: none; align-items: center; gap: 12px;
  font-size: 14px; color: var(--ink-2); margin-bottom: 14px;
  border: 1px dashed var(--rule-hard); border-radius: var(--r-lg); padding: 12px 16px;
  background: var(--paper-2);
}
.loader.show { display: flex; }
.spin {
  width: 14px; height: 14px; border: 2px solid var(--rule-hard);
  border-top-color: var(--pen); border-radius: 50%;
  animation: spin .7s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.warnbar {
  display: none; background: var(--amber-soft); color: var(--amber);
  border-bottom: 1px solid var(--amber-line);
  font-size: 13.5px; padding: 10px 32px;
}
.warnbar.show { display: block; }
.warnbar code { font-family: var(--mono); font-size: 12.5px; }

.foot {
  border-top: 1px solid var(--rule); padding: 28px 0 50px;
  font-size: 13.5px; color: var(--ink-3);
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
  max-width: min(540px, calc(100vw - 32px));
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-lg); padding: 14px 19px; font-size: 14px; line-height: 1.5;
  box-shadow: var(--shadow-3);
  opacity: 0; pointer-events: none; z-index: 120;
  transition: opacity .24s var(--ease), transform .24s var(--ease-spring);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.iconbtn.unsaved {
  border-color: var(--amber); color: var(--amber); background: var(--amber-soft);
}
.iconbtn.unsaved::after { content: "не сохранено"; font-size: 12px; }

/* ============================================================
   16. Адаптив
   ============================================================ */

@media (max-width: 1024px) {
  .cmp { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .io { grid-template-columns: 1fr; }
  .market-lead { grid-template-columns: 1fr; }
  .mk-hero { border-right: 0; border-bottom: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  :root { --measure: 100%; }
  .wrap { padding: 0 18px; }
  .hdr-in { padding: 0 18px; gap: 12px; }
  .crumbs { display: none; }
  .warnbar { padding: 10px 18px; }
  .hero-in { padding-block: 42px 32px; }
  .lesson-head { padding: 30px 0 22px; }
  .theory { font-size: 17px; }
  /* широкие таблицы в тексте прокручиваются сами, а не растягивают страницу */
  .theory table, .ticket-b table, .drill-body table {
    display: block; max-width: 100%; overflow-x: auto;
  }
  .block { padding: 38px 0 0; }
  .block-h h2 { font-size: 22px; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  /* на телефоне кнопки задачи не уезжают вверх вместе с редактором */
  .actions {
    position: sticky; bottom: 0; z-index: 20;
    margin: 0 -18px 18px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
  }
  .pace-say { font-size: 23px; }
  /* прилипающая полоса — в одну строку: подсказка и решение иконками,
     их имена держит aria-label */
  .actions { flex-wrap: nowrap; gap: 6px; }
  /* 375 − поля 36 = 339px на четыре кнопки: две с подписью, две иконкой */
  .actions .btn { padding: 11px 9px; gap: 6px; font-size: 14px; min-width: 0; }
  .actions .btn .k, .actions .btn .bl { display: none; }
  .actions #hintBtn, .actions #solBtn { flex: none; width: 46px; padding: 11px 0; }
  .iconbtn.unsaved::after { content: "!"; }
  .plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-item { border-right: 0; }
  .mk-hero .pct { font-size: 48px; }
}

@media (max-width: 520px) {
  .links { grid-template-columns: 1fr; }
  /* Оглавление на телефоне — сеткой: номер в своей колонке, название
     переносится внутри своей, срок модуля и вид практики — строкой ниже.
     С переносом флекса элементы разлетались по строкам как попало. */
  .toc-mh { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; }
  .toc-mw { grid-column: 2; margin: 4px 0 0; }
  /* у кнопки темы остаётся значок, подпись читает экранный диктор */
  .hdr #themeBtn { padding: 0; width: 36px; justify-content: center; }
  .hdr #themeBtn .bl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .toc-line { display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px; column-gap: 10px; }
  .toc-n  { grid-row: 1; grid-column: 1; }
  .toc-tt { grid-row: 1; grid-column: 2; }
  .toc-c  { grid-row: 1; grid-column: 3; }
  .toc-k  { grid-row: 2; grid-column: 2; margin-top: 2px; font-size: 12.5px; }
  .toc-lead { display: none; }
  .hero h1 { font-size: 32px; }
  .hero p.lede { font-size: 18px; }
}

/* Самые узкие телефоны (320px): подписи «Запустить» и «Проверить»
   важнее значков — значки убираем, чтобы слова поместились. */
@media (max-width: 360px) {
  /* на самом узком экране от названия остаётся знак; надпись
     прячется только визуально — ссылка на главную не теряет имени */
  .brand > span:last-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .actions { gap: 4px; }
  .actions .btn { font-size: 13.5px; padding: 11px 7px; }
  .actions #runBtn svg, .actions #checkBtn svg { display: none; }
  /* MathJax не переносит встроенные формулы: самой длинной даём свою
     прокрутку, чтобы она не растягивала страницу. Только здесь — на
     обычных экранах выравнивание формул по строке остаётся как было. */
  .theory mjx-container:not([display="true"]) {
    display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden;
    vertical-align: middle;
  }
}

/* ============================================================
   17. Доступность и печать
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .spin { animation-duration: 2.4s !important; }
}

@media print {
  .hdr, .secnav, .readbar, .actions, .lesson-nav, .toast, .warnbar { display: none !important; }
  body { background: #FFFFFF; font-size: 12pt; }
  .drill[open] .drill-body, .drill-body { display: block !important; }
  .block { page-break-inside: avoid; }
}