/* Оформление облика «Мастерская».
 *
 * ВСЁ ЗДЕСЬ ЖИВЁТ ПОД `:root[data-облик="мастерская"]`. Нет признака — ни одно
 * правило этого файла не применяется, и нынешний облик остаётся ровно таким,
 * каким был. Это не осторожность, а условие задачи: новый облик — по желанию,
 * старый не должен пострадать ни на точку.
 *
 * ТРИ ПРАВИЛА ОФОРМЛЕНИЯ.
 *
 * 1. СТЕКЛО СЧИТАЕТСЯ ОТ ТЕМЫ, А НЕ ЗАДАЁТСЯ ЧИСЛОМ. Все здешние цвета
 *    выведены `color-mix` из тех же переменных, что и вся программа. Поэтому
 *    «Мастерская» работает во всех пяти темах сразу, и цветные остаются
 *    цветными: не пришлось заводить пять копий одного правила, которые
 *    разойдутся в первый же день.
 * 2. ПУЛЬТ ЛЕЖИТ ПОВЕРХ КАРТИНКИ — ЗНАЧИТ ОН ОБЯЗАН БЫТЬ ЛЁГКИМ. Отсюда
 *    размытие подложки, тонкая светлая кромка (стекло ловит свет ребром) и
 *    один мягкий блик сверху. Плотных заливок во всю панель нет нигде.
 * 3. ЦВЕТ — ТОЛЬКО ТАМ, ГДЕ ОН ЗНАЧИТ. Шапка панели красится своим цветом
 *    (глаз находит «жёлтую» быстрее, чем читает слово «Свет»), тело остаётся
 *    нейтральным: цветное тело полезет в восприятие картинки.
 */

:root[data-облик="мастерская"] {
  /* Подложка стекла: та же, что у панели, но сквозная. 62 % — граница, за
   * которой текст на светлой картинке ещё читается, а картинка сквозь пульт
   * уже видна. */
  /* Стекло, которое ВИДНО. Первая сборка была 62 % — панель выходила почти
   * глухой, и владелец 15.09.2026 спросил прямо: «где прозрачность панелей и
   * стекло? вообще не вижу». Теперь 40 %: картинка сквозь пульт читается, а
   * текст поверх держится за счёт сильного размытия подложки — размытая
   * картинка не спорит с буквами, в отличие от резкой. */
  --мст-стекло: color-mix(in srgb, var(--фон-панели-плотный) 17%, transparent);
  --мст-стекло-плотнее: color-mix(in srgb, var(--фон-панели-плотный) 30%, transparent);
  --мст-стекло-тише: color-mix(in srgb, var(--фон-панели-плотный) 10%, transparent);
  --мст-кромка: color-mix(in srgb, var(--текст) 26%, transparent);
  --мст-кромка-тише: color-mix(in srgb, var(--текст) 14%, transparent);
  --мст-блик: rgba(255, 255, 255, 0.34);
  --мст-блик-слабый: rgba(255, 255, 255, 0.10);
  --мст-тень: 0 20px 48px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.34);
  /* Размытие сильнее и с насыщением: так стекло собирает цвет картинки под
   * собой — то, чем матовое стекло отличается от серой кальки.
   *
   * `brightness` — не украшение, а условие читаемости. Стекло на 40 % честно
   * показывает картинку, но картинка бывает любой светлоты, и серая подпись
   * на ней пропадает. Притемняя подложку ПОД стеклом, мы возвращаем контраст,
   * не отнимая прозрачности: сквозь пульт по-прежнему видно, что под ним. В
   * светлых темах притемнять нечего — там наоборот, подложку осветляем. */
  --мст-размытие: blur(52px) saturate(215%) brightness(0.66);
  --мст-радиус: 14px;
  --мст-радиус-мал: 9px;
}

/* На светлом стекле белый блик почти не виден, зато тень должна быть мягче:
 * тяжёлая тень на светлой теме читается как грязь. */
:root[data-облик="мастерская"][data-тема="светлая"],
:root[data-облик="мастерская"][data-тема="цветная"] {
  --мст-блик: rgba(255, 255, 255, 0.85);
  --мст-блик-слабый: rgba(255, 255, 255, 0.45);
  --мст-тень: 0 16px 38px rgba(30, 40, 50, 0.20), 0 2px 8px rgba(30, 40, 50, 0.12);
  --мст-кромка: color-mix(in srgb, var(--текст) 18%, transparent);
  /* 1,55 высветляло подложку почти в белое, и на светлой теме стекло
   * переставало быть стеклом: панель выходила глухой белой плашкой (видно на
   * снимке владельца 15.09.2026). 1,22 хватает, чтобы серые подписи держались
   * на тёмной картинке, и картинка сквозь панель по-прежнему видна. */
  --мст-размытие: blur(52px) saturate(185%) brightness(1.22);
}

/* ===========================================================================
   1. КАРКАС: рейка тонкая, ленты нет, доки убраны, холст во весь остаток
   ======================================================================== */

/* ВЫСОТУ НИЖНЕЙ СТРОКИ ЗАДАЁТ СТРОКА СЕТКИ, А НЕ САМА СТРОКА.
 *
 * Здесь стояло жёсткое `22px`, и когда строка состояния выросла вдвое ради
 * кадриков истории, она честно выросла — и вылезла на 138 точек ниже окна:
 * сетка держала свой ряд в двадцать две точки, а содержимое из него просто
 * торчало. Замерено 15.09.2026: низ строки 1038 при окне 900.
 *
 * Поэтому рост живёт в РЯДУ. Одно число `--мст-рост-строки` — и ряд, и
 * кадрики, и нижний отступ сцены считают от него одного. */
:root[data-облик="мастерская"] #оболочка {
  grid-template-rows: 36px 1fr var(--мст-рост-строки, 112px);
  grid-template-areas: "верх" "середина" "низ";
}
/* Лента не прячется, а ПЕРЕЕЗЖАЕТ в пятак и разворачивается столбиком.
 * Прятать было бы проще — и тут же отняло бы у половины инструментов их
 * настройки: допуск палочки, шрифт текста, режим ластика живут именно в ней. */
:root[data-облик="мастерская"] .док { display: none; }

:root[data-облик="мастерская"] #верх {
  background: var(--мст-стекло-плотнее);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  border-bottom: 1px solid var(--мст-кромка-тише);
  box-shadow: inset 0 1px 0 var(--мст-блик-слабый);
  gap: 6px;
  /* РЕЙКА В ТРИ ЧАСТИ: режимы всегда по середине окна, что бы ни стояло
     слева и справа (владелец 17.09.2026). */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.мст-верх-лево, .мст-верх-право { display: flex; align-items: center; gap: 6px; min-width: 0; }
.мст-верх-право { justify-content: flex-end; }
:root[data-облик="мастерская"] .мст-верх-лево #кнопка-новый,
:root[data-облик="мастерская"] .мст-верх-лево #кнопка-открыть { display: none; }
:root[data-облик="мастерская"] .мст-верх-право #вкладки { flex: 1 1 auto; min-width: 0; max-width: 100%; }
/* Левая зона вкладок — всё, что осталось слева после облика и темы. */
:root[data-облик="мастерская"] #вкладки-лево { flex: 1 1 auto; min-width: 0; }

/* ЧИСТЫЙ ЦВЕТ — белый на тёмной полосе светлых тем, чёрный на светлой
   полосе тёмных: им красится группа «вектор» столбца даже в цветных темах
   (владелец 17.09.2026). Полоса «Мастерской» перевёрнута относительно
   темы (`color-mix(текст 88%, фон)`), потому чистый — противоположен тексту;
   в обычном облике столбец в цвет темы, и чистый там — просто текст. */
:root { --чистый: var(--текст); }
:root[data-облик="мастерская"] { --чистый: #000000; }
:root[data-облик="мастерская"][data-тема="светлая"],
:root[data-облик="мастерская"][data-тема="цветная"] { --чистый: #ffffff; }
:root[data-облик="мастерская"] #клеймо { padding-left: 74px; font-size: var(--кегль-мелкий); }
:root[data-облик="мастерская"] #вкладки { min-width: 0; }
/* СТРОКА СОСТОЯНИЯ — ВДВОЕ ВЫШЕ, И В НЕЙ ЖИВЁТ ПЛЁНКА ИСТОРИИ.
 *
 * Владелец 15.09.2026: «нижнюю строку состояния расширим в два раза, вместе
 * с текстом туда перенесём раскадровку истории действий с прокруткой».
 *
 * Высота взята не с потолка: миниатюра плёнки читается от 44 точек, плюс
 * по четыре на отступы и кромку — отсюда 56. Текст и числа остаются слева
 * и по высоте не растут: им хватало одной строки и хватает.
 *
 * Плёнка тянется вправо и ПРОКРУЧИВАЕТСЯ вбок: кадриков бывает полсотни, и
 * сжимать их до неразличимости хуже, чем листать. */
:root[data-облик="мастерская"] #низ {
  /* Рост задаёт `поставитьРостСтроки` — одним числом на корне, как и у
     полосы слоёв. Кадрики истории считают свою высоту от него же: две
     отдельные настройки на одну строку разъехались бы в первый же день. */
  --мст-рост-плёнки: calc(var(--мст-рост-строки, 112px) - 6px);
  /* Высоты здесь НЕТ нарочно: её задаёт ряд сетки. Задать её ещё и тут
     значило бы иметь два ответа на один вопрос — и один из них неверный. */
  min-height: 0; overflow: hidden;
  position: relative;
  align-items: stretch; gap: 12px; padding: 3px 10px;
  /* СТРОКА ОТДЕЛЕНА ОТ ПОЛОСЫ СЛОЁВ (владелец 17.09.2026: «не видно
     разделителя с панелью сведений»): своя, более глубокая подложка и
     заметная кромка сверху — полоса слоёв над ней стоит стеклом, строка
     под ней — плотнее и темнее, как подоконник под окном. */
  background: color-mix(in srgb, var(--к-0) 55%, var(--фон));
  border-top: 1px solid color-mix(in srgb, var(--текст) 22%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--текст) 6%, transparent);
  background: var(--мст-стекло-плотнее);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  border-top: 1px solid var(--мст-кромка-тише);
}
/* ТЕКСТ — В НЕСКОЛЬКО СТРОК, А НЕ В ОДНУ С МНОГОТОЧИЕМ.
 *
 * Строка состояния говорит делом: «палитра градиентом — ведите по ней и
 * смотрите, как меняется оттенок». В одну строку такое не влезает никогда и
 * обрывается на середине мысли — то есть не говорит ничего. Высота здесь
 * своя, и место под три строки есть. */
/* Короб сведений — шириной ровно в долю слоёв (минус отступ строки и зазор
   до плёнки): стык сведений и плёнки стоит под стыком слоёв и палитры. */
/* ...НО УСТУПАЕТ ПЛЁНКЕ, КОГДА МЕСТА МАЛО.
 *
 * Ровный стык — вещь хорошая, пока за неё не платит дело. На окне в тысячу
 * точек половина строки уходила под три слова состояния, а плёнке истории
 * оставалось сто девяносто — полтора кадрика (владелец 20.09.2026: «кадры
 * добавляются, но не заполняют собой всю ширину панели»).
 *
 * `flex: 0 2 auto` — не уступать по своей воле, но уступать вдвое охотнее
 * плёнки, когда всем вместе не хватает. Ширина остаётся желаемой: пока окно
 * широкое, стык стоит ровно там, где стык слоёв и палитры, и ничего не
 * съезжает. Ужимается только теснота. */
:root[data-облик="мастерская"] #низ > .мст-сведения {
  flex: 0 2 auto; display: flex; align-items: center; gap: 10px; min-width: 0;
  width: calc(var(--доля-слоёв, 50%) - 22px);
  min-width: 128px; max-width: calc(100% - 202px);
  overflow: hidden;
}
:root[data-облик="мастерская"] #низ .мст-сведения > .мст-весть-кол {
  align-self: center; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
:root[data-облик="мастерская"] #низ .мст-весть-кол > #вести {
  min-width: 0; white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.32; text-overflow: clip;
}
/* Координаты курсора — мелко, под вестью (ui/studio.js). */
:root[data-облик="мастерская"] .мст-курсор {
  display: flex; align-items: baseline; gap: 5px; white-space: nowrap;
  font-size: 10px; line-height: 1.2; color: var(--текст-тише);
}
:root[data-облик="мастерская"] .мст-курсор .значение { font-variant-numeric: tabular-nums; }
/* «Вписать» — квадратная кнопка со значком на месте прежних координат. */
:root[data-облик="мастерская"] .мст-вписать {
  flex: none; align-self: center; width: 26px; height: 26px; padding: 3px;
  border-radius: 7px; border: 1px solid var(--мст-кромка-тише, var(--край));
  background: transparent; color: var(--текст-тише); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
:root[data-облик="мастерская"] .мст-вписать svg { width: 18px; height: 18px; }
:root[data-облик="мастерская"] .мст-вписать:hover { color: var(--текст); border-color: var(--мст-кромка, var(--край-ярче)); }
:root[data-облик="мастерская"] .мст-вписать.главная { background: var(--акцент); color: var(--акцент-текст); border-color: transparent; }

/* Числа столбиками, каждое со своей подписью. Подпись сверху, само число
   под ней: так они читаются парами, а не сплошной лентой цифр. Под числами
   — бегунок масштаба во всю ширину участка и «Вписать» слева от него. */
/* Две строки должны уместиться в 44 точки (рост строки 50 минус отступы):
   числа — 25, бегунок — 14, между ними 2. */
:root[data-облик="мастерская"] .мст-числа {
  align-self: center; flex: none; display: flex; align-items: center; gap: 12px;
}
:root[data-облик="мастерская"] .мст-числа-тело { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:root[data-облик="мастерская"] .мст-числа-ряд { display: flex; gap: 12px; }
:root[data-облик="мастерская"] .мст-масштаб {
  display: flex; align-items: center; gap: 8px; min-width: 0; height: 14px;
}
:root[data-облик="мастерская"] .мст-масштаб .кнопка {
  flex: none; padding: 0 7px; font-size: 9.5px; line-height: 13px; height: 14px; min-height: 0;
}
:root[data-облик="мастерская"] .мст-бегунок-масштаба {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 130px; height: 14px;
  margin: 0; background: transparent; cursor: pointer;
}
:root[data-облик="мастерская"] .мст-бегунок-масштаба::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--текст) 22%, transparent);
}
:root[data-облик="мастерская"] .мст-бегунок-масштаба::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 11px; margin-top: -4px;
  border-radius: 50%; background: var(--акцент); border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
:root[data-облик="мастерская"] .мст-бегунок-масштаба:focus-visible { outline: none; }
:root[data-облик="мастерская"] .мст-число {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
:root[data-облик="мастерская"] .мст-число-имя {
  font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--текст-совсем-тихо); line-height: 1.2;
}
:root[data-облик="мастерская"] .мст-число .значение {
  line-height: 1.2; white-space: nowrap;
}
:root[data-облик="мастерская"] #низ #плёнка-короб {
  /* ПЛЁНКА ПРОСИТ СЕБЕ МЕСТА, А НЕ БЕРЁТ ОСТАТОК.
   *
   * `flex: 1` без основы значило «сколько останется» — и оставалось столько,
   * сколько не взяли соседи. Теперь у плёнки есть желаемая ширина (почти
   * половина строки, но не больше пятисот шестидесяти точек: дальше кадрики
   * всё равно листаются) и втрое большая охота расти. Когда строке тесно,
   * сведения уступают ей (см. `.мст-сведения`), когда просторно — плёнка
   * забирает свободное. */
  flex: 3 1 min(46%, 560px); min-width: 0; height: auto; align-self: stretch;
  /* Кадрики истории — на своей ленте: чуть утопленной, с кромками, чтобы
     плёнка читалась плёнкой, а не россыпью картинок на строке. */
  background: color-mix(in srgb, var(--текст) 5%, transparent); border-top: 0;
  border-left: 1px solid color-mix(in srgb, var(--текст) 12%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--текст) 12%, transparent);
  --рост-плёнки: var(--мст-рост-плёнки);
}
:root[data-облик="мастерская"] #низ .тяга-плёнки { display: none; }

/* Тяга строки — по верхней кромке во всю ширину. Нарисованная полоска
   посередине: ручка, за которую нельзя потянуть, обещает зря, а ручка, о
   которой не сказали, — это её отсутствие. */
.мст-тяга-строки {
  position: absolute; left: 0; right: 0; top: -3px; height: 8px;
  cursor: ns-resize; z-index: 3;
}
.мст-тяга-строки::after {
  content: ""; position: absolute; left: 50%; top: 3px;
  width: 46px; height: 2px; margin-left: -23px; border-radius: 1px;
  background: var(--мст-кромка);
}
.мст-тяга-строки:hover::after { background: var(--акцент); }
/* КАДРИКУ — ВСЯ ВЫСОТА, КАКАЯ ЕСТЬ.
 *
 * В `app.css` кадрик считается как `рост-плёнки минус 26`, и двадцать шесть
 * там расписаны: шесть на тягу, восемь на полосу прокрутки, десять на
 * отступы. В облике ничего этого нет — тяга спрятана, отступов нет, — и
 * вычитание отнимало у картинки половину. Замерено 15.09.2026 при строке 62:
 * кадрик выходил 36×24, то есть из шестидесяти двух точек ему доставалось
 * двадцать четыре. Владелец: «панель очень высокая, но кадры истории
 * мелкие».
 *
 * Здесь вычитаем только то, что вправду занято: восемь точек под полосу
 * прокрутки, которая появляется, когда кадриков много.
 *
 * `align-items: stretch`, а не `center`: по центру ряд оставался своей
 * природной высоты и не растягивался вовсе — вторая половина той же беды. */
