/*
 * Токены дизайн-системы «Видоискатель» (vf).
 *
 * Отдельная система, не тема старой: свои имена (`--vf-*`), своя область —
 * класс `.vf` на корне экрана. Старые роли (`--accent`, `--surface`…) здесь
 * не читаются и не переопределяются, поэтому обе ДС живут в одном
 * приложении, не задевая друг друга. Экраны переводятся по одному.
 *
 * Две области с одними и теми же токенами:
 *   `.vf` — корень экрана на «Видоискателе»: токены плюс основа страницы
 *     (фон, шрифт, высота окна — components/vf/vf.css);
 *   `.vf-tokens` — только токены, без основы страницы: для компонента vf,
 *     встроенного в экран старой ДС (контрол «Качество» в окне сметы и в
 *     поповере). Корень такого компонента сам несёт класс `.vf-tokens`,
 *     поэтому работает и внутри `.vf`, и вне её.
 * Селектор `:is(.vf, .vf-tokens)` весит как один класс — ровно как прежний
 * `.vf`, переопределения экранов не сдвигаются.
 *
 * Три слоя:
 *   примитивы — единственное место литерала цвета (hex, rgba);
 *   семантика и шкалы — роли через var(), именованные ступени размеров;
 *   компонентные токены — роль элемента компонента или блока, по группам.
 * Компоненты и блоки читают только роли и ступени, литералов в их CSS нет.
 *
 * Размеры — целые чётные px (кроме хайрлайна 1px и пола кегля 11px),
 * межстрочный — тоже px: у текучих кеглей он clamp() с целыми концами,
 * пропорциональный кеглю. Мельче 11px интерфейс не набирает — пол продукта
 * (решение владельца 19.10.2026, F19-b); его держит scripts/test-type-floor.cjs.
 * Пол меряется на экране и у подписей внутри SVG: их кегль — в единицах
 * viewBox и умножается на масштаб рисунка. Где рисунок мельче натурального
 * (диск первого экрана, экспонометр, векторскоп, граф версий, статичная
 * схема постановки), компонентный кегль `--vf-…-fs` поднят в единицах
 * viewBox — ступенью на брейкпоинте или текучим clamp() обратно размеру
 * рисунка, — и на экране выходит не мельче 11; сторож считает это по модели
 * раскладки. Подписи рисунка с растяжкой по осям (waveform Библии) набраны
 * поверх него в px. Не доведены до пола мини-экраны ленты (reel-stages.tsx):
 * это картинка страницы в миниатюре (кегли 5–8,6 в окне 160×100), решение
 * за владельцем.
 * Длительности — целые ms. Светлой темы нет: сервис принудительно тёмный.
 *
 * Брейкпоинты — именованные ступени (раздел «Брейкпоинты» ниже). Переменные
 * в @media не работают, а @custom-media конвейер фронта отдаёт браузеру как
 * есть (проверено 19.10: dev-сервер пропускает правило без разворота), поэтому
 * в CSS пишется число ступени с её именем в комментарии, в TS — константа из
 * components/vf/breakpoints.ts. Других чисел в @media нет.
 */

