/* Taipy - витрина: вечер «Аналитики и Автопилота» (/product/analytics/, HANDOFF-15,
   лоск - HANDOFF-18). Подключается после showcase.css только на этой странице.
   /product/ - утро и день, Студия - ночь, здесь - закат: неделя прошла, смотрим
   итоги. Страница переопределяет цветовые токены витрины по
   body[data-page="analytics"], общие блоки берут их сами. Абрикос ведет акт I
   (роль «Проверяет»), индиго - правки акта II (роль «Пишет»), розовая точка -
   только касание человека. Графики - фиолетовые во всех главах (26.09).

   Типографика живых модулей - одна шкала на всю страницу (владелец 26.09
   вечером: «шрифты как попало по размеру», «жирно», «крупно»). Размеры -
   натуральные px интерфейса (на экране они x масштаб модуля 0.8-1.2), тонкая
   шкала экранов (хэндоф 18, раздел 0): мета и чипы 11, текст 12-12.5,
   заголовки внутри модуля 13-14, цифры 19, одна крупная цифра модуля 26.
   Веса 400 / 500 / 600, без 700. Числа - табличные. Знаки площадок - плитками
   одного размера (_brand.html tile). Классы страницы - с префиксом an-. */

.vt-body[data-page="analytics"] {
  --vt-paper: #FDF8F4;
  --vt-paper-2: #F7EEE8;
  --vt-line: #F1E6DE;
  --vt-line-2: #E9DBD1;
  /* мелкий текст на вечерней бумаге - AA: подписи и кикеры чуть темнее дневных */
  --vt-ink-3: rgba(28, 25, 23, .64);
  --vt-apricot-ink: #A65A0C;
  --vt-pink-ink: #C21F7E;
  /* графики - фиолетовые (владелец 26.09: без желтого): линия, полосы, точки -
     от 3:1 к белому листу; вторичные метки - лавандой, ниже нормы - серым */
  --an-chart: #5B4FE0;
  --an-chart-ink: #3E32C8;
  --an-chart-2: #C9C2F5;
  --an-indigo: #4F46E5;
  --an-gray: #C3BDD3;
  /* шкала модулей */
  --an-f-cap: 11px;
  --an-f-sm: 12px;
  --an-f-md: 12.5px;
  --an-f-h: 13px;
  --an-f-lg: 14px;
  --an-f-num: 19px;
  --an-f-big: 26px;
  --an-mute: rgba(28, 25, 23, .62);
  --an-mute-2: rgba(28, 25, 23, .54);
  --an-hair: #ECE9F5;
  /* ритм страницы: у всех крупных блоков то же поле, что у глав (.vt-ch) -
     между любыми двумя блоками одинаковый воздух */
  --an-sec: clamp(56px, 7vw, 112px);
}
[data-page="analytics"] .vt-quad__ui { --vt-ink-3: rgba(28, 25, 23, .6); }

