@vernikr/size-report 1.1.1

package/src/metrics.js

@@ -0,0 +1,268 @@
+import zlib from 'zlib';
+import path from 'path';
+import { EXACT_STRATEGIES, assertCompilable, byteLen, minifyForm, strategyFor } from './strip.js';
+import { MINIFY_LOADERS, minifier, minifyWithEsbuild } from './minify.js';
+import { CHARS_PER_TOKEN, isBinary, tokenCount, tokenizer } from './tokens.js';
+
+/* Реестр метрик: что измеряется, нужен ли метрике текст и насколько честна цифра.
+ * Отдельно от способов снятия балласта: метрика — это обещание про число, а не
+ * способ его получить.
+ *
+ * Описание метрики для читателя берётся не из полей реестра, а из `metricView`:
+ * у одной и той же метрики оно зависит от настроек (`min` — это настоящее сжатие
+ * или упрощение, `tok` — точный словарь или оценка), и разойтись двум ответам на
+ * один вопрос негде. */
+
+/* Способы получить метрику `min`: снятие балласта и настоящее сжатие. Механизм у
+ * них разный, и обещание тоже, поэтому у каждого свой способ, своя честность и своё
+ * примечание — и никто из них не выдаётся за другого. */
+export const MINIFY_ENGINES = ['strip', 'esbuild'];
+
+const STYLES = {
+  strip: {
+    note: { ru: 'та же форма без комментариев и отступов', en: 'the same form without comments and indentation' },
+    method: {
+      ru: 'снятие комментариев и отступов (не минификация: имена не сокращаются)',
+      en: 'comments and indentation stripped (not minification: names are not shortened)'
+    }
+  },
+  esbuild: {
+    note: {
+      ru: 'настоящая минификация: имена сокращены, пробелы убраны',
+      en: 'real minification: names shortened, whitespace removed'
+    },
+    method: { ru: 'esbuild {version} (minify, rename)', en: 'esbuild {version} (minify, rename)' },
+    fallback: {
+      ru: '; остальные форматы ({exts}) — упрощение без комментариев и отступов, то есть приближение',
+      en: '; other formats ({exts}) lose comments and indentation — an approximation'
+    },
+    unavailable: {
+      ru: ' (минификатор esbuild недоступен — счёт упрощением, то есть приближением)',
+      en: ' (the esbuild minifier is unavailable — comments and indentation are stripped: an approximation)'
+    }
+  },
+  tok: {
+    note: {
+      ru: 'вес для языковой модели: на сколько единиц текста (токенов) он разбирается',
+      en: 'weight for a language model: how many text units (tokens) it splits into'
+    },
+    method: { ru: '{tool} {version}, {encoding} (BPE)', en: '{tool} {version}, {encoding} (BPE)' },
+    binary: {
+      ru: '; для бинарных форматов ({exts}) это счёт байтов, а не текста — приближение',
+      en: '; binary formats ({exts}) are counted by bytes rather than text — an approximation'
+    },
+    estimate: {
+      ru: 'оценка по длине: 1 токен ≈ {chars} знака ({encoding} недоступен) — приближение',
+      en: 'length-based estimate: 1 token ≈ {chars} characters ({encoding} is unavailable) — an approximation'
+    }
+  }
+};
+
+/* Метрика объявляет, нужен ли ей текст блоба: `needsText: false` вместе с
+ * `fromSize: true` означает «хватит размера объекта», и тогда содержимое не
+ * читается вовсе (`git cat-file --batch` не вызывается). */
+export const METRICS = {
+  raw: {
+    label: 'raw',
+    needsText: false,
+    fromSize: true,
+    note: { ru: 'файл как он есть', en: 'the file as it is' },
+    method: {
+      ru: 'размер объекта git',
+      en: 'the size of the git object'
+    },
+    accuracy: 'exact',
+    measure: (text) => byteLen(text)
+  },
+  min: {
+    label: 'min',
+    needsText: true,
+    view: minView,
+    measure: (text, file, cfg, rev) => {
+      if (esbuildLoader(file, cfg) !== null) return byteLen(minifyWithEsbuild(text, file, rev));
+      const min = minifyForm(text, file, cfg);
+      const ext = path.extname(file).toLowerCase();
+      /* Гард стриппера стережёт упрощение, а не минификатор: минификатор разбирает
+       * файл сам и о своей неудаче говорит отказом (`src/minify.js`), а этот гард
+       * отвечает на вопрос, не выбросило ли наше снятие балласта чего-нибудь, кроме
+       * комментариев и отступов. */
+      if (strategyFor(file, cfg) === 'strip-js' && cfg.minify.guard.indexOf(ext) >= 0) {
+        assertCompilable(min, rev, file, text);
+      }
+      return byteLen(min);
+    }
+  },
+  tok: {
+    label: 'tok',
+    needsText: true,
+    view: tokView,
+    measure: (text, _file, cfg) => tokenCount(text, cfg.tokens)
+  },
+  gzip: {
+    label: 'gzip',
+    needsText: true,
+    note: { ru: 'сжатый поток (zlib, уровень 9)', en: 'compressed stream (zlib, level 9)' },
+    method: { ru: 'zlib, уровень 9', en: 'zlib, level 9' },
+    accuracy: 'exact',
+    measure: (text) => zlib.gzipSync(Buffer.from(text, 'utf8'), { level: 9 }).length
+  }
+};
+
+/* Описание метрики для читателя: `note` — что означает число, `method` — чем оно
+ * получено, `accuracy` — точное оно или приближённое. */
+export function metricView(name, cfg) {
+  const metric = METRICS[name];
+  if (metric.view !== undefined) return metric.view(cfg);
+  return {
+    label: metric.label,
+    note: metric.note[cfg.locale],
+    method: metric.method[cfg.locale],
+    accuracy: metric.accuracy
+  };
+}
+
+/* Подпись метрики `min`. Соглашение о честности: `accuracy` говорит про худшее в
+ * колонке, а способ называет, где именно приближение, — поэтому один формат без
+ * минификатора делает метрику приближённой целиком, а не прячется за «exact»
+ * соседнего файла. Худшее берётся по тому же правилу, что и пометки клеток
+ * (`pointExact`), а не по названию способа: отчёт, где нет ни одного
+ * приближённого формата, точен и со снятым балластом. */
+function minView(cfg) {
+  const loc = cfg.locale;
+  const rough = approximateFormats('min', cfg);
+  if (minEngine(cfg) === 'esbuild') {
+    let method = STYLES.esbuild.method[loc].replace('{version}', minifier().version);
+    if (rough.length > 0) method += STYLES.esbuild.fallback[loc].replace('{exts}', rough.join(' '));
+    return {
+      label: METRICS.min.label,
+      note: STYLES.esbuild.note[loc],
+      method: method,
+      accuracy: rough.length === 0 ? 'exact' : 'approximate'
+    };
+  }
+  const degraded = cfg.minify.engine === 'esbuild';
+  return {
+    label: METRICS.min.label,
+    note: STYLES.strip.note[loc],
+    method: STYLES.strip.method[loc] + (degraded ? STYLES.esbuild.unavailable[loc] : ''),
+    accuracy: rough.length === 0 ? 'exact' : 'approximate'
+  };
+}
+
+/* Подпись метрики `tok`. Соглашение о честности то же, что у `min`: способ говорит,
+ * каким словарём снято число (семейство и кодировка — часть счёта, а не подробность),
+ * а `accuracy` — точное оно или приближённое. Приближённым оно становится в двух
+ * случаях, и оба названы словами: форматы, для которых токены не считаются (у них
+ * число идёт по байтам), и отсутствие словаря (тогда счёт идёт оценкой по длине). */
+function tokView(cfg) {
+  const loc = cfg.locale;
+  const settings = cfg.tokens;
+  const { tool, version } = tokenizer(settings);
+  if (tool === null) {
+    return {
+      label: METRICS.tok.label,
+      note: STYLES.tok.note[loc],
+      method: STYLES.tok.estimate[loc]
+        .replace('{chars}', CHARS_PER_TOKEN).replace('{encoding}', settings.encoding),
+      accuracy: 'approximate'
+    };
+  }
+  const binary = approximateFormats('tok', cfg);
+  let method = STYLES.tok.method[loc]
+    .replace('{tool}', 'gpt-tokenizer').replace('{version}', version).replace('{encoding}', settings.encoding);
+  if (binary.length > 0) method += STYLES.tok.binary[loc].replace('{exts}', binary.join(' '));
+  return {
+    label: METRICS.tok.label,
+    note: STYLES.tok.note[loc],
+    method: method,
+    accuracy: binary.length === 0 ? 'exact' : 'approximate'
+  };
+}
+
+/* Точное ли число у конкретной клетки — одно правило и для подписи метрики, и для
+ * пометки клетки. Поэтому подпись не может разойтись с клетками, а список
+ * приближённых форматов считается здесь же, по тому же правилу.
+ *
+ * `min` точен там, где файл действительно минифицируется: минификатором или
+ * разбором формата, который короче уже не станет (JSON теряет только незначащие
+ * пробелы — список точных стратегий ведёт `strip.js`, потому что стратегии живут
+ * там). `tok` точен там, где есть словарь и формат текстовый: «токены» картинки
+ * или шрифта — это её байты. `raw` и `gzip` точны всегда: это однозначные
+ * величины. */
+export function pointExact(name, file, cfg) {
+  if (name === 'min') return minifiedForm(file, cfg);
+  if (name === 'tok') return tokenizer(cfg.tokens).tool !== null && !isBinary(file);
+  return true;
+}
+
+/* Форматы этого отчёта, которые будут измерены приближённо. Список выводится из
+ * настроек и правила точности, а не пишется руками. */
+function approximateFormats(name, cfg) {
+  const exts = [];
+  cfg.columns.forEach((col) => {
+    col.paths.forEach((p) => {
+      if (pointExact(name, p, cfg)) return;
+      const ext = path.extname(p).toLowerCase();
+      if (exts.indexOf(ext) < 0) exts.push(ext);
+    });
+  });
+  return exts.sort();
+}
+
+function minifiedForm(file, cfg) {
+  return esbuildLoader(file, cfg) !== null || EXACT_STRATEGIES.indexOf(strategyFor(file, cfg)) >= 0;
+}
+
+/* Идёт ли файл в минификатор: сжатие запрошено, доступно и не отменено явным
+ * выбором проекта — `minify.ext` старше движка и служит выходом, если расширение
+ * соврало о содержимом. Ответ один на два вопроса: как считать и что обещать. */
+function esbuildLoader(file, cfg) {
+  if (minEngine(cfg) !== 'esbuild') return null;
+  const ext = path.extname(file).toLowerCase();
+  if (cfg.minify.ext[ext] !== undefined) return null;
+  return MINIFY_LOADERS[ext] === undefined ? null : MINIFY_LOADERS[ext];
+}
+
+/* Действующий способ: запрошенный может быть недоступен — тогда метрика отступает
+ * к другому счёту, а отступление объявляется наружу (`sensorGaps`), иначе
+ * приближение ушло бы как точное число. */
+export function minEngine(cfg) {
+  if (cfg.minify.engine !== 'esbuild') return 'strip';
+  return minifier().tool === null ? 'strip' : 'esbuild';
+}
+
+/* Чего не хватает для того, что просили: причина и починка для человека, по одной
+ * на датчик. Причина загрузчика уходит только сюда — в подписи метрики она была бы
+ * машинной строкой (путём чужого `node_modules`), от которой вывод перестал бы
+ * быть одинаковым на разных машинах, а в подписи отчёта — понятным. */
+export function sensorGaps(cfg) {
+  const gaps = [];
+  const minify = minifier();
+  if (cfg.minify.engine === 'esbuild' && minify.tool === null) {
+    gaps.push({
+      why: 'метрика «min» считает упрощением: минификатор недоступен — ' + minify.why,
+      fix: 'поставьте необязательные зависимости заново или задайте "minify": {"engine": "strip"}'
+    });
+  }
+  if (cfg.metrics.indexOf('tok') >= 0) {
+    const tokens = tokenizer(cfg.tokens);
+    if (tokens.tool === null) {
+      gaps.push({
+        why: 'метрика «tok» считает оценкой по длине: словаря нет — ' + tokens.why,
+        fix: 'поставьте необязательные зависимости заново или уберите "tok" из metrics'
+      });
+    }
+  }
+  return gaps;
+}
+
+/* Одно место, где решается, читать метрику из размера объекта или из текста:
+ * метрика без текста на недогруженном блобе — ошибка, а не молчаливый ноль. */
+export function measureBlob(name, blob, file, cfg, rev) {
+  const metric = METRICS[name];
+  if (metric.fromSize) return blob.size;
+  if (blob.text === null) {
+    throw new Error('метрике «' + name + '» нужно содержимое ' + file + ' на ' + rev.slice(0, 7) + ', а оно не прочитано');
+  }
+  return metric.measure(blob.text, file, cfg, rev);
+}

