/* site_kit/scenes/_kit/components.css — общие компоненты сцен «Антенка AI News» (набор стилей). Нужен tokens.css.
   Префикс классов — nxs- (стиль сцены добавляет свой, например u16- у page-classic). Всё внутри .nx-scene.
   Правило двух слоёв: слой источника (снимок страницы, картинки) не перекрашиваем; слой Антенки (карточки
   постов, маркер, перевод, подписи, плашки, цифры, инфографика) — только эти компоненты и токены.
   Состояния: статичный вид компонента = финальный кадр. Движение включают классы ядра на корне
   (.is-armed / .is-playing), а момент — переменные стиля: --at (старт, с), при нужде --dur.
   Узлы во время игры не добавляются: цифры считает CSS (@property --nxs-n), слова — заранее в <span>. */

/* ───────── основа ───────── */
.nx-scene .nxs-stage { position: absolute; inset: 0; overflow: hidden; box-sizing: border-box;
  background: var(--nxs-bg); color: var(--nxs-ink); font-family: var(--nxs-font); font-size: var(--nxs-fs-body);
  line-height: var(--nxs-lh); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-kerning: normal; }
.nx-scene .nxs-stage *, .nx-scene .nxs-stage *::before, .nx-scene .nxs-stage *::after { box-sizing: border-box; }
.nx-scene .nxs-stage img { display: block; max-width: none; border: 0; }
.nx-scene .nxs-stage p { margin: 0; }
.nx-scene .nxs-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nx-scene .nxs-mono { font-family: var(--nxs-mono); }
.nx-scene .nxs-tnum { font-variant-numeric: tabular-nums; }
/* главная шкала времени: даёт стенду и записи событие конца; --nxs-p — прогресс 0…1 (если стилю нужен) */
.nx-scene:is(.is-armed, .is-playing) .nxs-stage { animation: nxs-master var(--nxs-dur, 12s) linear both; }
@keyframes nxs-master { from { --nxs-p: 0; } to { --nxs-p: 1; } }

/* ───────── камера: мир в cqw, --nxs-cx/--nxs-cy — точка мира в центре вида, --nxs-cz — увеличение ─────────
   --nxs-vx/--nxs-vy — центр вида в cqw относительно родителя камеры (по умолчанию центр сцены 50 × 31.25);
   --nxs-unit — длина единицы мира (по умолчанию 1cqw; для снимка страницы — «пиксель страницы», calc(ширина/1440)).
   Путь камеры — @keyframes стиля по этим трём переменным, кривая участков — --nxs-ease-io. */
.nx-scene .nxs-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; /* без will-change: иначе при наезде растр «залипает» на начальном масштабе и страница мягче (P2, 24.09) */
  transform: translate(calc(var(--nxs-vx, 50) * 1cqw - var(--nxs-cx) * var(--nxs-cz) * var(--nxs-unit, 1cqw)),
                       calc(var(--nxs-vy, 31.25) * 1cqw - var(--nxs-cy) * var(--nxs-cz) * var(--nxs-unit, 1cqw))) scale(var(--nxs-cz)); }

/* ───────── кикер, чипы, плашка источника ───────── */
.nx-scene .nxs-kicker { font-family: var(--nxs-mono); font-size: var(--nxs-fs-kicker); font-weight: 500; line-height: 1.3;
  letter-spacing: var(--nxs-ls-kicker); text-transform: uppercase; color: var(--nxs-ink-4); white-space: nowrap; }
.nx-scene .nxs-kicker--accent { color: var(--nxs-accent); font-weight: 600; }
.nx-scene .nxs-chip { display: inline-flex; align-items: center; gap: .5em; height: 2em; padding: 0 .75em; border-radius: var(--nxs-r-xs);
  font-family: var(--nxs-mono); font-size: var(--nxs-fs-kicker); font-weight: 600; line-height: 1; letter-spacing: var(--nxs-ls-kicker);
  text-transform: uppercase; white-space: nowrap; vertical-align: middle;
  background: var(--nxs-chrome); color: var(--nxs-ink-2); border: var(--nxs-hair) solid var(--nxs-line); }
