/* Hallmark · macrostructure: Feature Stack · второй экран главной «Уже работает у клиентов» (досье)
 * genre: atmospheric · theme: «Ночь 2» (токены css/noch2-tokens.css, область .n2) · tone: warm-precise · anchor hue: 42
 * Перенос 08.10.2026 из артборда «Досье» (версия 88, утверждена владельцем).
 * Переключатели холста перенесены выбором владельца: start=mtg, bg=blur с кадром «серверная» 0,35, сцены живые,
 * прокрутка МТГ 20 с, столб света раскрыт на 95% и ведётся прокруткой через view().
 * Приёмы: J5 паспорт на волосяных линиях, J6 число + подпись, J10 сцена играет один раз (петля только у МТГ, и та
 * останавливается), J11 лента чипов на телефоне, J12 кусок живого интерфейса вёрсткой, A3 акцент на действии и числе.
 * Состояния: .is-arm = есть скрипт и движение разрешено; .is-go = досье в кадре (сцена запускается); .is-vis = досье на экране
 * (курсор строки ввода мигает только тогда); .is-mtg = идёт прокрутка МТГ. Без .is-arm виден итог каждой сцены.
 * Отличия от холста: overflow секции не режет ореол столба по вертикали (на холсте .pg { overflow: clip } давал шов),
 * столб в корневом слое наложения (screen по первому экрану), на ≤1199 высота досье при смене работы плавная. */

/* ─── секция: поле «Ночи 2», кадр «серверная» полупрозрачно, зерно ─── */
.wk {
  --wt: clamp(140px, 13.9vw, 200px);   /* верхнее поле: в нём идёт столб света с первого экрана */
  --t0: 0s;                            /* задержка такта сцены: у каждой реплики своя (style), вложенные наследуют такт родителя */
  --el-lag: .15s;                      /* вспышка кромки после выбора работы */
  position: relative;                  /* без z-index: столб (z 2) должен лечь поверх первого экрана в корневом слое */
  overflow-x: clip;                    /* по горизонтали режем озеро света 1520 px; по вертикали ореол свободно заходит на первый экран */
  padding: var(--wt) var(--pad-x) 112px;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-text)/1.5 var(--ff-body);
}
.wk *, .wk *::before, .wk *::after { box-sizing: border-box; }
.wk a { color: inherit; }
.wk a:focus-visible, .wk button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:where(.wk) p, :where(.wk) ul, :where(.wk) dl { margin: 0; }
.wk .nw { white-space: nowrap; }

.bgp { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bgp__img {
  position: absolute; top: 0; left: -12px; width: calc(100% + 24px); max-width: none; height: auto; aspect-ratio: 1600 / 893;
  object-fit: cover; object-position: 100% 50%;
  filter: blur(3px); opacity: .35;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 68%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 68%, transparent 100%);
}
.wk-grain { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .1; mix-blend-mode: overlay; pointer-events: none; }

.wk .wrap { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(32px, 4.4vw, 64px); align-items: start; }
.wk .h2 { margin: 0; font: 600 var(--fs-h2)/1.1 var(--ff-display); letter-spacing: -.03em; }
.wh__s { margin: 16px 0 0; max-width: 30ch; color: var(--mute); }

/* ─── левая колонка: заголовок, список работ с миниатюрами, строка ввода; липкая, пока рядом идёт досье ─── */
.side { position: relative; z-index: 3; align-self: stretch; }
.side__run { position: static; }
/* липкий список только с 1200: там все работы в одной ячейке и высота досье не меняется. На 1001–1199 список (900 px)
   выше окна ноутбука и при смене работы ехал вслед за нижней кромкой досье на 160–350 px под курсором (замер 1024×768) */