:is(.vf, .vf-tokens) {
  /* ═══════════════ Примитивы цвета ═══════════════ */

  /* Чернила — фон и плоскости, от самого глубокого */
  --vf-ink-0: #030606;  /* дно скопа */
  --vf-ink-1: #05080a;  /* колодец: поле ввода, дорожка */
  --vf-ink-2: #06090b;  /* фон страницы */
  --vf-ink-3: #070b0d;  /* экран внутри панели */
  --vf-ink-4: #0a0f12;  /* приподнятый фон */
  --vf-ink-5: #0a1013;  /* ячейка */
  --vf-ink-6: #0b1114;  /* лист сценария */
  --vf-ink-7: #0d1418;  /* поверхность */
  --vf-ink-8: #0f171c;  /* всплывающее */
  --vf-ink-9: #121a1f;  /* поверхность 2 */
  --vf-ink-10: #1a242b; /* поверхность 3, кнопка-клавиша */
  --vf-ink-11: #232f37; /* клавиша нажата */
  --vf-ink-12: #26323a; /* погасший светодиод */
  --vf-ink-13: #3a4850; /* ребро накатки на ручке */
  --vf-ink-edge: #030506; /* торец клавиши */

  /* Туман — линии и подписи на тёмном */
  --vf-fog-100: #e6ecef;
  --vf-fog-200: #d4dde1;
  --vf-fog-300: #b9c4c9;
  --vf-fog-400: #9aaab2;
  --vf-fog-500: #76878f;
  --vf-fog-600: #5c6b73;
  --vf-fog-a06: rgba(170, 200, 212, .06);
  --vf-fog-a10: rgba(170, 200, 212, .10);
  --vf-fog-a18: rgba(170, 200, 212, .18);
  --vf-fog-a25: rgba(170, 200, 212, .25);
  --vf-fog-a32: rgba(170, 200, 212, .32);
  --vf-white: #ffffff;
  --vf-white-a04: rgba(255, 255, 255, .04);
  --vf-white-a07: rgba(255, 255, 255, .07);
  --vf-white-a10: rgba(255, 255, 255, .10);
  --vf-white-a15: rgba(255, 255, 255, .15);
  --vf-black: #000000;
  --vf-black-a15: rgba(0, 0, 0, .15);  /* тень на чужой плоскости: колодец встроенного контрола (--vf-embed-bg) */
  --vf-black-a25: rgba(0, 0, 0, .25);
  --vf-black-a60: rgba(0, 0, 0, .6);
  --vf-black-a75: rgba(0, 0, 0, .75);
  --vf-black-a90: rgba(0, 0, 0, .9);
  --vf-black-a95: rgba(0, 0, 0, .95);

  /* Кармин — брендовый цвет Cinemata (тот же, что в старой ДС, hue 14° в OKLCH).
     Шаги построены формулой: светлота растёт ровно, соседние шаги различимы. */
  --vf-crimson-100: #ffdfe1;
  --vf-crimson-200: #ffbdc2;
  --vf-crimson-300: #ff99a3;
  --vf-crimson-400: #ff6e82;
  --vf-crimson-500: #f24568;
  --vf-crimson-600: #d92953;
  --vf-crimson-700: #bb1143;
  --vf-crimson-800: #9a0734;
  --vf-crimson-900: #770d29;
  --vf-crimson-1000: #53121f;

  /* Статусы. Красные запись и ошибка уведены к оранжевому (hue 29–31°) —
     на 15° от кармина, ΔE ≥ 0.07 в OKLab: главное действие и ошибку не спутать. */
  --vf-red-500: #ff3d24;   /* запись */
  --vf-red-400: #ff6150;   /* ошибка */
  --vf-red-300: #ff8f7a;   /* удалённая строка */
  --vf-green-400: #34d8a0; /* готово */
  --vf-green-200: #9ff0c6; /* добавленная строка */
  --vf-amber-400: #ffb547;
  --vf-violet-400: #a993ff;
  --vf-cyan-400: #46d6e0;
  --vf-blue-400: #5c95ff;
  --vf-pink-400: #ff6bb5;

  /* Категории разбора — палитра данных (метки категорий, по порядку).
     Читается из TS по номеру (3D-сцена постановки), поэтому без ролей. */
  --vf-cat-1: #ff7ac2;
  --vf-cat-2: #c39bff;
  --vf-cat-3: #ffb547;
  --vf-cat-4: #5c95ff;
  --vf-cat-5: #ff5a64;
  --vf-cat-6: #34d8a0;
  --vf-cat-7: #2fd5c6;
  --vf-cat-8: #7cf2ff;
  --vf-cat-9: #ff8a3d;
  --vf-cat-10: #d6b48a;
  --vf-cat-11: #e6e36b;
  --vf-cat-12: #8798ab;

  /* Цвета редакций сценария — палитра данных (Писатель, Writer.tsx), по порядку
     выпуска: белая, голубая, розовая, жёлтая, зелёная. Читается по номеру. */
  --vf-rev-1: #f2f2f2;
  --vf-rev-2: #8ec5ff;
  --vf-rev-3: #ffb3d1;
  --vf-rev-4: #ffe48a;
  --vf-rev-5: #9be8b0;

  /* ═══════════════ Семантика цвета ═══════════════ */

  /* Плоскости */
  --vf-bg: var(--vf-ink-2);
  --vf-bg-raised: var(--vf-ink-4);
  --vf-surface: var(--vf-ink-7);
  --vf-surface-2: var(--vf-ink-9);
  --vf-surface-3: var(--vf-ink-10);
  --vf-well: var(--vf-ink-1);         /* утопленное: поле, дорожка, журнал */
  --vf-screen: var(--vf-ink-3);       /* экран внутри панели */
  --vf-sheet: var(--vf-ink-6);        /* лист: сценарий, слайд */
  --vf-cell: var(--vf-ink-5);         /* ячейка таблицы, клип */
  --vf-scope: var(--vf-ink-0);        /* поле осциллографа */
  --vf-popover: var(--vf-ink-8);      /* всплывающая панель */
  --vf-void: var(--vf-black);         /* чистый чёрный: заставка, выключенный монитор */
  --vf-panel: linear-gradient(180deg, var(--vf-ink-8), var(--vf-ink-5));
  --vf-scrim: color-mix(in srgb, var(--vf-bg) 40%, transparent);        /* подложка под кнопкой поверх картинки */
  --vf-scrim-strong: color-mix(in srgb, var(--vf-bg) 88%, transparent); /* плотная подложка: шаги и ссылка поверх 3D */
  --vf-scrim-badge: color-mix(in srgb, var(--vf-bg) 80%, transparent);  /* метка-плашка поверх кадра (VfBadge) */
  --vf-mask-on: var(--vf-black);      /* непрозрачная часть маски (mask-image) */
  --vf-hover-tint: var(--vf-white-a04); /* подсветка второстепенного контрола при наведении */
  --vf-embed-bg: var(--vf-black-a15);   /* колодец контрола vf в экране старой ДС («Качество»): тень поверх чужой тёмной плоскости; на светлой — см. правило после блока */

  /* Линии */
  --vf-line: var(--vf-fog-a10);
  --vf-line-2: var(--vf-fog-a18);
  --vf-line-3: var(--vf-fog-a32);
  --vf-line-faint: var(--vf-fog-a06);
  --vf-line-hi: var(--vf-white-a15);  /* обводка цветной ячейки на тёмном (цвета ревизий) */
  --vf-line-ctl: var(--vf-fog-600);   /* граница поля ввода и чекбокса: нетекстовый контраст ≥3:1 к колодцу (3.6:1) */

  /* Текст */
  --vf-fg: var(--vf-fog-100);
  --vf-fg-2: var(--vf-fog-400);
  --vf-fg-3: var(--vf-fog-500);
  --vf-fg-script: var(--vf-fog-200);  /* текст сценария на листе */
  --vf-fg-blur: var(--vf-fog-300);    /* дальний план, вне фокуса */
  --vf-fg-soft: var(--vf-fog-300);    /* мягкий светлый текст: проза-источник, цифры диска, черновик */

  /* Акцент — кармин. Роли разведены по контрасту (фон --vf-bg):
     текст и тонкие линии 5.54:1, заливка под белым текстом 4.78:1,
     линия-обводка 3.15:1, фокус-кольцо = текстовый акцент. */
  --vf-accent: var(--vf-crimson-500);                                       /* текст, иконка, тонкая линия, фокус */
  --vf-accent-hi: var(--vf-crimson-400);                                    /* акцент-текст на приподнятых плоскостях (surface-3): там 500-й ниже 4.5:1 */
  --vf-accent-fill: var(--vf-crimson-600);                                  /* сплошная заливка под текстом: кнопка, плашка, выделение */
  --vf-on-accent: var(--vf-white);                                          /* текст и иконка на заливке */
  --vf-accent-deep: var(--vf-crimson-1000);                                 /* тёмная плашка внутри заливки (пип кнопки) */
  --vf-accent-soft: color-mix(in srgb, var(--vf-accent) 10%, transparent);  /* мягкая подложка: цитата, «бесплатно» */
  --vf-accent-line: color-mix(in srgb, var(--vf-accent) 70%, transparent);  /* обводка акцентной метки, ≥3:1 */
  --vf-accent-well: color-mix(in srgb, var(--vf-crimson-1000) 45%, var(--vf-ink-2)); /* утопленная акцентная плашка: «одна база» */
  --vf-flash: var(--vf-crimson-100);                                        /* надпись и пропуск заставки */
  --vf-focus: var(--vf-accent);                                             /* кольцо фокуса с клавиатуры */

  /* Статусы */
  --vf-rec: var(--vf-red-500);
  --vf-danger: var(--vf-red-400);
  --vf-danger-line: color-mix(in srgb, var(--vf-danger) 45%, transparent);  /* обводка метки ошибки */
  --vf-danger-soft: color-mix(in srgb, var(--vf-danger) 8%, transparent);   /* подложка сообщения об ошибке (VfAlert) */
  --vf-ok: var(--vf-green-400);
  --vf-ok-line: color-mix(in srgb, var(--vf-ok) 45%, transparent);          /* обводка сообщения об успехе */
  --vf-ok-soft: color-mix(in srgb, var(--vf-ok) 8%, transparent);           /* подложка сообщения об успехе (VfAlert tone=ok) */
  --vf-warn: var(--vf-amber-400);
  --vf-diff-del: var(--vf-red-300);
  --vf-diff-add: var(--vf-green-200);
  --vf-diff-del-bg: color-mix(in srgb, var(--vf-danger) 8%, transparent);     /* фон удалённой строки */
  --vf-diff-del-strike: color-mix(in srgb, var(--vf-danger) 70%, transparent); /* зачёркивание удалённой строки */
  --vf-diff-add-bg: color-mix(in srgb, var(--vf-ok) 9%, transparent);         /* фон добавленной строки */
  --vf-select: color-mix(in srgb, var(--vf-blue-400) 20%, transparent);

  /* Тона дорожек и данных: какой вход, герой, эмоция — цвет-ярлык, не статус */
  --vf-tone-cyan: var(--vf-cyan-400);
  --vf-tone-amber: var(--vf-amber-400);
  --vf-tone-violet: var(--vf-violet-400);
  --vf-tone-green: var(--vf-green-400);
  --vf-tone-pink: var(--vf-pink-400);
  --vf-tone-red: var(--vf-red-400);      /* конфликт, противник */
  --vf-tone-yellow: var(--vf-cat-11);    /* надежда, дружба */
  --vf-tone-blue: var(--vf-blue-400);
  --vf-tone-muted: var(--vf-fog-600);

  /* Наброски — бледные плашки рисованных макетов (строки, ячейки, пузыри) */
  --vf-sketch-1: color-mix(in srgb, var(--vf-fg) 9%, transparent);
  --vf-sketch-2: color-mix(in srgb, var(--vf-fg) 12%, transparent);
  --vf-sketch-3: color-mix(in srgb, var(--vf-fg) 14%, transparent);   /* ← 14–15 */

  /* Скоп: люминофор осциллографа */
  --vf-phosphor: var(--vf-green-400);
  --vf-scope-edge: color-mix(in srgb, var(--vf-phosphor) 12%, transparent);
  --vf-scope-grid: color-mix(in srgb, var(--vf-phosphor) 14%, transparent);
  --vf-scope-grid-2: color-mix(in srgb, var(--vf-phosphor) 7%, transparent);
  --vf-meter-arc: var(--vf-fog-a25);               /* шкала экспонометра */

  /* Поверх кадра (OSD) */
  --vf-osd-line: color-mix(in srgb, var(--vf-fg) 18%, transparent);   /* сетка третей, рамки, обводка OSD-метки */

  /* Ручка с накаткой (ползунок объектива) */
  --vf-knurl-ridge: var(--vf-ink-13);
  --vf-knurl-groove: var(--vf-surface-2);

  /* Клавиша пульта: лицевая сторона и нажатая */
  --vf-key-face: linear-gradient(180deg, var(--vf-surface-3), var(--vf-surface-2));
  --vf-key-face-on: linear-gradient(180deg, var(--vf-ink-11), var(--vf-surface-3));
  --vf-led-off: var(--vf-ink-12);
  --vf-led-on: var(--vf-accent);

  /* ═══════════════ Шрифт ═══════════════ */

  --vf-font-display: "Inter", "Arial Narrow", sans-serif;
  --vf-font-body: "Inter", system-ui, sans-serif;
  --vf-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Кегль — ступени. Нижние две стоят на полу продукта 11px — единственная нечётная
     ступень шкалы; мельче ничего нет, тесное место переразмечается, а не мельчит. */
  --vf-fs-2xs: var(--vf-fs-xs); /* ← 8, поднято до пола 11 по решению владельца 19.10 — одна ступень с xs: метка курсора и шага, мини-экраны */
  --vf-fs-xs: 11px;   /* ← 10, поднято до пола 11 по решению владельца 19.10: HUD, капс-подписи, чипы, плашки */
  --vf-fs-sm: 12px;   /* ← 11–12.5: моно-текст листа, мелкий текст */
  --vf-fs-md: 14px;   /* ← 13–15: текст карточки, кнопка, реплика чата */
  --vf-fs-lg: 16px;   /* крупный текст карточки */
  --vf-fs-body: var(--vf-fs-lg); /* основной текст страницы (и на телефоне: 15 → 16, нечётное) */
  --vf-fs-xl: 18px;   /* подзаголовок карточки */
  --vf-fs-2xl: 22px;  /* заголовок слайда на телефоне */
  --vf-fs-3xl: 28px;  /* заголовок слайда */

  /* Кегль — текучие, по роли */
  --vf-fs-lead: clamp(16px, 1.25vw, 18px);          /* вводный абзац блока */
  --vf-fs-hero-lead: clamp(16px, 1.3vw, 20px);      /* вводный абзац первого экрана и финала */
  --vf-fs-h3: clamp(24px, 2.1vw, 32px);             /* заголовок карточки-входа */
  --vf-fs-h2: clamp(38px, 4.6vw, 74px);             /* заголовок блока */
  --vf-fs-h2-stage: clamp(34px, 3.5vw, 54px);       /* заголовок закреплённого блока */
  --vf-fs-h2-col: 40px;                             /* заголовок узкой колонки (панель входа, VfHeading size=md): ступень по колонке, не по окну — кегль один у всех заголовков, длинный переносится по словам; «ВОССТАНОВЛЕНИЕ» влезает в форму 392. Сторож — scripts/test-vf-layout-fit.cjs */
  --vf-fs-readout: clamp(26px, 2.4vw, 40px);        /* крупное моно-показание прибора (дистанция фокуса) */
  --vf-fs-slide-cover: 40px;                        /* заголовок обложки питча; на телефоне 30 */
  --vf-fs-faq: clamp(18px, 1.55vw, 22px);           /* вопрос в списке вопросов */
  --vf-fs-gift: clamp(104px, 9.6vw, 156px);         /* крупная цифра (подарочные токены) */
  --vf-fs-final: clamp(72px, 11.5vw, 190px);        /* финальная надпись страницы */
  --vf-fs-footmark: clamp(72px, 16.5vw, 250px);     /* надпись-водяной знак под подвалом */
  --vf-fs-logo-lg: clamp(28px, 3.4vw, 48px);        /* логотип-титр на экране */

  /* Межстрочный, px. Имя: ступень кегля + ритм.
     без суффикса — сплошной (= кегль; у пола 11 — ближайший чётный 12), однострочные подписи и цифры;
     -snug ×1.3–1.4 — короткий текст в две-три строки;
     -text ×1.4–1.45, -body ×1.5–1.55 — читаемый текст; -script ×1.6, -loose ×1.75 — лист. */
  --vf-lh-2xs: var(--vf-lh-xs); /* ← 8: одна ступень с xs */
  --vf-lh-xs: 12px;         /* ← 10: кегль 11 + 1 — выносные Д, Щ, Ц и надстрочные Й, Ё капса не задевают соседей */
  --vf-lh-xs-snug: 14px;    /* ← 13: капс и моно в две-три строки — ×1.27 к 11, между строками капса 6 px */
  --vf-lh-xs-body: 16px;    /* ← 15: пояснение под операцией, ×1.45 */
  --vf-lh-sm: 12px;
  --vf-lh-sm-snug: 16px;    /* ← 15.6–16.8: ссылки-сцены, строка мета, примечание */
  --vf-lh-sm-body: 18px;    /* ← 17.4: журнал, подпись подарка */
  --vf-lh-sm-script: 20px;  /* ← 19.2: сценарный текст */
  --vf-lh-sm-loose: 22px;   /* ← 21: мини-редактор */
  --vf-lh-md: 14px;
  --vf-lh-md-snug: 18px;    /* ← 18.2: подписи кадров, баланс */
  --vf-lh-md-text: 20px;    /* ← 19.6–20.3: текст слайда, строки сравнения и журнала */
  --vf-lh-md-body: 22px;    /* ← 21–21.7: текст карточки, реплика чата */
  --vf-lh-lg: 16px;
  --vf-lh-lg-snug: 20px;    /* ← 20.8: подзаголовок карточки */
  --vf-lh-lg-body: 24px;    /* ← 23.2–24.8: вводный на телефоне, крупный текст слайда */
  --vf-lh-body: 24px;       /* основной текст ×1.5 */
  --vf-lh-body-snug: 22px;  /* ← 22.4: моно-строки входов */
  --vf-lh-body-loose: 26px; /* ← 25.6: ответ в списке вопросов */
  --vf-lh-prose: 28px;      /* ← 27.2: проза-источник (рассказ) */
  --vf-lh-xl: 18px;
  --vf-lh-xl-snug: 22px;    /* ← 22.5: заголовок карточки тарифа */
  --vf-lh-2xl: 22px;
  --vf-lh-3xl: 26px;        /* ← 26.6: заголовок слайда */
  --vf-lh-lead: clamp(24px, 1.94vw, 28px);          /* к --vf-fs-lead ×1.55 */
  --vf-lh-hero-lead: clamp(24px, 1.95vw, 30px);     /* к --vf-fs-hero-lead ×1.5 */
  --vf-lh-h3: clamp(22px, 2vw, 30px);               /* к --vf-fs-h3 ×.95 */
  --vf-lh-h2: clamp(34px, 4.23vw, 68px);            /* к --vf-fs-h2 ×.92 */
  --vf-lh-h2-stage: clamp(32px, 3.22vw, 50px);      /* к --vf-fs-h2-stage ×.92 */
  --vf-lh-h2-col: var(--vf-fs-h2-col);              /* сплошной: заголовок в две строки, выносные кириллицы (Д, Щ) не задевают строку ниже */
  --vf-lh-readout: var(--vf-fs-readout);            /* сплошной */
  --vf-lh-faq: clamp(24px, 2.02vw, 28px);           /* к --vf-fs-faq ×1.3 */
  --vf-lh-gift: clamp(84px, 7.68vw, 124px);         /* к --vf-fs-gift ×.8 */
  --vf-lh-final: clamp(62px, 9.89vw, 164px);        /* к --vf-fs-final ×.86 */
  --vf-lh-footmark: clamp(58px, 13.2vw, 200px);     /* к --vf-fs-footmark ×.8 */
  --vf-lh-logo-lg: var(--vf-fs-logo-lg);            /* сплошной */
  --vf-leading-display: .9;  /* коэффициент для кеглей, которые подгоняет скрипт (планы героя): px считает Hero.tsx */

  /* Трекинг (в em — пропорция от кегля) */
  --vf-track-mega: -.05em;     /* крупные цифры и надписи — плотнее заголовка */
  --vf-track-final: -.045em;   /* финальная надпись */
  --vf-track-display: -.035em; /* заголовок блока, планы героя */
  --vf-track-title: -.03em;    /* заголовок карточки и слайда */
  --vf-track-tight: -.02em;    /* крупное моно-показание */
  --vf-track-hair: .02em;      /* подпись столбца гистограммы */
  --vf-track-xs: .04em;        /* ← .03–.04: цифры диска, моно-строки, мета */
  --vf-track-sm: .06em;        /* цена, легенда тяжести, подпись подарка */
  --vf-track-mono: .08em;      /* чипы, клавиши-метки */
  --vf-track-md: .1em;         /* моно-капс мелких меток */
  --vf-track-lg: .12em;        /* подписи шкал и дорожек */
  --vf-track-label: .14em;     /* капс-подписи HUD и панелей */
  --vf-track-wide: .16em;      /* разреженный капс: логотип, ярлыки */
  --vf-track-boot: .3em;       /* надпись заставки */
  --vf-word-h2: .08em;         /* межсловный заголовка блока */

  /* ═══════════════ Отступы и каркас ═══════════════ */

  --vf-sp-3xs: 2px;
  --vf-sp-2xs: 4px;
  --vf-sp-xs: 6px;
  --vf-sp-sm: 8px;
  --vf-sp-md: 10px;
  --vf-sp-lg: 12px;
  --vf-sp-xl: 16px;   /* ← 14–16 */
  --vf-sp-2xl: 18px;  /* сетка карточек */
  --vf-sp-3xl: 24px;  /* ← 20–26 */
  --vf-sp-4xl: 32px;  /* ← 28–36 */
  --vf-sp-5xl: 48px;  /* ← 44–48 */
  --vf-sp-6xl: 64px;
  --vf-pad: clamp(20px, 5vw, 84px);                 /* поле страницы */
  --vf-sec-top: clamp(120px, 16vh, 180px);           /* отбивка блока сверху */
  --vf-sec-bottom: clamp(90px, 12vh, 140px);         /* отбивка блока снизу */
  --vf-sec-head-gap: clamp(28px, 5vw, 80px);         /* между заголовком и вводным в шапке блока */
  --vf-sec-head-mb: clamp(36px, 5vh, 60px);          /* шапка блока → содержимое */
  --vf-max: 1440px;                                  /* ширина каркаса */

  /* ═══════════════ Радиусы, линии, габариты ═══════════════ */

  /* Радиусы: по роли элемента */
  --vf-r-mark: 2px;    /* метка, чип, клип, ячейка */
  --vf-r-ctl: 4px;     /* кнопка, клавиша, поле (← 3–4) */
  --vf-r-panel: 6px;   /* панель */
  --vf-r-round: 50%;   /* круг: точка, светодиод, ручка */

  /* Толщины (1px — хайрлайн, без токена) */
  --vf-bw-strong: 2px;     /* уголки рамок, скобки AF, акцентная кромка */
  --vf-focus-w: var(--vf-bw-strong);    /* кольцо фокуса */
  --vf-focus-offset: var(--vf-sp-2xs);  /* ← 3: отступ кольца */

  /* Контролы */
  --vf-ctl-sm: 40px;    /* ← 38: кнопка sm, икон-кнопка */
  --vf-ctl-md: 48px;    /* ← 46: кнопка, поле */
  --vf-ctl-key: 32px;   /* клавиша пульта */
  --vf-ctl-key-sm: 28px;/* клавиша sm и клавиша в шапке панели */
  --vf-ctl-chip: 24px;  /* чип */
  --vf-ctl-chip-sm: 22px; /* чип sm */

  /* Иконки и точки-индикаторы */
  --vf-i-sm: 12px;
  --vf-i-md: 16px;
  --vf-i-lg: 22px;
  --vf-i-stroke: 1.8;   /* штрих иконки в единицах сетки 24 (не px) */
  --vf-dot-xs: 6px;     /* точка чипа, светодиод, ромб подписи 3D */
  --vf-dot-sm: 8px;     /* точка шапки панели, REC, ромб ярлыка, тяжесть */
  --vf-dot-md: 10px;    /* маркер легенды */
  --vf-caret-sm-w: 6px;  /* курсор набора в мини-редакторе */
  --vf-caret-sm-h: 12px;
  --vf-caret-md-w: 8px;  /* курсор потока сценария */
  --vf-caret-md-h: 14px;
  --vf-caret-drop: -2px; /* опускание курсора к базовой линии */
  --vf-sketch-line: 4px; /* ← 5: строка-набросок в мини-листе */

  /* Соотношения сторон кадров */
  --vf-ar-scope: 2.39 / 1;  /* широкий экран: кадр раскадровки, монитор */
  --vf-ar-wide: 16 / 9;     /* слайд */
  --vf-ar-still: 7 / 4;     /* кадр постановки (420×240) */

  /* ═══════════════ Тени, свечения, градиенты ═══════════════ */

  --vf-shadow-panel: 0 30px 70px -40px var(--vf-black-a95);
  --vf-shadow-pop: 0 18px 40px -12px var(--vf-black-a90);
  --vf-shadow-slide: 0 30px 60px -24px var(--vf-black);
  --vf-shadow-key: 0 2px 0 var(--vf-ink-edge), inset 0 1px 0 var(--vf-white-a07);
  --vf-shadow-well: inset 0 1px 4px var(--vf-black-a75);    /* ← размытие 3 */
  --vf-shadow-led: inset 0 1px 1px var(--vf-black-a60);          /* погасший светодиод — утоплен */
  --vf-shadow-knob: 0 0 0 1px var(--vf-white-a10), 0 2px 6px var(--vf-black-a75);
  --vf-shadow-osd: 0 1px 4px var(--vf-black-a75);     /* ← размытие 3 */
  --vf-shadow-text: 0 1px 2px var(--vf-black);                   /* подпись поверх кадра */
  --vf-shadow-title: 0 4px 30px color-mix(in srgb, var(--vf-black) 80%, transparent);
  --vf-ring-fg: 0 0 0 1px var(--vf-fg);                          /* обводка выбранного столбца */
  --vf-ring-focus: 0 0 0 1px var(--vf-focus);                    /* поле в фокусе: вместе с акцентной рамкой даёт кольцо 2px */
  --vf-ring-danger: 0 0 0 1px var(--vf-danger);                  /* поле с ошибкой в фокусе */
  --vf-fill-autofill: inset 0 0 0 1000px var(--vf-well);          /* перекрывает заливку автозаполнения браузера цветом колодца */
  --vf-glow-accent: 0 0 8px var(--vf-accent);                    /* горящий светодиод, ячейка ступени */
  --vf-glow-rec: 0 0 8px var(--vf-rec);                          /* плейхед аниматика */
  --vf-glow-rec-dot: 0 0 10px var(--vf-rec);                     /* точка REC в HUD */
  --vf-glow-cta: 0 0 0 4px color-mix(in srgb, var(--vf-accent) 14%, transparent), 0 10px 40px -8px color-mix(in srgb, var(--vf-accent) 45%, transparent);
  --vf-glow-figure: 0 0 40px color-mix(in srgb, var(--vf-accent) 25%, transparent);  /* крупная акцентная цифра */
  /* Радиусы свечения цвета данных (цвет — переменная элемента --c, поэтому тень собирается в CSS) */
  --vf-glow-r-sm: 8px;
  --vf-glow-r-lg: 18px;
  --vf-scope-glow: inset 0 0 40px color-mix(in srgb, var(--vf-phosphor) 6%, transparent);
  --vf-vignette-scope: radial-gradient(90% 90% at 50% 50%, transparent 60%, var(--vf-black-a60));      /* виньетка экрана скопа */
  --vf-vignette-screen: radial-gradient(120% 120% at 50% 50%, color-mix(in srgb, var(--vf-black) 10%, transparent) 40%, var(--vf-black-a60)); /* виньетка монитора */
  --vf-scanlines: repeating-linear-gradient(0deg, var(--vf-black-a25) 0 1px, transparent 1px 4px);     /* строки развёртки (← шаг 3) */
  --vf-mask-fade-x: linear-gradient(90deg, transparent, var(--vf-mask-on) 18%, var(--vf-mask-on) 82%, transparent); /* растворение краёв ленты */

  /* ═══════════════ Движение ═══════════════ */

  --vf-ease-out: cubic-bezier(.16, 1, .3, 1);   /* «cine»: въезд, раскрытие */
  --vf-ease-io: cubic-bezier(.77, 0, .175, 1);
  --vf-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --vf-ease-lens: cubic-bezier(.33, 0, .12, 1); /* перевод фокуса */
  --vf-dur-press: 160ms;  /* отклик нажатия (scale на :active) */
  --vf-dur-fast: 200ms;   /* цвет, рамка при наведении */
  --vf-dur-mid: 300ms;    /* свечение, подсветка карточки и ступени */
  --vf-dur-base: 350ms;   /* раскрытие, смена состояния */
  --vf-dur-slow: 500ms;   /* пружина стрелки в кнопке */
  --vf-dur-film: 900ms;   /* проявление фильма поверх заставки (VfFilm), заголовка из расфокуса */
  --vf-dur-pull-min: 360ms;  /* перевод фокуса за одну букву (VfAuthLayout) */
  --vf-dur-pull-max: 900ms;  /* перевод фокуса через всю шкалу */
  --vf-dur-lens-cal: 1300ms; /* калибровка кольца при появлении: от ближнего упора до формы */
  --vf-dur-push: 1000ms;     /* наезд в кадр после входа */
  /* Периоды повторяющихся анимаций */
  --vf-loop-caret-fast: 900ms; /* курсор потока сценария */
  --vf-loop-caret: 1000ms;     /* курсор мини-редактора */
  --vf-loop-grain: 1100ms;     /* дрожание зерна */
  --vf-loop-rec: 1200ms;       /* мигание REC */
  --vf-loop-spin: 800ms;       /* оборот индикатора ожидания (VfSpinner) */
  --vf-loop-skel: 1600ms;      /* дыхание заготовки загрузки (VfSkeleton) */
  --vf-loop-ring: 1200ms;      /* оборот дуги кольца хода без меры (VfProgressRing): обод крупнее индикатора — медленнее */

  /* ═══════════════ Слои: относительный порядок ═══════════════ */

  --vf-z-behind: -1;    /* под содержимым своего слоя: 3D-холст внутри страницы */
  --vf-z-scene: 0;      /* подсветка, фон */
  --vf-z-content: 1;
  --vf-z-scene-label: 2;
  --vf-z-frame: 55;     /* рамка и HUD */
  --vf-z-grain: 56;
  --vf-z-header: 58;
  --vf-z-pop: 60;       /* всплывающее поверх шапки: меню, подсказка (VfMenu, VfTooltip) */
  --vf-z-boot: 90;
  --vf-z-cursor: 100;
  --vf-z-skip: 200;
  /* состояния */
  --vf-opacity-disabled: .45; /* недоступный контрол: кнопка, поле, чекбокс, клавиша */
  /* внутри иллюстрации (поверх --vf-z-content) */
  --vf-z-mark: 2;      /* метка поверх содержимого: переход на дорожке, цитата над гистограммой */
  --vf-z-pointer: 3;   /* указатель и всплывающее поверх меток: плейхед, панель ИИ над строками */
  --vf-z-osd: 3;       /* OSD-метка поверх титра монитора */

  /* ═══════════════ Брейкпоинты (только max-width) ═══════════════
   *   bp-phone  760px  — телефон: одна колонка, без пиннинга и 3D
   *   bp-tablet 900px  — планшет: карточки-входы и таблицы в одну колонку
   *   bp-laptop 1100px — узкий ноутбук: шапки блоков и пары колонок складываются
   *   bp-desk   1280px — ноутбук: боковые колонки уже
   * В CSS — число ступени и её имя комментарием сразу после скобки:
   * «@media (max-width: 760px) { (комментарий bp-phone)». В TS — VF_BP из
   * components/vf/breakpoints.ts. Значения сверять с этой таблицей. */

  /* ═══════════════ Компоненты ДС ═══════════════ */

  /* Ссылка «К содержанию» */
  --vf-skip-off: -64px;               /* ← -60: спрятана над экраном до фокуса */

  /* Кнопка (VfButton) */
  --vf-btn-gap: var(--vf-sp-md);
  --vf-btn-pad-x: var(--vf-sp-2xl);
  --vf-btn-pad-x-sm: var(--vf-sp-xl);
  --vf-btn-pad-pip: var(--vf-sp-xs);       /* слева у primary: пип у края */
  --vf-btn-pad-pip-sm: var(--vf-sp-2xs);
  --vf-btn-pip: 36px;                      /* ← 34: плашка иконки у primary md (6 px до края при высоте 48) */
  --vf-btn-pip-sm: 28px;                   /* плашка у primary sm */
  --vf-btn-pip-nudge: var(--vf-sp-2xs);    /* ← 3: сдвиг стрелки при наведении */
  --vf-btn-pip-bg: var(--vf-accent-deep);
  --vf-btn-pip-fg: var(--vf-on-accent);

  /* Икон-кнопка (VfIconButton) */
  --vf-ib-size: var(--vf-ctl-sm);
  --vf-ib-size-sm: var(--vf-ctl-key);

  /* Чип (VfChip) */
  --vf-chip-gap: var(--vf-sp-xs);
  --vf-chip-pad-x: var(--vf-sp-sm);

  /* Клавиши (VfKeys, VfKey) */
  --vf-keys-gap: var(--vf-sp-xs);
  --vf-keys-pad: var(--vf-sp-2xs);
  --vf-key-gap: var(--vf-sp-sm);
  --vf-key-pad-l: var(--vf-sp-md);
  --vf-key-pad-r: var(--vf-sp-lg);

  /* Панель (VfPanel, VfPanelTop, VfPanelBody) */
  --vf-pn-top-h: 42px;                 /* шапка панели */
  --vf-pn-top-h-sm: 32px;              /* шапка маленького окна */
  --vf-pn-top-gap: var(--vf-sp-md);
  --vf-pn-top-pad-x: var(--vf-sp-xl);
  --vf-pn-body-pad: var(--vf-sp-xl);   /* тело панели md */
  --vf-pn-body-pad-lg: var(--vf-sp-3xl); /* тело панели lg: карточка тарифа, источник */

  /* Подпись (VfCaption, .vf-cap) */
  --vf-cap-gap: var(--vf-sp-md);       /* подпись ↔ правая часть строки */

  /* Метка-плашка поверх кадра (VfBadge) */
  --vf-badge-pad-y: var(--vf-sp-3xs);
  --vf-badge-pad-x: var(--vf-sp-2xs);
  --vf-badge-inset: var(--vf-sp-xs);   /* от края кадра */

  /* Раскрывающаяся строка (VfDisclosure) и знак «плюс-минус» */
  --vf-pm: 14px;
  --vf-pm-bar: var(--vf-bw-strong);

  /* Скобки AF вокруг цели (.vf-afl) */
  --vf-afl-out-y: -12px;
  --vf-afl-out-x: -16px;
  --vf-afl-arm: 12px;                  /* длина штриха скобки */

  /* Логотип (VfLogo) */
  --vf-logo-gap: var(--vf-sp-md);
  --vf-logo-gap-lg: var(--vf-sp-2xl);
  --vf-logo-mk-w: 16px;
  --vf-logo-mk-h: 12px;
  --vf-logo-mk-w-lg: 26px;
  --vf-logo-mk-h-lg: 20px;
  --vf-logo-dot: 4px;
  --vf-logo-hit: var(--vf-ib-size-sm);   /* цель касания знака без надписи (compact на телефоне) — как у соседних кнопок шапки */

  /* Атмосфера (VfAtmosphere) */
  --vf-backdrop-light:
    radial-gradient(1100px 520px at 18% -8%, color-mix(in srgb, var(--vf-cyan-400) 12%, transparent), transparent 62%),
    radial-gradient(900px 600px at 105% 110%, color-mix(in srgb, var(--vf-accent) 4%, transparent), transparent 60%);
  --vf-glow-size: 1200px;              /* пятно света за курсором */
  --vf-glow-fill: radial-gradient(closest-side,
    color-mix(in srgb, var(--vf-cyan-400) 14%, transparent),
    color-mix(in srgb, var(--vf-green-400) 6%, transparent) 42%,
    color-mix(in srgb, var(--vf-accent) 2%, transparent) 62%, transparent 76%);

  /* Рамка видоискателя и HUD (VfFrame) */
  --vf-inset: 14px;                    /* отступ рамки от края экрана */
  --vf-hud-top: 44px;                  /* строка HUD сверху */
  --vf-hud-x: 42px;                    /* HUD от угла рамки по горизонтали */
  --vf-hud-y: 10px;                    /* HUD от угла рамки по вертикали */
  --vf-hud-gap: var(--vf-sp-md);
  --vf-veil-h: calc(var(--vf-hud-top) + 40px);   /* подложка под HUD сверху и снизу */
  --vf-veil-top: linear-gradient(var(--vf-bg) 52%, color-mix(in srgb, var(--vf-bg) 82%, transparent) 72%, transparent);
  --vf-veil-bottom: linear-gradient(transparent, color-mix(in srgb, var(--vf-bg) 86%, transparent) 28%, var(--vf-bg) 48%);
  --vf-frame-corner: 30px;             /* уголок кадра */
  --vf-frame-cross: 14px;              /* перекрестье в центре */
  --vf-batt-cell-w: 4px;               /* ← 3: деление батареи */
  --vf-batt-cell-h: 6px;
  --vf-batt-tip-w: 2px;
  --vf-batt-tip-h: 4px;
  --vf-vu-w: 96px;                     /* шкала уровня звука */
  --vf-vu-h: 4px;
  --vf-vu-segments: repeating-linear-gradient(90deg, var(--vf-green-400) 0 4px, transparent 4px 6px);
  --vf-vu-peaks: repeating-linear-gradient(90deg, transparent 0 66px, var(--vf-warn) 66px 70px, transparent 70px 72px, var(--vf-warn) 72px 76px, transparent 76px 78px,
    var(--vf-cat-5) 78px 82px, transparent 82px 84px, var(--vf-cat-5) 84px 88px, transparent 88px 90px, var(--vf-cat-5) 90px 94px, transparent 94px);

  /* Курсор AF (VfAfCursor): AfCursor.tsx читает --vf-af-corner */
  --vf-af-corner: 12px;
  --vf-af-tag-off: -20px;              /* ← -16: метка «AF · LOCK» над/под рамкой; строка метки 12, зазор до уголка 8 */

  /* Поле ввода (VfField) */
  --vf-field-h: var(--vf-ctl-md);      /* высота поля, как у кнопки md */
  --vf-field-pad-x: var(--vf-sp-xl);
  --vf-field-gap: var(--vf-sp-sm);     /* подпись ↔ поле ↔ подсказка */

  /* Код подтверждения (VfCodeField) */
  --vf-code-cell-w: 48px;              /* клетка одной цифры */
  --vf-code-cell-h: 56px;              /* выше поля (48): цифра крупнее текста поля */
  --vf-code-gap: var(--vf-sp-sm);      /* между клетками */
  --vf-code-fs: var(--vf-fs-2xl);      /* цифра в клетке */
  --vf-code-lh: var(--vf-lh-2xl);

  /* Чекбокс (VfCheckbox) */
  --vf-check-box: 20px;                /* квадрат; строка подписи той же высоты (lh-md-text) */
  --vf-check-gap: var(--vf-sp-lg);     /* квадрат ↔ подпись */
  --vf-check-mark-in: var(--vf-sp-3xs); /* галочка от края квадрата: 20 − 2×2 = иконка md */

  /* Сообщение (VfAlert) */
  --vf-alert-pad-y: var(--vf-sp-lg);
  --vf-alert-pad-x: var(--vf-sp-xl);
  --vf-alert-gap: var(--vf-sp-md);     /* знак ↔ текст */
  --vf-alert-edge: var(--vf-bw-strong); /* цветная кромка слева */
  --vf-alert-strip-pad-y: var(--vf-sp-md); /* полоса на всю ширину под шапкой (variant=strip): ниже сообщения под формой */
  --vf-alert-act-gap: var(--vf-sp-sm);  /* между действиями и крестиком «Скрыть» */

  /* Текстовая ссылка (VfLink) */
  --vf-link-offset: var(--vf-sp-2xs);  /* подчёркивание ниже базовой линии */
  --vf-link-line: color-mix(in srgb, currentColor 45%, transparent); /* подчёркивание в покое; при наведении — сплошным цветом */

  /* Индикатор ожидания (VfSpinner) */
  --vf-spin: var(--vf-i-md);
  --vf-spin-sm: var(--vf-i-sm);
  --vf-spin-w: var(--vf-bw-strong);    /* толщина кольца */
  --vf-spin-track: color-mix(in srgb, currentColor 25%, transparent); /* неподвижная часть кольца */

  /* Заготовка загрузки (VfSkeleton) */
  --vf-skel-fill: var(--vf-sketch-2);  /* бледная плашка на месте будущего содержимого */
  --vf-skel-text-h: var(--vf-sp-lg);   /* брусок строки текста (подпись поля — кегль 12) */
  --vf-skel-btn-w: 160px;              /* кнопка md с короткой подписью */

  /* Фильм в кадре (VfFilm): обесцвеченная петля, тонированная акцентом слева.
     Фильтр — безразмерные коэффициенты; тонировка ложится умножением. */
  --vf-film-filter: grayscale(1) contrast(1.1) brightness(.66);
  --vf-film-tint: linear-gradient(120deg, color-mix(in srgb, var(--vf-accent) 72%, var(--vf-fg)) 0%, var(--vf-fg) 70%);

  /* Фильм с управляемой резкостью (VfFocusFilm). Размытие — в пикселях малого холста (240 по ширине):
     8 на холсте ≈ 48 на экране 1440. FocusFilm.tsx читает эти числа. */
  --vf-defocus-max: 8px;                            /* ← 7: кадр вне фокуса — пятно */
  --vf-defocus-min: 1px;                            /* фон при резкой цели остаётся мягким: открытая диафрагма */
  --vf-defocus-glow: .18;                           /* вне фокуса кадр светлеет: свет расплывается */
  --vf-defocus-breath: .018;                        /* «дыхание» объектива: на ближней дистанции кадр чуть крупнее */
  --vf-defocus-veil: linear-gradient(90deg, color-mix(in srgb, var(--vf-bg) 72%, transparent) 0%, color-mix(in srgb, var(--vf-bg) 30%, transparent) 38%, transparent 62%); /* затемнение под панелью слева */
  --vf-defocus-veil-compact: linear-gradient(180deg, transparent 0%, transparent 34%, color-mix(in srgb, var(--vf-bg) 70%, transparent) 46%, var(--vf-bg) 64%); /* телефон: кадр — окно сверху, ниже форма на фоне */
  --vf-bokeh-fill: radial-gradient(closest-side, color-mix(in srgb, var(--vf-fg) 12%, transparent) 0 72%, color-mix(in srgb, var(--vf-fg) 18%, transparent) 88%, transparent 100%); /* пятно боке вне фокуса */
  --vf-peak-mask: radial-gradient(closest-side, var(--vf-mask-on) 50%, transparent 100%); /* фокус-пикинг гаснет к краям области цели */

  /* Фокусное кольцо объектива (VfLensRing) */
  --vf-lens-w: 96px;                                /* ← 88: барабан сбоку от панели; футы кеглем 11 («3'6» ≈ 20 px) встают до зубьев */
  --vf-lens-h: 72px;                                /* барабан, лёгший над формой (телефон) */
  --vf-lens-pitch: 4px;                             /* шаг зубьев под follow focus; LensRing.tsx читает */
  --vf-lens-tooth: 2px;                             /* зуб */
  --vf-lens-teeth-w: 6px;                           /* полоса зубьев */
  --vf-lens-num-w: 30px;                            /* колонка цифр метров */
  --vf-lens-ft-x: 64px;                             /* ← 62: колонка футов от края барабана — 6 px за риской метров, 4 px до зубьев */
  --vf-lens-key-w: 10px;                            /* метка шага на кольце */
  --vf-lens-num-y: 18px;                            /* телефон: строка метров от верха барабана */
  --vf-lens-ft-y: 40px;                             /* телефон: строка футов */
  --vf-lens-tick-y: 10px;                           /* телефон: мелкие риски */
  --vf-lens-tick: 8px;                              /* риска у цифры метров */
  --vf-lens-tick-sm: 4px;                           /* промежуточная риска */
  --vf-lens-mark: 16px;                             /* ← 14: метка шага — квадрат у поля (VfStepMark) и высота метки на кольце; цифра 11 с полями, по центру строки подписи (16) и галочки (20) */
  --vf-lens-index-arrow: 4px;                       /* полувысота стрелки индекса */
  --vf-lens-body: linear-gradient(180deg, var(--vf-ink-0), var(--vf-ink-9) 50%, var(--vf-ink-0));    /* цилиндр барабана */
  --vf-lens-body-x: linear-gradient(90deg, var(--vf-ink-0), var(--vf-ink-9) 50%, var(--vf-ink-0));
  --vf-lens-shade: linear-gradient(180deg, var(--vf-black-a90) 0%, transparent 26%, transparent 74%, var(--vf-black-a90) 100%); /* затенение к краям цилиндра */
  --vf-lens-shade-x: linear-gradient(90deg, var(--vf-black-a90) 0%, transparent 24%, transparent 76%, var(--vf-black-a90) 100%);
  --vf-lens-teeth: repeating-linear-gradient(180deg, var(--vf-knurl-ridge) 0 var(--vf-lens-tooth), var(--vf-ink-0) var(--vf-lens-tooth) var(--vf-lens-pitch));
  --vf-lens-teeth-x: repeating-linear-gradient(90deg, var(--vf-knurl-ridge) 0 var(--vf-lens-tooth), var(--vf-ink-0) var(--vf-lens-tooth) var(--vf-lens-pitch));
  --vf-lens-index-glow: 0 0 6px var(--vf-accent-line); /* свечение риски-индекса */

  /* Зона AF на цели в кадре (VfAfZone): AfZone.tsx читает угол и смещения подписей */
  --vf-afz-corner: 16px;
  --vf-afz-idle: color-mix(in srgb, var(--vf-fg) 60%, transparent); /* уголки в покое: читаются и на светлом размытом кадре */
  --vf-afz-tag-y: -20px;                            /* метка над рамкой */
  --vf-afz-dist-y: 8px;                             /* строка оптики под рамкой */

  /* Раскладка страниц доступа «Фокус» (VfAuthLayout): вход, регистрация, сброс и смена пароля, подтверждение и возврат почты */
  --vf-auth-panel-w: 440px;                         /* панель с формой */
  --vf-auth-form-w: 392px;                          /* ширина формы в панели: 440 − 2 × 24 (и образцов в каталоге) */
  --vf-auth-panel-bg: linear-gradient(180deg, color-mix(in srgb, var(--vf-ink-8) 92%, transparent), color-mix(in srgb, var(--vf-ink-5) 88%, transparent));
  --vf-auth-rig-gap: var(--vf-sp-sm);               /* панель ↔ кольцо */
  --vf-auth-pad-t: calc(var(--vf-hud-top) + var(--vf-top-h) + clamp(24px, 4vh, 48px)); /* форма стоит от верха, не по центру: ошибка её не сдвигает; на 1440×779 подвал регистрации над нижней подложкой HUD */
  --vf-auth-pad-b: var(--vf-veil-h);                /* низ формы не уходит под нижнюю подложку HUD */
  --vf-auth-form-gap: var(--vf-sp-2xl);             /* между полями формы */
  --vf-auth-window: clamp(144px, 24svh, 232px);    /* телефон: окно в кадр над формой; на невысоком экране ниже — кнопка входа остаётся на первом экране */
  --vf-auth-in-y: 16px;                             /* появление панели: подъём */
  --vf-auth-in-x: -10px;                            /* появление кольца: выезд из-под панели */
  --vf-auth-in-blur: 10px;                          /* появление заголовка: из расфокуса */
  --vf-auth-in-delay: 120ms;                        /* панель вступает чуть позже фильма */
  --vf-auth-foot-gap: var(--vf-sp-xl);              /* форма ↔ черта подвала («Уже зарегистрированы? Войти») */
  --vf-auth-foot-pad: var(--vf-sp-lg);              /* черта ↔ ссылки подвала */

  /* Всплывающая плита (VfMenu, VfTooltip): растёт из точки якоря, без движения — появляется сразу */
  --vf-pop-scale: .96;                              /* начальный масштаб появления (не от нуля: плита не «выстреливает») */
  --vf-pop-in: var(--vf-dur-fast);                  /* появление */
  --vf-pop-out: var(--vf-dur-press);                /* уход — быстрее появления */

  /* Меню у якоря (VfMenu) */
  --vf-menu-w: 280px;                               /* ширина плиты: имя и почта в шапке, пункт с меткой «Скоро» */
  --vf-menu-pad: var(--vf-sp-2xs);                  /* поле плиты вокруг пунктов */
  --vf-menu-row-h: var(--vf-ctl-sm);                /* пункт — как икон-кнопка md (40) */
  --vf-menu-row-pad-x: var(--vf-sp-md);
  --vf-menu-row-gap: var(--vf-sp-md);               /* значок ↔ подпись ↔ метка ↔ галочка */
  --vf-menu-row-pad-y: var(--vf-sp-sm);             /* пункт с пояснением: две строки */
  --vf-menu-head-pad: var(--vf-sp-lg);              /* шапка «кто я» над пунктами */
  --vf-menu-sec-pad-t: var(--vf-sp-md);             /* заголовок группы пунктов */
  --vf-menu-hover: var(--vf-surface-2);             /* пункт под указателем или в фокусе клавиатуры */

  /* Подсказка (VfTooltip) */
  --vf-tip-pad-y: var(--vf-sp-xs);
  --vf-tip-pad-x: var(--vf-sp-md);
  --vf-tip-max-w: 240px;                            /* длиннее — переносится, не растягивается через шапку */

  /* Аватар (VfAvatar): тон фона — от почты, из тонов данных --vf-tone-* */
  --vf-avatar-md: 28px;                             /* в икон-кнопке md (40): по 6 до рамки */
  --vf-avatar-sm: 20px;                             /* в строке рядом с текстом 14 */
  --vf-avatar-fg: var(--vf-bg);                     /* буквы на светлом тоне: контраст ≥ 6:1 на каждом тоне палитры */

  /* Счётчик на кнопке-значке (VfCounter, VfCounterAnchor): внутри квадрата кнопки, соседей не задевает */
  --vf-counter-h: 16px;                             /* плашка числа: высота и наименьшая ширина */
  --vf-counter-pad-x: var(--vf-sp-2xs);             /* «99+» шире круга */
  --vf-counter-inset: var(--vf-sp-2xs);             /* плашка от угла квадрата */
  --vf-counter-dot: var(--vf-dot-sm);               /* точка «есть новое» без числа */
  --vf-counter-dot-inset: var(--vf-sp-sm);          /* точка ближе к значку, чем число */
  --vf-counter-cut: 0 0 0 var(--vf-bw-strong) var(--vf-bg); /* вырез вокруг плашки: отделяет её от значка и кольца хода */

  /* Кольцо хода (VfProgressRing): обод вокруг значка в икон-кнопке */
  --vf-ring: 32px;                                  /* в икон-кнопке md (40): по 4 до края */
  --vf-ring-w: var(--vf-bw-strong);                 /* толщина обода */
  --vf-ring-track: var(--vf-line-2);                /* непройденная часть обода */
  --vf-ring-arc: .3;                                /* доля дуги, когда меры хода нет */

  /* Одометр (VfOdometer): Odometer.tsx читает --vf-odo-hold */
  --vf-odo-roll: var(--vf-dur-base);                /* докрутка разряда — без пружины: баланс не проскакивает своё значение */
  --vf-odo-hold: var(--vf-dur-film);                /* сколько дельта стоит после последнего изменения */
  --vf-odo-rise: var(--vf-sp-2xs);                  /* дельта входит снизу и уходит вверх на эту высоту */
  --vf-odo-gap: var(--vf-sp-3xs);                   /* дельта ↔ число */

  /* Ссылка раздела в шапке (VfNavLink) */
  --vf-nav-h: var(--vf-ctl-sm);                     /* высота строки шапки для ссылки — как кнопка sm */
  --vf-nav-pad-x: var(--vf-sp-md);
  --vf-nav-rail: var(--vf-bw-strong);               /* рельс под текущим разделом */

  /* ═══════════════ Блоки главной ═══════════════ */

  /* Шапка гостя (HomeHeader на главной, VfTopBar на страницах доступа) */
  --vf-top-h: 58px;
  --vf-top-gap: var(--vf-sp-3xl);
  --vf-top-veil-ext: -26px;            /* подложка шапки ниже её края */
  --vf-top-veil: linear-gradient(var(--vf-bg) 66%, transparent);
  --vf-top-logo-fs: var(--vf-fs-xl);
  --vf-top-logo-lh: var(--vf-lh-xl);
  --vf-top-nav-gap: var(--vf-sp-xs);         /* между ссылками разделов вошедшего */
  --vf-top-sep-h: 20px;                       /* черта между разделами и кошельком */
  --vf-top-wallet-skel-w: 72px;               /* кость числа кошелька до ответа */
  --vf-top-ring-sm: 26px;                     /* кольцо хода у колокольчика sm (32) на телефоне */
  --vf-bell-bump: 700ms;                      /* = BELL_BUMP_MS (use-activity-bell.ts): класс снимают по этому числу */

  /* Сценарный текст (script.css) */
  --vf-script-gap: var(--vf-sp-lg);

  /* SC 01 · Первый экран (hero.css) */
  --vf-hero-pad-t: calc(var(--vf-hud-top) + var(--vf-sp-6xl) + var(--vf-sp-4xl));
  --vf-hero-pad-b: clamp(112px, 13vh, 150px);
  --vf-hero-thirds: color-mix(in srgb, var(--vf-accent) 5%, transparent);  /* сетка третей кадра */
  --vf-hero-fs-far: clamp(34px, 8.6vw, 200px);     /* запасной кегль дальнего плана до подгонки */
  --vf-hero-fs-near: clamp(80px, 17vw, 380px);     /* запасной кегль ближнего плана */
  --vf-hero-lh-far: clamp(30px, 7.74vw, 180px);    /* ×.9 */
  --vf-hero-lh-near: clamp(72px, 15.3vw, 342px);   /* ×.9 */
  --vf-hero-near-gap: clamp(30px, 4.6vh, 60px);    /* между планами */
  --vf-hero-tag-inset: .04em;                      /* подпись плана от края буквы */
  --vf-hero-row-gap: clamp(44px, 6vh, 80px);       /* планы → вводный и кнопки */
  --vf-hero-disc: clamp(130px, 17vh, 210px);       /* диск фокуса */
  --vf-hero-dial-fs: clamp(12px, calc(32px - 1.6vh), 20px); /* подписи диска в единицах viewBox 220: диск ×0,59–0,95 на любом окне, кегль идёт обратно его 17vh — на экране 11,5–12,4 px */
  --vf-boot-ring-w: 320px;                         /* кольцо заставки */
  --vf-boot-ring-h: 46px;
  --vf-boot-run: 1050ms;          /* проезд шкалы фокусных заставки */
  --vf-boot-lock-at: 850ms;       /* «LOCK» загорается к концу проезда */
  --vf-boot-lock-blink: 700ms;    /* мигание «LOCK», пока страница дособирается */
  --vf-boot-row-y: 16px;                           /* лента цифр в кольце */
  --vf-boot-row-h: 16px;
  --vf-boot-tick-y: -6px;                          /* риска над цифрой */
  --vf-boot-tick-h: 20px;
  --vf-boot-idx-y: 8px;                            /* ← 7: индекс от верха кольца */
  --vf-boot-arrow: 4px;                            /* полуширина стрелки индекса */
  --vf-boot-arrow-h: 6px;                          /* ← 5 */
  --vf-boot-idx-fill: linear-gradient(var(--vf-accent), color-mix(in srgb, var(--vf-accent) 15%, transparent));
  --vf-boot-idx-glow: drop-shadow(0 0 4px color-mix(in srgb, var(--vf-accent) 80%, transparent));

  /* Лента под первым экраном (reel.css, Reel.tsx): своего номера сцены нет */
  --vf-rl-pad-t: var(--vf-sp-4xl);
  --vf-rl-pad-b: 0px;                              /* дальше отбивка следующего блока */
  --vf-rl-ar: 16 / 10;                             /* окно стадии в кадре плёнки */
  --vf-rl-cell-pad: var(--vf-sp-2xs);              /* окно ↔ край кадра */
  --vf-rl-perf-min: 12px;                          /* полоса перфорации: доля ширины кадра в этих пределах */
  --vf-rl-perf-max: 22px;
  --vf-rl-perf-k: .085;
  --vf-rl-cell-edge: var(--vf-ink-0);              /* межкадровая полоса */
  --vf-rl-perf-hole: var(--vf-ink-10);
  --vf-rl-perf: linear-gradient(90deg, transparent 0 30%, var(--vf-rl-perf-hole) 30% 70%, transparent 70%);
  --vf-rl-kk: color-mix(in srgb, var(--vf-tone-amber) 38%, transparent);  /* краевая маркировка плёнки */
  --vf-rl-fade: linear-gradient(90deg, transparent, var(--vf-mask-on) 7%, var(--vf-mask-on) 93%, transparent); /* лента растворяется у краёв экрана */
  --vf-rl-prose-bg: linear-gradient(var(--vf-ink-9), var(--vf-ink-7));    /* страница рассказа */
  --vf-rl-sch-bg: radial-gradient(120% 90% at 50% 70%, var(--vf-ink-8), var(--vf-ink-1)); /* площадка 3D-схемы */
  --vf-rl-sch-grid: var(--vf-fog-a25);             /* сетка площадки */
  --vf-rl-osd-halo: var(--vf-black-a60);           /* обводка экранной метки поверх картинки */
  --vf-rl-osd-dim: color-mix(in srgb, var(--vf-fg) 75%, transparent);
  --vf-rl-rec-glow: color-mix(in srgb, var(--vf-rec) 35%, transparent);
  --vf-rl-paper: var(--vf-fog-300);                /* лист сториборда */
  --vf-rl-paper-ink: var(--vf-ink-2);
  --vf-rl-paper-well: var(--vf-fog-600);           /* место кадра, пока он рисуется */
  --vf-rl-gate-out: 6px;                           /* стык выходит за плёнку */
  --vf-rl-gate-fill: linear-gradient(transparent, var(--vf-accent) 12% 88%, transparent);
  --vf-rl-gate-glow: 0 0 14px color-mix(in srgb, var(--vf-accent) 55%, transparent);
  --vf-rl-af-out: 10px;                            /* рамка AF выше и ниже плёнки; Reel.tsx читает */
  --vf-rl-af-in: 2px;                              /* и уже окна зоны */
  --vf-rl-af-glow: drop-shadow(0 0 4px color-mix(in srgb, var(--vf-accent) 50%, transparent));

  /* SC 02 · Входы (entries.css) */
  --vf-en-bin-hover: color-mix(in srgb, var(--vf-accent) 30%, transparent);  /* рамка корзины при наведении */
  --vf-en-io-key: 44px;                            /* ширина ключа в моно-строке «вход → выход» */
  --vf-en-merge-h: 110px;                          /* линии, сходящиеся в базу */
  --vf-en-book-arrow: 34px;                        /* колонка стрелки «проза → сценарий» */
  --vf-en-page-h: 170px;                           /* мини-лист */
  --vf-en-ed-max: 390px;                           /* мини-редактор */
  --vf-en-cell-h: 8px;                             /* ← 9: ячейка мини-разбора */
  --vf-en-tab-lh: var(--vf-lh-xs-snug);            /* метка-таб мини-редактора: кегль 11, строка 14 — как у кнопки-таба */

  /* SC 03 · Экранизация (adaptation.css) */
  --vf-ad-mid-w: 120px;                            /* колонка потока между прозой и сценарием */
  --vf-ad-flow-h: 70px;                            /* стрелка потока */
  --vf-ad-txt-min: 300px;                          /* лист, куда пишется сценарий */
  --vf-ad-act-w: 56px;                             /* телефон: колонка «АКТ III» в строке плана (7 знаков капса ≈ 51) */

  /* SC 04 · Писатель (writer.css) */
  --vf-wr-side-w: 200px;                           /* список сцен */
  --vf-wr-aside-w: 300px;                          /* версии и форматы */
  --vf-wr-sc-num: 16px;                            /* номер сцены */
  --vf-wr-page-min: 450px;
  --vf-wr-page-pad-x: clamp(18px, 3vw, 46px);
  --vf-wr-tb-y: 76px;                              /* панель ИИ над выделенной строкой */
  --vf-wr-trunk: color-mix(in srgb, var(--vf-fg-2) 45%, transparent);  /* ствол графа версий */
  --vf-wr-rev: 14px;                               /* квадрат цвета ревизии */
  --vf-wr-fx-min: 220px;                           /* панель «Разбор формата» */
  --vf-wr-vg-fs: 11px;                             /* подписи графа версий в единицах viewBox 260: колонка 300 → рисунок 267 px, ×1,03 */

  /* SC 05 · Постановка (staging.css, staging-lens.tsx) */
  --vf-stg-min-h: 660px;
  --vf-stg-head-max: 780px;
  --vf-stg-veil: color-mix(in srgb, var(--vf-bg) 92%, transparent);    /* подложка заголовка поверх 3D */
  --vf-stg-veil-mask: radial-gradient(50% 50% at 50% 50%, var(--vf-mask-on) 62%, transparent 100%);
  --vf-stg-veil-l: -400px;                         /* вылет подложки за заголовок */
  --vf-stg-veil-r: -300px;
  --vf-stg-veil-y: -150px;
  --vf-stg-ctl-w: 380px;                           /* пульт 3D-схемы */
  --vf-stg-step-link: 28px;                        /* линия между шагами */
  --vf-stg-osd-corner: 22px;                       /* уголок экранной рамки */
  --vf-stg-af-w: 64px;                             /* рамка AF на герое */
  --vf-stg-af-h: 120px;
  --vf-stg-af-glow: drop-shadow(0 0 4px color-mix(in srgb, var(--vf-accent) 60%, transparent));
  --vf-stg-osd-b-y: -66px;                         /* строка под экранной рамкой */
  --vf-stg-ref-h: 30px;                            /* ссылка-референс */
  --vf-stg-ref-m: 22px;                            /* знак референса */
  --vf-stg-static-ctl-max: 560px;
  --vf-stg-fb-fs: clamp(11px, calc(26px - 1.5vw), 16px); /* подписи статичной схемы в единицах viewBox 420: схема — пол-ряда, на 761 это 333 px (×0,79); кегль крупнее, пока окно узкое */
  --vf-lens-track-y: 14px;                         /* дорожка ползунка объектива */
  --vf-lens-track-h: 4px;
  --vf-lens-knob: 20px;                            /* ручка */
  --vf-lens-knob-y: 6px;
  --vf-lens-knob-core: 6px;                        /* отступ акцентного центра ручки */
  --vf-lens-knurl: repeating-conic-gradient(var(--vf-knurl-ridge) 0 10deg, var(--vf-knurl-groove) 10deg 30deg);

  /* SC 06 · Сториборд (storyboard.css) */
  --vf-sb-label-w: 70px;                           /* подписи дорожек слева */
  --vf-sb-ruler-h: 16px;
  --vf-sb-ruler-ticks: repeating-linear-gradient(90deg, var(--vf-line-2) 0 1px, transparent 1px 24px) bottom / 100% 6px no-repeat;
  --vf-sb-track-h: 52px;                           /* дорожка клипов */
  --vf-sb-trn: 18px;                               /* ромб перехода */
  --vf-sb-audio-h: 30px;
  --vf-sb-wave-fill: color-mix(in srgb, var(--vf-ok) 35%, transparent);
  --vf-sb-wave-line: color-mix(in srgb, var(--vf-ok) 70%, transparent);
  --vf-sb-ph-w: var(--vf-bw-strong);
  --vf-sb-afz-out: 6px;                            /* вынос рамки AF за край кадра */
  --vf-sb-afz-hunt: 10px;                          /* рамка шире, пока фокус ищет; на захвате сжимается */               /* плейхед */
  --vf-sb-ph-tail: -40px;                          /* плейхед уходит до дорожки звука */
  --vf-sb-ph-head: 6px;                            /* полуширина головки плейхеда */
  --vf-sb-ph-head-h: 8px;
  --vf-sb-ph-head-y: -2px;

  /* SC 07 · Библия (bible.css) */
  --vf-bb-scr-min: 300px;                          /* экран скопа */
  --vf-bb-leg-w: 10px;                             /* штрих легенды */
  --vf-bb-leg-h: var(--vf-bw-strong);
  --vf-bb-hist-top: 38px;
  --vf-bb-hist-bottom: 30px;
  --vf-bb-hb-label: 24px;                          /* ← 20: подпись столбца в два яруса шахматкой, 2 × --vf-lh-xs */
  --vf-bb-quote-w: min(300px, 52%);
  --vf-bb-quote-gap: 34px;                         /* гистограмма ↔ цитата */
  --vf-bb-quote-top: 44px;
  --vf-bb-quote-bg: color-mix(in srgb, var(--vf-well) 94%, transparent);
  --vf-bb-cl-bg: color-mix(in srgb, var(--vf-cell) 90%, transparent);  /* строка нестыковки */
  --vf-bb-cl-mark: 26px;                           /* знак нестыковки */
  --vf-bb-text-max: 330px;                         /* подпись под экраном */
  --vf-bb-vec-fs: 12px;                            /* имена и буквы узлов векторскопа в единицах viewBox 420×300 (meet): экран 300 → ×0,99 */

  /* SC 08 · Питч (pitch.css) */
  --vf-pl-pad-b: clamp(16px, 3vh, 40px);
  --vf-pl-slide-w: clamp(270px, 31vw, 460px);
  --vf-pl-cover-veil: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--vf-bg) 80%, transparent));
  --vf-pl-t-fs: var(--vf-fs-3xl);                  /* заголовок слайда */
  --vf-pl-t-lh: var(--vf-lh-3xl);
  --vf-pl-cover-lh: 38px;                          /* к --vf-fs-slide-cover ×.95 */
  --vf-pl-p-lg-fs: var(--vf-fs-lg);                /* крупный текст слайда */
  --vf-pl-p-lg-lh: var(--vf-lh-lg-body);
  --vf-pl-avatar: 48px;                            /* кружок героя */
  --vf-pl-acts-h: 10px;                            /* полоса актов */
  --vf-pl-timer-w: 120px;                          /* отсчёт автолистания */
  --vf-pl-timer-h: var(--vf-bw-strong);

  /* SC 09 · Ассистент (assistant.css) */
  --vf-as-pad-t: clamp(104px, 13vh, 140px);
  --vf-as-msg-fs: var(--vf-fs-md);                 /* ← 15: реплика */
  --vf-as-msg-lh: var(--vf-lh-md-body);
  --vf-as-body-max: 520px;                         /* потолок ленты чата, дальше — прокрутка */
  --vf-as-mark: color-mix(in srgb, var(--vf-accent) 16%, transparent);  /* найденная фраза в сцене */

  /* SC 10 · Почему (why.css) */
  --vf-wy-stage-h: clamp(380px, 34vw, 480px);
  --vf-wy-win-w: clamp(190px, 19vw, 280px);        /* окно сервиса */
  --vf-wy-body-h: clamp(90px, 9vw, 130px);
  --vf-wy-cell-h: 12px;
  --vf-wy-cell-bad: color-mix(in srgb, var(--vf-danger) 32%, transparent);
  --vf-wy-bub-h: 22px;                             /* пузырь чата */
  --vf-wy-bub-me: color-mix(in srgb, var(--vf-accent) 14%, transparent);
  --vf-wy-img-h: clamp(70px, 7vw, 104px);
  --vf-wy-img-fill: linear-gradient(160deg, color-mix(in srgb, var(--vf-tone-cyan) 18%, var(--vf-bg)), var(--vf-bg) 70%);
  --vf-wy-one-w: min(620px, 72%);                  /* один монитор */

  /* SC 11 · Оплата (pricing.css) */
  --vf-py-led-key: 52px;                           /* колонка суммы в строке подарка */
  --vf-py-meter-h: 200px;                          /* экспонометр */
  --vf-py-meter-fs: clamp(11px, calc(34px - 5vw), 16px); /* подписи экспонометра в единицах viewBox 340×160 (meet): от 761 рисунок ×1,25, на телефоне уже — до ×0,7 на 320; кегль растёт, пока окно уже 460 */
  --vf-py-cell-w: 22px;                            /* ячейка ступени качества */
  --vf-py-cell-h: 12px;
  --vf-py-zero: 18px;                              /* знак «0» у бесплатного */
  --vf-py-log-time: 62px;                          /* время в журнале */
  --vf-py-tt-icon: 24px;                           /* иконка типа токенов в «Два вида токенов»: на два ряда подписи (название + разделы) */

  /* SC 12 · Вопросы (faq.css) */
  --vf-fq-col-ev: 70px;                            /* номер события */
  --vf-fq-col-tr: 60px;                            /* переход */
  --vf-fq-col-tc: 150px;                           /* таймкод и знак */
  --vf-fq-col-pm: 20px;                            /* только знак (телефон) */
  --vf-fq-a-max: 760px;                            /* ответ */

  /* SC 13 · Финал (final.css) */
  --vf-fn-pad-t: clamp(120px, 16vh, 180px);
  --vf-fn-pad-b: clamp(110px, 14vh, 160px);

  /* Подвал (footer.css) */
  --vf-foot-pad-t: 80px;
  --vf-foot-pad-b: var(--vf-sp-6xl);               /* ← 110: шкалы прокрутки больше нет */
  --vf-foot-fill: linear-gradient(transparent, var(--vf-bg) var(--vf-foot-pad-t)); /* с прозрачного: свечение фона над подвалом гаснет плавно, без резкого края (на телефоне оно стоит прямо над ним) */
  --vf-foot-mark-fill: linear-gradient(180deg, color-mix(in srgb, var(--vf-fg) 11%, transparent), transparent 88%);

  color-scheme: dark;
}