/* «перевод» — нейтральная пометка, без бренда; зелёная — это слой Антенки */
.nx-scene .nxs-chip--tr { background: var(--nxs-accent-bg); color: var(--nxs-accent); border-color: var(--nxs-accent-line); }
.nx-scene .nxs-chip--note { background: var(--nxs-note-bg); color: var(--nxs-note-ink); border-color: var(--nxs-note-line); }
.nx-scene .nxs-chip--ink { background: var(--nxs-strip); color: var(--nxs-strip-accent); border-color: transparent; }
/* плашка источника: домен или @ник · дата — моно, как метки медиа на странице */
.nx-scene .nxs-src { display: inline-flex; align-items: center; gap: .55em; max-width: 100%; height: 2.35em; padding: 0 .95em 0 .8em;
  border-radius: var(--nxs-r-sm); background: var(--nxs-surface); border: var(--nxs-hair) solid var(--nxs-line); box-shadow: var(--nxs-shadow-sm);
  font-family: var(--nxs-mono); font-size: var(--nxs-fs-meta); font-weight: 500; line-height: 1; color: var(--nxs-ink-3);
  white-space: nowrap; overflow: hidden; }
.nx-scene .nxs-src b { font-weight: 600; color: var(--nxs-ink); }
.nx-scene .nxs-src i { font-style: normal; color: var(--nxs-line-2); }
.nx-scene .nxs-src::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--nxs-accent); }
/* та же строка источника без рамки — внутри карточки */
.nx-scene .nxs-src--flat { height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--nxs-fs-kicker); }

/* ───────── номер-метка (связь фразы и перевода): как номер звучащей новости ───────── */
.nx-scene .nxs-badge { display: inline-grid; place-items: center; flex: none; width: 2.3cqw; height: 2.3cqw; border-radius: 50%;
  background: var(--nxs-accent); color: var(--nxs-on-accent); font: 700 1.3cqw/1 var(--nxs-font); font-style: normal;
  box-shadow: 0 0 0 .3cqw var(--nxs-accent-line); }

/* ───────── окно браузера: нейтральное, без ноутбука ───────── */
.nx-scene .nxs-browser { position: absolute; overflow: hidden; border-radius: var(--nxs-r); background: var(--nxs-surface);
  border: var(--nxs-hair) solid var(--nxs-line); box-shadow: var(--nxs-shadow); }
.nx-scene .nxs-browser__bar { position: absolute; left: 0; right: 0; top: 0; height: 4.6cqw; display: flex; align-items: center; gap: 1.4cqw;
  padding: 0 1.4cqw; background: var(--nxs-chrome); border-bottom: var(--nxs-hair) solid var(--nxs-line); z-index: 2; }
.nx-scene .nxs-browser__dots { display: flex; gap: .6cqw; flex: none; }
.nx-scene .nxs-browser__dots i { width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--nxs-line-2); }
.nx-scene .nxs-browser__url { flex: 1; min-width: 0; height: 2.9cqw; display: flex; align-items: center; gap: .7cqw; padding: 0 1.2cqw;
  border-radius: var(--nxs-r-pill); background: var(--nxs-surface); border: var(--nxs-hair) solid var(--nxs-line);
  font-family: var(--nxs-mono); font-size: 1.45cqw; font-weight: 500; line-height: 1; color: var(--nxs-ink-3); white-space: nowrap; overflow: hidden; }
.nx-scene .nxs-browser__url b { font-weight: 600; color: var(--nxs-ink); }
.nx-scene .nxs-browser__url svg { width: 1.25cqw; height: 1.25cqw; flex: none; color: var(--nxs-ink-3); }
.nx-scene .nxs-browser__view { position: absolute; left: 0; right: 0; top: 4.6cqw; bottom: 0; overflow: hidden; }

/* ───────── пост и ответ: структура X в стиле портала, без логотипа X ───────── */
.nx-scene .nxs-post { position: relative; background: var(--nxs-surface); border: var(--nxs-hair) solid var(--nxs-line);
  border-radius: var(--nxs-r); box-shadow: var(--nxs-shadow-sm); padding: 2.05cqw 2.3cqw 1.6cqw; }
