/* Hallmark · macrostructure: Split Studio · nav: N1a (имя и Telegram) · только первый экран главной
 * genre: atmospheric · theme: custom «Ночь 2» (PAL-4) · tone: warm-precise · anchor hue: 42
 * Перенос артборда «Тихая ночь», утверждён владельцем 08.10.2026:
 * фон photo/gorod, кадр 160%, H1 95%, вторая строка trust. Токены только из noch2-tokens.css.
 * Отличия от артборда, все намеренные: бесконечного движения нет (дрейф кадра и дыхание света сняты по брифу
 * «в покое ничего не движется»); кадр обрезан справа на 120 px (тёмная рама на 1280×720 и 1366×768, замечание
 * критика 5); на телефоне вертикаль ужата, чтобы пара про скидку с карточкой «Вопрос у менеджера» стояла выше
 * (замечание 1); длительности сведены к трём токенам. */

/* ─── шапка: имя слева, Telegram справа; уезжает вместе с первым экраном ─── */
.bar {
  position: absolute;
  z-index: 6;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--pad-x);
  color: var(--ink);
}
.bar__name {
  margin: 0;
  padding: 11px 0;
  font: 600 var(--fs-lead)/1.55 var(--ff-display);
  letter-spacing: -.01em;
}
.bar__tg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--ink);   /* на артборде правило .pg a { color: inherit } перебивает mute: ссылка цвета текста */
  font: 400 var(--fs-text)/1.55 var(--ff-body);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-ui) var(--ease);
}
.bar__tg:active { color: var(--dim); }

/* ─── первый экран: текст слева, окно переписки справа, ночной город в боке за ними ─── */
.hero.nh {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: clip;
  min-height: 900px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--cw));
  gap: clamp(40px, 6.5vw, 104px);
  align-items: center;
  padding: 112px var(--pad-x) 64px;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-lead)/1.55 var(--ff-body);
  --d: 0s; --sh: 0s; --rp: 0s;   /* такт показа, сдвиг и пауза повтора по умолчанию; у реплик свой в style (раньше fallback var(--d, 0s), поведение то же) */
}
/* сглаживание как на холсте: antialiased из noch.css (body) делало контуры букв тоньше, это единственное,
   чем текст статики отличался от артборда (сверка по зонам 08.10: 7,5% на H1 → 0,0%) */
.n2 { -webkit-font-smoothing: auto; }
/* шире 1440 композиция не растёт: поля прибавляют, кадр остаётся на всю ширину (на 1920 окно переписки
   иначе вытягивалось до 932 px и плашки шли длинными строками) */
.n2 { --pad-x: max(var(--pad), calc((100% - 1312px) / 2)); }
.nh *, .nh *::before, .nh *::after { box-sizing: border-box; }
.nh a { color: inherit; }
.n2 a:focus-visible, .n2 button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }   /* кольцо цвета текста: акцент только на действии (A3) */
.nh-nw { white-space: nowrap; }

/* фон: настоящий кадр «Ночи», затемнён вуалью и размыт; <img> ради LCP и fetchpriority */
.nh-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nh-bg__img {
  position: absolute;
  left: -4%;
  top: -4%;
  width: 108%;
  height: 108%;
  max-width: none;
  object-fit: cover;
  object-position: 100% 50%;
  background-color: var(--bg);
  filter: blur(4px) brightness(var(--pl)) saturate(1.1);
}
.nh-bg__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 56%, transparent) 0%, color-mix(in srgb, var(--bg) 38%, transparent) 36%, transparent 64%, color-mix(in srgb, var(--bg) 12%, transparent) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 16%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 46%, transparent) 0%, transparent 16%);
}
.nh-grain { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .1; mix-blend-mode: overlay; pointer-events: none; }

