/* Шрифты: woff2 с Google Fonts, подмножества кириллица и латиница (DK-283, 2026-10-07). Из сети не тянется ничего. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/static/font/manrope-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/static/font/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/font/caveat-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/font/caveat-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Компоненты макета DK-234: блок на компонент, значения — только переменные tokens.css. */

/* --- база компонентов --- */
.к-кнопка,.к-вкладка,.к-чип,.к-карточка-друга,.к-день{-webkit-tap-highlight-color:transparent}
[class^="к-"][hidden],[class*=" к-"][hidden]{display:none}

/* Стили текста Figma (лист значений 0.2). */
.к-текст{margin:0;color:var(--ink);font:400 var(--кегль-текст)/var(--строка-текст) var(--body)}
.к-текст[data-стиль="крупный"]{font:700 var(--кегль-заголовок)/var(--строка-крупная) var(--display);letter-spacing:var(--трекинг-сжатый)}
.к-текст[data-стиль="заголовок"]{font:700 var(--кегль-название)/var(--строка-заголовок) var(--display);letter-spacing:var(--трекинг-сжатый)}
.к-текст[data-стиль="раздел"]{font:600 var(--кегль-раздел)/var(--строка-текст) var(--display)}
.к-текст[data-стиль="подпись"]{font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-текст[data-стиль="мелкий"]{font:500 var(--кегль-микро)/var(--строка-мелкая) var(--body)}
/* «Текст/Акцент» (6a:844, Manrope 600, 20 / 28): ответ «Помощи сегодня» (DK-333, решение 17). */
.к-текст[data-стиль="акцент"]{font:600 var(--кегль-подзаголовок)/var(--строка-акцент) var(--body)}
.к-текст[data-стиль="кнопка"],.к-текст[data-стиль="переключатель"]{font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-текст[data-стиль="вкладка"]{font:600 var(--кегль-микро)/var(--строка-мелкая) var(--body);letter-spacing:var(--трекинг-свободный)}
.к-текст[data-стиль="метка"]{font:600 var(--кегль-микро)/var(--строка-мелкая) var(--body)}
.к-текст[data-стиль="рука-крупная"]{font:400 var(--кегль-заголовок)/var(--строка-заголовок) var(--рука)}
.к-текст[data-стиль="рука-малая"]{font:400 var(--кегль-подзаголовок)/var(--строка-текст) var(--рука)}
/* «пять опять» под знаком на пороге — Caveat 34 (40·0,85; кадр «1 Порог · 436», 2026-10-13). Знак, а не кегль чтения:
   в банк девяти кеглей не входит. */
.к-текст[data-стиль="рука-знак"]{font:400 calc(var(--кегль-экран) * .85)/1.2 var(--рука)}
.к-текст[data-тон="muted"]{color:var(--muted)}
.к-текст[data-тон="child"]{color:var(--child)}
.к-текст[data-тон="монета"]{color:var(--монета)}
/* Строка банка учебника (DK-341 §2): «**…**» — тот же кегль жирнее (Подпись 500 → Кнопка 600, Мелкий → Метка —
   ЖИРНЕЕ_У кадра r93), «_…_» — курсив урока 05. */
.к-текст strong{font-weight:600}
.к-текст em{font-style:italic}

/* Запись в строке (DK-341 §3, кадр r93 «Запись в строке», множитель — r96): дробь и смешанное двумя этажами в строке
   абзаца, не картинкой (слово Марии 2026-10-20). Просвет 2 между частями — он же вокруг знаков; этажи — Текст/Метка ink,
   целое — Текст/Кнопка; черта — нижняя рамка числителя ink 2 по ширине этажей, не уже 12. Обе темы — переменными. */
.к-запись-в-строке{display:inline-flex;align-items:center;gap:calc(var(--линия-метка));vertical-align:middle;color:var(--ink)}
.к-запись-в-строке > span{display:inline-flex;align-items:center;gap:calc(var(--линия-метка))}
.к-запись-в-строке .минус{display:inline-flex;align-items:center}
.к-запись-в-строке .дробь{display:inline-grid;grid-template-columns:minmax(var(--отступ-12),auto);
  font:600 var(--кегль-микро)/var(--строка-мелкая) var(--body)}
.к-запись-в-строке .ч,.к-запись-в-строке .з{display:flex;justify-content:center;align-items:center;gap:calc(var(--линия-метка))}
.к-запись-в-строке .ч{border-bottom:var(--линия-метка) solid var(--ink)}
.к-запись-в-строке .целое{font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-запись-в-строке .множитель{font-weight:600;text-decoration:underline var(--линия-метка)}

/* Блоки урока (DK-341, кадры r93–r96). Правило: plate, радиус плашки, поля 12/16, шаг 8; номер шага — Текст/Кнопка. */
.к-правило{display:flex;flex-direction:column;gap:var(--отступ-8);padding:var(--отступ-12) var(--отступ-16);
  border-radius:var(--радиус-плашка);background:var(--plate)}
.к-правило ol{display:flex;flex-direction:column;gap:var(--отступ-8);margin:0;padding:0;list-style:none}
.к-правило li{display:flex;align-items:baseline;gap:var(--отступ-4)}
.к-правило .номер{flex:none;color:var(--ink);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-правило .после{display:flex;flex-direction:column;gap:var(--отступ-8)}
/* Пример по шагам: формула условия и шаги через 12; шаг — черта child слева, поля 4 / 0 / 4 / 12, блоки через 8. */
.к-пример-по-шагам{display:flex;flex-direction:column;gap:var(--отступ-12)}
.к-пример-по-шагам .шаг{display:flex;flex-direction:column;gap:var(--отступ-8);
  padding:var(--отступ-4) 0 var(--отступ-4) var(--отступ-12);border-left:var(--линия-метка) solid var(--child)}
/* Подробнее: card, волосок rule, радиус плашки, поля 12/16; шеврон muted вниз свёрнуто, вверх раскрыто — поворотом,
   без перехода (движения в учебнике нет); маркер summary браузера спрятан. */
.к-подробнее{padding:var(--отступ-12) var(--отступ-16);border:var(--линия-тонкая) solid var(--rule);
  border-radius:var(--радиус-плашка);background:var(--card)}
.к-подробнее summary{display:flex;align-items:center;justify-content:space-between;gap:var(--отступ-8);
  min-height:var(--размер-значок);list-style:none;cursor:pointer}
.к-подробнее summary::-webkit-details-marker{display:none}
.к-подробнее summary .к-значок{color:var(--muted);transform:rotate(90deg)}
.к-подробнее[open] summary .к-значок{transform:rotate(-90deg)}
.к-подробнее .внутри{display:flex;flex-direction:column;gap:var(--отступ-12);margin-top:var(--отступ-12)}
/* Рисунок: плитка plate, поля 8, шаг 4, подпись по центру. Классы SVG красятся токенами только под .к-рисунок —
   так рисунок живёт в обеих темах (<img> с SVG стилей страницы не видит); толщина линии — атрибутом файла. */
.к-рисунок{display:flex;flex-direction:column;gap:var(--отступ-4);margin:0;padding:var(--отступ-8);
  border-radius:var(--радиус-плашка);background:var(--plate)}
/* Рисунок без своего размера тянется по плитке; со своим (width у корня, «карандаши» урока 18) — не шире себя, по центру. */
.к-рисунок svg:not([width]){display:block;width:100%;height:auto}
.к-рисунок svg[width]{display:block;max-width:100%;height:auto;margin-inline:auto}
.к-рисунок figcaption{display:flex;flex-direction:column;text-align:center}
.к-рисунок .линия{fill:none;stroke:var(--child)}
.к-рисунок .заливка{fill:var(--childwash)}
.к-рисунок .подсветка{fill:var(--подсветка)}
.к-рисунок .текст{fill:var(--ink);font-family:var(--body)}
/* Фон — пустая часть целого (полоса урока 16, .fpart прототипа), нейтрально; закрашенная — «доля», child. */
.к-рисунок .фон{fill:var(--rule)}
.к-рисунок .доля{fill:var(--child)}
/* Рисунки подряд — сеткой в две колонки, как .figgrid прототипа; колонка не уже 140 — на узком экране по одному.
   Под уроком: сетка — часть урока, а не общий класс страницы (ревью задач 0–6). */
.к-урок .рисунки{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--отступ-64) * 2 + var(--отступ-12)),1fr));
  gap:var(--отступ-8)}
/* Оглавление учебника (кадр r93, DK-341 §1): начало (подпись, заголовок, абзац через 8), главы — заголовок и строки
   через 8, группы через 24, внизу строка прототипа. Строка темы — card, волосок rule, радиус плашки, поля 12/12/12/16,
   высота от 48: номер child, название ink, шеврон muted. Номеров страниц нет. */
.к-оглавление-учебника{display:flex;flex-direction:column;gap:var(--отступ-24)}
.к-оглавление-учебника .начало,.к-оглавление-учебника .глава,.к-оглавление-учебника .темы{display:flex;flex-direction:column;
  gap:var(--отступ-8)}
.к-оглавление-учебника .к-текст{margin:0}
.к-оглавление-учебника .темы{margin:0;padding:0;list-style:none}
.к-оглавление-учебника .тема{display:flex;align-items:center;gap:var(--отступ-12);box-sizing:border-box;min-height:var(--размер-кнопка);
  padding:var(--отступ-12) var(--отступ-12) var(--отступ-12) var(--отступ-16);border:var(--линия-тонкая) solid var(--rule);
  border-radius:var(--радиус-плашка);background:var(--card);color:var(--ink);text-decoration:none}
.к-оглавление-учебника .тема > .к-текст:nth-child(2){flex:1;min-width:0}
.к-оглавление-учебника .тема > .к-значок{color:var(--muted)}
/* Урок (кадр r93 «Урок»): столбец через 16 — карточка урока (card + тень, поля 16, шаг 16: заглавие «Тема N» и
   название через 4, блоки банка), «Проверь себя», карточка ролика, навигация. Навигация — три места поровну,
   высота зоны нажатия, Текст/Кнопка child; у первого и последнего урока пустое место остаётся. */
.к-урок{display:flex;flex-direction:column;gap:var(--отступ-16)}
.к-урок > .карточка{display:flex;flex-direction:column;gap:var(--отступ-16);padding:var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
.к-урок .заглавие{display:flex;flex-direction:column;gap:var(--отступ-4)}
.к-урок .заглавие > .к-текст{margin:0}
/* Теория: отдельные абзацы читаются как небольшие карточки. Семантика и порядок блоков банка не меняются. */
.к-урок > .карточка > .к-текст[data-стиль="подпись"]{padding:var(--отступ-12) var(--отступ-16);
  border-radius:var(--радиус-плашка);background:var(--plate);
  font:500 var(--кегль-текст)/var(--строка-текст) var(--body)}
.к-урок > .карточка .к-заметка{font:500 var(--кегль-текст)/var(--строка-текст) var(--body)}
/* Все **…** в тексте урока: вес + маркер, включая правила, примеры, заметки и раскрытые пояснения. */
.к-урок .к-текст strong,.к-урок > .карточка .к-заметка strong:not(.заголовок){font-weight:700;
  background:var(--подсветка);border-radius:var(--отступ-4);padding:0 calc(var(--отступ-4) / 2);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
:root[data-theme="dark"] .к-урок .к-текст strong,
:root[data-theme="dark"] .к-урок > .карточка .к-заметка strong:not(.заголовок){color:var(--paper)}
.к-урок .навигация{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:var(--отступ-8);
  min-height:var(--размер-нажатие)}
.к-урок .навигация a{display:flex;align-items:center;min-height:var(--размер-нажатие);color:var(--child);
  font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);text-decoration:none}
.к-урок .навигация a:nth-child(2){justify-content:center;text-align:center}
.к-урок .навигация a:last-child{justify-content:flex-end;text-align:right}
/* Проверь себя (DK-341 §6, кадр r93): card + тень, поля 16; без скрипта все вопросы подряд через 16, со скриптом
   (proverka.js ставит data-скрипт) — один вопрос data-текущий, шаг 12. Вариант — <details>: card, волосок rule, радиус
   плашки, поля 12/16, высота от кнопки; отклик внутри — «Верно!» на childwash, «Подсказка:» на тёплой подложке hard 18 %.
   Итог выбора ставит скрипт: data-итог «неверно» / «верно» — подложка и рамка 2; после верного остальные — слово muted. */
.к-проверь-себя{display:flex;flex-direction:column;gap:var(--отступ-16);padding:var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
.к-проверь-себя[data-скрипт]{gap:var(--отступ-12)}
.к-проверь-себя .вопрос,.к-проверь-себя .варианты,.к-проверь-себя .итог{display:flex;flex-direction:column;gap:var(--отступ-8)}
.к-проверь-себя[data-скрипт] .вопрос:not([data-текущий]){display:none}
/* Поля и высота — у summary, а не у details: нажимается вся плашка варианта (ревью задач 0–6). */
.к-проверь-себя .вариант{border:var(--линия-тонкая) solid var(--rule);border-radius:var(--радиус-плашка);background:var(--card)}
.к-проверь-себя .вариант summary{display:flex;align-items:center;justify-content:space-between;gap:var(--отступ-8);
  box-sizing:border-box;min-height:var(--размер-кнопка);padding:var(--отступ-12) var(--отступ-16);list-style:none;cursor:pointer}
.к-проверь-себя .вариант summary::-webkit-details-marker{display:none}
.к-проверь-себя .вариант summary .к-значок{color:var(--muted);transform:rotate(90deg)}
.к-проверь-себя .вариант[open] summary .к-значок{transform:rotate(-90deg)}
.к-проверь-себя[data-скрипт] .вариант summary{justify-content:center;text-align:center}
.к-проверь-себя[data-скрипт] .вариант summary .к-значок{display:none}
.к-проверь-себя .отклик{margin:0 var(--отступ-16) var(--отступ-12);padding:var(--отступ-8) var(--отступ-12);
  border-radius:var(--радиус-плашка)}
.к-проверь-себя .отклик[data-тон="верно"]{background:var(--childwash)}
.к-проверь-себя .отклик[data-тон="подсказка"]{background:color-mix(in srgb, var(--hard) 18%, transparent)}
.к-проверь-себя .вариант[data-итог="неверно"]{background:color-mix(in srgb, var(--hard) 18%, transparent);
  border:var(--линия-метка) solid var(--hard)}
.к-проверь-себя .вариант[data-итог="верно"]{background:var(--childwash);border:var(--линия-метка) solid var(--child)}
.к-проверь-себя .вариант summary[aria-disabled="true"]{cursor:default}
.к-проверь-себя .вариант summary[aria-disabled="true"] .к-текст{color:var(--muted)}
.к-проверь-себя .выбери{margin:0;color:var(--muted);font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
/* hidden — последним: иначе display:flex итога и вопроса выше по порядку перебил бы его и без скрипта. */
.к-проверь-себя [hidden]{display:none}

/* Кнопка: 48 (40 в карточках), поля 24, «Текст/Кнопка». Фон и рамка — кистью:
   ::before заливка, ::after рамка (маски kist/zaliv, kist/ramka, срез по краям).
   Без масок — ровная заливка с радиусом 16. Нажатие: проседает на сдвиг.
   Состояния — 60-komp-osnova.js:36-40, 134-151: выключенная с фоном — plate, без
   рамки; фокус — рамка ramka2 у всех видов; у кнопки-значка (капсула без кисти) — ровная рамка. */
.к-кнопка{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--отступ-8);min-height:var(--размер-кнопка);padding:0 var(--отступ-24);border:0;background:none;
  color:var(--кн-текст);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);text-decoration:none;cursor:pointer;
  transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-кнопка::before,.к-кнопка::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--радиус-общий)}
.к-кнопка::before{background:var(--заливка)}
.к-кнопка[data-мал]{min-height:var(--размер-кнопка-мал)}
.к-кнопка:active:not(:disabled){transform:translateY(var(--сдвиг-нажатие))}
.к-кнопка:active:not(:disabled)::before{background:var(--нажата)}
.к-кнопка[data-вид="второстепенная"]{color:var(--child)}
.к-кнопка[data-вид="второстепенная"]::before{background:var(--card)}
.к-кнопка[data-вид="второстепенная"]::after{box-shadow:inset 0 0 0 var(--линия-метка) var(--child)}
.к-кнопка[data-вид="второстепенная"]:active:not(:disabled)::before,
.к-кнопка[data-вид="тихая"]:active:not(:disabled)::before{background:var(--childwash)}
.к-кнопка[data-вид="тихая"]{color:var(--child)}
.к-кнопка[data-вид="тихая"]::before{background:none}
.к-кнопка[data-вид="значок"]{min-height:var(--размер-нажатие);padding:0 var(--отступ-16) 0 var(--отступ-12);color:var(--child);
  font-weight:500}
.к-кнопка[data-вид="значок"]::before{background:var(--card);border-radius:var(--радиус-полный)}
.к-кнопка[data-вид="значок"]::after{border-radius:var(--радиус-полный);box-shadow:inset 0 0 0 var(--линия-тонкая) var(--rule)}
.к-кнопка[data-вид="значок"]:active:not(:disabled)::before{background:var(--childwash)}
/* Опасная (6a:1161, «Удалить навсегда» В10б): заливка кисти — hard, и нажатая тоже. */
.к-кнопка[data-опасная]::before{background:var(--hard)}
.к-кнопка[data-опасная]:active:not(:disabled)::before{background:var(--hard)}
.к-кнопка:disabled{color:var(--muted);cursor:default}
.к-кнопка:disabled::before{background:var(--plate)}
.к-кнопка[data-вид="тихая"]:disabled::before{background:none}
.к-кнопка[data-вид="второстепенная"]:disabled::after{box-shadow:none}
.к-кнопка:focus-visible{outline:none}
.к-кнопка:focus-visible::after{box-shadow:inset 0 0 0 var(--линия-фокус) var(--child)}
.к-кнопка .к-значок{width:var(--размер-значок);height:var(--размер-значок)}
/* Искорка «блики» 18 у главной — при нажатии и фокусе (60-komp-osnova.js:150):
   левый верх в (ширина − 12, −10), то есть за правый край выходит на 6. */
.к-кнопка .искорка{display:none;position:absolute;top:calc(var(--отступ-8) * -1.25);right:calc(var(--отступ-4) * -1.5);
  width:calc(var(--отступ-12) * 1.5);height:calc(var(--отступ-12) * 1.5);color:var(--подсветка)}
.к-кнопка:is(:active,:focus-visible) .искорка{display:block}
.к-кнопка:disabled .искорка{display:none}

/* Заметка: plate, радиус 16, поля 12/16, «Текст/Подпись». */
.к-заметка{padding:var(--отступ-12) var(--отступ-16);border-radius:var(--радиус-общий);background:var(--plate);
  color:var(--ink);font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-заметка[data-тон="ошибка"]{color:var(--hard)}
/* Заголовок заметки (65-komp-nastrojki.js:138-149) — вывод «Текст/Кнопка» первой строкой, шаг 4. */
.к-заметка .заголовок{display:block;margin-bottom:var(--отступ-4);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
/* «Важно» учебника тона «где путают» (кадр r95, DK-341): своя подложка, поля и шаг — как у заметки. */
.к-заметка[data-тон="путают"]{background:var(--путают)}
/* Итог «верно» интерактива урока 19 (r97) — childwash, как отклик «Проверь себя». */
.к-заметка[data-тон="верно"]{background:var(--childwash)}
.к-заметка > .блоки{display:flex;flex-direction:column;gap:var(--отступ-8)}
/* «**…**» внутри «Важно» учебника — тот же вес, что у .к-текст strong. */
.к-заметка strong{font-weight:600}

/* Раздел: «Текст/Раздел» и ссылка справа; рукописный — выделение-маркер. */
.к-раздел{display:flex;align-items:center;justify-content:space-between;gap:var(--отступ-8)}
.к-раздел .заголовок{margin:0;font:600 var(--кегль-раздел)/var(--строка-текст) var(--display);color:var(--ink)}
.к-раздел .ссылка{display:inline-flex;align-items:center;gap:var(--отступ-4);min-height:var(--размер-нажатие);
  color:var(--child);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);text-decoration:none}
.к-раздел .ссылка .к-значок{width:var(--размер-значок-мал);height:var(--размер-значок-мал)}

/* Выделение-маркер (61-komp-kartochki.js:179-197): «Рука/Крупная», поворот 3° против часовой,
   под текстом — маркер подсветки нижней половиной; в тёмной теме — тонкая полоса под строкой. */
.к-выделение,body.kid h2.rubric{position:relative;isolation:isolate;display:inline-block;padding:var(--отступ-4) var(--отступ-12);
  font:400 var(--кегль-заголовок)/var(--строка-заголовок) var(--рука);color:var(--ink);transform:rotate(-3deg)}
.к-выделение::before,body.kid h2.rubric::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:50%;background:var(--подсветка)}
/* Маркер малый — «Рука/Малая» (74-ekran-klass.js:9-13): разделы класса, навыка, «Что любит», и разделы
   зеркала (h2.rubric feed.py — то же выделение без своей копии, спека 3.5). */
.к-выделение[data-мал],body.kid h2.rubric{font:400 var(--кегль-подзаголовок)/var(--строка-текст) var(--рука)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .к-выделение::before,:root:not([data-theme="light"]) body.kid h2.rubric::before{height:var(--отступ-8);bottom:calc(var(--отступ-4) * -1)}}
:root[data-theme="dark"] .к-выделение::before,:root[data-theme="dark"] body.kid h2.rubric::before{height:var(--отступ-8);bottom:calc(var(--отступ-4) * -1)}

/* Поле формы (6a:373-395): подпись «Текст/Подпись» ink над полем, шаг 8; поле 48 на card, радиус плашки,
   рамка «поле» 1 внутрь, значение «Текст/Основной» ink, подсказка muted. Ошибка — рамка hard 2 и текст под полем;
   поле-выбор — стрелка vniz muted справа. Фокус — тоже внутрь, акцентом страницы: общая рамка legacy снимается. */
.к-поле{display:grid;gap:var(--отступ-8);color:var(--ink);font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-поле :is(input,select){width:100%;min-height:var(--размер-кнопка);padding:0 var(--отступ-16);border:0;border-radius:var(--радиус-плашка);
  background:var(--card);box-shadow:inset 0 0 0 var(--линия-тонкая) var(--поле);color:var(--ink);font:400 var(--кегль-текст)/var(--строка-текст) var(--body)}
.к-поле input::placeholder{color:var(--muted);opacity:1}
.к-поле .выбор{position:relative;display:block}
.к-поле select{-webkit-appearance:none;appearance:none;padding-right:calc(var(--отступ-16) + var(--размер-значок) + var(--отступ-8))}
.к-поле select:has(option[value=""]:checked){color:var(--muted)}
.к-поле .выбор > .к-значок{position:absolute;top:50%;right:var(--отступ-16);color:var(--muted);transform:translateY(-50%);pointer-events:none}
.к-поле[data-ошибка] :is(input,select){box-shadow:inset 0 0 0 var(--линия-метка) var(--hard)}
.к-поле select:focus-visible,.к-поле input:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--линия-фокус) var(--акцент)}

/* Согласие (6a:397-415): флажок 24 и текст «Текст/Подпись» ink, шаг 12, по верху; нажимается вся строка (не меньше 44).
   Флажок — радиус плашки: card и рамка поле 1; отмеченный — parent с отметкой card 2. Ошибка — рамка hard 2 и текст под ним. */
.к-согласие{display:grid;gap:var(--отступ-8)}
.к-согласие label{display:flex;align-items:flex-start;gap:var(--отступ-12);min-height:var(--размер-нажатие);cursor:pointer}
.к-согласие .флажок{position:relative;flex:none;width:var(--размер-значок);height:var(--размер-значок);border-radius:var(--радиус-плашка);
  background:var(--card);box-shadow:inset 0 0 0 var(--линия-тонкая) var(--поле)}