.nx-scene .nxs-post__head { display: flex; align-items: center; gap: 1.15cqw; margin-bottom: 1.25cqw; }
.nx-scene .nxs-av { flex: none; width: 4.55cqw; height: 4.55cqw; border-radius: 50%; object-fit: cover; background: var(--nxs-chrome);
  box-shadow: 0 0 0 var(--nxs-hair) var(--nxs-line); }
.nx-scene .nxs-post__who { min-width: 0; display: flex; flex-direction: column; gap: .2cqw; }
.nx-scene .nxs-post__name { display: inline-flex; align-items: center; gap: .45cqw; font-size: var(--nxs-fs-body); font-weight: 700;
  line-height: 1.15; color: var(--nxs-ink); white-space: nowrap; }
.nx-scene .nxs-post__handle { font-size: var(--nxs-fs-meta); line-height: 1.2; color: var(--nxs-ink-3); white-space: nowrap; }
/* галочка: нейтральная (чернила), не синяя и не зелёная — это атрибут автора, а не наша пометка */
.nx-scene .nxs-verified { flex: none; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--nxs-ink);
  position: relative; }
.nx-scene .nxs-verified::after { content: ""; position: absolute; left: 32%; top: 20%; width: 26%; height: 44%;
  border: solid var(--nxs-surface); border-width: 0 .2cqw .2cqw 0; transform: rotate(40deg); }
.nx-scene .nxs-post__text { font-size: var(--nxs-fs-body); line-height: var(--nxs-lh); color: var(--nxs-ink); overflow-wrap: break-word; }
.nx-scene .nxs-post__text p + p { margin-top: .75em; }
.nx-scene .nxs-post__time { margin-top: 1.25cqw; font-family: var(--nxs-mono); font-size: var(--nxs-fs-meta); color: var(--nxs-ink-3); }
.nx-scene .nxs-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: .6cqw 2.3cqw; margin-top: 1.25cqw; padding-top: 1.2cqw;
  border-top: var(--nxs-hair) solid var(--nxs-line); font-family: var(--nxs-mono); font-size: var(--nxs-fs-meta); font-weight: 500;
  line-height: 1.35; color: var(--nxs-ink-3); font-variant-numeric: tabular-nums; }
.nx-scene .nxs-metric { display: inline-flex; align-items: center; gap: .55cqw; white-space: nowrap; }
.nx-scene .nxs-metric svg { width: 1.7cqw; height: 1.7cqw; flex: none; }
.nx-scene .nxs-metric b { font-weight: 600; color: var(--nxs-ink); }
/* вложенная цитата-пост */
.nx-scene .nxs-quote { margin-top: 1.4cqw; padding: 1.3cqw 1.6cqw; border: var(--nxs-hair) solid var(--nxs-line); border-radius: var(--nxs-r-sm);
  font-size: var(--nxs-fs-meta); line-height: 1.45; color: var(--nxs-ink-2); }
.nx-scene .nxs-quote .nxs-post__head { margin-bottom: .6cqw; gap: .7cqw; }
.nx-scene .nxs-quote .nxs-av { width: 2.3cqw; height: 2.3cqw; }
.nx-scene .nxs-quote .nxs-post__name { font-size: var(--nxs-fs-meta); }
/* ответ: компактнее, строка «в ответ @ник» */
.nx-scene .nxs-reply { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25cqw;
  padding: 1.6cqw 2.05cqw 1.5cqw; background: var(--nxs-surface); border: var(--nxs-hair) solid var(--nxs-line); border-radius: var(--nxs-r); }
.nx-scene .nxs-reply .nxs-av { width: 3.64cqw; height: 3.64cqw; grid-row: 1 / span 3; }
.nx-scene .nxs-reply > :not(.nxs-av) { grid-column: 2; }   /* всё, кроме аватара, — во второй колонке */
.nx-scene .nxs-reply__head { display: flex; align-items: center; gap: .6cqw; min-width: 0; font-size: var(--nxs-fs-meta); line-height: 1.3;
  color: var(--nxs-ink-3); white-space: nowrap; }