@media (min-width: 1200px) { .side__run { position: sticky; top: 32px; } }
.sw { margin: 40px 0 0; padding: 0; list-style: none; }
.sw li + li { margin-top: 4px; }
.sw__b {
  display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: 0 20px;
  width: 100%; padding: 10px 16px 10px 10px; border: 0; border-radius: var(--r-win);
  background: transparent; color: var(--dim); font: 600 var(--fs-lead)/1.3 var(--ff-body); text-align: left; cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sw__b small { display: block; margin-top: 2px; font-size: var(--fs-small); font-weight: 400; color: var(--mute); }
.sw__b:active { background: var(--press); }
.sw__b[aria-selected="true"] { background: var(--pl-fill); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.tm { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 12px; background: linear-gradient(180deg, var(--win-top), var(--win-bot)); box-shadow: inset 0 0 0 1px var(--line); opacity: .5; filter: saturate(.55); transition: opacity var(--dur-ui) var(--ease), filter var(--dur-ui) var(--ease); }
.sw__b[aria-selected="true"] .tm { opacity: 1; filter: none; box-shadow: inset 0 0 0 1px var(--edge-warm); }
.tm img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tm__u { position: absolute; z-index: 1; left: 8px; right: 30px; top: 7px; height: 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg) 70%, transparent); }

/* строка ввода в стиле чата (решение владельца 08.10): не форма, одна ссылка к #talk */
.invite { margin: 32px 0 0; }
.wask { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 20px; border-radius: var(--r-pill); background: var(--pl-fill); box-shadow: inset 0 0 0 1px var(--line); color: var(--mute); text-decoration: none; transition: box-shadow var(--dur-ui) var(--ease); }
.wask__f { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wask__c { display: inline-block; width: 2px; height: 1.15em; margin: 0 3px -.2em 0; background: var(--accent); }
.wask__go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); transition: transform var(--dur-ui) var(--ease); }
.wask:active .wask__go { transform: scale(.94); }
.wask__n { margin: 12px 0 0 20px; font-size: var(--fs-small); color: var(--mute); }
@keyframes kblink { 50% { opacity: 0; } }
.is-arm.is-vis .wask__c { animation: kblink var(--dur-blink) steps(1, end) 6; }   /* мигает шесть раз, когда досье пришло в кадр, и стоит: ниже первого экрана в покое бесконечного нет (J10, проверка 0.4.1) */
/* невысокое окно ноутбука: список со строкой ввода целиком в окне, иначе он липнет всего ~140 px, а строка ввода всё
   это время за нижней кромкой (замер 08.10: колонка 907–922 px при окне 720–900). Миниатюры меньше, текст тот же */
@media (min-width: 1200px) and (max-height: 959px) {
  .sw__b { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (min-width: 1200px) and (max-height: 879px) {
  .side__run { top: 24px; }
  .sw { margin-top: 24px; }
  .sw__b { grid-template-columns: 84px minmax(0, 1fr); gap: 0 16px; padding: 6px 16px 6px 6px; }
  .tm { border-radius: 8px; }
  .invite { margin-top: 20px; }
}

/* ─── досье: все работы в одной ячейке на ≥1200 (высота = самая высокая, при переключении ничего не прыгает) ─── */
.dsw { position: relative; overflow-anchor: none; }
/* обрезка на время плавной высоты через clip-path, а не overflow: clip. iOS Safari после overflow: clip у предка движущегося
   слоя (кадр МТГ, ролик планировщика) переставал отдавать свайп ленте вкладок: лента замирала до перезагрузки (25.10.2026) */
.dsw.is-sizing { clip-path: inset(-24px); transition: height var(--dur-height) var(--ease); }
.ds { position: relative; margin: 0; }
.js .dsw > .ds:not(.on) *, .js .dsw > .ds:not(.on) *::before, .js .dsw > .ds:not(.on) *::after { animation: none !important; transition: none !important; }
.js .dsw > .ds:not(.on) { display: none; }
@media (min-width: 1200px) {
  .js .dsw { display: grid; }
  .js .dsw > .ds { grid-area: 1 / 1; }
  .js .dsw > .ds:not(.on) { display: block; visibility: hidden; }
}
html:not(.js) .sw, html:not(.js) .invite { display: none; }   /* без скрипта переключать нечем: пять работ идут подряд */
html:not(.js) .ds + .ds { margin-top: 80px; }
.stage { position: relative; }
.pcap { position: relative; z-index: 3; margin: 24px 0 0 4px; font-size: var(--fs-small); color: var(--mute); }

/* сцена: окно одного вида на все работы (лестница радиусов: окно 24 → плашка 16 → кнопка 12 → чип пилюлей) */
.sc { position: relative; z-index: 3; display: flex; flex-direction: column; min-height: 440px; 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); }
.sc::before { content: ""; position: absolute; z-index: 3; 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; }
.sc__hd { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; min-height: 52px; padding: 12px 24px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--mute); }
.who { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-note); font-weight: 600; color: var(--ink); }
.ava { flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--hot), var(--lit) 55%, var(--surface) 100%); }
.sc__bd { flex: 1; display: flex; flex-direction: column; padding: 24px; }
.wk .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; }

