/* V-93: бандл стилей «Рабочего стола» — те же файлы в том же порядке, одним запросом.
   Источники: kreativ/motion.css, kreativ/kr.css, kreativ/kr-b.css, kreativ/kr2.css, kreativ/kr3-d.css, kreativ/kr3-drum.css, scenes/scenes.css, scenes/sozdanie.css, scenes/razbor.css, scenes/kreativ.css (менять синхронно, сборка — вручную конкатенацией). */
/* ─── kreativ/motion.css ─── */
/* Движение креатив-вариантов LegalDocs — ВСЁ редактируется здесь, одной строкой.
   Вкл/выкл: 1 — включено, 0 — выключено (умножается на амплитуду/длительность).
   Щадящий режим (prefers-reduced-motion) обнуляет всё внизу файла — его не трогать. */
:root {
  /* Общая кривая входа (свод 6.1) и кривая «печать ставится» */
  --kr-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --kr-ease-stamp: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Прорисовка линий иллюстраций (A, C): длительность одной линии и шаг между линиями */
  --kr-draw-on: 1;            /* 0 — линии видны сразу */
  --kr-draw-dur: 1100ms;
  --kr-draw-step: 90ms;
  /* «Оживающие» детали: капля, печать, клапан конверта — один раз после прорисовки */
  --kr-detail-on: 1;
  --kr-detail-delay: 900ms;
  --kr-detail-dur: 520ms;
  --kr-drop-fall: 22px;       /* на сколько падает капля */

  /* Мозаика «дышит»: пустые клетки меняют тон; число повторов конечно (свод 6.11, ≤ 5 с) */
  --kr-mos-on: 1;
  --kr-mos-min: 800ms;        /* самая быстрая клетка */
  --kr-mos-max: 1500ms;       /* самая медленная клетка */
  --kr-mos-repeat: 3;         /* сколько раз «вдохнёт» и замрёт */
  --kr-mos-depth: .55;        /* насколько темнеет клетка на вдохе, 0…1 */

  /* Карточки: проявление миниатюры документа при наведении */
  --kr-hover-on: 1;
  --kr-hover-dur: 180ms;
  --kr-hover-lift: -4px;      /* подъём карточки */

  /* Частые вопросы: раскрытие по высоте */
  --kr-faq-open: 200ms;
  --kr-faq-close: 140ms;

  /* Окно сноски: увеличение 0,96 → 1 */
  --kr-note-dur: 260ms;
  --kr-note-from: .96;

  /* Появление блоков при прокрутке */
  --kr-rise-dur: 420ms;
  --kr-rise-shift: 16px;

  /* «Живые» цифры: счёт до значения (цены, сроки) */
  --kr-count-on: 1;
  --kr-count-dur: 700ms;      /* читает kr.js */

  /* B. Предметы: наклон от мыши, параллакс, раскладка стопки */
  --kr-tilt-on: 1;
  --kr-tilt-max: 6;           /* градусов, не больше 6 */
  --kr-par-on: 1;
  --kr-par-amp: 14;           /* пикселей сдвига на высоту экрана */
  --kr-fan-dur: 700ms;
  --kr-fan-delay: 300ms;

  /* kreativ2-1. Веер документов: насколько разъезжаются листы и за сколько */
  --kr2-fan-on: 1;
  --kr2-fan-dur: 900ms;
  --kr2-fan-step: 110ms;      /* задержка между листами */
  /* kreativ2-2. Лента видов: время полного круга (больше — медленнее) */
  --kr2-tape-on: 1;
  --kr2-tape-dur: 60s;
  /* kreativ2-3. Полоса фактов: шаг появления колонок */
  --kr2-facts-step: 120ms;

  /* Барабан действий: переход активной строки, высота строки, бледность соседей */
  --kr3-drum-dur: 260ms;
  --kr3-drum-row: 84px;
  --kr3-drum-near: .55;       /* соседи ±1 */
  --kr3-drum-far: .25;        /* соседи ±2 */
  --kr3-drum-wheel-gap: 160ms;/* не чаще одного шага колёсиком */
  /* Рабочий стол: листы-блоки выезжают на стол при появлении */
  --kr3-desk-shift: 28px;
  --kr3-desk-dur: 520ms;
  --kr3-desk-tilt: .15;       /* поворот листов-блоков, градусов (0 — ровно) */
  --kr3-desk-tape: .6;        /* заметность полоски скотча, 0…1 */

  /* Мягкий барабан (kreativ3): лента по кругу */
  --kr3-dr-dur: 520ms;                       /* переход строки */
  --kr3-dr-ease: cubic-bezier(.22, .61, .36, 1);
  --kr3-dr-near: .45;                        /* прозрачность ±1 */
  --kr3-dr-far: .2;                          /* прозрачность ±2 */
  --kr3-dr-scale1: .909;                     /* 40 px от 44 */
  --kr3-dr-scale2: .818;                     /* 36 px от 44 */
  --kr3-dr-show: 220ms;                      /* появление цены и кнопки */
  --kr3-dr-px: 70;                           /* тачпад и перетаскивание: пикселей на строку (читает JS) */
  --kr3-dr-settle: 280;                      /* мс доводки к ближайшей строке после жеста (читает JS) */
  --kr3-dr-click: 240;                       /* мс поворота на щелчок колеса, стрелку, клик (читает JS) */
  --kr3-dr-idle: 120;                        /* мс без событий — жест окончен (читает JS) */
}
@media (prefers-reduced-motion: reduce) {
  :root { --kr-draw-on: 0; --kr-detail-on: 0; --kr-mos-on: 0; --kr-hover-on: 0; --kr-count-on: 0;
    --kr-tilt-on: 0; --kr-par-on: 0; --kr-faq-open: 0ms; --kr-faq-close: 0ms; --kr-note-dur: 0ms;
    --kr-rise-dur: 0ms; --kr-fan-dur: 0ms; --kr2-fan-on: 0; --kr2-tape-on: 0; --kr2-fan-dur: 0ms; --kr3-drum-dur: 0ms; --kr3-desk-shift: 0px; --kr3-desk-dur: 0ms; --kr3-dr-dur: 0ms; --kr3-dr-show: 0ms; --kr-draw-dur: 0ms; --kr-detail-dur: 0ms; }
}

/* ─── kreativ/kr.css ─── */
/* Общее для трёх вариантов креатива. Числа движения — только из motion.css. */
:root { interpolate-size: allow-keywords; }

/* --- Прорисовка линий: класс d + pathLength=1 --- */
.kr-js [data-kr] .d { stroke-dasharray: 1; stroke-dashoffset: var(--kr-draw-on); }
.kr-js [data-kr].kr-on .d { stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--kr-draw-dur) var(--kr-ease) calc(var(--i, 0) * var(--kr-draw-step)); }
.kr-js [data-kr] .kr-det { opacity: calc(1 - var(--kr-detail-on)); }
.kr-js [data-kr].kr-on .kr-det { opacity: 1; transition: opacity 200ms linear var(--kr-detail-delay); }

/* --- Мозаика: пустые клетки «дышат» конечное число раз --- */
.kr-mos-wrap { padding-top: 56px; }
.kr-mos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 56px; gap: 8px; }
.kr-q { position: relative; border-radius: 8px; background: var(--kr-cell, var(--tint)); display: grid; place-items: center; color: var(--action); overflow: hidden; }
.kr-q::after { content: ''; position: absolute; inset: 0; background: var(--kr-cell-deep, var(--edge-quiet)); opacity: 0; }
.kr-mos.kr-on .kr-q:not(.kr-q--i):not(.kr-q--big)::after {
  animation: krBreath calc(var(--kr-mos-min) + (var(--kr-mos-max) - var(--kr-mos-min)) * var(--f)) ease-in-out var(--dl) var(--kr-mos-repeat) both; }
@keyframes krBreath { 50% { opacity: calc(var(--kr-mos-depth) * var(--kr-mos-on)); } }
.kr-q--i { background: var(--sheet); border: 1px solid var(--rule); }
.kr-q svg { width: 28px; height: 28px; }
@media (max-width: 760px) {
  .kr-mos { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 44px; gap: 6px; }
  .kr-q:nth-child(n+13) { display: none; }
  .kr-mos-wrap { padding-top: 40px; }
}

/* --- Ситуации: картинка вверху карточки, миниатюра документа --- */
.kr-ill { position: relative; display: block; height: 96px; margin: -4px 0 16px; color: var(--action); }
.kr-ill .kr-svg { position: absolute; left: 0; top: 0; width: 160px; height: 96px; }
.kr-mini { position: absolute; right: 0; top: 0; width: 72px; height: 92px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: var(--shadow-float); padding: 10px 8px; display: flex; flex-direction: column; gap: 5px; font: 600 7px/1 var(--font-doc); letter-spacing: .06em; color: var(--ink); }
.kr-mini b { text-align: center; margin-bottom: 3px; }
.kr-mini i { display: block; height: 2px; border-radius: 1px; background: var(--edge-quiet); }
.kr-mini i:nth-of-type(2n) { width: 72%; }
/* телефон: миниатюра видна сразу, справа от рисунка; курсор: проявляется при наведении */
@media (hover: hover) and (pointer: fine) {
  .kr-mini { opacity: calc(1 - var(--kr-hover-on)); transform: translateY(calc(8px * var(--kr-hover-on))) rotate(3deg);
    transition: opacity var(--kr-hover-dur) var(--kr-ease), transform var(--kr-hover-dur) var(--kr-ease); }
  .kr-svg { transition: opacity var(--kr-hover-dur) var(--kr-ease); }
  .sit { transition: transform var(--kr-hover-dur) var(--kr-ease), border-color 180ms; }
  .sit:hover { transform: translateY(var(--kr-hover-lift)); }
  .sit:hover .kr-mini { opacity: 1; transform: rotate(3deg); }
}

/* --- Шаги: маленький рисунок над номером --- */
.kr-step { display: block; width: 120px; height: 80px; color: var(--action); margin-bottom: 8px; }
.kr-step svg { width: 120px; height: 80px; }
@media (max-width: 760px) { .kr-step { width: 90px; height: 60px; } .kr-step svg { width: 90px; height: 60px; } }

/* --- Справочник: миниатюра листа при наведении --- */
.art { position: relative; }
.kr-thumb { display: none; }
@media (hover: hover) and (pointer: fine) {
  .art { padding-right: 88px; transition: transform var(--kr-hover-dur) var(--kr-ease), background 180ms; }
  .kr-thumb { display: flex; position: absolute; right: 20px; top: 20px; width: 52px; height: 68px; flex-direction: column; gap: 5px; padding: 10px 8px;
    background: var(--sheet); border-radius: 3px; box-shadow: var(--shadow-float);
    opacity: calc(1 - var(--kr-hover-on) * .7); transform: rotate(-4deg) translateY(calc(6px * var(--kr-hover-on)));
    transition: opacity var(--kr-hover-dur) var(--kr-ease), transform var(--kr-hover-dur) var(--kr-ease); }
  .kr-thumb i { height: 2px; background: var(--edge-quiet); border-radius: 1px; }
  .kr-thumb i:first-child { background: var(--action); width: 60%; }
  .art:hover { transform: translateY(var(--kr-hover-lift)); }
  .art:hover .kr-thumb { opacity: 1; transform: rotate(-4deg); }
}