.nx-scene .nxs-reply__head b { display: inline-flex; align-items: center; gap: .4cqw; font-size: var(--nxs-fs-body); font-weight: 700; color: var(--nxs-ink); }
.nx-scene .nxs-reply__head .nxs-verified { width: 1.4cqw; height: 1.4cqw; }
.nx-scene .nxs-reply__to { font-size: var(--nxs-fs-meta); line-height: 1.3; color: var(--nxs-ink-3); margin: .15cqw 0 .55cqw; }
.nx-scene .nxs-reply__text { font-size: var(--nxs-fs-body); line-height: var(--nxs-lh); color: var(--nxs-ink); }
.nx-scene .nxs-reply .nxs-metrics { margin-top: .9cqw; padding-top: 0; border-top: 0; gap: .5cqw 2cqw; }
/* фокус: как текущая глава на странице — светло-зелёная подложка и линейка слева; соседи гаснут */
.nx-scene .is-focus { background: var(--nxs-accent-bg); border-color: var(--nxs-accent-line); box-shadow: var(--nxs-shadow); }
.nx-scene .is-focus::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: var(--nxs-rule);
  border-radius: var(--nxs-r) 0 0 var(--nxs-r); background: var(--nxs-accent); }
.nx-scene .is-dim { opacity: var(--nxs-dim); }

/* ───────── маркер: одна жёлтая полоса под текстом, одна протяжка слева направо ─────────
   HTML-текст: <span class="nxs-mark" style="--at:2.1s; --lines:2">…</span> — полоса идёт по строкам подряд
   (box-decoration-break: slice), по --nxs-t-mark на строку. Снимок страницы: маркер нарисован news_scene.py
   тем же цветом, а протяжка — .nxs-mark-band (clip-path) с той же кривой и тем же темпом. */
.nx-scene .nxs-mark { color: var(--nxs-marker-ink); padding: 0 .1em; margin: 0 -.1em; border-radius: .14em;
  background: linear-gradient(var(--nxs-marker), var(--nxs-marker)) no-repeat 0 62% / 100% 88%;
  -webkit-box-decoration-break: slice; box-decoration-break: slice; }
.nx-scene:is(.is-armed, .is-playing) .nxs-mark {
  animation: nxs-mark calc(var(--nxs-t-mark) * var(--lines, 1)) var(--nxs-ease-io) var(--at, 0s) both; }