/* Контрол vf на светлой плоскости сервиса (Писатель в светлой теме: `data-writer-theme="light"`).
   «Видоискатель» только тёмный — текст и рисунок у него светлые. Тень --vf-black-a15 на светлом
   грунте давала светло-серую плашку, и имя ступени пропадало (1,36:1). Здесь колодец — своя тёмная
   плоскость vf, контрол стоит тёмным прибором. Внутри `.vf` грунт и так тёмный — туда правило не ходит.
   Роли старой ДС внутри контрола (цвет цифры цены) отвечает тёмная палитра: её скоуп ставит
   обёртка `ds/EffortSlider`. */
:root[data-writer-theme="light"] .vf-tokens:not(.vf *) {
  --vf-embed-bg: var(--vf-well);
}

/* Ноутбук */
@media (max-width: 1280px) { /* bp-desk */
  :is(.vf, .vf-tokens) {
    --vf-wr-side-w: 170px;
    --vf-wr-aside-w: 260px;
    --vf-wr-vg-fs: 14px;           /* колонка 260 → граф 227 px, ×0,87: на экране 12,2 */
    --vf-stg-ctl-w: 340px;
    --vf-bb-vec-fs: clamp(12px, calc(26px - 1.2vw), 14px); /* векторскоп в колонке 5 из 12: на 1101 рисунок 382 px, ×0,91 */
  }
}