/* левая колонка */
.nh-txt { position: relative; z-index: 3; }
.nh-h1 {
  margin: 0;
  font: 600 var(--fs-h1)/1.07 var(--ff-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.nh-sub {
  margin: 26px 0 0;
  max-width: 31ch;
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: var(--dim);
  text-wrap: pretty;
}
.nh-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 38px 0 0; }
/* строка доверия (решение владельца 08.10): первой под кнопками, со значком замка; голос подписи, без акцента */
.nh-note { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 0; max-width: 42ch; font-size: var(--fs-text); line-height: 1.45; color: var(--dim); text-wrap: pretty; }
.nh-lock { flex: none; width: 1em; height: 1em; transform: translateY(.14em); }
.nh-sign { margin: 6px 0 0; font-size: var(--fs-text); color: var(--mute); }

/* кнопки: главная носит и .go (по ней кнопку находят rigtabs и проверки), поэтому всё задано здесь поверх noch.css */
.nh .nh-btn {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
  font: 600 var(--fs-lead)/1 var(--ff-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.nh .nh-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: none; }
.nh-arr { flex: none; width: 18px; height: 16px; transition: transform var(--dur-ui) var(--ease); }
.nh .nh-btn:active { transform: scale(.97); box-shadow: none; transition-duration: var(--dur-press); }
.nh .nh-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nh .nh-btn--ghost:active { background: var(--press); }

/* правая колонка: окно переписки */
.nh-stage { position: relative; z-index: 2; }
.nh-ember {
  position: absolute;
  z-index: 0;
  left: 6%;
  right: -12%;
  top: 18%;
  bottom: -14%;
  border-radius: 50%;
  opacity: var(--gk);
  background: radial-gradient(closest-side, var(--ember-0), var(--ember-1) 55%, transparent);
  pointer-events: none;
}
.nh-win {
  position: relative;
  z-index: 1;
  border-radius: var(--r-win);
  background: linear-gradient(180deg, var(--win-top), var(--win-bot));
  box-shadow: 0 50px 110px var(--sh-3), inset 0 1px 0 var(--win-hi);
}
.nh-win::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(215deg, var(--edge-warm), var(--edge-mid) 34%, var(--edge-mid) 66%, var(--edge-cool));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.nh-win__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 69px; padding: 12px 18px 12px 28px; border-bottom: 1px solid var(--line-soft); }
.nh-who { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-note); font-weight: 600; }
.nh-ava { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--hot), var(--lit) 55%, var(--surface) 100%); }
.nh-again {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--mute);
  font: 400 var(--fs-small)/1 var(--ff-body);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-ui) var(--ease);
}
.nh-again[hidden] { display: none; }
.nh-again svg { transition: transform var(--dur-ui) var(--ease); }
.nh-again:active { color: var(--ink); }
.nh-win__bd { display: flex; flex-direction: column; padding: 24px 28px 28px; }

/* плашки одного вида: клиент справа, помощник слева, разница только в заливке */
.nh-pl { max-width: 84%; margin: 0; padding: 12px 16px 10px; border-radius: var(--r-pl); border: 1px solid var(--line); background: var(--fill-a); font-size: var(--fs-text); line-height: 1.45; }
.nh-pl--q { align-self: flex-end; background: var(--fill-q); }
.nh-pl + .nh-pl { margin-top: 10px; }
.nh-pl p { margin: 0; }
.nh-ts { float: right; margin: 5px 0 0 14px; font-size: var(--fs-small); line-height: 1.2; color: var(--mute); font-variant-numeric: tabular-nums; }
.nh-hl { color: inherit; background: linear-gradient(transparent 58%, var(--hl) 58%) 0 0 / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nh-pl .nh-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; clear: both; margin: 10px 0 0; padding: 9px 0 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--mute); }
.nh-src b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.nh-src svg { color: var(--lit); }
.nh-gap { height: 22px; }
.nh-kicker { display: block; margin: 0 0 4px; font-size: var(--fs-small); color: var(--mute); }
.nh-st { background: linear-gradient(var(--lit), var(--lit)) 0 56% / 100% .09em no-repeat; color: var(--mute); text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* единственный громкий момент: итог отказа */
.nh-vd { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line-soft); }
.nh-pl .nh-vd__k { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 var(--fs-verdict)/1.15 var(--ff-display); letter-spacing: -.02em; color: var(--lit); }
.nh-vd__k svg { flex: none; }
.nh-vd__r { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--fs-text); color: var(--dim); }
.nh-vd__r li { display: inline-flex; align-items: center; gap: 8px; }
.nh-vd__r svg { color: var(--mute); }
.nh-pl--ok { margin-top: 12px; }
.nh-hand { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r-pl); border: 1px dashed var(--line-strong); font-size: var(--fs-note); line-height: 1.35; color: var(--dim); }
.nh-hand__i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fill-q); color: var(--lit); }
.nh-hand b { display: block; color: var(--ink); font-weight: 600; }
.nh-cap { position: relative; z-index: 2; margin: 14px 0 0 4px; font-size: var(--fs-small); color: var(--mute); }