@keyframes nxs-mark { from { background-size: 0% 88%; } }
.nx-scene:is(.is-armed, .is-playing) .nxs-mark-band { animation: nxs-band var(--dur, var(--nxs-t-mark)) var(--nxs-ease-io) var(--at, 0s) both; }
@keyframes nxs-band { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* полосы маркера на снимке — без постоянного will-change (25.09.2026, картинки в мобильном WebKit, Ф-Э-9): слой на
   каждую полосу — лишняя поверхность на телефоне, а проверка кадров scene_check.py без него проходит во всех 8 стилях
   с маркером (финал ≠ конец игры: 0,03–0,34 при пороге 0,5; с ним — 0,01–0,34). Постоянный слой остаётся только
   там, где без него проверка падает или идёт на грани, — это правила стилей (docs/news-page.md, «Слои в сценах») */
/* тема «чернила»: до протяжки маркера текст фразы светлый, как весь текст сцены, под жёлтой полосой — тёмный
   (без этого фраза до протяжки — тёмное на тёмном; найдено в u03, 24.09) */
.nx-scene[data-scene-theme="ink"]:is(.is-armed, .is-playing) .nxs-mark,
.nx-scene:is(.is-armed, .is-playing) [data-scene-theme="ink"] .nxs-mark {
  animation: nxs-mark calc(var(--nxs-t-mark) * var(--lines, 1)) var(--nxs-ease-io) var(--at, 0s) both,
             nxs-markink calc(var(--nxs-t-mark) * var(--lines, 1)) linear var(--at, 0s) both; }
@keyframes nxs-markink { from { color: var(--nxs-ink); } }

/* ───────── перевод: чип «перевод» + русский текст; три способа — заменой, под оригиналом, рядом ───────── */
.nx-scene .nxs-tr__ru { font-size: var(--nxs-fs-body); line-height: 1.4; font-weight: 600; color: var(--nxs-ink); }
.nx-scene .nxs-tr__en { color: var(--nxs-ink-3); }
/* под оригиналом (подстрочник): EN строка → RU строка с зелёной линейкой */
.nx-scene .nxs-il { display: block; }
.nx-scene .nxs-il + .nxs-il { margin-top: .5cqw; }
.nx-scene .nxs-il__en { display: block; color: var(--nxs-ink-3); }
.nx-scene .nxs-il__ru { display: grid; grid-template-rows: 1fr; }
.nx-scene .nxs-il__ru > span { display: block; min-height: 0; overflow: hidden; }
.nx-scene .nxs-il__ru > span > span { display: block; margin: .2cqw 0 .3cqw; padding-left: .9cqw; border-left: var(--nxs-rule) solid var(--nxs-accent);
  font-weight: 600; color: var(--nxs-ink); }
.nx-scene:is(.is-armed, .is-playing) .nxs-il__ru { animation: nxs-open var(--nxs-t-in) var(--nxs-ease) var(--at, 0s) both; }
.nx-scene:is(.is-armed, .is-playing) .nxs-il__ru > span > span { animation: nxs-rise var(--nxs-t-in) var(--nxs-ease) calc(var(--at, 0s) + .1s) both; }
.nx-scene:is(.is-armed, .is-playing) .nxs-il__en { animation: nxs-ink2 var(--nxs-t-fast) ease var(--at, 0s) both; }
@keyframes nxs-open { from { grid-template-rows: 0fr; } }
@keyframes nxs-ink2 { from { color: var(--nxs-ink); } }
/* рядом: две колонки EN | RU */
.nx-scene .nxs-tr--aside { display: grid; grid-template-columns: 1fr 1fr; gap: 2.3cqw; }
.nx-scene .nxs-tr--aside .nxs-tr__ru { padding-left: 1.4cqw; border-left: var(--nxs-rule) solid var(--nxs-accent); }
/* заменой: EN и RU лежат в одной ячейке сетки, EN уходит, RU проявляется на том же месте */
.nx-scene .nxs-tr--swap { display: grid; }
.nx-scene .nxs-tr--swap > * { grid-area: 1 / 1; }
.nx-scene .nxs-tr--swap .nxs-tr__en { visibility: hidden; }
.nx-scene:is(.is-armed, .is-playing) .nxs-tr--swap .nxs-tr__en { animation: nxs-swap-out var(--nxs-t-in) var(--nxs-ease) var(--at, 0s) both; }
.nx-scene:is(.is-armed, .is-playing) .nxs-tr--swap .nxs-tr__ru { animation: nxs-rise var(--nxs-t-in) var(--nxs-ease) calc(var(--at, 0s) + .15s) both; }
@keyframes nxs-swap-out { from { visibility: visible; opacity: 1; transform: none; } to { visibility: visible; opacity: 0; transform: translateY(-.3em); } }
/* слово за словом: <span class="nxs-w" style="--at:…">; шаг — --nxs-t-word */
.nx-scene .nxs-w { display: inline-block; }
.nx-scene:is(.is-armed, .is-playing) .nxs-w { animation: nxs-rise .45s var(--nxs-ease) var(--at, 0s) both; }

/* ───────── карточка Антенки (перевод, цифра, вывод) ───────── */
.nx-scene .nxs-card { background: var(--nxs-surface); border: var(--nxs-hair) solid var(--nxs-line); border-radius: var(--nxs-r-lg);
  box-shadow: var(--nxs-shadow); padding: 2.3cqw 2.5cqw 2.5cqw; }
.nx-scene .nxs-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .8cqw 1cqw; }
.nx-scene .nxs-rule { height: 0; border-top: var(--nxs-hair) solid var(--nxs-line); margin: 1.6cqw 0; }
/* пункты перевода с номерами — к номерам маркера на источнике */
.nx-scene .nxs-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2cqw; }
.nx-scene .nxs-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1cqw; align-items: start;
  font-size: var(--nxs-fs-body); line-height: 1.38; font-weight: 600; text-wrap: pretty; }
.nx-scene .nxs-points .nxs-badge { margin-top: .05cqw; }

/* ───────── цифры: крупная цифра, счётчик, плитка ───────── */
.nx-scene .nxs-num { display: block; font-size: var(--nxs-fs-num); font-weight: 800; line-height: 1; letter-spacing: var(--nxs-ls-display);
  font-variant-numeric: tabular-nums; color: var(--nxs-ink); white-space: nowrap; }