.к-согласие input:checked + .флажок{background:var(--parent);box-shadow:none}
.к-согласие input:checked + .флажок::after{content:"";position:absolute;left:calc(var(--отступ-8) + var(--линия-тонкая));top:var(--отступ-4);
  width:calc(var(--отступ-4) * 1.5);height:calc(var(--отступ-12) - var(--линия-тонкая));border:solid var(--card);
  border-width:0 var(--линия-метка) var(--линия-метка) 0;transform:rotate(45deg)}
.к-согласие[data-ошибка] .флажок{box-shadow:inset 0 0 0 var(--линия-метка) var(--hard)}
.к-согласие input:focus-visible + .флажок{outline:var(--линия-метка) solid var(--акцент);outline-offset:var(--линия-метка)}

/* Ссылка внутри текста (В1, В2): цвет — акцент страницы (у взрослого parent), как диапазон «parent» в макете. */
.к-текст a{color:var(--акцент)}

/* Вопрос и ответ (6a:984-991, В4): card и тень, поля 16, шаг 8; вопрос «Текст/Раздел», ответ «Текст/Основной». */
.к-вопрос-и-ответ{display:grid;gap:var(--отступ-8);margin:0;padding:var(--отступ-16);border-radius:var(--радиус-общий);
  background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}

.к-значок{display:inline-block;flex:none;width:var(--размер-значок);height:var(--размер-значок)}
.к-дудл{display:inline-block;flex:none;width:var(--отступ-32);height:var(--отступ-32)}
.к-дудл[data-размер="16"]{width:var(--размер-значок-мал);height:var(--размер-значок-мал)}
.к-дудл[data-размер="24"]{width:var(--отступ-24);height:var(--отступ-24)}
.к-дудл[data-размер="48"]{width:var(--отступ-48);height:var(--отступ-48)}
.к-дудл[data-размер="120"]{width:calc(var(--отступ-64) * 1.875);height:calc(var(--отступ-64) * 1.875)}
/* взрослый (DK-330, П1): карандаш «Закрытой тетради» 56 и рюкзак В3 140 */
.к-дудл[data-размер="56"]{width:calc(var(--отступ-48) + var(--отступ-8));height:calc(var(--отступ-48) + var(--отступ-8))}
.к-дудл[data-размер="140"]{width:calc(var(--отступ-64) * 2 + var(--отступ-12));height:calc(var(--отступ-64) * 2 + var(--отступ-12))}

/* Шапка: 56, корневая 0/4/0/16 gap 8; вложенная 0/16/0/4 gap 4; чат gap 12. */
.к-шапка{display:flex;align-items:center;gap:var(--отступ-8);min-height:var(--размер-шапка);margin:0;
  padding:0 var(--отступ-4) 0 var(--отступ-16);border:0;background:var(--paper)}
.к-шапка > .к-текст,.к-шапка > .пусто{flex:1;min-width:0}
.к-шапка[data-вид="вложенная"]{gap:var(--отступ-4);padding:0 var(--отступ-16) 0 var(--отступ-4)}
.к-шапка[data-без-назад]{padding-left:var(--отступ-16)}
.к-шапка[data-вид="чат"]{gap:var(--отступ-12)}
/* Имя в шапке персонажа (референс Марии 2026-10-13): «Рука/Имя» 44 ink, корона child справа сверху, под ним подпись
   «Текст/Основной»; поля 8 сверху и снизу — шапка 80 вместо 56. */
.к-шапка > .имя{position:relative;flex:1;min-width:0;padding-block:var(--отступ-8);text-align:left}
.к-шапка > .имя > h1{display:inline-block;margin:0}
.к-шапка > .имя > .к-дудл{position:absolute;top:var(--отступ-4);margin-left:var(--отступ-4);color:var(--child);transform:rotate(12deg)}
.к-шапка > .имя > p{margin:0}
.к-текст[data-стиль="рука-имя"]{font:700 calc(var(--кегль-экран) * 1.1)/1 var(--рука)}
.к-шапка .назад,.к-значок-шапки{display:inline-grid;place-items:center;width:var(--размер-нажатие);height:var(--размер-нажатие);color:var(--ink)}
.к-шапка .аватар{width:var(--размер-аватар);height:var(--размер-аватар);border-radius:50%;background:var(--plate);object-fit:cover}
.к-шапка .значки{display:flex}
.к-значок-шапки[aria-current]{color:var(--child)}
/* Шапка с таблеткой (обзор взрослого В6а, 6a:322-327): заголовок и под ним «Метка статуса» через 4, поля 8
   сверху и снизу. Длинное имя без пробелов переносится, а не уезжает за край (DK-330). */
.к-шапка h1{overflow-wrap:anywhere}
.к-шапка > .заголовок-статус{flex:1;min-width:0;display:grid;justify-items:start;gap:var(--отступ-4);padding-block:var(--отступ-8)}
/* Счёт: капсула card, рамка rule 1, поля 4/12/4/8, gap 4; монетка 16 — две маски. */
.к-счёт{position:relative;display:inline-flex;align-items:center;gap:var(--отступ-4);padding:var(--отступ-4) var(--отступ-12) var(--отступ-4) var(--отступ-8);
  border-radius:var(--радиус-полный);background:var(--card);box-shadow:inset 0 0 0 var(--линия-тонкая) var(--rule);
  color:var(--монета);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-счёт[data-вид="звёздочки"]{color:var(--ink)}
.баланс-звёзд{display:inline-flex;align-items:center;min-height:var(--размер-нажатие);text-decoration:none;color:var(--ink)}
.к-счёт .монетка{position:relative;width:var(--размер-значок-мал);height:var(--размер-значок-мал);border-radius:50%;
  background:var(--подсветка);box-shadow:inset 0 0 0 var(--линия-метка) var(--монета)}

/* Панель вкладок: card, черта rule сверху, поля 8, доли поровну; под ней safe-area. */
.к-вкладки{display:flex;padding:0 var(--отступ-8) env(safe-area-inset-bottom,0px);background:var(--card);
  box-shadow:inset 0 var(--линия-тонкая) 0 var(--rule)}
.к-вкладка{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--отступ-4);padding:var(--отступ-8) 0;
  color:var(--muted);text-decoration:none;font:600 var(--кегль-микро)/var(--строка-мелкая) var(--body);letter-spacing:var(--трекинг-свободный)}
.к-вкладка .подложка{position:relative;display:grid;place-items:center;width:var(--размер-подложка);height:var(--отступ-32)}
.к-вкладка .подложка .к-значок{position:relative}
.к-вкладка[aria-current]{color:var(--child)}
.к-вкладка[aria-current] .подложка{background:var(--childwash);border-radius:var(--радиус-полный)}

/* Нижний лист (68-komp-listy.js:5-26): card, верхние углы 16, ручка 40x4 rule, поля 8/16,
   снизу 16 + safe-area (у макета 34+16, 34 — safe area, «не токен»), gap 16, тень карточки. */
.к-лист,.к-лист-персонажа,.к-лист-вещи,.к-лист-слота{display:grid;gap:var(--отступ-16);padding:var(--отступ-8) var(--отступ-16) calc(var(--отступ-16) + env(safe-area-inset-bottom,0px));
  background:var(--card);border-radius:var(--радиус-общий) var(--радиус-общий) 0 0;box-shadow:var(--тень-карточка) var(--тень)}
.к-лист .ручка,.risovanie .ручка,.к-лист-персонажа .ручка,.к-лист-вещи .ручка,.к-лист-слота .ручка{justify-self:center;display:block;width:var(--размер-ручка);height:var(--отступ-4);
  margin-inline:auto;border-radius:var(--радиус-полный);background:var(--rule)}
.к-лист .кнопки,.к-лист-персонажа .кнопки,.к-лист-вещи .кнопки,.к-лист-слота .кнопки,:is(.к-лист,.к-лист-персонажа,.к-лист-вещи,.к-лист-слота) .кнопки form{display:grid;gap:var(--отступ-16)}
:is(.к-лист,.к-лист-персонажа,.к-лист-вещи,.к-лист-слота) .кнопки .к-кнопка{width:100%}
/* Подпись нехватки под главной кнопкой листа (64-komp-magazin.js:50): подпись muted по центру, ближе к кнопке. */
:is(.к-лист,.к-лист-персонажа,.к-лист-вещи) .кнопки > .к-текст{margin-top:calc(var(--отступ-8) * -1);text-align:center}
/* Окно листа: у низа, выезжает снизу и уезжает вниз; затемнение ink 40 % не по теме
   (7c-ekran-listy.js:3-9). display/overlay с allow-discrete — только удержать окно,
   пока оно уезжает. */
.лист-окно{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:var(--размер-колонка);max-height:90vh;max-height:90dvh;
  padding:0;border:0;background:transparent;color:var(--ink);overflow:auto;overscroll-behavior:contain;transform:translateY(100%);
  transition:transform var(--длит-обычно) var(--кривая-уход),display var(--длит-обычно) allow-discrete,overlay var(--длит-обычно) allow-discrete}
.лист-окно[open]{transform:none;transition-timing-function:var(--кривая-появление)}
@starting-style{.лист-окно[open]{transform:translateY(100%)}}
.лист-окно::backdrop{background:var(--затемнение);opacity:0;
  transition:opacity var(--длит-обычно) var(--кривая-уход),display var(--длит-обычно) allow-discrete,overlay var(--длит-обычно) allow-discrete}
.лист-окно[open]::backdrop{opacity:1}
@starting-style{.лист-окно[open]::backdrop{opacity:0}}
.лист-окно.risovanie{padding:var(--отступ-8) var(--отступ-16) calc(var(--отступ-16) + env(safe-area-inset-bottom,0px));
  background:var(--card);border-radius:var(--радиус-общий) var(--радиус-общий) 0 0;box-shadow:var(--тень-карточка) var(--тень)}
body.лист-открыт{overflow:hidden}

/* Код (клетка 61-komp-kartochki.js:142-156; экран 71-ekran-2.js:19-31): два ряда по 4 клетки 56,
   промежуток 12; card, радиус 16, рамка «поле» 1 внутрь, пустая — точка 6 muted, знак — «Текст/Заголовок»;
   фокус — child 3, ошибка — hard 2 у всех клеток. Без скрипта ряды скрыты и видно само поле;
   со скриптом (kod.js ставит data-клетки) поле прозрачно лежит поверх клеток. */
.к-код{position:relative;display:grid;gap:var(--отступ-12)}
.к-код .ряд{display:none;grid-template-columns:repeat(4,1fr);gap:var(--отступ-12)}
.к-код input{min-height:var(--размер-клетка);padding:0 var(--отступ-16);border:0;border-radius:var(--радиус-общий);background:var(--card);
  box-shadow:inset 0 0 0 var(--линия-тонкая) var(--поле);color:var(--ink);font:700 var(--кегль-название)/var(--строка-заголовок) var(--display);
  letter-spacing:var(--трекинг-сжатый);text-align:center}
.к-код input:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--линия-фокус) var(--child)}
.к-код[data-клетки] .ряд{display:grid}
.к-код[data-клетки] input{position:absolute;inset:0;opacity:0;min-height:0;caret-color:transparent}
.к-код .клетка{display:grid;place-items:center;height:var(--размер-клетка);border-radius:var(--радиус-общий);background:var(--card);
  box-shadow:inset 0 0 0 var(--линия-тонкая) var(--поле);color:var(--ink);font:700 var(--кегль-название)/var(--строка-заголовок) var(--display);
  letter-spacing:var(--трекинг-сжатый)}
.к-код .клетка:empty::before{content:"";width:calc(var(--отступ-4) * 1.5);height:calc(var(--отступ-4) * 1.5);border-radius:50%;background:var(--muted)}
.к-код .клетка[data-фокус="1"]{box-shadow:inset 0 0 0 var(--линия-фокус) var(--child)}
.к-код[data-ошибка] .клетка,.к-код[data-ошибка] input{box-shadow:inset 0 0 0 var(--линия-метка) var(--hard)}

/* День недели (65-komp-nastrojki.js:112-127): 44, радиус 8; нет — card, волосок rule, «Текст/Переключатель» muted;
   отмечен — childwash, рамка child 2, child. Флажок убран с глаз; фокус — общая рамка legacy на всей клетке. */
.к-день{position:relative;display:grid;place-items:center;min-height:var(--размер-нажатие);border-radius:var(--радиус-плашка);
  background:var(--card);box-shadow:inset 0 0 0 var(--линия-тонкая) var(--rule);color:var(--muted);
  font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);cursor:pointer}
.к-день:has(:checked){background:var(--childwash);box-shadow:inset 0 0 0 var(--линия-метка) var(--child);color:var(--child)}

/* Карточка истории (66-komp-vhod.js:22-40): поля 12/12/16/12, промежуток 12, card + тень, радиус 16;
   сцена 220 на plate, радиус 8; группа класса 208 по центру, сверху 12 (у низа сцены). */
.к-карточка-истории{display:grid;gap:var(--отступ-12);padding:var(--отступ-12) var(--отступ-12) var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
.к-карточка-истории .сцена{display:grid;place-items:end center;height:var(--размер-сцена);border-radius:var(--радиус-плашка);
  background:var(--plate);overflow:hidden}
.к-карточка-истории .сцена img,.к-карточка-истории .сцена video{display:block;width:auto;height:var(--размер-группа);max-width:100%;object-fit:contain;object-position:bottom}
/* Ролик класса вместо картинки (О14): тот же прямоугольник, что у картинки (ширина из width/height разметки), без скачка;
   нажатие — звук (klass.js), фокус с клавиатуры — рамкой child. */
.к-карточка-истории .сцена video{aspect-ratio:343/300;cursor:pointer}
.к-карточка-истории .сцена video:focus-visible{outline:var(--линия-фокус) solid var(--child);outline-offset:calc(var(--линия-фокус) * -1)}

/* Облачко реплики (референс Марии 2026-10-13; DK-328 — 61-komp-kartochki.js r88): card, радиус 16, тень, поля 12/16,
   шаг 12; хвостик справа — к персонажу (квадрат 12 под 45°, центр на правом крае в 30 от низа), «Рука/Малая» ink,
   сердечко 16 child в правом нижнем углу; наклон — у места на экране. «Ответить» — капсула childwash 40 (зона 44),
   поля 0/12, шаг 8: значок чата 24, «Текст/Кнопка» child, стрелка 16. */
.к-облачко{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--отступ-12);margin:0;
  padding:var(--отступ-12) var(--отступ-16) var(--отступ-16);border-radius:var(--радиус-общий);
  background:var(--card);box-shadow:var(--тень-карточка) var(--тень);color:var(--ink);
  font:400 var(--кегль-подзаголовок)/1.15 var(--рука);text-align:left}
.к-облачко > .реплика{margin:0}
.к-облачко::after{content:"";position:absolute;right:calc(var(--отступ-4) * -1.5);bottom:var(--отступ-24);width:var(--отступ-12);
  height:var(--отступ-12);background:var(--card);transform:rotate(45deg)}
.к-облачко > .ответить,
.к-облачко > form > .ответить{position:relative;display:inline-flex;align-items:center;gap:var(--отступ-8);min-height:var(--размер-кнопка-мал);
  padding:0 var(--отступ-12);border-radius:var(--радиус-полный);background:var(--childwash);color:var(--child);
  font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);text-decoration:none;border:0;cursor:pointer}
.к-облачко > .ответить::after,
.к-облачко > form > .ответить::after{content:"";position:absolute;inset:calc((var(--размер-нажатие) - var(--размер-кнопка-мал)) / -2) 0}
.к-облачко > .ответить .к-значок[data-знак="strelka"],
.к-облачко > form > .ответить .к-значок[data-знак="strelka"]{width:var(--размер-значок-мал);height:var(--размер-значок-мал)}
.к-облачко > .ответить:focus-visible,
.к-облачко > form > .ответить:focus-visible{outline:var(--линия-фокус) solid var(--child);outline-offset:var(--отступ-4)}
.к-облачко > .к-дудл{position:absolute;right:var(--отступ-8);bottom:var(--отступ-4);color:var(--child)}
/* Метка «Любит» / «Не любит» (референс Марии 2026-10-13): плашка радиусом 8 — childwash / подсветка бледно (0,35),
   поля 2/12, сердечко 16 слева через 4: у «любит» child, у «не любит» muted. */
.к-метка-о-нём{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:var(--отступ-4);
  padding:calc(var(--отступ-4) / 2) var(--отступ-12)}
.к-метка-о-нём::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--радиус-плашка);background:var(--childwash)}
.к-метка-о-нём[data-тон="не-любит"]::before{background:var(--подсветка);opacity:.35}
.к-метка-о-нём > .к-дудл{color:var(--child)}
.к-метка-о-нём[data-тон="не-любит"] > .к-дудл{color:var(--muted)}

/* Знак приложения (референс Марии 2026-10-13): «5» Manrope Bold 72 ink между скобками высотой 112 (концы рамки
   кнопки, маска skobka; левая — поворот 180°); корона child над правой скобкой, лучи подсветкой справа от неё;
   под ними «пять опять» рукой и сердечко child. */
.к-знак-приложения{display:grid;justify-items:center;gap:0;margin:0;color:var(--ink)}
.к-знак-приложения .скобки{position:relative;display:flex;align-items:center;justify-content:center}
.к-знак-приложения .пять{font:700 calc(var(--кегль-экран) * 1.8)/1 var(--display)}
.к-знак-приложения .скобки > .к-дудл[data-дудл="korona"]{position:absolute;top:calc(var(--отступ-12) * -1);right:var(--отступ-16);color:var(--child);transform:rotate(-8deg)}
.к-знак-приложения .скобки > .к-дудл[data-дудл="akcent"]{position:absolute;top:var(--отступ-16);right:calc(var(--отступ-32) * -1);transform:rotate(100deg)}
.к-знак-приложения .подпись{display:inline-flex;align-items:center;gap:var(--отступ-4)}
.к-знак-приложения .подпись > .к-дудл{color:var(--child)}
.к-знак-приложения .скобка{display:block;width:calc(var(--отступ-48) + var(--отступ-4));height:calc(var(--отступ-64) * 1.75);
  background-color:currentColor;-webkit-mask:url(/static/dudl/skobka.png) center/contain no-repeat;mask:url(/static/dudl/skobka.png) center/contain no-repeat}
.к-знак-приложения .скобка:first-child{transform:rotate(180deg)}
.к-знак-приложения > .подпись{margin-top:calc(var(--отступ-4) * -1)}

/* Ролик знакомства (слово Марии 2026-10-12): весь экран, ролик вписан целиком (субтитры в нём не срезаются),
   поля вокруг — бумага; нажатие — звук (klass.js), фокус с клавиатуры — рамкой child внутрь. */
.к-ролик-знакомства{position:fixed;inset:0;display:grid;place-items:center;background:var(--paper)}
.к-ролик-знакомства video,.к-ролик-знакомства img{display:block;width:100%;height:100%;object-fit:contain}
.к-ролик-знакомства video{cursor:pointer}
.к-ролик-знакомства video:focus-visible{outline:var(--линия-фокус) solid var(--child);outline-offset:calc(var(--линия-фокус) * -1)}

/* Карточка друга (66-komp-vhod.js:42-70): поля 8/8/12/8, промежуток 8, по центру, card + тень, радиус 16;
   портрет 150 на plate, радиус 8 — верх фигуры (кроп 0.42 при узком кадре = вся ширина сверху);
   выбрана — рамка child 2 и галочка 20 на круге childwash 32 в углу портрета (6 от края);
   фокус — общая рамка legacy (`:focus-visible`) на всей карточке, радио убрано с глаз;
   «любит» — три наклейки 48 внахлёст на 6, поворот −4°, 3°, −2° (Figma; в CSS знак обратный). */