:root[data-облик="мастерская"] #низ .нутро-плёнки {
  padding: 0; align-items: stretch; gap: 4px;
}
:root[data-облик="мастерская"] #низ .плёнка {
  align-items: center; padding: 0;
}
:root[data-облик="мастерская"] #низ .кадрик {
  height: calc(var(--рост-плёнки, 72px) - 8px);
  max-width: calc(var(--рост-плёнки, 72px) * 2.6);
}
/* Листалки не тянутся во всю высоту: кнопка в полсотни точек ростом выглядит
   колонной. Держим их по центру своей природной высоты. */
:root[data-облик="мастерская"] #низ .листать { align-self: center; }
/* Лента кадриков прокручивается вбок сама — листалки при этом остаются:
   мышью листают кнопкой, пальцем и трекпадом протягивают. */
:root[data-облик="мастерская"] #низ .нутро-плёнки > *:not(.листать) {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
:root[data-облик="мастерская"] #низ .нутро-плёнки > *:not(.листать)::-webkit-scrollbar {
  height: 6px;
}
:root[data-облик="мастерская"] #низ .нутро-плёнки > *:not(.листать)::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--текст) 22%, transparent);
  border-radius: 3px;
}
:root[data-облик="мастерская"] #низ .нутро-плёнки > *:not(.листать)::-webkit-scrollbar-track {
  background: transparent;
}

/* --- режимы-задачи в рейке --- */
.мст-режимы {
  display: flex; gap: 2px; margin: 0 auto; flex: none;
  padding: 2px; border-radius: 10px;
  background: color-mix(in srgb, var(--к-0) 45%, transparent);
  border: 1px solid var(--мст-кромка-тише);
}
/* РЕЖИМ — СВОЕЙ КРАСКОЙ, БЛЕДНО; ВЫБРАННЫЙ — ЯРКО. Прежде краска стояла
   квадратиком слева от слова, и только в цветных темах (владелец
   17.09.2026: «мелкие квадратики — плохая реализация; пусть кнопки сразу
   будут тем цветом, который у них есть, но бледнее, а при выборе яркие»).
   Теперь во всех темах: подложка — краска в шестую силы, слово — краской,
   выбранный — сплошная краска с читаемым по ней текстом. */
.мст-режим {
  --краска-режима: var(--акцент);
  height: 22px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px;
  background: color-mix(in srgb, var(--краска-режима) 16%, transparent);
  color: color-mix(in srgb, var(--краска-режима) 78%, var(--текст));
  font: inherit; font-size: var(--кегль-мелкий); font-weight: 560; cursor: default;
  white-space: nowrap;
  transition: background var(--скорость) var(--кривая), color var(--скорость) var(--кривая);
}
.мст-режим:hover {
  background: color-mix(in srgb, var(--краска-режима) 30%, transparent);
  color: var(--текст);
}
.мст-режим[data-выбран] {
  background: var(--краска-режима); color: var(--текст-на-режиме, #fff);
  box-shadow: 0 1px 0 var(--мст-блик-слабый) inset, 0 2px 8px color-mix(in srgb, var(--краска-режима) 45%, transparent);
}
/* Режим сменился сам — за взятым инструментом (ui/studio.js,
 * `режимЗаИнструментом`): кнопка вспыхивает, чтобы переход не прошёл молча. */
.мст-режим[data-мигнул] { animation: мст-режим-мигнул 1.1s var(--кривая, ease) 1; }
@keyframes мст-режим-мигнул {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--краска-режима) 55%, transparent); }
  60% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--краска-режима) 30%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .мст-режим[data-мигнул] { animation: none; } }
.мст-тишина svg { width: 15px; height: 15px; }

/* ===========================================================================
   2. СТОЛБЕЦ ИНСТРУМЕНТОВ: одна полоса, по кнопке на группу
   ======================================================================== */

/* ДВЕ ПОЛОСЫ: ИНСТРУМЕНТЫ И ПОЛКА ПАНЕЛЕЙ.
 *
 * Обе прислоняются к любому из четырёх краёв и обе одинаково тонкие —
 * двадцать восемь точек, как кнопка полки. У левого и правого края стоят
 * столбиком, у верхнего и нижнего ложатся строкой. Где именно — ставит
 * `разложитьПолосы` в studio.js: по краю они встают друг за другом, и одним
 * оформлением этого не выразить. */
:root[data-облик="мастерская"] .мст-полоса {
  position: absolute; z-index: 30; width: auto; height: auto;
  flex-direction: column; align-items: center; padding: 5px; gap: 3px;
  border-radius: var(--мст-радиус); border: 1px solid var(--мст-кромка);
  box-shadow: var(--мст-тень), inset 0 1px 0 var(--мст-блик);
  cursor: grab; overflow: visible; max-height: none;
}
/* ТОЛЩИНА ЗАДАНА ЧИСЛОМ, А НЕ «ПО СОДЕРЖИМОМУ».
 *
 * Полоса — плавающая, и её ширина считалась бы сжатием по содержимому. Это
 * место, где движки расходятся легче всего, а проверять оформление надо там,
 * где программа живёт. Сорок точек: кнопка 28 плюс отступы по пять плюс
 * кромка. Обе полосы одинаковы по определению, а не по совпадению. */
:root[data-облик="мастерская"] .мст-полоса[data-край="слева"],
:root[data-облик="мастерская"] .мст-полоса[data-край="справа"],
:root[data-облик="мастерская"] #инструменты[data-край="слева"],
:root[data-облик="мастерская"] #инструменты[data-край="справа"] {
  width: 40px; height: auto;
  /* ВЫШЕ СВОБОДНОГО МЕСТА ПОЛОСА НЕ РАСТЁТ. Нижняя полоса с цветом и слоями
   * — не «фон», под неё нельзя заезжать: там живые кнопки. Полоса в две
   * колонки инструментов длиннее сцены, и низ уходил под палитру. Теперь
   * потолок — свободная высота, а что не влезло, достаётся прокруткой.
   * (Кнопок пока много; когда их станет меньше, прокрутка просто перестанет
   * появляться.) */
  max-height: calc(100% - var(--рост-низа, 112px) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  /* Полосу прокрутки показываем ТОЛЬКО ПОД РУКОЙ: постоянная съедала бы
   * четверть ширины сорокаточечной полосы и спорила бы со значками. */
  scrollbar-width: none;
}
:root[data-облик="мастерская"] .мст-полоса[data-край="слева"]:hover,
:root[data-облик="мастерская"] .мст-полоса[data-край="справа"]:hover,
:root[data-облик="мастерская"] #инструменты[data-край="слева"]:hover,
:root[data-облик="мастерская"] #инструменты[data-край="справа"]:hover {
  scrollbar-width: thin;
}
:root[data-облик="мастерская"] .мст-полоса[data-край="слева"]::-webkit-scrollbar,
:root[data-облик="мастерская"] .мст-полоса[data-край="справа"]::-webkit-scrollbar,
:root[data-облик="мастерская"] #инструменты[data-край="слева"]::-webkit-scrollbar,
:root[data-облик="мастерская"] #инструменты[data-край="справа"]::-webkit-scrollbar {
  width: 0;
}
:root[data-облик="мастерская"] .мст-полоса[data-край="слева"]:hover::-webkit-scrollbar,
:root[data-облик="мастерская"] .мст-полоса[data-край="справа"]:hover::-webkit-scrollbar,
:root[data-облик="мастерская"] #инструменты[data-край="слева"]:hover::-webkit-scrollbar,
:root[data-облик="мастерская"] #инструменты[data-край="справа"]:hover::-webkit-scrollbar {
  width: 6px;
}
:root[data-облик="мастерская"] .мст-полоса[data-край="сверху"],
:root[data-облик="мастерская"] .мст-полоса[data-край="снизу"],
:root[data-облик="мастерская"] #инструменты[data-край="сверху"],
:root[data-облик="мастерская"] #инструменты[data-край="снизу"] {
  height: 40px; width: auto;
}

/* Тяга, которой в обычном облике ленту раскладывают в две-три колонки, здесь
   не нужна и вредна: полосу двигают целиком, а не растягивают. Убираем и
   ручку — иначе случайная потяжка вернула бы встроенную ширину, которую
   «Мастерская» сняла при включении. */
:root[data-облик="мастерская"] .тяга-ленты { display: none; }

:root[data-облик="мастерская"] .мст-полоса[data-край="сверху"],
:root[data-облик="мастерская"] .мст-полоса[data-край="снизу"],
/* Столбец — ещё и по идентификатору: в app.css у него `flex-direction:
   column`, и правило по классу его не перебивает. Это уже третья мелочь
   подряд, отнятая у столбца идентификатором из app.css: ширина, положение,
   теперь направление. Правило простое — всё, что меняем у `#инструменты`,
   пишем с идентификатором. */
:root[data-облик="мастерская"] #инструменты[data-край="сверху"],
:root[data-облик="мастерская"] #инструменты[data-край="снизу"] { flex-direction: row; }
:root[data-облик="мастерская"] .мст-полоса[data-едет] {
  cursor: grabbing; opacity: 0.92; transition: none; transform: none;
}

/* ПОЛКА — стеклянная, как пульты: она про панели, и место ей среди них. */
:root[data-облик="мастерская"] .мст-полка {
  background: var(--мст-стекло-тише);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  overflow: visible;
}

/* СТОЛБЕЦ ИНСТРУМЕНТОВ — НАОБОРОТ, КОНТРАСТНЫЙ ТЕМЕ.
 *
 * Владелец 15.09.2026: «панели нужно как-то визуально отделить; пусть с
 * инструментами будет всегда контрастна к теме — в тёмной она светлая и
 * наоборот».
 *
 * Выходит само собой: подложка считается от цвета ТЕКСТА темы, а он по
 * определению противоположен фону. В тёмной теме текст светлый — полоса
 * светлая; в светлой тёмный — полоса тёмная. Значки и подписи на ней берут
 * цвет фона, то есть тоже переворачиваются. Стекла здесь нет намеренно:
 * из всей оболочки эта полоса одна должна читаться как отдельный предмет,
 * а не как ещё одно окно поверх картинки. */
:root[data-облик="мастерская"] #инструменты {
  /* И ширина, и положение задаются ЗДЕСЬ, с идентификатором. В app.css у
   * столбца свои `width: 46px` и `position: relative`, а идентификатор
   * сильнее любого числа классов: правило по `.мст-полоса` их не перебивало.
   * На этом полоса сперва осталась широкой, а потом и вовсе распёрлась во
   * всю сцену — `relative` вернул её в поток. */
  position: absolute; z-index: 30; width: auto; height: auto;
  /* Отступ тоже здесь: в app.css у столбца `padding: 6px 0`, и полоса
   * выходила уже полки на десять точек. Четвёртая мелочь, отнятая
   * идентификатором. */
  padding: 5px; gap: 3px;
  background: color-mix(in srgb, var(--текст) 88%, var(--фон));
  border-color: color-mix(in srgb, var(--текст) 55%, transparent);
  box-shadow: var(--мст-тень), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root[data-облик="мастерская"] #инструменты .инструмент {
  color: color-mix(in srgb, var(--фон) 88%, var(--текст));
}
:root[data-облик="мастерская"] #инструменты .инструмент:hover {
  background: color-mix(in srgb, var(--фон) 22%, transparent);
  color: var(--фон);
}
:root[data-облик="мастерская"] #инструменты .инструмент[data-выбран] {
  background: var(--акцент); border-color: transparent; color: var(--акцент-текст);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--акцент) 45%, transparent);
}
:root[data-облик="мастерская"] .мст-уголок::after {
  border-bottom-color: color-mix(in srgb, var(--фон) 65%, transparent);
}

/* ДВА СТОЛБЦА (владелец 17.09.2026: «либо растянуть — тогда не скрывать,
 * но грамотно рассортировать»): сетка в две кнопки, каждый инструмент своей
 * кнопкой; черты групп и тумблер — во всю ширину. Ширина — по содержимому,
 * а не сорок точек: правило по идентификатору перебивает то, что выше. */
:root[data-облик="мастерская"] #инструменты[data-два][data-край="слева"],
:root[data-облик="мастерская"] #инструменты[data-два][data-край="справа"] {
  display: grid; grid-template-columns: repeat(2, 28px); grid-auto-flow: row; gap: 3px; width: auto;
}
:root[data-облик="мастерская"] #инструменты[data-два][data-край="сверху"],
:root[data-облик="мастерская"] #инструменты[data-два][data-край="снизу"] {
  display: grid; grid-template-rows: repeat(2, 28px); grid-auto-flow: column; gap: 3px; height: auto;
}
/* Черта между группами — короткая и тихая; имена групп всплывают подписями
 * справа, пока курсор над столбцом (владелец 17.09.2026: подписи «появлялись
 * справа от панели при наведении и скрывались при убирании»). */
.мст-черта { flex: none; background: color-mix(in srgb, var(--фон) 28%, transparent); border-radius: 1px; }
:root[data-облик="мастерская"] #инструменты[data-край="слева"] .мст-черта,
:root[data-облик="мастерская"] #инструменты[data-край="справа"] .мст-черта { height: 1px; margin: 1px 6px; }
:root[data-облик="мастерская"] #инструменты[data-край="сверху"] .мст-черта,
:root[data-облик="мастерская"] #инструменты[data-край="снизу"] .мст-черта { width: 1px; margin: 3px 1px; align-self: stretch; }
:root[data-облик="мастерская"] #инструменты[data-два][data-край="слева"] .мст-черта,
:root[data-облик="мастерская"] #инструменты[data-два][data-край="справа"] .мст-черта { grid-column: 1 / -1; }
:root[data-облик="мастерская"] #инструменты[data-два][data-край="сверху"] .мст-черта,
:root[data-облик="мастерская"] #инструменты[data-два][data-край="снизу"] .мст-черта { grid-row: 1 / -1; }
/* СТОЛБЕЦ НЕ ВЫШЕ СЦЕНЫ: лишнее прокручивается само у краёв (ui/column.js),
 * полоса прокрутки не показывается, у краёв — тень, что там есть ещё. */
:root[data-облик="мастерская"] #инструменты[data-край="слева"],
:root[data-облик="мастерская"] #инструменты[data-край="справа"] {
  max-height: calc(100% - var(--поле-сверху, 12px) - var(--поле-снизу, 124px) - 24px);
  overflow: auto; scrollbar-width: none;
}
:root[data-облик="мастерская"] #инструменты[data-край="сверху"],
:root[data-облик="мастерская"] #инструменты[data-край="снизу"] {
  max-width: calc(100% - 24px); overflow: auto; scrollbar-width: none;
}
#инструменты::-webkit-scrollbar { display: none; }
#инструменты[data-выше] { box-shadow: inset 0 18px 14px -12px rgba(0, 0, 0, 0.55); }
#инструменты[data-ниже] { box-shadow: inset 0 -18px 14px -12px rgba(0, 0, 0, 0.55); }
#инструменты[data-выше][data-ниже] { box-shadow: inset 0 18px 14px -12px rgba(0, 0, 0, 0.55), inset 0 -18px 14px -12px rgba(0, 0, 0, 0.55); }
:root[data-облик="мастерская"] #инструменты[data-выше] { box-shadow: var(--мст-тень), inset 0 18px 14px -12px rgba(0, 0, 0, 0.55); }
:root[data-облик="мастерская"] #инструменты[data-ниже] { box-shadow: var(--мст-тень), inset 0 -18px 14px -12px rgba(0, 0, 0, 0.55); }
:root[data-облик="мастерская"] #инструменты[data-выше][data-ниже] { box-shadow: var(--мст-тень), inset 0 18px 14px -12px rgba(0, 0, 0, 0.55), inset 0 -18px 14px -12px rgba(0, 0, 0, 0.55); }

/* Подписи групп — справа от столбца, пока над ним курсор: краской группы,
 * каждая напротив первой кнопки своей группы. Сквозные для мыши. */