.nx-scene .nxs-num-label { margin-top: .7cqw; font-size: var(--nxs-fs-meta); line-height: 1.35; color: var(--nxs-ink-2); }
/* счётчик на CSS (узлы не меняются): <b class="nxs-count nxs-count--d3" style="--to:42;--at:5.2s" data-pre="$"
   data-sep="," data-post=""></b> — «$0,042». --to — всё число в младших разрядах (0,042 → 42 при 3 знаках),
   --dN — знаков после запятой (0–3); атрибуты считает kit.count_attrs("$0,042"). Разрядные пробелы не рисуются. */
.nx-scene .nxs-count { --nxs-n: var(--to, 0); counter-reset: nxs-n var(--nxs-n); font-variant-numeric: tabular-nums; }
.nx-scene .nxs-count::after { content: attr(data-pre) counter(nxs-n) attr(data-post); }
.nx-scene .nxs-count--d1 { --nxs-ci: calc((var(--nxs-n) - 4.5) / 10); --nxs-cf: calc(var(--nxs-n) - var(--nxs-ci) * 10);
  counter-reset: nxs-i var(--nxs-ci) nxs-f var(--nxs-cf); }
.nx-scene .nxs-count--d1::after { content: attr(data-pre) counter(nxs-i) attr(data-sep) counter(nxs-f) attr(data-post); }
.nx-scene .nxs-count--d2 { --nxs-ci: calc((var(--nxs-n) - 49.5) / 100); --nxs-cf: calc(var(--nxs-n) - var(--nxs-ci) * 100);
  counter-reset: nxs-i var(--nxs-ci) nxs-f var(--nxs-cf); }
.nx-scene .nxs-count--d2::after { content: attr(data-pre) counter(nxs-i) attr(data-sep) counter(nxs-f, decimal-leading-zero) attr(data-post); }
.nx-scene .nxs-count--d3 { --nxs-ci: calc((var(--nxs-n) - 499.5) / 1000); --nxs-cf: calc(var(--nxs-n) - var(--nxs-ci) * 1000);
  --nxs-ch: calc((var(--nxs-cf) - 49.5) / 100); --nxs-cr: calc(var(--nxs-cf) - var(--nxs-ch) * 100);
  counter-reset: nxs-i var(--nxs-ci) nxs-h var(--nxs-ch) nxs-r var(--nxs-cr); }
.nx-scene .nxs-count--d3::after { content: attr(data-pre) counter(nxs-i) attr(data-sep) counter(nxs-h) counter(nxs-r, decimal-leading-zero) attr(data-post); }
.nx-scene:is(.is-armed, .is-playing) .nxs-count { animation: nxs-count var(--dur, var(--nxs-t-count)) cubic-bezier(.15, .6, .25, 1) var(--at, 0s) both; }
@keyframes nxs-count { from { --nxs-n: var(--from, 0); } }
/* плитка с цифрой — как плашки «ЦИФРЫ» на странице */
.nx-scene .nxs-tile { background: var(--nxs-surface); border: var(--nxs-hair) solid var(--nxs-line); border-radius: var(--nxs-r);
  padding: 1.4cqw 1.6cqw; min-width: 0; }