package/src/minify.js

@@ -0,0 +1,67 @@
+import path from 'path';
+import { loadOptional } from './optional.js';
+import { refuseCause } from './refusal.js';
+
+/* Настоящий минификатор — необязательная зависимость (её устройство — в
+ * `src/optional.js`), а здесь только то, что знает сам минификатор: какие форматы
+ * он берёт и как считается отказ.
+ *
+ * Отказ минификатора (файл не разобрался) исключением быть обязан: расширение
+ * соврало о содержимом, и упрощение вместо сжатия подменило бы число молча. */
+
+/* Расширения, за которые отвечает минификатор. Таблица — единственный источник
+ * правды и для замера, и для подписи метрики («остальные форматы — приближение»),
+ * поэтому разойтись им нечем. JSX и TSX сюда не входят: выход зависит от настройки
+ * `jsx` проекта (`React.createElement` против `react/jsx-runtime`), и мерить чужое
+ * решение о рантайме — не наше дело; такие файлы честно считаются упрощением. */
+export const MINIFY_LOADERS = {
+  '.js': 'js', '.mjs': 'js', '.cjs': 'js',
+  '.ts': 'ts', '.mts': 'ts', '.cts': 'ts',
+  '.css': 'css'
+};
+
+let probed = null;
+
+/* Ответ разбора — один на процесс: пробовать загрузку на каждом файле значило бы
+ * платить за неё тысячи раз, а от файла решение не зависит. */
+export function minifier() {
+  if (probed === null) probed = loadOptional('esbuild');
+  return probed;
+}
+
+/* Сжатие одного текста. Настройки выхода закреплены, а не взяты по умолчанию:
+ * `charset: utf8` — потому что измеряется файл проекта в UTF-8 (умолчание
+ * экранировало бы не-ASCII и число вышло бы больше настоящего), `legalComments:
+ * none` — потому что комментарии снимают и все прочие стратегии, и число должно
+ * означать одну вещь, а не две. `sourcefile` нужен ради причины в отказе. */
+export function minifyWithEsbuild(text, file, rev) {
+  const { tool, why } = minifier();
+  if (tool === null) throw new Error('минификатор недоступен: ' + why);
+  const ext = path.extname(file).toLowerCase();
+  try {
+    return tool.transformSync(text, {
+      loader: MINIFY_LOADERS[ext],
+      minify: true,
+      charset: 'utf8',
+      legalComments: 'none',
+      sourcefile: file
+    }).code;
+  } catch (e) {
+    // Совет называет один выход — тот, который этой причине и отвечает: смена
+    // минификатора на `strip` уберёт причину, но передаст тот же файл гарду
+    // `minify.guard`, у которого разговор тот же («это не JavaScript»).
+    refuseCause('минификатор не разобрал', 'esbuild не разобрал ' + file + ' на '
+      + rev.slice(0, 7) + ': ' + cause(e.message)
+      + '\n  починка: расширение соврало о содержимом или минификатор старше синтаксиса;'
+      + ' задайте этому расширению упрощение в minify.ext (например {"' + ext + '": "strip-lines"})');
+  }
+}
+
+/* Причина у esbuild многострочная, и первая строка — «Transform failed with N
+ * errors:»; сама причина стоит там, где начинается ошибка. Без неё отказ говорил
+ * бы, что что-то не так, но не что именно. */
+function cause(text) {
+  const lines = String(text).split('\n');
+  const at = lines.findIndex((line) => line.indexOf('ERROR:') >= 0);
+  return (at >= 0 ? lines[at] : lines[0]).trim();
+}