.к-карточка-друга{position:relative;display:grid;justify-items:center;align-content:start;gap:var(--отступ-8);
  padding:var(--отступ-8) var(--отступ-8) var(--отступ-12);border-radius:var(--радиус-общий);background:var(--card);
  box-shadow:var(--тень-карточка) var(--тень);color:var(--ink);text-align:center;cursor:pointer;
  transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-карточка-друга:active{transform:translateY(var(--сдвиг-нажатие))}
.к-карточка-друга:has(:checked){box-shadow:var(--тень-карточка) var(--тень),inset 0 0 0 var(--линия-метка) var(--child)}
.к-карточка-друга .портрет{position:relative;display:block;width:100%;height:var(--размер-карточка);
  border-radius:var(--радиус-плашка);background:var(--plate);overflow:hidden}
.к-карточка-друга .портрет img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.к-карточка-друга .отметка{display:none;position:absolute;top:calc(var(--отступ-4) * 1.5);right:calc(var(--отступ-4) * 1.5);
  place-items:center;width:var(--отступ-32);height:var(--отступ-32);border-radius:var(--радиус-полный);background:var(--childwash)}
.к-карточка-друга .отметка .к-дудл{width:calc(var(--отступ-16) + var(--отступ-4));height:calc(var(--отступ-16) + var(--отступ-4))}
.к-карточка-друга:has(:checked) .отметка{display:grid}
.к-карточка-друга .любит{display:flex;justify-content:center;align-items:center}
.к-карточка-друга .наклейка{display:block;width:var(--размер-наклейка);height:var(--размер-наклейка);
  margin-inline:calc(var(--отступ-12) / -4);object-fit:contain}
.к-карточка-друга .наклейка:nth-child(1){transform:rotate(4deg)}
.к-карточка-друга .наклейка:nth-child(2){transform:rotate(-3deg)}
.к-карточка-друга .наклейка:nth-child(3){transform:rotate(2deg)}

/* Карандаш — дудл «два» (50-dudly.js:7, 20-38): снизу свой цвет (karandash-cvet), сверху контур ink маской. */
.к-дудл[data-дудл="karandash"]{position:relative;background:url(/static/dudl/karandash-cvet.png) center/contain no-repeat}

/* Лента чата (75-ekran-chat.js:39-44): промежуток 8, поля 8 сверху и снизу (бока — у колонки);
   первой строкой — день «Текст/Мелкий» muted по центру. */
.chat{display:grid;gap:var(--отступ-8);margin:0;padding:var(--отступ-8) 0}
.к-день-ленты{justify-self:center;margin:0;color:var(--muted);font:500 var(--кегль-микро)/var(--строка-мелкая) var(--body)}
/* Событие ленты (макета нет, слово Марии 2026-10-10): награда за просьбу под «спасибо» — по центру,
   капсула подсветки, текст цветом монеты «Текст/Подпись». */
.к-событие-ленты{justify-self:center;margin:0;padding:var(--отступ-4) var(--отступ-12);border-radius:var(--радиус-полный);
  background:var(--подсветка);color:var(--монета);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
/* Пузырь (63-komp-chat.js:21-36): по тексту, не шире 80 % ленты, ряд по низу, промежуток 8;
   друг слева с лицом 32; облако — поля 8/12, промежуток 4, радиус 16, угол к говорящему 8;
   друг — card + тень, ребёнок — childwash без тени, время справа. Текст «Текст/Основной» ink,
   время «Текст/Мелкий» muted. Эхо кадра у лица — то же, что было в legacy. */
.к-пузырь{display:flex;align-items:flex-end;gap:var(--отступ-8);justify-self:start;max-width:80%}
.к-пузырь[data-кто="я"]{justify-self:end}
.к-пузырь .ava{flex:none;width:var(--размер-аватар-мал);height:var(--размер-аватар-мал);border-radius:50%;background:var(--plate);object-fit:cover}
.к-пузырь[data-state="сомневается"] .ava{box-shadow:0 0 0 var(--линия-метка) var(--soft)}
.к-пузырь[data-state="попался"] .ava{box-shadow:0 0 0 var(--линия-метка) var(--hard)}
.к-пузырь[data-state="рад"] .ava{box-shadow:0 0 0 var(--линия-метка) var(--good)}
.к-пузырь .облако{display:grid;gap:var(--отступ-4);min-width:0;padding:var(--отступ-8) var(--отступ-12);
  border-radius:var(--радиус-общий) var(--радиус-общий) var(--радиус-общий) var(--радиус-плашка);
  background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
.к-пузырь[data-кто="я"] .облако{border-radius:var(--радиус-общий) var(--радиус-общий) var(--радиус-плашка) var(--радиус-общий);
  background:var(--childwash);box-shadow:none}
.к-пузырь .тело{color:var(--ink);font:400 var(--кегль-текст)/var(--строка-текст) var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
.к-пузырь .время{color:var(--muted);font:500 var(--кегль-микро)/var(--строка-мелкая) var(--body)}
.к-пузырь[data-кто="я"] .время{justify-self:end}
/* Не ушло: черта hard справа у облака и чип «отправить ещё раз» под ним. */
.к-пузырь[data-потеряно]{flex-wrap:wrap;justify-content:flex-end}
.к-пузырь[data-потеряно] .облако{box-shadow:inset calc(var(--линия-метка) * -1) 0 0 var(--hard)}
/* Появление пузыря (спека 6.2): новая реплика — та, что chat.js дописал в ленту (data-новое; история с сервера
   стоит), — встаёт снизу на сдвиг, прозрачность 0 → 1, «обычно», кривая «появление». Реплика в ленте сразу —
   анимация её не держит. «Уменьшить движение» обнуляет длительность и сдвиг в tokens.css. */
@keyframes пузырь-появление{from{opacity:0;transform:translateY(var(--сдвиг-появление))}}
.к-пузырь[data-новое]{animation:пузырь-появление var(--длит-обычно) var(--кривая-появление)}

/* Быстрый ответ — «Фишка» (60-komp-osnova.js:186-195): капсула 32, поля 0/12, card с рамкой rule,
   muted, «Текст/Переключатель»; зона касания 44 — невидимым ::after. Подсказка-заход — как
   выбранная фишка: childwash, child. */
.к-чип{position:relative;min-height:var(--отступ-32);padding:0 var(--отступ-12);border:0;border-radius:var(--радиус-полный);
  background:var(--card);box-shadow:inset 0 0 0 var(--линия-тонкая) var(--rule);color:var(--muted);
  font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);cursor:pointer}
.к-чип::after{content:"";position:absolute;inset:calc((var(--размер-нажатие) - var(--отступ-32)) / -2) 0}
.к-чип[data-вид="подсказка"]{background:var(--childwash);box-shadow:none;color:var(--child)}
.quick{display:flex;flex-wrap:wrap;gap:var(--отступ-12) var(--отступ-8)}
.quick:empty{display:none}

/* Ожидание (в макете компонента нет): лицо 32, три точки legacy (.dots), слово «Текст/Подпись» muted. */
.к-ожидание{display:flex;align-items:center;gap:var(--отступ-8);padding:var(--отступ-8) 0;color:var(--muted);
  font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-ожидание .ava{width:var(--размер-аватар-мал);height:var(--размер-аватар-мал);border-radius:50%;background:var(--plate);object-fit:cover}

/* Поле ввода (61-komp-kartochki.js:158-177; экран 75-ekran-chat.js:26-34): на бумаге — быстрые ответы
   и ряд кнопок-значков (поля 8/16, промежуток 8); ниже — полоса card с чертой rule сверху, поля 8/12,
   промежуток 4: капсула 44 на paper с рамкой «поле», поля 0/16, подсказка muted; «отправить» —
   круг 44 заливка со стрелкой кн-текст. */
.к-ввод{display:grid;margin:0;background:var(--paper)}
.к-ввод .quick:not(:empty),.к-ввод .над-полем{padding:var(--отступ-8) var(--отступ-16)}
.к-ввод .над-полем{display:flex;gap:var(--отступ-8)}
.к-ввод .над-полем:not(:has(.к-кнопка:not([hidden]), #photo-controls:not([hidden]))){display:none}
.к-ввод .строка{display:flex;align-items:center;gap:var(--отступ-4);padding:var(--отступ-8) var(--отступ-12);
  background:var(--card);box-shadow:inset 0 var(--линия-тонкая) 0 var(--rule)}
.к-ввод textarea{flex:1;min-width:0;min-height:var(--размер-нажатие);max-height:var(--размер-поле-ввода);
  padding:calc((var(--размер-нажатие) - var(--строка-текст)) / 2) var(--отступ-16);border:0;
  border-radius:var(--радиус-полный);background:var(--paper);box-shadow:inset 0 0 0 var(--линия-тонкая) var(--поле);
  color:var(--ink);font:400 var(--кегль-текст)/var(--строка-текст) var(--body);resize:none;overflow-y:auto}
.к-ввод textarea::placeholder{color:var(--muted);opacity:1}
.к-ввод textarea:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--линия-фокус) var(--child)}
.к-ввод .отправить{display:grid;flex:none;place-items:center;width:var(--размер-нажатие);height:var(--размер-нажатие);
  padding:0;border:0;border-radius:50%;background:var(--заливка);color:var(--кн-текст);cursor:pointer;
  transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-ввод .отправить:active{transform:translateY(var(--сдвиг-нажатие));background:var(--нажата)}


/* Карточка просьбы (61-komp-kartochki.js:33-83): card + тень, радиус 16, поля 12/16, gap 8.
   Верх (gap 12): лицо 40 на plate и «кто» (gap 4) — имя «Текст/Кнопка» и срок (часы 16 + «Текст/Мелкий» muted,
   gap 4) по краям, ниже «Математика · тема» (gap 4), тема ink на маркере: ширина слова + 4, высота 7, низ на 1 ниже
   строки; в тёмной — 4, на 3 ниже. Текст «Текст/Подпись» до 3 строк. Низ: монеты и опыт без капсул (gap 12),
   справа подсказка «Текст/Кнопка» child со стрелкой 16. Открытая без скрипта — оборот под лицом (68-komp-listy.js:30-43):
   рамка child 2, поля 0/16/16, gap 12, вопрос «Текст/Основной», кнопки 40 поровну через 12; лицевой текст на это время
   прячется (его целиком говорит оборот). Черта статуса — на левой грани, три характера (§ 6). Со скриптом — переворот
   граней, блок после правил черты. */
.к-карточка-просьбы{border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
.к-карточка-просьбы > summary{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--отступ-8) var(--отступ-12);
  padding:var(--отступ-12) var(--отступ-16);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.к-карточка-просьбы > summary::-webkit-details-marker{display:none}
.к-карточка-просьбы .ava{display:block;width:var(--размер-аватар-ср);height:var(--размер-аватар-ср);border-radius:50%;
  background:var(--plate);object-fit:cover}
.к-карточка-просьбы .кто{display:flex;flex-direction:column;gap:var(--отступ-4);min-width:0}
.к-карточка-просьбы .имя-срок{display:flex;justify-content:space-between;align-items:center;gap:var(--отступ-8)}
.к-карточка-просьбы .срок{display:inline-flex;align-items:center;gap:var(--отступ-4);color:var(--muted);white-space:nowrap;
  font:500 var(--кегль-микро)/var(--строка-мелкая) var(--body)}
.к-карточка-просьбы .срок .к-значок,.к-карточка-просьбы .открыть .к-значок{width:var(--размер-значок-мал);height:var(--размер-значок-мал)}
.к-карточка-просьбы .предмет{display:flex;align-items:center;gap:var(--отступ-4)}
.к-карточка-просьбы .тема{position:relative;isolation:isolate;color:var(--ink);font:500 var(--кегль-микро)/var(--строка-мелкая) var(--body)}
.к-карточка-просьбы .тема::before{content:"";position:absolute;z-index:-1;left:calc(var(--линия-метка) * -1);right:calc(var(--линия-метка) * -1);
  bottom:calc(var(--линия-тонкая) * -1);height:calc(var(--отступ-4) + var(--линия-фокус));background:var(--подсветка)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .к-карточка-просьбы .тема::before{height:var(--отступ-4);bottom:calc(var(--линия-фокус) * -1)}}
:root[data-theme="dark"] .к-карточка-просьбы .тема::before{height:var(--отступ-4);bottom:calc(var(--линия-фокус) * -1)}
.к-карточка-просьбы summary > .к-текст{grid-column:1 / -1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.к-карточка-просьбы .низ-карточки{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:var(--отступ-8)}
.к-карточка-просьбы .награда{display:flex;align-items:center;gap:var(--отступ-12)}
.к-карточка-просьбы .к-счёт{padding:0;background:none;box-shadow:none}
.к-карточка-просьбы .открыть{display:inline-flex;align-items:center;gap:var(--отступ-4);color:var(--child);
  font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-карточка-просьбы[open]:not([data-сторона]){box-shadow:var(--тень-карточка) var(--тень),inset 0 0 0 var(--линия-метка) var(--child)}
.к-карточка-просьбы[open]:not([data-сторона]) summary > .к-текст,.к-карточка-просьбы[open]:not([data-сторона]) .открыть{display:none}
.к-карточка-просьбы .оборот{display:grid;gap:var(--отступ-12);padding:0 var(--отступ-16) var(--отступ-16)}
.к-карточка-просьбы .act{display:grid;grid-template-columns:1fr 1fr;gap:var(--отступ-12);margin:0}
.к-карточка-просьбы .act .к-кнопка{width:100%}
.к-карточка-просьбы .act > .к-текст{grid-column:1 / -1}
.к-карточка-просьбы .thread{display:grid;gap:var(--отступ-8)}
/* «Кто» оборота (68-komp-listy.js:33-35): лицо 40 на plate и имя «Текст/Кнопка», ряд через 12 по центру.
   Без скрипта <details> раскрывает оборот под лицом — там «кто» уже стоит, строка оборота прячется. */
.к-карточка-просьбы .кто-оборота{display:flex;align-items:center;gap:var(--отступ-12)}
.к-карточка-просьбы:not([data-сторона]) .кто-оборота{display:none}
.к-карточка-просьбы:has([data-mark="идёт"]){border-left:var(--линия-фокус) solid var(--акцент)}
.к-карточка-просьбы:has([data-mark="вместе"]){border-left:var(--линия-фокус) double var(--good)}
.к-карточка-просьбы:has([data-mark="сам"]){border-left:var(--линия-фокус) dashed var(--rule)}
/* Переворот (спека 6.2; план 5) — только когда ui.js взял карточку: она всегда открыта, видимую грань
   называет data-сторона («лицо» — summary, «оборот» — .оборот). Фон, тень и черта статуса переезжают
   с карточки на грани: вращается грань целиком. Черту с карточки снимает порядок — этот блок стоит ниже
   трёх правил :has([data-mark]) той же специфичности (замок — smoke104). Видимая грань — в потоке (её
   высота — высота карточки), скрытая — поверх, без нажатий (ui.js ставит ей inert). Поворот без
   preserve-3d и backface-visibility: глубина — perspective(--глубина-поворот) в transform каждой грани
   (слово Марии 2026-10-08); уходящая грань за первую половину «обычно» встаёт ребром (90°) и пропадает,
   приходящая ждёт ту же половину на −90° и встаёт. Кроссфейд (ui.СМЕНА_СТОРОНЫ) — прозрачностью, обе
   разом. Переходы — только после переворота (data-тронута): на загрузке грани не едут. «Уменьшить
   движение» обнуляет длительности в tokens.css — сторона меняется сразу, поворота нет. Фокус — общая
   рамка screens.css. */
.к-карточка-просьбы[data-сторона]{position:relative;background:none;box-shadow:none;border-left:0}
.к-карточка-просьбы[data-сторона] > summary,.к-карточка-просьбы[data-сторона] > .оборот{border-radius:var(--радиус-общий);
  background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
.к-карточка-просьбы[data-сторона] > .оборот{padding:var(--отступ-12) var(--отступ-16) var(--отступ-16);
  box-shadow:var(--тень-карточка) var(--тень),inset 0 0 0 var(--линия-метка) var(--child)}
.к-карточка-просьбы[data-сторона]:has([data-mark="идёт"]) > :is(summary,.оборот){border-left:var(--линия-фокус) solid var(--акцент)}
.к-карточка-просьбы[data-сторона]:has([data-mark="вместе"]) > :is(summary,.оборот){border-left:var(--линия-фокус) double var(--good)}
.к-карточка-просьбы[data-сторона]:has([data-mark="сам"]) > :is(summary,.оборот){border-left:var(--линия-фокус) dashed var(--rule)}
.к-карточка-просьбы[data-сторона="лицо"] > .оборот,.к-карточка-просьбы[data-сторона="оборот"] > summary{position:absolute;top:0;left:0;right:0;pointer-events:none}
/* Скрытый оборот — в рамке лица: длинная переписка последней карточки не даёт хвоста прокрутки. */
.к-карточка-просьбы[data-сторона="лицо"] > .оборот{bottom:0;overflow:hidden}
.к-карточка-просьбы[data-сторона]:where([data-смена="поворот"]) > :is(summary,.оборот){transform:perspective(var(--глубина-поворот)) rotateY(0deg)}
.к-карточка-просьбы[data-смена="поворот"][data-сторона="лицо"] > .оборот{transform:perspective(var(--глубина-поворот)) rotateY(-90deg)}
.к-карточка-просьбы[data-смена="поворот"][data-сторона="оборот"] > summary{transform:perspective(var(--глубина-поворот)) rotateY(90deg)}
.к-карточка-просьбы[data-смена="кроссфейд"][data-сторона="лицо"] > .оборот,.к-карточка-просьбы[data-смена="кроссфейд"][data-сторона="оборот"] > summary{opacity:0}
.к-карточка-просьбы[data-тронута] > :is(summary,.оборот){transition:transform calc(var(--длит-обычно) / 2) var(--кривая-обычная) calc(var(--длит-обычно) / 2),opacity var(--длит-обычно) var(--кривая-обычная)}
.к-карточка-просьбы[data-тронута][data-сторона="лицо"] > .оборот,.к-карточка-просьбы[data-тронута][data-сторона="оборот"] > summary{transition:transform calc(var(--длит-обычно) / 2) var(--кривая-обычная),opacity var(--длит-обычно) var(--кривая-обычная)}

/* Реплика переписки под взятой просьбой (в макете нет — лист значений 2.16): плашка «Текст/Подпись»,
   поля 8/12, радиус 16; друг — слева на plate, своя — справа на childwash, «Пока тихо.» — muted без плашки. */
.к-реплика{justify-self:start;max-width:80%;padding:var(--отступ-8) var(--отступ-12);border-radius:var(--радиус-общий);
  background:var(--plate);color:var(--ink);font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body);
  white-space:pre-wrap;overflow-wrap:anywhere}
.к-реплика[data-кто="я"]{justify-self:end;background:var(--childwash)}
.к-реплика[data-кто="тихо"]{padding-inline:0;background:none;color:var(--muted)}

/* Метка (60-komp-osnova.js:198-207): plate, радиус 8, поля 4/8, «Текст/Метка» muted. */
.к-метка{display:inline-flex;align-self:flex-start;padding:var(--отступ-4) var(--отступ-8);border-radius:var(--радиус-плашка);
  background:var(--plate);color:var(--muted);font:600 var(--кегль-микро)/var(--строка-мелкая) var(--body)}
/* Карточка-строка (61-komp-kartochki.js:20-31): card + тень, радиус 16, поля 12/8/12/12, промежуток 12;
   круг 40 childwash со значком child; слова — колонка через 4; шеврон «вперёд» muted. Нажатие — как у кнопки. */
.к-карточка-строка{display:flex;align-items:center;gap:var(--отступ-12);padding:var(--отступ-12) var(--отступ-8) var(--отступ-12) var(--отступ-12);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-карточка-строка:active{transform:translateY(var(--сдвиг-нажатие))}
.к-карточка-строка .круг{display:grid;place-items:center;flex:none;width:var(--размер-аватар-ср);height:var(--размер-аватар-ср);
  border-radius:var(--радиус-полный);background:var(--childwash);color:var(--child)}
.к-карточка-строка .слова{display:grid;gap:var(--отступ-4);flex:1;min-width:0}
.к-карточка-строка > .к-значок{color:var(--muted)}
/* Знак темы (65-komp-nastrojki.js:158-172): 48, круг светлой бумаги в любой теме (не по теме), солнце/луна 32 в (8,8);
   у «системы» — солнце 22 в (3,10) и луна 20 в (24,15). Картинки своим цветом. */
.к-знак-темы{position:relative;display:block;width:var(--отступ-48);height:var(--отступ-48);border-radius:var(--радиус-полный);background:var(--св-paper)}
.к-знак-темы img{position:absolute;left:var(--отступ-8);top:var(--отступ-8);width:var(--отступ-32);height:var(--отступ-32);object-fit:contain}
.к-знак-темы[data-тема="система"] img:first-child{left:calc(var(--отступ-4) - var(--линия-тонкая));top:calc(var(--отступ-8) + var(--линия-метка));
  width:calc(var(--отступ-24) - var(--линия-метка));height:calc(var(--отступ-24) - var(--линия-метка))}
.к-знак-темы[data-тема="система"] img:last-child{left:var(--отступ-24);top:calc(var(--отступ-12) + var(--линия-фокус));
  width:calc(var(--отступ-16) + var(--отступ-4));height:calc(var(--отступ-16) + var(--отступ-4))}
/* Образец темы (65-komp-nastrojki.js:128-149): card + тень, радиус 16, поля 12/8, промежуток 8, по центру; выбран — рамка child 2.
   Мини-экран 64x104 (радиус 8, волосок rule): бумага, заголовок 28x4, две карточки 48x20, кнопка 32x10 — палитрой
   своей темы (--св-*/--тм-*: не по теме). Отметка 20: выбран — child с точкой 8 card, нет — кольцо rule 2. */
.к-образец-темы{display:grid;justify-items:center;gap:var(--отступ-8);width:100%;padding:var(--отступ-12) var(--отступ-8);border:0;
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);color:var(--ink);font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-образец-темы:active{transform:translateY(var(--сдвиг-нажатие))}
.к-образец-темы[aria-pressed="true"]{box-shadow:var(--тень-карточка) var(--тень),inset 0 0 0 var(--линия-метка) var(--child)}
.к-образец-темы .экран{display:flex;width:var(--отступ-64);height:var(--размер-образец-в);overflow:hidden;border-radius:var(--радиус-плашка);
  box-shadow:inset 0 0 0 var(--линия-тонкая) var(--rule)}
.к-образец-темы .половина{position:relative;flex:none;width:var(--отступ-64);height:100%;
  --б:var(--св-paper);--к:var(--св-card);--т:var(--св-ink);--з:var(--св-заливка);background:var(--б)}
.к-образец-темы[data-тема="тёмная"] .половина,.к-образец-темы[data-тема="система"] .половина:last-child{--б:var(--тм-paper);--к:var(--тм-card);--т:var(--тм-ink);--з:var(--тм-заливка)}
.к-образец-темы[data-тема="система"] .половина{width:var(--отступ-32);overflow:hidden}
.к-образец-темы[data-тема="система"] .половина:last-child i{transform:translateX(calc(var(--отступ-32) * -1))}
.к-образец-темы .половина i{position:absolute;left:var(--отступ-8)}
.к-образец-темы .заголовок{top:calc(var(--отступ-8) + var(--линия-метка));width:calc(var(--отступ-24) + var(--отступ-4));height:var(--отступ-4);border-radius:var(--линия-метка);background:var(--т)}
.к-образец-темы .карточка{top:calc(var(--отступ-24) - var(--линия-метка));width:var(--отступ-48);height:calc(var(--отступ-16) + var(--отступ-4));border-radius:var(--отступ-4);background:var(--к)}
.к-образец-темы .карточка + .карточка{top:var(--отступ-48)}
.к-образец-темы .кнопка{top:calc(var(--отступ-64) + var(--отступ-16) + var(--линия-метка));width:var(--отступ-32);height:calc(var(--отступ-8) + var(--линия-метка));
  border-radius:calc(var(--отступ-4) + var(--линия-тонкая));background:var(--з)}
.к-образец-темы .к-текст{text-align:center}
.к-образец-темы .отметка{position:relative;width:var(--размер-отметка-темы);height:var(--размер-отметка-темы);border-radius:var(--радиус-полный);
  box-shadow:inset 0 0 0 var(--линия-метка) var(--rule)}
.к-образец-темы[aria-pressed="true"] .отметка{background:var(--child);box-shadow:none}
.к-образец-темы[aria-pressed="true"] .отметка::after{content:"";position:absolute;inset:calc((var(--размер-отметка-темы) - var(--отступ-8)) / 2);
  border-radius:var(--радиус-полный);background:var(--card)}

/* Выделение: малое — правило задачи 2 (`.к-выделение[data-мал],body.kid h2.rubric`). Листок (61-komp-kartochki.js:202-221) — card, клетка 8
   линиями «заливка» 30 %, поля 4/16, «Рука/Крупная», скотч 40x14 поперёк верхнего края (x 6, y −8, Figma −6° → CSS 6°);
   у экземпляра наклон −3° (CSS 3°), у места на экране — свой (screens.css). Подсветки-маркера у листка нет. */
.к-выделение[data-вид="листок"]{padding:var(--отступ-4) var(--отступ-16);background-color:var(--card);
  background-image:linear-gradient(color-mix(in srgb,var(--заливка) 30%,transparent) var(--линия-тонкая),transparent var(--линия-тонкая)),
    linear-gradient(90deg,color-mix(in srgb,var(--заливка) 30%,transparent) var(--линия-тонкая),transparent var(--линия-тонкая));
  background-size:var(--отступ-8) var(--отступ-8);transform:rotate(3deg)}
.к-выделение[data-вид="листок"]::before{content:none}
.к-выделение .скотч{position:absolute;left:calc(var(--отступ-4) * 1.5);top:calc(var(--отступ-8) * -1);
  width:calc(var(--отступ-32) + var(--отступ-8));height:calc(var(--отступ-12) + var(--линия-метка));transform:rotate(6deg);
  border-style:solid;border-width:0 4.36px 0 4.23px;border-color:transparent;border-image:url(/static/kist/skotch.png) 0 33 0 32 fill / 0 4.36px 0 4.23px stretch}
/* Дудлы 14 (узор корон), 28 (корона, акценты, звёздочка сводки), 36 (скрепка) — от шкалы отступов. */
.к-дудл[data-размер="14"]{width:calc(var(--отступ-12) + var(--линия-метка));height:calc(var(--отступ-12) + var(--линия-метка))}
.к-дудл[data-размер="28"]{width:calc(var(--отступ-24) + var(--отступ-4));height:calc(var(--отступ-24) + var(--отступ-4))}
.к-дудл[data-размер="36"]{width:calc(var(--отступ-32) + var(--отступ-4));height:calc(var(--отступ-32) + var(--отступ-4))}

/* Переключатель (60-komp-osnova.js:160-184): поля 4, промежуток 4; сегменты 40, «Текст/Переключатель»; выбранный —
   child на childwash, другой muted; подложка plate (кистью — в блоке масок). Штрих-акцент 16 снаружи у выбранной стороны:
   центр в 7 за краем переключателя (4 поля + 7 + 8 полудудла = 19 от края сегмента), Figma 90°/−90° → CSS −90°/90°. */
.к-переключатель{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:var(--отступ-4);padding:var(--отступ-4)}
.к-переключатель::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--радиус-общий);background:var(--plate)}
.к-переключатель a{position:relative;isolation:isolate;display:grid;place-items:center;min-height:var(--размер-кнопка-мал);
  color:var(--muted);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);text-decoration:none;-webkit-tap-highlight-color:transparent}
.к-переключатель a[aria-current]{color:var(--child)}
.к-переключатель a[aria-current]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--радиус-общий);background:var(--childwash)}
.к-переключатель .к-дудл{position:absolute;top:50%}
.к-переключатель a:first-child .к-дудл{left:calc(var(--отступ-4) * -4.75);transform:translateY(-50%) rotate(-90deg)}
.к-переключатель a:last-child .к-дудл{right:calc(var(--отступ-4) * -4.75);transform:translateY(-50%) rotate(90deg)}

/* Фигура героя (73-ekran-8.js:63-89): декор центром в долю рисунка, углы Figma со знаком минус —
   корона 28 в (0.68·ш, 4) −41°, акцент 28 в (0.06·ш, 0.2·в) 40°, акцент 24 в (0.97·ш, 0.17·в) −40°. */
.к-фигура{position:relative;display:block}
.к-фигура img{display:block;width:100%;height:auto}
.к-фигура > span{position:absolute;display:block;line-height:0;transform:translate(-50%,-50%) rotate(var(--поворот))}
.к-фигура .корона{left:68%;top:var(--отступ-4);--поворот:41deg}
.к-фигура .акцент-л{left:6%;top:20%;--поворот:-40deg}
.к-фигура .акцент-п{left:97%;top:17%;--поворот:40deg}
/* Фигура по слоям (67-komp-tetrad.js:8-20): слои одного холста стопкой (сетка 1x1), высота — от места, ширина — по
   пропорции файла. Сетка 1x1 с явными дорожками и высотой: процент от строки `auto` браузер считает как auto, и слой
   встал бы в натуральные 1703 px. Высоту контейнера задаёт место: на экране 8 — та же, что у рисунка `.к-фигура img`,
   на примерке — flex. */
.к-фигура-по-слоям{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);justify-items:center;height:100%;min-height:0;
  -webkit-tap-highlight-color:transparent}
.к-фигура-по-слоям img{grid-area:1/1;display:block;width:auto;height:100%;min-height:0;max-width:100%;object-fit:contain}
/* Лист слота (67-komp-tetrad.js:39-56): основа `.к-лист` (поля, ручка, кнопки — выше); заголовок, ряд ячеек через 12,
   подсказка подписью muted; пусто — «Пока ничего» основным muted по центру и «В магазин» во всю ширину. */
.к-лист-слота h2{margin:0}
.к-лист-слота .вещи{display:flex;gap:var(--отступ-12)}
.к-лист-слота .вещи form{display:contents}
.к-лист-слота > .к-текст[data-стиль="основной"]{text-align:center}

/* Наклейки (73-ekran-8.js:106-129): внахлёст 12, по верху; сторона = (колонка + 12·2) / 3 / 1.08 — та же
   и у одинокой «не любит»; повороты Figma −3°, 2°, −2° → CSS 3°, −2°, 2°. */
.к-наклейки{display:flex;align-items:flex-start}
/* Наклейки одного размера (слово Марии 2026-10-12): файлы разной формы (181×222 … 258×377), и с высотой
   по картинке ряд скакал. Теперь у каждой одна рамка 4:5, картинка вписана в неё целиком и стоит по низу. */
.к-наклейки img{flex:none;width:calc((100% + var(--отступ-24)) / 3.24);height:auto;aspect-ratio:4/5;object-fit:contain;object-position:center bottom;transform:rotate(3deg)}
.к-наклейки img + img{margin-left:calc(var(--отступ-12) * -1)}
.к-наклейки img:nth-child(2){transform:rotate(-2deg)}
.к-наклейки img:nth-child(3){transform:rotate(2deg)}

/* Карточка опыта (61-komp-kartochki.js:232-264): childwash + тень, радиус 16, поля 12, промежуток 8; заголовок —
   «Математика» рукой (слева 16 под скрепку) и плашка класса одной строкой; опыт — звёздочка 24, число «Текст/Раздел»,
   «из 1000» мелким; дорожка 8 на card; скрепка 36 в (2, −16); стрелка «вперёд» у правого края (x = ширина − 10). */
.к-карточка-опыта{position:relative;display:grid;gap:var(--отступ-8);padding:var(--отступ-12);border-radius:var(--радиус-общий);
  background:var(--childwash);box-shadow:var(--тень-карточка) var(--тень);color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-карточка-опыта:active{transform:translateY(var(--сдвиг-нажатие))}
.к-карточка-опыта > .к-дудл{position:absolute;left:var(--линия-метка);top:calc(var(--отступ-16) * -1)}
.к-карточка-опыта .заголовок-опыта{display:flex;align-items:center;justify-content:space-between;gap:var(--отступ-8);padding-left:var(--отступ-16)}
.к-карточка-опыта .очки{display:flex;align-items:center;gap:var(--отступ-8)}
.к-карточка-опыта > .к-значок{position:absolute;top:50%;right:calc((var(--размер-значок) - var(--отступ-8) - var(--линия-метка)) * -1);
  transform:translateY(-50%);color:var(--ink)}
/* Плашка класса (DK-341: компонент — она же в шапке учебника вместо монет): plate, капсула, поля 4/8, Текст/Мелкий muted. */
.к-плашка-класса{flex:none;padding:var(--отступ-4) var(--отступ-8);border-radius:var(--радиус-полный);background:var(--plate);
  color:var(--muted);font:500 var(--кегль-микро)/var(--строка-мелкая) var(--body);white-space:nowrap}
/* Дорожка опыта (карточка опыта, строка темы, сводка навыка): 8, радиус полный, заполнение «заливка» шагом 5 %. */
.дорожка{position:relative;display:block;height:var(--отступ-8);overflow:hidden;border-radius:var(--радиус-полный);background:var(--plate)}
.к-карточка-опыта .дорожка{background:var(--card)}
.дорожка i{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:var(--радиус-полный);background:var(--заливка)}
.дорожка[data-доля="5"] i{width:5%}
.дорожка[data-доля="10"] i{width:10%}
.дорожка[data-доля="15"] i{width:15%}
.дорожка[data-доля="20"] i{width:20%}
.дорожка[data-доля="25"] i{width:25%}
.дорожка[data-доля="30"] i{width:30%}
.дорожка[data-доля="35"] i{width:35%}
.дорожка[data-доля="40"] i{width:40%}
.дорожка[data-доля="45"] i{width:45%}
.дорожка[data-доля="50"] i{width:50%}
.дорожка[data-доля="55"] i{width:55%}
.дорожка[data-доля="60"] i{width:60%}
.дорожка[data-доля="65"] i{width:65%}
.дорожка[data-доля="70"] i{width:70%}
.дорожка[data-доля="75"] i{width:75%}
.дорожка[data-доля="80"] i{width:80%}
.дорожка[data-доля="85"] i{width:85%}
.дорожка[data-доля="90"] i{width:90%}
.дорожка[data-доля="95"] i{width:95%}
.дорожка[data-доля="100"] i{width:100%}

/* Кадр вещи (ячейка, карточка, лист): вещь нарисована на общем холсте фигуры 200x300 (shop.CANVAS), в квадрате —
   вырезка с самой вещью по слоту. Числа — геометрия рисунков wear/ (были в legacy.css у `.thing .pic`; ориентиры —
   web/static/wear/ЧИТАТЬ.md): --к — во сколько раз вырезка меньше холста, --сх и --су — её середина долями ширины. */
.кадр{position:relative;display:block;overflow:hidden;--к:1.5;--сх:.5;--су:.75}
.кадр img{position:absolute;display:block;max-width:none;height:auto;width:calc(100% / var(--к));
  left:calc(50% - 100% * var(--сх) / var(--к));top:calc(50% - 100% * var(--су) / var(--к))}
.кадр[data-слот="голова"],.кадр[data-слот="лицо"]{--к:.6;--сх:.5;--су:.3}
.кадр[data-слот="верх"]{--к:.5;--сх:.5;--су:.6}
.кадр[data-слот="низ"]{--к:.8;--сх:.52;--су:1.06}
.кадр[data-слот="обувь"]{--к:.44;--сх:.52;--су:1.4}
/* Вещь художника (wear/vesch-*, решение Марии 2026-10-09) нарисована целиком, без холста фигуры: кадр её вписывает,
   а не режет по слоту. Признак — имя файла (договор — web/static/wear/ЧИТАТЬ.md), разметка у всех вещей одна. */
.кадр img[src*="/wear/vesch-"]{left:0;top:0;width:100%;height:100%;object-fit:contain}
/* Ячейка вещи (61-komp-kartochki.js:129-140): 64, plate, радиус 8, вещь 48 по центру; надета — рамка child 2. */
.к-ячейка-вещи{position:relative;display:grid;place-items:center;flex:none;width:var(--отступ-64);height:var(--отступ-64);padding:0;border:0;
  border-radius:var(--радиус-плашка);background:var(--plate);-webkit-tap-highlight-color:transparent}
button.к-ячейка-вещи{cursor:pointer;transition:transform var(--длит-быстро) var(--кривая-обычная)}
button.к-ячейка-вещи:active{transform:translateY(var(--сдвиг-нажатие))}
.к-ячейка-вещи[data-надета]{box-shadow:inset 0 0 0 var(--линия-метка) var(--child)}
.к-ячейка-вещи .кадр{width:var(--отступ-48);height:var(--отступ-48)}
/* Гардероб (73-ekran-8.js:206-215): card + тень, радиус 16, поля 16, промежуток 12; ленты — через 8, вбок. */
.к-гардероб{display:grid;gap:var(--отступ-12);padding:var(--отступ-16);border-radius:var(--радиус-общий);
  background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
/* overflow-x:auto режет и по вертикали: без полей зона фишки 44 (::after) и рамка фокуса ячейки срезаны по
   краю ленты. Поле — половина разницы зоны и капсулы (6 ≥ рамка 3 + отступ 2), вид в покое возвращает
   отрицательный отступ (финальное ревью плана 4, I1, 2026-10-08). */
.к-гардероб .лента{--поле:calc((var(--размер-нажатие) - var(--отступ-32)) / 2);display:flex;align-items:center;
  gap:var(--отступ-8);margin:calc(var(--поле) * -1);padding:var(--поле);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.к-гардероб .лента form{display:contents}
/* Гардероб героя со слоями (DK-294, слово Марии 2026-10-12): ряды по месту, подпись над лентой. */
.к-гардероб[data-вид="ряды"] .ряд{display:grid;gap:var(--отступ-8)}
.к-гардероб[data-вид="ряды"] .ряд h3{margin:0}
/* Купленная вещь без слоя на этом герое: видна, но приглушена и не нажимается. */
.к-ячейка-вещи[data-недоступна]{filter:grayscale(1);opacity:var(--прозрачность-дудл)}
/* Фишка-фильтр — ссылкой; выбранная — childwash и child (60-komp-osnova.js:187-195). */
a.к-чип{display:inline-flex;align-items:center;flex:none;text-decoration:none;white-space:nowrap}
.к-чип[aria-current]{background:var(--childwash);box-shadow:none;color:var(--child)}
/* Значок раздела слева — ink 24 (61-komp-kartochki.js:104-116). */
.к-раздел > .к-значок{color:var(--ink)}
.к-раздел .заголовок{flex:1}

/* Портрет — кадр из полной фигуры (62-komp-klass.js:13-19): рисунок выше рамки в 1/доля раз (видна верхняя доля),
   середина по ширине — центр головы (ГОЛОВА, 62:10-12), но не дальше краёв рисунка; уже рамки — во всю ширину
   (min-width + object-fit). Числа — геометрия рисунков макета, как кадр вещи. Без единиц контейнера — по центру. */
.к-портрет{position:relative;display:block;overflow:hidden;container-type:inline-size;border-radius:var(--радиус-плашка);
  background:var(--plate);--голова:.5;--доля:1}
.к-портрет img{position:absolute;top:0;left:50%;display:block;width:auto;min-width:100%;max-width:none;height:calc(100% / var(--доля));
  object-fit:cover;object-position:50% 0;transform:translateX(-50%)}
@supports (width:1cqw){.к-портрет img{left:0;transform:translateX(calc(-1 * clamp(0px, var(--голова) * 100% - 50cqw, 100% - 100cqw)))}}
.к-портрет[data-доля="15"]{--доля:.15}
.к-портрет[data-доля="24"]{--доля:.24}
.к-портрет[data-доля="30"]{--доля:.3}
.к-портрет[data-доля="40"]{--доля:.4}
.к-портрет[data-кадр="nika"]{--голова:.531}
.к-портрет[data-кадр="timur"]{--голова:.465}
.к-портрет[data-кадр="lera"]{--голова:.53}
.к-портрет[data-кадр="mark"]{--голова:.481}
.к-портрет[data-кадр="sonia"]{--голова:.511}
.к-портрет[data-кадр="egor"]{--голова:.471}
.к-портрет[data-кадр="amina"]{--голова:.484}
.к-портрет[data-кадр="amir"]{--голова:.458}
.к-портрет[data-кадр="nika-2"]{--голова:.527}
.к-портрет[data-кадр="timur-2"]{--голова:.46}
.к-портрет[data-кадр="lera-2"]{--голова:.479}
.к-портрет[data-кадр="mark-2"]{--голова:.483}
.к-портрет[data-кадр="sonia-2"]{--голова:.492}
.к-портрет[data-кадр="egor-2"]{--голова:.474}
.к-портрет[data-кадр="amina-2"]{--голова:.483}
.к-портрет[data-кадр="amir-2"]{--голова:.461}
/* Карточка персонажа (62-komp-klass.js:22-53): card + тень, радиус 16, поля 8, промежуток 8; портрет 112 (позвать — 96)
   на plate, радиус 8; лучший — рамка child 2 и узор корон за портретом (рамка 160x120 от левого верхнего угла);
   низ — строка 40: «Лучший друг» мелким child или кнопка 40 с полями 14, подпись «Текст/Мелкий» (74:28-36). */
.к-карточка-персонажа{display:grid;gap:var(--отступ-8);padding:var(--отступ-8);border-radius:var(--радиус-общий);
  background:var(--card);box-shadow:var(--тень-карточка) var(--тень);text-align:center}
.к-карточка-персонажа[data-вид="лучший"]{box-shadow:var(--тень-карточка) var(--тень),inset 0 0 0 var(--линия-метка) var(--child)}
.к-карточка-персонажа > .к-счёт{justify-self:start}
.к-карточка-персонажа .рамка{position:relative;display:block;height:var(--размер-портрет-класса);overflow:hidden;
  border-radius:var(--радиус-плашка);background:var(--plate)}
.к-карточка-персонажа[data-вид="позвать"] .рамка{height:var(--размер-портрет-зова)}
.к-карточка-персонажа .рамка .к-портрет{position:absolute;inset:0;background:none}
.к-карточка-персонажа .узор{position:absolute;left:0;top:0;width:calc(var(--отступ-32) * 5);height:calc(var(--отступ-24) * 5)}
.к-карточка-персонажа .действие{display:grid;place-items:center;min-height:var(--размер-кнопка-мал)}
.к-карточка-персонажа .к-кнопка{width:100%;padding-inline:calc(var(--отступ-12) + var(--линия-метка));
  font:500 var(--кегль-микро)/var(--строка-мелкая) var(--body)}
/* Лист персонажа (68-komp-listy.js:47-58): основа — общая с `.к-лист` (см. выше), здесь только своё: всё по центру,
   портрет 160x180, радиус 8. */
.к-лист-персонажа{justify-items:center;text-align:center}
.к-лист-персонажа > .к-портрет{width:var(--размер-портрет-листа);height:var(--размер-портрет-листа-в)}
.к-лист-персонажа .кнопки{justify-self:stretch}

/* Сводка навыка (74-ekran-klass.js:77-91): промежуток 8; очки — звёздочка 28, набранное, «из 1000», растяжка, плашка. */
.к-сводка-навыка{display:grid;gap:var(--отступ-8)}
.к-сводка-навыка .очки{display:flex;align-items:center;gap:var(--отступ-8)}
.к-сводка-навыка .к-плашка-класса{margin-left:auto}
/* Строка темы (62-komp-klass.js:55-76): поля 12/16, промежуток 8, радиус 16. Пройдена — card + тень, дорожка на plate;
   сейчас — childwash + тень, дорожка на card; впереди — plate без тени. Заголовок: тема — растяжка, очки, шеврон muted. */
.к-строка-темы{display:grid;gap:var(--отступ-8);padding:var(--отступ-12) var(--отступ-16);border-radius:var(--радиус-общий);
  background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
.к-строка-темы[data-вид="сейчас"]{background:var(--childwash)}
.к-строка-темы[data-вид="сейчас"] .дорожка{background:var(--card)}
.к-строка-темы[data-вид="впереди"]{background:var(--plate);box-shadow:none}
.к-строка-темы .заголовок-темы{display:flex;align-items:center;gap:var(--отступ-8)}
.к-строка-темы .заголовок-темы > .к-текст:first-child{flex:1;min-width:0}
.к-строка-темы .заголовок-темы > .к-значок{color:var(--muted)}

/* Карточка вещи (64-komp-magazin.js:9-27): card + тень, радиус 16, поля 8, промежуток 8; кадр 90 на plate, радиус 8,
   вещь 64; низ — монета, «Твоё» или «Надето»; надето — рамка child 2. Нажатие — как у кнопки. */
.к-карточка-вещи{display:grid;gap:var(--отступ-8);padding:var(--отступ-8);border-radius:var(--радиус-общий);background:var(--card);
  box-shadow:var(--тень-карточка) var(--тень);color:var(--ink);text-decoration:none}
a.к-карточка-вещи{-webkit-tap-highlight-color:transparent;transition:transform var(--длит-быстро) var(--кривая-обычная)}
a.к-карточка-вещи:active{transform:translateY(var(--сдвиг-нажатие))}
.к-карточка-вещи[data-состояние="надето"]{box-shadow:var(--тень-карточка) var(--тень),inset 0 0 0 var(--линия-метка) var(--child)}
.к-карточка-вещи .картинка{display:grid;place-items:center;height:var(--размер-кадр-вещи);border-radius:var(--радиус-плашка);background:var(--plate)}
.к-карточка-вещи .кадр{width:var(--отступ-64);height:var(--отступ-64)}
.к-карточка-вещи .цена{display:flex}
/* Подпись фигуры («на женскую фигуру») — вплотную под названием, промежуток 8 карточки съеден наполовину. */
.к-карточка-вещи > .к-текст[data-стиль="мелкий"]{margin-top:calc(var(--отступ-4) * -1)}
/* Лист вещи (64-komp-magazin.js:29-55): основа — общая с `.к-лист` (задача 6), своё — низ 32 (64:31), кадр 120, радиус 16,
   вещь 96; колонка о вещи через 8; ряд друга через 12 — аватар 44 кругом. */
.к-лист-вещи{padding-bottom:calc(var(--отступ-32) + env(safe-area-inset-bottom,0px))}
.к-лист-вещи .вещь{display:flex;align-items:center;gap:var(--отступ-16)}
.к-лист-вещи .картинка{display:grid;place-items:center;flex:none;width:var(--размер-вещь-листа);height:var(--размер-вещь-листа);
  border-radius:var(--радиус-общий);background:var(--plate)}
.к-лист-вещи .кадр{width:var(--размер-рисунок-листа);height:var(--размер-рисунок-листа)}
.к-лист-вещи .о-вещи{display:grid;justify-items:start;gap:var(--отступ-8);min-width:0}
.к-лист-вещи .друг{display:flex;align-items:center;gap:var(--отступ-12)}
.к-лист-вещи .друг > .к-портрет{flex:none;width:var(--размер-аватар);height:var(--размер-аватар);border-radius:var(--радиус-полный)}

/* Ролик (63-komp-chat.js:87-124): plate, радиус 16, поля 8/8/16/8, промежуток 12; «видео» — card, радиус 8, поля 12/16/16/16,
   промежуток 12, растёт; кадр — растёт, картинка/видео 9:16 по центру (cover); субтитры «Основной» по центру; время — 4, rule,
   радиус полный, просмотрено — заливка. «Описание» — колонка через 4, поля 0/8. Язычки — по бокам видео, по центру его высоты. */
.к-ролик{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:var(--отступ-12);
  padding:var(--отступ-8) var(--отступ-8) var(--отступ-16);border-radius:var(--радиус-общий);background:var(--plate);scroll-snap-align:start}
/* Слово Марии 2026-10-10: весь блок «видео» — сам ролик, поверх — только «Звук — по нажатию» (справа сверху, на
   капсуле card — читается на любом кадре). Заголовок, строка субтитров и полоса времени из блока сняты. */
.к-ролик .видео{grid-area:1/1;position:relative;min-height:0;border-radius:var(--радиус-плашка);background:var(--card);overflow:hidden}
.к-ролик .видео > .к-текст[data-стиль="мелкий"]{position:absolute;z-index:1;top:var(--отступ-12);right:var(--отступ-12);
  padding:0 var(--отступ-8);border-radius:var(--радиус-полный);background:var(--card);pointer-events:none}
/* «окно», а не «кадр»: `.кадр` — глобальная вырезка вещи гардероба (абсолютная картинка). */
/* Кадр — во весь блок «видео» (окно стоит абсолютно, inset 0): видео и постер на всю его ширину и высоту. */
.к-ролик .окно{position:absolute;inset:0}
.к-ролик .окно video,.к-ролик .окно img{display:block;width:100%;height:100%;object-fit:cover}
/* Видео целиком, без обрезки (слово Марии 2026-10-09: её ролики 3:4) — поля кадра закрашены card, как сам блок.
   Нажатие (roliki.js): по немому играющему — звук, дальше — пауза и пуск. Фокус с клавиатуры — рамкой
   child (outline, а не inset-тень: тень видео закрыло бы). */
.к-ролик .окно video{object-fit:contain;background:var(--card);cursor:pointer}
.к-ролик .окно video:focus-visible{outline:var(--линия-фокус) solid var(--child);outline-offset:calc(var(--линия-фокус) * -1)}
.к-ролик .описание{grid-area:2/1;display:grid;gap:var(--отступ-4);padding:0 var(--отступ-8)}
.к-ролик .описание h3{margin:0}
/* Язычок (63-komp-chat.js:126-136): 28x136; учебник — childwash, правые углы 16, подпись +90°; избранное — подсветка,
   левые углы 16, подпись −90°, сердце 16 в (6,8). Не по теме: светлая палитра и ink светлой. Стоит в той же клетке сетки
   ролика, что «видео», — по центру его высоты (76:25-27); по x — у края экрана (x 0 и W − 28): ролик стоит на 8 от края,
   его поле 8, отсюда сдвиг −16. */
.к-язычок{position:relative;z-index:1;grid-area:1/1;align-self:center;display:grid;place-items:center;width:var(--размер-язычок);
  height:var(--размер-язычок-в);padding:0;border:0;color:var(--св-ink);font:500 var(--кегль-микро)/var(--строка-мелкая) var(--body);
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.к-язычок[data-сторона="учебник"]{justify-self:start;margin-left:calc(var(--отступ-16) * -1);border-radius:0 var(--радиус-общий) var(--радиус-общий) 0;background:var(--св-childwash)}
.к-язычок[data-сторона="избранное"]{justify-self:end;margin-right:calc(var(--отступ-16) * -1);border-radius:var(--радиус-общий) 0 0 var(--радиус-общий);background:var(--св-подсветка)}
/* Подпись — по центру язычка абсолютно: у <button> сетка выравнивала её, шире 28, к началу, и «Избранное»
   уезжала за край экрана (проверено в браузере 2026-10-09). */
.к-язычок .подпись{position:absolute;left:50%;top:50%;white-space:nowrap;transform:translate(-50%,-50%) rotate(90deg)}
.к-язычок[data-сторона="избранное"] .подпись{transform:translate(-50%,-50%) rotate(-90deg)}
.к-язычок .к-дудл{position:absolute;left:calc(var(--отступ-4) + var(--линия-метка));top:var(--отступ-8);color:var(--св-заливка)}
.к-ролик form{display:contents}

/* Ползунок (кадр r93, урок 01): подпись слева Текст/Подпись ink в колонке 100, дорожка — остаток ширины, значение справа
   Текст/Кнопка ink шириной 24; высота 44 — она же зона нажатия, промежуток 12. Дорожка — полоса 8 card, заполнение child
   до ручки (r90), ручка 20 card с волоском rule, без тени. Полоса card, а не plate: на плашке plate правее ручки дорожки
   не было бы видно (ревью DK-319). Заполнение — scaleX по data-значение (style= нельзя). touch-action:pan-y у самого
   ползунка — горизонтальный жест на телефоне не уходит ленте уроков, а вертикальный прокручивает урок (§4). */
.к-ползунок{--ручка:calc(var(--отступ-16) + var(--отступ-4));display:grid;
  grid-template-columns:calc(var(--отступ-48) * 2 + var(--отступ-4)) 1fr var(--отступ-24);
  align-items:center;gap:var(--отступ-12);min-height:var(--размер-нажатие)}
.к-ползунок .значение{color:var(--ink);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);text-align:right;
  font-variant-numeric:tabular-nums}
.к-ползунок .шкала{position:relative;display:block;height:var(--ручка)}
.к-ползунок .заполнено{position:absolute;inset:calc((var(--ручка) - var(--отступ-8)) / 2) 0;overflow:hidden;
  border-radius:var(--радиус-полный);background:var(--card)}
.к-ползунок .заполнено::before{content:"";position:absolute;inset:0;background:var(--child);transform-origin:0 50%;transform:scaleX(0)}
.к-ползунок[data-значение="0"] .заполнено::before{transform:scaleX(0)}
.к-ползунок[data-значение="1"] .заполнено::before{transform:scaleX(.1)}
.к-ползунок[data-значение="2"] .заполнено::before{transform:scaleX(.2)}
.к-ползунок[data-значение="3"] .заполнено::before{transform:scaleX(.3)}
.к-ползунок[data-значение="4"] .заполнено::before{transform:scaleX(.4)}
.к-ползунок[data-значение="5"] .заполнено::before{transform:scaleX(.5)}
.к-ползунок[data-значение="6"] .заполнено::before{transform:scaleX(.6)}
.к-ползунок[data-значение="7"] .заполнено::before{transform:scaleX(.7)}
.к-ползунок[data-значение="8"] .заполнено::before{transform:scaleX(.8)}
.к-ползунок[data-значение="9"] .заполнено::before{transform:scaleX(.9)}
.к-ползунок[data-значение="10"] .заполнено::before{transform:scaleX(1)}
.к-ползунок input{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;-webkit-appearance:none;appearance:none;
  cursor:pointer;touch-action:pan-y}
.к-ползунок input:focus-visible{outline:none}
/* Ручка: у WebKit и Gecko свои псевдоэлементы — в одном списке селекторов чужой отменил бы всё правило. */
.к-ползунок input::-webkit-slider-runnable-track{height:var(--ручка);border:0;background:none}
.к-ползунок input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:var(--ручка);height:var(--ручка);
  border:var(--линия-тонкая) solid var(--rule);border-radius:var(--радиус-полный);background:var(--card)}
.к-ползунок input:focus-visible::-webkit-slider-thumb{border:var(--линия-фокус) solid var(--child)}
.к-ползунок input::-moz-range-track{height:var(--ручка);border:0;background:none}
.к-ползунок input::-moz-range-thumb{box-sizing:border-box;width:var(--ручка);height:var(--ручка);
  border:var(--линия-тонкая) solid var(--rule);border-radius:var(--радиус-полный);background:var(--card)}
.к-ползунок input:focus-visible::-moz-range-thumb{border:var(--линия-фокус) solid var(--child)}
/* Интерактив среднего — как в уроке 01 (кадр r93, 69-komp-uchebnik.js:64-118; DK-341 §5). Сцена plate (радиус плашки,
   поля 12/8, шаг 12): пояснение, колонки «До» и «После» рядом через 16 (уже 360 — «До» над «После», screens.css),
   формула по центру, строка «Сумма · Среднее»; ниже ползунки, заметка и «Посчитать» (только без скрипта).
   Колонка: заголовок по центру, три столбика 32 через 24, над столбиком значение Текст/Метка ink, под основанием
   (волосок rule) имя Текст/Мелкий muted. «До» — child, «После» — подсветка, верх скруглён на половину радиуса плашки.
   Ряд — в рост десяти: ползунки ниже не прыгают. Высота — data-высота 0…30 в третях единицы (единица — 12): столбик
   высотой десяти единиц сжат scaleY(N/30) от основания, значение поднято translateY на ту же высоту — по 31 правилу
   на каждое (style= нельзя). Движения нет: столбик меняется сразу. */
/* Колонка сетки — minmax(0, 1fr): иначе картинка формулы шире сцены (на 375 — 317 при сцене 279) раздвинула бы
   сетку по своей ширине, а не ужалась по max-width (найдено на снимке 375, задача 15). */
.к-интерактив-среднего{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--отступ-12);margin:0}
/* Высоту формулы над ползунками докручивает srednee.js; своя подстройка прокрутки браузера выключена у слайда
   урока (.учебник-лента .слайд, screens.css): прокручивается он, а не страница (DK-341 §4). */
.к-интерактив-среднего .сцена{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--отступ-12);justify-items:center;
  padding:var(--отступ-12) var(--отступ-8);
  border-radius:var(--радиус-плашка);background:var(--plate)}
.к-интерактив-среднего .сцена > .к-текст{justify-self:stretch}
/* Колонки — во всю ширину сцены (justify-items:center сцены сжал бы их по содержимому и слепил столбики). */
.к-интерактив-среднего .колонки{display:flex;justify-content:center;gap:var(--отступ-16);justify-self:stretch}
.к-интерактив-среднего .колонка{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:var(--отступ-8);min-width:0}
.к-интерактив-среднего .колонка > .к-текст{margin:0;text-align:center}
/* Ряд — 32 × 3 через 24 по центру колонки (кадр 69-komp-uchebnik.js:72-74): на 375 ряд 144 шире колонки 139,5
   на 2 с каждой стороны — уходит в промежуток колонок, как в кадре; имена «Среднее» через шаг 56 не касаются. */
.к-интерактив-среднего .столбики,.к-интерактив-среднего .имена{display:flex;justify-content:center;gap:var(--отступ-24)}
.к-интерактив-среднего .столбики{align-items:flex-end;height:calc(var(--отступ-12) * 10 + var(--строка-мелкая) + var(--отступ-4));
  border-bottom:var(--линия-тонкая) solid var(--rule)}
.к-интерактив-среднего .столбик{position:relative;display:block;flex:0 0 var(--отступ-32);height:100%}
.к-интерактив-среднего .столб{position:absolute;inset:auto 0 0;height:calc(var(--отступ-12) * 10);transform-origin:50% 100%;
  border-radius:calc(var(--радиус-плашка) / 2) calc(var(--радиус-плашка) / 2) 0 0;background:var(--child);transform:scaleY(0)}
.к-интерактив-среднего [data-колонка="после"] .столб{background:var(--подсветка)}
.к-интерактив-среднего .столбик > .к-текст{position:absolute;inset:auto 0 var(--отступ-4);text-align:center;white-space:nowrap}
.к-интерактив-среднего .столбик[data-высота="0"] .столб{transform:scaleY(0)}
.к-интерактив-среднего .столбик[data-высота="1"] .столб{transform:scaleY(0.0333)}
.к-интерактив-среднего .столбик[data-высота="2"] .столб{transform:scaleY(0.0667)}
.к-интерактив-среднего .столбик[data-высота="3"] .столб{transform:scaleY(0.1)}
.к-интерактив-среднего .столбик[data-высота="4"] .столб{transform:scaleY(0.1333)}
.к-интерактив-среднего .столбик[data-высота="5"] .столб{transform:scaleY(0.1667)}
.к-интерактив-среднего .столбик[data-высота="6"] .столб{transform:scaleY(0.2)}
.к-интерактив-среднего .столбик[data-высота="7"] .столб{transform:scaleY(0.2333)}
.к-интерактив-среднего .столбик[data-высота="8"] .столб{transform:scaleY(0.2667)}
.к-интерактив-среднего .столбик[data-высота="9"] .столб{transform:scaleY(0.3)}
.к-интерактив-среднего .столбик[data-высота="10"] .столб{transform:scaleY(0.3333)}
.к-интерактив-среднего .столбик[data-высота="11"] .столб{transform:scaleY(0.3667)}
.к-интерактив-среднего .столбик[data-высота="12"] .столб{transform:scaleY(0.4)}
.к-интерактив-среднего .столбик[data-высота="13"] .столб{transform:scaleY(0.4333)}
.к-интерактив-среднего .столбик[data-высота="14"] .столб{transform:scaleY(0.4667)}
.к-интерактив-среднего .столбик[data-высота="15"] .столб{transform:scaleY(0.5)}
.к-интерактив-среднего .столбик[data-высота="16"] .столб{transform:scaleY(0.5333)}
.к-интерактив-среднего .столбик[data-высота="17"] .столб{transform:scaleY(0.5667)}
.к-интерактив-среднего .столбик[data-высота="18"] .столб{transform:scaleY(0.6)}
.к-интерактив-среднего .столбик[data-высота="19"] .столб{transform:scaleY(0.6333)}
.к-интерактив-среднего .столбик[data-высота="20"] .столб{transform:scaleY(0.6667)}
.к-интерактив-среднего .столбик[data-высота="21"] .столб{transform:scaleY(0.7)}
.к-интерактив-среднего .столбик[data-высота="22"] .столб{transform:scaleY(0.7333)}
.к-интерактив-среднего .столбик[data-высота="23"] .столб{transform:scaleY(0.7667)}
.к-интерактив-среднего .столбик[data-высота="24"] .столб{transform:scaleY(0.8)}
.к-интерактив-среднего .столбик[data-высота="25"] .столб{transform:scaleY(0.8333)}
.к-интерактив-среднего .столбик[data-высота="26"] .столб{transform:scaleY(0.8667)}
.к-интерактив-среднего .столбик[data-высота="27"] .столб{transform:scaleY(0.9)}
.к-интерактив-среднего .столбик[data-высота="28"] .столб{transform:scaleY(0.9333)}
.к-интерактив-среднего .столбик[data-высота="29"] .столб{transform:scaleY(0.9667)}
.к-интерактив-среднего .столбик[data-высота="30"] .столб{transform:scaleY(1)}
.к-интерактив-среднего .столбик[data-высота="0"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -0 / 3))}
.к-интерактив-среднего .столбик[data-высота="1"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -1 / 3))}
.к-интерактив-среднего .столбик[data-высота="2"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -2 / 3))}
.к-интерактив-среднего .столбик[data-высота="3"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -3 / 3))}
.к-интерактив-среднего .столбик[data-высота="4"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -4 / 3))}
.к-интерактив-среднего .столбик[data-высота="5"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -5 / 3))}
.к-интерактив-среднего .столбик[data-высота="6"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -6 / 3))}
.к-интерактив-среднего .столбик[data-высота="7"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -7 / 3))}
.к-интерактив-среднего .столбик[data-высота="8"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -8 / 3))}
.к-интерактив-среднего .столбик[data-высота="9"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -9 / 3))}
.к-интерактив-среднего .столбик[data-высота="10"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -10 / 3))}
.к-интерактив-среднего .столбик[data-высота="11"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -11 / 3))}
.к-интерактив-среднего .столбик[data-высота="12"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -12 / 3))}
.к-интерактив-среднего .столбик[data-высота="13"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -13 / 3))}
.к-интерактив-среднего .столбик[data-высота="14"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -14 / 3))}
.к-интерактив-среднего .столбик[data-высота="15"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -15 / 3))}
.к-интерактив-среднего .столбик[data-высота="16"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -16 / 3))}
.к-интерактив-среднего .столбик[data-высота="17"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -17 / 3))}
.к-интерактив-среднего .столбик[data-высота="18"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -18 / 3))}
.к-интерактив-среднего .столбик[data-высота="19"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -19 / 3))}
.к-интерактив-среднего .столбик[data-высота="20"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -20 / 3))}
.к-интерактив-среднего .столбик[data-высота="21"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -21 / 3))}
.к-интерактив-среднего .столбик[data-высота="22"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -22 / 3))}
.к-интерактив-среднего .столбик[data-высота="23"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -23 / 3))}
.к-интерактив-среднего .столбик[data-высота="24"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -24 / 3))}
.к-интерактив-среднего .столбик[data-высота="25"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -25 / 3))}
.к-интерактив-среднего .столбик[data-высота="26"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -26 / 3))}
.к-интерактив-среднего .столбик[data-высота="27"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -27 / 3))}
.к-интерактив-среднего .столбик[data-высота="28"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -28 / 3))}
.к-интерактив-среднего .столбик[data-высота="29"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -29 / 3))}
.к-интерактив-среднего .столбик[data-высота="30"] > .к-текст{transform:translateY(calc(var(--отступ-12) * -30 / 3))}
/* Имя под столбиком — по его центру и шире него («Среднее» ~50 при столбике 32 и шаге 56 — не касаются, кадр r93). */
.к-интерактив-среднего .имена > .к-текст{display:flex;flex:0 0 var(--отступ-32);justify-content:center;min-width:0;
  white-space:nowrap}
