/* scene.css — стиль page-margins (№ 23 «Маркер и поля», префикс u23-). Только раскладка и хореография: цвета,
   шрифты, рамки, тени, кривые и длительности — из site_kit/scenes/_kit/tokens.css и components.css. Мир камеры —
   снятая страница в «пикселях страницы» (1440 по ширине кадра), камера набора .nxs-cam; путь камеры — @keyframes
   из style.py (css конкретной сцены, имя и селектор — с её id), финальная точка — переменные корня. Всё «на бумаге»
   (маркер, ручка, перевод на полях, цифра) лежит в мире камеры и едет вместе со страницей; размеры текста там —
   токены набора ÷ финальное увеличение.
   Хореография: 0,35–1,2 с ручка подчёркивает метки строк → 1,3–3,0 с наезд на колонку фраз и поле →
   фраза: маркер (протяжка набора) → скобка → перевод на поле строка за строкой → цена обведена,
   стрелка-выноска, цифра набегает (ключевой момент) → вторая и третья фразы тем же ходом. */
.nx-scene--page-margins .u23-cam { --nxs-unit: calc(100cqw / 1440); --nxs-vx: 50; --nxs-vy: 31.25;
  --nxs-cx: var(--u23-cx); --nxs-cy: var(--u23-cy); --nxs-cz: var(--u23-cz);
  width: calc(1440 * var(--nxs-unit)); height: calc(var(--u23-doc) * var(--nxs-unit));
  will-change: auto; }   /* наезд ×1,8: без «липкого» растра слоя страница перерисовывается чёткой на каждом увеличении */
.nx-scene--page-margins :is(.u23-img, .u23-mk, .u23-pen) { position: absolute; left: calc(var(--x) * var(--nxs-unit)); top: calc(var(--y) * var(--nxs-unit));
  width: calc(var(--w) * var(--nxs-unit)); height: calc(var(--h) * var(--nxs-unit)); }
/* маркер: вырезка снимка, закрашенная news_scene.py цветом --nxs-marker; протяжка — .nxs-mark-band набора */
.nx-scene--page-margins .u23-mk { display: block; background-repeat: no-repeat;
  background-size: calc(var(--mw) * var(--nxs-unit)) calc(var(--mh) * var(--nxs-unit));
  background-position: calc((var(--mx) - var(--x)) * var(--nxs-unit)) calc((var(--my) - var(--y)) * var(--nxs-unit)); }
/* ручка (свой компонент из токенов): линия акцента, толщина ≈ линейка набора в финальном кадре, круглые концы */
.nx-scene--page-margins .u23-pen { overflow: visible; }
.nx-scene--page-margins .u23-p { fill: none; stroke: var(--nxs-accent); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100 200; stroke-dashoffset: 0; }
/* перевод на поле: чип набора и русский текст Golos 600 цвета текста; размер — токен ÷ увеличение камеры */
.nx-scene--page-margins :is(.u23-note, .u23-num, .u23-chip) { position: absolute; left: calc(var(--x) * var(--nxs-unit)); top: calc(var(--y) * var(--nxs-unit)); margin: 0; }
.nx-scene--page-margins .u23-chip { font-size: calc(var(--nxs-fs-kicker) / var(--u23-z)); }
.nx-scene--page-margins .u23-note { font-size: calc(var(--nxs-fs-body) / var(--u23-z)); line-height: 1.4; font-weight: 600; color: var(--nxs-ink); white-space: nowrap; }
.nx-scene--page-margins .u23-ln { display: block; width: max-content; }
.nx-scene--page-margins .u23-num .nxs-num { font-size: calc(var(--nxs-fs-num) / var(--u23-z)); color: var(--nxs-accent); }
.nx-scene--page-margins .u23-num .nxs-num-label { margin-top: calc(.7cqw / var(--u23-z)); font-size: calc(var(--nxs-fs-meta) / var(--u23-z));
  color: var(--nxs-ink); font-weight: 600; white-space: nowrap; }
.nx-scene--page-margins .u23-src { position: absolute; right: var(--nxs-safe); bottom: var(--nxs-safe); max-width: 60cqw; z-index: 2; }

/* ── хореография: моменты — --at/--dur у элементов из style.py ── */
.nx-scene--page-margins:is(.is-armed, .is-playing) .u23-p { animation: u23-draw var(--dur, .4s) var(--nxs-ease-io) var(--at, 0s) both; }
.nx-scene--page-margins:is(.is-armed, .is-playing) .u23-ln { animation: nxs-band var(--dur, .45s) var(--nxs-ease-io) var(--at, 0s) both; }
@keyframes u23-draw { from { stroke-dashoffset: 101; } to { stroke-dashoffset: 0; } }