.мст-подписи { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.мст-подпись {
  position: absolute; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: lowercase;
  /* НЕПРОЗРАЧНАЯ: сквозь стекло поверх пультов справа она не читалась
     (владелец 17.09.2026). Подложка — почти фон, буквы — краской группы. */
  color: var(--цвет-группы, var(--текст)); background: color-mix(in srgb, var(--фон) 94%, var(--текст));
  border: 1px solid color-mix(in srgb, var(--цвет-группы, var(--текст)) 60%, transparent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  animation: мст-подпись-всплыть 120ms var(--кривая, ease-out);
}
@keyframes мст-подпись-всплыть { from { opacity: 0; transform: translateY(-50%) translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .мст-подпись { animation: none; } }

/* Тумблер «один ⇄ два столбца» — тихая кнопка в хвосте полосы. */
.мст-столбец-вид {
  flex: none; height: 16px; padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: color-mix(in srgb, var(--фон) 55%, transparent); display: grid; place-items: center; cursor: default;
}
.мст-столбец-вид svg { width: 14px; height: 14px; }
.мст-столбец-вид:hover { background: color-mix(in srgb, var(--фон) 22%, transparent); color: var(--фон); }
/* Главный инструмент (перемещение) в два столбца занимает оба и стоит по
   середине: к нему возвращаются после каждого другого. */
:root[data-облик="мастерская"] #инструменты[data-два][data-край="слева"] .мст-гнездо[data-главный],
:root[data-облик="мастерская"] #инструменты[data-два][data-край="справа"] .мст-гнездо[data-главный] {
  grid-column: 1 / -1; justify-self: center;
}
:root[data-облик="мастерская"] #инструменты[data-два][data-край="сверху"] .мст-гнездо[data-главный],
:root[data-облик="мастерская"] #инструменты[data-два][data-край="снизу"] .мст-гнездо[data-главный] {
  grid-row: 1 / -1; align-self: center;
}

:root[data-облик="мастерская"] #инструменты[data-два][data-край="слева"] .мст-столбец-вид,
:root[data-облик="мастерская"] #инструменты[data-два][data-край="справа"] .мст-столбец-вид { grid-column: 1 / -1; }
:root[data-облик="мастерская"] #инструменты[data-два][data-край="сверху"] .мст-столбец-вид,
:root[data-облик="мастерская"] #инструменты[data-два][data-край="снизу"] .мст-столбец-вид { grid-row: 1 / -1; width: 16px; height: auto; }

/* Обе полосы — одной толщины: кнопка 28, значок 17. */
:root[data-облик="мастерская"] #инструменты .инструмент,
.мст-гнездо .инструмент { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.мст-гнездо .инструмент svg { width: 17px; height: 17px; }
.мст-уголок { width: 11px; height: 11px; border-bottom-right-radius: 8px; }
.мст-уголок::after { right: 2px; bottom: 2px; border-left-width: 4px; border-bottom-width: 4px; }

/* Куда ляжет, если отпустить: подсветка стороны. Бросок иначе вслепую —
   столбец под рукой, а решает ближайший край сцены. */
#сцена[data-куда]::before {
  content: ""; position: absolute; z-index: 29; pointer-events: none;
  background: linear-gradient(var(--акцент), transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--акцент) 55%, transparent);
}
#сцена[data-куда="слева"]::before { left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(90deg, var(--акцент), transparent); }
#сцена[data-куда="справа"]::before { right: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(270deg, var(--акцент), transparent); }
#сцена[data-куда="сверху"]::before { left: 0; right: 0; top: 0; height: 5px; }
#сцена[data-куда="снизу"]::before { left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(0deg, var(--акцент), transparent); }
.мст-гнездо { position: relative; flex: none; }
/* Размеры кнопки и значка заданы выше, в разделе про полосы: обе полосы
 * одной толщины. Здесь их когда-то задавали второй раз — и, стоя ниже,
 * тихо перебивали: столбец оставался жирным, сколько его ни утоньшай. */
/* Буква инструмента в столбце не нужна: на кнопке группы она врёт — под ней
 * лежат разные инструменты с разными буквами. Буквы видны в веере. */
.мст-гнездо .инструмент .буква { display: none; }
.мст-гнездо .инструмент[data-выбран] {
  background: color-mix(in srgb, var(--акцент) 22%, transparent);
  border-color: color-mix(in srgb, var(--акцент) 55%, transparent);
  color: var(--текст);
  box-shadow: inset 0 1px 0 var(--мст-блик-слабый);
}
/* Уголок — кнопка: по нему щёлкают, чтобы увидеть остальные инструменты
 * группы. Треугольник рисуется вставкой, кнопка вокруг держит площадь для
 * попадания: это не основное действие, а подсказка «здесь есть ещё».
 * Размеры — выше, в разделе про полосы. */
.мст-уголок {
  position: absolute; right: 0; bottom: 0;
  padding: 0; border: 0; background: transparent; cursor: default;
}
.мст-уголок::after {
  content: ""; position: absolute;
  width: 0; height: 0; border-left-style: solid; border-left-color: transparent;
  border-bottom-style: solid;
  border-bottom-color: color-mix(in srgb, var(--текст) 45%, transparent);
}
.мст-уголок:hover::after { border-bottom-color: var(--акцент); }
.мст-уголок:hover { background: color-mix(in srgb, var(--акцент) 18%, transparent); }

/* веер группы */
.мст-веер {
  position: fixed; z-index: 70; padding: 8px;
  border-radius: var(--мст-радиус); border: 1px solid var(--мст-кромка);
  background: var(--мст-стекло-плотнее);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  box-shadow: var(--мст-тень), inset 0 1px 0 var(--мст-блик);
  animation: мст-вылет 140ms var(--кривая);
}
@keyframes мст-вылет {
  from { opacity: 0; transform: translateX(-6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.мст-веер-имя {
  font-size: var(--кегль-мелкий); color: var(--текст-совсем-тихо);
  padding: 0 4px 6px; letter-spacing: 0.04em; text-transform: uppercase;
}
.мст-веер-ряд { display: flex; gap: 3px; }
.мст-веер-ряд .инструмент { width: 32px; height: 32px; border-radius: 9px; }

/* ===========================================================================
   3. ПУЛЬТЫ: стеклянные панели поверх холста
   ======================================================================== */

/* ПУЛЬТ СТОИТ САМ ПО СЕБЕ. Ни столбцов, ни очереди: у каждого своё место в
 * сцене, и место это двигают за шапку. Ширина одна на всех — пульты разной
 * ширины рядом читаются как сбой вёрстки, а не как расстановка. */
.мст-пульт {
  position: absolute; z-index: 24; width: 272px;
  max-height: calc(100% - var(--поле-сверху, 12px) - var(--поле-снизу, 124px) - 24px);
  min-height: 0; display: flex; flex-direction: column;
  border-radius: var(--мст-радиус);
  border: 1px solid var(--мст-кромка);
  background: var(--мст-стекло);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  box-shadow: var(--мст-тень), inset 0 1px 0 var(--мст-блик), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.мст-пульт[data-едет] {
  z-index: 34; box-shadow: var(--мст-тень), 0 0 0 1px var(--акцент);
  transition: none;
}
/* Пульт кистей — «список»: содержимого в нём всегда больше, чем места, и
 * без потолка он занял бы весь столбец, ужав слои до минимума. */
.мст-пульт[data-id="кисти"] {
  max-height: min(calc(100% - var(--поле-сверху, 12px) - var(--поле-снизу, 124px) - 24px), 760px);
}
.мст-пульт .шапка-панели { cursor: grab; }
.мст-пульт[data-едет] .шапка-панели { cursor: grabbing; }
/* Блик: одна мягкая полоса света по верхней кромке — то, чем стекло
 * отличается от матового пластика. Мышь сквозь неё проходит. */
.мст-пульт::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(158deg, var(--мст-блик) 0%, transparent 12%),
    radial-gradient(90% 34% at 16% -8%, var(--мст-блик-слабый), transparent 62%);
  opacity: 0.85;
}
.мст-пульт > * { position: relative; z-index: 1; }

.мст-пульт .шапка-панели {
  background: color-mix(in srgb, var(--к-0) 26%, transparent);
  border-bottom: 1px solid var(--мст-кромка-тише);
  height: 30px;
}
:root[data-облик="мастерская"][data-краски] .мст-пульт[data-цвет] .шапка-панели {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--цвет-панели) 88%, transparent),
    color-mix(in srgb, var(--цвет-панели) 68%, transparent));
  border-bottom-color: color-mix(in srgb, var(--цвет-панели) 40%, transparent);
}
.мст-пульт .тело-панели {
  background: transparent;
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
}
.мст-пульт .шапка-панели .замок,
.мст-пульт .шапка-панели .домой,
.мст-пульт .шапка-панели .разлепить { display: none; }

/* --- полка панелей: такая же полоса, как столбец (вид — выше, место — JS) --- */
.мст-полка {
  display: flex; gap: 3px;
  /* Полка длиннее столбца: панелей семнадцать. Прокрутку ей оставляем, но
   * не даём выйти за поля сцены. */
  max-height: calc(100% - var(--поле-снизу, 124px) - 24px);
  overflow-y: auto; scrollbar-width: none;
}
.мст-полка::-webkit-scrollbar { display: none; }
.мст-полочка {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--текст-совсем-тихо); display: grid; place-items: center; cursor: default;
  transition: background var(--скорость) var(--кривая), color var(--скорость) var(--кривая);
}
.мст-полочка svg { width: 17px; height: 17px; }
.мст-полочка:hover { background: color-mix(in srgb, var(--текст) 12%, transparent); color: var(--текст); }
/* ОТКРЫТАЯ ПАНЕЛЬ СВЕТИТСЯ: подложка — краска панели, значок — светлый,
 * вокруг мягкое свечение той же краски (владелец 17.09.2026: «включённые
 * кнопки должны светиться светлой иконкой, показывая, что включена»). Все
 * прочие — одноцветные. */
.мст-полочка[data-открыта] {
  --свет: var(--цвет-полочки, var(--акцент));
  background: var(--свет);
  border-color: color-mix(in srgb, var(--свет) 70%, #fff);
  color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--свет) 35%, transparent),
              0 0 10px color-mix(in srgb, var(--свет) 55%, transparent);
}
.мст-полочка[data-открыта]:hover { background: color-mix(in srgb, var(--свет) 85%, #fff); color: #ffffff; }
/* Полка группами: панели своего режима — первые и чуть светлее значком,
 * общие — обычные, чужие — глуше; между группами черта. */
.мст-полочка[data-род="своя"] { color: var(--текст-тише); }
.мст-полочка[data-род="чужая"] { opacity: 0.55; }
.мст-полочка[data-род="чужая"]:hover { opacity: 1; }
.мст-полка-черта {
  flex: none; width: 18px; height: 1px; margin: 3px auto;
  background: color-mix(in srgb, var(--текст) 22%, transparent);
}
/* На горизонтальной полке черта стоит поперёк. */
.мст-полка[data-край="сверху"] .мст-полка-черта, .мст-полка[data-край="снизу"] .мст-полка-черта { width: 1px; height: 18px; margin: auto 3px; }

/* ===========================================================================
   4. ЯРЛЫК «НА КАКОМ СЛОЕ ПИШЕМ»
   ======================================================================== */

/* По середине СВОБОДНОГО поля, а не сцены: столбец слева и полка справа
   съедают разную ширину, и лист, вписанный между ними, стоял бы не под
   ярлыком (владелец 17.09.2026: «капсула названия слоя не ровно»). */
.мст-ярлык-слоя {
  position: absolute; top: calc(var(--поле-сверху, 0px) + 10px); transform: translateX(-50%);
  left: calc(var(--поле-слева, 0px) + (100% - var(--поле-слева, 0px) - var(--поле-справа, 0px)) / 2);
  z-index: 26; pointer-events: none;
  display: flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 12px; border-radius: 12px;
  font-size: var(--кегль-мелкий); color: var(--текст-тише);
  background: var(--мст-стекло-тише);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--мст-кромка-тише);
  box-shadow: inset 0 1px 0 var(--мст-блик-слабый);
}
.мст-ярлык-слоя::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--добро); box-shadow: 0 0 8px var(--добро);
}
.мст-ярлык-слоя[data-лад="внимание"] { color: var(--внимание); }
.мст-ярлык-слоя[data-лад="внимание"]::before { background: var(--внимание); box-shadow: 0 0 8px var(--внимание); }
.мст-ярлык-слоя[data-лад="маска"] { color: var(--текст); }
.мст-ярлык-слоя[data-лад="маска"]::before {
  background: linear-gradient(to right, #111 50%, #fff 50%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--текст) 45%, transparent);
}
.мст-ярлык-слоя[data-лад="беда"] { color: var(--беда); }
.мст-ярлык-слоя[data-лад="беда"]::before { background: var(--беда); box-shadow: 0 0 8px var(--беда); }

/* ===========================================================================
   5. НИЖНЯЯ ПОЛОСА: слои и плёнка истории в одной строке
   ======================================================================== */

.мст-низ {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 26;
  display: flex; min-width: 0;
  /* Рост живёт ОДНИМ числом, и от него же считают свою высоту карточки слоёв
   * и миниатюры плёнки: тяга за верхнюю кромку двигает всё разом. Тот же
   * приём, что у `--рост-плёнки` в обычном облике. */
  height: var(--рост-низа, 112px);
  border-top: 1px solid var(--мст-кромка-тише);
  background: var(--мст-стекло-плотнее);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  box-shadow: inset 0 1px 0 var(--мст-блик-слабый);
}
/* ПРОЗРАЧНОСТЬ СЛОЯ — СТОЛБИКОМ У ЛЕВОГО КРАЯ ПОЛОСЫ.
   Тридцать точек по ширине: больше здесь взять неоткуда, полосу делят
   карточки слоёв и палитра. Зато по высоте столбик берёт всё, и попасть в
   него легко даже мышью. */
.мст-прозрачность {
  flex: none; width: 30px; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0 7px;
}
.мст-прозрачность[data-нет="1"] { opacity: 0.4; pointer-events: none; }
.мст-прозрачность > .полоса {
  position: relative; flex: 1 1 auto; min-height: 24px; width: 8px;
  border-radius: 5px; cursor: ns-resize;
  border: 1px solid var(--мст-кромка-тише);
  /* Клетка под наливом: прозрачность видна прозрачностью, как в показе
     мазка (см. `обликКисти`), а не «светлым цветом». */
  background-color: var(--мст-стекло);
  background-image:
    linear-gradient(45deg, var(--мст-блик-слабый) 25%, transparent 25%),
    linear-gradient(-45deg, var(--мст-блик-слабый) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--мст-блик-слабый) 75%),
    linear-gradient(-45deg, transparent 75%, var(--мст-блик-слабый) 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}
.мст-прозрачность > .полоса > .налив {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: 4px; background: var(--акцент); pointer-events: none;
}
.мст-прозрачность > .полоса > .ручка {
  position: absolute; left: 50%; width: 14px; height: 14px;
  margin-left: -7px; margin-bottom: -7px; border-radius: 50%;
  background: var(--мст-стекло-плотнее); border: 1px solid var(--мст-кромка);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.мст-прозрачность > .цифра {
  flex: none; font-size: 9px; color: var(--текст-совсем-тихо);
  font-variant-numeric: tabular-nums;
}
/* Полоса ужата до предела — число прячем, столбик остаётся рабочим. */
:root[data-облик="мастерская"] .мст-низ[data-мелко] .мст-прозрачность > .цифра { display: none; }

/* Ширина слоёв — долей полосы (`--доля-слоёв`), половина по умолчанию;
   долю ставит и запоминает `поставитьДолюСлоёв`. Палитре остаётся не меньше
   ста восьмидесяти: поле цвета уже этого — не поле, а полоска. */
.мст-слои {
  width: var(--доля-слоёв, 50%); flex: none; min-width: 150px;
  max-width: calc(100% - 180px);
  display: flex; flex-direction: column; min-height: 0;
}
.мст-полоса-шапка {
  position: relative;
  display: flex; align-items: center; gap: 8px; padding: 5px 10px 2px; flex: none;
}
/* Имя полосы — ПО СЕРЕДИНЕ СТРОКИ, а не в потоке (владелец 15.09.2026).
   В потоке оно центрируется в остатке после кнопок и оказывается левее
   середины ровно настолько, чтобы это было заметно. Поверх строки — и
   насквозь для указателя, чтобы не отнимать щелчки у кнопок под ним. */
.мст-полоса-имя {
  position: absolute; inset: 0;
  display: grid; place-items: center; pointer-events: none;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--текст-совсем-тихо);
}
.мст-полоса-кнопки { margin-left: auto; display: flex; gap: 3px; }
/* Слева от имени — кнопки нынешнего слоя; имя остаётся по середине строки
   и лежит поверх, насквозь для указателя. */
.мст-полоса-кнопки-слева { margin-left: 0; margin-right: auto; }
.мст-кнопочка {
  width: 24px; height: 24px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--текст-тише); display: grid; place-items: center;
  cursor: default;
}
.мст-кнопочка svg { width: 16px; height: 16px; }
.мст-кнопочка:hover {
  background: color-mix(in srgb, var(--текст) 12%, transparent); color: var(--текст);
  border-color: var(--мст-кромка-тише);
}
/* Включённое состояние (слой спрятан, слой заперт) — кнопка горит краской
   предупреждения: это ответ на вопрос «почему не рисуется». */