.nx-scene .nxs-tile__val { font-size: 3.64cqw; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-scene .nxs-tile__label { margin-top: .4cqw; font-size: var(--nxs-fs-meta); line-height: 1.35; color: var(--nxs-ink-2); }
.nx-scene .nxs-tile--key { border-color: var(--nxs-accent-line); background: var(--nxs-accent-bg); }
.nx-scene .nxs-tile--key .nxs-tile__val { color: var(--nxs-accent); }

/* ───────── крупная типографика ───────── */
.nx-scene .nxs-display { font-size: var(--nxs-fs-hero); font-weight: 800; line-height: var(--nxs-lh-display);
  letter-spacing: var(--nxs-ls-display); color: var(--nxs-ink); text-wrap: balance; }
.nx-scene .nxs-display--title { font-size: var(--nxs-fs-title); line-height: 1.12; letter-spacing: var(--nxs-ls-title); }

/* ───────── эфирная / субтитровая плашка: чернила + белый + мятный (как полоса плеера) ───────── */
.nx-scene .nxs-sub { display: inline-flex; flex-direction: column; gap: .5cqw; max-width: 82cqw; padding: 1.3cqw 2cqw 1.45cqw;
  border-radius: var(--nxs-r); background: var(--nxs-strip); color: var(--nxs-strip-ink); box-shadow: var(--nxs-shadow); }
.nx-scene .nxs-sub__tag { font-family: var(--nxs-mono); font-size: var(--nxs-fs-kicker); font-weight: 600; letter-spacing: var(--nxs-ls-kicker);
  text-transform: uppercase; color: var(--nxs-strip-accent); }
.nx-scene .nxs-sub__en { font-size: var(--nxs-fs-meta); line-height: 1.35; color: var(--nxs-strip-ink-2); }
.nx-scene .nxs-sub__ru { font-size: var(--nxs-fs-lead); line-height: 1.3; font-weight: 600; color: var(--nxs-strip-ink); }
.nx-scene .nxs-sub--bare { background: transparent; box-shadow: none; padding: 0; }

/* ───────── заметка на полях ───────── */
.nx-scene .nxs-note { position: relative; display: inline-block; max-width: 30cqw; padding: 1cqw 1.3cqw 1.1cqw; border-radius: var(--nxs-r-sm);
  background: var(--nxs-note-bg); border: var(--nxs-hair) solid var(--nxs-note-line); color: var(--nxs-note-ink);
  font-size: var(--nxs-fs-meta); line-height: 1.4; font-weight: 600; box-shadow: var(--nxs-shadow-sm); }
.nx-scene .nxs-note__label { display: block; margin-bottom: .3cqw; font-family: var(--nxs-mono); font-size: var(--nxs-fs-kicker); font-weight: 600;
  letter-spacing: var(--nxs-ls-kicker); text-transform: uppercase; opacity: .75; }

/* ───────── линза-лупа: круг с белым кольцом; внутри — тот же снимок крупнее (стиль кладёт картинку) ───────── */
.nx-scene .nxs-lens { position: absolute; width: var(--d, 24cqw); height: var(--d, 24cqw); border-radius: 50%; overflow: hidden;
  background: var(--nxs-surface); box-shadow: 0 0 0 .45cqw var(--nxs-surface), 0 0 0 calc(.45cqw + var(--nxs-hair)) var(--nxs-line-2), var(--nxs-shadow-lg); }
.nx-scene .nxs-lens > img { position: absolute; }

/* ───────── инфографика: столбец, шкала, ячейка таблицы ───────── */
.nx-scene .nxs-bars { display: flex; align-items: flex-end; gap: 2.3cqw; height: var(--h, 26cqw); padding-bottom: 0;
  border-bottom: var(--nxs-hair) solid var(--nxs-line-2); }
.nx-scene .nxs-bar { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.nx-scene .nxs-bar__fill { flex-shrink: 0; /* честная шкала: столбец с подписью не сжимается (I, 24.09) */ display: block; height: calc(var(--v, .5) * 100%); min-height: var(--nxs-rule); border-radius: var(--nxs-r-xs) var(--nxs-r-xs) 0 0;
  background: var(--nxs-line-2); transform-origin: 50% 100%; }
.nx-scene .nxs-bar__val { margin-bottom: .6cqw; text-align: center; font-size: var(--nxs-fs-lead); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--nxs-ink-2); white-space: nowrap; }
.nx-scene .nxs-bar__cat { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: .8cqw; white-space: nowrap;
  font-family: var(--nxs-mono); font-size: var(--nxs-fs-kicker); letter-spacing: .04em; color: var(--nxs-ink-3); }
.nx-scene .nxs-bar--key .nxs-bar__fill { background: var(--nxs-accent); }
.nx-scene .nxs-bar--key .nxs-bar__val { color: var(--nxs-accent); }
.nx-scene:is(.is-armed, .is-playing) .nxs-bar__fill { animation: nxs-grow .9s var(--nxs-ease-io) var(--at, 0s) both; }
@keyframes nxs-grow { from { transform: scaleY(0); } }
.nx-scene .nxs-axis { position: relative; height: 0; border-top: var(--nxs-hair) solid var(--nxs-line-2); }
.nx-scene .nxs-tick { position: absolute; top: 0; left: calc(var(--x, 0) * 100%); height: .9cqw; border-left: var(--nxs-hair) solid var(--nxs-line-2); }
.nx-scene .nxs-tick > span { position: absolute; top: 1.2cqw; left: 0; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--nxs-mono); font-size: var(--nxs-fs-kicker); color: var(--nxs-ink-3); }
.nx-scene .nxs-table { display: grid; grid-template-columns: var(--cols, 1fr 1fr 1fr); border: var(--nxs-hair) solid var(--nxs-line);
  border-radius: var(--nxs-r); overflow: hidden; background: var(--nxs-surface); }