/* Формула — картинка сервера (mathrender рисует на белой бумаге): листок со скруглением плашки. */
.к-интерактив-среднего .формула{display:block;max-width:100%;height:auto;border-radius:var(--радиус-плашка)}
/* Новую формулу не удалось получить и со второй попытки — прежняя приглушена: она уже не про эти столбики. */
.к-интерактив-среднего .формула[data-устарела]{opacity:var(--прозрачность-дудл)}
.к-интерактив-среднего .сумма > .к-текст{text-align:center}
.к-интерактив-среднего .ползунки{display:grid}
/* Ползунок 1…12 (r97, «Шкала» 1…12; уроки 18–20): заполнение — scaleX((N-1)/11), по правилу на значение. */
.к-ползунок[data-шкала="1-12"][data-значение="1"] .заполнено::before{transform:scaleX(0.0000)}
.к-ползунок[data-шкала="1-12"][data-значение="2"] .заполнено::before{transform:scaleX(0.0909)}
.к-ползунок[data-шкала="1-12"][data-значение="3"] .заполнено::before{transform:scaleX(0.1818)}
.к-ползунок[data-шкала="1-12"][data-значение="4"] .заполнено::before{transform:scaleX(0.2727)}
.к-ползунок[data-шкала="1-12"][data-значение="5"] .заполнено::before{transform:scaleX(0.3636)}
.к-ползунок[data-шкала="1-12"][data-значение="6"] .заполнено::before{transform:scaleX(0.4545)}
.к-ползунок[data-шкала="1-12"][data-значение="7"] .заполнено::before{transform:scaleX(0.5455)}
.к-ползунок[data-шкала="1-12"][data-значение="8"] .заполнено::before{transform:scaleX(0.6364)}
.к-ползунок[data-шкала="1-12"][data-значение="9"] .заполнено::before{transform:scaleX(0.7273)}
.к-ползунок[data-шкала="1-12"][data-значение="10"] .заполнено::before{transform:scaleX(0.8182)}
.к-ползунок[data-шкала="1-12"][data-значение="11"] .заполнено::before{transform:scaleX(0.9091)}
.к-ползунок[data-шкала="1-12"][data-значение="12"] .заполнено::before{transform:scaleX(1.0000)}
/* Универсальная заливка ползунка: целый процент ставит ui.py и обновляет poprobuj.js. */
.к-ползунок[data-заливка="0"] .заполнено::before{transform:scaleX(0.00)}
.к-ползунок[data-заливка="1"] .заполнено::before{transform:scaleX(0.01)}
.к-ползунок[data-заливка="2"] .заполнено::before{transform:scaleX(0.02)}
.к-ползунок[data-заливка="3"] .заполнено::before{transform:scaleX(0.03)}
.к-ползунок[data-заливка="4"] .заполнено::before{transform:scaleX(0.04)}
.к-ползунок[data-заливка="5"] .заполнено::before{transform:scaleX(0.05)}
.к-ползунок[data-заливка="6"] .заполнено::before{transform:scaleX(0.06)}
.к-ползунок[data-заливка="7"] .заполнено::before{transform:scaleX(0.07)}
.к-ползунок[data-заливка="8"] .заполнено::before{transform:scaleX(0.08)}
.к-ползунок[data-заливка="9"] .заполнено::before{transform:scaleX(0.09)}
.к-ползунок[data-заливка="10"] .заполнено::before{transform:scaleX(0.10)}
.к-ползунок[data-заливка="11"] .заполнено::before{transform:scaleX(0.11)}
.к-ползунок[data-заливка="12"] .заполнено::before{transform:scaleX(0.12)}
.к-ползунок[data-заливка="13"] .заполнено::before{transform:scaleX(0.13)}
.к-ползунок[data-заливка="14"] .заполнено::before{transform:scaleX(0.14)}
.к-ползунок[data-заливка="15"] .заполнено::before{transform:scaleX(0.15)}
.к-ползунок[data-заливка="16"] .заполнено::before{transform:scaleX(0.16)}
.к-ползунок[data-заливка="17"] .заполнено::before{transform:scaleX(0.17)}
.к-ползунок[data-заливка="18"] .заполнено::before{transform:scaleX(0.18)}
.к-ползунок[data-заливка="19"] .заполнено::before{transform:scaleX(0.19)}
.к-ползунок[data-заливка="20"] .заполнено::before{transform:scaleX(0.20)}
.к-ползунок[data-заливка="21"] .заполнено::before{transform:scaleX(0.21)}
.к-ползунок[data-заливка="22"] .заполнено::before{transform:scaleX(0.22)}
.к-ползунок[data-заливка="23"] .заполнено::before{transform:scaleX(0.23)}
.к-ползунок[data-заливка="24"] .заполнено::before{transform:scaleX(0.24)}
.к-ползунок[data-заливка="25"] .заполнено::before{transform:scaleX(0.25)}
.к-ползунок[data-заливка="26"] .заполнено::before{transform:scaleX(0.26)}
.к-ползунок[data-заливка="27"] .заполнено::before{transform:scaleX(0.27)}
.к-ползунок[data-заливка="28"] .заполнено::before{transform:scaleX(0.28)}
.к-ползунок[data-заливка="29"] .заполнено::before{transform:scaleX(0.29)}
.к-ползунок[data-заливка="30"] .заполнено::before{transform:scaleX(0.30)}
.к-ползунок[data-заливка="31"] .заполнено::before{transform:scaleX(0.31)}
.к-ползунок[data-заливка="32"] .заполнено::before{transform:scaleX(0.32)}
.к-ползунок[data-заливка="33"] .заполнено::before{transform:scaleX(0.33)}
.к-ползунок[data-заливка="34"] .заполнено::before{transform:scaleX(0.34)}
.к-ползунок[data-заливка="35"] .заполнено::before{transform:scaleX(0.35)}
.к-ползунок[data-заливка="36"] .заполнено::before{transform:scaleX(0.36)}
.к-ползунок[data-заливка="37"] .заполнено::before{transform:scaleX(0.37)}
.к-ползунок[data-заливка="38"] .заполнено::before{transform:scaleX(0.38)}
.к-ползунок[data-заливка="39"] .заполнено::before{transform:scaleX(0.39)}
.к-ползунок[data-заливка="40"] .заполнено::before{transform:scaleX(0.40)}
.к-ползунок[data-заливка="41"] .заполнено::before{transform:scaleX(0.41)}
.к-ползунок[data-заливка="42"] .заполнено::before{transform:scaleX(0.42)}
.к-ползунок[data-заливка="43"] .заполнено::before{transform:scaleX(0.43)}
.к-ползунок[data-заливка="44"] .заполнено::before{transform:scaleX(0.44)}
.к-ползунок[data-заливка="45"] .заполнено::before{transform:scaleX(0.45)}
.к-ползунок[data-заливка="46"] .заполнено::before{transform:scaleX(0.46)}
.к-ползунок[data-заливка="47"] .заполнено::before{transform:scaleX(0.47)}
.к-ползунок[data-заливка="48"] .заполнено::before{transform:scaleX(0.48)}
.к-ползунок[data-заливка="49"] .заполнено::before{transform:scaleX(0.49)}
.к-ползунок[data-заливка="50"] .заполнено::before{transform:scaleX(0.50)}
.к-ползунок[data-заливка="51"] .заполнено::before{transform:scaleX(0.51)}
.к-ползунок[data-заливка="52"] .заполнено::before{transform:scaleX(0.52)}
.к-ползунок[data-заливка="53"] .заполнено::before{transform:scaleX(0.53)}
.к-ползунок[data-заливка="54"] .заполнено::before{transform:scaleX(0.54)}
.к-ползунок[data-заливка="55"] .заполнено::before{transform:scaleX(0.55)}
.к-ползунок[data-заливка="56"] .заполнено::before{transform:scaleX(0.56)}
.к-ползунок[data-заливка="57"] .заполнено::before{transform:scaleX(0.57)}
.к-ползунок[data-заливка="58"] .заполнено::before{transform:scaleX(0.58)}
.к-ползунок[data-заливка="59"] .заполнено::before{transform:scaleX(0.59)}
.к-ползунок[data-заливка="60"] .заполнено::before{transform:scaleX(0.60)}
.к-ползунок[data-заливка="61"] .заполнено::before{transform:scaleX(0.61)}
.к-ползунок[data-заливка="62"] .заполнено::before{transform:scaleX(0.62)}
.к-ползунок[data-заливка="63"] .заполнено::before{transform:scaleX(0.63)}
.к-ползунок[data-заливка="64"] .заполнено::before{transform:scaleX(0.64)}
.к-ползунок[data-заливка="65"] .заполнено::before{transform:scaleX(0.65)}
.к-ползунок[data-заливка="66"] .заполнено::before{transform:scaleX(0.66)}
.к-ползунок[data-заливка="67"] .заполнено::before{transform:scaleX(0.67)}
.к-ползунок[data-заливка="68"] .заполнено::before{transform:scaleX(0.68)}
.к-ползунок[data-заливка="69"] .заполнено::before{transform:scaleX(0.69)}
.к-ползунок[data-заливка="70"] .заполнено::before{transform:scaleX(0.70)}
.к-ползунок[data-заливка="71"] .заполнено::before{transform:scaleX(0.71)}
.к-ползунок[data-заливка="72"] .заполнено::before{transform:scaleX(0.72)}
.к-ползунок[data-заливка="73"] .заполнено::before{transform:scaleX(0.73)}
.к-ползунок[data-заливка="74"] .заполнено::before{transform:scaleX(0.74)}
.к-ползунок[data-заливка="75"] .заполнено::before{transform:scaleX(0.75)}
.к-ползунок[data-заливка="76"] .заполнено::before{transform:scaleX(0.76)}
.к-ползунок[data-заливка="77"] .заполнено::before{transform:scaleX(0.77)}
.к-ползунок[data-заливка="78"] .заполнено::before{transform:scaleX(0.78)}
.к-ползунок[data-заливка="79"] .заполнено::before{transform:scaleX(0.79)}
.к-ползунок[data-заливка="80"] .заполнено::before{transform:scaleX(0.80)}
.к-ползунок[data-заливка="81"] .заполнено::before{transform:scaleX(0.81)}
.к-ползунок[data-заливка="82"] .заполнено::before{transform:scaleX(0.82)}
.к-ползунок[data-заливка="83"] .заполнено::before{transform:scaleX(0.83)}
.к-ползунок[data-заливка="84"] .заполнено::before{transform:scaleX(0.84)}
.к-ползунок[data-заливка="85"] .заполнено::before{transform:scaleX(0.85)}
.к-ползунок[data-заливка="86"] .заполнено::before{transform:scaleX(0.86)}
.к-ползунок[data-заливка="87"] .заполнено::before{transform:scaleX(0.87)}
.к-ползунок[data-заливка="88"] .заполнено::before{transform:scaleX(0.88)}
.к-ползунок[data-заливка="89"] .заполнено::before{transform:scaleX(0.89)}
.к-ползунок[data-заливка="90"] .заполнено::before{transform:scaleX(0.90)}
.к-ползунок[data-заливка="91"] .заполнено::before{transform:scaleX(0.91)}
.к-ползунок[data-заливка="92"] .заполнено::before{transform:scaleX(0.92)}
.к-ползунок[data-заливка="93"] .заполнено::before{transform:scaleX(0.93)}
.к-ползунок[data-заливка="94"] .заполнено::before{transform:scaleX(0.94)}
.к-ползунок[data-заливка="95"] .заполнено::before{transform:scaleX(0.95)}
.к-ползунок[data-заливка="96"] .заполнено::before{transform:scaleX(0.96)}
.к-ползунок[data-заливка="97"] .заполнено::before{transform:scaleX(0.97)}
.к-ползунок[data-заливка="98"] .заполнено::before{transform:scaleX(0.98)}
.к-ползунок[data-заливка="99"] .заполнено::before{transform:scaleX(0.99)}
.к-ползунок[data-заливка="100"] .заполнено::before{transform:scaleX(1.00)}
/* Переключатель интерактива (r97, 6c-komp-uchebnik3.js:79-105): plate, радиус плашки, поля 4, два сегмента поровну через 4;
   сегмент от 40 (кнопка-мал), поля 8/12, слова по центру с переносом. Выбран — заливка и Текст/Кнопка кн-текст; иначе —
   Текст/Переключатель muted. Радио — прозрачно поверх сегмента: фокус и стрелки остаются, рамку фокуса рисует общее
   правило screens.css вокруг сегмента. Рамки fieldset нет. */