/* ─── движение: один показ при загрузке, только со скриптом и без «уменьшить движение».
   Без JS и при reduce переписка стоит в итоговом состоянии. «Ещё раз» меняет nh-r0 ↔ nh-r1:
   другое имя ключевых кадров перезапускает их без перерисовки DOM. ─── */
@keyframes nh-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes nh-in0 { from { opacity: 0; transform: translateY(10px); } }
@keyframes nh-in1 { from { opacity: 0; transform: translateY(10px); } }
@keyframes nh-mk0 { from { background-size: 0 100%; } }
@keyframes nh-mk1 { from { background-size: 0 100%; } }
@keyframes nh-st0 { from { background-size: 0 .09em; color: var(--ink); } }
@keyframes nh-st1 { from { background-size: 0 .09em; color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) {
  .js .nh-rise { animation: nh-rise var(--dur-scene) var(--ease) var(--d) both; }
  .js .nh-a-in { animation: nh-in0 var(--dur-scene) var(--ease) calc(var(--d) - var(--sh) - var(--rp)) both; }
  .js .nh-a-mk { animation: nh-mk0 var(--dur-scene) var(--ease) calc(var(--d) - var(--sh) - var(--rp)) both; }
  .js .nh-a-st { animation: nh-st0 var(--dur-scene) var(--ease) calc(var(--d) - var(--sh) - var(--rp)) both; }
  /* повтор начинается сразу: без сдвига окно 0,6 с стояло пустым и щелчок читался как поломка (improve-animations, 08.10) */
  .js .nh-win.is-again { --rp: .6s; }
  .js .nh-r1 .nh-a-in { animation-name: nh-in1; }
  .js .nh-r1 .nh-a-mk { animation-name: nh-mk1; }
  .js .nh-r1 .nh-a-st { animation-name: nh-st1; }
}
@media (prefers-reduced-motion: reduce) {
  .nh-again { display: none; }   /* показывать нечего: итог уже на экране */
  .bar__tg, .nh .nh-btn, .nh-arr, .nh-again, .nh-again svg { transition: none; }
}

@media (hover: hover) and (pointer: fine) {
  .nh-again:hover { color: var(--ink); }
  .bar__tg:hover { color: var(--lit); }
  .nh .nh-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nh .nh-btn:not(.nh-btn--ghost):hover { transform: translateY(-2px); box-shadow: 0 14px 40px var(--btn-shadow); }
  .nh .nh-btn:hover .nh-arr { transform: translateX(4px); }
  .nh-again:hover svg { transform: rotate(-200deg); }
}

/* ноутбук 1366×768 и ниже по высоте: экран не переливается за край */
@media (min-width: 1001px) and (max-height: 800px) {
  .hero.nh { min-height: 768px; padding-top: 96px; }
}
/* 1440×900 и соседние высоты: подпись «база и вопросы вымышлены» кончалась на 906 при экране 900 (круг 3 аудита) */
@media (min-width: 1001px) and (min-height: 881px) and (max-height: 920px) {
  .hero.nh { padding-top: 96px; }
}
/* 1280×720: окно с обеими парами кончалось на 693, подпись «база и вопросы вымышлены» резалась краем (707–729).
   Экран не выше окна браузера (было 720 px и на 620–700). Окно встаёт на 78: ссылка Telegram в шапке кончается на 69 */
@media (min-width: 1001px) and (max-height: 740px) {
  .hero.nh { min-height: 100vh; padding-top: 78px; }
  .nh-cap { margin-top: 10px; }
}
/* Обмен про замер виден и на ноутбуках (22.10.2026, решение владельца «да, показываем», 12-round2-fixes.md п. 4; до этого
   с 08.10 первая пара пряталась на 1001–1279 и при высоте ≤800). Чтобы окно с обеими парами кончалось в экране, на этих
   размерах окно в плотной форме, как на телефоне: шапка без минимальной высоты, пузыри кеглем --fs-note, поля и зазоры меньше.
   Замер 22.10 (живой показ, конец сцены): низ окна / низ подписи «база и вопросы вымышлены» при высоте экрана
   1024×768 731/767, 1280×720 681/713, 1366×768 693/729, 1536×864 755/790 (раньше на 1536×864 окно и с одной сценой
   кончалось на 871 при 864, правило ≤800 его не ловило; поэтому граница 880). Сцена идёт с первой пары, сдвига --sh нет */
@media (min-width: 1001px) and (max-width: 1279px), (min-width: 1001px) and (max-height: 880px) {
  .nh-win__hd { min-height: 0; padding: 4px 8px 4px 20px; }
  .nh-win__hd .nh-again { margin-block: -10px; }   /* зона нажатия 44 px заходит на поля шапки и за её края, шапка 57 → 33 px */
  .nh-win__bd { padding: 14px 16px 16px; }
  .nh-pl { max-width: 90%; font-size: var(--fs-note); line-height: 1.4; padding: 9px 13px 8px; }
  .nh-pl + .nh-pl, .nh-pl--ok { margin-top: 8px; }
  .nh-pl .nh-src { margin-top: 7px; padding-top: 6px; }
  .nh-vd { margin-top: 7px; padding-top: 7px; }
  .nh-gap { height: 10px; }
  .nh-hand { margin-top: 10px; padding: 6px 12px 6px 8px; font-size: var(--fs-small); }
  .nh-hand__i { width: 24px; height: 24px; }
  /* «Заявка у менеджера» и «ответит завтра с 9:00» одной строкой, перенос только если не влезет; флекс, а не inline:
     между словами в разметке пробела нет, блоки читаются раздельно и глазом, и скринридером. Карточка 54 → 38 px */
  .nh-hand > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; }
}
/* 1001–1279: колонка переписки узкая (485 px на 1024), окно с обеими парами было 687 px. Ширину колонкам не перекраиваем:
   неразрывное «со встроенным ИИ» (11,57 em) садилось на рамку окна. Пузыри шире внутри окна и поля меньше: 626 px,
   от строк H1 до окна 25 px, как было */