.nx-scene .nxs-cell { position: relative; padding: 1.1cqw 1.4cqw; font-size: var(--nxs-fs-meta); line-height: 1.35; color: var(--nxs-ink);
  border-top: var(--nxs-hair) solid var(--nxs-line); border-left: var(--nxs-hair) solid var(--nxs-line); min-width: 0; }
.nx-scene .nxs-cell--head { background: var(--nxs-chrome); font-family: var(--nxs-mono); font-size: var(--nxs-fs-kicker); font-weight: 600;
  letter-spacing: var(--nxs-ls-kicker); text-transform: uppercase; color: var(--nxs-ink-3); border-top: 0; }
.nx-scene .nxs-cell--key { background: var(--nxs-accent-bg); font-weight: 600; }
.nx-scene .nxs-cell--key::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--nxs-rule); background: var(--nxs-accent); }

/* ───────── панель и «кино»-полосы (для кинетической типографики и субтитров) ───────── */
.nx-scene .nxs-panel { border-radius: var(--nxs-r-lg); padding: 2.5cqw 2.8cqw; background: var(--nxs-surface); color: var(--nxs-ink); }
.nx-scene .nxs-panel--ink { background: var(--nxs-strip); color: var(--nxs-strip-ink); }
.nx-scene .nxs-panel--accent { background: var(--nxs-accent); color: var(--nxs-on-accent); }
.nx-scene .nxs-panel--mint { background: var(--nxs-mint); color: #1d1d1b; }
.nx-scene .nxs-letterbox::before, .nx-scene .nxs-letterbox::after { content: ""; position: absolute; left: 0; right: 0; height: 7cqw;
  background: #0f0f0e; z-index: 5; }
.nx-scene .nxs-letterbox::before { top: 0; } .nx-scene .nxs-letterbox::after { bottom: 0; }

/* ───────── общие ключевые кадры появления ───────── */
.nx-scene:is(.is-armed, .is-playing) .nxs-in { animation: nxs-rise var(--nxs-t-in) var(--nxs-ease) var(--at, 0s) both; }
.nx-scene:is(.is-armed, .is-playing) .nxs-pop { animation: nxs-pop .5s cubic-bezier(.3, 1.5, .5, 1) var(--at, 0s) both; }
.nx-scene:is(.is-armed, .is-playing) .nxs-fade { animation: nxs-fade var(--nxs-t-in) ease var(--at, 0s) both; }
@keyframes nxs-rise { from { opacity: 0; transform: translateY(.45em); } }
@keyframes nxs-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes nxs-fade { from { opacity: 0; } }
/* фокус и гашение по времени: статично — финальное состояние, в игре — из обычного */
.nx-scene:is(.is-armed, .is-playing) .is-focus { animation: nxs-focus var(--nxs-t-in) var(--nxs-ease) var(--at, 0s) both; }
.nx-scene:is(.is-armed, .is-playing) .is-focus::before { animation: nxs-rule .5s var(--nxs-ease) var(--at, 0s) both; }
.nx-scene:is(.is-armed, .is-playing) .is-dim { animation: nxs-dim var(--nxs-t-in) ease var(--at, 0s) both; }
@keyframes nxs-focus { from { background-color: var(--nxs-surface); border-color: var(--nxs-line); box-shadow: var(--nxs-shadow-sm); } }
@keyframes nxs-rule { from { transform: scaleY(0); } }
@keyframes nxs-dim { from { opacity: 1; } }