/* Изолированный стенд WebGL-фигурки. Никаких правил отсюда не наследует
   основной лендинг: у страницы собственный body-класс и namespace `ninja-lab`. */

/* Весь файл — в слое `legacy`. Смысл: правило вне слоя бьёт правило внутри
   любого слоя, независимо от специфичности и порядка. Пока хоть один наш файл
   оставался вне слоёв, утилиты Tailwind проигрывали ему молча — выглядело бы
   как «Tailwind не работает».

   Внутри слоя всё как раньше: файлы соперничают между собой по прежним
   правилам, порядок подключения тот же. Меняется только одно — утилита теперь
   перебивает старый CSS, потому что слой `utilities` объявлен после `legacy`
   (порядок задан в ozon_margin/tailwind.css).

   Оборачивать надо ВСЕ файлы разом, включая cyberpunk/dashboard.css: он
   вклеивается внутрь собранного «Обзора», и оставшись единственным вне слоёв,
   начал бы выигрывать у всего приложения. */
@layer legacy {
.nlb,
.ninja-lab {
  --ninja-bg: #030609;
  --ninja-ink: #f5f8fb;
  --ninja-muted: rgba(218, 224, 227, .5);
  --ninja-cyan: #9cb8bb;
  --ninja-red: #d55f59;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  margin: 0;
  color: var(--ninja-ink);
  background: var(--ninja-bg);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
}

.nlb *, .ninja-lab * { box-sizing: border-box; }
/* `color: inherit` даётся только странице стенда. Внутри витрины этот
   же селектор весит больше, чем классы её кнопок (`.ninja-lab a` — это
   класс плюс элемент), и «Подключить кабинет» становилась белой
   надписью на белой кнопке. Ссылкам сцены цвет назначен поимённо. */
.nlb a { color: inherit; text-decoration: none; }
.ninja-lab a { text-decoration: none; }
.ninja-lab { min-height: 100%; overflow: clip; background: var(--ninja-bg); }
/* Два акта одной прокрутки: 0–0.60 — четыре главы про фигуру, 0.74–1 —
   фигура ушла в правую треть, слева встали модули. Границы держит JS
   (STORY_SPAN / BOARD_START), высота здесь — их бюджет прокрутки. */
.ninja-lab__story { position: relative; height: 780vh; min-height: 4600px; }
.ninja-lab__stage {
  position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden;
  isolation: isolate; background: #020304;
}
.ninja-lab__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ninja-lab__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(191, 205, 208, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 205, 208, .018) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 66% 48%, #000 0, rgba(0,0,0,.62) 42%, transparent 80%);
  mask-image: radial-gradient(circle at 66% 48%, #000 0, rgba(0,0,0,.62) 42%, transparent 80%);
}
.ninja-lab__noise {
  position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: .026;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  animation: ninja-noise .8s steps(2) infinite;
}
@keyframes ninja-noise {
  0% { transform: translate3d(-2%, -1%, 0); }
  50% { transform: translate3d(2%, 1%, 0); }
  100% { transform: translate3d(-1%, 2%, 0); }
}

.ninja-lab__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 70% 46%, rgba(133, 167, 169, .045), transparent 34%),
    linear-gradient(90deg, rgba(2, 3, 4, .99) 0, rgba(2, 3, 4, .86) 31%, rgba(2,3,4,.2) 57%, transparent 72%),
    linear-gradient(0deg, rgba(2, 3, 4, .94), transparent 22%, transparent 76%, rgba(2, 3, 4, .76));
}
.ninja-lab__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid rgba(255,255,255,.055); box-shadow: inset 0 0 140px rgba(0,0,0,.82);
}

.ninja-lab__head {
  position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 76px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 4vw;
  border-bottom: 1px solid rgba(255,255,255,.09); text-transform: uppercase;
}
.ninja-lab__brand { display: inline-flex; align-items: center; gap: 12px; font: 700 14px/1 sans-serif; letter-spacing: .16em; }
.ninja-lab__brand i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ninja-red);
  box-shadow: 0 0 14px rgba(213,95,89,.68);
}
.ninja-lab__label { display: flex; align-items: center; gap: 15px; color: var(--ninja-muted); font-size: 10px; letter-spacing: .16em; }
.ninja-lab__label span { color: var(--ninja-red); }