/* --- Частые вопросы: раскрытие по высоте --- */
.faq details::details-content { height: 0; overflow: clip;
  transition: height var(--kr-faq-close) var(--kr-ease), content-visibility var(--kr-faq-close) allow-discrete; }
.faq details[open]::details-content { height: auto; transition-duration: var(--kr-faq-open); }

/* --- Окно сноски: 0,96 → 1 --- */
dialog.norm[open] { animation: krNote var(--kr-note-dur) var(--kr-ease); }
@keyframes krNote { from { opacity: 0; transform: scale(var(--kr-note-from)); } to { opacity: 1; transform: none; } }

/* --- Переход между блоками: волосяная линия дорисовывается слева направо --- */
.kr-js .sec > .wrap::before { content: ''; display: block; height: 1px; margin-bottom: 40px; background: var(--rule);
  transform-origin: left; transform: scaleX(calc(1 - var(--kr-draw-on))); }
.kr-js .sec.kr-on > .wrap::before { transform: none; transition: transform 900ms var(--kr-ease); }
#voprosy > .wrap::before, #biznes > .wrap::before { display: none; }

/* --- «Живые» цифры: ширина держится, текст не прыгает --- */
.kr-count { display: inline-block; font-variant-numeric: tabular-nums; }

/* ─── kreativ/kr-b.css ─── */
/* B. «Предметы документа»: листы, сноски, печать, скрепка, конверт с трек-номером; подложки — бумага и лёгкий чернильный тон */
.kr-b { --kr-cell: var(--tint); --kr-cell-deep: #DCDBD3; --kr-under: #E9EDF6; }
.kr-b .kr-q--i { box-shadow: 0 1px 2px rgba(26,26,24,.06); }
/* стопка листов в карточке ситуации: раскладывается при появлении */
.kr-pile { height: 104px; }
.kr-p { position: absolute; left: 6px; top: 4px; width: 78px; height: 96px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(26,26,24,.06), 0 4px 10px rgba(26,26,24,.06); transform-origin: 50% 100%; }
.kr-p1 { padding: 10px 9px; display: flex; flex-direction: column; gap: 6px; font: 600 7px/1 var(--font-doc); letter-spacing: .06em; color: var(--ink); }
.kr-p1 b { text-align: center; margin-bottom: 2px; }
.kr-p1 i { height: 2px; border-radius: 1px; background: var(--edge-quiet); }
.kr-p1 i:nth-of-type(2) { width: 64%; } .kr-p1 i:nth-of-type(4) { width: 80%; }
.kr-p1 sup { position: absolute; right: 8px; bottom: 8px; font: 400 9px var(--font-num); color: var(--action); }
.kr-js .kr-pile .kr-p2, .kr-js .kr-pile .kr-p3 { transform: none; }
.kr-pile .kr-p2 { transform: rotate(-6deg) translateX(-4px); }
.kr-pile .kr-p3 { transform: rotate(5deg) translateX(10px); }
.kr-js .kr-pile.kr-on .kr-p2 { transform: rotate(-6deg) translateX(-4px); }
.kr-js .kr-pile.kr-on .kr-p3 { transform: rotate(5deg) translateX(10px); }
.kr-js .kr-pile.kr-on .kr-p { transition: transform var(--kr-fan-dur) var(--kr-ease) var(--kr-fan-delay); }
.kr-o { position: absolute; color: var(--action); }
.kr-o--clip { left: 64px; top: -6px; }
.kr-o--seal { left: 62px; top: 52px; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--action); display: grid; place-items: center;
  box-shadow: inset 0 0 0 4px var(--sheet), inset 0 0 0 5px var(--action); background: var(--sheet); transform: rotate(-12deg); }
.kr-o--seal span { font: 600 7px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.kr-js .kr-pile .kr-o--seal { opacity: calc(1 - var(--kr-detail-on)); transform: rotate(-12deg) scale(calc(1 + .3 * var(--kr-detail-on))); }
.kr-js .kr-pile.kr-on .kr-o--seal { opacity: 1; transform: rotate(-12deg); transition: opacity 120ms linear calc(var(--kr-fan-delay) + var(--kr-fan-dur)), transform var(--kr-detail-dur) var(--kr-ease-stamp) calc(var(--kr-fan-delay) + var(--kr-fan-dur)); }
.kr-o--env { left: 96px; top: 40px; width: 104px; height: 60px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 4px 10px rgba(26,26,24,.08); transform: rotate(4deg);
  background-image: linear-gradient(152deg, transparent 49%, var(--rule) 50%, transparent 51%), linear-gradient(28deg, transparent 49%, var(--rule) 50%, transparent 51%); background-size: 50% 60%; background-position: left top, right top; background-repeat: no-repeat; }
.kr-trk { position: absolute; left: 6px; bottom: 6px; font: 400 8px var(--font-num); color: var(--ink-2); letter-spacing: .02em; background: var(--tint-info); padding: 2px 4px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .kr-p1 { transition: transform var(--kr-hover-dur) var(--kr-ease); }
  .sit:hover .kr-p1 { transform: translateY(calc(-6px * var(--kr-hover-on))) rotate(calc(-2deg * var(--kr-hover-on))); }
}
/* первый экран: подложка, стопка, скрепка */
.kr-b .scene { background: var(--kr-under); border-radius: var(--r-block); padding: 28px; transition: transform 200ms var(--kr-ease); transform-style: preserve-3d; }
.kr-heap { position: relative; margin-top: 16px; }
.kr-heap .scene__sheet { position: relative; margin-top: 0; box-shadow: 0 1px 2px rgba(26,26,24,.06), 0 10px 28px rgba(36,59,128,.12); }
.kr-hs { position: absolute; inset: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); box-shadow: 0 4px 12px rgba(26,26,24,.06); }
.kr-hs1 { rotate: -2.5deg; } .kr-hs2 { rotate: 3deg; }
.kr-hs { animation: krFan var(--kr-fan-dur) var(--kr-ease) calc(var(--kr-fan-delay) + 500ms) both; }
@keyframes krFan { from { transform: rotate(calc(var(--kr-tilt-on) * 0deg)); rotate: 0deg; } }
.kr-hclip { position: absolute; left: 24px; top: -18px; z-index: 2; color: var(--ink-2); }
/* пример документа: подложка, тень листа */
.kr-b .ex { background: var(--kr-under); border-radius: var(--r-block); padding: 32px; }
.kr-b .doc { box-shadow: 0 1px 2px rgba(26,26,24,.06), 0 12px 32px rgba(36,59,128,.10); transition: transform 200ms var(--kr-ease); }
.kr-b .biz { background: linear-gradient(var(--sheet), var(--sheet)) padding-box; box-shadow: 0 1px 2px rgba(26,26,24,.05), 0 12px 32px rgba(26,26,24,.06); }
.kr-b .pc { box-shadow: 0 1px 2px rgba(26,26,24,.05); }
@media (max-width: 760px) { .kr-b .scene, .kr-b .ex { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .kr-hs { animation: none; } }

/* ─── kreativ/kr2.css ─── */
/* kreativ2: общий слой и три варианта блока после первого экрана. Числа движения — motion.css. */
/* шаги: без вертикальной «капающей» полосы */
.kr2 .step__bar, body.kr2 .step__bar { display: none; }
body.kr2 .kr-step svg .d { fill: none; }
.kr2 { padding-top: 64px; }
.kr2-cap { margin-top: 24px; color: var(--ink-2); font-size: 16px; text-align: center; text-wrap: balance; }
.kr2-cap b { color: var(--ink); font-weight: 600; }

/* ---------- 1. Веер документов ---------- */
.f2-stage { position: relative; height: 400px; border-radius: var(--r-block); background: var(--tint-info); overflow: hidden; --sp: 1; --w: 250px; }
.f2-sh { position: absolute; left: calc(50% - var(--w) / 2); top: 40px; width: var(--w); height: 330px; padding: 22px 22px 18px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet);
  box-shadow: 0 1px 2px rgba(26,26,24,.06), 0 10px 28px rgba(36,59,128,.12);
  font: 400 12px/1.5 var(--font-doc); color: var(--ink); }
.f2-sh p + p { margin-top: 6px; }
.f2-to { font-size: 10px; color: var(--ink-2); text-align: right; line-height: 1.4; }
.f2-t { text-align: center; margin-top: 14px !important; font-weight: 600; letter-spacing: .08em; font-size: 12px; }
.f2-sub { text-align: center; font-size: 10px; color: var(--ink-2); margin: 2px 0 10px !important; }
.f2-sh mark { background: var(--mark); border-radius: 2px; padding: 0 2px; }
.f2-sh sup { color: var(--action); font: 400 9px var(--font-num); }
.f2-fn { position: absolute; left: 22px; right: 22px; bottom: 16px; padding-top: 8px; border-top: 1px solid var(--rule); font: 400 10px/1.4 var(--font-ui); color: var(--ink-2); }
.f2-fn b { font: 400 10px var(--font-num); color: var(--action); margin-right: 6px; }
.f2-seal { position: absolute; right: 22px; bottom: 58px; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--action); color: var(--action);
  box-shadow: inset 0 0 0 5px var(--sheet), inset 0 0 0 6px var(--action); display: grid; place-items: center; transform: rotate(-12deg); }