.к-переключатель-интерактива{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--отступ-4);margin:0;
  padding:var(--отступ-4);border:0;border-radius:var(--радиус-плашка);background:var(--plate);min-width:0}
.к-переключатель-интерактива label{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:var(--размер-кнопка-мал);padding:var(--отступ-8) var(--отступ-12);border-radius:var(--радиус-плашка);
  text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.к-переключатель-интерактива input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.к-переключатель-интерактива label:has(:checked){background:var(--заливка)}
.к-переключатель-интерактива label:has(:checked) > .к-текст{color:var(--кн-текст)}
/* Без :has — по data-выбран: его ставит сервер, а скрипт держит в ладу с радио. Только там, где :has нет: без
   скрипта data-выбран не следит за щелчком, и с :has залились бы оба сегмента. */
@supports not selector(:has(*)){
  .к-переключатель-интерактива label[data-выбран]{background:var(--заливка)}
  .к-переключатель-интерактива label[data-выбран] > .к-текст{color:var(--кн-текст)}
}
/* Кружки (r97): плитка тона — бирюзовые childwash, жёлтые подсветка; волосок child, радиус плашки, поля 12;
   кружки ink 8 через 4, в ряд с переносом. Лишние до 12 — hidden. */
.к-кружки{display:flex;flex-wrap:wrap;align-self:flex-start;gap:var(--отступ-4);padding:var(--отступ-12);
  border:var(--линия-тонкая) solid var(--child);border-radius:var(--радиус-плашка);background:var(--childwash)}
.к-кружки[data-тон="жёлтые"]{background:var(--подсветка)}
.к-кружки .точка{display:block;width:var(--размер-знак);height:var(--размер-знак);border-radius:var(--радиус-полный);
  background:var(--ink)}
.к-кружки .точка[hidden]{display:none}
/* Интерактивы уроков 18–20 (r97, 6c-komp-uchebnik3.js:123-196): всё в столбик через 12. Группа — поля 12, шаг 8, радиус
   плашки, полоса слева линия/выбор: бирюзовая — wash и child, жёлтая — подсветка 30 % и подсветка (как метка статуса).
   Итог — заметка («Важно» обычная, шаг 8), формула в ней по центру; строка «Крайние:» — подпись и формула рядом,
   по центру, через 8; строка расчёта урока 20 — Текст/Раздел по центру. Картинки не шире карточки. */
.к-интерактив-отношения,.к-интерактив-пропорции,.к-интерактив-зависимости{display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--отступ-12);margin:0}
.к-интерактив-отношения .ползунки{display:grid}
:is(.к-интерактив-отношения,.к-интерактив-пропорции,.к-интерактив-зависимости) .группа{display:flex;flex-direction:column;
  gap:var(--отступ-8);padding:var(--отступ-12);border-left:var(--линия-метка) solid var(--child);border-radius:var(--радиус-плашка);
  background:var(--wash)}