/* Узкий ноутбук */
@media (max-width: 1100px) { /* bp-laptop */
  :is(.vf, .vf-tokens) {
    --vf-auth-panel-w: 420px;
    --vf-auth-form-w: 372px;
    --vf-fs-h2-col: 38px;          /* форма 372: «ВОССТАНОВЛЕНИЕ» 368 */
    --vf-wr-vg-fs: 11px;           /* «версии и форматы» в две колонки: граф от 309 px */
    --vf-bb-vec-fs: 12px;          /* скопы во всю ширину: векторскоп по высоте экрана, ×0,99 */
  }
}

/* Телефон */
@media (max-width: 760px) { /* bp-phone */
  :is(.vf, .vf-tokens) {
    --vf-inset: 6px;
    --vf-hud-top: 30px;
    --vf-hud-x: 24px;
    --vf-hud-y: 8px;
    --vf-hud-gap: var(--vf-sp-sm);
    --vf-frame-corner: 18px;
    --vf-pad: 16px;
    --vf-fs-slide-cover: 30px;
    --vf-fs-h2: clamp(32px, 9.4vw, 46px);
    --vf-lh-h2: clamp(30px, 8.65vw, 42px);
    --vf-fs-h2-col: clamp(24px, 7.5vw, 34px); /* панель во всю ширину, колонка — окно − 66: на 320 «ВОССТАНОВЛЕНИЕ» 232 в 238 и с полосой прокрутки */
    --vf-sec-top: 96px;
    --vf-sec-bottom: 72px;
    --vf-top-h: 52px;
    --vf-top-gap: var(--vf-sp-lg);
    --vf-top-logo-fs: var(--vf-fs-lg);
    --vf-top-logo-lh: var(--vf-lh-lg);
    --vf-hero-pad-t: calc(var(--vf-hud-top) + var(--vf-sp-6xl) + var(--vf-sp-md));
    --vf-hero-pad-b: calc(var(--vf-sp-6xl) + var(--vf-sp-4xl));
    --vf-boot-row-y: 10px;
    --vf-wr-page-pad-x: var(--vf-sp-xl);
    --vf-wr-vg-fs: 12px;           /* граф во всю ширину: на 320 это 254 px, ×0,98 */
    --vf-stg-fb-fs: clamp(11px, calc(30px - 4vw), 18px); /* схема во всю ширину: на 320 это 288 px, ×0,69 */
    --vf-sb-label-w: 44px;
    --vf-bb-scr-min: 280px;
    --vf-bb-hist-bottom: 150px;
    --vf-bb-vec-fs: clamp(12px, calc(32px - 4.4vw), 18px); /* векторскоп по ширине: на 320 ×0,64, с 444 — по высоте экрана 280, ×0,93 */
    --vf-pl-t-fs: var(--vf-fs-2xl);
    --vf-pl-t-lh: 20px;
    --vf-pl-cover-lh: 28px;
    --vf-pl-p-lg-fs: var(--vf-fs-md);
    --vf-pl-p-lg-lh: var(--vf-lh-md-text);
    --vf-wy-stage-h: 380px;
    --vf-wy-win-w: 150px;
    --vf-fq-col-ev: 40px;
    --vf-auth-pad-t: calc(var(--vf-hud-top) + var(--vf-top-h) + var(--vf-auth-window));
    --vf-afz-corner: 12px;
  }
}