.f2-seal span { font: 600 8px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.f2-sign { position: absolute; right: 26px; bottom: 60px; color: var(--action); }
/* итоговые места листов: --x сдвиг, --r поворот */
.f2-sh1 { --x: -390px; --y: 18px; --r: -7deg; }
.f2-sh2 { --x: -130px; --y: 0px; --r: -2deg; }
.f2-sh3 { --x: 130px; --y: 10px; --r: 3deg; }
.f2-sh4 { --x: 390px; --y: 22px; --r: 7deg; }
.f2-sh { transform: translate(calc(var(--x) * var(--sp)), var(--y)) rotate(var(--r)); }
.kr-js .f2-stage:not(.kr-on) .f2-sh { transform: translate(calc(var(--x) * var(--sp) * (1 - var(--kr2-fan-on))), calc(var(--y) * (1 - var(--kr2-fan-on)))) rotate(calc(var(--r) * (1 - var(--kr2-fan-on)))); }
.kr-js .f2-stage.kr-on .f2-sh { transition: transform var(--kr2-fan-dur) var(--kr-ease); }
.f2-sh2 { transition-delay: var(--kr2-fan-step) !important; } .f2-sh3 { transition-delay: calc(2 * var(--kr2-fan-step)) !important; } .f2-sh4 { transition-delay: calc(3 * var(--kr2-fan-step)) !important; }
@media (max-width: 1100px) { .f2-stage { --sp: .7; } }
@media (max-width: 760px) { .f2-stage { height: 330px; --sp: .3; --w: 200px; } .f2-sh { height: 270px; padding: 16px; font-size: 10px; top: 30px; } .f2-fn { left: 16px; right: 16px; } .f2-sh1, .f2-sh4 { display: none; } .f2-sh2 { --x: -200px; } .f2-sh3 { --x: 200px; } }

/* ---------- 2. Лента видов ---------- */
.t2-head { display: flex; justify-content: center; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.t2-head .kr2-cap { margin: 0; }
.t2-btn { font: 500 14px var(--font-ui); color: var(--action); background: none; border: 1px solid var(--edge-quiet); border-radius: var(--r-control); padding: 6px 12px; min-height: 36px; cursor: pointer; }
.t2-win { margin-top: 24px; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.t2-row { list-style: none; margin: 0; padding: 4px 0 12px; display: flex; gap: 16px; padding-right: 16px; flex: none;
  animation: t2Go var(--kr2-tape-dur) linear infinite; animation-play-state: running; }
@keyframes t2Go { to { transform: translateX(calc(-100% * var(--kr2-tape-on))); } }
.t2-win:hover .t2-row, .t2-win:focus-within .t2-row, .kr2-tape.is-held .t2-row { animation-play-state: paused; }
.t2-c { flex: none; width: 210px; height: 150px; position: relative; padding: 18px 18px 16px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-block);
  display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(26,26,24,.05); }
.t2-c:nth-child(3n+2) { background: var(--tint-info); border-color: transparent; }
.t2-c b { font: 600 16px/1.3 var(--font-doc); margin-top: 12px; text-wrap: balance; }
.t2-p { margin-top: auto; font: 500 15px var(--font-ui); color: var(--action); }
.t2-l { display: flex; flex-direction: column; gap: 4px; width: 28px; }
.t2-l i { height: 2px; background: var(--edge-quiet); border-radius: 1px; } .t2-l i:first-child { background: var(--action); width: 70%; }
@media (prefers-reduced-motion: reduce) { .t2-win { overflow-x: auto; } .t2-row[aria-hidden] { display: none; } .t2-btn { display: none; } }

/* ---------- 3. Журнальная полоса фактов ---------- */
.j2-k { font: 600 13px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.j2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.j2-c { padding: 28px 24px 32px; display: flex; flex-direction: column; color: var(--ink); }
.j2-c + .j2-c { border-left: 1px solid var(--rule); }
.j2-c:first-child { padding-left: 0; }
.j2-i { color: var(--action); height: 64px; }
.j2-n { margin-top: 16px; font: 600 clamp(34px, 4vw, 52px)/1 var(--font-doc); color: var(--action); letter-spacing: -.01em; }
.j2-a { margin-top: 10px; font-weight: 600; font-size: 17px; }
.j2-b { margin-top: 4px; color: var(--ink-2); font-size: 15px; text-wrap: balance; }
.kr-js .j2-c:not(.kr-on) .j2-n { opacity: calc(1 - var(--kr-draw-on)); }
.kr-js .j2-c.kr-on .j2-n { transition: opacity 300ms linear 200ms; }
@media (max-width: 900px) { .j2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .j2-c:nth-child(3) { border-left: 0; padding-left: 0; } .j2-c:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 400px) { .j2-c { padding: 20px 12px 24px; } .j2-c:nth-child(odd) { padding-left: 0; } .j2-n { font-size: 30px; } }

/* ---------- Барабан действий (общая механика; вид меняют kr3-*.css) ---------- */
.drum .sec__h { margin-bottom: 24px; }
.dr__tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--tint); border-radius: 10px; }
.dr__tabs button { font: 500 16px var(--font-ui); color: var(--ink-2); background: none; border: 0; border-radius: var(--r-control); padding: 8px 16px; min-height: 40px; cursor: pointer; }
.dr__tabs button[aria-selected=true] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(26,26,24,.08); }
.dr__win { margin-top: 24px; outline-offset: 4px; }
.dr__list { list-style: none; margin: 0; padding: 0; }
.dr__i { display: flex; align-items: center; gap: 24px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.dr__t { flex: 1; min-width: 0; font: 600 24px/1.2 var(--font-doc); color: var(--ink); }
.dr__p { font: 500 16px var(--font-ui); color: var(--ink-2); white-space: nowrap; }
.dr__go { font: 500 16px var(--font-ui); text-decoration: none; white-space: nowrap; }
.dr__all { margin-top: 20px; }
@media (min-width: 901px) {
  .dr__win { position: relative; height: calc(5 * var(--kr3-drum-row)); overflow: hidden; }
  .dr__list { transform: translateY(calc((2 - var(--a, 0)) * var(--kr3-drum-row))); transition: transform var(--kr3-drum-dur) var(--kr-ease); }
  .dr__i { height: var(--kr3-drum-row); min-height: 0; padding: 0 0 0 28px; border: 0; position: relative; cursor: pointer;
    opacity: .08; transition: opacity var(--kr3-drum-dur) var(--kr-ease); }
  .dr__i[data-d="0"] { opacity: 1; } .dr__i[data-d="1"] { opacity: var(--kr3-drum-near); } .dr__i[data-d="2"] { opacity: var(--kr3-drum-far); }
  .dr__i::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 2px; background: var(--action); transform: scaleY(0); transition: transform var(--kr3-drum-dur) var(--kr-ease); }
  .dr__i[data-d="0"]::before { transform: none; }
  .dr__t { font-size: clamp(36px, 3.3vw, 46px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); transition: color var(--kr3-drum-dur); }
  .dr__i[data-d="0"] .dr__t { color: var(--ink); }
  .dr__p, .dr__go { opacity: 0; transition: opacity var(--kr3-drum-dur) var(--kr-ease); }
  .dr__i[data-d="0"] .dr__p, .dr__i[data-d="0"] .dr__go { opacity: 1; }
  .dr__go { padding: 12px 20px; border-radius: var(--r-control); background: var(--btn-main); color: var(--on-btn-main); }
  .dr__go:hover { background: var(--btn-main-press); }
}
@media (max-width: 900px) { .dr__i { flex-wrap: wrap; gap: 4px 16px; } .dr__t { flex-basis: 100%; } }
/* длинные фразы (до 905 px при 44 px): цена над кнопкой в узкой правой колонке */
@media (min-width: 901px) {
  .dr__i { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr; column-gap: 24px; row-gap: 4px; align-items: center; }
  .dr__t { grid-row: 1 / -1; font-size: 44px; }
  .dr__p { grid-column: 2; grid-row: 2; justify-self: end; font-size: 14px; }
  .dr__go { grid-column: 2; grid-row: 3; padding: 8px 18px; }
}
@media (min-width: 901px) and (max-width: 1180px) { .dr__t { font-size: 36px; } }
/* телефон: строка барабана в одну строку — переносы в 1–2 слова запрещены */
@media (max-width: 900px) { .dr__t { font-size: min(24px, 4.4vw); white-space: nowrap; } }
.t2-c b { font-size: 15px; }