@media (min-width: 1001px) and (max-width: 1279px) {
  .nh-win__bd { padding: 12px 12px 14px; }
  .nh-pl { max-width: 96%; }
}
/* Круг 3 аудита (13-round3-fixes.md п. 1): на 1366×650 (браузер на ноутбуке 1366×768) и 1001×700 конец показа резался краем,
   «Заявка у менеджера» была видна наполовину (низ карточки 665 при экране 650, 726 при 700). Обе пары остаются, тексты те же,
   кегль пузырей не меньше 15 px. Ниже 741 px по высоте окно плотнее: строки 1,35, поля и зазоры на 1–2 px меньше, «не отправлено»
   кеглем 18 px, как на телефоне. Ниже 701 px итог отказа одной строкой с причиной (минус 27 px) */
@media (min-width: 1001px) and (max-height: 740px) {
  .nh-win__bd { padding-top: 12px; padding-bottom: 12px; }
  .nh-pl { line-height: 1.35; padding: 8px 12px 7px; }
  .nh-pl + .nh-pl, .nh-pl--ok { margin-top: 6px; }
  .nh-gap { height: 8px; }
  .nh-pl .nh-src { margin-top: 6px; padding-top: 5px; }
  .nh-vd { margin-top: 6px; padding-top: 6px; }
  .nh-pl .nh-vd__k { font-size: var(--fs-lead); }
  .nh-hand { margin-top: 8px; }
}
@media (min-width: 1001px) and (max-height: 700px) {
  .nh-vd { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
  .nh-vd__r { margin-top: 0; }
}
/* ≤1000: одна колонка, переписка под текстом. Обе пары видны (22.10, аудит: на телефоне без пары про замер
   не было видно заявки); фраза стоит над окном, поэтому тест пяти секунд держит она */
@media (max-width: 1000px) {
  .hero.nh { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; padding: 84px var(--pad-x) 48px; }
  .nh-bg__img { object-position: 88% 50%; }
  .nh-bg__veil { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 56%, transparent) 0%, color-mix(in srgb, var(--bg) 54%, transparent) 38%, color-mix(in srgb, var(--bg) 4%, transparent) 60%, color-mix(in srgb, var(--bg) 22%, transparent) 86%, var(--bg) 100%); }
  .nh-sub { margin-top: 16px; }
  .nh-act { margin-top: 22px; }
  .nh-note { margin-top: 12px; font-size: var(--fs-note); }
  .nh-sign { margin-top: 4px; }
  .nh-win__hd { min-height: 0; padding: 6px 8px 6px 18px; }
  .nh-win__bd { padding: 16px 14px 18px; }
  .nh-pl { max-width: 92%; font-size: var(--fs-note); padding: 10px 13px 9px; }
  .nh-vd__r { flex-direction: column; font-size: var(--fs-note); }
  /* H1 по ширине колонки: «со&nbsp;встроенным&nbsp;ИИ» неразрывен и равен 11,57 em, при 31,5 px на 361–384 он вылезал
     за экран на 23,5 px (аудит 22.10). Кегль не больше --fs-h1 и такой, чтобы кусок влез с запасом 2% (11,8 em) */
  .nh-h1 { font-size: min(var(--fs-h1), (100vw - 2 * var(--pad)) / 11.8); }   /* колонка = окно минус поля --pad */
  .nh-pl .nh-vd__k { font-size: var(--fs-lead); }   /* 19 → 18 px: кегль со шкалы, отдельного 19 нет (08.10, контракт кеглей) */
  .nh-hand { font-size: var(--fs-small); padding: 9px 12px; }
}
@media (max-width: 420px) {
  .nh .nh-btn { min-height: 52px; padding: 0 18px; font-size: var(--fs-text); gap: 8px; }
  .nh-act { gap: 8px; flex-wrap: nowrap; }
}
@media (max-width: 360px) {
  .n2 .nh-h1 { font-size: calc(var(--fs-h1-xs) * var(--k)); }   /* тот же кегль, что раньше через --fs-h1; токен один, не переопределяется (08.10) */
  .nh .nh-btn { padding: 0 16px; }
  .nh-act { flex-wrap: wrap; }
}