package/src/optional.js

@@ -0,0 +1,31 @@
+import { createRequire } from 'module';
+
+/* Необязательные зависимости: минификатор и токенизатор. Их отсутствие — не отказ,
+ * а другой счёт (упрощение вместо сжатия, оценка вместо точного счёта), поэтому
+ * загрузка у них общая и с одним устройством: ленивая, синхронная (`createRequire`
+ * — замер синхронный проход, и `import()` сделал бы асинхронной всю цепочку ради
+ * одного датчика) и без исключения наружу — недоступность возвращается ответом.
+ *
+ * Шов отсутствия — окружение `SIZE_REPORT_NO_OPTIONAL`: тем же путём идёт установка
+ * без необязательных зависимостей и платформа, для которой пакета нет. Им же
+ * проверяется, что инструмент работает и без них. */
+
+export const NO_OPTIONAL = 'SIZE_REPORT_NO_OPTIONAL';
+
+/* Версия берётся у самого пакета: число зависит от словаря и от алгоритма, поэтому
+ * она попадает в способ, которым получено значение, а не остаётся в `node_modules`. */
+export function loadOptional(spec) {
+  if (process.env[NO_OPTIONAL]) {
+    return { tool: null, version: null, why: 'необязательные зависимости выключены (' + NO_OPTIONAL + ')' };
+  }
+  const require = createRequire(import.meta.url);
+  try {
+    const tool = require(spec);
+    const pkg = spec.split('/')[0];
+    let version = null;
+    try { version = require(pkg + '/package.json').version; } catch (_e) { version = null; }
+    return { tool: tool, version: version, why: null };
+  } catch (e) {
+    return { tool: null, version: null, why: e.message };
+  }
+}