/* краски блоков: абрикос - «видно», индиго - «лучше», розовая - касание */
.an-ink--apricot { --an-c: #B8650F; --an-c-mark: #D9731A; --an-c-soft: rgba(246, 160, 77, .16); --an-c-line: rgba(217, 115, 26, .38); --an-c-tint: #FFF6EC; }
.an-ink--indigo { --an-c: #4F46E5; --an-c-mark: #4F46E5; --an-c-soft: rgba(79, 70, 229, .09); --an-c-line: rgba(79, 70, 229, .32); --an-c-tint: #F5F3FF; }
.an-ink--pink { --an-c: #C21F7E; --an-c-mark: #FF48B0; --an-c-soft: rgba(255, 72, 176, .11); --an-c-line: rgba(255, 72, 176, .34); --an-c-tint: #FFF2F8; }

/* ---------- первый экран ----------
   Владелец 26.09 вечером: карточка «зажата между монитором и краем», шрифты
   крупноваты. Карточка стоит по центру спокойной стены слева с одним полем до
   края окна и до ноутбука, текст - в три яруса: заголовок в две строки, лид в
   три, кнопки в одну строку, под ними тихая строка доверия. Кегль заголовка -
   от ширины карточки (container), чтобы строки не переносились. */
.an-hero { background: linear-gradient(180deg, #F3E2EC 0%, #FBE8DC 100%); }
.an-hero .vt-hero__card { container: an-card / inline-size; }
.an-hero__kicker { margin-bottom: 14px; }
/* на стекле поверх вечерней стены кикер и строка доверия темнее - AA 4.5:1
   к самому светлому месту фона под ними (tools/an_contrast.js) */
.an-hero .an-hero__kicker { color: #6E3804; }
.an-hero .vt-hero__trust { color: rgba(28, 25, 23, .8); }
/* вторая строка «Понятно, что поправить.» - 12.4 em: всегда одной строкой */
.an-hero .vt-hero__h1 { font-size: clamp(22px, calc(100cqi / 13.6), 29px); line-height: 1.14; letter-spacing: -.024em; }
.an-hero .vt-hero__lead { margin-top: 12px; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.an-hero .vt-hero__cta { margin-top: 22px; gap: 8px; }
.an-hero .vt-hero__cta .vt-btn { height: 44px; }
.an-hero .vt-hero__cta .vt-btn--brand { padding: 0 18px; }
.an-hero .vt-hero__cta .vt-btn--glass { padding: 0 16px; }
.an-hero .vt-hero__trust { margin-top: 16px; gap: 8px 12px; font-size: 13px; }
.an-marks { display: inline-flex; align-items: center; gap: 6px; }
.an-mark, .an-mark img, .an-mark svg { display: block; width: 20px; height: 20px; }
/* узкая карточка (1200-1400 px): кнопки друг под другом во всю ширину */
@container an-card (max-width: 352px) {
  .an-hero .vt-hero__cta { flex-direction: column; }
  .an-hero .vt-hero__cta .vt-btn { width: 100%; }
}
.an-hero .vt-quad--screen .vt-quad__ui { box-shadow: 0 0 0 1px rgba(30, 20, 50, .10); }
@media (min-width: 1200px) {
  /* карточка - на спокойной стене заката слева (левые --wall-f арта); поле
     до края окна и до рамки ноутбука одно - --gut */
  [data-page="analytics"] .vt-hero__copy.vt-wrap {
    --aw: max(100cqw, calc(100cqh * var(--arn)));
    --al: clamp(calc(100cqw - var(--aw)), calc(100cqw * var(--px) - var(--aw) * var(--fx)), 0px);
    --wall: calc(var(--al) + var(--aw) * var(--wall-f, .4));
    --gut: clamp(28px, 2.7vw, 52px);
    --cw: min(520px, calc(var(--wall) - 2 * var(--gut)));
  }
  .an-hero .vt-hero__card { padding: 26px 24px 22px; }
  .an-glass {
    background: radial-gradient(90% 70% at 100% 0%, rgba(255, 214, 170, .26) 0%, transparent 55%),
                linear-gradient(135deg, rgba(255, 255, 255, .52) 0%, rgba(255, 255, 255, .30) 100%);
  }
}
@media (min-width: 1680px) {
  .an-hero .vt-hero__lead { font-size: 16px; }
}

/* ---------- подложки сцен, пока нет арта ----------
   Рисуют мир по тем же углам, что и арт: листы и корпуса стоят ровно под
   поверхностями, интерфейс ложится по data-quad. С артом не выводятся. */
.an-ph { overflow: hidden; background: #F4EDE2; }
.an-ph > span, .an-ph > svg { position: absolute; pointer-events: none; }
.an-ph--hero, .an-ph--hero-m { background: #EAD6E4; }
.an-ph__sky { inset: 0; background: linear-gradient(180deg, #A898D8 0%, #CDB0DA 24%, #EFBAB4 44%, #FACDA4 56%, #FCE0C2 66%); }
.an-ph__sun { left: 21%; top: 47%; width: 12%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #FFE7C2 0 30%, #FFC98E 31% 44%, rgba(255, 201, 142, .35) 45% 58%, rgba(255, 201, 142, 0) 72%); }
.an-ph__sun--m { left: 74%; top: 26%; width: 30%; }
.an-ph__ridge { inset: 0; width: 100%; height: 100%; }
.an-ph__r1 { fill: #C9B3DD; }
.an-ph__r2 { fill: #A792CC; }
.an-ph__r3 { fill: #8671B7; }
.an-ph__desk { left: 0; right: 0; top: 68.5%; bottom: 0; background: linear-gradient(180deg, #D8A57E 0%, #C38B66 22%, #A97353 100%); box-shadow: inset 0 3px 0 rgba(255, 236, 214, .5); }
.an-ph__desk--m { top: 79%; }
.an-ph__lamp { right: -8%; top: 4%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 219, 160, .62), rgba(255, 219, 160, 0)); }
.an-ph__laptop {
  left: calc(var(--l) * 1% - .9%); top: calc(var(--t) * 1% - 1.5%);
  width: calc(var(--w) * 1% + 1.8%); height: calc(var(--h) * 1% + 3.4%);
  border-radius: 14px; background: linear-gradient(180deg, #2F2A47 0%, #231F38 100%);
  box-shadow: 0 34px 60px -34px rgba(40, 20, 60, .65), inset 0 0 0 1.5px rgba(255, 255, 255, .08);
}
.an-ph__laptop i { position: absolute; left: -8%; right: -8%; top: 100%; height: 7%; background: linear-gradient(180deg, #D9D2E6 0%, #A89FC0 100%); clip-path: polygon(4% 0, 96% 0, 100% 62%, 98.5% 100%, 1.5% 100%, 0 62%); }
.an-ph__phone {
  left: calc(var(--l) * 1% - .5%); top: calc(var(--t) * 1% - .95%);
  width: calc(var(--w) * 1% + 1%); height: calc(var(--h) * 1% + 1.9%);
  border-radius: 24px; background: #1F1B2E;
  box-shadow: 0 26px 44px -24px rgba(30, 15, 50, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
}
.an-ph__phone i { position: absolute; left: 32%; right: 32%; top: 100%; height: 4.5%; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #8E86A6, #6F6788); }
.an-ph__phone--m { left: calc(var(--l) * 1% - 1.4%); top: calc(var(--t) * 1% - .9%); width: calc(var(--w) * 1% + 2.8%); height: calc(var(--h) * 1% + 1.8%); border-radius: 44px; }
.an-ph__phone--m i { display: none; }
/* печатный стол сверху: кремовая бумага, растровые круги трех красок, вечерний свет из окна */
.an-ph--desk { background-color: #F4ECE0; background-image: radial-gradient(rgba(120, 88, 60, .06) 1px, transparent 1.3px); background-size: 7px 7px; }
.an-ph__ring { aspect-ratio: 1; border-radius: 50%; opacity: .55;
  background: radial-gradient(var(--c) 1.7px, transparent 2.1px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, #000 97%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, #000 97%, transparent 100%); }
.an-ph__ring--a { --c: #F6A04D; left: 2%; top: 5%; width: 26%; }
.an-ph__ring--p { --c: #FF48B0; left: 7%; top: 66%; width: 17%; opacity: .45; }
.an-ph__ring--i { --c: #4F46E5; left: 80%; top: 64%; width: 22%; opacity: .35; }
.an-ph__shade { inset: 0; background: linear-gradient(118deg, rgba(255, 210, 160, .30) 0%, rgba(255, 210, 160, 0) 42%, rgba(96, 64, 128, 0) 60%, rgba(96, 64, 128, .12) 100%); }
.an-ph__sheet {
  left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  background: #FFFDF9; border-radius: 7px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 34px -20px rgba(80, 44, 30, .48), 0 4px 10px -6px rgba(80, 44, 30, .3);
}
.an-ph__device {
  left: calc(var(--l) * 1% - .9%); top: calc(var(--t) * 1% - 1.35%);
  width: calc(var(--w) * 1% + 1.8%); height: calc(var(--h) * 1% + 2.7%);
  border-radius: 28px; background: #1F1B2E;
  box-shadow: 0 30px 50px -26px rgba(30, 15, 50, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .12);
}
.an-ph__grain { z-index: 1; opacity: .12; }
/* вечер дома: стена, окно с огнями поселка, лампа, столик */
.an-ph--home { background: linear-gradient(180deg, #D7C4E6 0%, #E9D1DE 55%, #F1D8CE 100%); }
.an-ph__wall { inset: 0; background: radial-gradient(70% 90% at 88% 10%, rgba(255, 220, 170, .55) 0%, rgba(255, 220, 170, 0) 60%); }
.an-ph__win { left: 7%; top: 11%; width: 29%; height: 52%; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #4E4288 0%, #7F66AA 52%, #E3A39D 100%); box-shadow: inset 0 0 0 7px #F1E5EF, 0 18px 30px -24px rgba(60, 30, 80, .5); }
.an-ph__win::before, .an-ph__win::after { content: ""; position: absolute; z-index: 1; background: #F1E5EF; }
.an-ph__win::before { left: calc(50% - 3px); top: 0; bottom: 0; width: 6px; }
.an-ph__win::after { top: 46%; left: 0; right: 0; height: 6px; }
.an-ph__win i { position: absolute; left: 7%; right: 7%; bottom: 10%; height: 26%;
  background: radial-gradient(#FFD88A 1.6px, transparent 2px) 0 0 / 22px 14px; opacity: .8;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
.an-ph__glow { left: 66%; top: -14%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 150, .7), rgba(255, 214, 150, 0)); }
.an-ph__table { left: 38%; right: 10%; top: 83%; bottom: -4%; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #C08C69 0%, #A06E50 100%); box-shadow: inset 0 3px 0 rgba(255, 230, 205, .45); }

/* ---------- живые модули: общее ---------- */
.an-app, .an-sheet, .an-top, .an-idx, .an-rep, .an-wish, .an-prop, .an-log, .an-ap, .an-lc {
  position: relative; width: 100%; height: 100%;
  font: 400 var(--an-f-md)/1.4 var(--vt-font); color: var(--vt-ink); letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
}
@keyframes an-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* экран аналитики: ноутбук первого экрана, монитор входа в раздел, телефон.
   Шапка 38, вкладки 34, цифры 71, заголовок графика и поля - LAP_CHROME в
   analytics_page.py: график забирает остальную высоту экрана */
.an-app { display: flex; flex-direction: column; background: #FCFBFF; }
.an-app__bar { flex: none; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; background: #fff; border-bottom: 1px solid var(--an-hair); }
.an-app__bar b { flex: none; font-size: var(--an-f-h); font-weight: 600; }
.an-app__bar > span { min-width: 0; font-size: var(--an-f-sm); color: var(--an-mute-2); white-space: nowrap; overflow: hidden; }
.an-seg { margin-left: auto; flex: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: #F2F0FA; font-style: normal; }
.an-seg i { font-style: normal; font-size: var(--an-f-cap); font-weight: 500; line-height: 14px; padding: 3px 8px; border-radius: 6px; color: var(--an-mute); }
.an-seg i.is-on { background: #fff; color: var(--an-chart-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(40, 30, 90, .12); }
.an-app__tabs { flex: none; display: flex; gap: 4px; padding: 0 8px; background: #fff; border-bottom: 1px solid var(--an-hair); }
.an-app__tabs span { padding: 8px 7px 9px; font-size: var(--an-f-sm); font-weight: 500; line-height: 16px; color: var(--an-mute-2); border-bottom: 1.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.an-app__tabs .is-on { color: var(--an-chart-ink); font-weight: 600; border-color: var(--an-chart); }
.an-kpi { flex: none; display: grid; gap: 8px; margin: 12px 14px 0; }
.an-kpi--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); }
.an-kpi > div { display: grid; align-content: space-between; gap: 5px; padding: 9px 11px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--an-hair); }
.an-kpi span { font-size: var(--an-f-cap); font-weight: 500; line-height: 14px; color: var(--an-mute); white-space: nowrap; }
.an-kpi b { font-size: var(--an-f-num); font-weight: 600; line-height: 21px; letter-spacing: -.02em; white-space: nowrap; }
.an-kpi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 12px 0; }
.an-kpi--2 span { white-space: normal; }
.an-app__chart { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; margin: 12px 14px 10px; }
.an-app__ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; font-size: var(--an-f-sm); font-weight: 600; line-height: 16px; }
.an-best { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: var(--an-f-cap); font-weight: 500; line-height: 14px; white-space: nowrap; padding: 4px 8px; border-radius: 7px; color: var(--an-chart-ink); background: #F2F0FD; box-shadow: inset 0 0 0 1px rgba(91, 79, 224, .18); }
.an-best svg { width: 12px; height: 12px; }
.an-best--m { align-self: flex-start; margin: 0 12px 14px; }
.an-app--m .an-app__status { flex: none; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: var(--an-f-cap); font-weight: 600; background: #fff; }
.an-app--m .an-app__status i { width: 20px; height: 9px; border-radius: 3px; border: 1.5px solid rgba(28, 25, 23, .45); }
.an-app--m .an-app__bar { height: 42px; padding: 0 12px 0 14px; }
.an-app--m .an-app__bar b { font-size: var(--an-f-lg); }
.an-app--m .an-app__tabs span { padding: 9px 8px 10px; }
.an-app--m .an-app__chart { justify-content: flex-start; margin: 14px 12px 8px; }

/* линия «Просмотры во времени»: одна серия, фиолетовая линия, легкая заливка,
   подписи оси - на своих датах, тонко */
.an-line { display: block; overflow: visible; }
.an-line__grid { stroke: #EEEBF6; stroke-width: 1; }
.an-line__base { stroke: #DCD7EA; stroke-width: 1; }
.an-line__gl { font: 400 10.5px var(--vt-font); fill: var(--an-mute-2); text-anchor: end; }
.an-line__tick { font: 400 10.5px var(--vt-font); fill: var(--an-mute-2); }
.an-line__area { fill: var(--an-chart); fill-opacity: .08; }
.an-line__path { fill: none; stroke: var(--an-chart); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.an-line__dot { fill: var(--an-chart); stroke: #fff; stroke-width: 2; }
.an-line__end { font: 600 var(--an-f-cap) var(--vt-font); fill: var(--vt-ink); text-anchor: end; }

/* вход в раздел «Аналитика» (монитор 400x225): площадки - одна таблица с
   волосяными разделителями, линии одного цвета */
.an-app--act .an-app__bar { height: 34px; }
.an-app--act .an-app__tabs span { padding: 7px 7px 8px; }
.an-plat { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 8px 14px 10px; }
.an-plat__hd { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; font-size: var(--an-f-sm); font-weight: 500; color: var(--an-mute); }
.an-plat__hd b { font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--vt-ink); }
.an-plat__list { border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--an-hair); }
.an-plat__r { display: grid; grid-template-columns: 104px minmax(0, 1fr) 46px; align-items: center; gap: 12px; height: 33px; padding: 0 12px; }
.an-plat__r + .an-plat__r { border-top: 1px solid var(--an-hair); }
.an-plat__n { display: flex; align-items: center; gap: 8px; font-size: var(--an-f-sm); font-weight: 500; white-space: nowrap; }
.an-plat__n i { flex: none; width: 16px; height: 16px; }
.an-plat__n img, .an-plat__n svg { display: block; width: 16px; height: 16px; }
.an-plat__l { display: block; width: 100%; height: 20px; overflow: visible; }
.an-plat__l path { fill: none; stroke: var(--an-chart); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.an-plat__r b { text-align: right; font-size: var(--an-f-sm); font-weight: 600; }

/* вход в раздел «Автопилот» (ноутбук 360x210): страница Автопилота */
.an-ap { display: flex; flex-direction: column; background: #FCFBFF; }
.an-ap__bar { flex: none; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--an-hair); }
.an-ap__bar b { font-size: var(--an-f-h); font-weight: 600; }
.an-ap__bar span { font-size: var(--an-f-sm); color: var(--an-mute-2); white-space: nowrap; overflow: hidden; }
/* меню разделов - шире, чтобы «Предложения» со счетчиком и подсветка «Что улучшить?»
   не выходили за разделитель (владелец 26.09: кружок почти вылезает за границу) */
.an-ap__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 136px minmax(0, 1fr); }
.an-ap__nav { display: grid; align-content: start; gap: 1px; padding: 10px 6px; background: #fff; border-right: 1px solid var(--an-hair); }
.an-ap__nav li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 7px; font-size: var(--an-f-sm); font-weight: 500; line-height: 16px; color: var(--an-mute); white-space: nowrap; }
.an-ap__nav li.is-on { color: var(--an-indigo); background: #F1EFFD; font-weight: 600; }
.an-ap__nav em { flex: none; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 10px/1 var(--vt-font); font-style: normal; font-variant-numeric: normal; color: #fff; background: var(--an-indigo); transition: transform .4s var(--vt-ease-in), opacity .3s ease; }
.an-ap__main { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 14px; }
.an-ap__main b { font-size: var(--an-f-h); font-weight: 600; }
.an-ap__field { align-self: stretch; padding: 7px 10px; border-radius: 8px; font-size: var(--an-f-sm); line-height: 1.4; color: var(--an-mute-2); background: #fff; box-shadow: inset 0 0 0 1px #DCD7EF; }
.an-ap__btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; font-size: var(--an-f-sm); font-weight: 600; color: #fff; background: var(--an-indigo); }
.an-ap__btn svg { width: 13px; height: 13px; }

/* бот: как в настоящем чате - сообщения прижаты к низу ленты и не
   растягиваются, фото поста - в своей пропорции (владелец 26.09 вечером:
   «пост вытянут», «перегружен») */
.an-bot .vt-bot__status { font-size: var(--an-f-cap); }
.an-bot .vt-bot__bar b { font-size: var(--an-f-h); font-weight: 600; }
.an-bot .vt-bot__bar span { font-size: 10.5px; }
.an-bot .vt-bot__feed { justify-content: center; gap: 8px; }
.an-bot .vt-msg { flex: none; }
.an-bot .vt-msg__ph { flex: none; min-height: 0; max-height: none; aspect-ratio: 16 / 10; }
.an-bot .vt-msg__badge { height: 22px; font-size: 10.5px; font-weight: 600; }
.an-bot .vt-msg__body { gap: 3px; padding: 9px 11px 11px; }
.an-bot .vt-msg h4 { font-size: var(--an-f-h); font-weight: 600; line-height: 1.25; }
.an-bot .vt-msg__tx { font-size: var(--an-f-sm); line-height: 1.4; }
.an-bot .vt-msg__acts { height: 46px; }
.an-bot .vt-acts > span:not(.vt-touch) { height: 30px; border-radius: 9px; font-size: var(--an-f-sm); font-weight: 600; }
.an-kb { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.an-kb__b { position: relative; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #6B6680; background: rgba(255, 255, 255, .82); box-shadow: 0 1px 2px rgba(23, 19, 59, .08), inset 0 0 0 1px rgba(79, 70, 229, .08); transition: background-color .35s ease, box-shadow .35s ease, color .35s ease; }
.an-kb__b svg { width: 16px; height: 16px; }
.an-kb__b .vt-touch { left: 50%; top: 50%; }
/* финал без JS: 👍 выбран */
.an-kb__b--up { color: var(--an-indigo); background: #EEEBFD; box-shadow: inset 0 0 0 1.5px rgba(91, 79, 224, .55); }
/* компактный бот для мелкого телефона на сцене первого экрана (128x257).
   Пост - пузырь чата: поля 10 px до краев экрана, фото 3:2 в рамке 3 px
   (радиусы вложены: 12 снаружи, 9 у фото), заголовок в две ровные строки,
   строка поста - одна. Блок с кнопками - ~60% ленты, остальное - воздух
   (владелец 26.09: «вытянуто и воздуха нет») */
.an-bot--mini .vt-bot__status { height: 18px; min-height: 0; padding: 0 9px 0 10px; font-size: 9px; }
.an-bot--mini .vt-bot__status svg { height: 7px; }
.an-bot--mini .vt-bot__bar { padding: 1px 0 6px; }
.an-bot--mini .vt-bot__bar b { font-size: 11px; }
.an-bot--mini .vt-bot__bar span { display: none; }
.an-bot--mini .vt-bot__feed { gap: 5px; padding: 10px 10px 12px; }
.an-bot--mini .vt-msg { padding: 3px; border-radius: 12px; box-shadow: 0 0 0 .5px rgba(23, 19, 59, .05), 0 1px 2px rgba(23, 19, 59, .06), 0 12px 22px -14px rgba(23, 19, 59, .42); }
.an-bot--mini .vt-msg__ph { aspect-ratio: 3 / 2; border-radius: 9px; }
.an-bot--mini .vt-msg__body { gap: 2px; padding: 6px 5px 6px; }
.an-bot--mini .vt-msg h4 { font-size: 10px; line-height: 12.5px; letter-spacing: -.01em; text-wrap: balance; }
.an-bot--mini .vt-msg__tx { font-size: 8.5px; line-height: 11px; color: #736D8B; }
.an-bot--mini .an-kb { gap: 5px; }
.an-bot--mini .an-kb__b { height: 24px; border-radius: 10px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 .5px rgba(23, 19, 59, .06), 0 1px 2px rgba(23, 19, 59, .07); }
.an-bot--mini .an-kb__b svg { width: 11px; height: 11px; }
/* выбранная оценка - тонко: заливка индиго и волосяная рамка, без жирного кольца */
.an-bot--mini .an-kb__b--up,
.vt-js [data-steps].is-d .an-bot--mini .an-kb__b--up { color: var(--an-indigo); background: #ECE9FE; box-shadow: inset 0 0 0 1px rgba(91, 79, 224, .38), 0 1px 2px rgba(23, 19, 59, .05); }
.vt-js [data-steps] .an-bot--mini .an-kb__b--up { color: #6B6680; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 .5px rgba(23, 19, 59, .06), 0 1px 2px rgba(23, 19, 59, .07); }
.an-bot--mini .vt-touch { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; box-shadow: 0 0 0 4px rgba(255, 72, 176, .22), 0 0 0 9px rgba(255, 72, 176, .10); }

/* глава «Оценка» (телефон 212x475): пост ждет одобрения, после «Отменить» -
   одна карточка по центру окна: статус и пост двумя строками во всю ширину,
   вопрос бота и причины строками-пунктами. Текст чуть крупнее и темнее
   шкалы экранов: телефон на сцене мелкий (масштаб 0.84 на 1440) */
.an-why__a { display: none; flex-direction: column; }
.an-why__b { display: flex; flex-direction: column; gap: 10px; }
.an-why__card { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(23, 19, 59, .06), 0 14px 26px -18px rgba(23, 19, 59, .38); }
.an-why__post { display: grid; gap: 2px; padding: 12px 14px 11px; border-bottom: 1px solid var(--an-hair); }
.an-why__post em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: var(--an-f-cap); font-weight: 500; color: #5F5A74; white-space: nowrap; }
.an-why__post em i { width: 6px; height: 6px; border-radius: 50%; background: #A7A1BB; }
.an-why__post b { font-size: var(--an-f-md); font-weight: 600; white-space: nowrap; }
.an-why__top { display: grid; gap: 3px; padding: 11px 14px 11px; }
.an-why__top b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.an-why__hint { font-size: 11.5px; line-height: 1.35; color: rgba(28, 25, 23, .66); }
.an-why__chips { display: grid; border-top: 1px solid var(--an-hair); }
.an-why__chips > span { position: relative; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: var(--an-f-md); font-weight: 500; color: #3F3A57; transition: background-color .3s ease, color .3s ease; }
.an-why__chips > span + span { border-top: 1px solid var(--an-hair); }
.an-why__chips > span > svg { width: 15px; height: 15px; stroke-width: 2.4; opacity: 0; transition: opacity .3s ease; }
.an-why__chips .vt-touch { left: 50%; top: 50%; }
/* финал без JS: причина выбрана, бот ответил */
.an-why__chips > .is-pick { color: var(--an-indigo); font-weight: 600; background: #F5F3FF; }
.an-why__chips > .is-pick > svg { opacity: 1; }
.an-why__ok { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--an-f-sm); font-weight: 500; color: #15803D; }
.an-why__ok svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* лист «Платформы» (380x255): итог и полосы площадок (одна серия - один цвет) */
/* три блока листа - заголовок, итог, полосы - с равными промежутками */
.an-sheet { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 18px 20px 18px; }
.an-sheet__hd, .an-idx__hd, .an-rep__hd, .an-prop__hd, .an-log__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.an-sheet__hd b, .an-idx__hd b, .an-rep__hd b, .an-prop__hd b, .an-log__hd b { font-size: var(--an-f-lg); font-weight: 600; letter-spacing: -.01em; }
.an-sheet__hd em { font-style: normal; font-size: var(--an-f-cap); font-weight: 500; padding: 2px 8px; border-radius: 6px; color: #4B4665; box-shadow: inset 0 0 0 1px rgba(28, 25, 23, .14); }
.an-idx__hd span, .an-prop__hd span, .an-log__hd span { font-size: var(--an-f-cap); color: var(--an-mute); }

.an-sheet__total span { display: block; font-size: var(--an-f-sm); color: var(--an-mute); }
.an-sheet__total b { display: block; font-size: var(--an-f-big); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.an-bars { display: grid; gap: 12px; margin-bottom: 4px; }
.an-bars__r { display: grid; grid-template-columns: 104px minmax(0, 1fr) 46px; align-items: center; gap: 10px; }
.an-bars__l { display: flex; align-items: center; gap: 8px; font-size: var(--an-f-md); font-weight: 500; white-space: nowrap; }
.an-bars__l i { flex: none; width: 16px; height: 16px; }
.an-bars__l img, .an-bars__l svg { display: block; width: 16px; height: 16px; }
.an-bars__t { position: relative; height: 12px; background: rgba(91, 79, 224, .08); border-radius: 0 4px 4px 0; }
.an-bars__t i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 0 4px 4px 0; transform-origin: 0 50%;
  background: var(--an-chart) radial-gradient(rgba(255, 255, 255, .3) 1px, transparent 1.3px) 0 0 / 4px 4px; }
.an-bars b { text-align: right; font-size: var(--an-f-md); font-weight: 600; }

/* карточки «Топ постов» (320x156): превью, текст и цифры - по центру высоты */
.an-top { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 0 16px 0 15px; }
.an-top__ph { position: relative; width: 92px; height: 92px; border-radius: 10px; background: #E7E0EF center / cover no-repeat; }
.an-top__ph--text { display: grid; align-content: center; gap: 9px; padding: 16px 14px; background: #F3F0FA; }
.an-top__ph--text i { display: block; height: 5px; border-radius: 3px; background: rgba(79, 70, 229, .26); }
.an-top__ph--text i:nth-child(2) { width: 78%; }
.an-top__ph--text i:nth-child(3) { width: 58%; }
.an-top__ph em { position: absolute; left: -7px; top: -7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: var(--an-f-sm); font-weight: 600; color: #fff; background: #8F88A8; box-shadow: 0 0 0 3px #fff; transition: box-shadow .5s var(--vt-ease-in); }
.an-top--1 .an-top__ph em { background: var(--an-chart); }
.an-top__tx { min-width: 0; display: grid; gap: 3px; }
.an-top__tx b { margin-bottom: 3px; font-size: var(--an-f-lg); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.an-top__pl { display: flex; align-items: center; gap: 6px; font-size: var(--an-f-sm); font-weight: 500; white-space: nowrap; }
.an-top__pl i { flex: none; width: 14px; height: 14px; }
.an-top__pl img, .an-top__pl svg { display: block; width: 14px; height: 14px; }
.an-top__ty { font-size: var(--an-f-sm); color: var(--an-mute); white-space: nowrap; }
.an-top__num { display: grid; justify-items: end; gap: 1px; }
.an-top__num b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.an-top__num em { font-style: normal; font-size: var(--an-f-sm); font-weight: 600; color: #15803D; }

/* «Что работает» (320x446): «По типу поста» - индекс охвата, норма канала -
   волосяная линия; ниже «Сильнейшие слоты». Оба блока по центру листа,
   освобожденное тонкой шкалой место - воздух вокруг них */
.an-idx { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 24px 20px; }
.an-idx__main { display: grid; gap: 16px; }
.an-idx__rows { display: grid; gap: 14px; }
.an-idx__top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: var(--an-f-sm); font-weight: 500; }
.an-idx__top b { font-weight: 600; }
.an-idx__t { position: relative; display: block; height: 9px; background: rgba(28, 25, 23, .05); border-radius: 0 4px 4px 0; }
.an-idx__t i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 0 4px 4px 0; background: var(--an-chart); transform-origin: 0 50%; }
.an-idx__r.is-below .an-idx__t i { background: var(--an-gray); }
.an-idx__t u { position: absolute; top: -4px; bottom: -4px; width: 1px; background: rgba(28, 25, 23, .55); }
.an-idx__cap { font-size: var(--an-f-cap); line-height: 1.45; color: var(--an-mute); }
.an-idx__slots { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 6px; padding-top: 20px; border-top: 1px solid rgba(28, 25, 23, .1); }
.an-idx__slots span { width: 100%; font-size: var(--an-f-cap); color: var(--an-mute); }
.an-idx__slots em { white-space: nowrap; font-style: normal; font-size: var(--an-f-cap); font-weight: 600; padding: 4px 9px; border-radius: 6px; color: var(--an-chart-ink); background: rgba(91, 79, 224, .08); box-shadow: inset 0 0 0 1px rgba(91, 79, 224, .2); }

/* «Кампании» (380x258): сравнение и «Экспорт Excel»; каждая строка - одна линия */
/* лист в папке (380x258): поля 20 px по всему периметру, таблица - к нижнему
   полю, между шапкой и таблицей - воздух (владелец 26.09 вечером: «совпадала
   по кругу»); угол листа - чистый поворот по его краям на арте (манифест) */
.an-rep { display: flex; flex-direction: column; padding: 20px; }
.an-rep__hd { align-items: center; }
.an-rep__xl { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; font-size: var(--an-f-sm); font-weight: 600; color: #3F3A57; box-shadow: inset 0 0 0 1px rgba(28, 25, 23, .16); }
.an-rep__xl svg { width: 14px; height: 14px; color: #15803D; }
.an-rep__xl .vt-touch { left: 50%; top: 50%; }
.an-rep__sub { margin-top: 2px; font-size: var(--an-f-sm); color: var(--an-mute); }
.an-rep__t { width: 100%; margin-top: auto; border-collapse: collapse; table-layout: fixed; }
.an-rep__t th { padding: 0 0 8px 6px; text-align: right; vertical-align: bottom; font-size: var(--an-f-cap); font-weight: 500; line-height: 1.2; color: var(--an-mute); border-bottom: 1px solid rgba(28, 25, 23, .16); }
.an-rep__t th:nth-child(1) { width: 52%; }
.an-rep__t th:nth-child(2) { width: 20%; }
.an-rep__t td { height: 40px; padding: 0 0 0 6px; text-align: right; vertical-align: middle; white-space: nowrap; font-size: var(--an-f-md); border-bottom: 1px solid rgba(28, 25, 23, .08); }
.an-rep__t th:first-child, .an-rep__t td:first-child { padding-left: 0; text-align: left; }
.an-rep__t td:first-child { font-weight: 500; overflow: hidden; }

/* «Что улучшить?» (340x405) */
.an-wish { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.an-wish__hd { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.an-wish__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--an-indigo); }
.an-wish__ic svg { width: 16px; height: 16px; }
.an-wish__hd b { display: block; font-size: var(--an-f-lg); font-weight: 600; letter-spacing: -.01em; }
.an-wish__hd div span { display: block; margin-top: 2px; font-size: var(--an-f-sm); line-height: 1.4; color: var(--an-mute); }
.an-wish__area { flex: 1 1 auto; min-height: 62px; max-height: 150px; padding: 10px 12px; border-radius: 11px; font-size: var(--an-f-md); line-height: 1.45; box-shadow: inset 0 0 0 1px #D6D0EA; }
.an-wish__btn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: var(--an-f-md); font-weight: 600; color: #fff; background: var(--an-indigo); }
.an-wish__btn svg { width: 14px; height: 14px; }
.an-wish__btn .vt-touch { left: 50%; top: 50%; }
.an-wish__sum { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 11px; font-size: var(--an-f-sm); line-height: 1.45; background: rgba(79, 70, 229, .06); box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .18); }
.an-wish__sum svg { width: 16px; height: 16px; margin-top: 1px; color: var(--an-indigo); }

/* предложение (лист 340x474 сцены B3): строки стоят напротив корректорских
   пометок листа. Замер пометок 26.09 (y в px интерфейса): слева ✓ 64-101,
   «(» 130-201, → 225-248, ✓ 281-318, точки 348-396; справа «}» 66-155,
   ← 178-201, ✓ 218-255, точки 282-317, «)» 340-414. Центры строк: поле 83
   (✓), «Сейчас» 134 (внутри «}» и «(»), «Предлагаем» 190 (←), «почему» 236
   (→ и ✓), кнопки и «Применено» 299 (✓ и точки), вторая правка 377 (точки и
   «)»). Без JS и при reduced-motion - те же места. */
.an-prop { padding: 0 20px; }
.an-prop > * { position: absolute; left: 20px; right: 20px; top: var(--y); transform: translateY(-50%); }
.an-prop__hd { padding-bottom: 11px; top: 20px; transform: none; border-bottom: 1px solid var(--an-hair); }
.an-prop__f { --y: 83px; display: flex; align-items: center; gap: 7px; font-size: var(--an-f-h); font-weight: 600; color: var(--an-indigo); }
.an-prop__f svg, .an-prop__nf svg { width: 15px; height: 15px; }
.an-prop__was { --y: 134px; }
.an-prop__now { --y: 190px; }
.an-prop__was, .an-prop__now { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; }
.an-prop__was small, .an-prop__now small { font-size: var(--an-f-cap); font-weight: 500; color: var(--an-mute); }
.an-prop__now small { color: var(--an-indigo); }
.an-prop__was span, .an-prop__now span { display: block; padding: 7px 11px; border-radius: 9px; font-size: var(--an-f-md); line-height: 18px; white-space: nowrap; }
.an-prop__was span { color: rgba(28, 25, 23, .64); background: rgba(28, 25, 23, .05); }
.an-prop__now span { font-weight: 600; color: #2F28B8; background: rgba(79, 70, 229, .06); box-shadow: inset 0 0 0 1.5px var(--an-indigo); transition: box-shadow .5s var(--vt-ease-in); }
.an-prop__why { --y: 236px; padding-left: 10px; font-size: var(--an-f-sm); line-height: 1.45; color: rgba(28, 25, 23, .72); border-left: 2px solid #F6A04D; }
.an-prop__go { --y: 299px; display: flex; align-items: center; gap: 8px; }
.an-prop__ok, .an-prop__no, .an-prop__done { height: 32px; display: none; align-items: center; gap: 7px; font-size: var(--an-f-md); }
.an-prop__ok { position: relative; padding: 0 14px; border-radius: 9px; font-weight: 600; color: #fff; background: var(--an-indigo); }
.an-prop__no { padding: 0 13px; border-radius: 9px; font-weight: 500; color: #57526E; box-shadow: inset 0 0 0 1px #D6D0EA; }
.an-prop__done { display: inline-flex; font-weight: 600; color: #15803D; }
.an-prop__done svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #fff; background: #16A34A; stroke-width: 3; }
.an-prop__ok .vt-touch { left: 50%; top: 50%; }
.an-prop__next { --y: 377px; display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 3px 8px; padding: 11px 12px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .22); }
.an-prop__nf { display: flex; align-items: center; gap: 7px; font-size: var(--an-f-h); font-weight: 600; color: var(--an-indigo); }
.an-prop__next > span:not(.an-prop__nf) { grid-column: 1; font-size: var(--an-f-sm); line-height: 1.35; color: var(--an-mute); }
.an-prop__next i { grid-column: 2; grid-row: 1 / span 2; color: var(--an-indigo); }
.an-prop__next i svg { display: block; width: 16px; height: 16px; transform: rotate(-90deg); }

/* журнал (карточка 300x403): все записи одного вида - поле, кто и когда,
   было и стало, «Откатить» */
.an-log { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.an-log__hd { padding-bottom: 6px; }
.an-log__r { display: grid; gap: 5px; padding: 10px 0 11px; border-top: 1px solid rgba(28, 25, 23, .1); }
.an-log__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.an-log__meta b { font-size: var(--an-f-h); font-weight: 600; letter-spacing: -.01em; }
.an-log__meta span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--an-f-cap); color: var(--an-mute); white-space: nowrap; }
.an-log__auto { width: 6px; height: 6px; border-radius: 50%; background: var(--an-indigo); }
.an-log__sw { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; line-height: 1.35; }
.an-log__sw small { font-size: var(--an-f-cap); color: var(--an-mute); }
.an-log__was { font-size: var(--an-f-sm); color: rgba(28, 25, 23, .64); }
.an-log__now { font-size: var(--an-f-sm); font-weight: 600; color: #2F28B8; }
.an-log__undo { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; font-size: var(--an-f-cap); font-weight: 600; color: var(--an-indigo); }
.an-log__undo svg { width: 12px; height: 12px; }

/* станция круга на карточке сцены L0 (260x161): номер, значок и название -
   одной строкой, под ней описание; все по центру карточки. Цифра в кружке -
   строкой высотой 1, табличная: ровно по центру */
.an-lc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; text-align: center; }
.an-lc__top { display: flex; align-items: center; justify-content: center; gap: 8px; }
.an-lc__top em { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--vt-font); font-style: normal; font-variant-numeric: normal; color: #fff; background: var(--an-c-mark); }
.an-lc__top i { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--an-c); }
.an-lc__top svg { width: 18px; height: 18px; }
.an-lc__top b { font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.an-lc__tx { max-width: 190px; font-size: var(--an-f-md); line-height: 1.4; color: rgba(28, 25, 23, .64); text-wrap: balance; }

/* ---------- сценарии модулей ----------
   Скрытые стартовые состояния - только с классом vt-js; без JS и при
   reduced-motion (showcase.js сразу ставит все классы) - финальный кадр. */
.vt-js [data-steps] .an-kpi b { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--vt-ease-in), transform .55s var(--vt-ease-in); }
.vt-js [data-steps].is-a .an-kpi b { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .an-kpi > div:nth-child(2) b { transition-delay: .08s; }
.vt-js [data-steps].is-a .an-kpi > div:nth-child(3) b { transition-delay: .16s; }
.vt-js [data-steps].is-a .an-kpi > div:nth-child(4) b { transition-delay: .24s; }
.vt-js [data-steps] .an-line__path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.4s var(--vt-ease-in); }
.vt-js [data-steps].is-b .an-line__path { stroke-dashoffset: 0; }
.vt-js [data-steps] .an-line__area, .vt-js [data-steps] .an-line__dot, .vt-js [data-steps] .an-line__end { opacity: 0; transition: opacity .5s ease 1.2s; }
.vt-js [data-steps].is-b .an-line__area, .vt-js [data-steps].is-b .an-line__dot, .vt-js [data-steps].is-b .an-line__end { opacity: 1; }
.vt-js [data-steps] .an-best { opacity: 0; transform: translateY(4px); transition: opacity .45s ease 1.7s, transform .5s var(--vt-ease-in) 1.7s; }
.vt-js [data-steps].is-b .an-best { opacity: 1; transform: none; }
/* бот первого экрана: касание 👍, кнопка остается выбранной */
.vt-js [data-steps] .an-kb { opacity: 0; transition: opacity .45s ease .3s; }
.vt-js [data-steps].is-a .an-kb { opacity: 1; }
.vt-js [data-steps] .an-kb__b--up { color: #6B6680; background: rgba(255, 255, 255, .82); box-shadow: 0 1px 2px rgba(23, 19, 59, .08), inset 0 0 0 1px rgba(79, 70, 229, .08); }
.vt-js [data-steps].is-c .an-kb .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
.vt-js [data-steps].is-d .an-kb__b--up { color: var(--an-indigo); background: #EEEBFD; box-shadow: inset 0 0 0 1.5px rgba(91, 79, 224, .55); }
/* глава «Оценка»: пост -> «Отменить» -> причины -> «Поменять тон» */
.vt-js .an-why__a { display: flex; }
.vt-js .an-why__b { display: none; }
.vt-js [data-steps].is-c .an-why__a { display: none; }
.vt-js [data-steps].is-c .an-why__b { display: flex; animation: an-in .5s var(--vt-ease-in) both; }
.vt-js [data-steps] .an-why__chips > .is-pick { color: #3F3A57; font-weight: 500; background: transparent; }
.vt-js [data-steps] .an-why__chips > .is-pick > svg { opacity: 0; }
.vt-js [data-steps].is-d .an-why__chips .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
.vt-js [data-steps].is-e .an-why__chips > .is-pick { color: var(--an-indigo); font-weight: 600; background: #F5F3FF; }
.vt-js [data-steps].is-e .an-why__chips > .is-pick > svg { opacity: 1; }
.vt-js [data-steps] .an-why__ok { opacity: 0; transition: opacity .45s ease .2s; }
.vt-js [data-steps].is-e .an-why__ok { opacity: 1; }
/* лист «Платформы»: итог, затем полосы по очереди */
.vt-js [data-steps] .an-sheet__total { opacity: 0; transition: opacity .5s var(--vt-ease-in); }
.vt-js [data-steps].is-a .an-sheet__total { opacity: 1; }
.vt-js [data-steps] .an-bars__t i { transform: scaleX(0); transition: transform .9s var(--vt-ease-in); }
.vt-js [data-steps].is-b .an-bars__t i { transform: none; }
.vt-js [data-steps].is-b .an-bars__r:nth-child(2) .an-bars__t i { transition-delay: .15s; }
.vt-js [data-steps].is-b .an-bars__r:nth-child(3) .an-bars__t i { transition-delay: .3s; }
.vt-js [data-steps] .an-bars b { opacity: 0; transition: opacity .4s ease .7s; }
.vt-js [data-steps].is-b .an-bars b { opacity: 1; }
/* вход в «Аналитику»: строки площадок по очереди */
.vt-js [data-steps] .an-plat__r { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--vt-ease-in), transform .55s var(--vt-ease-in); }
.vt-js [data-steps].is-a .an-plat__r { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .an-plat__r:nth-child(2) { transition-delay: .15s; }
.vt-js [data-steps].is-a .an-plat__r:nth-child(3) { transition-delay: .3s; }
/* вход в «Автопилот»: загорается счетчик предложений */
.vt-js [data-steps] .an-ap__nav em { opacity: 0; transform: scale(.4); }
.vt-js [data-steps].is-b .an-ap__nav em { opacity: 1; transform: none; }
/* топ постов: карточки по очереди, затем первое место */
.vt-js [data-steps] .an-top { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-a .an-top--1, .vt-js [data-steps].is-b .an-top--2, .vt-js [data-steps].is-c .an-top--3 { opacity: 1; transform: none; }
[data-steps].is-d .an-top--1 .an-top__ph em { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(91, 79, 224, .26); }
/* индекс охвата: полосы, затем слоты */
.vt-js [data-steps] .an-idx__t i { transform: scaleX(0); transition: transform .9s var(--vt-ease-in); }
.vt-js [data-steps].is-a .an-idx__t i { transform: none; }
.vt-js [data-steps].is-a .an-idx__r:nth-child(2) .an-idx__t i { transition-delay: .15s; }
.vt-js [data-steps].is-a .an-idx__r:nth-child(3) .an-idx__t i { transition-delay: .3s; }
.vt-js [data-steps] .an-idx__slots em { opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .45s var(--vt-ease-in); }
.vt-js [data-steps].is-b .an-idx__slots em { opacity: 1; transform: none; }
.vt-js [data-steps].is-b .an-idx__slots em + em { transition-delay: .15s; }
/* отчет: строки по очереди, касание «Экспорт Excel» */
.vt-js [data-steps] .an-rep__t tbody tr { opacity: 0; transition: opacity .45s var(--vt-ease-in); }
.vt-js [data-steps].is-a .an-rep__t tbody tr { opacity: 1; }
.vt-js [data-steps].is-a .an-rep__t tbody tr:nth-child(2) { transition-delay: .2s; }
.vt-js [data-steps].is-a .an-rep__t tbody tr:nth-child(3) { transition-delay: .4s; }
.vt-js [data-steps].is-b .an-rep__xl .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
/* пожелание: печатается, касание «Улучшить», итог */
.vt-js [data-steps].is-b .an-wish__area .vt-caret { display: none; }
.vt-js [data-steps].is-b .an-wish__btn .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
.vt-js [data-steps] .an-wish__sum { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-c .an-wish__sum { opacity: 1; transform: none; }
/* предложение: карточка сверху вниз, «Предлагаем», касание «Применить», «Применено» */
.vt-js [data-steps] .an-prop > * { opacity: 0; transition: opacity .45s var(--vt-ease-in); }
.vt-js [data-steps].is-a .an-prop > * { opacity: 1; }
.vt-js [data-steps].is-a .an-prop > :nth-child(3) { transition-delay: .1s; }
.vt-js [data-steps].is-a .an-prop > :nth-child(4) { transition-delay: .2s; }
.vt-js [data-steps].is-a .an-prop > :nth-child(5) { transition-delay: .3s; }
.vt-js [data-steps].is-a .an-prop > :nth-child(6) { transition-delay: .4s; }
.vt-js [data-steps].is-a .an-prop > :nth-child(7) { transition-delay: .5s; }
.vt-js [data-steps] .an-prop__now span { box-shadow: inset 0 0 0 1.5px rgba(79, 70, 229, .25); }
.vt-js [data-steps].is-b .an-prop__now span { box-shadow: inset 0 0 0 1.5px var(--an-indigo), 0 0 0 4px rgba(79, 70, 229, .12); }
.vt-js .an-prop__ok, .vt-js .an-prop__no { display: inline-flex; }
.vt-js .an-prop__done { display: none; }
.vt-js [data-steps].is-c .an-prop__ok .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
.vt-js [data-steps].is-d .an-prop__ok, .vt-js [data-steps].is-d .an-prop__no { display: none; }
.vt-js [data-steps].is-d .an-prop__done { display: inline-flex; animation: an-in .45s var(--vt-ease-in) both; }
/* журнал: записи по очереди */
.vt-js [data-steps] .an-log__r { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--vt-ease-in), transform .55s var(--vt-ease-in); }
.vt-js [data-steps].is-a .an-log__r:nth-child(2), .vt-js [data-steps].is-b .an-log__r:nth-child(3), .vt-js [data-steps].is-c .an-log__r:nth-child(4) { opacity: 1; transform: none; }
/* круг: станции встают по часовой стрелке, затем подпись в центре */
.vt-js [data-steps] .an-lc { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-a .an-lc--1, .vt-js [data-steps].is-b .an-lc--2, .vt-js [data-steps].is-c .an-lc--3, .vt-js [data-steps].is-d .an-lc--4 { opacity: 1; transform: none; }
.vt-js .an-loop__scene[data-steps] .an-loop__core { opacity: 0; transition: opacity .6s ease; }
.vt-js .an-loop__scene[data-steps].is-e .an-loop__core { opacity: 1; }
/* касание совершено - точка уходит, остается результат */
.vt-js [data-steps].is-d .an-kb .vt-touch,
.vt-js [data-steps].is-e .an-why__chips .vt-touch,
.vt-js [data-steps].is-c .an-wish__btn .vt-touch,
.vt-js [data-steps].is-c .an-rep__xl .vt-touch { opacity: 0 !important; animation: none; transition: opacity .3s ease; }

/* ---------- два раздела: плитки выбора на сценах разделов ----------
   Надписи раздела - прямо в экране устройства сцены: «Аналитика» - в мониторе,
   «Автопилот» - в ноутбуке (владелец 26.09 вечером: логичнее, чем плашка
   поверх). Экраны обеих сцен в центре плитки и одной ширины (кадр арта и
   прямоугольник экрана - analytics_page.duo_frames, переменные на плитке:
   *d - от 640 px, *m - телефон). Экраны на артах фронтальные, поэтому текст -
   обычная верстка в прямоугольнике, без трансформаций: четкий и виден без JS;
   кегль - от ширины экрана (container query). */
.an-acts { padding-block: var(--an-sec); }
.an-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.an-duo__card {
  --z: var(--zd, 1); --ox: var(--oxd, 0%); --oy: var(--oyd, 0%); --bx: var(--bxd, 50%); --by: var(--byd, 50%);
  --sl: var(--sld, 22%); --st: var(--std, 26%); --sw: var(--swd, 56%); --sh: var(--shd, 48%);
  position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 26px; overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--vt-ink); background: #EFE9E2; box-shadow: var(--vt-shadow-scene);
  transition: transform .3s var(--vt-ease-in), box-shadow .3s ease;
}
.an-duo__card:hover { transform: translateY(-3px); box-shadow: 0 46px 84px -46px rgba(23, 19, 59, .6), 0 14px 30px -20px rgba(23, 19, 59, .28); }
.an-duo__art { position: absolute; inset: 0; background-repeat: no-repeat; background-size: calc(var(--z) * 100%) auto; background-position: var(--bx) var(--by); }
.an-duo__art picture { position: absolute; left: var(--ox); top: var(--oy); width: calc(var(--z) * 100%); height: calc(var(--z) * 100%); }
.an-duo__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* экран: светлый, как экраны с интерфейсом в главах, с тонкой засветкой стекла */
.an-duo__screen {
  position: absolute; z-index: 2; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh);
  container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 4%; text-align: center; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F6FE 100%);
  box-shadow: inset 0 0 0 1px rgba(20, 16, 40, .10), inset 0 1px 2px rgba(20, 16, 40, .10);
}
.an-duo__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 38%); }
.an-duo__card.an-ink--apricot { --an-c: #A65A0C; }
.an-duo__card.an-ink--indigo { --an-c: #4F46E5; }
.an-duo__screen .vt-step { gap: clamp(7px, 3cqw, 10px); font-size: clamp(9.5px, 3.9cqw, 11px); color: var(--an-c); }
.an-duo__t { margin-top: clamp(4px, 2.2cqw, 8px); font-size: clamp(15px, 8.2cqw, 23px); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; }
.an-duo__p { margin-top: clamp(4px, 2cqw, 7px); max-width: 34em; font-size: clamp(11.5px, 4.8cqw, 13.5px); line-height: 1.45; color: rgba(28, 25, 23, .7); text-wrap: balance; }
.an-duo__go { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; margin-top: clamp(6px, 3cqw, 11px); font-size: clamp(11.5px, 4.8cqw, 13.5px); font-weight: 600; color: var(--an-c); }
.an-duo__go svg { width: 1.1em; height: 1.1em; transition: transform .25s var(--vt-ease-in); }
.an-duo__card:hover .an-duo__go svg { transform: translateY(2px); }
.an-duo__card:focus-visible { outline: 2px solid var(--vt-indigo); outline-offset: 4px; }
/* узкий экран (телефон, 960-1199): только кикер, заголовок и ссылка */
@container (max-width: 250px) { .an-duo__p { display: none; } }

/* ---------- разделы: вход как у Студии, затем главы ---------- */
.an-act { position: relative; scroll-margin-top: 90px; }
.an-act--autopilot { background: linear-gradient(180deg, rgba(246, 242, 252, 0) 0%, #F6F2FC 6%, #F4F0FB 100%); }
.an-intro__title { font-size: clamp(30px, 2.8vw, 40px); }
.an-intro__facts li { display: block; }
.an-intro__a { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 11px; align-items: start; margin: -8px; padding: 8px; border-radius: 14px; text-decoration: none; color: inherit; transition: background-color .2s ease; }
.an-intro__a .vt-facts__i { grid-row: span 2; }
.an-intro__a > span:last-child { font-size: 13.5px; line-height: 1.45; color: var(--vt-ink-3); }
.an-intro__a:hover { background: rgba(255, 255, 255, .72); }
.an-intro__a:hover b { color: var(--vt-indigo); }
.an-ch { scroll-margin-top: 90px; }
/* знак площадки в факт-листе - плитка 20 px в белой ячейке 32 px: у всех трех
   площадок один размер */
.vt-facts__i.an-facts__brand { background: #fff; box-shadow: inset 0 0 0 1px rgba(28, 25, 23, .07); }
.vt-facts__i.an-facts__brand img, .vt-facts__i.an-facts__brand svg { display: block; width: 20px; height: 20px; }
.an-scene--ph { box-shadow: 0 40px 80px -52px rgba(70, 36, 40, .55), 0 12px 28px -22px rgba(70, 36, 40, .25); }

/* ---------- мост «Наблюдения»: лист вкладки на печатном столе ----------
   Как вкладка «Наблюдения» в продукте: один лист, выводы ровным списком -
   значок, заголовок и пояснение одной строкой, без мини-графиков (владелец
   26.09 вечером: «картинки разношерстные, где-то перенос, где-то нет»).
   На десктопе у каждого вывода ровно две строки - список однородный. */
.an-bridge { padding-block: var(--an-sec); background: linear-gradient(180deg, rgba(251, 238, 228, 0) 0%, #FBEEE4 22%, #F7ECF1 78%, rgba(246, 242, 252, 0) 100%); }
.an-desk { position: relative; overflow: hidden; padding: clamp(28px, 4.4vw, 64px) clamp(20px, 4vw, 56px); border-radius: 30px;
  background-color: #F4ECE0; background-image: linear-gradient(118deg, rgba(255, 210, 160, .28) 0%, rgba(255, 210, 160, 0) 40%, rgba(96, 64, 128, 0) 62%, rgba(96, 64, 128, .10) 100%), radial-gradient(rgba(120, 88, 60, .06) 1px, transparent 1.3px);
  background-size: auto, 7px 7px; box-shadow: inset 0 0 0 1px rgba(120, 88, 60, .08), 0 34px 64px -46px rgba(70, 36, 40, .5); }
.an-desk__ring { position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: .5;
  background: radial-gradient(var(--c) 1.7px, transparent 2.1px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, #000 97%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 58%, #000 60%, #000 97%, transparent 100%); }
.an-desk__ring--a { --c: #F6A04D; left: -4%; top: -16%; width: 26%; }
.an-desk__ring--p { --c: #FF48B0; right: -4%; bottom: -22%; width: 24%; opacity: .4; }
.an-desk__ring--i { --c: #4F46E5; right: 7%; top: -20%; width: 17%; opacity: .3; }
.an-obs { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 22px 28px 8px; border-radius: 16px; background: #FFFDF9;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 28px 44px -30px rgba(80, 44, 30, .5), 0 4px 10px -6px rgba(80, 44, 30, .28); }
.an-obs__hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(28, 25, 23, .1); }
.an-obs__hd b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.an-obs__hd span { font-size: 13px; color: var(--vt-ink-3); }
.an-obs__list { display: grid; }
.an-obs__i { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px 0; }
.an-obs__i + .an-obs__i { border-top: 1px solid rgba(28, 25, 23, .08); }
.an-obs__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--an-c); background: var(--an-c-soft); }
.an-obs__ic svg { width: 18px; height: 18px; }
.an-obs__body { min-width: 0; display: grid; gap: 3px; }
.an-obs__t { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.an-obs__tx { font-size: 14px; line-height: 1.5; color: var(--vt-ink-3); text-wrap: pretty; }
/* сцена O1: печатный стол вечером, предметы у левого и правого края, центр
   пустой. Лист «Наблюдений» - верстка поверх, в пустом центре (на десктопе уже
   предметов: 640 px), тень - от окна слева сверху, как у предметов арта */
.an-desk--art { background-color: #F8EEE1; background-size: cover; background-position: 50% 50%; box-shadow: 0 34px 64px -46px rgba(70, 36, 40, .5); }
.an-desk__art { position: absolute; inset: 0; }
.an-desk__art picture, .an-desk__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.an-desk--art .vt-grain { z-index: 0; opacity: .08; }
.an-desk--art .an-obs { max-width: 640px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 16px 24px 40px -22px rgba(80, 44, 30, .42), 3px 5px 12px -6px rgba(80, 44, 30, .24); }
.an-bridge__foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; text-align: center; }
.an-bridge__foot p { font-size: 15px; line-height: 1.55; color: var(--vt-ink-2); }
.an-bridge__go { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; color: #fff; background: var(--an-indigo); box-shadow: 0 14px 26px -16px rgba(79, 70, 229, .8); transition: transform .25s var(--vt-ease-in), box-shadow .25s ease; }
.an-bridge__go svg { width: 17px; height: 17px; }
.an-bridge__go:hover { transform: translateY(-1px); box-shadow: 0 18px 30px -16px rgba(79, 70, 229, .9); }

/* ---------- финал: круг на печатном столе (сцена L0) ---------- */
.an-loop { padding-block: var(--an-sec); background: #F4F0FB; }
.an-loop .vt-sec-head { margin-bottom: 30px; }
.an-loop__scene { position: relative; width: min(1120px, 100%); margin: 0 auto; aspect-ratio: var(--ar); overflow: hidden; container-type: size; border-radius: 28px; background: #EFE9E2; box-shadow: var(--vt-shadow-scene); }
.an-loop__scene .vt-grain { z-index: 3; opacity: .10; }
.an-loop__core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 26%; margin: 0; transform: translate(-50%, -50%); text-align: center; font-size: clamp(16px, 2cqw, 22px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #2F2A55; text-wrap: balance; mix-blend-mode: multiply; }
/* станции для чтения с экрана и узких экранов (на десктопе их показывает сцена) */
.an-loop__list { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.an-loop__ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--an-c); background: #fff; box-shadow: 0 0 0 1.5px var(--an-c-line), 0 14px 28px -18px rgba(40, 30, 90, .55); }
.an-loop__ic svg { width: 23px; height: 23px; }
.an-loop__truth { margin-top: 22px; text-align: center; font-size: 14.5px; color: var(--vt-ink-3); }

.an-start .vt-start__steps span { font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) {
  .an-duo__card, .an-bridge__go, .an-intro__a { transition: none; }
}

/* ---------- адаптив ---------- */
@media (max-width: 1199px) {
  .an-hero { background: linear-gradient(180deg, #FCEEE6 0%, #F8E4EA 72%, #F4E4F0 100%); }
  .an-hero .vt-step { justify-content: center; }
  /* телефон первого экрана: кадр чуть выше, арт крупнее в --hz раз с центром
     на экране (views_analytics._hero), тонкие растушевки краев */
  [data-page="analytics"] .an-hero-m { aspect-ratio: 1152 / 1480; }
  [data-page="analytics"] .an-hero-m .vt-art {
    --aw: calc(100cqw * var(--hz, 1)); --ah: calc(var(--aw) * 1.7778);
    width: var(--aw); height: var(--ah);
    left: clamp(calc(100cqw - var(--aw)), calc(50cqw - var(--aw) * var(--hfx, .5)), 0px);
    top: clamp(calc(100cqh - var(--ah)), calc(50cqh - var(--ah) * var(--hfy, .5)), 0px);
  }
  [data-page="analytics"] .an-hero-m::before { height: 28px; background: linear-gradient(180deg, #F9E6E8, rgba(249, 230, 232, 0)); }
  [data-page="analytics"] .an-hero-m::after { height: 28px; background: linear-gradient(0deg, var(--vt-paper), rgba(253, 248, 244, 0)); }
  /* плитки: стекло крупнее (одинаково на обеих) - на узкой плитке тексту нужно место */
}
@media (min-width: 960px) and (max-width: 1199px) {
  /* узкий десктоп: сцене в две колонки остается ~530 px и модуль мельчает -
     глава в одну колонку, как на планшете: текст, под ним сцена во всю ширину */
  [data-page="analytics"] .an-ch .vt-ch__grid, [data-page="analytics"] .an-intro .vt-ch__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 960px; }
  [data-page="analytics"] .an-ch .vt-ch__text, [data-page="analytics"] .an-intro .vt-ch__text { max-width: 620px; }
}
@media (min-width: 640px) and (max-width: 959px) {
  /* планшет: сцена главы ~600-900 px, модуль мелкий - арт крупнее в --tz раз
     с фокусом на поверхностях (analytics_page.chapter: до 1.3, но так, чтобы
     все поверхности главы с полями оставались в кадре) */
  [data-page="analytics"] .vt-ch__grid > .vt-scene.an-scene .vt-art {
    width: calc(100% * var(--tz)); height: calc(100% * var(--tz));
    left: clamp(calc((1 - var(--tz)) * 100%), calc((.5 - var(--tz) * var(--fx, .5)) * 100%), 0%);
    top: clamp(calc((1 - var(--tz)) * 100%), calc((.5 - var(--tz) * var(--fy, .5)) * 100%), 0%);
  }
}
@media (max-width: 959px) {
  .an-duo { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  /* сцена «Наблюдений» на узких экранах - полоса сверху целиком (все предметы
     видны), низ полосы растворяется в бумаге, лист заходит на нее */
  .an-desk--art { padding-top: 0; background-image: none !important; }
  .an-desk--art .an-desk__art { position: relative; display: block; inset: auto; margin-inline: calc(-1 * clamp(20px, 4vw, 56px)); aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .an-desk--art .an-obs { margin-top: -18%; }
}
@media (max-width: 1023px) {
  /* круг до 1024 px - лесенкой: на сцене уже 960 px карточки мельче 0.8 */
  .an-loop__scene { display: none; }
  .an-loop__list { position: relative; width: auto; height: auto; margin: 0 auto; overflow: visible; clip: auto; white-space: normal; display: grid; gap: 22px; max-width: 440px; }
  .an-loop__list::before { content: ""; position: absolute; left: 26px; top: 27px; bottom: 27px; width: 2px; background: linear-gradient(180deg, rgba(217, 115, 26, .45), rgba(255, 72, 176, .45), rgba(79, 70, 229, .45)); }
  .an-loop__list li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; }
  .an-loop__list .an-loop__ic { grid-row: span 2; }
  .an-loop__list b { align-self: end; font-size: 17px; font-weight: 600; }
  .an-loop__list li > span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--vt-ink-3); }
}
@media (max-width: 639px) {
  /* сцена главы на телефоне: кадр --m-ar и зум --mz считает
     scene.mobile_frame по настоящим углам (модуль на 390 - от 0.9, все
     поверхности кадра - с полями), фокус --mfx/--mfy - на них */
  [data-page="analytics"] .vt-ch__grid > .vt-scene.an-scene .vt-art {
    --aw: calc(100cqh * var(--arn) * var(--mz, 1));
    width: var(--aw); height: calc(100% * var(--mz, 1));
    left: clamp(calc(100cqw - var(--aw)), calc(50cqw - var(--aw) * var(--mfx, var(--fx, .5))), 0px);
    top: clamp(calc((1 - var(--mz, 1)) * 100%), calc((.5 - var(--mz, 1) * var(--mfy, var(--fy, .5))) * 100%), 0%);
  }
  /* поверхность только для десктопа (лесенка шире экрана телефона) */
  [data-page="analytics"] .an-q-desk { display: none; }
  .an-duo__card { --z: var(--zm, 1); --ox: var(--oxm, 0%); --oy: var(--oym, 0%); --bx: var(--bxm, 50%); --by: var(--bym, 50%);
    --sl: var(--slm, 18%); --st: var(--stm, 23%); --sw: var(--swm, 63%); --sh: var(--shm, 54%); }
  .an-hero .vt-hero__h1 { font-size: clamp(22px, calc(100cqi / 14.4), 24.5px); }
  .an-hero .vt-hero__cta .vt-btn { height: 48px; }
  .an-intro__title { font-size: 28px; }
  .an-bridge__go { width: 100%; justify-content: center; height: 48px; }
  .an-desk { padding: 16px; border-radius: 22px; }
  .an-desk--art .an-obs { padding: 16px 16px 4px; }
  .an-desk--art .an-desk__art { margin-inline: -16px; }
  .an-obs { padding: 16px 16px 4px; }
  .an-obs__i { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 0; }
  .an-obs__ic { width: 32px; height: 32px; }
  .an-obs__t { font-size: 14.5px; }
  .an-obs__tx { font-size: 13.5px; }
}