/* плашки сообщений: клиент справа, помощник слева, разница только в заливке (как на первом экране) */
.wk .b { position: relative; max-width: 84%; padding: 12px 16px 10px; border-radius: var(--r-pl); border: 1px solid var(--line); background: var(--fill-a); line-height: 1.45; }
.wk .b--q { align-self: flex-end; background: var(--fill-q); }
.chat { gap: 10px; }
.slot { position: relative; align-self: stretch; display: flex; flex-direction: column; }
.slot + .b--q { margin-top: 12px; }
.typ { position: absolute; left: 0; top: 0; display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: var(--r-pl); border: 1px solid var(--line); background: var(--fill-a); opacity: 0; }
.typ i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); }
.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); }
.src b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.src svg { color: var(--lit); }
.hand { display: flex; align-items: center; gap: 12px; margin: 4px 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); }
.hand__i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fill-q); color: var(--lit); }
.hand b { display: block; color: var(--ink); font-weight: 600; }

/* МТГ: окно браузера, длинный кадр сайта едет один раз вниз и стоит на «Технике с экипажем» (y 2930 из 5625 = 52,1%) */
.sc--mtg { --stop: 52.1%; min-height: 0; aspect-ratio: 16 / 10.5; }
.wbar { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.url { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 360px; flex: 1; height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--fill-q); font-size: var(--fs-small); color: var(--dim); }
.url svg { flex: none; color: var(--mute); }
.vp { position: relative; flex: 1; overflow: hidden; border-radius: 0 0 23px 23px; background: var(--shade); }
.rail { position: absolute; inset: 0; }
.rail img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; transform: translateY(calc(-1 * var(--stop))); }
.vp .thumb { position: absolute; z-index: 2; right: 5px; top: 0; width: 4px; height: 10%; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 38%, transparent); transform: translateY(521%); }

/* Директ: сообщения команды агентов с кнопками, справа внизу запись памяти */
.ads { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tg, .ads__r { display: flex; flex-direction: column; gap: 10px; }
.ads__r { align-self: end; }
.tg .b, .ads__r .b { max-width: 100%; }
.phr { margin: 8px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.phr li { white-space: nowrap; padding: 2px 10px; border-radius: var(--r-pill); background: var(--fill-q); font-size: var(--fs-small); color: var(--dim); }
.kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kbb { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-btn); background: var(--fill-q); font-size: var(--fs-note); font-weight: 600; text-align: center; overflow: hidden; }
.kbb__f { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--hl); box-shadow: inset 0 0 0 1px var(--lit); }
.kbb svg { flex: none; color: var(--lit); }
.kbb__t { display: inline-flex; align-items: center; gap: 8px; }
.wk .ag { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; font-size: var(--fs-small); font-weight: 600; color: var(--dim); }
.ag .ts { float: none; margin: 0; }
.wk .b--mem { border-style: dashed; border-color: var(--line-strong); }
.wk .mem { margin: 6px 0 0; font-size: var(--fs-small); color: var(--mute); }
.wk .b--sys { align-self: flex-start; font-size: var(--fs-note); color: var(--dim); }