package/src/page/app.css

@@ -0,0 +1,165 @@
+/* Оформление страницы отчёта — то, что стоит сверх общей таблицы (`src/table.css`):
+ * холст и типографика, панель выбора с легендой, состояния пустоты и адаптации под
+ * узкое окно. Чисел и цвета дельт здесь нет намеренно: их задаёт общая часть, и она
+ * же попадает в статический артефакт, поэтому двух наборов одной таблицы не
+ * бывает. Страница открывается с диска, без сервера и без сети, поэтому ни одной
+ * внешней ссылки в ней быть не может: только системные семейства шрифтов
+ * (`ui-sans-serif`) и системные цвета (`Canvas`, `CanvasText`, `AccentColor`),
+ * которые есть в любой теме.
+ *
+ * Общая часть заморожена байтами артефакта (`src/css.js`), поэтому всё, где
+ * страница расходится с её геометрией, собрано в разделе «адаптации» с причиной:
+ * растить общую часть нельзя, а на узком экране колонка коммита в 300px съедает
+ * весь экран. */
+
+:root {
+  color-scheme: light dark;
+  --gap: 12px;
+  --pad: clamp(16px, 3vw, 34px);
+  --radius: 10px;
+  --muted: rgba(127, 127, 127, .85);
+  --line: rgba(127, 127, 127, .32);
+  --tint: rgba(127, 127, 127, .07);
+}
+
+/* Типографика и ритм: один шаг между блоками (--gap), крупный заголовок,
+ * приглушённая подпись — чтобы взгляд доходил до чисел, а не до служебного текста. */
+body {
+  margin: 0;
+  padding: var(--pad) var(--pad) 48px;
+  background: Canvas;
+  color: CanvasText;
+  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  -webkit-text-size-adjust: 100%;
+}
+h1 { margin: 0 0 3px; font-size: 21px; font-weight: 650; letter-spacing: -.012em; }
+.sub { margin: 0 0 calc(var(--gap) + 4px); color: var(--muted); font-size: 12.5px; }
+
+/* Панель выбора — карточка: она отделяет управление от данных и не сливается с
+ * таблицей, которая начинается ниже. */
+.panel {
+  margin: 0 0 var(--gap);
+  padding: 12px 14px 13px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--tint);
+}
+.panel fieldset { margin: 0; padding: 0; border: 0; }
+.panel fieldset + fieldset { margin-top: 10px; }
+.panel legend, .panel .cap {
+  padding: 0;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .07em;
+}
+.panel .cap { display: block; margin-bottom: 4px; }
+.panel .row { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; }
+/* Способ замера — видимым текстом под переключателями: словарь токенов и способ
+ * сжатия выбираются настройками запуска, а не галочкой, поэтому читателю мало
+ * навести мышь — он должен видеть, чем получено число. */
+.panel .about { margin: 5px 0 0; color: var(--muted); font-size: 11.5px; }
+
+/* Дерево файлов: вложенность показана отступом и линией уровня, папка — такой же
+ * переключатель, как файл, только его галочка отвечает за всё поддерево, а число
+ * рядом говорит, за сколько файлов. Список файлов длиннее окна, поэтому панель
+ * прокручивается сама: иначе управление вытолкнуло бы таблицу за экран. */
+.panel .files { max-height: min(30vh, 320px); overflow: auto; }
+.panel .tree { margin: 0; padding: 0; list-style: none; }
+.panel .tree .tree { margin-left: 14px; padding-left: 9px; border-left: 1px solid var(--line); }
+.panel .tree .box { padding: 1px 7px 1px 5px; }
+.box.dir { font-weight: 600; }
+.box .n { margin-left: 1px; color: var(--muted); font-size: 11px; }
+
+/* Переключатель — метка вокруг поля ввода: и подпись, и цель нажатия одна, поэтому
+ * по нему попадает и мышь, и клавиатура (Space на поле ввода), и вспомогательные
+ * технологии. */
+.box {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  padding: 3px 9px 3px 7px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+.box:hover { background: var(--tint); }
+.box input { margin: 0; accent-color: AccentColor; }
+.box.all { font-weight: 600; }
+
+/* Легенда: те же классы цвета, что и в клетках (.up/.down из общей части), поэтому
+ * образец в легенде не может разойтись с цветом числа. */
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px 18px;
+  margin: 10px 0 0;
+  padding: 0;
+  list-style: none;
+  color: var(--muted);
+  font-size: 12px;
+}
+.legend li { display: inline-flex; gap: 6px; align-items: center; }
+.swatch { width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
+.swatch.same { background: none; border: 1px dashed currentColor; }
+.swatch.miss { background: none; border: 1px solid currentColor; border-radius: 0; }
+.swatch.approx { background: none; border-bottom: 2px dotted currentColor; }
+
+/* Приближённое число помечено пунктиром, а не цветом: цвет в таблице занят дельтой
+ * (рост и спад), и второй смысл на том же признаке читался бы как первый. */
+#grid td.approx { text-decoration: underline dotted; text-underline-offset: 2.5px; }
+
+/* Таблица — в своей рамке и со своим скроллом: шапка и колонка коммита липнут к ней
+ * (правила липкости — в общей части), а не к странице, поэтому при прокрутке вбок
+ * видно, чей это ряд, а при прокрутке вниз — что за колонка. */
+.shell {
+  overflow: auto;
+  max-height: calc(100vh - 300px);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: Canvas;
+}
+/* Числа плотнее текста страницы: их больше и они короче, а читаются по разрядам. */
+#grid { font-size: 12.5px; }
+
+/* Сообщение о присланной ссылке — над таблицей, чтобы пропустить его было нельзя,
+ * но таблицу оно не отодвигает: одна строка на месте страницы. Цвет берётся
+ * системный (акцент), своих цветов у страницы нет. */
+.notice {
+  margin: 0 0 var(--gap);
+  padding: 9px 13px;
+  border-left: 3px solid AccentColor;
+  border-radius: 4px;
+  background: var(--tint);
+  font-size: 12.5px;
+}
+.notice[hidden] { display: none; }
+
+/* Состояния пустоты: когда таблицу не из чего собрать, страница говорит об этом
+ * словами, а не пустой сеткой. */
+.state {
+  margin: var(--gap) 0 0;
+  padding: 11px 13px;
+  border: 1px dashed var(--line);
+  border-radius: var(--radius);
+  color: var(--muted);
+  font-size: 12.5px;
+}
+.state[hidden], .shell[hidden] { display: none; }
+
+.note { margin: 14px 0 0; max-width: 90em; color: var(--muted); font-size: 12px; }
+.note code { background: var(--tint); padding: 0 3px; border-radius: 3px; }
+
+/* Клавиатура: рамка фокуса видна на любом фоне (системный цвет акцента) и не
+ * сдвигает разметку. Ссылки журнала и все переключатели доступны с Tab. */
+:focus-visible { outline: 2px solid AccentColor; outline-offset: 2px; border-radius: 3px; }
+
+/* Адаптации: единственное место, где страница правит общую геометрию, — потому что
+ * общая часть заморожена байтами артефакта, а не потому что так удобнее. */
+@media (max-width: 900px) {
+  body { padding: 14px 14px 32px; }
+  h1 { font-size: 18px; }
+  #grid { font-size: 12px; }
+  .shell { max-height: calc(100vh - 260px); }
+  .clip { width: 190px; }
+}