/* ─── kreativ/kr3-d.css ─── */
/* Концепция 2. «Рабочий стол»: страница — стол, блоки — листы на нём; предметы рядом с документом */
body.kr3-d { background: #E6E4DC; }
.kr3-d .top { background: color-mix(in srgb, #E6E4DC 94%, transparent); }
.kr3-d .sec > .wrap::before { display: none; }
.kr3-d .sec > .wrap { position: relative; background: var(--sheet); border-radius: var(--r-sheet); padding: 56px 64px 64px;
  box-shadow: 0 1px 2px rgba(26,26,24,.08), 0 18px 40px rgba(26,26,24,.10); max-width: calc(var(--wrap) + 2 * var(--gut)); }
.kr3-d .sec:nth-of-type(odd) > .wrap { rotate: calc(-1deg * var(--kr3-desk-tilt)); } .kr3-d .sec:nth-of-type(even) > .wrap { rotate: calc(1deg * var(--kr3-desk-tilt)); }
.kr3-d .sec > .wrap::after { content: ''; position: absolute; top: -14px; left: 48px; width: 72px; height: 18px; background: rgba(233, 237, 246, var(--kr3-desk-tape)); border-radius: 2px; rotate: -2deg; }
.kr-js .kr3-d .sec:not(.kr-on) > .wrap { transform: translateY(var(--kr3-desk-shift)); }  /* без прозрачности: лист не пропадает при переходе по якорю */
.kr-js .kr3-d .sec.kr-on > .wrap { transition: transform var(--kr3-desk-dur) var(--kr-ease); }
.kr3-d #biznes > .wrap { background: none; box-shadow: none; padding: 0; rotate: 0deg; } .kr3-d #biznes > .wrap::after { display: none; }
.kr3-d .biz { box-shadow: 0 18px 40px rgba(26,26,24,.10); border: 0; }
/* первый экран: стол с предметами */
.kr3-d .scene { padding: 32px 24px 56px; }
.kr3-d .kr-heap { margin-top: 16px; }
.kr3-d .kr-heap .scene__sheet { box-shadow: 0 2px 4px rgba(26,26,24,.08), 0 18px 36px rgba(26,26,24,.14); }
.dk-env { position: absolute; left: -64px; bottom: -6px; width: 190px; height: 112px; background: var(--sheet); border-radius: 3px; rotate: -8deg; z-index: -1;
  box-shadow: 0 8px 20px rgba(26,26,24,.12); background-image: linear-gradient(152deg, transparent 49%, var(--rule) 50%, transparent 51%), linear-gradient(28deg, transparent 49%, var(--rule) 50%, transparent 51%); background-size: 50% 62%; background-position: left top, right top; background-repeat: no-repeat; }
.dk-env .kr-trk { font-size: 10px; left: 10px; bottom: 10px; }
.dk-seal { position: absolute; right: -18px; bottom: 18px; width: 78px; height: 78px; border-radius: 50%; border: 1.5px solid var(--action); color: var(--action);
  box-shadow: inset 0 0 0 6px var(--sheet), inset 0 0 0 7px var(--action); background: var(--sheet); display: grid; place-items: center; rotate: -14deg; z-index: 3; }
.dk-seal span { font: 600 9px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.dk-pen { display: none; }  /* ручка убрана: «игрушечно» */
.kr3-d .scene { isolation: isolate; }
/* ситуации — карточки-стопки прямо на листе */
.kr3-d .sit { background: #FBFAF7; border-color: transparent; box-shadow: 0 1px 2px rgba(26,26,24,.06), 0 6px 16px rgba(26,26,24,.06); }
/* цены — квитанции с вырезами */
.kr3-d .pc { border: 0; border-top: 2px dashed var(--edge-quiet); border-radius: 2px; background: #FBFAF7;
  -webkit-mask: radial-gradient(circle 10px at 0 64px, transparent 98%, #000) , radial-gradient(circle 10px at 100% 64px, transparent 98%, #000); -webkit-mask-composite: source-in; mask-composite: intersect;
  mask: radial-gradient(circle 10px at 0 64px, transparent 98%, #000), radial-gradient(circle 10px at 100% 64px, transparent 98%, #000); }
.kr3-d .pc--free { background: var(--tint-info); }
/* справочник — папки с ярлыком */
.kr3-d .art { border-radius: 0 var(--r-block) var(--r-block) var(--r-block); background: #EFEDE6; margin-top: 18px; overflow: visible; }
.kr3-d .art::before { content: ''; position: absolute; left: 0; top: -16px; width: 42%; height: 18px; background: #EFEDE6; border-radius: 8px 8px 0 0; }
/* барабан — картотека */
.kr3-d .final { border-radius: var(--r-sheet); }
.kr3-d .foot { border-top-color: #D3D1C8; }
@media (max-width: 760px) {
  .kr3-d .sec > .wrap, .kr3-d .sec:nth-of-type(n) > .wrap { padding: 32px 20px 40px; margin: 0 8px; rotate: 0deg; } .kr3-d .sec > .wrap::after { left: 24px; width: 64px; }
  .dk-env { left: -20px; width: 150px; } .dk-seal { right: -4px; width: 64px; height: 64px; }
}

/* ─── kreativ/kr3-drum.css ─── */
/* Барабан действий kreativ3: цилиндр без подложек и без разлиновки; лежит прямо на листе блока.
   Числа — в motion.css (--kr3-dr-*). */
.drum .dr { background: none; padding: 0; }
.drum .dr__tabs { background: var(--tint); }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .dr__win { --row: var(--kr3-drum-row); --ang: 20deg; --r: calc(var(--row) / (2 * tan(var(--ang) / 2)));
    position: relative; height: calc(var(--row) * 4.6); overflow: hidden; margin-top: 16px;
    perspective: 1100px; perspective-origin: 50% 50%; background: none; padding: 0; }
  /* две тонкие линии над и под активной */
  .dr__win::before, .dr__win::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); z-index: 1; pointer-events: none; }
  .dr__win::before { top: calc(50% - var(--row) / 2); } .dr__win::after { top: calc(50% + var(--row) / 2); }
  .dr__list { position: absolute; inset: 0; transform-style: preserve-3d; transform: none;
    transform: translateZ(calc(-1 * var(--r))) rotateX(calc(var(--turn, 0) * var(--ang)));
    will-change: transform; touch-action: none; }   /* вращение ведёт JS покадрово */
  .dr__list[hidden] { display: none; }
  .dr__i { position: absolute; left: 0; right: 0; top: calc(50% - var(--row) / 2); height: var(--row); padding: 0 8px; margin: 0; border: 0;
    transform: rotateX(calc(-1 * var(--slot, 0) * var(--ang))) translateZ(var(--r)); backface-visibility: hidden;
    opacity: 0; cursor: pointer; }
  .dr__i::before { display: none; }
  .dr__t { color: var(--ink); transition: color 150ms linear; }
  .dr__i:not([data-d="0"]):hover .dr__t { color: var(--action); }   /* наведение — только подсветка */
  .dr__win { cursor: grab; user-select: none; } .dr__win.is-drag { cursor: grabbing; }
  .dr__p, .dr__go { opacity: 0; transition: opacity var(--kr3-dr-show) linear; }
  .dr__i[data-d="0"] .dr__p, .dr__i[data-d="0"] .dr__go { opacity: 1; }
  .dr--jump, .dr--jump .dr__i, .dr__i.dr--jump { transition: none !important; }
}
/* щадящий режим на компьютере — плоский список, как на телефоне */
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .dr__win { height: auto; overflow: visible; } .dr__list { transform: none; }
  .dr__i { height: auto; min-height: 72px; opacity: 1 !important; border-bottom: 1px solid var(--rule); }
  .dr__p, .dr__go { opacity: 1 !important; } .dr__i::before { display: none; }
  .dr__t { font-size: 32px; }
}

/* ─── scenes/scenes.css ─── */
/* Живые сцены LegalDocs — общие правила и ТЕМП. Правка темпа — одной строкой здесь.
   Цвета и гарнитуры — копия жетонов приложения (apps/web/src/render/app.css:8–84), только светлая тема. */
:root {
  /* --- Кривые: у каждого вида перехода своя --- */
  --scn-ease-appear: cubic-bezier(.2,.7,.2,1);  /* появление, курсор, наведение, подсветка */
  --scn-ease-swap: cubic-bezier(.4,0,.2,1);     /* смена экрана, камера */
  /* --- Камера: только там, где без неё не прочитать главное (≤ 2 раз на сцену) --- */
  --scn-ease-cam: cubic-bezier(.4,0,.2,1);      /* камера: одна кривая на наезд, панораму и отъезд */
  --scn-cam-in: 900ms;                         /* въезд */
  --scn-cam-out: 800ms;                        /* отъезд */
  --scn-cam-max: 1.15;                         /* масштаб не больше */
  --scn-scroll-dur: 1200ms;                    /* прокрутка листа внутри окна, ease-in-out */
  --scn-cam-pad: 24;                           /* поле вокруг элемента в фокусе, px */
  /* --- Переходы между экранами --- */
  --scn-swap-dur: 300ms;                       /* растворение уходящего и проявление нового экрана */
  --scn-swap-gap: 300ms;                       /* новый экран ждёт, пока старый погаснет; «чистая бумага» ≤ 0,4 с */
  --scn-swap-shift: 16px;                      /* на сколько сдвигается уходящий/входящий экран */
  /* --- Акценты и касания --- */
  --scn-accent-dur: 300ms;                     /* мягкая подсветка зоны действия */
  --scn-tap-dur: 520ms;                        /* круг касания: рост и затухание */
  --scn-tap-size: 36px;                        /* диаметр круга касания */
  --scn-press-dur: 160ms;                      /* смена тона кнопки при клике */
  --scn-cur-dur: 800ms;                        /* перелёт курсора по умолчанию */
  /* --- Набор текста (мс на букву; разброс добавляется в коде) --- */
  --scn-type-ms: 62;                           /* 55–85: человеческий ритм */
  --scn-type-jitter: 22;                       /* случайный разброс на букву, мс */
  --scn-type-space: 40;                        /* пауза после пробела, мс */
  --scn-type-punct: 170;                       /* пауза после запятой, точки, вопроса, мс */
  /* --- Общая скорость сцены: 1 — как задумано, 1.2 — на 20 % быстрее --- */
  --scn-speed: 1;
  /* --- Рост рамки от прокрутки --- */
  --scn-grow-phone: .92;                       /* телефон: с какого масштаба вырастает */
  --scn-grow-desk: .88;                        /* окно компьютера: с какого масштаба вырастает */

  /* --- Ореол вокруг окна и телефона (вместо подложки) --- */
  --scn-halo: #F2E3DC;                         /* тёплый персиково-бумажный — выбор владельца 01.10; запас: чернильный #E3E6EF (бумага + 8 % чернил) */
  /* Жетоны продукта */
  --scn-paper: #F6F6F3; --scn-sheet: #FFFFFF; --scn-press: #EFEEE9; --scn-ink: #1A1A18; --scn-ink-2: #63635C;
  --scn-rule: #E2E1DC; --scn-edge: #8C8B83; --scn-quiet: #D3D2CB; --scn-action: #243B80; --scn-action-press: #1B2D63;
  --scn-mark: #FBEFC2; --scn-tint: #ECEBE5; --scn-done: #1E6B45; --scn-outside: #7A5300; --scn-fault: #A32116;
  --scn-tint-outside: #F6EDD6; --scn-tint-fault: #F8E6E2;
  --scn-sel-on: color-mix(in srgb, #1A1A18 14%, transparent);
  --scn-ui: 'Golos Text', system-ui, sans-serif; --scn-doc: 'Literata', Georgia, serif;
}

.scn { position: relative; font-family: var(--scn-ui); color: var(--scn-ink); -webkit-font-smoothing: antialiased; }
.scn *, .scn *::before, .scn *::after { box-sizing: border-box; }
.scn p, .scn li, .scn dd, .scn dt { text-wrap: pretty; }
.scn p, .scn h1, .scn h2, .scn h3, .scn ul, .scn ol, .scn dl, .scn dd { margin: 0; padding: 0; }
.scn li { list-style: none; }

/* Подложки нет (владелец 01.10): фон под предметами = фон страницы; выделяются только окно и телефон — ободом и тенью */
.scn__pad { position: relative; background: none; }

/* Коробка фиксированной высоты (CLS 0): размер задаёт aspect-ratio, содержимое масштабируется под ширину */
.scn__box { position: relative; margin: 0 auto; }
.scn__fit { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--fit, 1)); }
.scn__grow { transform-origin: 50% 40%; }

/* Камера: обёртка экрана, двигается только transform */
.scn__cam { position: absolute; inset: 0; transform-origin: 0 0; }
.scn__cam.is-moving { will-change: transform; }

/* Экраны внутри: сдвиг + растворение */
.scn-s { position: absolute; inset: 0; opacity: 0; transform: translateX(var(--scn-swap-shift)); pointer-events: none;
  transition: opacity var(--scn-swap-dur) var(--scn-ease-swap), transform var(--scn-swap-dur) var(--scn-ease-swap); }
.scn-s.on { opacity: 1; transform: none; transition-delay: var(--scn-swap-gap); }  /* последовательно: старый экран гаснет, пауза, новый проявляется */
.scn-s.off { opacity: 0; transform: translateX(calc(var(--scn-swap-shift) * -1)); }

/* Круг касания */
.scn-tap { position: absolute; width: var(--scn-tap-size); height: var(--scn-tap-size); margin: calc(var(--scn-tap-size) / -2) 0 0 calc(var(--scn-tap-size) / -2);
  border-radius: 50%; background: rgba(36, 59, 128, .22); box-shadow: 0 0 0 1.5px rgba(36, 59, 128, .35); opacity: 0; pointer-events: none; z-index: 30; }

/* Мягкое кольцо-акцент вокруг зоны действия */
.scn .acc { transition: box-shadow var(--scn-accent-dur) var(--scn-ease-appear), background-color var(--scn-accent-dur) var(--scn-ease-appear); }
.scn .acc.hl { box-shadow: 0 0 0 4px rgba(36, 59, 128, .16); }

/* Шаги — одна компактная капсула под сценой: три чипа, прогресс — заливка внутри активного чипа */
.scn__caps { display: flex; width: max-content; max-width: calc(100% - 32px); margin: 2px auto 0; padding: 4px; gap: 2px;
  border-radius: 999px; background: var(--scn-paper); box-shadow: inset 0 0 0 1px rgba(26,26,24,.10); }
.scn-cap { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; appearance: none; border: 0; background: none; cursor: pointer;
  padding: 7px 14px 7px 7px; border-radius: 999px; overflow: hidden; white-space: nowrap; isolation: isolate;
  font: 500 14px/20px var(--scn-ui); color: var(--scn-ink-2); transition: color 250ms var(--scn-ease-swap), background-color 180ms var(--scn-ease-appear); }
.scn-cap em { font-style: normal; }
.scn-cap__bar { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.scn-cap__bar i { display: block; height: 100%; background: color-mix(in srgb, var(--scn-action) 10%, transparent); transform-origin: 0 50%; transform: scaleX(0); transition: opacity 300ms var(--scn-ease-swap); }
.scn-cap:not(.on) .scn-cap__bar i { opacity: 0; }
.scn-cap b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 600 12px/1 var(--scn-ui);
  font-variant-numeric: tabular-nums; background: var(--scn-tint); color: var(--scn-ink-2); transition: background-color 250ms var(--scn-ease-swap), color 250ms var(--scn-ease-swap); }
.scn-cap.on { color: var(--scn-ink); }
.scn-cap.on b { background: var(--scn-action); color: #fff; animation: scn-pulse 1.2s var(--scn-ease-appear) 1; }  /* одна мягкая пульсация при входе в шаг */
.scn-cap.done b { font-size: 0; background: color-mix(in srgb, var(--scn-done) 14%, transparent); }
.scn-cap.done b::before { content: '✓'; font-size: 12px; color: var(--scn-done); }
@keyframes scn-pulse { 0% { box-shadow: 0 0 0 0 rgba(36,59,128,.35); } 100% { box-shadow: 0 0 0 7px rgba(36,59,128,0); } }
.scn-cap:focus-visible { outline: 2px solid var(--scn-action); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .scn-cap:hover { background-color: rgba(26,26,24,.05); color: var(--scn-ink); } }
.scn__fit { transition: opacity 125ms var(--scn-ease-swap); }
.scn.is-seek .scn__fit { opacity: 0; }
@media (max-width: 560px) {
  .scn__caps { width: auto; margin-left: 16px; margin-right: 16px; max-width: none; }
  .scn-cap { flex: 1 1 0; justify-content: center; padding-right: 10px; }
  .scn-cap__r { display: none; }
}
.scn__note { display: block; margin: 16px 0 0; padding-top: 0; font-size: 12px; line-height: 16px; clear: both; text-align: center; font: 400 12px/16px var(--scn-ui); color: var(--scn-ink-2); }

/* Кнопка «Смотреть» (щадящий режим) */
.scn__play { display: none; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40;
  appearance: none; border: 0; border-radius: 6px; padding: 10px 18px; background: var(--scn-action); color: #fff; font: 500 14px/20px var(--scn-ui); cursor: pointer; }
.scn.is-still .scn__play { display: block; }
.scn__play:focus-visible { outline: 2px solid var(--scn-action); outline-offset: 3px; }

/* Общие значки: галочка «готово/сверено» и мигающий курсор набора */
.sz-ok { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid var(--scn-done); position: relative; flex: none; }
.sz-ok::after { content: ''; position: absolute; left: 3px; top: 1px; width: 4px; height: 7px; border: solid var(--scn-done); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.typing::after { content: ''; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: var(--scn-action); animation: sz-car 1s steps(1) infinite; }
@keyframes sz-car { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .scn-s { transition: opacity 150ms linear; transform: none !important; }
}


/* Клик: смена тона, как в продукте (свод, решение 01.10) — без сжатия 0.97 */
.scn .press { transition: background-color var(--scn-press-dur) var(--scn-ease-appear); }
/* Свет сверху-слева: одна тень на все рамки */
.scn { --scn-shadow: -6px 10px 24px -8px rgba(26,26,24,.16), -16px 32px 64px -24px rgba(26,26,24,.28); }

/* Ореол: мягкий тон у края предмета, растворяется в фон страницы без линии */
.scn { --scn-halo-ring: 0 0 24px 2px color-mix(in srgb, var(--scn-halo) 55%, transparent), 0 0 60px 10px color-mix(in srgb, var(--scn-halo) 35%, transparent), 0 0 120px 24px color-mix(in srgb, var(--scn-halo) 18%, transparent); }  /* только размытые слои: тон от края окна сходит на нет без ступенек */
/* Активный чип целиком подсвечен лёгким тоном, прогресс — плотнее поверх; на телефоне чипы по содержимому */
.scn-cap.on { background-color: color-mix(in srgb, var(--scn-action) 6%, transparent); }
@media (max-width: 560px) {
  .scn-cap { flex: 1 1 auto; gap: 5px; padding: 6px 8px 6px 5px; font-size: 13px; }
  .scn-cap b { width: 20px; height: 20px; }
}
.scn .scn__note { margin: 18px 0 0; }
@media (max-width: 560px) { .scn .scn__note { margin-top: 16px; } }  /* перебивает обнуление .scn p */
/* Галочка пройденного шага — SVG по центру круга (оптически +0.5 px вниз), номера и галочки — один круг, одна линия с подписью */
.scn-cap { align-items: center; }
.scn-cap em { line-height: 22px; }
.scn-cap.done b { font-size: 0; }
.scn-cap.done b::before { content: ''; width: 16px; height: 16px; transform: translateY(.5px); background: var(--scn-done);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5 7 11l5-5.5'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5 7 11l5-5.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
@media (max-width: 560px) { .scn-cap em { line-height: 20px; } .scn-cap.done b::before { width: 14px; height: 14px; -webkit-mask-size: 14px; mask-size: 14px; } }
/* Плейсхолдер скрыт, как только в поле есть значение (core.js ставит has-v родителю) — для всех полей обеих сцен */
.scn .has-v > .sz-ph-t, .scn .has-v > i, .scn .has-v .sz-ph-t { display: none; }
.scn-init .scn-s, .scn-init .scn-s * { transition: none !important; }

/* ─── scenes/sozdanie.css ─── */
/* Сцена «Создание документа» — телефон. Разметка экранов повторяет приложение:
   кабинет, «Новый документ» (src/components/NewDocumentPage.tsx), анкета (QuestionnaireBlock.tsx),
   «Готовим документ» (document-workflow-model.ts:734), готовый лист со сносками (render/dokument.css). */
.scn--sz .scn__pad { padding: 48px 16px 28px; }
.scn--sz .scn__box { width: calc(100% - 20px); max-width: 370px; }
/* Рамка телефона — тенью снаружи коробки: размер коробки = экран 340×720 */
.sz-ph { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; background: var(--scn-paper);
  box-shadow: 0 0 0 9px #1D1D1B, 0 0 0 10px #3A3A36, 0 30px 60px -20px rgba(26,26,24,.35), 0 12px 24px -12px rgba(26,26,24,.25); }
.sz-bar { position: absolute; left: 0; right: 0; top: 0; height: 26px; padding: 6px 22px 0; display: flex; justify-content: space-between; font: 600 12px/14px var(--scn-ui); z-index: 5; }
.sz-bar i { width: 54px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #1A1A18 60%, transparent 60% 64%, #1A1A18 64% 80%, transparent 80% 84%, #1A1A18 84%); opacity: .8; }
.sz-hd { position: absolute; left: 0; right: 0; top: 26px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--scn-rule); background: var(--scn-paper); z-index: 4; }
.sz-burger { width: 18px; height: 12px; border-top: 2px solid var(--scn-ink); border-bottom: 2px solid var(--scn-ink); position: relative; }
.sz-burger::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid var(--scn-ink); }
.sz-logo { font: 600 16px/20px var(--scn-ui); color: var(--scn-action); flex: 1; }
.sz-new { font: 500 14px/20px var(--scn-ui); padding: 6px 8px; border-radius: 6px; }
.sz-bell { width: 14px; height: 15px; border: 1.6px solid var(--scn-ink); border-radius: 7px 7px 2px 2px; position: relative; }
.sz-bell::after { content: ''; position: absolute; right: -4px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--scn-action); }

.sz-b { position: absolute; left: 16px; right: 16px; }
.sz-back { font: 400 13px/18px var(--scn-ui); color: var(--scn-ink-2); top: 84px; }
.sz-h1 { font: 650 26px/32px var(--scn-doc); letter-spacing: -.01em; }
.sz-h2 { font: 650 20px/26px var(--scn-doc); }
.sz-lead { font: 400 14px/20px var(--scn-ui); color: var(--scn-ink-2); text-wrap: balance; }
.sz-lbl { font: 500 13px/18px var(--scn-ui); }
.sz-st { font: 500 13px/18px var(--scn-ui); display: flex; align-items: center; gap: 6px; }
.sz-st b { font-weight: 600; }
.sz-wait { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid var(--scn-ink-2); }

/* Кабинет */
.sz-chips { top: 136px; display: flex; gap: 6px; }
.sz-chips span { font: 500 13px/18px var(--scn-ui); padding: 5px 10px; border-radius: 999px; background: var(--scn-tint); color: var(--scn-ink-2); }
.sz-chips span:first-child { background: var(--scn-ink); color: #fff; }
.sz-rows { top: 180px; border-top: 1px solid var(--scn-rule); }
.sz-row { padding: 12px 0; border-bottom: 1px solid var(--scn-rule); }
.sz-row p:first-child { font: 500 15px/20px var(--scn-ui); }
.sz-row p + p { font: 400 13px/18px var(--scn-ui); color: var(--scn-ink-2); margin-top: 2px; }
.sz-row .yours { color: var(--scn-ink); font-weight: 500; }

/* Поле ввода */
.sz-fld { border: 1px solid var(--scn-edge); border-radius: 6px; background: var(--scn-sheet); padding: 9px 12px; font: 400 15px/22px var(--scn-ui); min-height: 44px; }
.sz-fld.big { min-height: 70px; padding-left: 34px; position: relative; }
.sz-fld.big::before { content: ''; position: absolute; left: 12px; top: 13px; width: 10px; height: 10px; border: 1.6px solid var(--scn-ink-2); border-radius: 50%; }
.sz-fld.big::after { content: ''; position: absolute; left: 22px; top: 24px; width: 5px; border-top: 1.6px solid var(--scn-ink-2); transform: rotate(45deg); }
.sz-ph-t { color: var(--scn-ink-2); }
.sz-fld.foc { border-color: var(--scn-action); box-shadow: 0 0 0 1px var(--scn-action); }
.sz-fld span[data-text]:not(:empty) + .sz-ph-t { display: none; }

/* Подбор */
.sz-busy { margin-top: 12px; height: 0; overflow: visible; font: 400 13px/18px var(--scn-ui); color: var(--scn-ink-2); opacity: 0; transition: opacity 200ms var(--scn-ease-appear); }
.sz-busy.on, .sz-found.on { opacity: 1; }
.sz-res { margin-top: 12px; opacity: 0; transform: translateY(8px); transition: opacity 220ms var(--scn-ease-appear), transform 220ms var(--scn-ease-appear); }
.sz-res.on { opacity: 1; transform: none; }
.sz-r { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 10px; margin: 0 -10px; border-radius: 6px; font: 400 14px/19px var(--scn-ui); min-height: 54px; }
.sz-r b { font-weight: 400; white-space: nowrap; color: var(--scn-ink-2); font-variant-numeric: tabular-nums; }
.sz-r.sel { background: var(--scn-sel-on); }
.sz-r.sel span { font-weight: 500; }

/* Нижняя полоса с ценой (телефон: закреплена) */
.sz-dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px 18px; background: var(--scn-sheet); border-top: 1px solid var(--scn-rule); }
.sz-dock p { font: 400 13px/18px var(--scn-ui); color: var(--scn-ink-2); margin-bottom: 10px; position: relative; height: 18px; }
.sz-dock p span { position: absolute; left: 0; right: 0; transition: opacity 200ms var(--scn-ease-appear); white-space: nowrap; }
.sz-dock p span + span, .sz-s2 .sz-dock.on p span:first-child { opacity: 0; }
.sz-s2 .sz-dock.on p span + span { opacity: 1; color: var(--scn-ink); }
.sz-btn { display: block; height: 48px; border-radius: 6px; background: var(--scn-action); color: #fff; font: 500 15px/48px var(--scn-ui); text-align: center; position: relative; overflow: hidden; }
.sz-btn.press { background: var(--scn-action-press); }
.sz-btn span { position: absolute; inset: 0; transition: opacity 200ms var(--scn-ease-appear), transform 200ms var(--scn-ease-appear); }
.sz-btn span + span { opacity: 0; transform: translateY(8px); }
.sz-s2 .sz-dock.on .sz-btn span:first-child { opacity: 0; transform: translateY(-8px); }
.sz-s2 .sz-dock.on .sz-btn span + span { opacity: 1; transform: none; }

/* Анкета */
.sz-q { margin-bottom: 14px; }
.sz-q .sz-lbl { margin-bottom: 4px; }
.sz-next { font: 400 13px/18px var(--scn-ui); color: var(--scn-ink-2); }

/* «Готовим документ» — нейтральная плашка, листок белый, строки «пишутся» */
.sz-work { top: 196px; background: var(--scn-tint); border-radius: 12px; padding: 18px 16px; }
.sz-work .sz-lead { margin: 6px 0 14px; font-size: 13px; line-height: 18px; }
.sz-leaf { background: #fff; border-radius: 4px; padding: 14px 14px 10px; margin-bottom: 14px; }
.sz-leaf i { display: block; height: 6px; border-radius: 3px; background: var(--scn-rule); margin-bottom: 8px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1100ms var(--scn-ease-appear); }
.sz-leaf.on i { transform: scaleX(1); }
.sz-leaf i:nth-child(2) { width: 82%; transition-delay: 250ms; } .sz-leaf i:nth-child(3) { width: 90%; transition-delay: 500ms; } .sz-leaf i:nth-child(4) { width: 56%; transition-delay: 750ms; }
.sz-stg li { display: flex; gap: 8px; align-items: center; font: 400 13px/18px var(--scn-ui); color: var(--scn-ink-2); padding: 3px 0; }
.sz-stg li .sz-ok { opacity: 0; transform: scale(.7); transition: opacity 180ms var(--scn-ease-appear), transform 180ms var(--scn-ease-appear); }
.sz-stg li.on { color: var(--scn-ink); } .sz-stg li.on .sz-ok { opacity: 1; transform: none; }

/* Готовый лист */
.sz-dis { font: 400 12px/16px var(--scn-ui); color: var(--scn-ink-2); }
.sz-sheet { background: var(--scn-sheet); border: 1px solid var(--scn-rule); border-radius: 4px; padding: 18px 18px 16px; font: 400 13px/20px var(--scn-doc); }
.sz-to { text-align: right; font-size: 11px; line-height: 15px; color: var(--scn-ink-2); margin-bottom: 12px; }
.sz-ti { text-align: center; font-weight: 650; letter-spacing: .06em; font-size: 14px; }
.sz-sub { text-align: center; font-size: 12px; color: var(--scn-ink-2); margin-bottom: 10px; }
.sz-sheet p.cl { margin-bottom: 8px; }
.sz-sheet mark { background: transparent; border-bottom: 1px dotted var(--scn-edge); color: inherit; }
.sz-fn { color: var(--scn-action); font: 600 10px/1 var(--scn-ui); vertical-align: 5px; padding: 1px 3px; border-radius: 3px; }
.sz-fn.hl { background: var(--scn-mark); box-shadow: 0 0 0 3px var(--scn-mark); }
.sz-cl2.hl { background: var(--scn-mark); transition: background-color var(--scn-accent-dur) var(--scn-ease-appear); }
.sz-nt { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 180ms var(--scn-ease-appear), opacity 180ms var(--scn-ease-appear); }
.sz-nt > div { overflow: hidden; }
.sz-nt.on { grid-template-rows: 1fr; opacity: 1; }
.sz-norm { margin: 4px 0 6px; padding: 8px 10px; border-radius: 6px; background: var(--scn-paper); font: 400 12px/16px var(--scn-ui); }
.sz-norm b { color: var(--scn-action); margin-right: 6px; }
.sz-norm span { display: flex; gap: 6px; align-items: center; color: var(--scn-ink-2); margin-top: 4px; }
.sz-norm .sz-ok { width: 12px; height: 12px; }
.sz-norm .sz-ok::after { left: 2.5px; top: .5px; width: 3.5px; height: 6px; }

/* Просмотр PDF — на весь экран телефона */
.sz-pdf { background: #E6E5E0; }
.sz-pdf .sz-hd { background: #2B2B28; color: #ECEBE6; border: 0; font: 500 13px/18px var(--scn-ui); }
.sz-pdf .sz-hd span:first-child { flex: 1; }
.sz-page { position: absolute; left: 14px; right: 14px; top: 86px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 26px 22px; font: 400 11px/17px var(--scn-doc); }
.sz-page p { margin-bottom: 8px; }
.sz-pdf.scn-s { transform: translateY(40px) scale(.96); }
.sz-pdf.scn-s.on { transform: none; }
.sz-pdf.scn-s.off { transform: none; opacity: 0; }

@media (max-width: 400px) { .scn--sz .scn__pad { padding: 32px 10px 20px; } }

/* «Новый документ» потоком: поле растёт вместе с текстом, состояние и подбор — под ним */
.sz-flow { top: 104px; }
.sz-flow .sz-lead { margin: 6px 0 14px; }
.sz-flow .sz-lbl { margin-bottom: 6px; }
.sz-flow .sz-fld { width: 100%; }
.sz-under { position: relative; }
.sz-freq { margin-top: 18px; transition: opacity 200ms var(--scn-ease-appear); }
.sz-freq.gone { opacity: 0; }
.sz-freq ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sz-freq li { font: 400 13px/18px var(--scn-ui); padding: 7px 12px; border-radius: 999px; background: var(--scn-sheet); border: 1px solid var(--scn-quiet); }
.sz-under .sz-busy, .sz-under .sz-res { position: absolute; left: 0; right: 0; top: 0; }
.sz-found { margin-bottom: 4px; font: 400 13px/18px var(--scn-ui); color: var(--scn-ink-2); }
.sz-sheet.hl { box-shadow: 0 0 0 4px rgba(36, 59, 128, .14); transition: box-shadow var(--scn-accent-dur) var(--scn-ease-appear); }
.sz-fld.one { min-height: 48px; height: 48px; padding-top: 12px; white-space: nowrap; overflow: hidden; }
.sz-fld.one > span { display: inline-block; }
.sz-fld.one .sz-ph-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.sz-fld.big::before { top: 16px; } .sz-fld.big::after { top: 27px; }

/* Шапка и статус-бар — над камерой, всегда на месте */
.sz-top { position: absolute; left: 0; right: 0; top: 0; height: 72px; z-index: 6; background: var(--scn-paper); transition: opacity var(--scn-swap-dur) var(--scn-ease-swap); }
.sz-top.hide { opacity: 0; }
.sz-fdock { z-index: 6; opacity: 0; transform: translateY(8px); transition: opacity var(--scn-swap-dur) var(--scn-ease-swap), transform var(--scn-swap-dur) var(--scn-ease-swap); }
.sz-fdock.on { opacity: 1; transform: none; }
.sz-new.hl, .sz-r.hl { background: var(--scn-sel-on); }
.sz-next { opacity: 0; transition: opacity 220ms var(--scn-ease-appear); }
.sz-next.on { opacity: 1; }
.sz-spin { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid var(--scn-action); border-right-color: transparent; }
.sz-pfn { font-size: 9px; line-height: 13px; color: var(--scn-ink-2); border-top: 1px solid var(--scn-rule); padding-top: 6px; }
.sz-ph { box-shadow: 0 0 0 9px #1D1D1B, 0 0 0 10px #3A3A36, 0 14px 30px -14px rgba(26,26,24,.25), 0 0 30px 12px color-mix(in srgb, var(--scn-halo) 40%, transparent), 0 0 70px 20px color-mix(in srgb, var(--scn-halo) 25%, transparent), 0 0 130px 30px color-mix(in srgb, var(--scn-halo) 12%, transparent); }  /* корпус + мягкий ореол */
.sz-s2 .sz-flow { top: 104px; }
.sz-in { display: block; overflow: hidden; white-space: nowrap; }
.sz-in > span { display: inline-block; }
.sz-in .sz-ph-t { display: block; overflow: hidden; text-overflow: ellipsis; }
.sz-in.has-v .sz-ph-t { display: none; }
.sz-flow .sz-fld.big { min-height: 48px; height: 48px; padding-top: 12px; }
.sz-in { position: relative; min-height: 22px; }
.sz-in .sz-ph-t { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; }

/* Просмотр PDF: шапка «pretenziya.pdf» и рамка неподвижны, прокручиваются только страницы */
.sz-pdf .sz-hd { z-index: 3; }
.sz-pv { position: absolute; left: 0; right: 0; top: 72px; bottom: 0; overflow: hidden; }
.sz-pv .sz-page { top: 14px; }
.sz-pdf.scn-s, .sz-pdf.scn-s.on, .sz-pdf.scn-s.off { transform: none; }
.sz-pgc { margin-right: 14px; color: #B4B3AC; font-size: 12px; }
.sz-s6.scn-s { transition-duration: 400ms; }   /* финал: растворение в чистый фон 400 мс */
.sz-s1.scn-s.on { transition-delay: 600ms; }  /* после финала — пауза 300 мс, затем кабинет */
.sz-pdf { background: #E6E5E0; }
.sz-fin { position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 5; padding: 14px 16px; border-radius: 12px; background: var(--scn-tint-done, #E5F0E8);
  box-shadow: 0 6px 20px -8px rgba(26,26,24,.3); opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--scn-ease-appear), transform 300ms var(--scn-ease-appear); }
.sz-fin.on { opacity: 1; transform: none; }
.sz-fin p { display: flex; gap: 8px; align-items: center; font: 600 15px/20px var(--scn-ui); }
.sz-fin span { display: block; margin: 4px 0 0 22px; font: 400 13px/18px var(--scn-ui); color: var(--scn-ink-2); }

/* ─── scenes/razbor.css ─── */
/* Сцена «Разбор договора» — компьютер. Экраны повторяют приложение: «Вопрос по документам»
   (src/components/AskDocumentsModal.tsx, ask-documents-presentation.ts) и лист ответа
   (analysis-sheet-model.ts, рендер dokument.js consultPage: вывод, риски с «Что сделать», нормы на поле). */
.scn--rz .scn__pad { padding: 40px 24px 32px; }
.scn--rz .scn__box { width: 100%; }
.rz-win { position: absolute; left: 200px; top: 16px; width: 1024px; height: 728px; z-index: 2; border-radius: 16px; overflow: hidden; background: var(--scn-paper);
  box-shadow: 0 0 0 1px rgba(26,26,24,.08), 0 8px 20px -10px rgba(26,26,24,.12), var(--scn-halo-ring); }  /* волосяная линия + ореол */  /* ореол вместо рамки-панели */
.rz-chr { background: linear-gradient(#F6F6F3, #EFEEEA) !important; border-bottom: 1px solid rgba(26,26,24,.06) !important; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: #EDECE7; border-bottom: 1px solid var(--scn-rule); }
.rz-chr i { width: 11px; height: 11px; border-radius: 50%; background: #D3D2CB; }
.rz-chr span { margin: 0 auto; width: 340px; height: 24px; border-radius: 6px; background: #F8F8F5; font: 400 12px/24px var(--scn-ui); color: var(--scn-ink-2); text-align: center; }
.rz-app { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; display: flex; }
.rz-side { width: 210px; flex: none; border-right: 1px solid var(--scn-rule); padding: 18px 14px; }
.rz-logo { font: 600 17px/22px var(--scn-ui); color: var(--scn-action); margin: 0 0 18px 6px; }
.rz-newb { display: block; height: 34px; border-radius: 6px; background: var(--scn-action); color: #fff; font: 500 13px/34px var(--scn-ui); text-align: center; margin-bottom: 18px; }
.rz-nav p { display: flex; justify-content: space-between; font: 400 13px/18px var(--scn-ui); padding: 8px 8px; border-radius: 6px; }
.rz-nav p b { font-weight: 400; color: var(--scn-ink-2); }
.rz-nav p.on { background: var(--scn-sel-on); font-weight: 500; }
.rz-main { position: relative; flex: 1; }
.rz-main .scn-s { padding: 18px 40px; }
.rz-back { font: 400 13px/18px var(--scn-ui); color: var(--scn-ink-2); }
.rz-h1 { font: 650 28px/34px var(--scn-doc); margin: 8px 0 4px; letter-spacing: -.01em; }
.rz-lead { font: 400 14px/20px var(--scn-ui); color: var(--scn-ink-2); }
.rz-h { font: 600 15px/20px var(--scn-ui); margin: 0 0 8px; }

/* «Вопрос по документам» */
.rz-ask { display: flex; gap: 28px; margin-top: 22px; }
.rz-form { flex: 1; }
.rz-zone { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 18px; border: 1.5px dashed var(--scn-quiet); border-radius: 12px; background: var(--scn-sheet);
  transition: border-color var(--scn-accent-dur) var(--scn-ease-appear), background-color var(--scn-accent-dur) var(--scn-ease-appear); }
.rz-zone.drag { border-color: var(--scn-action); background: #EEF0F7; }
.rz-zone div { flex: 1; }
.rz-zone b { display: block; font: 500 15px/20px var(--scn-ui); }
.rz-zone small { display: block; font: 400 12px/17px var(--scn-ui); color: var(--scn-ink-2); margin-top: 2px; }
.rz-zone > span { flex: none; height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--scn-quiet); font: 500 13px/32px var(--scn-ui); }
.rz-att { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: var(--scn-tint); font: 400 13px/18px var(--scn-ui);
  opacity: 0; transform: translateY(-6px); transition: opacity 220ms var(--scn-ease-appear), transform 220ms var(--scn-ease-appear); }
.rz-att.on { opacity: 1; transform: none; }
.rz-att em { font-style: normal; color: var(--scn-ink-2); margin-left: auto; }
.rz-pdf { width: 18px; height: 22px; border-radius: 2px; background: #fff; border: 1px solid var(--scn-edge); position: relative; flex: none; }
.rz-pdf::after { content: 'PDF'; position: absolute; left: -3px; bottom: 2px; padding: 0 2px; background: var(--scn-fault); color: #fff; font: 700 6px/9px var(--scn-ui); border-radius: 1px; }
.rz-ta { margin-top: 20px; }
.rz-fld { min-height: 92px; padding: 10px 12px; border: 1px solid var(--scn-edge); border-radius: 6px; background: var(--scn-sheet); font: 400 15px/22px var(--scn-ui); }
.rz-fld.foc { border-color: var(--scn-action); box-shadow: 0 0 0 1px var(--scn-action); }

.rz-fld i { font-style: normal; color: var(--scn-ink-2); }
.rz-sum { width: 270px; flex: none; align-self: flex-start; padding: 18px; border-radius: 12px; background: var(--scn-tint); }
.rz-sum li { font: 400 13px/18px var(--scn-ui); padding: 3px 0 3px 18px; position: relative; }
.rz-sum li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 7px; height: 4px; border: solid var(--scn-done); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.rz-price { font: 600 26px/32px var(--scn-ui); margin: 14px 0 0; font-variant-numeric: tabular-nums; }
.rz-sum small { display: block; font: 400 12px/17px var(--scn-ui); color: var(--scn-ink-2); margin-bottom: 12px; }
.rz-btn { display: block; position: relative; height: 44px; border-radius: 6px; background: var(--scn-action); color: #fff; font: 500 14px/44px var(--scn-ui); text-align: center; overflow: hidden; }
.rz-btn.press { background: var(--scn-action-press); }
.rz-btn span { position: absolute; inset: 0; transition: opacity 200ms var(--scn-ease-appear), transform 200ms var(--scn-ease-appear); }
.rz-btn span + span { opacity: 0; transform: translateY(8px); }
.rz-btn.on span:first-child { opacity: 0; transform: translateY(-8px); }
.rz-btn.on span + span { opacity: 1; transform: none; }

/* Файл на рабочем столе и курсор */
.scn-cur { position: absolute; left: 0; top: 0; width: 18px; height: 24px; z-index: 35; pointer-events: none; transform-origin: 2px 2px; will-change: transform; }

/* Готовим ответ */
.rz-work { margin-top: 26px; max-width: 520px; padding: 22px 24px; border-radius: 12px; background: var(--scn-tint); }
.rz-work li { display: flex; gap: 8px; align-items: center; font: 400 14px/20px var(--scn-ui); color: var(--scn-ink-2); padding: 4px 0; }
.rz-work li.on { color: var(--scn-ink); }
.rz-work li .sz-ok { opacity: 0; } .rz-work li.on .sz-ok { opacity: 1; transition: opacity 180ms var(--scn-ease-appear); }
.rz-work .rz-lead { margin: 4px 0 12px; }

/* Лист ответа */
.rz-stat { display: flex; align-items: center; gap: 8px; font: 400 13px/18px var(--scn-ui); margin-top: 8px; }
.rz-stat b { font-weight: 600; }
.rz-stat .rz-dlb { margin-left: auto; height: 34px; padding: 0 14px; border-radius: 6px; background: var(--scn-action); color: #fff; font: 500 13px/34px var(--scn-ui); }
.rz-grid { display: flex; gap: 22px; margin-top: 16px; }
.rz-sheet { flex: 1; background: var(--scn-sheet); border: 1px solid var(--scn-rule); border-radius: 4px; padding: 18px 26px 12px; font: 400 14px/21px var(--scn-doc); }
.rz-sheet h3 { font: 650 15px/20px var(--scn-doc); margin: 0 0 6px; }
.rz-sheet h3 + p { margin-bottom: 12px; }
.rz-risk { display: flex; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 6px; transition: background-color var(--scn-accent-dur) var(--scn-ease-appear); }
.rz-risk.hl { background: var(--scn-sel-on); }
.rz-lv { flex: none; width: 66px; padding-top: 2px; font: 500 11px/16px var(--scn-ui); color: var(--scn-ink-2); }
.rz-lv.hi { color: var(--scn-fault); }
.rz-risk dt { font-weight: 650; font-size: 14px; line-height: 19px; }
.rz-risk dd { font-size: 13px; line-height: 19px; color: var(--scn-ink); }
.rz-risk dd b { font-family: var(--scn-ui); font-weight: 500; font-size: 12px; }
.rz-ev { font: 400 12px/17px var(--scn-ui); color: var(--scn-ink-2); }
.rz-ev u { text-decoration: none; padding: 0 2px; border-radius: 2px; transition: background-color var(--scn-accent-dur) var(--scn-ease-appear); }
.rz-ev u.ac { background: var(--scn-mark); color: var(--scn-ink); }
.rz-fn { color: var(--scn-action); font: 600 10px/1 var(--scn-ui); vertical-align: 5px; padding: 1px 3px; border-radius: 3px; }
.rz-fn.hl { background: var(--scn-mark); }
.rz-mg { width: 236px; flex: none; font: 400 12px/17px var(--scn-ui); }
.rz-mg h4 { font: 600 12px/17px var(--scn-ui); margin: 0 0 4px; }
.rz-mg > p { color: var(--scn-ink-2); margin-bottom: 14px; }
.rz-n { padding: 6px 8px; margin: 0 -8px 2px; border-radius: 6px; transition: background-color var(--scn-accent-dur) var(--scn-ease-appear); }
.rz-n.hl { background: var(--scn-mark); }
.rz-n > b { color: var(--scn-action); margin-right: 6px; font-weight: 600; }
.rz-n > span { display: flex; align-items: center; gap: 5px; color: var(--scn-ink-2); margin-top: 2px; }
.rz-n .sz-ok { width: 12px; height: 12px; } .rz-n .sz-ok::after { left: 2.5px; top: .5px; width: 3.5px; height: 6px; }
.rz-art { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 180ms var(--scn-ease-appear), opacity 180ms var(--scn-ease-appear); }
.rz-art > div { overflow: hidden; }
.rz-art.on { grid-template-rows: 1fr; opacity: 1; }
.rz-art p { margin-top: 6px; padding: 8px 10px; border-left: 2px solid var(--scn-action); background: #fff; font: 400 12px/17px var(--scn-doc); color: var(--scn-ink); }
.rz-next { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 18px; border-radius: 12px; background: var(--scn-tint); }
.rz-next .rz-btn { flex: none; padding: 0 18px; height: 40px; line-height: 40px; background: var(--scn-sheet); color: var(--scn-ink); border: 1px solid var(--scn-quiet); }
.rz-next .rz-btn.hl { background: var(--scn-press); }
.rz-next small { font: 400 12px/17px var(--scn-ui); color: var(--scn-ink-2); }

/* Телефон: только результат с рисками, без рамки браузера и поля */
.scn--rz.is-narrow .scn__pad { padding: 20px 10px 16px; }
.is-narrow .rz-win { left: 0; top: 0; width: 360px; height: 700px; border-radius: 20px; }
.is-narrow .rz-chr span { width: 220px; }
.is-narrow .rz-side, .is-narrow .scn-cur, .is-narrow .rz-mg, .is-narrow .rz-dlb, .is-narrow .rz-next small { display: none; }
.is-narrow .rz-h1 { font-size: 22px; line-height: 28px; }
.is-narrow .rz-stat { flex-wrap: wrap; }
.is-narrow .rz-sheet { padding: 14px 16px 8px; }
.is-narrow .rz-lv { width: auto; }
.is-narrow .rz-risk { flex-direction: column; gap: 0; }
.is-narrow .rz-inl { display: grid; }
.rz-inl { display: none; }
.is-narrow .rz-next { padding: 12px; }
.is-narrow .rz-next .rz-btn { flex: 1; padding: 0 10px; font-size: 13px; }
.rz-scroll { transition: none; }
.rz-main { overflow: hidden; }

.rz-scroll { position: relative; }
/* Рабочий стол: окно папки «Загрузки» слева, частично под браузером; свет тот же — сверху-слева */
.rz-dl { position: absolute; left: 12px; top: 286px; width: 280px; z-index: 1; border-radius: 14px; background: #FBFBF9; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(26,26,24,.08), var(--scn-shadow); }
.rz-dlh { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #EDECE7; border-bottom: 1px solid var(--scn-rule); font: 600 12px/34px var(--scn-ui); }
.rz-dlh i { width: 9px; height: 9px; border-radius: 50%; background: #D3D2CB; }
.rz-dlh b { margin-left: 8px; font-weight: 600; }
.rz-dl ul, .rz-pick ul { padding: 6px; }
.rz-dl li, .rz-pick li { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 6px; font: 400 13px/18px var(--scn-ui); transition: background-color var(--scn-accent-dur) var(--scn-ease-appear); }
.rz-dl li em { display: none; }
.rz-dl li span { white-space: nowrap; }
.rz-pick li em { font-style: normal; margin-left: auto; color: var(--scn-ink-2); font-size: 12px; padding-right: 72px; }
.rz-pick li em { padding-right: 0; }
.rz-dl li.sel, .rz-pick li.sel { background: rgba(36,59,128,.12); }
.rz-dl li.sel .rz-ic { opacity: .45; }
.rz-ic { flex: none; width: 20px; height: 24px; border-radius: 3px; background: #fff; border: 1px solid var(--scn-edge); position: relative; }
.rz-ic::after { content: 'PDF'; position: absolute; left: -3px; bottom: 3px; padding: 0 2px; border-radius: 1px; background: var(--scn-fault); color: #fff; font: 700 6px/9px var(--scn-ui); }
.rz-ic--doc::after { content: 'DOC'; background: var(--scn-action); }
.rz-ic--img::after { content: 'JPG'; background: var(--scn-done); }
/* Перетаскиваемый значок: подложка, тень растёт с подъёмом */
.rz-ghost { position: absolute; left: 0; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 8px; background: #fff;
  font: 500 12px/16px var(--scn-ui); opacity: 0; pointer-events: none; transform-origin: 0 0;
  box-shadow: 0 0 0 1px rgba(26,26,24,.10), -4px calc(4px + 10px * var(--lift, 0)) calc(8px + 16px * var(--lift, 0)) rgba(26,26,24,calc(.12 + .12 * var(--lift, 0))); transition: opacity 150ms var(--scn-ease-appear); }
.rz-ghost.on { opacity: 1; }
.rz-ghost.sit { opacity: 0; transition: opacity 180ms var(--scn-ease-appear); }
.rz-main .scn__cam { overflow: visible; }
/* Телефон: поле, выбор файла из «Загрузок» листом снизу */
.is-narrow .rz-dl, .is-narrow .rz-ghost { display: none; }
.is-narrow .rz-ask { flex-direction: column; gap: 14px; margin-top: 14px; }
.is-narrow .rz-sum { width: auto; align-self: stretch; padding: 14px; }
.is-narrow .rz-sum ul, .is-narrow .rz-sum > .rz-h { display: none; }
.is-narrow .rz-price { margin: 0; font-size: 20px; line-height: 26px; }
.is-narrow .rz-zone { flex-wrap: wrap; padding: 14px; gap: 10px; }
.is-narrow .rz-zone small br { display: none; }
.is-narrow .rz-fld { min-height: 70px; font-size: 14px; line-height: 20px; }
.is-narrow .rz-ta { margin-top: 12px; }
.is-narrow .rz-lead { font-size: 13px; line-height: 18px; }
.is-narrow .rz-s1 { overflow: hidden; }
.is-narrow .rz-win { box-shadow: 0 0 0 1px rgba(26,26,24,.08), 0 10px 30px -12px rgba(26,26,24,.25); }
.is-narrow .rz-main .scn-s { padding: 14px 16px; }
.is-narrow .rz-zone.drag { border-color: var(--scn-quiet); background: var(--scn-sheet); }
.is-narrow .rz-zone { flex-direction: column; align-items: flex-start; }
.is-narrow .rz-next .rz-btn { height: auto; line-height: 18px; padding: 11px 12px; white-space: normal; text-align: left; }
.is-narrow .rz-next .rz-btn span { position: static; display: block; }

/* Телефон: «Выбрать файлы» → растворение 250 мс (системное окно не рисуем) → файл уже в списке */
.rz-cut { position: absolute; inset: 0; z-index: 8; background: var(--scn-paper); opacity: 0; pointer-events: none; transition: opacity 125ms var(--scn-ease-swap); }
.rz-cut.on { opacity: 1; }
.scn--rz:not(.is-narrow) .rz-cut { display: none; }
.is-narrow .rz-att { transform: translateY(6px); transition: opacity 200ms var(--scn-ease-appear), transform 200ms var(--scn-ease-appear), background-color var(--scn-accent-dur) var(--scn-ease-appear); }
.is-narrow .rz-att.mon { opacity: 1; transform: none; }
.is-narrow .rz-att.mhl { background: var(--scn-mark); }
.is-narrow .rz-go.mon span:first-child { opacity: 0; transform: translateY(-8px); }
.is-narrow .rz-go.mon span + span { opacity: 1; transform: none; }
.rz-s3.scn-s { transform: translateY(12px); transition-duration: 500ms; }  /* лист ответа: сдвиг 12 px + растворение 500 мс */
.rz-s3.scn-s.on { transform: none; }
.rz-s3.scn-s.off { transform: none; }
.rz-n.lk > b, .rz-fn.lk { background: rgba(36,59,128,.14); border-radius: 3px; transition: background-color 200ms var(--scn-ease-appear); }  /* тонкая связь: номер нормы и сноска */
.rz-art { transition: grid-template-rows 400ms var(--scn-ease-appear), opacity 400ms var(--scn-ease-appear); }
.rz-art:not(.on) { transition-duration: 300ms; }
.rz-run { display: flex; align-items: center; gap: 8px; }
.sz-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid var(--scn-action); border-right-color: transparent; }

/* ─── scenes/kreativ.css ─── */
/* Композиция сцен в лендинге «Рабочий стол» (kreativ3). Сцены лежат прямо на столе — без листа секции. */
.kr3-d #kak > .wrap, .kr3-d #razbor > .wrap { background: none; box-shadow: none; rotate: 0deg; padding-left: var(--gut, 24px); padding-right: var(--gut, 24px); }
.kr3-d #kak > .wrap::after, .kr3-d #razbor > .wrap::after { display: none; }
.kr-js .kr3-d #kak:not(.kr-on) > .wrap, .kr-js .kr3-d #razbor:not(.kr-on) > .wrap { transform: none; }

/* «Как это работает»: слева текст, справа телефон; по оптическому центру */
@media (min-width: 1024px) {
  .kak2 { display: grid; grid-template-columns: minmax(0, 460px) 600px; justify-content: center; column-gap: 48px; align-items: center; }
  .kak2__t { padding-bottom: 72px; }   /* оптический центр: текст чуть выше середины телефона с капсулой */
  .kak2 [data-scene="sozdanie"] { width: 600px; }
  /* телефон не выше окна просмотра: ширина рамки от высоты экрана */
  .kak2 .scn--sz .scn__box { max-width: min(370px, calc((100vh - 230px) * 370 / 760)) !important; }
}
.kak2__go { margin-top: 28px; }
@media (max-width: 1023px) { .kak2__t { margin-bottom: 24px; } .kak2__go { display: none; } }

/* «Разбор»: заголовок узкой колонкой по центру, сцена во всю ширину контейнера, поля ≥ 48 px */
.kr3-d #razbor .sec__h, .kr3-d #razbor .sec__lead { margin-left: auto; margin-right: auto; text-align: center; max-width: 720px; }
.kr3-d #razbor .rz-cta { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 24px 0 36px; }
@media (min-width: 1024px) { .kr3-d #razbor > .wrap { max-width: 1340px; padding-left: 48px; padding-right: 48px; } }
/* ореолы не налезают на соседние листы: воздух сверху и снизу блока со сценой */
.kr3-d #kak, .kr3-d #razbor { padding-bottom: 40px; }

/* Шаги рядом со сценой (как в креативе A): рисунок одной линией, номер, заголовок Literata, строка описания.
   Активный — чернильно-синий с тонкой чертой слева; переход к следующему — 400 мс; полосы-прогресса нет. */
.lst { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 6px; }
.lst .scn-cap { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto auto; column-gap: 16px;
  padding: 12px 12px 12px 20px; cursor: pointer; border-radius: 8px; color: var(--ink-2, #63635C); transition: color 400ms cubic-bezier(.4,0,.2,1), background-color 180ms; }
.lst .scn-cap::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--action, #243B80);
  opacity: 0; transform: scaleY(.4); transition: opacity 400ms cubic-bezier(.4,0,.2,1), transform 400ms cubic-bezier(.4,0,.2,1); }
.lst .scn-cap.on::before { opacity: 1; transform: none; }
.lst .scn-cap__bar { display: none; }
/* Хвосты (V-93, 01.10 23:55): рисунок 80 px, неактивные — ink-2 с непрозрачностью 0,7 */
.lst .lst__ic { grid-row: 1 / 3; align-self: center; width: 80px; opacity: .7; transition: opacity 400ms; }
.lst .lst__ic svg { width: 80px; height: auto; display: block; }
.lst b { display: none; }
.lst em { font: 600 19px/26px var(--font-doc, 'Literata', serif); font-style: normal; color: inherit; }
.lst em::before { content: counter(lst) '. '; }
.lst { counter-reset: lst; } .lst li { counter-increment: lst; }
.lst small { font: 400 14px/20px var(--font-ui, 'Golos Text', sans-serif); color: var(--ink-2, #63635C); margin-top: 2px; }
.lst .scn-cap.on { color: var(--action, #243B80); }
.lst .scn-cap.on .lst__ic { opacity: 1; }
.lst .scn-cap:focus-visible { outline: 2px solid var(--action, #243B80); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lst .scn-cap:hover { background: rgba(26,26,24,.04); } }
/* «Разбор»: строкой над окном */
.lst--row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto 28px; }
.lst--row .scn-cap { grid-template-columns: 48px 1fr; column-gap: 12px; }
.lst--row .lst__ic, .lst--row .lst__ic svg { width: 48px; }
.lst--row em { font-size: 17px; line-height: 24px; }
/* подпись под сценой без капсулы */
[data-nocaps] .scn__note { margin-top: 12px; }
/* Телефон: три номера в строку, подпись — только у активного */
@media (max-width: 760px) {
  .lst, .lst--row { display: flex; gap: 8px; margin: 0 0 16px; max-width: none; }
  .lst li { flex: 0 0 auto; } .lst li:has(.on) { flex: 1 1 auto; min-width: 0; }
  .lst .scn-cap { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; }
  .lst .lst__ic, .lst small { display: none; }
  .lst em { font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lst .scn-cap:not(.on) em { font-size: 0; } .lst .scn-cap:not(.on) em::before { font-size: 15px; content: counter(lst); }
  .lst .scn-cap::before { top: 8px; bottom: 8px; }
}

/* На 1024–1279 заголовки шагов идут в одну строку: колонка сцены уже, кегль ниже */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lst em { font-size: 16px; line-height: 22px; }
  .lst .scn-cap { padding-right: 8px; }
}