/* работа роликом (база площадок, планировщик склада): окно как у МТГ, механизм один на все ролики, работа подключает его
   модификатором .sc--vid. Ролик стартует при открытии работы и стоит на последнем кадре; без движения (или если браузер
   не дал запуск) вместо ролика финальный кадр. 1280×840 = 16:10,5, телефон 4:5. Пропорции задаёт окно ролика (.vp), а не
   всё окно со строкой адреса: раньше строка съедала 52 px высоты, cover резал низ кадра, и на 390 и 1024 пропадали
   финальные «Готово» и «Ответить» планировщика (аудит 22.10). Теперь кадр целиком на любой ширине */
.sc--vid { min-height: 0; }
.sc--vid .vp { flex: none; aspect-ratio: 1280 / 840; }
.evv, .evs { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; background: var(--shade); }
.evv--m, .evs--m, .evs--d { display: none; }
.wk:not(.is-arm) .evv, .ev-still .evv { display: none; }
.wk:not(.is-arm) .evs--d, .ev-still .evs--d { display: block; }
/* до 1399 px окно ролика уже 809 px, и в горизонтальном кадре основной текст мельче 9 px: у базы площадок 14,3 px кадра
   × 806 / 1280 = 9,0 (на 1366 вышло 8,8), у планировщика 15,1 px (на 1024 было 7,0, на 1200 8,2). Там вертикальный вариант
   800×1000 (27 px кадра). Окно 4:5 не выше 80% экрана: ширина не больше 64svh (на 1024×768 это 491 px, сцена 614 из 768);
   прижато влево, как подпись под ним и паспорт */
@media (max-width: 1399px) {
  .sc--vid { width: min(100%, calc(64svh - 42px)); }   /* высота окна та же, что была (80svh): 42 px = строка адреса × 0,8 */
  .sc--vid .vp { aspect-ratio: 4 / 5; }
  .evv--d { display: none; }
  .evv--m { display: block; }
  .wk:not(.is-arm) .evs--d, .ev-still .evs--d { display: none; }
  .wk:not(.is-arm) .evs--m, .ev-still .evs--m { display: block; }
}

/* паспорт: таблица «детали» на волосяных линиях (J5) */
.pp, .act { position: relative; z-index: 3; }
.pp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); margin: 32px 0 0; border-top: 1px solid var(--line); }
.pp dt, .pp dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pp dt { padding-right: 20px; font-size: var(--fs-small); color: var(--mute); line-height: 1.6; }
.pp dd { color: var(--ink); text-wrap: pretty; }
.pp .dd-n { padding: 18px 0; }
.n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.n__v { font: 300 var(--fs-num)/1 var(--ff-display); letter-spacing: -.035em; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.n__c { color: var(--dim); }
.wk .hd { margin: 0; font-size: var(--fs-lead); line-height: 1.35; font-weight: 600; text-wrap: balance; }
.act { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 28px 0 0; }
.ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 600; text-decoration: none; white-space: nowrap; transition: box-shadow var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease); }
.ghost:active { background: var(--press); }
.ghost svg { transition: transform var(--dur-ui) var(--ease); }
.lnk { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--dim); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.lnk:active { color: var(--accent); }