/* ─── 23.10.2026, разбор с телефона (docs/audit-mobile-2026-10-23.md, п. 1, 3, 6). Только ≤767: планшет и компьютер как были.
   п. 3: подпись «база и вопросы вымышлены» снята со всех ширин. п. 6 (вариант А): в первом экране телефона заголовок,
   подзаголовок и две кнопки; строка с замком встаёт под окно переписки (вторая копия .nh-note--m, на ≥768 скрыта),
   «Продавал десять лет» уезжает подписью автора в «Напишите мне» (.tl-sign). Окно переписки в плотной форме ноутбука
   1366×768: обе пары на месте, тексты те же, короче рамка (п. 2: два чата подряд стали ниже) ─── */
.nh-note--m { display: none; }
/* ≥768: место снятой подписи остаётся тем же полем под окном (14 px + строка мелкого кегля), иначе на компьютере центровка
   первого экрана сдвигала текст и окно на 17–18 px, а всё ниже на 36 px (К6: десктоп не меняется). Узла в разметке нет */
@media (min-width: 768px) {
  .nh-stage::after { content: ""; display: block; margin-top: 14px; font-size: var(--fs-small); height: 1lh; }
}
@media (min-width: 1001px) and (max-height: 740px) { .nh-stage::after { margin-top: 10px; } }
@media (max-width: 767px) {
  .nh-txt .nh-note--d, .nh-txt .nh-sign { display: none; }
  .nh-note--m { display: flex; position: relative; z-index: 2; margin: 14px 0 0 4px; font-size: var(--fs-note); }
  .nh-win__hd { min-height: 0; padding: 4px 8px 4px 18px; }
  .nh-win__hd .nh-again { margin-block: -10px; }
  .nh-win__bd { padding: 12px 12px 14px; }
  .nh-pl { max-width: 94%; line-height: 1.4; padding: 8px 12px 7px; }
  .nh-pl + .nh-pl, .nh-pl--ok { margin-top: 8px; }
  .nh-pl .nh-src { margin-top: 6px; padding-top: 5px; }
  .nh-vd { margin-top: 6px; padding-top: 6px; }
  .nh-gap { height: 8px; }
  .nh-hand { margin-top: 10px; padding: 6px 12px 6px 8px; }
  .nh-hand__i { width: 24px; height: 24px; }
  .nh-hand > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; }
}