:is(.к-интерактив-отношения,.к-интерактив-пропорции,.к-интерактив-зависимости) .группа[data-тон="жёлтая"]{
  border-left-color:var(--подсветка);background:color-mix(in srgb,var(--подсветка) 30%,transparent)}
:is(.к-интерактив-отношения,.к-интерактив-пропорции,.к-интерактив-зависимости) .к-текст{margin:0}
:is(.к-интерактив-отношения,.к-интерактив-пропорции) .формула{display:block;max-width:100%;height:auto;border-radius:var(--радиус-плашка)}
/* Ответа на текущие числа ещё нет (ждём или сеть подвела) — весь итог с формулами приглушён: вывод про прежние числа. */
:is(.к-интерактив-отношения,.к-интерактив-пропорции,.к-интерактив-зависимости)[data-устарело] :is(.итог,.формула){
  opacity:var(--прозрачность-дудл)}
/* Вердикт «Равны! / Пока не равны» про прежнее число не показываем вовсе — приглушения мало (решение
   координатора). data-устарело ставит только скрипт: страница без скрипта не затронута. */
.к-интерактив-пропорции[data-устарело] [data-итог]{display:none}
.к-интерактив-отношения .формула-итога{display:flex;justify-content:center;min-width:0}
.к-интерактив-пропорции .строка-формулы{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--отступ-8);min-width:0}
.к-интерактив-зависимости [data-часть="расчёт"]{text-align:center}
/* Круговая диаграмма урока 03: сервер отдаёт три пути, CSS берёт цвета темы. */
.к-интерактив-диаграммы{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--отступ-12);margin:0}
.к-диаграмма{display:block;width:100%;max-width:var(--размер-сцена);aspect-ratio:1;margin:auto;
  border-radius:var(--радиус-полный);background:var(--plate)}
.к-диаграмма path{stroke:var(--card);stroke-width:var(--линия-метка)}
.к-диаграмма path[data-сектор="0"]{fill:var(--child)}
.к-диаграмма path[data-сектор="1"]{fill:var(--подсветка)}
.к-диаграмма path[data-сектор="2"]{fill:var(--childwash)}
.к-интерактив-диаграммы .легенда{display:grid;gap:var(--отступ-8)}
.к-интерактив-диаграммы .строка-легенды{display:flex;align-items:center;gap:var(--отступ-8)}
.к-интерактив-диаграммы .строка-легенды .к-текст{margin:0}
.к-интерактив-диаграммы .метка{display:block;flex:none;width:var(--размер-точка);height:var(--размер-точка);
  border-radius:var(--радиус-плашка);background:var(--child)}
.к-интерактив-диаграммы .метка[data-категория="1"]{background:var(--подсветка)}
.к-интерактив-диаграммы .метка[data-категория="2"]{background:var(--childwash)}
.к-интерактив-диаграммы[data-устарело] .итог{opacity:var(--прозрачность-дудл)}
.к-интерактив-долей{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--отступ-12);margin:0}
.к-интерактив-долей .итог{display:grid;gap:var(--отступ-8);padding:var(--отступ-12);
  background:var(--childwash);border-radius:var(--радиус-плашка)}
.к-интерактив-долей .итог .к-текст{margin:0}
.к-интерактив-долей[data-устарело] .итог{opacity:var(--прозрачность-дудл)}
.к-полоска-долей{display:flex;gap:var(--отступ-4);height:32px;margin:var(--отступ-8) 0}
.к-полоска-долей [data-доля]{flex:1;min-width:0;border-radius:var(--радиус-плашка);background:var(--plate)}
.к-полоска-долей [data-доля][data-закрашено]{background:var(--child)}
.к-интерактив-дробного-выражения{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--отступ-12)}
.к-интерактив-дробного-выражения .итог{display:grid;gap:var(--отступ-12)}
.к-интерактив-дробного-выражения .итог .к-текст{margin:0}
.к-интерактив-дробного-выражения .выражение{display:flex;justify-content:center;min-width:0}
.к-интерактив-дробного-выражения .выражение img{max-width:100%;height:auto}
.к-интерактив-дробного-выражения .частное{display:flex;align-items:center;justify-content:center;gap:var(--отступ-8)}
.к-интерактив-дробного-выражения .частное img{max-width:100%;height:auto}
.к-интерактив-дробного-выражения .шаг{padding:var(--отступ-12);border-radius:var(--радиус-плашка)}
.к-интерактив-дробного-выражения .шаг.бирюзовый{background:var(--childwash)}
.к-интерактив-дробного-выражения .шаг.жёлтый{background:var(--подсветка)}
.к-интерактив-дробного-выражения[data-устарело] .итог{opacity:var(--прозрачность-дудл)}
.к-интерактив-процентов{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--отступ-12)}
.к-интерактив-процентов [data-режим-процентов]{display:grid;gap:var(--отступ-12);min-width:0}
.к-интерактив-процентов [data-режим-процентов][hidden]{display:none}
.к-интерактив-процентов [data-режим-процентов] > .к-текст{margin:0}
.к-интерактив-процентов img[data-формула="сетка"]{display:block;max-width:100%;height:auto;margin:auto}
.к-интерактив-процентов[data-устарело] .итог{opacity:var(--прозрачность-дудл)}
.к-сто-клеток{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;
  width:min(100%,290px);margin:var(--отступ-12) auto}
.к-сто-клеток [data-клетка]{aspect-ratio:1;border-radius:3px;background:var(--plate)}
.к-сто-клеток [data-клетка][data-закрашено]{background:var(--child)}
/* DK-341, волна 4: множители, НОД, НОК и общий знаменатель. */
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя){
  display:grid;gap:var(--отступ-12);min-width:0}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) > h3,
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) > p{margin:0}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) form{
  display:grid;gap:var(--отступ-12);min-width:0}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) .числовые-поля{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--отступ-8)}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) .числовое-поле{
  display:grid;gap:var(--отступ-4);min-width:0;color:var(--muted);font-size:var(--кегль-подпись)}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) input[type="number"],
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) select{
  width:100%;min-width:0;min-height:44px;padding:var(--отступ-8);border:var(--линия-тонкая) solid var(--line);
  border-radius:var(--радиус-плашка);background:var(--plate);color:var(--ink);font:inherit;font-size:var(--кегль-текст)}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) input:focus-visible,
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) select:focus-visible{
  outline:var(--линия-фокус) solid var(--child);outline-offset:2px}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) .пресеты,
.к-интерактив-множителей .выбор-делителя{display:flex;flex-wrap:wrap;gap:var(--отступ-8)}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) .вывод,
.к-интерактив-множителей .отклик{padding:var(--отступ-12);background:var(--childwash);
  border-radius:var(--радиус-плашка);font-size:var(--кегль-подпись)}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) .равенство{
  text-align:center;font-size:var(--кегль-раздел);font-weight:700;overflow-wrap:anywhere}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) .задача{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--отступ-8);padding:var(--отступ-12);
  background:var(--plate);border-radius:var(--радиус-плашка)}
:is(.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) .задача input{width:92px}
:is(.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя) .ответ-задачи{flex-basis:100%}
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя)[data-устарело] .вывод,
:is(.к-интерактив-множителей,.к-интерактив-нод,.к-интерактив-нок,.к-интерактив-общего-знаменателя)[data-устарело] .равенство{
  opacity:var(--прозрачность-дудл)}
.к-интерактив-множителей .модель-множителей{display:grid;justify-items:center;gap:var(--отступ-8);
  padding:var(--отступ-12);background:var(--plate);border-radius:var(--радиус-плашка);text-align:center}
.к-интерактив-множителей .модель-множителей > strong{font-size:var(--кегль-раздел)}
.к-интерактив-множителей .модель-множителей > span,.к-интерактив-множителей .пустые-множители{
  color:var(--muted);font-size:var(--кегль-подпись)}
.к-интерактив-множителей .множители{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--отступ-4)}
.к-интерактив-множителей .множитель,.к-интерактив-нод .множитель{display:inline-flex;align-items:center;gap:var(--отступ-4);
  padding:var(--отступ-4) var(--отступ-8);background:var(--plate);border:var(--линия-тонкая) solid var(--line);
  border-radius:var(--радиус-плашка)}
.к-интерактив-нод .ряд-множителей{display:grid;gap:var(--отступ-8);padding:var(--отступ-12);
  background:var(--plate);border-radius:var(--радиус-плашка)}
.к-интерактив-нод .ряд-множителей > div{display:flex;flex-wrap:wrap;gap:var(--отступ-4)}
.к-интерактив-нод .множитель[data-общий="да"]{color:var(--child);text-decoration:underline;font-weight:700}
.к-интерактив-нод .множитель small{font-size:var(--кегль-микро)}
.к-интерактив-нок .дорожки{display:grid;gap:var(--отступ-12)}
.к-интерактив-нок .ряд-кратных{padding:var(--отступ-12);background:var(--plate);border-radius:var(--радиус-плашка)}
.к-интерактив-нок .ряд-кратных h4{margin:0 0 var(--отступ-8)}
.к-интерактив-нок .ряд-кратных > div{display:flex;flex-wrap:wrap;gap:var(--отступ-4)}
.к-интерактив-нок .кратное{display:inline-grid;place-items:center;min-width:36px;min-height:36px;
  border:var(--линия-тонкая) solid var(--line);border-radius:var(--радиус-плашка);background:var(--card)}
.к-интерактив-нок .кратное[data-совпадение="да"]{background:var(--child);color:var(--card);font-weight:700}
.к-интерактив-общего-знаменателя .пара-дробей{display:grid;justify-items:start;gap:var(--отступ-8);
  min-width:0;padding:var(--отступ-12);background:var(--plate);border-radius:var(--радиус-плашка)}
.к-интерактив-общего-знаменателя .пара-дробей[data-тон="жёлтая"]{background:var(--путают)}
.к-интерактив-общего-знаменателя .дробь{display:inline-grid;text-align:center;min-width:28px;font-weight:700}
.к-интерактив-общего-знаменателя .дробь > span{display:grid}
.к-интерактив-общего-знаменателя .дробь > span > span:first-child{border-bottom:var(--линия-тонкая) solid currentColor}
.к-интерактив-общего-знаменателя .полоска{display:flex;gap:1px;width:100%;min-height:14px}
.к-интерактив-общего-знаменателя .полоска i{display:block;flex:1;min-width:1px;min-height:14px;
  border:var(--линия-тонкая) solid var(--line);background:var(--card)}