/* ─── движение сцен: .is-arm = есть скрипт и движение разрешено, .is-go = досье в кадре. Без .is-arm анимаций нет, виден итог ─── */
@keyframes kin { from { opacity: 0; transform: translateY(10px); } }
@keyframes kfade { from { opacity: 0; } }
@keyframes ktyp { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kdot { from { opacity: .3; } }
@keyframes kpress { 40% { transform: scale(.95); } }
/* прокрутка МТГ: стоит наверху, едет вниз и остаётся на «Технике с экипажем»; конец берётся из базового transform */
@keyframes kscr { 0%, 6% { transform: translateY(0); } }
@keyframes ktm { from { transform: scale(1.08); } }

.is-arm .k-in { animation: kin var(--dur-scene) var(--ease) var(--t0) both; }
.is-arm .k-fade { animation: kfade var(--dur-scene) var(--ease) var(--t0) both; }
.is-arm .k-typ { animation: ktyp var(--dur-type) var(--ease-io) var(--t0) both; }
.is-arm .k-typ i { animation: kdot var(--dur-dot) var(--ease-io) var(--t0) 4 alternate both; }
.is-arm .k-typ i + i { animation-delay: calc(var(--t0) + var(--dur-dot) / 3); }
.is-arm .k-typ i + i + i { animation-delay: calc(var(--t0) + var(--dur-dot) * 2 / 3); }
.is-arm .k-press { animation: kpress var(--dur-scene) var(--ease) var(--t0) both; }
.is-arm .rail img, .is-arm .vp .thumb { animation: kscr var(--dur-mtg) var(--ease-io) both paused; }   /* 20 с: рычаг mtgSec, выбор владельца */
.is-arm.is-mtg .rail img, .is-arm.is-mtg .vp .thumb { animation-play-state: running; }
.is-arm .sw__b[aria-selected="true"] .tm img { animation: ktm var(--dur-fill) var(--ease) both; }
/* досье ещё не в кадре: сцена стоит в первом кадре и ждёт */
.is-arm:not(.is-go) .ds [class*="k-"], .is-arm:not(.is-go) .ds .k-typ i { animation-play-state: paused; }

/* ─── СТОЛБ СВЕТА НА СТЫКЕ С ПЕРВЫМ ЭКРАНОМ (Huly): слои градиентов, screen, без canvas. Раскрытие 95%, по прокрутке его ведёт view().
   Столб лежит в корневом слое наложения (у секции и колонок нет z-index), z 2 поверх первого экрана (у него z 1):
   ореол заходит на первый экран на 220 px и складывается с его огнями экраном, без горизонтального шва ─── */
.pil { --px: 50%; --pp: .95; position: absolute; z-index: 2; top: calc(-1 * var(--wt)); left: 0; right: 0; height: calc(var(--wt) + 760px); pointer-events: none; mix-blend-mode: screen; }
.pil > span { position: absolute; display: block; }
.pil__halo { left: calc(var(--px) - 600px); top: -220px; width: 1200px; height: 440px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--lit) 50%, transparent), color-mix(in srgb, var(--moon) 16%, transparent) 55%, transparent); opacity: calc(.2 + .8 * var(--pp)); }
/* луч и нить начинаются над швом и проявляются из темноты за 80 и 60 px: на холсте они стартовали ровно на шве, и блюр
   прямоугольника давал на стыке ступень яркости (замер 08.10: 6,1 L* между соседними строками под столбом на 1440) */
.pil__beam { left: calc(var(--px) - 120px); top: -80px; width: 240px; height: calc(var(--wt) + 160px); background: linear-gradient(180deg, color-mix(in srgb, var(--lit) 80%, transparent), color-mix(in srgb, var(--lit) 50%, transparent) 60%, color-mix(in srgb, var(--moon) 20%, transparent)); -webkit-mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent), linear-gradient(180deg, transparent, #000 80px); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent), linear-gradient(180deg, transparent, #000 80px); mask-composite: intersect; filter: blur(14px); transform-origin: 50% 0; transform: scaleY(calc(.15 + .85 * var(--pp))); opacity: calc(.25 + .75 * var(--pp)); }
.pil__core { left: calc(var(--px) - 1.5px); top: -60px; width: 3px; height: calc(var(--wt) + 70px); border-radius: 2px; background: linear-gradient(180deg, transparent, var(--ink) 60px, var(--lit) 60%, var(--lit)); box-shadow: 0 0 14px var(--edge-warm); transform-origin: 50% 0; transform: scaleY(calc(.1 + .9 * var(--pp))); opacity: calc(.3 + .7 * var(--pp)); }
.pil__hit { left: calc(var(--px) - 420px); top: calc(var(--wt) - 80px); width: 840px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--lit) 52%, transparent), color-mix(in srgb, var(--moon) 14%, transparent) 55%, transparent); transform: scale(calc(.4 + .6 * var(--pp))); opacity: var(--pp); }
.pil__pool { left: calc(var(--px) - 760px); top: calc(var(--wt) - 40px); width: 1520px; height: 900px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--lit) 14%, transparent), color-mix(in srgb, var(--moon) 9%, transparent) 50%, transparent); transform: scale(calc(.7 + .3 * var(--pp))); opacity: var(--pp); }
@keyframes pil-halo { from { opacity: .2; } }
@keyframes pil-beam { from { transform: scaleY(.2); opacity: .25; } }
@keyframes pil-core { from { transform: scaleY(.1); opacity: .3; } }
@keyframes pil-pool { from { transform: scale(.7); opacity: 0; } }
@keyframes pil-hit { from { transform: scale(.4); opacity: 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pil { view-timeline: --pil block; }
    .pil__halo { opacity: 1; animation: pil-halo linear both; animation-timeline: --pil; animation-range: entry 0% entry 100%; }
    .pil__beam { transform: none; opacity: 1; animation: pil-beam linear both; animation-timeline: --pil; animation-range: entry 0% entry 100%; }
    .pil__core { transform: none; opacity: 1; animation: pil-core linear both; animation-timeline: --pil; animation-range: entry 0% entry 100%; }
    .pil__pool { transform: none; opacity: 1; animation: pil-pool linear both; animation-timeline: --pil; animation-range: entry 20% cover 45%; }
    .pil__hit { transform: none; opacity: 1; animation: pil-hit linear both; animation-timeline: --pil; animation-range: entry 40% entry 100%; }
  }
}