.мст-кнопочка[data-включена] {
  background: color-mix(in srgb, var(--внимание, #e0a030) 22%, transparent);
  border-color: color-mix(in srgb, var(--внимание, #e0a030) 55%, transparent);
  color: var(--текст);
}

/* Два набора кнопок в шапке полосы: для слоя и для маски. Показан один —
   тот, куда сейчас пишет кисть (см. `обновитьКнопкиМаски` в studio.js). */
.мст-набор-кнопок { display: flex; gap: 3px; }
.мст-набор-кнопок[hidden] { display: none; }
/* Кнопки маски, пока они на виду, отделены от кнопки панели чертой: это
   другой набор, и глазу нужен шов. */
#мст-кнопки-маски { padding-right: 4px; border-right: 1px solid var(--мст-кромка-тише); }

.мст-слои-лента {
  flex: 1; min-height: 0; display: flex; gap: 6px; padding: 2px 10px 8px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; align-items: stretch;
}

/* карточка слоя */
/* Тяга за верхнюю кромку полосы. Шесть точек — столько же, сколько у тяги
 * плёнки в обычном облике: рука уже знает эту величину. */
.мст-тяга-роста {
  position: absolute; left: 0; right: 0; top: -2px; height: 7px;
  cursor: ns-resize; z-index: 6;
}
.мст-тяга-роста::after {
  content: ""; position: absolute; left: 50%; top: 3px;
  width: 46px; height: 2px; margin-left: -23px; border-radius: 1px;
  background: var(--мст-кромка); opacity: 0.55;
}
.мст-тяга-роста:hover::after { opacity: 1; background: var(--акцент); }

.мст-слой {
  position: relative; flex: none; overflow: hidden;
  width: calc(var(--рост-низа, 112px) * 0.78);
  min-width: 46px; max-width: 132px;
  /* НИ ОТСТУПА, НИ ВТОРОЙ РАМКИ.
     Было так: рамка у карточки, отступ 4 со всех сторон и ЕЩЁ рамка у самой
     миниатюры. Три обводки на одну картинку — это десять точек ширины и
     десять высоты, отнятых у того единственного, ради чего карточка и
     существует. Владелец 15.09.2026: «на панели и так места мало, а ты ещё
     толстую рамку для миниатюр сделал». Рамка осталась одна — у карточки;
     она же показывает выбор. */
  display: flex; flex-direction: column; padding: 0;
  border-radius: var(--мст-радиус-мал); border: 1px solid var(--мст-кромка-тише);
  background: color-mix(in srgb, var(--к-0) 30%, transparent);
  cursor: default;
  transition: border-color var(--скорость) var(--кривая), background var(--скорость) var(--кривая);
}
.мст-слой:hover { border-color: var(--мст-кромка); }
/* СЛОЙ С МАСКОЙ — ГНЕЗДОМ: карточка, связка, миниатюра маски.
   Маска меньше слоя на треть и стоит рядом, а не поверх: она относится к
   слою, но живёт своей жизнью — её рисуют, выключают и выворачивают
   (владелец 22.09.2026). Связка — короткая черта, единственный дешёвый
   способ сказать «это его», не рисуя рамок вокруг обоих. */
/* Плашка «История выделенной области ⇄ Вся история» у плёнки, только при
   выделении. ПЛАВАЕТ НА ВЕРХНЕЙ КРОМКЕ по центру, а не стоит строкой: короб
   плёнки — столбик, и строкой она сдвигала вниз и без того мелкие кадрики
   (владелец 24.09.2026). Может заходить на кадрики — сдвигать их не смеет.
   Живая — краской участка. */
#плёнка-короб { position: relative; }
.плашка-плёнки {
  /* Язычком, свисающим с кромки: половина над кромкой обрезалась строкой. */
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%); z-index: 4;
  padding: 1px 9px 2px; border-radius: 0 0 8px 8px;
  border: 1px solid var(--мст-кромка-тише); background: var(--к-2);
  color: var(--текст-тише); font-size: 9px; line-height: 1.2; white-space: nowrap; cursor: default;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.плашка-плёнки[hidden] { display: none; }
.плашка-плёнки:hover { border-color: var(--мст-кромка); color: var(--текст); }
.плашка-плёнки[data-жив="1"] {
  color: var(--участок, #d08a3a);
  border-color: color-mix(in srgb, var(--участок, #d08a3a) 60%, transparent);
  /* Подложка непрозрачная: плашка лежит поверх кадриков. */
  background: color-mix(in srgb, var(--участок, #d08a3a) 14%, var(--к-2));
}

/* Метка «пишем», сведённая к значку: квадратная и без подложки под текст. */
.мст-пишем[data-одинЗначок] { padding: 1px 3px; }
.мст-пишем[data-одинЗначок] svg { width: 11px; height: 11px; display: block; }

.мст-слой-гнездо {
  display: flex; align-items: center; flex: none;
  /* Гнездо тянется по высоте ленты, иначе карточка внутри него сжимается до
     своего содержимого: замер 22.09.2026 — 16 точек вместо полной высоты. */
  align-self: stretch;
}
.мст-слой-гнездо > .мст-слой { align-self: stretch; }
/* Связка — выключатель «маска едет со слоем». Целая линия — связаны,
   пунктир с просветом — отвязаны. Цель шире самой линии: в неё надо попасть
   указателем. */
.мст-связка-маски {
  flex: none; width: 11px; height: 14px; padding: 0; border: 0;
  background: transparent; cursor: default; position: relative;
}
.мст-связка-маски::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 50%;
  height: 1px; background: var(--мст-кромка);
}
.мст-связка-маски:hover::before { background: var(--текст); height: 2px; }
.мст-связка-маски[data-отвязана]::before {
  background: repeating-linear-gradient(to right,
    var(--мст-кромка-тише) 0 2px, transparent 2px 4px);
}
.мст-маска-слоя {
  flex: none; position: relative; cursor: default;
  width: calc(var(--рост-низа, 112px) * 0.78 * 0.7);
  min-width: 32px; max-width: 92px;
  height: 70%;
  border-radius: var(--мст-радиус-мал); border: 1px solid var(--мст-кромка-тише);
  background-color: color-mix(in srgb, var(--к-0) 70%, transparent);
}
.мст-маска-слоя:hover { border-color: var(--мст-кромка); }
/* ПИШЕМ В МАСКУ — ЧЁРНО-БЕЛОЙ КРОМКОЙ.
   Прежде кромка была амбровая, как у метки «в маску» (`--внимание`), и
   владелец 22.09.2026 сказал про этот цвет прямо: «рамку маски тоже поменяй,
   поносный цвет ужасен». Двойное кольцо — белое поверх чёрного — видно и на
   светлой миниатюре, и на тёмной, и не спорит с краской группы. */
.мст-маска-слоя[data-пишем] {
  border-color: #fff;
  box-shadow: 0 0 0 2px #111, 0 0 0 3px #fff;
}
/* Смотрим саму маску или плёнку — кромка говорит, что показ включён. */
.мст-маска-слоя[data-показ] { border-style: double; border-width: 3px; }
.мст-маска-слоя[data-показ="плёнка"] { border-color: #ff5c5c; }
.мст-маска-слоя[data-выключена] { opacity: 0.4; border-style: dashed; }
.мст-маска-слоя[data-выключена]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent 47%,
              var(--мст-кромка) 47%, var(--мст-кромка) 53%, transparent 53%);
}

/* Меню инструментов маски — по правой кнопке на её миниатюре. */
.мст-меню-маски {
  position: fixed; z-index: 60; min-width: 170px; padding: 4px;
  display: flex; flex-direction: column; gap: 1px;
  border-radius: var(--мст-радиус); border: 1px solid var(--мст-кромка);
  background: var(--мст-стекло-плотнее);
  backdrop-filter: var(--мст-размытие); -webkit-backdrop-filter: var(--мст-размытие);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.мст-пункт-меню {
  text-align: left; padding: 5px 9px; border: 0; background: transparent;
  border-radius: var(--мст-радиус-мал); color: var(--текст);
  font-size: var(--кегль-мелкий); cursor: default; white-space: nowrap;
}
.мст-пункт-меню:hover { background: color-mix(in srgb, var(--акцент) 22%, transparent); }
/* Активный слой виден издали: акцентная кромка, свечение и своя подпись.
 * Это и есть ответ на «рисуем на ошибочном слое» — самую тихую из бед. */
.мст-слой[data-выбран] {
  border-color: var(--акцент);
  background: color-mix(in srgb, var(--акцент) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--акцент) 45%, transparent),
              0 6px 18px color-mix(in srgb, var(--акцент) 22%, transparent);
}
/* МИНИАТЮРА БЕРЁТ ВСЮ ВЫСОТУ, КАКАЯ ЕСТЬ.
 *
 * Прежде высота считалась вычитанием — `рост-низа минус 74`, где 74 это
 * отступы плюс строка имени плюс строка «пишем». На низкой полосе вычитание
 * уходило в минус, миниатюра упиралась в свои 18 точек, а тексту оставалось
 * ДВЕ (замерено 15.09.2026: имя слоя 61×2). Владелец: «там текст не
 * умещается».
 *
 * Теперь ничего не вычитается: миниатюра забирает остаток, а имя лежит
 * лентой ПОВЕРХ неё и своей высоты не требует вовсе. Карточка от этого
 * читается лучше и на высокой полосе: картинка крупнее, подпись при ней. */
.мст-кроха {
  flex: 1; min-height: 14px;
  border-radius: 0; border: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: color-mix(in srgb, var(--к-0) 70%, transparent);
  position: relative;
}
/* Кроха слоя, пока письмо идёт в его маску: чёрно-белое кольцо внутрь — тот
   же язык, что у кромки спутника и у значка маски. */
.мст-кроха[data-маска] { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #111; }
/* Имя — лентой по низу миниатюры, на затемнении. Затемнение обязательно:
   подпись ложится на картинку слоя, а она бывает любой, и белое по белому
   мы уже проходили. */
.мст-имя-слоя {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: center;
  font-size: 8.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.92);
  overflow: hidden; white-space: nowrap;
  padding: 1px 16px 1px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.32) 70%, transparent);
  border-bottom-left-radius: var(--мст-радиус-мал);
  border-bottom-right-radius: var(--мст-радиус-мал);
}
/* НОМЕР — В ЛЕВОМ НИЖНЕМ УГЛУ, СВОИМ ЗНАКОМ И ПОВЕРХ ВСЕГО.
   Он не сжимается и не пропадает ни от длинного имени, ни от узкой полосы:
   это последнее, по чему слой отличают от соседа, когда места не осталось
   ни на что. Собственная тень под цифрой — чтобы читалась и там, где ленты
   подписи уже нет. */
.мст-номер-слоя {
  position: absolute; left: 4px; bottom: 1px; z-index: 4;
  font-family: var(--шрифт-цифр); font-weight: 700; font-size: 8.5px;
  line-height: 1.5; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.мст-звание-слоя {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Векторный слой в полосе — уголок с буквой V: перо и узлы работают только
   здесь, и это надо видеть, не читая имя. */
.мст-слой[data-вектор]::after {
  content: "V"; position: absolute; right: 3px; bottom: 1px; z-index: 4;
  font: 700 8px var(--шрифт-цифр); line-height: 1.5; color: #fff;
  background: #6e63c4; border-radius: 4px; padding: 0 4px;
  pointer-events: none;
}
.мст-слой[data-выбран] .мст-имя-слоя { font-weight: 600; }
/* СЛОЙ-СВЯЗЬ — цепью в правом нижнем углу (там же, где у вектора «V»:
   связь векторной не бывает, и угол свободен), крашенной состоянием связи
   (core/links.js): живая — акцент, отстаёт — жёлтым, исток закрыт — серым,
   исток потерян — красным. Щелчок по цепи — к истоку. Исток — стрелкой с
   числом документов, где он подключён; щелчок — стол с нитями. */
.мст-связь-знак {
  position: absolute; right: 3px; bottom: 2px; z-index: 5;
  display: inline-flex; align-items: center; gap: 2px;
  height: 14px; min-width: 14px; padding: 0 3px; border: 0; border-radius: 5px;
  font: 700 8px var(--шрифт-цифр); line-height: 14px; color: #fff; cursor: default;
  background: var(--акцент); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.мст-связь-знак svg { width: 10px; height: 10px; }
.мст-связь-знак[data-вид="ждёт"] { animation: мст-связь-ждёт 0.9s ease-in-out infinite alternate; }
.мст-связь-знак[data-вид="отстаёт"] { background: var(--внимание); color: #1b1f23; }
.мст-связь-знак[data-вид="спит"] { background: var(--к-5, #3a424a); color: var(--текст); }
.мст-связь-знак[data-вид="порвана"] { background: var(--беда); }
.мст-связь-знак.исток { background: color-mix(in srgb, var(--к-0) 70%, transparent); color: var(--текст); }
.мст-слой[data-вектор] .мст-связь-знак.исток { right: 20px; }
.мст-связь-знак:hover { filter: brightness(1.15); }
/* Карточка связи — тонкой кромкой цвета акцента: её пиксели не отсюда, и
   это видно раньше, чем прочитан значок. */
.мст-слой[data-связь] { border-color: color-mix(in srgb, var(--акцент) 55%, transparent); }
.мст-слой[data-связь="отстаёт"] { border-color: color-mix(in srgb, var(--внимание) 65%, transparent); }
.мст-слой[data-связь="порвана"] { border-color: color-mix(in srgb, var(--беда) 65%, transparent); }
@keyframes мст-связь-ждёт { from { opacity: 1; } to { opacity: 0.45; } }
/* ПРОИСХОЖДЕНИЕ (стратегия 28.09.2026, п. 3) — в ВЕРХНЕМ правом углу:
   нижний занят вектором и связью. «ИИ» — в слое куски генеративной
   модели; флажок — заглушка, временное: тёплым, и сама карточка — пунктиром
   того же цвета, чтобы забытое бросалось в глаза издали. */
.мст-модель-знак {
  position: absolute; right: 3px; top: 3px; z-index: 5;
  height: 14px; min-width: 16px; padding: 0 3px; border: 0; border-radius: 5px;
  font: 700 8px var(--шрифт-цифр); line-height: 14px; color: #fff; cursor: default;
  background: #7a5ad6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.мст-модель-знак[data-заглушка] { background: var(--внимание); color: #1b1f23; font-size: 9px; }
.мст-модель-знак:hover { filter: brightness(1.15); }
.мст-слой[data-заглушка] { border: 1px dashed var(--внимание); }
@media (prefers-reduced-motion: reduce) { .мст-связь-знак[data-вид="ждёт"] { animation: none; } }

/* СПРЯТАННЫЙ СЛОЙ — СПРЯТАН ЗАМЕТНО: миниатюра гаснет и сереет, поверх —
   косая штриховка, имя — совсем тихое (владелец 17.09.2026: «он должен быть
   более скрыт, чем остальные, сейчас недостаточно»). Глазок при этом виден
   всегда — им и возвращают. */
.мст-слой[data-скрыт] { opacity: 0.55; border-style: dashed; }
.мст-слой[data-скрыт] .мст-кроха { filter: grayscale(1) brightness(0.7) contrast(0.6); opacity: 0.45; }
.мст-слой[data-скрыт]::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--текст) 14%, transparent) 6px 8px);
}
.мст-слой[data-скрыт] .мст-имя-слоя { color: var(--текст-совсем-тихо); text-decoration: line-through; }
.мст-слой[data-скрыт] .мст-глазок { opacity: 1; background: color-mix(in srgb, var(--внимание, #e0a030) 30%, var(--к-0)); }
/* В наборе для группировки (⌘-щелчок) — вторая рамка пунктиром. */
.мст-слой[data-вВыборе] { outline: 2px dashed color-mix(in srgb, var(--акцент) 70%, transparent); outline-offset: 1px; }
/* Запертый — мигает вместе с ярлыком, когда по нему пытаются рисовать. */
.мст-слой[data-мигает] { animation: мигнуть-панелью 0.9s ease-in-out; }

/* ГРУППА — рамка вокруг соседей с одним ярлыком: шапка с именем, счётчиком,
   глазком и замком на всех, под ней лента членов. Свёрнутая — шапка и
   стопка миниатюр. */
.мст-группа {
  flex: none; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--акцент) 45%, var(--мст-кромка-тише));
  border-radius: var(--мст-радиус-мал); padding: 2px;
  background: color-mix(in srgb, var(--акцент) 7%, transparent);
}
.мст-группа[data-выбрана] { border-color: var(--акцент); }
.мст-группа[data-скрыта] { opacity: 0.6; border-style: dashed; }
.мст-группа-шапка {
  display: flex; align-items: center; gap: 2px; padding: 0 2px; height: 18px; flex: none;
  font-size: 9.5px; color: var(--текст-тише); cursor: default; white-space: nowrap;
}
.мст-группа-имя { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.мст-группа-уголок {
  width: 14px; height: 16px; border: 0; background: transparent; color: var(--текст-тише);
  font-size: 10px; padding: 0; cursor: default;
}
.мст-группа-кнопка { width: 18px; height: 18px; border-radius: 5px; }
.мст-группа-кнопка svg { width: 12px; height: 12px; }
.мст-группа-лента { display: flex; gap: 6px; min-height: 0; flex: 1; align-items: stretch; }
.мст-группа-стопка { position: relative; width: 64px; flex: 1; min-height: 36px; }
.мст-группа-кроха {
  position: absolute; inset: 0; border-radius: 4px; border: 1px solid var(--мст-кромка-тише);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: var(--к-0);
}
.мст-группа-кроха:nth-child(2) { transform: translate(4px, -4px) rotate(3deg); z-index: -1; }
.мст-группа-кроха:nth-child(3) { transform: translate(8px, -8px) rotate(6deg); z-index: -2; }
.мст-имя-правка {
  width: 100%; height: 18px; font-size: var(--кегль-мелкий); padding: 0 3px;
  border-radius: 4px; border: 1px solid var(--акцент); background: var(--фон-поля);
  color: var(--текст);
}
.мст-глазок {
  position: absolute; right: 5px; top: 5px; width: 20px; height: 20px;
  border-radius: 6px; border: 0; display: grid; place-items: center; cursor: default;
  background: color-mix(in srgb, var(--к-0) 55%, transparent);
  color: var(--текст-тише); opacity: 0; transition: opacity var(--скорость) var(--кривая);
}
.мст-глазок svg { width: 13px; height: 13px; }
.мст-слой:hover .мст-глазок, .мст-слой[data-скрыт] .мст-глазок { opacity: 1; }
/* «ПИШЕМ» — ЗНАЧКОМ В УГЛУ, А НЕ СТРОКОЙ ПОД КАРТОЧКОЙ.
 *
 * Строкой он отнимал у миниатюры целый ряд высоты — на низкой полосе тот
 * самый ряд, которого и не хватало. А работу свою делает не хуже: ярлык у
 * верхнего края, на цвете акцента, читается боковым зрением так же, как
 * читался. Ради чего он и заведён: «чтобы пользователь точно знал, что он
 * рисует на том слое». */
.мст-пишем {
  position: absolute; left: 4px; top: 4px; z-index: 3;
  font-size: 8.5px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; padding: 3px 5px; border-radius: 5px;
  color: #fff; background: var(--добро);
  white-space: nowrap; max-width: calc(100% - 26px);
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.мст-пишем[data-лад="внимание"] { background: var(--внимание); color: #1b1f23; }
.мст-пишем[data-лад="беда"] { background: var(--беда); color: #fff; }
/* «В МАСКУ» — ЧЁРНЫМ ПО БЕЛОМУ, а не краской тревоги (владелец 22.09.2026:
   «поносный цвет ужасен»). Маска и есть чёрное с белым, и её метка одета так
   же: белая плашка, чёрные буквы, чёрная кромка — читается в любой теме и ни
   с чем не спорит. */
.мст-пишем[data-лад="маска"] {
  background: #fff; color: #111;
  box-shadow: 0 0 0 1px #111, 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* Галочка — кружком: у значка нет ни левого, ни правого края, и прямоугольная
   плашка вокруг него выглядела бы обрезанной строкой. */
.мст-пишем[data-галочка] {
  padding: 0; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
}
.мст-пишем[data-галочка] svg { width: 13px; height: 13px; }
.мст-слой[data-заперт] .мст-кроха { filter: grayscale(0.5); }

.мст-тяга-низа {
  flex: none; width: 6px; cursor: ew-resize; position: relative;
}
.мст-тяга-низа::after {
  content: ""; position: absolute; top: 50%; left: 2px; width: 2px; height: 34px;
  margin-top: -17px; border-radius: 1px; background: var(--мст-кромка);
}

/* ПАЛИТРА В ПОЛОСЕ — НА МЕСТЕ, ГДЕ БЫЛА ИСТОРИЯ.
 *
 * Поле всех цветов тянется почти до правого края, а у самого края стоят
 * недавние и палитра картинки. Цвет берут по десять раз в минуту; история
 * же — то, куда смотрят изредка, и ей хватило строки состояния.
 *
 * Поле рисуется холстом и цвет с него же и читается (см. `собратьПалитруНиза`),
 * поэтому здесь ему задаётся только МЕСТО. Никаких фонов и градиентов в
 * оформлении: разъехались бы с тем, что читается под курсором. */
:root[data-облик="мастерская"] .мст-палитра {
  flex: 1; min-width: 0; display: flex; gap: 8px;
  padding: 6px 6px 6px 0; min-height: 0;
}
:root[data-облик="мастерская"] .мст-палитра-поле {
  flex: 1; min-width: 0; height: 100%; display: block;
  border-radius: 10px; cursor: crosshair;
  border: 1px solid var(--мст-кромка-тише);
  box-shadow: inset 0 1px 0 var(--мст-блик-слабый);
}
/* Два вида одного и того же: показан ровно один. Спрятанный не «схлопнут
   в ноль», а убран целиком — иначе он продолжал бы занимать место в строке
   и делить ширину с тем, который виден. */
:root[data-облик="мастерская"] .мст-палитра[data-вид="градиент"] .мст-палитра-плитки,
:root[data-облик="мастерская"] .мст-палитра[data-вид="плитки"] .мст-палитра-поле {
  display: none;
}
:root[data-облик="мастерская"] .мст-палитра-плитки {
  flex: 1; min-width: 0; height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--плиток-вширь, 25), 1fr);
  grid-template-rows: repeat(var(--плиток-ввысь, 7), 1fr);
  gap: 1px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--мст-кромка-тише);
}
:root[data-облик="мастерская"] .мст-плитка {
  border: 0; padding: 0; min-width: 0; min-height: 0; cursor: default;
  border-radius: 0;
}
:root[data-облик="мастерская"] .мст-плитка:hover {
  outline: 2px solid var(--текст); outline-offset: -2px; z-index: 1;
}
:root[data-облик="мастерская"] .мст-плитка[data-выбрана] {
  outline: 2px solid var(--акцент); outline-offset: -2px; z-index: 2;
}

/* Переключатель вида — в шапке столбика «цвет», рядом с подписью: под
   образцом место занял код цвета (владелец 17.09.2026). */
:root[data-облик="мастерская"] .мст-вид-палитры {
  width: 18px; height: 14px; flex: none; padding: 0; margin-left: auto;
}
:root[data-облик="мастерская"] .мст-вид-палитры svg { width: 12px; height: 12px; }
:root[data-облик="мастерская"] .мст-нынешний-шапка { display: flex; align-items: center; gap: 4px; }
:root[data-облик="мастерская"] .мст-нынешний-тело { display: flex; align-items: center; gap: 6px; }
:root[data-облик="мастерская"] .мст-коды-цвета { display: flex; flex-direction: column; gap: 1px; }
/* Код цвета — шестнадцатеричный и RGB строчками под образцом; кнопка без
   рамки: щелчок копирует. Ширина столбика — по коду, а не по образцу. */
:root[data-облик="мастерская"] .мст-код-цвета {
  border: 0; background: transparent; padding: 0 2px; margin: 0; text-align: left;
  font: 9.5px/1.25 var(--шрифт-цифр); color: var(--текст-тише); letter-spacing: 0.02em;
  white-space: nowrap; cursor: default; border-radius: 4px;
}
:root[data-облик="мастерская"] .мст-код-цвета:hover { color: var(--текст); background: color-mix(in srgb, var(--текст) 8%, transparent); }

/* ── КРУГ ГАРМОНИЙ ───────────────────────────────────────────────────────
   Место ему нашлось за счёт самой палитры (владелец 20.09.2026: «она и так
   широкая»): у поля `flex: 1`, у круга — своя ширина, значит поле ужимается
   ровно на неё и ни на точку больше. */
:root[data-облик="мастерская"] .мст-гармония {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding-left: 2px;
}
:root[data-облик="мастерская"] .мст-гармония-круг {
  display: block; flex: none; cursor: crosshair;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
:root[data-облик="мастерская"] .мст-гармония-бок {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
:root[data-облик="мастерская"] .мст-гармония-правило {
  width: 94px; height: 16px; min-height: 0; padding: 0 4px;
  font-size: 9.5px; line-height: 14px;
}
:root[data-облик="мастерская"] .мст-гармония-цвета {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 94px;
}
:root[data-облик="мастерская"] .мст-гармония-цвет {
  height: 16px; min-width: 0; padding: 0; border-radius: 4px;
  border: 1px solid var(--мст-кромка-тише); cursor: default;
}
:root[data-облик="мастерская"] .мст-гармония-цвет:hover {
  outline: 2px solid var(--текст); outline-offset: -2px;
}
:root[data-облик="мастерская"] .мст-гармония-цвет[data-нынешний] {
  outline: 2px solid var(--акцент); outline-offset: -2px;
}
/* На низкой строке круг не помещается — уходит он, а не палитра: палитра
   нужна всегда, созвучия — когда подбирают. */
:root[data-облик="мастерская"] .мст-низ[data-мелко] .мст-гармония { display: none; }

:root[data-облик="мастерская"] .мст-палитра-бока {
  flex: none; display: flex; gap: 10px; align-items: stretch;
  max-width: 46%; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
:root[data-облик="мастерская"] .мст-палитра-бока::-webkit-scrollbar { display: none; }

:root[data-облик="мастерская"] .мст-красочный-столбик {
  flex: none; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
:root[data-облик="мастерская"] .мст-красочная-подпись {
  font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--текст-совсем-тихо); white-space: nowrap;
}
/* Кружки столбиками сверху вниз, столбцы прирастают вправо. СЕТКА, А НЕ
   СТОЛБИК С ПЕРЕНОСОМ: столбик с `flex-wrap: wrap` не растёт в ширину под
   перенесённые столбцы, и кружки вылезали за край экрана. Число рядов
   считает `уложитьКружки` по измеренной высоте — полоса бывает и в 72
   точки, и в 400, и набор укладывается по месту. */
:root[data-облик="мастерская"] .мст-красочный-ряд {
  flex: 1; min-height: 0; display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(var(--рядов-красок, 3), 18px);
  grid-auto-columns: 18px; gap: 3px; align-content: start; justify-content: start;
}
:root[data-облик="мастерская"] .мст-краска {
  flex: none; width: 18px; height: 18px; padding: 0; border-radius: 6px;
  border: 1px solid var(--мст-кромка-тише); cursor: default;
}
:root[data-облик="мастерская"] .мст-краска:hover {
  border-color: var(--текст); transform: scale(1.12);
}
:root[data-облик="мастерская"] .мст-краска[data-выбран] {
  border-color: var(--акцент);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--акцент) 55%, transparent);
}
/* Нынешний цвет — образец, а не полоса: растянутый во всю высоту, он читался
   заливкой поля, а не ответом на вопрос «чем я крашу». */
:root[data-облик="мастерская"] .мст-краска-большая {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
}
:root[data-облик="мастерская"] .мст-нынешний { width: auto; min-width: 96px; }
:root[data-облик="мастерская"] .мст-краска-большая { width: 30px; height: 30px; }

/* Полоса стала низкой — бока уходят, поле остаётся: цвет важнее списка. */
:root[data-облик="мастерская"] .мст-низ[data-мелко] .мст-палитра-бока {
  display: none;
}
:root[data-облик="мастерская"] .мст-низ[data-мелко] .мст-палитра {
  padding: 4px 6px 4px 0;
}

/* ===========================================================================
   6. ТОЛЬКО РИСУНОК
   ======================================================================== */

:root[data-облик="мастерская"][data-тихо] #оболочка {
  grid-template-rows: 0 1fr 0;
}
:root[data-облик="мастерская"][data-тихо] #верх,
:root[data-облик="мастерская"][data-тихо] #низ,
:root[data-облик="мастерская"][data-тихо] #инструменты,
:root[data-облик="мастерская"][data-тихо] .мст-пульт,
:root[data-облик="мастерская"][data-тихо] .мст-полка,
:root[data-облик="мастерская"][data-тихо] .мст-низ,
:root[data-облик="мастерская"][data-тихо] .мст-ярлык-слоя,
:root[data-облик="мастерская"][data-тихо] .обвязка { display: none; }

/* ПОКА КИСТЬ НА ХОЛСТЕ — ПУЛЬТЫ УХОДЯТ (настройка «Мастерская: прятать панели,
   пока ведёшь кисть», ⌘K).

   Гасим прозрачностью, а не `display`: пульт остаётся на своём месте и той же
   высоты, значит раскладке нечего пересчитывать ни на входе, ни на выходе.
   `pointer-events` снимаем заодно — иначе невидимая панель ловила бы мышь.

   Уход быстрее возврата: панель обязана убраться с дороги сразу, как рука
   пошла, а возвращаться ей некуда спешить. */
:root[data-облик="мастерская"] .мст-пульт,
:root[data-облик="мастерская"] .мст-пятак {
  transition: opacity 180ms var(--кривая);
}
/* Уходят пульты И карточка инструмента: она тоже лежит на холсте и тоже
   закрывает рисунок. Столбец инструментов, полка, рейка и нижняя полоса
   остаются — они по краям, рисунка не закрывают, а нижняя ещё и показывает
   курсор по ходу мазка. Спрятать всё целиком — это «Только рисунок» (Tab),
   и у него своя кнопка. */
:root[data-облик="мастерская"][data-мазок] .мст-пульт,
:root[data-облик="мастерская"][data-мазок] .мст-пятак {
  opacity: 0; pointer-events: none;
  transition: opacity 90ms var(--кривая);
}

/* Возврат — по Tab, но подсказать об этом надо: иначе «всё исчезло» читается
 * как поломка. Полоска гаснет сама через несколько секунд. */
:root[data-облик="мастерская"][data-тихо] #сцена::after {
  content: "Tab — вернуть панели";
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-size: var(--кегль-мелкий); color: var(--текст-совсем-тихо);
  background: var(--мст-стекло-тише); padding: 4px 12px; border-radius: 12px;
  border: 1px solid var(--мст-кромка-тише); pointer-events: none;
  animation: мст-погаснуть 4s var(--кривая) forwards;
}
@keyframes мст-погаснуть {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===========================================================================
   7. ОБЩЕЕ: кнопки и ползунки на стекле
   ======================================================================== */

:root[data-облик="мастерская"] .мст-пульт .кнопка {
  background: color-mix(in srgb, var(--текст) 10%, transparent);
  border-color: var(--мст-кромка-тише);
  box-shadow: inset 0 1px 0 var(--мст-блик-слабый);
}
:root[data-облик="мастерская"] .мст-пульт .кнопка:hover:not(:disabled) {
  background: color-mix(in srgb, var(--текст) 16%, transparent);
  border-color: var(--мст-кромка);
}
:root[data-облик="мастерская"] .мст-пульт .кнопка.главная {
  background: var(--акцент); border-color: transparent;
  box-shadow: inset 0 1px 0 var(--мст-блик-слабый),
              0 3px 12px color-mix(in srgb, var(--акцент) 40%, transparent);
}
:root[data-облик="мастерская"] .мст-пульт .фишка {
  background: color-mix(in srgb, var(--текст) 8%, transparent);
  border-color: var(--мст-кромка-тише);
}
:root[data-облик="мастерская"] .мст-пульт .фишка[data-выбрана] {
  background: var(--акцент); border-color: transparent; color: var(--акцент-текст);
}
:root[data-облик="мастерская"] .мст-пульт .ползунок .желоб {
  background: color-mix(in srgb, var(--к-0) 55%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
:root[data-облик="мастерская"] .мст-пульт .ползунок .ручка {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--мст-кромка);
}
:root[data-облик="мастерская"] .мст-пульт input,
:root[data-облик="мастерская"] .мст-пульт select,
:root[data-облик="мастерская"] .мст-пульт textarea {
  background: color-mix(in srgb, var(--к-0) 55%, transparent);
  border-color: var(--мст-кромка-тише);
}

/* Узкое окно: полоса слоёв и плёнка не влезают рядом — плёнка уходит, слои
 * остаются. Порядок именно такой: на каком слое пишешь, важнее, чем чем
 * ты это делал пять шагов назад. */
/* Узкое окно: слои и палитра рядом не влезают — уходят бока палитры, а
 * само поле остаётся. Цвет нужен всегда; список недавних можно и потерпеть.
 * Прежде здесь пряталась плёнка, но она переехала в строку состояния и
 * прячется по своим правилам. */
@media (max-width: 900px) {
  :root[data-облик="мастерская"] .мст-палитра-бока,
  :root[data-облик="мастерская"] .мст-гармония { display: none; }
}
@media (max-width: 680px) {
  .мст-слои { width: auto; max-width: none; flex: 1; }
  :root[data-облик="мастерская"] .мст-палитра { display: none; }
  .мст-тяга-низа { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .мст-веер { animation: none; }
  :root[data-облик="мастерская"][data-тихо] #сцена::after { animation: none; opacity: 1; }
}

/* ===========================================================================
   8. КОЛЕСО (правая кнопка по холсту)
   ======================================================================== */

.мст-колесо {
  position: absolute; z-index: 60; width: 0; height: 0;
  animation: мст-колесо-вышло 130ms var(--кривая);
}
@keyframes мст-колесо-вышло {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: none; }
}
/* Смещения — половина стороны, помноженная на рост. Рост кладёт на короб
   `wheel.js` (переменная `--мст-колесо-рост`), и он же считает по нему
   попадания: два места, одно число. */
.мст-колесо svg {
  position: absolute; overflow: visible;
  left: calc(-120px * var(--мст-колесо-рост, 1));
  top: calc(-120px * var(--мст-колесо-рост, 1));
}
/* Стеклянный диск под картинкой колеса: размытие подложки, тонкая кромка и
 * блик сверху — то же стекло, что у пультов, только круглое. */
.мст-колесо-стекло {
  position: absolute; border-radius: 50%; pointer-events: none;
  left: calc(-116px * var(--мст-колесо-рост, 1));
  top: calc(-116px * var(--мст-колесо-рост, 1));
  width: calc(232px * var(--мст-колесо-рост, 1));
  height: calc(232px * var(--мст-колесо-рост, 1));
  background:
    radial-gradient(120% 90% at 30% 6%, var(--мст-блик), transparent 46%),
    var(--мст-стекло);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  border: 1px solid var(--мст-кромка-тише);
  box-shadow: var(--мст-тень), inset 0 1px 0 var(--мст-блик);
}

/* Спицы — это зазоры между секторами: сектор нарисован, промежуток нет.
 * Подложка сектора — то же стекло, что у пультов, иначе колесо выглядело бы
 * пришельцем из другой программы. */
.мст-сектор-фон {
  /* Заливка приходит переменной от колеса: переход из красок обода. Пока её
   * нет (обод пуст) — ровное стекло. */
  fill: var(--заливка, color-mix(in srgb, var(--фон-панели-плотный) 40%, transparent));
  stroke: var(--мст-кромка-тише); stroke-width: 1;
}
.мст-сектор-знак { color: var(--текст); }
.мст-сектор { cursor: default; }
.мст-сектор-знак { color: var(--текст-тише); pointer-events: none; }
.мст-сектор-знак path, .мст-сектор-знак circle, .мст-сектор-знак rect { vector-effect: non-scaling-stroke; }
.мст-сектор-имя {
  fill: var(--текст-тише); font-size: 8.5px; text-anchor: middle;
  font-family: var(--шрифт); pointer-events: none;
}
.мст-сектор-имя.мст-пусто { font-size: 16px; fill: var(--текст-совсем-тихо); }

.мст-сектор[data-наведён] .мст-сектор-фон {
  fill: var(--краска, var(--акцент));
  stroke: color-mix(in srgb, var(--краска, var(--акцент)) 70%, white);
}
.мст-сектор[data-наведён] .мст-сектор-знак { color: #fff; }
.мст-сектор[data-наведён] .мст-сектор-имя { fill: rgba(255, 255, 255, 0.92); }

.мст-цвет-обода { stroke: var(--мст-кромка-тише); stroke-width: 1; cursor: default; }
.мст-цвет-обода[data-наведён] { stroke: #fff; stroke-width: 2; }

/* Ступица целиком залита нынешним цветом — заливку кладёт `wheel.js`
   строчным стилем, здесь остаётся только кромка. Своей заливки тут быть не
   должно: она перебивала бы цвет в половине случаев и не перебивала в
   другой, смотря по порядку правил. */
.мст-ступица { stroke: var(--мст-кромка); stroke-width: 1.5; }
/* Значок инструмента поверх цвета. Цвет значка считает `знакНаСплошном` —
   по светлоте самой заливки, а не по стеклу: подложки под ступицей нет. */
.мст-ступица-знак { pointer-events: none; }
.мст-ступица-знак path, .мст-ступица-знак circle, .мст-ступица-знак rect,
.мст-ступица-знак line, .мст-ступица-знак polyline {
  vector-effect: non-scaling-stroke;
}
.мст-мазок-обода { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }

/* Длинное имя не влезает в ступицу — показываем его полосой под колесом. */
.мст-колесо-подпись {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(126px * var(--мст-колесо-рост, 1));
  white-space: nowrap; font-size: var(--кегль-мелкий); color: var(--текст);
  background: var(--мст-стекло-плотнее); border: 1px solid var(--мст-кромка-тише);
  padding: 3px 10px; border-radius: 9px; pointer-events: none;
}
.мст-колесо-подпись:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .мст-колесо { animation: none; }
}


/* Меню, свёрнутое в одну кнопку: восемь разделов не помещаются в рейку
   рядом с семью режимами, а прятать режимы нельзя — они и есть новое. */
:root[data-облик="мастерская"] #кнопка-новый,
:root[data-облик="мастерская"] #кнопка-открыть { display: none; }
.мст-ключ { font-size: 14px; }
.мст-менюшка {
  /* Ниже 80 — выпадающие меню разделов (`.меню` в app.css) лежат именно там,
   * и при большем номере они открывались ПОД этой панелью: щёлкаешь «Файл»,
   * а ничего не видно. Так и выглядела «кнопка Меню не работает». */
  position: fixed; z-index: 70; padding: 6px;
  border-radius: var(--мст-радиус); border: 1px solid var(--мст-кромка);
  background: var(--мст-стекло-плотнее);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  box-shadow: var(--мст-тень), inset 0 1px 0 var(--мст-блик);
}
.мст-менюшка[hidden] { display: none; }
.мст-менюшка #меню-сверху { display: flex; flex-direction: column; gap: 2px; }
.мст-менюшка #меню-сверху .кнопка { justify-content: flex-start; width: 172px; }


/* ===========================================================================
   9. ПЯТАК ИНСТРУМЕНТА: лента, свёрнутая в карточку у холста
   ======================================================================== */

.мст-пятак {
  position: absolute; z-index: 25; width: 238px;
  left: calc(var(--поле-слева, 12px) + 12px);
  top: calc(var(--поле-сверху, 0px) + 12px);
  max-height: calc(100% - var(--поле-сверху, 0px) - var(--рост-низа, 112px) - 24px);
  overflow-y: auto; scrollbar-width: thin;
  border-radius: var(--мст-радиус); border: 1px solid var(--мст-кромка);
  background: var(--мст-стекло);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  box-shadow: var(--мст-тень), inset 0 1px 0 var(--мст-блик), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.мст-пятак-шапка {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px 6px;
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--к-0) 34%, transparent),
    color-mix(in srgb, var(--к-0) 18%, transparent));
  border-bottom: 1px solid var(--мст-кромка-тише);
}
.мст-пятак-шапка { cursor: pointer; }
.мст-пятак-уголок { flex: none; width: 12px; text-align: center; font-size: 10px; color: var(--текст-тише); }
/* Свёрнутая карточка — одна шапка (ui/studio.js, `свернутьПятак`). */
.мст-пятак[data-свёрнут] > :not(.мст-пятак-шапка) { display: none !important; }
.мст-пятак[data-свёрнут] .мст-пятак-шапка { border-bottom: 0; padding-bottom: 8px; }
.мст-пятак-знак { display: grid; place-items: center; color: var(--акцент); }
.мст-пятак-знак svg { width: 18px; height: 18px; }
.мст-пятак-имя {
  font-weight: 640; font-size: var(--кегль-имени, var(--кегль));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  line-height: 1.2;
}
.мст-пятак-буква {
  margin-left: auto; font-family: var(--шрифт-цифр); font-size: 10px;
  color: var(--текст-совсем-тихо); border: 1px solid var(--мст-кромка-тише);
  border-radius: 4px; padding: 1px 5px;
}
/* Значок инструмента в цветных темах — краской своего раздела, как в столбце. */
:root[data-краски] .мст-пятак-шапка[data-раздел="правка"] .мст-пятак-знак { color: #4a7bc8; }
:root[data-краски] .мст-пятак-шапка[data-раздел="кисти"] .мст-пятак-знак { color: #c07a3e; }
:root[data-краски] .мст-пятак-шапка[data-раздел="фигуры"] .мст-пятак-знак { color: #7a6bbf; }
:root[data-краски] .мст-пятак-шапка[data-раздел="эффекты"] .мст-пятак-знак { color: #3f9aa0; }
:root[data-краски] .мст-пятак-шапка[data-раздел="умные"] .мст-пятак-знак { color: #5f9a5f; }
:root[data-краски] .мст-пятак-шапка[data-раздел="вид"] .мст-пятак-знак { color: #8a8f96; }
:root[data-краски] .мст-пятак-шапка[data-раздел="вектор"] .мст-пятак-знак { color: #6e63c4; }

/* Лента внутри пятака: столбиком, во всю ширину карточки. */
.мст-пятак #лента {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  height: auto; overflow: visible; padding: 9px 10px 11px;
  background: transparent; border: 0; box-shadow: none;
}
.мст-пятак #лента::after { display: none !important; }

/* НУТРО ПАНЕЛИ ИНСТРУМЕНТА — ПРЯМО В КАРТОЧКЕ (см. `ПАНЕЛЬ_В_КАРТОЧКЕ`).
 *
 * Без заголовка: карточка уже подписана именем инструмента, и второе имя
 * читалось бы как вторая панель — ровно то, от чего уходили. Отделяем
 * чертой, отступы берём те же, что у ленты, и рост не ограничиваем: карточка
 * растёт под содержимое, а высоту сцены стережёт раскладка пультов. */
.мст-пятак .тело-панели.в-карточке {
  padding: 0 10px 11px;
  gap: 7px;
  border-top: 1px solid var(--мст-кромка-тише);
  padding-top: 9px;
  max-height: none;
}
/* Дверь в панель, которая уже здесь, — лишняя. */
.мст-пятак[data-с-панелью] #лента .к-своей-панели { display: none; }

/* ШИРИНА У ВСЕХ КАРТОЧЕК ОДНА, И ЭТО РЕШЕНИЕ ВЛАДЕЛЬЦА (22.09.2026):
 * «все левые панели должны быть одинаковой ширины, такой как панель „Кисть“;
 * но содержимое должно умещаться, значит кнопки нужно делать уже и текст в
 * них перефразировать».
 *
 * Первая попытка была обратной — расширить карточку под панель до трёхсот
 * точек. Это лечило симптом и портило главное: колонка карточек у левого края
 * должна читаться одной полосой, а не ступеньками разной ширины. Поэтому
 * ширина остаётся 238 для всех, а умещается содержимое за счёт коротких
 * подписей: «выделить человека» вместо «Выделить человека целиком». */

/* ПРОКРУЧИВАЕТСЯ НУТРО ПАНЕЛИ, А НЕ ВСЯ КАРТОЧКА.
 *
 * Карточка — это шапка с именем инструмента, лента с его ручками и нутро
 * панели под ними. Пока прокручивалась карточка целиком, при раскрытом
 * пояснении первым уезжало наверх то, ради чего её открывали: имя
 * инструмента и его лента. Оставалась колонка текста без подписи, а низ
 * всё равно оказывался срезан — владелец 22.09.2026: «нет подстройки под
 * содержимое, она одного размера и обрезает содержимое».
 *
 * Правильно так же, как у пульта: шапка и лента стоят, прокрутка — у нутра.
 * Высота карточки при этом по-прежнему считается по содержимому и упирается
 * только в край сцены. */
.мст-пятак[data-с-панелью] {
  display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
/* Шапка и лента держат свой рост: сжимать их ради нутра — это опять убрать с
 * глаз то, ради чего карточку открыли. */
.мст-пятак[data-с-панелью] > *:not(.тело-панели) { flex: 0 0 auto; }
.мст-пятак[data-с-панелью] .тело-панели.в-карточке {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
}
.мст-пятак #лента > * { flex: none; max-width: 100%; }
/* Имя инструмента лента печатает сама — в пятаке оно уже есть в шапке. */
.мст-пятак #лента > .имя-инструмента { display: none; }
.мст-пятак #лента > .растяжка { display: none; }
/* Разделитель из вертикальной чёрточки становится горизонтальной. */
.мст-пятак #лента > .разделитель {
  width: 100%; height: 1px; background: var(--мст-кромка-тише); margin: 1px 0;
}
/* Прежняя сетка «подпись сверху, полоса и поле снизу» убрана: ползунок в
 * пятаке теперь строка-скраб, и правила для неё стоят в разделе 11. Здесь
 * был селектор с идентификатором (`#лента`), а он сильнее любых классов —
 * оставь его, и он молча перебил бы новое оформление. */
/* ПОТОЛОК ЛЕНТЫ — ТОЛЬКО В ЛЕГАСИ. Там лента делит высоту с холстом, и
   выше трёх строк ей расти нельзя (см. app.css). В карточке инструмента
   высоту держит сама карточка: она стоит на холсте и растёт под содержимое,
   а раскладка пультов обходит её стороной. Оставь потолок здесь — и у
   кисти, текста и палочки лента упёрлась бы ровно в него (замер
   21.09.2026: 102 точки при 104 потолка — то есть впритык, и следующая
   фишка уехала бы за край). */
.мст-пятак #лента { max-height: none; min-height: 0; overflow: visible; }
.мст-пятак #лента .фишки { flex-wrap: wrap; }
.мст-пятак #лента select, .мст-пятак #лента input[type="text"] { width: 100%; }
.мст-пятак #лента .облик-ленты { width: 100% !important; height: 34px !important; }

/* ===========================================================================
   10. СИЛУЭТ КИСТИ НА ХОЛСТЕ
   ======================================================================== */

.мст-показ-кисти {
  position: absolute; z-index: 23; pointer-events: none;   /* сквозной, кроме хвата */
  opacity: 0; transition: opacity 160ms var(--кривая);
  display: grid; place-items: center;
}
.мст-показ-кисти[data-видно] { opacity: 1; }
.мст-показ-кисти canvas { display: block; }

.мст-кисть-цифры {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--шрифт-цифр); font-size: 10.5px;
  color: var(--текст); background: var(--мст-стекло-плотнее);
  border: 1px solid var(--мст-кромка-тише); border-radius: 9px; padding: 3px 9px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* В «только рисунок» уходит ПЯТАК — он интерфейс, он стоит на месте и
   закрывает рисунок.

   А СИЛУЭТ ОСТАЁТСЯ. Прежде он уходил вместе с пятаком, и в «только
   рисунке» размер кисти приходилось менять вслепую: колесо по правой кнопке
   там работает, тяга за ступицу работает, а показать, каким выйдет мазок,
   было нечем (владелец 20.09.2026). Силуэт — не интерфейс, а ОТВЕТ на
   действие руки: он появляется, только пока кисть меняют, и сам гаснет
   через полторы секунды. Прятать ответ в режиме «ничего лишнего» — значит
   прятать не лишнее. */
:root[data-облик="мастерская"][data-тихо] .мст-пятак { display: none; }

.мст-пятак #лента .цвета-ленты { display: flex; flex-wrap: wrap; gap: 5px; }
.мст-пятак #лента .палитра-ленты { display: flex; flex-wrap: wrap; gap: 4px; }

/* ===========================================================================
   11. СКРАБ: ПОЛЗУНОК, ПЕРЕОДЕТЫЙ В СТРОКУ
   
   Та же разметка, что и в обычном облике (шапка, полоса с ручкой, поле) —
   только уложена строкой: имя слева, число справа, полоса ужата в тонкую
   черту по низу, ручка стала меткой. Узел не подменяется: панели держат на
   свои ползунки ссылки, и подмена тихо оборвала бы их.
   
   Полоса становится СКВОЗНОЙ — её прежние обработчики не срабатывают, и
   значение больше не прыгает в точку щелчка. Тянет всю строку `оскрабить`
   из studio.js.
   
   Полоса-желоб при этом остаётся говорящей: панель кладёт в неё свой
   градиент (палитра у тона, серо-яркая шкала у сочности), а ленточным
   настройкам его рисует оформление ниже по имени.
   ======================================================================== */

:root[data-облик="мастерская"] .мст-пульт .ползунок,
:root[data-облик="мастерская"] .мст-низ .ползунок,
:root[data-облик="мастерская"] .мст-пятак .ползунок,
:root[data-облик="мастерская"] .мст-пятак .ползунок-ленты {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%; height: 27px; padding: 0 9px 5px; border-radius: 8px;
  background: color-mix(in srgb, var(--текст) 5%, transparent);
  border: 1px solid transparent; cursor: ew-resize;
  user-select: none; touch-action: none;
  transition: background var(--скорость) var(--кривая), border-color var(--скорость) var(--кривая);
}
:root[data-облик="мастерская"] .мст-пульт .ползунок:hover,
:root[data-облик="мастерская"] .мст-низ .ползунок:hover,
:root[data-облик="мастерская"] .мст-пятак .ползунок:hover,
:root[data-облик="мастерская"] .мст-пятак .ползунок-ленты:hover {
  background: color-mix(in srgb, var(--текст) 10%, transparent);
  border-color: var(--мст-кромка-тише);
}
:root[data-облик="мастерская"] .ползунок[data-тянут],
:root[data-облик="мастерская"] .ползунок-ленты[data-тянут] {
  background: color-mix(in srgb, var(--акцент) 26%, transparent);
  border-color: var(--акцент);
}

/* Шапка панельного ползунка растворяется, и её подпись становится первой
   в строке: `display: contents` отдаёт детей строке напрямую. */
:root[data-облик="мастерская"] .мст-пульт .ползунок > .шапка,
:root[data-облик="мастерская"] .мст-пятак .ползунок > .шапка,
:root[data-облик="мастерская"] .мст-низ .ползунок > .шапка { display: contents; }
:root[data-облик="мастерская"] .мст-пульт .ползунок .подпись,
:root[data-облик="мастерская"] .мст-пятак .ползунок .подпись,
:root[data-облик="мастерская"] .мст-низ .ползунок .подпись,
:root[data-облик="мастерская"] .мст-пятак .ползунок-ленты .подпись {
  font-size: var(--кегль-мелкий); color: var(--текст-тише); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
}

/* Полоса — тонкая черта по низу строки, сквозная для мыши. */
:root[data-облик="мастерская"] .мст-пульт .ползунок .полоса,
:root[data-облик="мастерская"] .мст-пятак .ползунок .полоса,
:root[data-облик="мастерская"] .мст-низ .ползунок .полоса,
:root[data-облик="мастерская"] .мст-пятак .ползунок-ленты .полоса {
  position: absolute; left: 8px; right: 8px; bottom: 4px;
  width: auto !important; height: 5px; pointer-events: none;
}
/* Геометрия желоба — и ТОЛЬКО она. Подложку сюда класть нельзя: это правило
 * сильнее общего «говорящего» ниже, и оно молча забивало бы его серым.
 *
 * КРОМКА — не украшение. Половина визуалов упирается в чёрное («яркость»,
 * «ступени», «глубина»), и на тёмном стекле их тёмный конец пропадал вместе
 * с самой полосой: видно было только светлую половину (снимок владельца
 * 15.09.2026 — «чёрное в тёмной теме не видно»). Тонкая кромка очерчивает
 * полосу целиком, и в светлой теме то же спасает белый конец. */
:root[data-облик="мастерская"] .ползунок .желоб,
:root[data-облик="мастерская"] .ползунок-ленты .желоб {
  top: 0; left: 0; right: 0; height: 5px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--текст) 22%, transparent);
}
:root[data-облик="мастерская"] .ползунок .налив,
:root[data-облик="мастерская"] .ползунок-ленты .налив { display: none; }
:root[data-облик="мастерская"] .ползунок .ручка,
:root[data-облик="мастерская"] .ползунок-ленты .ручка {
  top: -3px; width: 2px; height: 11px; border-radius: 1px; border: 0;
  background: var(--акцент); transform: translateX(-50%);
  box-shadow: 0 0 7px color-mix(in srgb, var(--акцент) 75%, transparent);
}
/* На говорящем желобе метке нужна тёмная кайма: на светлом конце шкалы она
   иначе теряется. */
:root[data-облик="мастерская"] .ползунок[data-говорящий] .ручка {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Число справа: поле остаётся полем — щёлкнул и набрал. */
:root[data-облик="мастерская"] .мст-пульт .ползунок input,
:root[data-облик="мастерская"] .мст-пятак .ползунок input,
:root[data-облик="мастерская"] .мст-низ .ползунок input,
:root[data-облик="мастерская"] .мст-пятак .ползунок-ленты input {
  width: 58px; flex: none; height: 21px; text-align: right; padding: 0 4px;
  font-family: var(--шрифт-цифр); font-size: var(--кегль-мелкий);
  background: transparent; border-color: transparent; color: var(--текст);
  cursor: text;
}
/* В КАРТОЧКЕ ИНСТРУМЕНТА ПОЛЕ УЖЕ. Карточка узкая (около 216 точек на строку),
   и 58 точек под число отбирали их у подписи: «ширина диапазона цвета» не
   влезала в 130 точек на семь — ровно на последнюю букву. Четырёх знаков
   («1000») полю хватает и в 46, а подпись перестаёт обрезаться. */
:root[data-облик="мастерская"] .мст-пятак .ползунок input,
:root[data-облик="мастерская"] .мст-пятак .ползунок-ленты input { width: 46px; }
:root[data-облик="мастерская"] .ползунок input:hover,
:root[data-облик="мастерская"] .ползунок input:focus,
:root[data-облик="мастерская"] .ползунок-ленты input:hover,
:root[data-облик="мастерская"] .ползунок-ленты input:focus {
  background: color-mix(in srgb, var(--к-0) 55%, transparent);
  border-color: var(--мст-кромка-тише);
}

/* ===========================================================================
   ГОВОРЯЩИЕ ЖЕЛОБА — по одному визуалу на смысл
   
   Владелец 15.09.2026: «у ползунков кисти понятно отобразил изменение
   значений — пунктиром, сплошной, от тонкой к широкой, а у других панелей
   без подсказок; нужно придумать для каждой настройки свой визуал».
   
   Правило одно: полоска показывает НЕ «сколько накручено» (это показывает
   метка), а ЧТО настройка делает. Слово «допуск» объясняет меньше, чем
   полоса, на которой слева один оттенок, а справа целый разброс похожих.
   
   Ключ — имя настройки (`data-имя`). Панели, которые кладут свой градиент
   строчным стилем (вся цветокоррекция в tools/color.js), сильнее этих
   правил и остаются при своём: там знают лучше.
   ======================================================================== */

/* Чем красить «сильный» конец шкалы.
 *
 * Владелец 15.09.2026: «если тема цветная — пусть будет цветом инструмента».
 * В цветных темах у пятака это краска раздела нынешнего инструмента
 * (`--краска-дела` ставит `обновитьПятак`), у пульта — краска его панели
 * (`--цвет-панели` ставит main.js). В обычных темах — общий акцент: цветной
 * желоб там был бы единственным цветным пятном и сбивал бы оценку картинки. */
/* Три нейтральных оттенка, из которых сложены «серые» визуалы. Считаются от
 * цвета текста темы, поэтому в тёмной теме это светлые полутона на тёмном, а
 * в светлой — тёмные на светлом. Жёстких `#3a3a3a` больше нет: они и делали
 * половину полосы невидимой. */
:root[data-облик="мастерская"] .ползунок,
:root[data-облик="мастерская"] .ползунок-ленты {
  --сила-желоба: var(--акцент);
  --тише-желоба: color-mix(in srgb, var(--текст) 20%, transparent);
  --средне-желоба: color-mix(in srgb, var(--текст) 45%, transparent);
  --ярче-желоба: color-mix(in srgb, var(--текст) 85%, transparent);
}
:root[data-краски][data-облик="мастерская"] .мст-пятак .ползунок,
:root[data-краски][data-облик="мастерская"] .мст-пятак .ползунок-ленты {
  --сила-желоба: var(--краска-дела, var(--акцент));
}
:root[data-краски][data-облик="мастерская"] .панель[data-цвет] .ползунок {
  --сила-желоба: var(--цвет-панели, var(--акцент));
}

/* Основание: ровная шкала «слева тише, справа сильнее». Стоит ПЕРВЫМ и
   нарочно слабее частных правил — иначе перебило бы их все (пять классов
   против четырёх; в CSS побеждает сила, а не порядок). У половины настроек
   смысл ровно такой, и врать про него картинкой хуже, чем сказать честно. */
:root[data-облик="мастерская"] .желоб {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--текст) 14%, transparent),
    color-mix(in srgb, var(--сила-желоба, var(--акцент)) 70%, transparent));
}

/* — РАЗМЕР, ТОЛЩИНА, КЕГЛЬ: клин от тонкого к толстому — */
:root[data-облик="мастерская"] [data-имя="размер"] .желоб,
:root[data-облик="мастерская"] [data-имя="радиус"] .желоб,
:root[data-облик="мастерская"] [data-имя="кегль"] .желоб,
:root[data-облик="мастерская"] [data-имя="толщина"] .желоб,
:root[data-облик="мастерская"] [data-имя="скругление"] .желоб,
:root[data-облик="мастерская"] [data-имя="масштаб плитки"] .желоб {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--текст) 34%, transparent),
    color-mix(in srgb, var(--текст) 72%, transparent));
  clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 62%);
  border-radius: 0;
}

/* — ПЛОТНОСТЬ И ПРОЗРАЧНОСТЬ: от сквозной клетки к плотной краске — */
:root[data-облик="мастерская"] [data-имя="плотность"] .желоб,
:root[data-облик="мастерская"] [data-имя="прозрачность"] .желоб,
:root[data-облик="мастерская"] [data-имя="непрозрачность"] .желоб,
:root[data-облик="мастерская"] [data-имя="плёнка"] .желоб {
  background:
    linear-gradient(to right, transparent, var(--краска-кисти, var(--текст))),
    repeating-conic-gradient(rgba(128,128,128,0.42) 0% 25%, rgba(128,128,128,0.12) 0% 50%)
      0 0 / 5px 5px;
}

/* — МЯГКОСТЬ КРАЯ: слева кромка режет, справа растворяется — */
:root[data-облик="мастерская"] [data-имя="мягкость"] .желоб,
:root[data-облик="мастерская"] [data-имя="мягкость края"] .желоб,
:root[data-облик="мастерская"] [data-имя="мягкость границы"] .желоб,
:root[data-облик="мастерская"] [data-имя="растушевать"] .желоб,
:root[data-облик="мастерская"] [data-имя="край"] .желоб,
:root[data-облик="мастерская"] [data-имя="растушёвка"] .желоб {
  background: linear-gradient(to right,
    var(--краска-кисти, var(--текст)) 0 40%,
    color-mix(in srgb, var(--краска-кисти, var(--текст)) 50%, transparent) 64%,
    transparent 100%);
}

/* — ПОВОДЫРЬ: слева линия дрожит, справа идёт ровно — */
:root[data-облик="мастерская"] [data-имя="поводырь"] .желоб {
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--текст) 55%, transparent) 0 2px,
      transparent 2px 5px) left center / 46% 2px no-repeat,
    linear-gradient(color-mix(in srgb, var(--текст) 55%, transparent),
                    color-mix(in srgb, var(--текст) 55%, transparent))
      right center / 50% 2px no-repeat;
}

/* — РАЗМЫТИЕ И МАТОВОСТЬ: слева частая рябь подробностей, справа гладь — */
:root[data-облик="мастерская"] [data-имя="размытие"] .желоб,
:root[data-облик="мастерская"] [data-имя="матовость"] .желоб,
:root[data-облик="мастерская"] [data-имя="сглаженность"] .желоб {
  background: linear-gradient(90deg,
    var(--тише-желоба) 0%, var(--ярче-желоба) 1.5%, var(--тише-желоба) 3%,
    var(--ярче-желоба) 5%, var(--тише-желоба) 7.5%, var(--ярче-желоба) 11%,
    var(--тише-желоба) 15%, var(--ярче-желоба) 21%, var(--тише-желоба) 28%,
    var(--ярче-желоба) 40%, var(--средне-желоба) 70%, var(--средне-желоба) 100%);
}

/* — РЕЗКОСТЬ: обратное размытию — слева мыло, справа кромка — */
:root[data-облик="мастерская"] [data-имя="резкость"] .желоб,
:root[data-облик="мастерская"] [data-имя="резкость после растяжки"] .желоб {
  background: linear-gradient(270deg,
    var(--тише-желоба) 0%, var(--ярче-желоба) 1.5%, var(--тише-желоба) 3%,
    var(--ярче-желоба) 5%, var(--тише-желоба) 7.5%, var(--ярче-желоба) 11%,
    var(--тише-желоба) 15%, var(--ярче-желоба) 21%, var(--тише-желоба) 28%,
    var(--ярче-желоба) 40%, var(--средне-желоба) 70%, var(--средне-желоба) 100%);
}

/* — СВЕТ И ТОН: от чёрного к белому — */
:root[data-облик="мастерская"] [data-имя="яркость"] .желоб,
:root[data-облик="мастерская"] [data-имя="светлота"] .желоб,
:root[data-облик="мастерская"] [data-имя="уровень"] .желоб,
:root[data-облик="мастерская"] [data-имя="свет места"] .желоб,
:root[data-облик="мастерская"] [data-имя="свет места (что оставить)"] .желоб,
:root[data-облик="мастерская"] [data-имя="поле вокруг холста"] .желоб {
  background: linear-gradient(90deg, #000, #fff);
}

/* — ТЕПЛО: от холодного синего к тёплому янтарю — */
:root[data-облик="мастерская"] [data-имя="теплота"] .желоб,
:root[data-облик="мастерская"] [data-имя="тепло"] .желоб {
  background: linear-gradient(90deg, #4b7bd6, #cfd3d8 50%, #e8a13c);
}

/* — ГЛУБИНА: от близкого к дальнему, как читается карта глубины — */
:root[data-облик="мастерская"] [data-имя="фокус (близость)"] .желоб,
:root[data-облик="мастерская"] [data-имя="на что светить (полоса глубины)"] .желоб {
  background: linear-gradient(90deg, #f2f2f2, #777 55%, #101010);
}

/* — СИЛА И КОНТРАСТ: волна растущего размаха — */
:root[data-облик="мастерская"] [data-имя="сила"] .желоб,
:root[data-облик="мастерская"] [data-имя="контраст"] .желоб,
:root[data-облик="мастерская"] [data-имя="выпуклость рельефа"] .желоб,
:root[data-облик="мастерская"] [data-имя="плотность краёв"] .желоб {
  background: linear-gradient(90deg,
    var(--средне-желоба), var(--ярче-желоба) 10%, var(--тише-желоба) 22%,
    var(--ярче-желоба) 34%, var(--тише-желоба) 46%, var(--ярче-желоба) 58%,
    var(--тише-желоба) 70%, var(--ярче-желоба) 82%, var(--тише-желоба) 94%);
}

/* — ДОПУСК И ЗАХВАТ: слева берётся один оттенок, справа целый разброс — */
:root[data-облик="мастерская"] [data-имя="допуск"] .желоб,
:root[data-облик="мастерская"] [data-имя="чувствительность"] .желоб,
:root[data-облик="мастерская"] [data-имя="захват"] .желоб,
:root[data-облик="мастерская"] [data-имя="полоса сомнения"] .желоб,
:root[data-облик="мастерская"] [data-имя="запас по краю"] .желоб {
  background: linear-gradient(90deg,
    var(--средне-желоба) 0 16%, var(--средне-желоба) 24%, var(--ярче-желоба) 32%,
    var(--тише-желоба) 42%, var(--ярче-желоба) 54%, var(--тише-желоба) 68%,
    var(--ярче-желоба) 84%, var(--тише-желоба) 100%);
}

/* — СРЕЗАТЬ СЛАБОЕ: слева взято всё, справа отрезано по самое яркое — */
:root[data-облик="мастерская"] [data-имя="срезать слабое"] .желоб {
  background: linear-gradient(90deg, var(--ярче-желоба) 0 10%,
    var(--средне-желоба) 35%, var(--тише-желоба) 70%, var(--тише-желоба));
}

/* — СДВИНУТЬ КРАЙ: влево сжать, вправо расширить, посередине как есть — */
:root[data-облик="мастерская"] [data-имя="сдвинуть край"] .желоб {
  background: linear-gradient(90deg, #4c8dff, var(--средне-желоба) 50%, #f0b429);
}

/* — ПОВОРОТ: штрих поворачивается слева направо — */
:root[data-облик="мастерская"] [data-имя="поворот"] .желоб {
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--текст) 55%, transparent) 0 1px,
      transparent 1px 4px) left center / 32% 100% no-repeat,
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--текст) 55%, transparent) 0 1px,
      transparent 1px 4px) center center / 32% 100% no-repeat,
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--текст) 55%, transparent) 0 1px,
      transparent 1px 4px) right center / 32% 100% no-repeat;
}

/* — ЗЕРНО: крупа, крепнущая вправо — */
:root[data-облик="мастерская"] [data-имя="зерно"] .желоб {
  background: repeating-linear-gradient(90deg,
    var(--тише-желоба) 0 1px, var(--ярче-желоба) 1px 2px,
    var(--средне-желоба) 2px 3px, var(--ярче-желоба) 3px 4px);
}

/* — ЦВЕТ: радуга у тона, выцветание у насыщенности — */
:root[data-облик="мастерская"] [data-имя="тон"] .желоб {
  background: linear-gradient(90deg, hsl(0 90% 55%), hsl(60 90% 55%), hsl(120 90% 45%),
    hsl(180 90% 45%), hsl(240 90% 55%), hsl(300 90% 55%), hsl(360 90% 55%));
}
:root[data-облик="мастерская"] [data-имя="насыщенность"] .желоб,
:root[data-облик="мастерская"] [data-имя="сочность"] .желоб,
:root[data-облик="мастерская"] [data-имя="цветное, %"] .желоб {
  background:
    linear-gradient(90deg, #8a8a8a, rgba(138,138,138,0) 90%),
    linear-gradient(90deg, hsl(0 90% 55%), hsl(60 90% 55%), hsl(120 90% 45%),
      hsl(180 90% 45%), hsl(240 90% 55%), hsl(300 90% 55%), hsl(360 90% 55%));
}

/* — СТУПЕНИ: жёсткими уступами, как она и делает — */
:root[data-облик="мастерская"] [data-имя="ступеней"] .желоб {
  background: linear-gradient(90deg, var(--тише-желоба) 0 20%,
    color-mix(in srgb, var(--текст) 32%, transparent) 20% 40%,
    var(--средне-желоба) 40% 60%,
    color-mix(in srgb, var(--текст) 72%, transparent) 60% 80%,
    var(--ярче-желоба) 80% 100%);
}

/* ===========================================================================
   12. ПРЕЛОМЛЕНИЕ НА КРОМКЕ СТЕКЛА
   
   У настоящего стекла ребро ловит свет с одной стороны и темнеет с другой.
   Одна тонкая рамка-градиент по кромке — и панель перестаёт быть
   полупрозрачным прямоугольником. Мышь сквозь неё проходит.
   ======================================================================== */

.мст-пульт::before,
.мст-веер::before,
.мст-менюшка::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(145deg,
    var(--мст-блик) 0%,
    transparent 28%,
    transparent 72%,
    rgba(0, 0, 0, 0.22) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* НИКАКОГО `position: relative` ЗДЕСЬ.
 *
 * Оно тут было — чтобы `::before` с кромкой преломления имел от чего
 * считаться, — и молча перебивало `position: fixed` этих же коробов: правило
 * стоит ниже и той же силы. Веер группы переставал быть всплывающим, ложился
 * в тело страницы обычным блоком во всю ширину окна (1400 точек!), растягивал
 * документ и выглядел как «выпадающего меню нет вовсе» (жалоба владельца
 * 15.09.2026). А `fixed` и `absolute` и так создают начало отсчёта для
 * вложенных — добавлять `relative` было незачем с самого начала. */
/* Пятак и нижняя полоса прокручиваются внутри себя — кромку им даёт
   внутренняя тень, которая не уезжает вместе с содержимым. */
.мст-пятак {
  box-shadow: var(--мст-тень),
              inset 1px 1px 0 var(--мст-блик),
              inset -1px -1px 0 rgba(0, 0, 0, 0.22);
}
.мст-низ { box-shadow: inset 0 1px 0 var(--мст-блик-слабый); }


/* ===========================================================================
   13. ЗАГОЛОВКИ ПАНЕЛЕЙ: ОДНА СТРОКА ВСЕГДА
   
   Владелец 15.09.2026: «заголовки панелей жирным и в две строки — кринж;
   сделай подбор размера шрифта в зависимости от размеров, но никак не в две
   строки». Перенос строки в шапке сдвигает всю панель и ломает ряд кнопок,
   а жир на заглавных читается хуже обычного начертания. Кегль подбирает
   `подогнатьЗаголовки` в studio.js — от 11 до 8,5 точки, пока не влезет.
   ======================================================================== */

:root[data-облик="мастерская"] .шапка-панели .название {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 560; letter-spacing: 0.4px;
  font-size: var(--кегль-шапки, var(--кегль-мелкий));
  line-height: 1.2;
}

/* ===========================================================================
   14. ПЛОТНЕЕ, НО НЕ ТЕСНО
   
   Владелец: «панели можно уменьшить по высоте, если сократить расстояния
   между текстом и между элементами, но осторожно». Осторожность здесь —
   правило «ниже 24 точек цель не опускаем» из tokens.css: ужимаются отступы
   и пробелы, но не сами кнопки и не строки списков.
   ======================================================================== */

.мст-пульт .тело-панели { padding: 7px 8px 8px; gap: 6px; }
.мст-пульт .колонка { gap: 5px; }
.мст-пульт .ряд { gap: 5px; }
.мст-пульт .ряд.плотно { gap: 4px; }
.мст-пульт .ползунок { gap: 6px; }
.мст-пульт .ползунок .шапка { margin-bottom: -2px; }
.мст-пульт .подпись { line-height: 1.25; }
.мст-пульт .заметка { line-height: 1.35; }
.мст-пульт .шапка-панели { height: 26px; padding: 0 8px; }
.мст-пульт .фишки { gap: 3px; }
.мст-пятак #лента { gap: 6px; padding: 8px 10px 10px; }

/* ===========================================================================
   15. ПЯТАК: НИКАКИХ ПОЛОС ПРОКРУТКИ ПО ГОРИЗОНТАЛИ
   
   Владелец: «на панели кисть зачем добавил внутрь выбор модели ИИ? из-за
   этого появилась полоса прокрутки по горизонтали и вертикали».
   
   Настройки движка попали в пятак вместе с лентой — они стоят в её конце при
   любом инструменте. В ленте во всю ширину окна им было место, в карточке
   шириной 238 точек — нет. Здесь их не показываем: выбор движка и его
   настройки целиком есть в панели «Модель», и это тот же самый выбор —
   `среда.ии` один на всех (см. шапку main.js).
   ======================================================================== */

.мст-пятак { overflow-x: hidden; }
.мст-пятак #лента > .ии-ленты { display: none; }
/* Симметрия в пятаке тоже спрятана: её выключатель стоит в рейке, рядом с
   движком, и второй такой же в карточке читался бы дублем. */
.мст-пятак #лента > .хвост-симметрии { display: none; }
.мст-пятак #лента > * { min-width: 0; }
.мст-пятак #лента .фишки { max-width: 100%; }
.мст-пятак #лента select { max-width: 100%; }


/* ПОЛОСА СЖАТА — УХОДИТ ИМЯ, И ТОЛЬКО ОНО.
 *
 * Прежде здесь пряталась вся подпись вместе с галочкой, и на сжатой полосе
 * карточки становились неразличимы: «какой-то слой» рядом с «каким-то
 * слоем», и непонятно даже, на котором пишешь. Владелец 15.09.2026: «если
 * панель маленькая, галочка исчезает — не должно так быть».
 *
 * Остаются НОМЕР и ГАЛОЧКА. Номер отвечает «который это», галочка — «на этом
 * ли пишу»; оба помещаются в любую высоту, потому что оба в один знак.
 * Уходит только звание — единственное, что можно узнать другим путём
 * (навести или растянуть полосу).
 *
 * Высоту миниатюры здесь НЕ трогаем: она берёт остаток сама. Прежнее
 * вычитание осталось от старой вёрстки и спорило бы с ним. */
/* На сжатой полосе уходит вся лента подписи — вместе с её затемнением.
   Номер остаётся: он лежит поверх и своей тенью читается сам. */
.мст-низ[data-мелко] .мст-имя-слоя { display: none; }
.мст-низ[data-мелко] .мст-номер-слоя { font-size: 9px; left: 3px; bottom: 0; }
.мст-низ[data-мелко] .мст-пишем[data-галочка] { width: 15px; height: 15px; left: 2px; top: 2px; }
.мст-низ[data-мелко] .мст-пишем[data-галочка] svg { width: 11px; height: 11px; }
.мст-низ[data-мелко] .мст-глазок { width: 16px; height: 16px; right: 2px; top: 2px; }
.мст-низ[data-мелко] .мст-глазок svg { width: 11px; height: 11px; }
.мст-низ[data-мелко] .мст-полоса-шапка { padding: 3px 10px 0; }
.мст-низ[data-мелко] .мст-слой[data-выбран] .мст-кроха {
  box-shadow: 0 0 0 2px var(--акцент) inset;
}

/* ===========================================================================
   16. «ТОЛЬКО РИСУНОК» — КНОПКА У ПРАВОГО НИЖНЕГО УГЛА ХОЛСТА
   
   Владелец 15.09.2026: «кнопку разместить внизу справа, но после скрытия
   панелей я не вижу, как вернуть их». Поэтому кнопка живёт не в рейке (её же
   и прячут), а на холсте — и остаётся на месте, когда всё прочее ушло. В
   тишине она почти прозрачна, чтобы не мешать смотреть на рисунок, и
   проявляется под мышью.
   ======================================================================== */

/* КНОПКА «ТОЛЬКО РИСУНОК» ЖИВЁТ В СТРОКЕ СОСТОЯНИЯ, У ЧИСЕЛ.
 *
 * Прежде она плавала над холстом в правом нижнем углу — потому что в рейке
 * её прятали бы вместе со всем прочим. Теперь в строке появилось место, и
 * висеть над картинкой ей больше незачем: там она закрывала собой рисунок,
 * ради которого её и нажимают.
 *
 * В тишине она возвращается на холст — `пересадитьГлазок` переносит её
 * руками, потому что строка в тишине получает `display: none`, а его у
 * родителя ребёнком не перебить. Оба положения описаны здесь. */
.мст-глазок-холста {
  position: static; flex: none; align-self: center; z-index: 40;
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; cursor: default;
  border: 1px solid var(--мст-кромка);
  background: var(--мст-стекло-плотнее);
  backdrop-filter: var(--мст-размытие);
  -webkit-backdrop-filter: var(--мст-размытие);
  box-shadow: var(--мст-тень), inset 0 1px 0 var(--мст-блик);
  color: var(--текст-тише);
  transition: opacity var(--скорость) var(--кривая), color var(--скорость) var(--кривая);
}
.мст-глазок-холста svg { width: 17px; height: 17px; }
.мст-глазок-холста:hover { color: var(--текст); }
/* В тишине — на холсте, в правом нижнем углу: строки в этот миг нет вовсе.
   Приглушена нарочно, чтобы не спорить с картинкой, и просыпается под
   курсором. */
:root[data-облик="мастерская"][data-тихо] .мст-глазок-холста {
  position: absolute; opacity: 0.28; right: 14px; bottom: 14px;
}
:root[data-облик="мастерская"][data-тихо] .мст-глазок-холста:hover { opacity: 1; }
.мст-глазок-холста[data-нажата] {
  color: var(--акцент-текст); background: var(--акцент); border-color: transparent;
}


/* Подписи на стекле на ступень громче, чем в обычном облике: они и задуманы
   тихими, но поверх картинки тихое становится неразличимым. */
:root[data-облик="мастерская"] .мст-пульт,
:root[data-облик="мастерская"] .мст-пятак {
  --текст-совсем-тихо: color-mix(in srgb, var(--текст) 62%, transparent);
  --текст-тише: color-mix(in srgb, var(--текст) 82%, transparent);
}


/* ===========================================================================
   17. РЕЖИМЫ КРАСКАМИ (цветные темы)
   
   Владелец 15.09.2026: «в цветной теме сделай кнопки режимов цветными».
   Тот же довод, что и у панелей: глаз находит жёлтый «Свет» быстрее, чем
   читает слово. У невыбранных режимов краска — точкой слева: семь залитых
   кнопок подряд превратили бы рейку в ёлку и перестали бы что-либо значить.
   ======================================================================== */

/* Квадратиков больше нет: краска — на самой кнопке в любой теме (см. .мст-режим выше). */

/* ===========================================================================
   18. ВЫБОР МОДЕЛИ В РЕЙКЕ
   ======================================================================== */

/* Движок в строке сведений — мелким кеглем и мелкими кнопками, чтобы
   уместиться между вестью и плёнкой (владелец 17.09.2026). */
.мст-движок { display: flex; align-items: center; flex: none; min-width: 0; align-self: center; }
:root[data-облик="мастерская"] #низ .мст-движок { flex: none; max-width: 60%; overflow: hidden; }
:root[data-облик="мастерская"] #низ .мст-движок .ии-ленты { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; row-gap: 2px; font-size: 9.5px; }
:root[data-облик="мастерская"] #низ .мст-движок .мини { font-size: 9.5px; height: 16px; line-height: 14px; padding: 0 6px; border-radius: 6px; }
:root[data-облик="мастерская"] #низ .мст-движок .подпись { font-size: 9px; }
:root[data-облик="мастерская"] #низ .мст-движок .разделитель { height: 12px; }
:root[data-облик="мастерская"] #низ > #вести { flex: 0 1 22%; }
/* Кнопка удаления слоя — при наведении краснеет. */
.мст-кнопочка-опасная:hover { color: #e0483a; }
/* Симметрия на полке: включена — сегменты залиты, и кнопка отмечена. */
.мст-полочка[data-id="симметрия"][data-включена] { border-color: color-mix(in srgb, var(--текст) 25%, transparent); }
.мст-симметрия { display: flex; align-items: center; gap: 5px; flex: none; margin-right: 8px; }
.мст-движок .ии-ленты { display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
/* Что из настроек движка показать, решает не порог окна, а само место:
   меряет `уместитьДвижок` в studio.js, лишнее уходит за кнопку «⋯» в панель
   «Модель». Прежнее media-правило гасило всё, кроме выбора движка, на окнах
   уже 1000 точек — и врало в обе стороны. */
:root[data-облик="мастерская"] #низ .мст-движок .выбор-модели {
  max-width: 190px; min-width: 70px; text-overflow: ellipsis;
}
.мст-движок-ещё { flex: none; letter-spacing: 0.08em; }
@media (max-width: 720px) {
  .мст-движок { display: none; }
}


/* ===========================================================================
   19. ЧАСТНОСТИ WEBKIT
   
   «А почему в веб-приложении оно так выглядит?» — владелец 15.09.2026, со
   снимком из Safari. Ответ: Safari дорисовывает своё там, где другие движки
   молчат, и проверять оформление надо в нём же.
   
   Что он добавляет от себя и что здесь у него отнято:
   
   * СТРЕЛКИ У ЧИСЛОВЫХ ПОЛЕЙ. В строке-скрабе число — просто число: его
     тянут за строку или набирают с клавиатуры. Пара крошечных стрелок рядом
     с ним не нужна никому, а места занимает больше самого числа и ломает
     выравнивание по правому краю;
   * ВИД СПИСКА. Родной `select` приходит со своей рамкой, своей высотой и
     своей стрелкой — и рядом с нашими строками выглядит гостем из другой
     программы. Оставляем поле, рисуем свою стрелку;
   * ПОЛОСЫ ПРОКРУТКИ. `scrollbar-width: thin` Safari не понимает вовсе,
     зато понимает `::-webkit-scrollbar`. На стекле светлой темы родная
     полоса выходит чёрной кляксой.
   ======================================================================== */

:root[data-облик="мастерская"] input[type="number"] {
  -webkit-appearance: textfield; appearance: textfield;
}
:root[data-облик="мастерская"] input[type="number"]::-webkit-outer-spin-button,
:root[data-облик="мастерская"] input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0; display: none;
}

:root[data-облик="мастерская"] .мст-пульт select,
:root[data-облик="мастерская"] .мст-пятак select,
:root[data-облик="мастерская"] .мст-низ select {
  -webkit-appearance: none; appearance: none;
  height: 26px; padding: 0 26px 0 9px; border-radius: 8px;
  background-color: color-mix(in srgb, var(--текст) 6%, transparent);
  border: 1px solid var(--мст-кромка-тише);
  color: var(--текст); font: inherit; font-size: var(--кегль-мелкий);
  /* Своя стрелка: два штриха уголком, тем же цветом, что и подписи. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50% calc(50% + 1.2px), transparent calc(50% + 1.2px)),
    linear-gradient(135deg, transparent calc(50% - 1.2px), currentColor calc(50% - 1.2px) 50%, transparent 50%);
  background-position: right 13px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
:root[data-облик="мастерская"] .мст-пульт select:hover,
:root[data-облик="мастерская"] .мст-пятак select:hover {
  background-color: color-mix(in srgb, var(--текст) 11%, transparent);
  border-color: var(--мст-кромка);
}

:root[data-облик="мастерская"] .мст-пульт .тело-панели::-webkit-scrollbar,
:root[data-облик="мастерская"] .мст-пятак::-webkit-scrollbar,
:root[data-облик="мастерская"] .мст-слои-лента::-webkit-scrollbar {
  width: 8px; height: 8px;
}
:root[data-облик="мастерская"] .мст-пульт .тело-панели::-webkit-scrollbar-track,
:root[data-облик="мастерская"] .мст-пятак::-webkit-scrollbar-track,
:root[data-облик="мастерская"] .мст-слои-лента::-webkit-scrollbar-track {
  background: transparent;
}
:root[data-облик="мастерская"] .мст-пульт .тело-панели::-webkit-scrollbar-thumb,
:root[data-облик="мастерская"] .мст-пятак::-webkit-scrollbar-thumb,
:root[data-облик="мастерская"] .мст-слои-лента::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--текст) 22%, transparent);
  border-radius: 5px; border: 2px solid transparent; background-clip: padding-box;
}
:root[data-облик="мастерская"] .мст-пульт .тело-панели::-webkit-scrollbar-thumb:hover,
:root[data-облик="мастерская"] .мст-пятак::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--текст) 38%, transparent); background-clip: padding-box;
}


/* ===========================================================================
   20. ОБЛИК ПОД ПАЛЬЦЕМ

   «Мастерская» и уклад под палец — РАЗНЫЕ вопросы, и здесь это видно лучше
   всего. Облик решает, где лежат панели; уклад — чем по ним попадают. На
   iPad верно и то и другое разом: пульты плавают поверх холста, а цели у
   них пальцевые. Гасить уклад вместе с теснотой было бы возвратом к тому
   самому смешению, от которого `tablet.js` уходил (см. его шапку).

   Двадцать восемь точек — размер под курсор, у которого остриё в одну
   точку. У пальца пятно касания около девяти миллиметров, и Apple не зря
   держит сорок четыре: промах по кнопке инструмента здесь стоит мазка по
   рисунку.

   Толщина полос считается от кнопки, а не берётся числом с потолка:
   44 + 5·2 отступа + 2 кромки = 56. Ровно так же, как 28 + 10 + 2 = 40 в
   укладе под мышь.
   ======================================================================== */

:root[data-облик="мастерская"][data-уклад="палец"] .мст-полоса[data-край="слева"],
:root[data-облик="мастерская"][data-уклад="палец"] .мст-полоса[data-край="справа"],
:root[data-облик="мастерская"][data-уклад="палец"] #инструменты[data-край="слева"],
:root[data-облик="мастерская"][data-уклад="палец"] #инструменты[data-край="справа"] {
  width: 56px; height: auto;
}
:root[data-облик="мастерская"][data-уклад="палец"] .мст-полоса[data-край="сверху"],
:root[data-облик="мастерская"][data-уклад="палец"] .мст-полоса[data-край="снизу"],
:root[data-облик="мастерская"][data-уклад="палец"] #инструменты[data-край="сверху"],
:root[data-облик="мастерская"][data-уклад="палец"] #инструменты[data-край="снизу"] {
  height: 56px; width: auto;
}

:root[data-облик="мастерская"][data-уклад="палец"] #инструменты .инструмент,
:root[data-облик="мастерская"][data-уклад="палец"] .мст-гнездо .инструмент,
:root[data-облик="мастерская"][data-уклад="палец"] .мст-веер-ряд .инструмент {
  width: 44px; height: 44px; border-radius: 12px;
}
:root[data-облик="мастерская"][data-уклад="палец"] .мст-гнездо .инструмент svg,
:root[data-облик="мастерская"][data-уклад="палец"] .мст-веер-ряд .инструмент svg {
  width: 24px; height: 24px;
}
:root[data-облик="мастерская"][data-уклад="палец"] .мст-уголок {
  width: 15px; height: 15px; border-bottom-right-radius: 12px;
}
:root[data-облик="мастерская"][data-уклад="палец"] .мст-уголок::after {
  border-left-width: 5px; border-bottom-width: 5px;
}

/* Кнопки режимов в рейке и глазок — те же сорок четыре. Глазок в углу
   особенно: по нему промахиваются в сторону холста, и промах — это мазок. */
:root[data-облик="мастерская"][data-уклад="палец"] .мст-режим,
:root[data-облик="мастерская"][data-уклад="палец"] .мст-полочка,
:root[data-облик="мастерская"][data-уклад="палец"] .мст-глазок-холста {
  min-width: 44px; min-height: 44px;
}

/* Строка-скраб тянется пальцем так же, как курсором, но попасть в неё надо
   пальцем. Высоту даём ростом строки, а не подгонкой: внутри живут и число,
   и подпись, и жёлоб. */
:root[data-облик="мастерская"][data-уклад="палец"] .мст-пульт .ползунок,
:root[data-облик="мастерская"][data-уклад="палец"] .мст-пятак .ползунок,
:root[data-облик="мастерская"][data-уклад="палец"] .мст-пятак .ползунок-ленты {
  min-height: 40px;
}

/* Тяга роста нижней полосы: под курсором хватает пяти точек, пальцем в них
   не попасть никогда. Расширяем саму область хвата, не меняя вида. */
:root[data-облик="мастерская"][data-уклад="палец"] .мст-тяга-роста {
  height: 18px; margin-top: -9px;
}

/* КОЛЕСА ЗДЕСЬ НЕТ НАРОЧНО. Его рост считает `wheel.js` — и он же считает по
   тому же числу попадания. Растянуть картинку отсюда значило бы развести
   рисунок с попаданиями молча: обод ушёл бы из-под пальца, а виноватым
   выглядел бы палец. */

/* Ступица колеса у кисти — хват размера: тянуть в любую сторону. */
.мст-колесо .мст-ступица { cursor: ns-resize; }
.мст-колесо[data-меню] .мст-ступица { cursor: pointer; }
.мст-колесо[data-тянут-размер] { cursor: ns-resize; }

/* Баланс OpenRouter под кнопками движков (ui/studio.js, `обновитьСчётСтроки`):
   щелчок освежает; меньше доллара — тёплым, в минусе — цветом беды. Короб
   движка при этом — столбик: кнопки сверху, баланс строкой под ними. */
:root[data-облик="мастерская"] #низ .мст-движок { flex-direction: column; align-items: flex-start; gap: 1px; }
:root[data-облик="мастерская"] .мст-счёт {
  cursor: pointer; display: flex; align-items: baseline; gap: 5px;
  font-size: 10px; line-height: 1.2; white-space: nowrap; padding-left: 1px;
}
:root[data-облик="мастерская"] .мст-счёт[hidden] { display: none; }
:root[data-облик="мастерская"] .мст-цена {
  font-size: 9px; line-height: 1.2; white-space: nowrap; padding-left: 1px;
  color: var(--текст-совсем-тихо); overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
:root[data-облик="мастерская"] .мст-цена[hidden] { display: none; }
:root[data-облик="мастерская"] .мст-счёт[data-мало="мало"] .значение {
  color: color-mix(in srgb, var(--беда) 55%, var(--текст));
}
:root[data-облик="мастерская"] .мст-счёт[data-мало="минус"] .значение { color: var(--беда); }