.к-интерактив-общего-знаменателя .пара-дробей[data-тон="бирюзовая"] .полоска i[data-закрашено]{background:var(--child)}
.к-интерактив-общего-знаменателя .пара-дробей[data-тон="жёлтая"] .полоска i[data-закрашено]{background:var(--подсветка)}
/* Карточка ролика (63-komp-chat.js:62-79): как карточка-строка, вместо круга — превью 54x96 plate, радиус 8, «играть» 32. */
.к-карточка-ролика{display:flex;align-items:center;gap:var(--отступ-12);padding:var(--отступ-12) var(--отступ-8) var(--отступ-12) var(--отступ-12);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-карточка-ролика:active{transform:translateY(var(--сдвиг-нажатие))}
.к-карточка-ролика .превью{display:grid;place-items:center;flex:none;width:var(--размер-превью);height:var(--размер-превью-в);
  border-radius:var(--радиус-плашка);background:var(--plate)}
.к-карточка-ролика .играть{position:relative;width:var(--отступ-32);height:var(--отступ-32);border-radius:var(--радиус-полный);background:var(--заливка)}
.к-карточка-ролика .играть::after{content:"";position:absolute;left:calc(50% - var(--отступ-4));top:calc(50% - var(--отступ-8) + var(--линия-метка));
  border-style:solid;border-width:calc(var(--отступ-8) - var(--линия-метка)) 0 calc(var(--отступ-8) - var(--линия-метка)) calc(var(--отступ-12) - var(--линия-тонкая));
  border-color:transparent transparent transparent var(--кн-текст)}
.к-карточка-ролика .слова{display:grid;gap:var(--отступ-4);flex:1;min-width:0}
.к-карточка-ролика > .к-значок{color:var(--muted)}
/* Строка учебника (63-komp-chat.js:47-60): как карточка-строка, вместо круга — обложка 36x48 (радиус 8) с корешком 6. */
.к-строка-учебника{display:flex;align-items:center;gap:var(--отступ-12);padding:var(--отступ-12) var(--отступ-8) var(--отступ-12) var(--отступ-12);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-строка-учебника:active{transform:translateY(var(--сдвиг-нажатие))}
.к-строка-учебника .обложка{position:relative;flex:none;width:var(--размер-обложка);height:var(--отступ-48);overflow:hidden;
  border-radius:var(--радиус-плашка);background:var(--childwash)}
.к-строка-учебника .корешок{position:absolute;inset:0 auto 0 0;width:var(--размер-корешок);background:var(--заливка)}
.к-строка-учебника[data-вид="ролики"] .обложка{background:var(--подсветка)}
.к-строка-учебника[data-вид="ролики"] .корешок{background:var(--монета)}
.к-строка-учебника[data-вид="тетрадь"] .обложка{background:var(--plate)}
.к-строка-учебника[data-вид="тетрадь"] .корешок{background:var(--rule)}
.к-строка-учебника .слова{display:grid;gap:var(--отступ-4);flex:1;min-width:0}
.к-строка-учебника > .к-значок{color:var(--muted)}
/* Запись правила (67-komp-tetrad.js:21-29): card + тень, радиус 16, поля 12/16, промежуток 8; низ — «на чём» тянется, «со второго раза» справа. */
.к-запись-правила,.к-пример-решения{display:grid;gap:var(--отступ-8);padding:var(--отступ-12) var(--отступ-16);border-radius:var(--радиус-общий);
  background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
.к-запись-правила > .к-текст,.к-пример-решения > .к-текст{margin:0}
.к-запись-правила .низ-записи{display:flex;align-items:flex-start;gap:var(--отступ-8)}
.к-запись-правила .низ-записи > :first-child{flex:1}
/* Пример решения (67-komp-tetrad.js:31-37): то же, промежуток 4. */
.к-пример-решения{gap:var(--отступ-4)}
/* Значок достижения (65-komp-nastrojki.js:109-126): колонка по центру через 4; круг 72 — получен childwash, впереди plate и
   волосок rule; дудл 40, впереди — прозрачность 0,35 в обеих темах. Без карточки, замков и рейтингов. */
.к-значок-достижения{display:grid;justify-items:center;align-content:start;gap:var(--отступ-4);text-align:center}
.к-значок-достижения .круг{display:grid;place-items:center;width:var(--размер-круг-достижения);height:var(--размер-круг-достижения);
  border-radius:var(--радиус-полный);background:var(--childwash)}
.к-значок-достижения[data-состояние="впереди"] .круг{background:var(--plate);box-shadow:inset 0 0 0 var(--линия-тонкая) var(--rule)}
.к-значок-достижения[data-состояние="впереди"] .к-дудл{opacity:.35}
.к-дудл[data-размер="40"]{width:var(--размер-рисунок-достижения);height:var(--размер-рисунок-достижения)}
/* Строка покупки (65-komp-nastrojki.js:82-107): card + тень, поля 12, промежуток 12; картинка 56 plate, вещь 44 или портрет
   на всю картинку (та же у «Просьбы взрослому», 6a:198-206); статус — плашка 4/8, радиус полный: ждёт — plate, купили — childwash. Без шеврона: только чтение. */
.к-строка-покупки{display:flex;align-items:center;gap:var(--отступ-12);padding:var(--отступ-12);border-radius:var(--радиус-общий);
  background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
:is(.к-строка-покупки,.к-просьба-взрослому) .картинка{display:grid;place-items:center;flex:none;width:var(--размер-аватар-бол);height:var(--размер-аватар-бол);
  overflow:hidden;border-radius:var(--радиус-плашка);background:var(--plate)}
:is(.к-строка-покупки,.к-просьба-взрослому) .кадр{width:calc(var(--отступ-48) - var(--отступ-4));height:calc(var(--отступ-48) - var(--отступ-4))}
:is(.к-строка-покупки,.к-просьба-взрослому) .к-портрет{width:100%;height:100%}
.к-строка-покупки .слова{display:grid;gap:var(--отступ-4);flex:1;min-width:0}
.к-строка-покупки .статус{display:inline-flex;flex:none;align-items:center;gap:var(--отступ-4);padding:var(--отступ-4) var(--отступ-8);
  border-radius:var(--радиус-полный);background:var(--plate);color:var(--muted)}
.к-строка-покупки[data-статус="купили"] .статус{background:var(--childwash)}
.к-строка-покупки .статус .к-значок{width:calc(var(--отступ-12) + var(--линия-метка));height:calc(var(--отступ-12) + var(--линия-метка))}

/* --- кабинет взрослого (DK-330, П1) --- */
/* Метка статуса (6a:261-279): таблетка — поля 4/12, радиус полный, слово «Текст/Кнопка». Тон — подложка и цвет
   слова: бирюза — wash и parent; жёлтая — подсветка 30 %, тёплая — hard 18 % (светлых этих тонов в банке нет),
   обе ink; нейтральная — plate и muted; без тона («Впереди») — рамка поле 1 и muted. */
.к-метка-статуса{display:inline-flex;align-self:flex-start;padding:var(--отступ-4) var(--отступ-12);border-radius:var(--радиус-полный);
  box-shadow:inset 0 0 0 var(--линия-тонкая) var(--поле);color:var(--muted);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-метка-статуса[data-тон]{box-shadow:none}
.к-метка-статуса[data-тон="бирюза"]{background:var(--wash);color:var(--parent)}
.к-метка-статуса[data-тон="жёлтая"]{background:color-mix(in srgb, var(--подсветка) 30%, transparent);color:var(--ink)}
.к-метка-статуса[data-тон="тёплая"]{background:color-mix(in srgb, var(--hard) 18%, transparent);color:var(--ink)}
.к-метка-статуса[data-тон="нейтральная"]{background:var(--plate)}
/* Панель вкладок взрослого (6a:355-372): card, волосок rule сверху, поля 8 по бокам, вкладки поровну; под ней safe-area. */
.к-панель-взрослого{display:flex;padding:0 var(--отступ-8) env(safe-area-inset-bottom,0px);background:var(--card);
  box-shadow:inset 0 var(--линия-тонкая) 0 var(--rule)}
/* Вкладка взрослого (6a:331-352): подложка 56x32 со значком 24, подпись «Текст/Вкладка» muted; выбранная — ровная
   подложка wash (без пятна от руки), значок и подпись parent. Счётчик новых просьб — 16 (наименьшая ширина), поля 4,
   ink, число «Текст/Метка» paper; у значка справа сверху — (34, −2) в подложке. */
.к-вкладка-взрослого{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--отступ-4);padding:var(--отступ-8) 0;
  color:var(--muted);text-decoration:none;font:600 var(--кегль-микро)/var(--строка-мелкая) var(--body);letter-spacing:var(--трекинг-свободный);
  -webkit-tap-highlight-color:transparent}
.к-вкладка-взрослого .подложка{position:relative;display:grid;place-items:center;width:var(--размер-подложка);height:var(--отступ-32);
  border-radius:var(--радиус-полный)}
.к-вкладка-взрослого[aria-current]{color:var(--parent)}
.к-вкладка-взрослого[aria-current] .подложка{background:var(--wash)}
.к-вкладка-взрослого .счётчик{position:absolute;top:calc(var(--отступ-4) / -2);left:calc(var(--размер-подложка) / 2 + var(--отступ-4) * 1.5);
  display:grid;place-items:center;min-width:var(--размер-значок-мал);height:var(--размер-значок-мал);padding:0 var(--отступ-4);
  border-radius:var(--радиус-полный);background:var(--ink);color:var(--paper);font:600 var(--кегль-микро)/1 var(--body)}
/* Пустое состояние (68-komp-listy.js:127-135): по центру, промежуток 12, поля 32 сверху и снизу; облачко 48,
   строка «Текст/Основной» muted по центру, кнопка второстепенная во всю ширину. */
.к-пустое-состояние{display:flex;flex-direction:column;align-items:center;gap:var(--отступ-12);padding:var(--отступ-32) 0;text-align:center}
.к-пустое-состояние > .к-кнопка{width:100%}
/* Фишка выбора (6a:279-290): высота и наименьшая ширина 40, радиус полный, поля 12; card, рамка поле 1, подпись
   «Текст/Подпись» muted. Выбранная — wash, рамка parent 2, подпись «Текст/Кнопка» parent: не только цветом. Радио
   выбрана по :checked, кнопка — по aria-pressed. Невидимая жирная копия подписи держит ширину выбранной. */
.к-фишка-выбора{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--размер-кнопка-мал);
  min-height:var(--размер-кнопка-мал);padding:0 var(--отступ-12);border:0;border-radius:var(--радиус-полный);background:var(--card);
  box-shadow:inset 0 0 0 var(--линия-тонкая) var(--поле);color:var(--muted);font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body);
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.к-фишка-выбора .подпись{display:inline-flex;flex-direction:column;align-items:center}
.к-фишка-выбора .подпись::after{content:attr(data-подпись);height:0;overflow:hidden;visibility:hidden;font-weight:600}
.к-фишка-выбора:has(input:checked),.к-фишка-выбора[aria-pressed="true"]{background:var(--wash);
  box-shadow:inset 0 0 0 var(--линия-метка) var(--parent);color:var(--parent);font-weight:600}
.к-фишка-выбора:has(input:focus-visible){outline:var(--линия-метка) solid var(--акцент);outline-offset:var(--линия-метка)}
/* Выбор пола (6a:527-549): подпись «Обращение», под ней через 8 две фишки одной ширины — сеткой поровну, по самой
   широкой; в форме ещё пояснение muted через 8 и ошибка под ним. Подпись в форме — «Текст/Подпись» ink, как у «Поля
   формы»; разделом («Управление») — «Текст/Кнопка». */
.к-выбор-пола{min-width:0;margin:0;padding:0;border:0}
.к-выбор-пола legend{padding:0;color:var(--ink);font:500 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
.к-выбор-пола .фишки{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--отступ-8);margin-top:var(--отступ-8)}
.к-выбор-пола > .к-текст,.к-выбор-пола > .ошибка{margin-top:var(--отступ-8)}
.к-выбор-пола[data-ошибка] .к-фишка-выбора{box-shadow:inset 0 0 0 var(--линия-метка) var(--hard)}
/* Код для входа (6a:420-458). Компактный — plate, радиус плашки, поля 12 / 4 / 4 / 16, шаг 4: подпись muted, код
   «Текст/Раздел» и значок «скопировать» 24 ink в зоне 44 (подпись кнопки — только для чтеца, классом .vh), срок muted, ссылки
   «Текст/Кнопка» ink через 16 в зоне 44. Крупный — card и тень, поля 16, шаг 8: имя «Текст/Раздел», код
   «Текст/Крупный», под ним кнопка-значок «Скопировать» ink. Скрытая кнопка не рисуется (база компонентов). */
.к-код-для-входа{display:flex;flex-direction:column;gap:var(--отступ-4);margin:0;
  padding:var(--отступ-12) var(--отступ-4) var(--отступ-4) var(--отступ-16);border-radius:var(--радиус-плашка);background:var(--plate);
  overflow-wrap:anywhere}
.к-код-для-входа .код{display:flex;align-items:center;gap:var(--отступ-8)}
.к-код-для-входа .к-кнопка{color:var(--ink)}
.к-код-для-входа[data-вид="компактный"] .к-кнопка{min-width:var(--размер-нажатие);padding:0}
.к-код-для-входа[data-вид="компактный"] .к-кнопка::before,.к-код-для-входа[data-вид="компактный"] .к-кнопка::after{background:none;box-shadow:none}
.к-код-для-входа .ссылки{display:flex;flex-wrap:wrap;align-items:center;gap:var(--отступ-16)}
.к-код-для-входа .ссылки form{margin:0}
.к-код-для-входа .ссылка{display:inline-flex;align-items:center;min-height:var(--размер-нажатие);padding:0;border:0;background:none;
  color:var(--ink);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);text-decoration:none;cursor:pointer}
.к-код-для-входа[data-вид="крупный"]{gap:var(--отступ-8);padding:var(--отступ-16);border-radius:var(--радиус-общий);background:var(--card);
  box-shadow:var(--тень-карточка) var(--тень)}
.к-код-для-входа[data-вид="крупный"] > .к-кнопка{align-self:flex-start}
/* Шаги входа (6a:481-492): заголовок «Текст/Раздел», шаги через 12 — номер «Текст/Кнопка» ink в круге 32 на plate,
   через 12 текст «Текст/Основной» ink, по центру высоты. */
.к-шаги-входа{display:grid;gap:var(--отступ-12)}
.к-шаги-входа ol{display:grid;gap:var(--отступ-12);margin:0;padding:0;list-style:none}
.к-шаги-входа li{display:flex;align-items:center;gap:var(--отступ-12)}
.к-шаги-входа .номер{display:grid;place-items:center;flex:none;width:var(--размер-аватар-мал);height:var(--размер-аватар-мал);
  border-radius:var(--радиус-полный);background:var(--plate);color:var(--ink);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
/* Пустой список (6a:499-512, В5 «пусто»): по центру, шаг 12, поля 16 сверху и 8 снизу; рукописная строка «Рука/Крупная»
   ink и строка «Текст/Основной» muted. Без облака, заливки, рамки и тени (r90). */
.к-пустой-список{display:flex;flex-direction:column;align-items:center;gap:var(--отступ-12);padding:var(--отступ-16) 0 var(--отступ-8);
  text-align:center;overflow-wrap:anywhere}
/* Карточка ребёнка (6a:460-480): card и тень, радиус общий, поля 12 / 16, снизу 16 — когда в ней код, шаг 12. Верх — ссылка:
   колонка «кто» (имя, класс, метка через 4) и шеврон muted, по центру высоты через 12. Имя в 40 знаков без пробелов
   переносится (Review Focus 5). Нажатие верха — как у карточки-строки; код под ним — во всю ширину. */
.к-карточка-ребёнка{display:flex;flex-direction:column;gap:var(--отступ-12);padding:var(--отступ-12) var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-карточка-ребёнка:has(> .к-код-для-входа){padding-bottom:var(--отступ-16)}
.к-карточка-ребёнка .верх{display:flex;align-items:center;gap:var(--отступ-12);color:var(--ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-карточка-ребёнка .верх:active{transform:translateY(var(--сдвиг-нажатие))}
.к-карточка-ребёнка .кто{display:flex;flex-direction:column;gap:var(--отступ-4);flex:1;min-width:0}
.к-карточка-ребёнка .верх > .к-значок{flex:none;color:var(--muted)}

/* Плашка состояния (6a:1098-1117): над разделами обзора — card и тень, радиус общий, поля 16, шаг 8: метка, заголовок
   «Текст/Раздел», текст «Текст/Основной» ink; у паузы — кто и когда muted и «Снять паузу» второстепенной по тексту. */
.к-плашка-состояния{display:flex;flex-direction:column;gap:var(--отступ-8);margin:0;padding:var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-плашка-состояния form{align-self:flex-start;margin:0}
/* Раздел ребёнка (6a:597-616): вся карточка — ссылка; card и тень, поля 16 / 12 / 16 / 16, шаг 16, по центру высоты; круг 56
   со значком на подложке тона (бирюза — wash и parent; жёлтая — подсветка 30 %; нейтральная — plate; значок ink), слова через 4,
   шеврон muted. Нажатие — как у карточки ребёнка. */
.к-раздел-ребёнка{display:flex;align-items:center;gap:var(--отступ-16);padding:var(--отступ-16) var(--отступ-12) var(--отступ-16) var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);color:var(--ink);
  text-decoration:none;overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent;
  transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-раздел-ребёнка:active{transform:translateY(var(--сдвиг-нажатие))}
.к-раздел-ребёнка .круг{display:grid;place-items:center;flex:none;width:var(--размер-аватар-бол);height:var(--размер-аватар-бол);
  border-radius:var(--радиус-полный);background:var(--plate);color:var(--ink)}
.к-раздел-ребёнка[data-тон="бирюза"] .круг{background:var(--wash);color:var(--parent)}
.к-раздел-ребёнка[data-тон="жёлтая"] .круг{background:color-mix(in srgb, var(--подсветка) 30%, transparent)}
.к-раздел-ребёнка .слова{display:flex;flex-direction:column;gap:var(--отступ-4);flex:1;min-width:0}
.к-раздел-ребёнка > .к-значок{color:var(--muted)}
/* Рукописная строка (6a:722-728): «Рука/Малая» ink во всю ширину, справа поле 64 — место дудла (6a: экран ставит его
   у правого края строки, по центру высоты, наклон −8°), наклон всей строки −2°. */
.к-рукописная-строка{position:relative;margin:0;padding-right:var(--отступ-64);transform:rotate(-2deg);overflow-wrap:anywhere}
.к-рукописная-строка .дудл{position:absolute;top:50%;right:var(--отступ-16);line-height:0;transform:translateY(-50%) rotate(-8deg)}
/* Заметка со значком (6a:707-720): plate, радиус общий, без тени; поля 12 / 16 / 12 / 12, шаг 12, по верху; круг 44 со
   значком ink на подсветке 30 %, справа заголовок «Текст/Раздел» и текст «Текст/Основной» через 4. */
.к-заметка-со-значком{display:flex;align-items:flex-start;gap:var(--отступ-12);
  padding:var(--отступ-12) var(--отступ-16) var(--отступ-12) var(--отступ-12);border-radius:var(--радиус-общий);background:var(--plate);
  overflow-wrap:anywhere}
.к-заметка-со-значком .круг{display:grid;place-items:center;flex:none;width:var(--размер-аватар);height:var(--размер-аватар);
  border-radius:var(--радиус-полный);background:color-mix(in srgb, var(--подсветка) 30%, transparent);color:var(--ink)}
.к-заметка-со-значком .слова{display:flex;flex-direction:column;gap:var(--отступ-4);flex:1;min-width:0}
/* Строка сигнала (6a:1034-1052): card и тень, поля 12 / 16, шаг 8. Верх — метка уровня, «за 7 дней» и справа «N раз» через 8,
   по центру высоты; ниже слова уровня, пояснение и «откуда». */
.к-строка-сигнала{display:flex;flex-direction:column;gap:var(--отступ-8);padding:var(--отступ-12) var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-строка-сигнала .верх{display:flex;flex-wrap:wrap;align-items:center;gap:var(--отступ-8)}
.к-строка-сигнала .верх > .к-метка-статуса{align-self:center}
.к-строка-сигнала .верх > .к-текст:last-child{margin-left:auto}
/* Закрытая тетрадь (6a:994-1013): по центру, сверху 8, шаг 12 — карандаш 56, заголовок рукой, строка, превью через 8,
   условие подписью ink. Превью — card без тени, радиус общий, поля 12 / 16 / 12 / 12, шаг 12: круг 44 на plate со значком
   muted и название «Текст/Раздел» muted; без шеврона и нажатия. */
.к-закрытая-тетрадь{display:flex;flex-direction:column;align-items:center;gap:var(--отступ-12);padding-top:var(--отступ-8);
  text-align:center;overflow-wrap:anywhere}
.к-закрытая-тетрадь .превью{display:grid;gap:var(--отступ-8);align-self:stretch;text-align:left}
.к-закрытая-тетрадь .превью-строка{display:flex;align-items:center;gap:var(--отступ-12);
  padding:var(--отступ-12) var(--отступ-16) var(--отступ-12) var(--отступ-12);border-radius:var(--радиус-общий);background:var(--card)}
.к-закрытая-тетрадь .круг{display:grid;place-items:center;flex:none;width:var(--размер-аватар);height:var(--размер-аватар);
  border-radius:var(--радиус-полный);background:var(--plate);color:var(--muted)}
/* Решение в тетради (6a:1015-1031): card и тень, поля 12 / 16, шаг 8; картинка во всю ширину по своей пропорции (рамка rule
   и радиус — .sheet в formula.css; белая и в тёмной теме), под ней тема и время подписью muted через 8. */
.к-решение-в-тетради{display:flex;flex-direction:column;gap:var(--отступ-8);margin:0;padding:var(--отступ-12) var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
.к-решение-в-тетради > img{width:100%;height:auto}
.к-решение-в-тетради .низ{display:flex;align-items:center;gap:var(--отступ-8);overflow-wrap:anywhere}
.к-решение-в-тетради .низ > .к-текст:first-child{flex:1;min-width:0}
/* Дни недели (6a:785-797): своя форма — подзаголовок «Текст/Кнопка», через 8 фишки, через 8 пояснение muted. Фишки
   одной ширины (r83, слово Марии — плашки одного размера): 48 — самая широкая выбранная, жирная «Пт» с полями 12;
   сеткой по 48 — на 320 ряд переносится, а не вылезает за край. */
.к-дни-недели{display:flex;flex-direction:column;gap:var(--отступ-8);margin:0}
.к-дни-недели .фишки{display:grid;grid-template-columns:repeat(auto-fill,var(--размер-кнопка));gap:var(--отступ-8)}
/* Обращение и расписание (6a:799-810): card и тень, радиус общий, поля 16, шаг 16 — заголовок, обращение, дни. */
.к-обращение-и-расписание{display:flex;flex-direction:column;gap:var(--отступ-16);margin:0;padding:var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень)}
/* Вход ребёнка (6a:812-833): card и тень, радиус общий, поля 16, шаг 12; имя в тексте переносится. «Выдать новый код» —
   второстепенная по своей ширине, код — во всю. */
.к-вход-ребёнка{display:flex;flex-direction:column;gap:var(--отступ-12);margin:0;padding:var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-вход-ребёнка > form{align-self:flex-start;margin:0}
/* Опасное действие (6a:1119-1155): card и тень, радиус общий, поля 16. Пауза — шаг 12, кнопка второстепенная по своей
   ширине. Остановка и удаление (r90: опасные действия меньше) — шаг 8, строки как «Карточка-строка»: высота от 44, поля
   8 сверху и снизу, шаг 12 — точка 8 (muted у остановки, hard у удаления), название и вторая строка через 4, шеврон
   muted. Строка остановки — кнопка формы без своего фона и рамки, нажатие — как у карточки. */
.к-опасное-действие{display:flex;flex-direction:column;gap:var(--отступ-12);margin:0;padding:var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-опасное-действие > form{align-self:flex-start;margin:0}
.к-опасное-действие[data-вид="остановка и удаление"]{gap:var(--отступ-8)}
.к-опасное-действие[data-вид="остановка и удаление"] > form{align-self:stretch}
.к-опасное-действие .строка{display:flex;align-items:center;gap:var(--отступ-12);width:100%;min-height:var(--размер-нажатие);
  padding:var(--отступ-8) 0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-опасное-действие .строка:active{transform:translateY(var(--сдвиг-нажатие))}
.к-опасное-действие .строка:focus-visible{outline:var(--линия-метка) solid var(--акцент);outline-offset:var(--линия-метка)}
.к-опасное-действие .слова{display:flex;flex-direction:column;gap:var(--отступ-4);flex:1;min-width:0}
.к-опасное-действие .строка > .к-значок{flex:none;color:var(--muted)}
:is(.к-опасное-действие,.к-что-удалится) .точка{flex:none;width:var(--отступ-8);height:var(--отступ-8);
  border-radius:var(--радиус-полный);background:var(--muted)}
.к-опасное-действие .точка[data-тон="hard"]{background:var(--hard)}
/* Что удалится (6a:1157-1178): card и тень, радиус общий, поля 16, шаг 12; список через 8 — точка 8 muted и строка
   «Текст/Основной» через 12, по центру высоты. */
.к-что-удалится{display:flex;flex-direction:column;gap:var(--отступ-12);margin:0;padding:var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-что-удалится ul{display:grid;gap:var(--отступ-8);margin:0;padding:0;list-style:none}
.к-что-удалится li{display:flex;align-items:center;gap:var(--отступ-12)}
/* Кнопка контуром (6a:241-259, r90): второе действие того же веса, что главное, — card, ровная рамка parent 1 внутрь,
   подпись «Текст/Кнопка» parent, высота 48, поля 24, шаг 8, радиус полный; значки слева и справа — parent 24. Состояний
   в макете нет: нажатие — как у кнопок (сдвиг и wash), фокус — рамка parent толщиной фокуса. */
.к-кнопка-контуром{display:inline-flex;align-items:center;justify-content:center;gap:var(--отступ-8);min-height:var(--размер-кнопка);
  padding:0 var(--отступ-24);border:0;border-radius:var(--радиус-полный);background:var(--card);
  box-shadow:inset 0 0 0 var(--линия-тонкая) var(--parent);color:var(--parent);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--длит-быстро) var(--кривая-обычная)}
.к-кнопка-контуром:active{transform:translateY(var(--сдвиг-нажатие));background:var(--wash)}
/* Класс дважды — нарочно: общая рамка фокуса (специфичность 0,2,0) живёт в screens.css, а он
   подключается после components.css; при равной специфичности она легла бы второй рамкой поверх своей (smoke102). */
.к-кнопка-контуром.к-кнопка-контуром:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--линия-фокус) var(--parent)}
.к-кнопка-контуром .к-значок{width:var(--размер-значок);height:var(--размер-значок)}
/* Просьба взрослому (6a:1055-1082, В11): card и тень, поля 12 / 16, шаг 12; картинка 56 — как у «Строки покупки». Ждёт —
   верх (картинка и через 12 название и «кто и цена» через 4), под ним «Разрешить» и «Отказать» через 12 одной ширины —
   по самой широкой (сетка 1fr по содержимому, как фишки «Выбора пола»). Ответили — в ряд: картинка, название, справа
   точка 8 muted и слово ответа через 8. */
.к-просьба-взрослому{display:flex;flex-direction:column;gap:var(--отступ-12);padding:var(--отступ-12) var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-просьба-взрослому[data-состояние="ответили"]{flex-direction:row;align-items:center}
.к-просьба-взрослому .верх{display:flex;align-items:center;gap:var(--отступ-12)}
.к-просьба-взрослому .что{display:flex;flex-direction:column;gap:var(--отступ-4);flex:1;min-width:0}
.к-просьба-взрослому .ответ{display:inline-flex;flex:none;align-items:center;gap:var(--отступ-8)}
.к-просьба-взрослому .точка{flex:none;width:var(--отступ-8);height:var(--отступ-8);border-radius:var(--радиус-полный);background:var(--muted)}
.к-просьба-взрослому .кнопки{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--отступ-12);align-self:flex-start;max-width:100%}
.к-просьба-взрослому .кнопки form{min-width:0;margin:0}
.к-просьба-взрослому .кнопки :is(.к-кнопка,.к-кнопка-контуром){width:100%}
/* Карточка плана (6a:1084-1096, В12): card и тень, поля 12 / 16 / 16 / 16, шаг 8. Верх по верхнему краю, через 12: имя и план
   через 4, справа разборы; ниже «осталось …» muted и полоса на plate. */
.к-карточка-плана{display:flex;flex-direction:column;gap:var(--отступ-8);padding:var(--отступ-12) var(--отступ-16) var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-карточка-плана .верх{display:flex;align-items:flex-start;gap:var(--отступ-12)}
.к-карточка-плана .кто{display:flex;flex-direction:column;gap:var(--отступ-4);flex:1;min-width:0}
.к-карточка-плана .верх > .к-текст{flex:none}
/* Семейный план (6a:551-560, В12): card и тень, поля 12 / 16 / 16 / 16, шаг 8 — заголовок, текст подписью ink, заметка на plate.
   Звезда экрана 24 — центром в 24 от правого края и 22 от верхнего, наклон 12° против часовой (7e:361), вне потока. */
.к-семейный-план{position:relative;display:flex;flex-direction:column;gap:var(--отступ-8);margin:0;
  padding:var(--отступ-12) var(--отступ-16) var(--отступ-16);border-radius:var(--радиус-общий);background:var(--card);
  box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-семейный-план .угол{position:absolute;top:calc(var(--отступ-8) + var(--линия-метка));right:var(--отступ-12);line-height:0;transform:rotate(-12deg)}

/* --- «Домашние задания» В16 (DK-331, П2) --- */
/* Переключатель на три (6a:731-749): рисунок детского «Переключателя» — поля и промежуток 4, три сегмента поровну высотой 40,
   подложка plate (кистью — в блоке масок); выбранное — wash и parent, прочие muted, «Текст/Переключатель». Штриха-акцента
   нет. Выбранное — не ссылка, а span с aria-current. */
.к-переключатель-на-три{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--отступ-4);padding:var(--отступ-4)}
.к-переключатель-на-три::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--радиус-общий);background:var(--plate)}
.к-переключатель-на-три > *{position:relative;isolation:isolate;display:grid;place-items:center;min-height:var(--размер-кнопка-мал);
  color:var(--muted);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body);text-decoration:none;-webkit-tap-highlight-color:transparent}
.к-переключатель-на-три [aria-current]{color:var(--parent)}
.к-переключатель-на-три [aria-current]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--радиус-общий);background:var(--wash)}
/* Плашка-число (6a:584-595): подложка тоном (ТОНЫ_ВЗР, как у «Метки статуса»), радиус карточки, поля 12 / 8 / 12 / 12, без тени;
   число «Текст/Крупный» сверху, под ним подпись «Текст/Подпись». На бирюзе число parent (ЧИСЛО_ТОН_ВЗР). На 320 три
   плашки узкие: подпись переносится по слогам (страница lang="ru"), а не посреди слога. */
.к-плашка-число{display:flex;flex-direction:column;justify-content:flex-start;min-width:0;
  padding:var(--отступ-12) var(--отступ-8) var(--отступ-12) var(--отступ-12);border-radius:var(--радиус-общий);background:var(--plate);
  overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.к-плашка-число[data-тон="бирюза"]{background:var(--wash)}
.к-плашка-число[data-тон="жёлтая"]{background:color-mix(in srgb, var(--подсветка) 30%, transparent)}
.к-плашка-число[data-тон="тёплая"]{background:color-mix(in srgb, var(--hard) 18%, transparent)}
.к-плашка-число[data-тон="нейтральная"]{background:var(--plate)}
.к-плашка-число[data-тон="бирюза"] .к-текст:first-child{color:var(--parent)}
/* Карточка дня (6a:619-651): card и тень, поля 16, шаг 12. Верх — дата и таблетка справа, не помещаются — таблетка под
   дату (через 4); плашки поровну через 8 и одной высоты; «Открыть тетрадь» тянется во всю ширину. Не ссылка целиком. */
.к-карточка-дня{display:flex;flex-direction:column;gap:var(--отступ-12);margin:0;padding:var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-карточка-дня .верх{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--отступ-4) var(--отступ-8)}
.к-карточка-дня .верх > .к-метка-статуса{align-self:center}
.к-карточка-дня .числа{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--отступ-8)}
/* Строка дня (6a:653-666): card и тень, поля 12 / 16, шаг 4; верх — как у «Карточки дня», ниже тема. */
.к-строка-дня{display:flex;flex-direction:column;gap:var(--отступ-4);padding:var(--отступ-12) var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-строка-дня .верх{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--отступ-4) var(--отступ-8)}
.к-строка-дня .верх > .к-метка-статуса{align-self:center}
/* Показатель (6a:562-573): card и тень, поля 12 / 16, шаг 16, по центру высоты; число в колонке 48 (длиннее — по тексту),
   справа подпись и пояснение через 4. */
.к-показатель{display:flex;align-items:center;gap:var(--отступ-16);padding:var(--отступ-12) var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--card);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-показатель > .к-текст{flex:none;min-width:var(--отступ-48)}
.к-показатель .смысл{display:flex;flex-direction:column;gap:var(--отступ-4);flex:1;min-width:0}

/* --- «Совет родителям» на обзоре В6а (DK-333, П4) --- */
/* Помощь сегодня (6a:833-852, 913-982): заливка wash у всех тонов, радиус и тень карточки, поля 16, шаг 12; не нажимается.
   Верх — круг 48 и «кому» через 12, по центру высоты, справа поле 32 под звёздочку; круг: бирюза — card и значок parent
   (wash на wash не виден), жёлтая — подсветка 30 %, нейтральная — plate, у обеих ink. Раскрытие — два <details> без
   скрипта (решение 15): маркер спрятан; «Что можно сказать?» закрытым — «Кнопка контуром» во всю ширину, открытым —
   строка «Текст/Кнопка» parent со значком «вниз» 16, повёрнутым на 180°, в зоне 44, по тексту; «Почему этот совет?» —
   «Текст/Подпись» parent и «вниз» 16 в зоне 44, по тексту. Блок под строкой — через 4. Звёздочка 24 parent — центром в 28
   от правого и верхнего края, вне потока; −12° Figma (против часовой — плюс) — 12° по часовой. */
.к-помощь-сегодня{position:relative;display:flex;flex-direction:column;gap:var(--отступ-12);margin:0;padding:var(--отступ-16);
  border-radius:var(--радиус-общий);background:var(--wash);box-shadow:var(--тень-карточка) var(--тень);overflow-wrap:anywhere}
.к-помощь-сегодня .верх{display:flex;align-items:center;gap:var(--отступ-12);padding-right:var(--отступ-32)}
.к-помощь-сегодня .круг{display:grid;place-items:center;flex:none;width:var(--размер-кнопка);height:var(--размер-кнопка);
  border-radius:var(--радиус-полный);background:var(--plate);color:var(--ink)}
.к-помощь-сегодня[data-тон="бирюза"] .круг{background:var(--card);color:var(--parent)}
.к-помощь-сегодня[data-тон="жёлтая"] .круг{background:color-mix(in srgb, var(--подсветка) 30%, transparent)}
.к-помощь-сегодня .кому{display:flex;flex-direction:column;gap:var(--отступ-4);flex:1;min-width:0}
.к-помощь-сегодня summary{list-style:none;color:var(--parent);cursor:pointer;-webkit-tap-highlight-color:transparent}
.к-помощь-сегодня summary::-webkit-details-marker{display:none}
.к-помощь-сегодня summary .к-текст{color:var(--parent)}
.к-помощь-сегодня .фраза > summary{display:block}
.к-помощь-сегодня .фраза > summary > .к-кнопка-контуром{display:flex;width:100%}
.к-помощь-сегодня .фраза[open] > summary{width:fit-content}
.к-помощь-сегодня .фраза[open] > summary > .к-кнопка-контуром{display:none}
.к-помощь-сегодня .фраза:not([open]) > summary > .открыто{display:none}
.к-помощь-сегодня :is(.фраза > summary > .открыто,.почему > summary){display:flex;align-items:center;gap:var(--отступ-4);
  width:fit-content;min-height:var(--размер-нажатие)}
.к-помощь-сегодня :is(.открыто,.почему > summary) > .к-значок{width:var(--размер-значок-мал);height:var(--размер-значок-мал)}
.к-помощь-сегодня .фраза[open] > summary > .открыто > .к-значок,.к-помощь-сегодня .почему[open] > summary > .к-значок{transform:rotate(180deg)}
.к-помощь-сегодня details > :not(summary){margin-top:var(--отступ-4)}
.к-помощь-сегодня > .угол{position:absolute;top:var(--отступ-16);right:var(--отступ-16);line-height:0;transform:rotate(12deg)}
.к-помощь-сегодня > .угол > .к-дудл{color:var(--parent)}
/* Что сказать (6a:854-895): плашка card на мяте, радиус плашки, поля 12, шаг 8. «Скопировать» — значок 16 и подпись parent
   в зоне 44, по тексту; скрытая не рисуется. Шаги через 8: номер «Текст/Кнопка» ink в круге 24 plate и через 12 текст,
   по верху. */
.к-что-сказать{display:flex;flex-direction:column;gap:var(--отступ-8);margin:0;padding:var(--отступ-12);
  border-radius:var(--радиус-плашка);background:var(--card);overflow-wrap:anywhere}
.к-что-сказать .скопировать{display:inline-flex;align-self:flex-start;align-items:center;gap:var(--отступ-4);min-height:var(--размер-нажатие);
  padding:0;border:0;background:none;color:var(--parent);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.к-что-сказать .скопировать[hidden]{display:none}
.к-что-сказать .скопировать .к-значок{width:var(--размер-значок-мал);height:var(--размер-значок-мал)}
.к-что-сказать .скопировать .к-текст{color:var(--parent)}
.к-что-сказать ol{display:grid;gap:var(--отступ-8);margin:0;padding:0;list-style:none}
.к-что-сказать li{display:flex;align-items:flex-start;gap:var(--отступ-12)}
.к-что-сказать li > .к-текст{flex:1;min-width:0}
.к-что-сказать .номер{display:grid;place-items:center;flex:none;width:var(--отступ-24);height:var(--отступ-24);
  border-radius:var(--радиус-полный);background:var(--plate);color:var(--ink);font:600 var(--кегль-подпись)/var(--строка-подпись) var(--body)}
/* Почему совет (6a:897-911): плашка card, радиус плашки, поля 12; четыре части через 12, в части подпись muted и текст через 4. */
.к-почему-совет{display:flex;flex-direction:column;gap:var(--отступ-12);margin:0;padding:var(--отступ-12);
  border-radius:var(--радиус-плашка);background:var(--card);overflow-wrap:anywhere}
.к-почему-совет .часть{display:flex;flex-direction:column;gap:var(--отступ-4)}

/* --- маски --- */
/* Значки, дудлы, кисти — растровые маски макета: форма в прозрачности, цвет — фон.
   Без поддержки масок значка нет (а не цветной квадрат), кнопка — ровная.
   Срез кисти — числа из kist/<имя>.json (начало, конец, высота картинки):
   zaliv, ramka, ramka2 — 120, 120, 192: край 120·48/192 = 30 (у кнопки 40 — 25);
   marker — 43, 44, 87: края при высоте строки маркера 16 — 7.91 и 8.09.
   Кисть ложится только там, где есть mask-box-image; где его нет, кнопка
   остаётся ровной с радиусом, а не квадратной. */
@supports (mask-image: none) or (-webkit-mask-image: none){
.к-значок,.к-дудл{background-color:currentColor;-webkit-mask:var(--маска) center/contain no-repeat;mask:var(--маска) center/contain no-repeat}
.к-значок[data-знак="chasy"]{--маска:url(/static/znak/chasy.png)}
.к-значок[data-знак="chat"]{--маска:url(/static/znak/chat.png)}
.к-значок[data-знак="foto"]{--маска:url(/static/znak/foto.png)}
.к-значок[data-знак="magazin"]{--маска:url(/static/znak/magazin.png)}
.к-значок[data-знак="nagrada"]{--маска:url(/static/znak/nagrada.png)}
.к-значок[data-знак="nastrojki"]{--маска:url(/static/znak/nastrojki.png)}
.к-значок[data-знак="nazad"]{--маска:url(/static/znak/nazad.png)}
.к-значок[data-знак="personazh"]{--маска:url(/static/znak/personazh.png)}
.к-значок[data-знак="pomosch"]{--маска:url(/static/znak/pomosch.png)}
.к-значок[data-знак="portfel"]{--маска:url(/static/znak/portfel.png)}
.к-значок[data-знак="pyatno"]{--маска:url(/static/znak/pyatno.png)}
.к-значок[data-знак="risovat"]{--маска:url(/static/znak/risovat.png)}
.к-значок[data-знак="strelka"]{--маска:url(/static/znak/strelka.png)}
.к-значок[data-знак="tema"]{--маска:url(/static/znak/tema.png)}
.к-значок[data-знак="veshalka"]{--маска:url(/static/znak/veshalka.png)}
.к-значок[data-знак="vpered"]{--маска:url(/static/znak/vpered.png)}
.к-значок[data-знак="serdce"]{--маска:url(/static/znak/serdce.png)}
.к-значок[data-знак="deti"]{--маска:url(/static/znak/deti.svg)}
.к-значок[data-знак="prosby"]{--маска:url(/static/znak/prosby.svg)}
.к-значок[data-знак="podpiska"]{--маска:url(/static/znak/podpiska.svg)}
.к-значок[data-знак="kalendar"]{--маска:url(/static/znak/kalendar.svg)}
.к-значок[data-знак="kniga"]{--маска:url(/static/znak/kniga.svg)}
.к-значок[data-знак="lampochka"]{--маска:url(/static/znak/lampochka.svg)}
.к-значок[data-знак="kopirovat"]{--маска:url(/static/znak/kopirovat.svg)}
.к-значок[data-знак="vniz"]{--маска:url(/static/znak/vniz.svg)}
.к-вкладка[aria-current] .подложка{background:none;border-radius:0}
.к-вкладка[aria-current] .подложка::before{content:"";position:absolute;inset:calc(var(--линия-метка) * -1) var(--линия-метка);
  background:var(--childwash);-webkit-mask:url(/static/znak/pyatno.png) 0 0/100% 100% no-repeat;mask:url(/static/znak/pyatno.png) 0 0/100% 100% no-repeat}
.к-счёт .монетка{background:none;border-radius:0;box-shadow:none}
.к-счёт .монетка::before,.к-счёт .монетка::after{content:"";position:absolute;inset:0}
.к-счёт .монетка::before{background:var(--подсветка);-webkit-mask:url(/static/dudl/moneta-zaliv.png) center/contain no-repeat;mask:url(/static/dudl/moneta-zaliv.png) center/contain no-repeat}
.к-счёт .монетка::after{background:var(--монета);-webkit-mask:url(/static/dudl/moneta-kontur.png) center/contain no-repeat;mask:url(/static/dudl/moneta-kontur.png) center/contain no-repeat}
.к-дудл[data-дудл="zvezdochka"]{--маска:url(/static/dudl/zvezdochka.png);color:var(--заливка)}
.к-дудл[data-дудл="zvezda"]{--маска:url(/static/dudl/zvezda.png);color:var(--заливка)}
.к-дудл[data-дудл="serdce"]{--маска:url(/static/dudl/serdce.png);color:var(--заливка)}
.к-дудл[data-дудл="bliki"]{--маска:url(/static/dudl/bliki.png)}
.к-дудл[data-дудл="smajlik"]{--маска:url(/static/dudl/smajlik.png);color:var(--ink)}
.к-дудл[data-дудл="galochka"]{--маска:url(/static/dudl/galochka.png);color:var(--заливка)}
.к-дудл[data-дудл="korona"]{--маска:url(/static/dudl/korona.png);color:var(--подсветка)}
.к-дудл[data-дудл="solnce"]{--маска:url(/static/dudl/solnce.png);color:var(--подсветка)}
.к-дудл[data-дудл="dvoynoe-serdce"]{--маска:url(/static/dudl/dvoynoe-serdce.png);color:var(--заливка)}
.к-дудл[data-дудл="akcent"]{--маска:url(/static/dudl/akcent.png);color:var(--подсветка)}
.к-дудл[data-дудл="skrepka"]{--маска:url(/static/dudl/skrepka.png);color:var(--ink)}
.к-дудл[data-дудл="serdechko"]{--маска:url(/static/dudl/serdechko.png);color:var(--child)}
.к-дудл[data-дудл="punktir"]{--маска:url(/static/dudl/punktir.png);color:var(--child)}
.к-дудл[data-дудл="strelka"]{--маска:url(/static/dudl/strelka.png);color:var(--child)}
.к-дудл[data-дудл="ryukzak"]{--маска:url(/static/dudl/ryukzak.png);color:var(--child)}
.к-дудл[data-дудл="oblachko"]{--маска:url(/static/dudl/oblachko.png);color:var(--ink)}
.к-дудл[data-дудл="karandash"]{-webkit-mask:none;mask:none}
.к-дудл[data-дудл="karandash"]::after{content:"";position:absolute;inset:0;background:var(--ink);
  -webkit-mask:url(/static/dudl/karandash-kontur.png) center/contain no-repeat;mask:url(/static/dudl/karandash-kontur.png) center/contain no-repeat}
.к-кнопка .искорка{background-color:currentColor;-webkit-mask:url(/static/dudl/bliki.png) center/contain no-repeat;mask:url(/static/dudl/bliki.png) center/contain no-repeat}
.к-карточка-персонажа .узор{background:var(--подсветка);-webkit-mask:url(/static/dudl/uzor-koron.png) 0 0/100% 100% no-repeat;mask:url(/static/dudl/uzor-koron.png) 0 0/100% 100% no-repeat}
@supports (-webkit-mask-box-image: none){
.к-кнопка::before{border-radius:0;-webkit-mask-box-image:url(/static/kist/zaliv.png) 0 120 0 120 fill / 0 30px 0 30px stretch}
.к-кнопка[data-мал]::before{-webkit-mask-box-image:url(/static/kist/zaliv.png) 0 120 0 120 fill / 0 25px 0 25px stretch}
.к-кнопка::after{border-radius:0}
.к-кнопка[data-вид="второстепенная"]::after{box-shadow:none;background:var(--child);
  -webkit-mask-box-image:url(/static/kist/ramka.png) 0 120 0 120 fill / 0 30px 0 30px stretch}
.к-кнопка[data-вид="второстепенная"][data-мал]::after{
  -webkit-mask-box-image:url(/static/kist/ramka.png) 0 120 0 120 fill / 0 25px 0 25px stretch}
.к-кнопка[data-вид="второстепенная"]:disabled::after{background:none}
.к-кнопка:focus-visible::after{box-shadow:none;background:var(--child);
  -webkit-mask-box-image:url(/static/kist/ramka2.png) 0 120 0 120 fill / 0 30px 0 30px stretch}
.к-кнопка[data-мал]:focus-visible::after{
  -webkit-mask-box-image:url(/static/kist/ramka2.png) 0 120 0 120 fill / 0 25px 0 25px stretch}
.к-кнопка[data-вид="значок"]::before,.к-кнопка[data-вид="значок"]::after{-webkit-mask-box-image:none;border-radius:var(--радиус-полный)}
.к-кнопка[data-вид="значок"]:focus-visible::after{background:none;box-shadow:inset 0 0 0 var(--линия-фокус) var(--child)}
.к-выделение::before,body.kid h2.rubric::before{background:var(--подсветка);-webkit-mask-box-image:url(/static/kist/marker.png) 0 44 0 43 fill / 0 8.09px 0 7.91px stretch}
.к-карточка-просьбы .тема::before{-webkit-mask-box-image:url(/static/kist/marker.png) 0 44 0 43 fill / 0 3.54px 0 3.46px stretch}
.к-переключатель::before{border-radius:0;-webkit-mask-box-image:url(/static/kist/zaliv.png) 0 120 0 120 fill / 0 30px 0 30px stretch}
.к-переключатель a[aria-current]::before{border-radius:0;-webkit-mask-box-image:url(/static/kist/zaliv.png) 0 120 0 120 fill / 0 25px 0 25px stretch}
.к-переключатель-на-три::before{border-radius:0;-webkit-mask-box-image:url(/static/kist/zaliv.png) 0 120 0 120 fill / 0 30px 0 30px stretch}
.к-переключатель-на-три [aria-current]::before{border-radius:0;-webkit-mask-box-image:url(/static/kist/zaliv.png) 0 120 0 120 fill / 0 25px 0 25px stretch}
}
}

/* DK-351: числовой отчёт в палитре кабинета взрослого. */
.к-таблица-отчёта{overflow-x:auto;margin-block:var(--отступ-24);max-width:100%}
.к-таблица-отчёта table{border-collapse:collapse;width:100%;font-size:var(--кегль-подпись);font-variant-numeric:tabular-nums}
.к-таблица-отчёта caption{text-align:left;font-weight:bold;margin-block-end:var(--отступ-12)}
.к-таблица-отчёта th,.к-таблица-отчёта td{text-align:left;padding:var(--отступ-12);border-bottom:var(--линия-тонкая) solid var(--line);white-space:nowrap}
.к-таблица-отчёта th{color:var(--muted)}
/* DK-341, волна 5: дроби по шагам и распределительное свойство. */
.к-интерактив-действий-с-дробями,.к-интерактив-смешанных-действий,
.к-интерактив-смешанного-умножения,.к-интерактив-распределения,
.к-интерактив-смешанного-деления{display:grid;gap:var(--отступ-12);min-width:0}
[data-волна5] > h3,[data-волна5] > p{margin:0}
[data-волна5] .пресеты{display:flex;flex-wrap:wrap;gap:var(--отступ-8)}
[data-волна5] [data-пресет][aria-pressed="true"]{text-decoration:underline;text-decoration-thickness:2px}
[data-волна5] .пара-дробей,[data-волна5] .шаги,[data-волна5] [data-модель-распределения]{
  display:grid;gap:var(--отступ-8);min-width:0;padding:var(--отступ-12);
  border-radius:var(--радиус-плашка);background:var(--plate)}
[data-волна5] .пара-дробей[data-тон="жёлтая"]{background:var(--путают)}
[data-волна5] .дробь{display:inline-grid;vertical-align:middle;text-align:center;min-width:28px;font-weight:700}
[data-волна5] .дробь > span{display:grid}
[data-волна5] .дробь > span > span:first-child{border-bottom:var(--линия-тонкая) solid currentColor}
[data-волна5] .полоска{display:flex;gap:1px;width:100%;min-height:14px}
[data-волна5] .полоска i{display:block;flex:1;min-width:1px;min-height:14px;
  border:var(--линия-тонкая) solid var(--line);background:var(--card)}
[data-волна5] .полоска i[data-закрашено]{background:var(--child)}
[data-волна5] [data-тон="жёлтая"] .полоска i[data-закрашено]{background:var(--подсветка)}
[data-волна5] .вывод{padding:var(--отступ-12);border-radius:var(--радиус-плашка);background:var(--childwash)}
[data-волна5] .равенство{font-size:var(--кегль-раздел);font-weight:700;text-align:center;
  overflow-wrap:anywhere;min-width:0}
[data-волна5] .шаги > b:not(:first-child){margin-top:var(--отступ-12)}
.к-интерактив-распределения form{display:grid;gap:var(--отступ-12);min-width:0}
.к-интерактив-распределения .поле-ползунка{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) var(--отступ-24);
  align-items:center;gap:var(--отступ-8);min-width:0}
.к-интерактив-распределения .поле-ползунка input{width:100%;min-width:0;accent-color:var(--child)}
.к-интерактив-распределения .поле-ползунка input:focus-visible{
  outline:var(--линия-фокус) solid var(--child);outline-offset:2px}
.к-интерактив-распределения .группы{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--отступ-8)}
.к-интерактив-распределения .группы [data-часть]{padding:var(--отступ-12);border-radius:var(--радиус-плашка);
  background:var(--childwash);font-weight:700}
.к-интерактив-распределения .группы [data-часть="вторая"]{background:var(--путают)}
/* DK-341, волна 6: построения, множества и измерения. */
.к-интерактив-треугольник,.к-интерактив-множества,.к-интерактив-масштаб,
.к-интерактив-симметрия,.к-интерактив-окружность{display:grid;gap:var(--отступ-12);min-width:0}
[data-волна6] > h3,[data-волна6] > p{margin:0}
[data-волна6] .пресеты,[data-волна6] .выбор-чисел{display:flex;flex-wrap:wrap;gap:var(--отступ-8)}
[data-волна6] [aria-pressed="true"]{text-decoration:underline;text-decoration-thickness:2px}
[data-волна6] .вывод{padding:var(--отступ-12);border-radius:var(--радиус-плашка);background:var(--childwash)}
[data-волна6] form{display:flex;flex-wrap:wrap;align-items:end;gap:var(--отступ-8);min-width:0}
[data-волна6] form label{display:grid;gap:var(--отступ-4);min-width:0}
[data-волна6] form input[type="number"]{width:var(--отступ-64);max-width:100%}
[data-волна6] form input[type="range"]{width:min(100%,240px);accent-color:var(--child)}
[data-волна6] svg{display:block;width:100%;max-width:340px;height:auto;
  border-radius:var(--радиус-плашка);background:var(--plate);touch-action:none}
[data-волна6] svg text{fill:var(--ink);font-size:14px;pointer-events:none}
.к-интерактив-треугольник svg polygon{fill:var(--childwash);stroke:var(--child);stroke-width:3}
.к-интерактив-треугольник svg .ручка,.к-интерактив-симметрия svg .точка-а{fill:var(--child);stroke:var(--card);stroke-width:2}
.к-интерактив-множества svg circle{stroke-width:2;fill-opacity:.55}
.к-интерактив-множества svg .множество-а{fill:var(--childwash);stroke:var(--child)}
.к-интерактив-множества svg .множество-б{fill:var(--путают);stroke:var(--подсветка)}
.к-интерактив-множества svg [data-числа-зоны]:not([data-числа-зоны="4"]){text-anchor:middle}
.к-интерактив-масштаб svg .карта-земля{fill:var(--childwash)}
.к-интерактив-масштаб svg .карта-поле{fill:var(--plate)}
.к-интерактив-масштаб svg .карта-река-берег{fill:none;stroke:var(--line);stroke-width:21}
.к-интерактив-масштаб svg .карта-река{fill:none;stroke:var(--childwash);stroke-width:11}
.к-интерактив-масштаб svg .карта-дорога{fill:none;stroke:var(--card);stroke-width:12}
.к-интерактив-масштаб svg .карта-дорога-штрих{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 6}
.к-интерактив-масштаб svg .карта-расстояние{fill:none;stroke:var(--child);stroke-width:3;stroke-dasharray:6 5}
.к-интерактив-масштаб svg .карта-посёлок{fill:var(--child);stroke:var(--card);stroke-width:3}
.к-интерактив-масштаб svg .карта-подпись{fill:var(--card)}
.к-интерактив-масштаб svg [data-карта]{font-weight:700;fill:var(--child)}
.к-интерактив-масштаб svg .карта-сноска{font-size:10px;fill:var(--muted)}
.к-интерактив-симметрия svg .сетка path{stroke:var(--line);stroke-width:1}
.к-интерактив-симметрия svg .ось{stroke:var(--child);stroke-width:3;stroke-dasharray:5 4}
.к-интерактив-симметрия svg .отрезок{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4}
.к-интерактив-симметрия svg .центр{fill:var(--child)}
.к-интерактив-симметрия svg .точка-б{fill:var(--подсветка);stroke:var(--card);stroke-width:2}
.к-интерактив-окружность svg .круг{fill:var(--childwash);stroke:var(--child);stroke-width:3}
.к-интерактив-окружность svg .диаметр{stroke:var(--подсветка);stroke-width:3}
.к-интерактив-окружность svg .радиус{stroke:var(--child);stroke-width:4}
.к-интерактив-окружность svg .середина{fill:var(--ink)}
@media(max-width:380px){.к-интерактив-распределения .поле-ползунка{
  grid-template-columns:minmax(0,1fr) var(--отступ-24)}.к-интерактив-распределения .поле-ползунка input{
  grid-column:1/-1;grid-row:2}}