/* шов с первым экраном: тень окна переписки первого экрана (0 50px 110px) доходила до его нижнего края и обрезалась
   overflow: clip, отсюда полоса темнее на 5–6 единиц синего строго по шву (390, 08.10). По вертикали тень теперь
   выходит на верх досье и гаснет сама; по горизонтали первый экран режется, как раньше */
.hero.nh.n2 { overflow-y: visible; }

/* ─── электрическая кромка окна сцены (Electric Border): вспышка ~2,6 с при выборе работы, в покое ровное тихое свечение ─── */
.el { position: absolute; z-index: 4; inset: -10px; pointer-events: none; }
.el__calm { position: absolute; inset: 10px; border-radius: var(--r-win); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lit) 40%, transparent), 0 0 24px color-mix(in srgb, var(--lit) 14%, transparent); }
.el__z { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; will-change: opacity; }
.el__z rect { x: 10px; y: 10px; width: calc(100% - 20px); height: calc(100% - 20px); rx: 24px; fill: none; stroke: var(--lit); stroke-width: 1.6; }
.el__run { position: absolute; inset: 10px; overflow: hidden; border-radius: var(--r-win); padding: 1.5px; opacity: 0; -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); }
.el__spin { position: absolute; left: 50%; top: 50%; width: 1040px; height: 1040px; margin: -520px 0 0 -520px; background: conic-gradient(from 0deg, transparent 0 74%, color-mix(in srgb, var(--lit) 70%, transparent) 90%, var(--ink) 95%, transparent 98%); }
@keyframes kela { 0% { opacity: 0; } 8% { opacity: 1; } 30% { opacity: .35; } 50% { opacity: .9; } 100% { opacity: 0; } }
@keyframes kelb { 0% { opacity: 0; } 18% { opacity: .9; } 40% { opacity: .3; } 62% { opacity: .75; } 100% { opacity: 0; } }
@keyframes kelr { 0% { opacity: 0; } 10%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kels { from { transform: rotate(0deg); } to { transform: rotate(1turn); } }
.is-arm .k-ela { animation: kela var(--dur-flash) var(--ease-io) var(--el-lag) both; }
.is-arm .k-elb { animation: kelb var(--dur-flash) var(--ease-io) var(--el-lag) both; }
.is-arm .k-elr { animation: kelr var(--dur-flash) var(--ease-io) var(--el-lag) both; }
.is-arm .k-els { animation: kels var(--dur-flash) var(--ease-io) var(--el-lag) both; }
.is-key .el__run, .is-key .el__z { animation: none !important; opacity: 0; }   /* выбор с клавиатуры: только ровное свечение */

/* ─── наведение только у мыши; движение наведением только без «уменьшить движение» ─── */
@media (hover: hover) and (pointer: fine) {
  .sw__b:hover { color: var(--ink); }
  .lnk:hover { color: var(--ink); text-decoration-color: var(--ink); }
  .ghost:hover, .wask:hover { box-shadow: inset 0 0 0 1px var(--ink); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sw__b:not([aria-selected="true"]):hover { background: var(--fill-q); }
  .ghost:hover svg { transform: translateX(4px); }
  .wask:hover .wask__go { transform: translateY(-2px); }
}

/* ─── ≤1000: одна колонка, переключатель лентой текстовых чипов (J11), следующий выглядывает; миниатюр и строки ввода нет ─── */
@media (max-width: 1000px) {
  .wk { --wt: 72px; padding: var(--wt) var(--pad-x) 80px; }
  .wk .wrap { grid-template-columns: minmax(0, 1fr); }
  .sw { display: flex; gap: 8px; overflow-x: auto; margin: 24px calc(-1 * var(--pad-x)) 0; padding: 0 var(--pad-x) 4px; scrollbar-width: none; scroll-padding-inline: var(--pad-x); }
  .sw::-webkit-scrollbar { display: none; }
  .sw li + li { margin-top: 0; }
  .sw__b { display: block; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); white-space: nowrap; font-size: var(--fs-note); box-shadow: inset 0 0 0 1px var(--line); }
  .sw__b small, .tm, .invite { display: none; }
  .dsw { margin-top: 20px; }
  .el__run, .el__z { display: none; }   /* ≤1000: только ровное свечение, без треска (решение владельца 08.10) */
  .pp { grid-template-columns: minmax(0, 1fr); }
  .pp dt { padding: 12px 0 0; border-bottom: 0; }
  .pp dd { padding: 2px 0 12px; }
}
@media (max-width: 700px) {
  .bgp__img { aspect-ratio: auto; height: 1100px; }
  .sc { min-height: 0; border-radius: 20px; }
  .vp { border-radius: 0 0 19px 19px; }
  .el__calm, .el__run { border-radius: 20px; }
  .pil { top: -20px; height: 700px; }
  .pil > .pil__halo, .pil > .pil__pool { display: none; }
  .pil__beam, .pil__core { top: 0; height: 40px; }
  .pil__beam { -webkit-mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
  .pil__core { background: linear-gradient(180deg, var(--ink), var(--lit) 55%, var(--lit)); }
  .pil__hit { top: -16px; width: 300px; left: calc(var(--px) - 150px); height: 72px; opacity: calc(.6 * var(--pp)); }
  .sc__hd { padding: 10px 16px; }
  .sc__bd { padding: 16px; }
  .wk .b { max-width: 92%; font-size: var(--fs-note); }
  .sc--mtg { aspect-ratio: 4 / 5; }
  .ads { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .n__v { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .sw__b, .ghost, .ghost svg, .wask, .wask__go, .tm, .dsw.is-sizing { transition: none; }
}

/* ─── 23.10.2026, разбор с телефона (п. 1 и 2): на ≤767 у ИИ-помощника одна пара «вопрос про устройства / ответ по базе».
   Пара про деньги и карточка «к человеку» на телефоне не показываются: передачу менеджеру уже показало окно первого экрана,
   два чата подряд были 2,1 экрана. Окно больше не стоит пустым до конца показа: вопрос и ответ видны сразу, показ один,
   метка «по базе · 02 устройства» проявляется (было: 536 px пустой рамки из 620 до середины показа) ─── */
@media (max-width: 767px) {
  #work-ai .chat > .slot ~ .b--q, #work-ai .chat > .slot ~ .slot, #work-ai .chat > .hand, #work-ai .chat .typ { display: none; }
  .is-arm #work-ai .chat > .b--q.k-in, .is-arm #work-ai .chat .slot > .b.k-in { animation: none; }
  .is-arm #work-ai .chat .src.k-fade { animation-delay: .5s; }
}