.ninja-lab__copy {
  position: absolute; z-index: 6; left: 4vw; top: 0; bottom: 0; width: min(520px, 39vw);
  pointer-events: none;
}
.ninja-lab__beat {
  position: absolute; left: 0; top: 50%; width: 100%; opacity: 0; visibility: visible;
  transform: translate3d(0, 100vh, 0) translateY(-50%); will-change: transform, opacity;
}
.ninja-lab__beat.is-active {
  visibility: visible;
}
.ninja-lab__number { margin-bottom: 22px; color: var(--ninja-cyan); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.ninja-lab__beat h1, .ninja-lab__beat h2 {
  margin: 0; color: var(--ninja-ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(44px, 5.7vw, 90px); font-weight: 830; line-height: .88; letter-spacing: -.052em;
  text-transform: uppercase;
}
.ninja-lab__beat p { max-width: 430px; margin: 30px 0 0; color: var(--ninja-muted); font: 400 14px/1.75 ui-sans-serif, system-ui, sans-serif; }

.ninja-lab__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; width: min(470px, 100%); margin-top: 28px;
  border: 1px solid rgba(84,246,229,.16); background: rgba(84,246,229,.12);
}
.ninja-lab__metrics div { min-width: 0; padding: 12px 13px; background: rgba(3,6,9,.88); }
.ninja-lab__metrics span, .ninja-lab__flow span, .ninja-lab__edges span, .ninja-lab__edges small {
  display: block; color: rgba(215,229,239,.38); font-size: 8px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.ninja-lab__metrics strong { display: block; margin-top: 7px; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ninja-lab__flow { display: grid; gap: 8px; width: min(430px, 100%); margin-top: 25px; }
.ninja-lab__flow div { display: grid; grid-template-columns: 84px 1fr 48px; align-items: center; gap: 10px; }
.ninja-lab__flow i { height: 2px; background: linear-gradient(90deg, var(--ninja-red) var(--share), rgba(255,255,255,.1) var(--share)); }
.ninja-lab__flow strong { color: rgba(235,245,250,.78); font-size: 10px; font-weight: 500; text-align: right; }
.ninja-lab__flow .is-profit i { background: linear-gradient(90deg, var(--ninja-cyan) var(--share), rgba(255,255,255,.1) var(--share)); }
.ninja-lab__flow .is-profit strong { color: var(--ninja-cyan); }
.ninja-lab__edges { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: min(410px, 100%); margin-top: 26px; }
.ninja-lab__edges div { padding: 14px 15px; border: 1px solid rgba(84,246,229,.2); background: rgba(4,12,14,.76); }
.ninja-lab__edges strong { display: block; margin: 7px 0 4px; color: var(--ninja-cyan); font-size: 24px; line-height: 1; }
.ninja-lab__edges .is-loss { border-color: rgba(255,67,89,.2); }
.ninja-lab__edges .is-loss strong { color: var(--ninja-red); }
.ninja-lab__history { display: flex; align-items: end; gap: 5px; width: min(430px, 100%); height: 72px; margin-top: 26px; border-bottom: 1px solid rgba(84,246,229,.22); }
.ninja-lab__history i { flex: 1; height: var(--v); min-width: 3px; background: linear-gradient(180deg, var(--ninja-cyan), rgba(84,246,229,.14)); box-shadow: 0 0 12px rgba(84,246,229,.1); }

/* ── Акт 05. Модули ──────────────────────────────────────────────────────
   Фигура отъезжает в правую треть (uOffsetX/uOffsetY в шейдере), а слева
   освобождается место под доску. Затемнение едет тем же числом `--retreat`,
   что и камера: текст не должен читаться поверх частиц. */
.ninja-lab__scrim {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: var(--retreat, 0);
  background: linear-gradient(90deg,
    rgba(2,3,4,.985) 0, rgba(2,3,4,.95) 44%, rgba(2,3,4,.62) 63%, rgba(2,3,4,.14) 76%, transparent 88%);
}
.ninja-lab__board {
  position: absolute; z-index: 6; left: 4vw; top: 0; bottom: 0; width: min(900px, 58vw);
  display: flex; flex-direction: column; justify-content: center;
  /* Сверху шапка сцены, снизу подсказка прокрутки: доска не должна залезать
     ни на ту, ни на другую. */
  padding: 92px 0 104px;
  opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity;
}
.ninja-lab__board.is-live { visibility: visible; pointer-events: auto; }
.ninja-lab__board h2 {
  margin: 0; color: var(--ninja-ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(27px, 3vw, 46px); font-weight: 830; line-height: .9; letter-spacing: -.05em;
  text-transform: uppercase;
}
.ninja-lab__board > p {
  max-width: 520px; margin: 15px 0 0; color: var(--ninja-muted);
  font: 400 12.5px/1.65 ui-sans-serif, system-ui, sans-serif;
}
.ninja-lab__modules {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 22px;
  border: 1px solid rgba(156,184,187,.17); background: rgba(156,184,187,.14);
}
.ninja-lab__module {
  display: block; min-width: 0; padding: 11px 12px 12px; background: rgba(3,6,9,.9);
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity .42s var(--ease-out), transform .42s var(--ease-out),
              background-color .2s ease, box-shadow .2s ease;
}
.ninja-lab__module.is-in { opacity: 1; transform: none; }
.ninja-lab__module span {
  display: block; color: var(--ninja-cyan); font-size: 8.5px; letter-spacing: .1em; opacity: .85;
}
.ninja-lab__module strong {
  display: block; margin: 6px 0 4px; color: #fff;
  font: 700 12.5px/1.15 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em;
}
.ninja-lab__module small {
  display: block; color: rgba(215,229,239,.56);
  font: 400 10.5px/1.5 ui-sans-serif, system-ui, sans-serif;
}
.ninja-lab__module.is-owner strong::after {
  content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 6px;
  border-radius: 50%; background: var(--ninja-red); vertical-align: middle;
  box-shadow: 0 0 8px rgba(213,95,89,.7);
}
.ninja-lab__board-foot {
  display: flex; align-items: center; gap: 9px; margin-top: 13px;
  color: rgba(215,229,239,.3); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
}
.ninja-lab__board-foot i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--ninja-red);
  box-shadow: 0 0 8px rgba(213,95,89,.7);
}

.ninja-lab__telemetry {
  position: absolute; z-index: 6; right: 4vw; top: 104px; width: 170px;
  display: grid; gap: 9px; padding-left: 17px; border-left: 1px solid rgba(84,246,229,.28);
}
.ninja-lab__telemetry div { display: flex; justify-content: space-between; gap: 20px; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.ninja-lab__telemetry span { color: rgba(215,229,239,.35); }
.ninja-lab__telemetry strong { color: rgba(215,229,239,.72); font-weight: 500; }

.ninja-lab__variants {
  position: absolute; z-index: 8; right: 4vw; top: 188px; width: 260px;
  border: 1px solid rgba(255,255,255,.11); border-radius: 12px;
  background: rgba(3,5,6,.62); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 60px rgba(0,0,0,.24); overflow: hidden;
}
.ninja-lab__variants-toggle {
  width: 100%; min-height: 48px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; border: 0; color: rgba(225,239,245,.56); background: transparent; cursor: pointer;
  font: 600 9px/1.2 inherit; letter-spacing: .12em; text-transform: uppercase; text-align: left;
}
.ninja-lab__variants-toggle strong { overflow: hidden; color: #fff; font-weight: 600; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.ninja-lab__variants-toggle i {
  display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%;
  color: #03110f; background: var(--ninja-cyan); font-style: normal; letter-spacing: 0;
}
.ninja-lab__variants-grid {
  display: grid; grid-template-columns: 1fr; gap: 5px; max-height: min(46vh, 390px); padding: 0 7px 8px;
  overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(84,246,229,.35) transparent;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.ninja-lab__variants.is-collapsed .ninja-lab__variants-grid {
  height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translate3d(0,-6px,0); overflow: hidden;
}
.ninja-lab__look {
  min-height: 34px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px;
  color: rgba(225,239,245,.48); background: rgba(255,255,255,.025); cursor: pointer;
  font: 600 8px/1.25 inherit; letter-spacing: .08em; text-align: left; text-transform: uppercase;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.ninja-lab__look::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--look-color, #fff); box-shadow: 0 0 8px var(--look-color, #fff); }
.ninja-lab__look.is-active { color: #fff; border-color: color-mix(in srgb, var(--look-color, #fff) 58%, transparent); background: color-mix(in srgb, var(--look-color, #fff) 12%, transparent); }

.ninja-lab__controls {
  position: absolute; z-index: 7; right: 4vw; bottom: 34px; display: flex; padding: 3px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(3,6,9,.62);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ninja-lab__controls button {
  appearance: none; border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer;
  color: rgba(215,229,239,.45); background: transparent; font: 600 9px/1 inherit;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .18s ease, background-color .18s ease;
}
.ninja-lab__controls button.is-active { color: #03110f; background: var(--ninja-cyan); }
.ninja-lab__controls button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ninja-lab__density {
  position: absolute; z-index: 7; right: 4vw; bottom: 78px; display: flex; align-items: center; gap: 3px; padding: 3px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(3,6,9,.62);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ninja-lab__density span {
  padding: 0 8px 0 10px; color: rgba(215,229,239,.34); font-size: 8px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}
.ninja-lab__density button {
  appearance: none; min-width: 40px; border: 0; border-radius: 999px; padding: 7px 9px; cursor: pointer;
  color: rgba(215,229,239,.48); background: transparent; font: 600 9px/1 inherit; letter-spacing: .06em;
}
.ninja-lab__density button.is-active { color: #03110f; background: var(--ninja-cyan); }
.ninja-lab__density button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ninja-lab__scroll {
  position: absolute; z-index: 6; left: 4vw; bottom: 43px; display: flex; align-items: center; gap: 18px;
  color: rgba(215,229,239,.36); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
}
.ninja-lab__scroll i { display: block; width: 150px; height: 1px; overflow: hidden; background: rgba(255,255,255,.12); }
.ninja-lab__scroll b { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--ninja-cyan); }

.ninja-lab__unsupported, .ninja-lab__fallback {
  position: absolute; z-index: 8; place-items: center; color: var(--ninja-muted); text-align: center;
}
.ninja-lab__unsupported { left: 50%; bottom: 92px; transform: translateX(-50%); font-size: 11px; }
.ninja-lab__fallback { inset: 0; align-content: center; }
.ninja-lab__fallback:not([hidden]) { display: grid; }
.ninja-lab__fallback span { color: var(--ninja-cyan); font: 900 24vw/1 ui-sans-serif, sans-serif; opacity: .22; }
.ninja-lab__fallback p { margin: -4vw 0 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }

/* ── Акт 06. Машинное отделение ──────────────────────────────────────────
   Другой план после WebGL: строгая двенадцатиколонная сетка (приём из
   design_lab/v04), сутки контура как диаграмма запусков по часам. */
.nl-eng { position: relative; padding: 118px 4vw 128px; background: #05080a; border-top: 1px solid rgba(255,255,255,.07); }
.nl-eng__rules {
  position: absolute; inset: 0 4vw; display: flex; justify-content: space-between; pointer-events: none;
}
.nl-eng__rules i {
  width: 1px; background: rgba(191,205,208,.1);
  transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease-out);
}
.nl-eng.is-in .nl-eng__rules i { transform: scaleY(1); }
.nl-eng__in { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
.nl-eng__meta { grid-column: 1 / 4; }
.nl-eng__num { display: block; margin-bottom: 20px; color: var(--ninja-cyan); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.nl-eng__meta h2 {
  margin: 0; font: 830 clamp(26px, 2.5vw, 40px)/.94 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.048em; text-transform: uppercase;
}
.nl-eng__meta p { margin: 20px 0 0; color: var(--ninja-muted); font: 400 12px/1.7 ui-sans-serif, system-ui, sans-serif; }
.nl-eng__now {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(215,229,239,.34); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
}
.nl-eng__now strong { color: var(--ninja-cyan); font-weight: 600; }

.nl-eng__chart { position: relative; grid-column: 4 / 13; min-width: 0; }
/* Отвес «сейчас» стоит по той же сетке, что дорожки: 190px имя + 34px счётчик. */
.nl-eng__chart::after {
  content: ""; position: absolute; top: 26px; bottom: 34px; width: 1px;
  left: calc(224px + (100% - 258px) * (var(--now, 0) + .5) / 24);
  background: linear-gradient(180deg, transparent, rgba(213,95,89,.5) 12%, rgba(213,95,89,.5) 88%, transparent);
  opacity: 0; transition: opacity .6s var(--ease-out) .5s;
}
.nl-eng.is-in .nl-eng__chart::after { opacity: 1; }
.nl-eng__ruler {
  display: grid; grid-template-columns: repeat(24, 1fr); margin-left: 224px; padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nl-eng__ruler i {
  color: rgba(215,229,239,.26); font-size: 8px; font-style: normal; letter-spacing: .06em;
}
.nl-eng__ruler i.is-major { color: rgba(215,229,239,.5); }
.nl-eng__row {
  display: grid; grid-template-columns: 224px 1fr 34px; align-items: center; gap: 0;
  min-height: 42px; border-bottom: 1px solid rgba(255,255,255,.055);
  opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms);
}
.nl-eng.is-in .nl-eng__row { opacity: 1; transform: none; }
.nl-eng__name { padding-right: 22px; }
.nl-eng__name strong { display: block; color: rgba(245,248,251,.9); font: 600 11px/1.3 inherit; letter-spacing: .04em; }
.nl-eng__name small { display: block; margin-top: 3px; color: rgba(215,229,239,.4); font: 400 9.5px/1.4 ui-sans-serif, system-ui, sans-serif; }
.nl-eng__track { display: grid; grid-template-columns: repeat(24, 1fr); align-items: center; height: 100%; }
.nl-eng__track i {
  grid-column: calc(var(--h) + 1); justify-self: center; width: 6px; height: 6px;
  background: var(--ninja-cyan); box-shadow: 0 0 10px rgba(156,184,187,.55);
  transform: scale(0); transition: transform .4s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms + var(--h) * 9ms);
}
.nl-eng.is-in .nl-eng__track i { transform: scale(1); }
.nl-eng__row:hover .nl-eng__track i { background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.6); }
.nl-eng__count { color: rgba(215,229,239,.28); font-size: 9px; text-align: right; letter-spacing: .06em; }
.nl-eng__legend {
  display: flex; justify-content: space-between; margin-left: 224px; padding-top: 14px;
  color: rgba(215,229,239,.28); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
}
.nl-eng__legend strong { color: rgba(215,229,239,.6); font-weight: 600; }

/* ── Акт 07. Инверсия: светлый разворот с обещаниями ────────────────────── */
.nl-claims { padding: 122px 4vw 130px; background: #eef1f3; color: #071014; }
.nl-claims__head { max-width: 1440px; margin: 0 auto 64px; }
.nl-claims__head span { display: block; margin-bottom: 18px; color: #7d8a91; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.nl-claims__head h2 {
  margin: 0; font: 850 clamp(34px, 5vw, 78px)/.9 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.055em; text-transform: uppercase;
}
.nl-claims__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  max-width: 1440px; margin: 0 auto;
}
.nl-claim {
  padding: 34px 36px 40px; border-top: 1px solid rgba(7,16,20,.16); background: #eef1f3;
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity .55s var(--ease-out), transform .6s var(--ease-out), background-color .25s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.nl-claims.is-in .nl-claim { opacity: 1; transform: none; }
.nl-claim:nth-child(2n) { border-left: 1px solid rgba(7,16,20,.16); }
.nl-claim__n { display: block; margin-bottom: 20px; color: #93a0a7; font-size: 10px; letter-spacing: .22em; }
.nl-claim h3 {
  margin: 0; font: 800 clamp(21px, 2.3vw, 34px)/1.03 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.038em;
}
.nl-claim p { margin: 20px 0 0; max-width: 46ch; color: #4d5b62; font: 400 13.5px/1.72 ui-sans-serif, system-ui, sans-serif; }

/* ── Акт 08. Финальный кадр ─────────────────────────────────────────────── */
.nl-final {
  position: relative; min-height: 84svh; display: grid; place-items: center;
  padding: 110px 4vw 70px; background: radial-gradient(circle at 50% 42%, #0a1114 0, #030608 62%);
  text-align: center;
}
.nl-final__in { width: min(760px, 100%); }
.nl-final__kicker { display: block; margin-bottom: 22px; color: var(--ninja-cyan); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.nl-final h2 {
  margin: 0; font: 850 clamp(38px, 6vw, 92px)/.9 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.055em; text-transform: uppercase;
}
.nl-final h2 em { font-style: normal; color: var(--ninja-cyan); }
.nl-final p { max-width: 470px; margin: 28px auto 0; color: var(--ninja-muted); font: 400 14px/1.75 ui-sans-serif, system-ui, sans-serif; }
.nl-final__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; }
.nl-final__btn {
  padding: 15px 26px; color: #03110f; background: var(--ninja-cyan);
  font: 700 11px/1 inherit; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .2s ease, transform .2s var(--ease-out);
}
.nl-final__ghost {
  padding: 15px 26px; border: 1px solid rgba(255,255,255,.16); color: rgba(235,245,250,.72);
  font: 600 11px/1 inherit; letter-spacing: .14em; text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease;
}
.nl-final__foot {
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; margin-top: 74px;
  color: rgba(215,229,239,.26); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .ninja-lab__brand:hover { color: #fff; }
  .ninja-lab__variants-toggle:hover { color: rgba(255,255,255,.82); }
  .ninja-lab__look:not(.is-active):hover { color: #fff; background: rgba(255,255,255,.055); }
  .ninja-lab__controls button:not(.is-active):hover { color: #fff; background: rgba(255,255,255,.07); }
  .ninja-lab__density button:not(.is-active):hover { color: #fff; background: rgba(255,255,255,.07); }
  .ninja-lab__module:hover { background: rgba(11,20,24,.94); box-shadow: inset 0 0 0 1px rgba(156,184,187,.42); }
  .nl-claim:hover { background: #e6eaed; }
  .nl-final__btn:hover { background: #b9d6d9; }
  .nl-final__ghost:hover { color: #fff; border-color: rgba(255,255,255,.4); }
}

@media (max-width: 1180px) {
  .ninja-lab__modules { grid-template-columns: repeat(3, 1fr); }
  .ninja-lab__board { width: min(560px, 62vw); }
  .nl-eng__meta { grid-column: 1 / 5; }
  .nl-eng__chart { grid-column: 5 / 13; }
  .nl-eng__row { grid-template-columns: 168px 1fr 30px; }
  .nl-eng__ruler, .nl-eng__legend { margin-left: 168px; }
  .nl-eng__chart::after { left: calc(168px + (100% - 198px) * (var(--now, 0) + .5) / 24); }
}

@media (max-width: 860px) {
  .nl-claims__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ninja-lab__story { height: 700vh; min-height: 3800px; }
  .ninja-lab__head { height: 64px; padding: 0 20px; }
  .ninja-lab__label { display: none; }
  .ninja-lab__stage::before {
    background: linear-gradient(0deg, rgba(3,6,9,.97) 0, rgba(3,6,9,.74) 34%, transparent 66%);
  }
  .ninja-lab__copy { left: 20px; right: 20px; top: 0; bottom: 0; width: auto; }
  .ninja-lab__beat h1, .ninja-lab__beat h2 { font-size: clamp(38px, 13vw, 62px); }
  .ninja-lab__beat p { margin-top: 18px; max-width: 340px; font-size: 13px; line-height: 1.55; }
  .ninja-lab__metrics, .ninja-lab__flow, .ninja-lab__edges, .ninja-lab__history { margin-top: 16px; }
  .ninja-lab__metrics div { padding: 9px 8px; }
  .ninja-lab__metrics strong { font-size: 10px; }
  .ninja-lab__number { margin-bottom: 14px; }
  .ninja-lab__telemetry { display: none; }
  .ninja-lab__variants { top: 78px; right: 12px; width: 196px; }
  .ninja-lab__variants-grid { max-height: 36vh; }
  .ninja-lab__controls { left: 20px; right: auto; bottom: 30px; max-width: calc(100vw - 40px); }
  .ninja-lab__controls button { padding: 9px 10px; font-size: 8px; }
  .ninja-lab__density { left: 20px; right: auto; bottom: 76px; }
  .ninja-lab__density span { display: none; }
  .ninja-lab__scroll { display: none; }
  /* На телефоне фигура уходит наверх, а не в сторону: доска занимает низ. */
  /* Низ занят кнопками стенда: доска обязана кончиться над ними. */
  .ninja-lab__board { left: 20px; right: 20px; width: auto; top: auto; bottom: 118px; height: 68%; padding: 0; justify-content: flex-end; }
  .ninja-lab__board h2 { font-size: clamp(22px, 6.6vw, 32px); }
  .ninja-lab__board > p { margin-top: 10px; font-size: 11.5px; line-height: 1.5; }
  .ninja-lab__modules { grid-template-columns: repeat(2, 1fr); margin-top: 14px; }
  .ninja-lab__module { padding: 7px 9px 8px; }
  .ninja-lab__module span { font-size: 7.5px; }
  .ninja-lab__module strong { margin: 4px 0 0; font-size: 11px; }
  .ninja-lab__module small { display: none; }
  .ninja-lab__board-foot { display: none; }
  .ninja-lab__scrim { background: linear-gradient(0deg, rgba(2,3,4,.985) 0, rgba(2,3,4,.92) 62%, rgba(2,3,4,.3) 82%, transparent 96%); }
  .nl-eng { padding: 78px 20px 86px; }
  .nl-eng__in { grid-template-columns: 1fr; }
  .nl-eng__meta, .nl-eng__chart { grid-column: 1 / 2; }
  .nl-eng__chart { margin-top: 44px; }
  .nl-eng__chart::after { display: none; }
  .nl-eng__row { grid-template-columns: 1fr 34px; grid-template-areas: "name count" "track track"; padding: 12px 0; }
  .nl-eng__name { grid-area: name; padding-right: 0; }
  .nl-eng__count { grid-area: count; }
  .nl-eng__track { grid-area: track; height: 22px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.06); }
  .nl-eng__ruler, .nl-eng__legend { margin-left: 0; }
  .nl-eng__legend { flex-direction: column; gap: 6px; }
  .nl-claims { padding: 78px 20px 84px; }
  .nl-claims__head { margin-bottom: 38px; }
  .nl-claim { padding: 26px 22px 30px; }
  .nl-claim:nth-child(2n) { border-left: 0; }
  .nl-final { padding: 84px 20px 60px; }
  .nl-final__foot { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ninja-lab__noise { animation: none; }
  .ninja-lab__beat { will-change: auto; }
  /* Без движения оба акта складываются: доска модулей просто видна сразу. */
  .ninja-lab__story { height: 100svh; min-height: 620px; }
  .nl-eng__rules i, .nl-eng__row, .nl-eng__track i, .nl-claim, .ninja-lab__module { transform: none; opacity: 1; transition: none; }
  .ninja-lab__scroll { display: none; }
  .ninja-lab__variants-grid { transition: opacity .2s var(--ease-out); transform: none; }
}
}