/* Taipy - витрина: ночь Студии (/product/studio/, HANDOFF-14).
   Подключается после showcase.css только на этой странице. /product/ - день,
   Студия - ночь: страница переопределяет цветовые токены витрины по
   body[data-page="studio"], общие блоки берут их сами. Экраны устройств
   ночью светятся: внутри окна интерфейса (.vt-quad__ui) токены возвращаются
   к дневным - светлый живой интерфейс главный источник света в сцене.
   Классы страницы - с префиксом st-. */

.vt-body[data-page="studio"] {
  /* ритм страницы: --st-gap между блоками, --st-gap-in внутри раздела */
  --st-gap: clamp(88px, 9vw, 128px);
  --st-gap-in: clamp(56px, 6.5vw, 96px);
  --vt-paper: #120E2A;
  --vt-paper-2: #1D1640;
  --vt-surface: rgba(255, 255, 255, .06);
  --vt-ink: #F4F1FF;
  --vt-ink-2: rgba(244, 241, 255, .74);
  --vt-ink-3: rgba(244, 241, 255, .6);
  --vt-line: rgba(255, 255, 255, .10);
  --vt-line-2: rgba(255, 255, 255, .16);
  --vt-indigo: #8B7CF6;
  --vt-pink-ink: #FF8FCF;
  --vt-apricot-ink: #FFBE85;
  --vt-grad-text: linear-gradient(135deg, #A99BFF 0%, #C9A7FF 55%, #F2A9E6 100%);
  --st-lilac: #B7ABFF;
  --st-card: rgba(255, 255, 255, .045);
  --st-card-2: rgba(255, 255, 255, .075);
  color-scheme: dark;
}
/* живой интерфейс - светлый экран или бумага: дневные токены */
[data-page="studio"] .vt-quad__ui,
[data-page="studio"] .st-duo__card--day {
  --vt-ink: #1C1917;
  --vt-ink-2: rgba(28, 25, 23, .72);
  --vt-ink-3: rgba(28, 25, 23, .56);
  --vt-line: #ECEAFB;
  --vt-line-2: #E1DDF3;
  --vt-indigo: #4F46E5;
  --vt-pink-ink: #D6268D;
  --vt-apricot-ink: #B8650F;
  --vt-grad-text: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #A855F7 100%);
  color: var(--vt-ink);
  color-scheme: light;
}

/* краски полок: темы - абрикос, тексты - индиго, медиа - розовая */
.st-ink--indigo, .st-ink--lilac { --st-c: #8B7CF6; --st-c-text: #B7ABFF; --st-c-soft: rgba(139, 124, 246, .16); --st-c-line: rgba(139, 124, 246, .40); --st-c-deep: #4F46E5; --st-c-tint: rgba(79, 70, 229, .10); }
.st-ink--pink { --st-c: #FF5CB8; --st-c-text: #FF94D2; --st-c-soft: rgba(255, 72, 176, .15); --st-c-line: rgba(255, 92, 184, .40); --st-c-deep: #D6268D; --st-c-tint: rgba(255, 72, 176, .10); }
.st-ink--apricot { --st-c: #F6A04D; --st-c-text: #FFBE85; --st-c-soft: rgba(246, 160, 77, .16); --st-c-line: rgba(246, 160, 77, .42); --st-c-deep: #B8650F; --st-c-tint: rgba(246, 160, 77, .16); }

/* ---------- общие блоки витрины ночью ---------- */
[data-page="studio"] .vt-skip { background: #F4F1FF; color: #120E2A; }
[data-page="studio"] .vt-ico { background: rgba(139, 124, 246, .16); color: var(--st-lilac); }
[data-page="studio"] .vt-btn--ghost { color: var(--vt-ink); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
[data-page="studio"] .vt-btn--glass { color: var(--vt-ink); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 14px -6px rgba(0, 0, 0, .4); }
[data-page="studio"] .vt-btn--glass:hover { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .30); }
[data-page="studio"] .vt-scene { background: #1D1640; }
[data-page="studio"] .vt-step__inks i { mix-blend-mode: normal; opacity: .32; }
[data-page="studio"] .vt-step--indigo .vt-step__inks i:nth-child(1), [data-page="studio"] .vt-step--pink .vt-step__inks i:nth-child(2), [data-page="studio"] .vt-step--apricot .vt-step__inks i:nth-child(3) { opacity: 1; }
[data-page="studio"] .vt-faq details { background: var(--st-card); border-color: var(--vt-line); }
[data-page="studio"] .vt-faq details[open] { border-color: rgba(139, 124, 246, .42); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .7); }
[data-page="studio"] .vt-faq__ask { color: var(--st-lilac); }
[data-page="studio"] .vt-next a { background: var(--st-card); border-color: var(--vt-line); }
[data-page="studio"] .vt-next a:hover { border-color: rgba(139, 124, 246, .45); box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .7); }
[data-page="studio"] .vt-next__arr { color: rgba(244, 241, 255, .4); }
[data-page="studio"] .vt-next a:hover .vt-next__arr { color: var(--st-lilac); }

/* ---------- первый экран: ночная мастерская ---------- */
.st-hero { background: var(--vt-paper); }
[data-page="studio"] .vt-hero__trust { color: var(--vt-ink-3); }
[data-page="studio"] .vt-hero__trust .vt-sep { background: rgba(255, 255, 255, .16); }
[data-page="studio"] .vt-mark { background: rgba(255, 255, 255, .92); box-shadow: none; }
.st-eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--st-lilac); }
.st-inks { display: inline-flex; flex: none; }
.st-inks i { width: 9px; height: 9px; border-radius: 50%; }
.st-inks i + i { margin-left: -3px; }
.st-inks i:nth-child(1) { background: #7C6FF2; }
.st-inks i:nth-child(2) { background: #FF48B0; }
.st-inks i:nth-child(3) { background: #F6A04D; }
/* тихая жизнь сцены: свет лампы дышит */
.st-lamp { position: absolute; z-index: 2; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .34), rgba(255, 170, 110, .10) 52%, transparent 74%); animation: st-breathe 7s ease-in-out infinite; }
.st-hero .vt-quad--screen { z-index: 4; }
/* свечение экрана вокруг окна интерфейса - в той же матрице */
.st-hero .vt-quad--screen .vt-quad__ui { box-shadow: 0 0 22px 2px rgba(206, 196, 255, .26); }

/* ---------- «Что нужно сейчас?» ----------
   Три раздела Студии: кадр сцены главы с живым экраном, имя раздела ведет
   к его главе (ссылка растянута на карточку), строка пользы и инструменты
   раздела - ссылками на их ряды. */
.st-need { padding-block: var(--st-gap) 0; }
.st-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.st-door { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--st-card); border: 1px solid var(--vt-line);
  transition: border-color .25s ease, box-shadow .3s ease; }
.st-door:hover { border-color: var(--st-c-line); box-shadow: 0 30px 50px -32px rgba(0, 0, 0, .85), 0 0 70px -34px var(--st-c); }
[data-page="studio"] .st-door__scene { flex: none; aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
.vt-js .st-door__scene { transform: none; }
.st-door__scene .vt-art { --aw: calc(100cqw * var(--z, 1.2)); --ah: calc(var(--aw) / var(--arn)); width: var(--aw); height: var(--ah);
  left: clamp(calc(100cqw - var(--aw)), calc(50cqw - var(--aw) * var(--fx, .5)), 0px); top: clamp(calc(100cqh - var(--ah)), calc(50cqh - var(--ah) * var(--fy, .5)), 0px); }
.st-door__scene .vt-quad--screen { z-index: 4; }
.st-door__scene .vt-quad--screen .vt-quad__ui { box-shadow: 0 0 18px 2px rgba(206, 196, 255, .24); }
.st-door__body { flex: 1 1 auto; display: grid; align-content: start; gap: 8px; padding: 20px 22px 20px; }
.st-door__t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 20px; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; }
.st-door__t a { text-decoration: none; color: var(--vt-ink); }
.st-door__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.st-door__t a:focus-visible { outline: none; }
.st-door:has(.st-door__t a:focus-visible) { outline: 2px solid var(--st-c-text); outline-offset: 3px; }
.st-door__t svg { width: 18px; height: 18px; flex: none; color: rgba(244, 241, 255, .36); transition: transform .25s var(--vt-ease-in), color .2s ease; }
.st-door:hover .st-door__t svg { transform: translateY(2px); color: var(--st-c-text); }
.st-door__line { font-size: 14.5px; line-height: 1.5; color: var(--vt-ink-2); }
.st-door__tools { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, max-content); gap: 2px 24px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--vt-line); }
.st-door__tools a { display: flex; align-items: center; gap: 9px; min-height: 34px; font-size: 14px; font-weight: 500; line-height: 1.25; white-space: nowrap; text-decoration: none; color: rgba(244, 241, 255, .88); transition: color .2s ease; }
.st-door__tools svg { width: 16px; height: 16px; flex: none; color: var(--st-c-text); }
.st-door__tools a:hover { color: var(--st-c-text); }

/* ---------- «Taipy ведет канал - Студия рядом» ---------- */
.st-duo-sec { padding-block: var(--st-gap) 0; }
.st-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
/* карточка - вид из окна (город днем и ночью) во всю высоту; подпись -
   стекло поверх нижней части картинки, сквозь него видна сцена */
.st-duo__card { position: relative; min-height: 452px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 26px; overflow: hidden; isolation: isolate; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); }
.st-duo__card--day { background: #CFC5F0; }
.st-duo__card--night { background: #1D1640; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .10); }
/* арт по высоте карточки (--zh), окно - в фокусе (--fx): верх экранов
   устройств на сцене всегда ниже верха стекла, при любой ширине карточки */
.st-duo__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; background: no-repeat; }
.st-duo__art picture { position: absolute; inset: 0; }
.st-duo__art img { --iw: calc(var(--zh) * 100cqh * 1.7778); position: absolute; top: 0; width: var(--iw); height: auto; max-width: none;
  left: clamp(calc(100cqw - var(--iw)), calc(50cqw - var(--iw) * var(--fx)), 0px); }
.st-duo__card--day .st-duo__art { --zh: 1.55; --fx: .74; background-size: auto 155%; background-position: 74% 0; }
.st-duo__card--night .st-duo__art { --zh: 1.2; --fx: .62; background-size: auto 120%; background-position: 62% 0; }
.st-duo__body { position: relative; margin: 12px; padding: 22px 24px 24px; display: grid; gap: 9px; justify-items: start; border-radius: 18px; }
.st-duo__card--day .st-duo__body { background: linear-gradient(180deg, rgba(255, 255, 255, .56) 0%, rgba(255, 255, 255, .74) 100%); border: 1px solid rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 30px -18px rgba(40, 24, 110, .45); }
.st-duo__card--night .st-duo__body { background: linear-gradient(180deg, rgba(22, 17, 52, .62) 0%, rgba(22, 17, 52, .82) 100%); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 14px 30px -18px rgba(0, 0, 0, .7); }
.st-duo__k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4338CA; }
.st-duo__card--night .st-duo__k { color: var(--st-lilac); }
.st-duo h3 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.st-duo__body > p:not(.st-duo__k) { font-size: 15.5px; line-height: 1.55; color: var(--vt-ink-2); max-width: 34em; }
.st-duo__card--night .st-duo__body > p:not(.st-duo__k) { color: rgba(244, 241, 255, .86); }
.st-duo__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 15px; font-weight: 600; text-decoration: none; color: #4338CA; }
.st-duo__card--night .st-duo__link { color: var(--st-lilac); }
.st-duo__link svg { width: 16px; height: 16px; transition: transform .25s var(--vt-ease-in); }
.st-duo__link:hover svg { transform: translateX(3px); }
.st-duo__card--night .st-duo__link:hover svg { transform: translateY(2px); }

/* ---------- разделы: глава раздела + главы инструментов ----------
   Глава раздела - как главы /product/ (сцена у края окна, текст и что
   внутри). Под ней главы инструментов чуть меньше: сцена в сетке страницы,
   текст рядом, стороны чередуются. */
.st-sec { position: relative; }
.st-sec::before { content: ""; position: absolute; left: 50%; top: 40px; width: min(1200px, 96vw); height: 520px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--st-c) 8%, transparent), transparent 72%); }
.st-sec > * { position: relative; }
.st-ch { padding-block: var(--st-gap) var(--st-gap-in); }
.st-ch__scene .vt-grain { z-index: 3; }
.st-ch__scene .vt-quad--screen, .st-ch__scene .vt-quad--label, .st-door__scene .vt-quad--label { z-index: 4; }
.st-ch__scene .vt-quad--screen .vt-quad__ui { box-shadow: 0 0 22px 2px rgba(206, 196, 255, .26); }
/* факт-лист главы раздела ведет к главам инструментов */
.st-facts li { display: block; }
.st-facts .st-facts__a { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 11px; align-items: start; align-content: start; text-decoration: none; }
.st-facts .vt-facts__i { color: var(--st-c-text); background: var(--st-c-soft); transition: box-shadow .2s ease; }
.st-facts .st-facts__a:hover .vt-facts__i { box-shadow: inset 0 0 0 1px var(--st-c-line); }
.st-facts .st-facts__a b { transition: color .2s ease; }
.st-facts .st-facts__a:hover b { color: var(--st-c-text); }
.st-facts .st-facts__a > span:last-child { font-size: 13.5px; line-height: 1.45; color: var(--vt-ink-3); }

.st-rows { display: grid; gap: var(--st-gap-in); max-width: var(--vt-wrap); margin: 0 auto; padding: 0 32px; }
.st-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; scroll-margin-top: 110px; }
.st-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.st-row--flip .st-row__text { order: 2; }
.st-row__text { display: grid; gap: 12px; align-content: center; justify-items: start; }
.st-row__title { font-size: clamp(22px, 1.95vw, 27px); font-weight: 650; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.st-row__lead { font-size: 16px; line-height: 1.6; color: var(--vt-ink-2); max-width: 32em; }
.st-row__points { display: grid; gap: 10px; margin-top: 4px; }
.st-row__points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--vt-ink); }
.st-row__points i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--st-c-text); background: var(--st-c-soft); box-shadow: inset 0 0 0 1px var(--st-c-line); }
.st-row__points svg { width: 12px; height: 12px; stroke-width: 2.6; }
.st-row__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--st-c-text); }
.st-row__more svg { width: 15px; height: 15px; transition: transform .25s var(--vt-ease-in); }
.st-row__more:hover svg { transform: translateX(3px); }
/* сцена главы инструмента: арт крупнее кадра в --z раз, фокус - поверхность */
.st-row__scene { border-radius: 24px; aspect-ratio: var(--ar, 3 / 2);
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, .9), 0 0 110px -40px color-mix(in srgb, var(--st-c) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, .06); }
.st-row__scene .vt-art {
  width: calc(100% * var(--z, 1)); height: calc(100% * var(--z, 1));
  left: clamp(calc((1 - var(--z, 1)) * 100%), calc((.5 - var(--z, 1) * var(--fx, .5)) * 100%), 0%);
  top: clamp(calc((1 - var(--z, 1)) * 100%), calc((.5 - var(--z, 1) * var(--fy, .5)) * 100%), 0%);
}
.st-row__scene .vt-quad--screen { z-index: 4; }
.st-row__scene .vt-quad--screen .vt-quad__ui { box-shadow: 0 0 22px 2px rgba(206, 196, 255, .26); }
/* подложка главы без своей сцены (новый инструмент) */
[data-page="studio"] .st-scene--ph { background: radial-gradient(120% 95% at 50% 105%, #2E2462 0%, #1D1640 46%, #150F31 100%); }
.st-scene--ph .vt-art { background: none; }
.st-ph__glow { position: absolute; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 196, 128, .30), rgba(255, 160, 96, .09) 56%, transparent 74%); }

/* ---------- «Готовое - туда, куда нужно» ----------
   В центре готовый пост из Студии, от него провода к четырем направлениям;
   у каждого - маленький живой интерфейс того, что происходит с готовым. */
.st-out { padding-block: var(--st-gap) 0; }
[data-page="studio"] .vt-faq, [data-page="studio"] .vt-start { padding-block: var(--st-gap) 0; }
[data-page="studio"] .vt-next { padding-block: var(--st-gap-in) var(--st-gap); }
.st-hub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) minmax(0, 1fr); align-items: stretch; }
.st-hub__col { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.st-hub--3 .st-hub__col:last-child { grid-template-rows: 1fr; align-content: center; }
.st-dest { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; border-radius: 20px; background: var(--st-card); border: 1px solid var(--vt-line); }
.st-dest h3 { display: flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.st-dest h3 svg { width: 18px; height: 18px; flex: none; color: var(--st-lilac); }
.st-dest p { font-size: 14px; line-height: 1.5; color: var(--vt-ink-3); }
.st-dest__ui { display: flex; gap: 6px; min-height: 58px; padding: 9px; border-radius: 13px; font-family: var(--vt-font); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.st-dest__ui--week span { position: relative; flex: 1; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 4px 0; border-radius: 9px; font-size: 14px; font-weight: 700; line-height: 1.1; color: rgba(244, 241, 255, .82); background: rgba(255, 255, 255, .05); }
.st-dest__ui--week small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 241, 255, .5); }
.st-dest__ui--week .is-on { color: #fff; background: linear-gradient(160deg, #6D5DF5, #8B5CF6); box-shadow: 0 10px 20px -12px rgba(124, 92, 246, .9); }
.st-dest__ui--week .is-on small { color: rgba(255, 255, 255, .78); }
.st-dest__ui--week em { font-style: normal; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.st-dest__ui--lib i { position: relative; flex: 1; min-height: 40px; border-radius: 8px; background: #2A2160 center / cover no-repeat; }
.st-dest__ui--lib em { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1.5; color: #fff; background: rgba(10, 8, 24, .62); }
.st-dest__ui--pub { flex-direction: column; gap: 4px; padding: 7px 9px; }
.st-dest__ui--pub span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: rgba(244, 241, 255, .86); }
.st-dest__mark { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.st-dest__mark img, .st-dest__mark svg { width: 16px; height: 16px; border-radius: 4px; }
.st-dest__ui--pub b { margin-left: auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; background: #16A34A; }
.st-dest__ui--pub b svg { width: 10px; height: 10px; stroke-width: 3.2; }
.st-dest__ui--hist { flex-direction: column; gap: 5px; padding: 8px 10px; }
.st-dest__ui--hist span { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(244, 241, 255, .6); }
.st-dest__ui--hist svg { width: 15px; height: 15px; color: var(--st-lilac); }
.st-dest__ui--hist b { font-weight: 650; color: rgba(244, 241, 255, .9); }
.st-dest__ui--hist em { font-style: normal; font-size: 11.5px; color: rgba(244, 241, 255, .45); }
/* центр: готовый пост и провода к направлениям */
.st-hub__core { position: relative; display: grid; place-items: center; padding: 0 30px; }
.st-hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-hub__wires path { fill: none; stroke: rgba(183, 171, 255, .30); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.st-hub__wires .st-hub__flow { stroke: #FF7AC6; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: 0; }
.st-hub--3 .st-hub__w-r1 { display: none; }
.st-hub__card { position: relative; width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 13px; border-radius: 16px; font-family: var(--vt-font); color: #17142B; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 30px 60px -28px rgba(0, 0, 0, .85), 0 0 90px -30px rgba(139, 124, 246, .9); }
.st-hub__k { display: flex; align-items: center; gap: 7px; margin: 2px 3px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #15803D; }
.st-hub__k i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.st-hub__ph { height: 128px; margin-bottom: 6px; border-radius: 10px; background: #D9D3EA center / cover no-repeat; }
.st-hub__card b { padding: 0 3px; font-size: 15px; font-weight: 750; line-height: 1.25; letter-spacing: -.015em; }
.st-hub__card span { padding: 0 3px; font-size: 13px; line-height: 1.45; color: #4A4663; }
.st-hub__card em { padding: 0 3px; font-style: normal; font-size: 12px; font-weight: 650; color: #4F46E5; }
@media (prefers-reduced-motion: no-preference) {
  .st-hub__wires .st-hub__flow { animation: st-flow 3.2s linear infinite; }
  .st-hub__wires .st-hub__flow:nth-of-type(6) { animation-delay: .8s; }
  .st-hub__wires .st-hub__flow:nth-of-type(7) { animation-delay: 1.6s; }
  .st-hub__wires .st-hub__flow:nth-of-type(8) { animation-delay: 2.4s; }
}

/* ---------- старт ---------- */
.st-start__lead { position: relative; z-index: 2; margin: 14px 0 28px; max-width: 34em; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .8); }

/* ================= живые интерфейсы =================
   Каждый рисуется под точную пропорцию своей поверхности (data-ui из углов
   сцены). Шкала (ревью владельца 26.09, «чуть крупнее» кадра с 9-10 px):
   база интерфейса крупнее поверхности, на 1440 модуль в масштабе ~0.75 -
   главный текст на экране 10-11.5 px, подписи 7-8 px, как у настоящего
   приложения в устройстве, а не плакат (views_studio.TEXT_MAIN_PX, тест
   test_module_text_scale). Три размера текста: --t1 главное, --t2 текст и
   кнопки, --t3 подписи. Один акцент --acc (фиолетовый) и нейтральные;
   зеленый - только в финальном такте. Меньше элементов - больше воздуха.
   На бумаге модуль печатается (multiply, showcase.css). */
.st-app, .st-topic, .st-muse, .st-plan, .st-art, .st-ch2, .st-req, .st-vreq, .st-cine {
  --t1: 14px; --t2: 12px; --t3: 10.5px; --ink: #17142B; --ink-2: #5B5675; --ink-3: #8C88A3; --acc: #6D4AE6; --acc-2: #5638D6; --acc-soft: #F1EEFD; --line: rgba(23, 20, 43, .075);
  font-family: var(--vt-font); color: var(--ink); }

/* окно приложения на экране: шапка инструмента и тело */
.st-app { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #F6F5FA; }
.st-app__bar { flex: none; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.st-app__tool { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t2); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.st-app__tool svg { width: 15px; height: 15px; flex: none; color: var(--acc); }
.st-app__chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: var(--t3); font-weight: 600; color: var(--ink-2); background: #F1F0F6; white-space: nowrap; }
.st-app__meta { margin-left: auto; font-size: var(--t3); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.st-app__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.st-app__k { font-size: var(--t3); font-weight: 600; color: var(--ink-3); }
/* белый лист со строками через волосяную линию */
.st-app__list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -14px rgba(23, 20, 43, .3); overflow: hidden; }
.st-app__list > li { flex: 1 1 0; min-height: 0; }
.st-app__list > li + li { box-shadow: inset 0 1px 0 var(--line); }
.st-app__btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 13px; border-radius: 8px; font-size: var(--t2); font-weight: 600; color: #fff; background: var(--acc); white-space: nowrap; }
.st-app__btn svg { width: 13px; height: 13px; flex: none; }
.st-app__btn--soft { color: var(--acc-2); background: var(--acc-soft); }

/* кольцо индекса хайпа: одна краска, значение - длиной дуги */
.st-ring { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.st-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.st-ring circle { fill: none; stroke-width: 2.6; }
.st-ring__bg { stroke: rgba(109, 74, 230, .12); }
.st-ring__fg { stroke: #6D4AE6; stroke-linecap: round; stroke-dasharray: calc(var(--v) * 1px) 100px; }
.st-ring b { position: relative; font-size: 12px; font-weight: 700; letter-spacing: -.02em; color: #17142B; font-variant-numeric: tabular-nums; }

/* глава «Идеи и темы»: горячая тема во весь экран планшета P4b (220x140; экран
   нарисован в перспективе - посадка по четырем углам гомографией) */
.st-topic { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 15px; background: #fff; }
.st-topic__k { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6D4AE6; }
.st-topic__k i { width: 6px; height: 6px; border-radius: 50%; background: #6D4AE6; box-shadow: 0 0 0 3px rgba(109, 74, 230, .18); }
.st-topic__row { display: flex; align-items: center; gap: 10px; }
.st-topic__title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.st-topic__row .st-ring { width: 36px; height: 36px; }
.st-topic__sig { font-size: 10.5px; color: #8C88A3; }

/* глава «Тексты»: канал кофейни в смартфоне (124x247) - классы vt-app из showcase.css */
.st-chan .vt-app__bar b { font-size: 11.5px; }
.st-chan .vt-app__title { font-size: 11px; }
.st-chan .vt-app__ok { gap: 4px; padding: 0 8px 0 3px; font-size: 9.5px; white-space: nowrap; }
.st-chan .vt-app__ok i { width: 13px; height: 13px; }
.st-chan .vt-app__ph { min-height: 48px; }

/* глава «Медиа»: медиабиблиотека на мониторе (457x225) - тонкая шапка с
   фильтром, шесть колонок плиток */
.st-lib .st-app__bar { height: 38px; }
.st-lib__seg { display: flex; gap: 2px; margin-left: 8px; padding: 2px; border-radius: 8px; background: #F1F0F6; }
.st-lib__seg em { font-style: normal; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-size: var(--t3); font-weight: 600; color: var(--ink-3); }
.st-lib__seg em.is-on { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(23, 20, 43, .12); }
.st-lib__find { margin-left: auto; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.st-lib__find svg { width: 13px; height: 13px; }
.st-lib__grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 14px 14px; }
.st-lib__grid i { position: relative; border-radius: 8px; background: #D9D3EA center / cover no-repeat; box-shadow: 0 1px 2px rgba(23, 20, 43, .14); }
.st-lib__grid em { position: absolute; right: 5px; bottom: 5px; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: var(--t3); font-weight: 600; line-height: 1.5; color: #fff; background: rgba(10, 8, 24, .62); font-variant-numeric: tabular-nums; }
.st-lib__grid i.is-pick { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FF48B0; }
.st-lib__grid i b { position: absolute; left: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #FF48B0; }
.st-lib__grid i b svg { width: 11px; height: 11px; stroke-width: 3.2; }

/* каталог Студии в планшете первого экрана (530x292): уменьшенный /studio/
   кабинета в раскладке планшета - темная плита, белая панель вкладок, полка из
   четырех ровных карточек в две колонки. Три размера текста: заголовок плиты, имена, подписи */
.st-cat { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 11px 13px 12px; font-family: var(--vt-font); color: #111827; background: #F5F4FA; }
.st-cat__plate { position: relative; flex: none; display: grid; justify-items: start; padding: 11px 16px 12px; border-radius: 11px; overflow: hidden; color: #fff;
  background: radial-gradient(45% 110% at 100% 0%, rgba(139, 92, 246, .38) 0%, transparent 70%), radial-gradient(40% 90% at 0% 100%, rgba(99, 102, 241, .22) 0%, transparent 70%), linear-gradient(125deg, #111827 0%, #312E81 58%, #4C1D95 100%); }
.st-cat__k { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 700; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: rgba(165, 180, 252, .9); }
.st-cat__k svg { width: 9px; height: 9px; }
.st-cat__h { margin-top: 5px; font-size: 16.5px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.st-cat__btns { margin-top: 10px; display: flex; gap: 6px; }
.st-cat__btns em { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 6px; font-style: normal; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.st-cat__btns svg { width: 10px; height: 10px; flex: none; }
.st-cat__b1 { color: #4338CA; background: #fff; }
.st-cat__b2 { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.st-cat__b2 svg { color: #C7D2FE; }
.st-cat__bar { flex: none; display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 4px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #E5E7EB, 0 4px 10px -8px rgba(17, 24, 39, .2); }
.st-cat__tabs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; }
.st-cat__tabs em { display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 8px; border-radius: 7px; font-style: normal; font-size: 9.5px; font-weight: 600; color: #4B5563; white-space: nowrap; }
.st-cat__tabs em i { font-style: normal; font-weight: 500; color: #9CA3AF; font-variant-numeric: tabular-nums; }
.st-cat__tabs em.is-on { color: #fff; background: #111827; }
.st-cat__tabs em.is-on i { color: rgba(255, 255, 255, .7); }
.st-cat__find { flex: none; display: inline-flex; align-items: center; gap: 5px; width: 128px; height: 23px; padding: 0 9px; border-radius: 7px; font-size: 9.5px; color: #9CA3AF; background: #F9FAFB; white-space: nowrap; }
.st-cat__find svg { width: 10px; height: 10px; flex: none; }
.st-cat__sec { flex: none; display: flex; align-items: center; gap: 7px; padding: 1px 1px 0; white-space: nowrap; }
.st-cat__sec b { font-size: 11.5px; font-weight: 600; color: #111827; }
.st-cat__sec span, .st-cat__sec small { font-size: 9.5px; color: #9CA3AF; }
.st-cat__sec i { flex: 1 1 auto; height: 1px; background: #E5E7EB; }
.st-cat__cards { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; }
.st-cat__card { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #E5E7EB; transition: box-shadow .35s ease, transform .4s var(--vt-ease-in); }
.st-cat__top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.st-cat__top i { flex: none; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; color: #4F46E5; background: #EEF2FF; box-shadow: inset 0 0 0 1px rgba(224, 231, 255, .9); }
.st-cat__top svg { width: 10.5px; height: 10.5px; }
.st-cat__top b { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; color: #111827; }
.st-cat__line { padding-left: 23px; font-size: 9.5px; line-height: 1.45; color: #6B7280; white-space: nowrap; }
.st-cat__open { flex: none; display: inline-flex; align-items: center; gap: 3px; padding-right: 1px; white-space: nowrap; font-size: 9.5px; font-weight: 600; color: #4F46E5; }
.st-cat__open svg { width: 9px; height: 9px; transition: transform .35s var(--vt-ease-in); }
.st-cat .vt-touch { left: 66%; top: 33%; }

/* экран с роликом (первый экран, глава «Медиа», ряд «Видео»): темная подложка
   и никакого светлого ореола - на темном ролике он читался светлой рамкой
   (ревью владельца 26.09); ролик на 2 px шире окна закрывает нарисованный
   светлый край экрана и скругления */
[data-page="studio"] .vt-quad--video { z-index: 4; }
[data-page="studio"] .vt-quad--video .vt-quad__ui { overflow: visible; border-radius: var(--r, 18px); background: none; }
.vt-quad--video .st-reel { position: absolute; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: calc(var(--r, 18px) + 2px); background: #0E0B1F; }

/* ролик в смартфоне */
/* петля ролика: к концу он гаснет в темный экран и проявляется заново
   (класс is-dim ставит static/js/showcase-studio.js) */
video[data-reel] { transition: opacity .5s ease; }
video[data-reel].is-dim { opacity: 0; }
.st-reel { position: relative; width: 100%; height: 100%; overflow: hidden; background: #1B1535; }
.st-reel__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.st-reel__segs { position: absolute; left: 8px; right: 8px; top: 9px; display: flex; gap: 3px; }
.st-reel__segs i { position: relative; flex: 1; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .38); }
.st-reel__segs i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.st-reel__segs i:first-child { --p: 1; }

/* Хайпометр (планшет, 520x333): три темы на белом листе, одно действие */
.st-hype__row { display: flex; align-items: center; gap: 14px; padding: 0 16px 0 14px; }
.st-hype__txt { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.st-hype__txt b { font-size: var(--t1); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.st-hype__txt small { font-size: var(--t3); color: var(--ink-3); }
.st-hype__act { flex: none; display: grid; justify-items: end; align-items: center; }
.st-hype__act > * { grid-area: 1 / 1; transition: opacity .4s ease, transform .45s var(--vt-ease-in); }
.st-hype__go .vt-touch { left: 50%; top: 55%; }
.st-hype__done { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t3); font-weight: 600; color: var(--acc-2); white-space: nowrap; }
.st-hype__done svg { width: 13px; height: 13px; flex: none; stroke-width: 2.6; }

/* Поиск инфоповодов (ноутбук, 432x221): строка запроса и одна находка */
.st-srch .st-app__bar { height: 38px; }
.st-srch .st-app__body { gap: 10px; padding: 14px 16px 16px; }
.st-srch__q { flex: none; display: flex; gap: 8px; }
.st-srch__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(109, 74, 230, .35); font-size: var(--t2); font-weight: 500; white-space: nowrap; overflow: hidden; }
.st-srch__field svg { width: 14px; height: 14px; flex: none; color: var(--ink-3); }
.st-srch__find { height: 32px; }
.st-srch__find .vt-touch { left: 50%; top: 50%; }
.st-srch__hook { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 11px 14px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -14px rgba(23, 20, 43, .3); }
.st-srch__src { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t3); color: var(--ink-3); }
.st-srch__src svg { width: 13px; height: 13px; flex: none; }
.st-srch__title { font-size: var(--t1); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.st-srch__tease { font-size: var(--t2); line-height: 1.45; color: var(--ink-2); }
.st-srch__act { margin-top: auto; display: grid; justify-items: start; align-items: center; }
.st-srch__act > * { grid-area: 1 / 1; transition: opacity .4s ease, transform .45s var(--vt-ease-in); }
.st-srch__add .vt-touch { left: 72%; top: 55%; }
.st-srch__ok { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t3); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.st-srch__ok svg { width: 14px; height: 14px; flex: none; color: #16A34A; stroke-width: 2.4; }

/* Муза (бумага, 505x302): дело в паре фраз -> две идеи канала */
.st-muse { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px 24px; }
.st-muse__ask { display: grid; gap: 4px; }
.st-muse__ask small { font-size: var(--t3); font-weight: 500; color: var(--ink-3); }
.st-muse__about { position: relative; font-size: var(--t1); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.st-muse__go { position: relative; align-self: flex-start; display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; font-size: var(--t2); font-weight: 600; color: var(--acc-2); box-shadow: inset 0 0 0 1.5px rgba(109, 74, 230, .45); }
.st-muse__go .vt-touch { left: 74%; top: 55%; }
.st-muse__ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 2px; }
.st-muse__idea { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(23, 20, 43, .1); }
.st-muse__idea em { font-style: normal; font-size: var(--t3); font-weight: 600; color: var(--acc-2); }
.st-muse__idea b { font-size: var(--t1); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.st-muse__idea span { font-size: var(--t3); line-height: 1.4; color: var(--ink-3); }
.st-muse__idea i { margin-top: auto; padding-top: 6px; font-style: normal; font-size: var(--t3); font-weight: 600; color: var(--acc-2); }

/* Контент-план (бумага, 519x319): неделя кампании, три темы ложатся в посты */
.st-plan { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
.st-plan__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-plan__h b { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t1); font-weight: 600; letter-spacing: -.01em; }
.st-plan__h b svg { width: 16px; height: 16px; color: var(--acc); }
.st-plan__h span { font-size: var(--t3); color: var(--ink-3); white-space: nowrap; }
.st-plan__week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.st-plan__week span { display: grid; justify-items: center; gap: 2px; padding: 6px 0 7px; border-radius: 9px; font-size: var(--t2); font-weight: 600; line-height: 1.15; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px rgba(23, 20, 43, .1); font-variant-numeric: tabular-nums; }
.st-plan__week small { font-size: var(--t3); font-weight: 500; color: var(--ink-3); }
.st-plan__week .is-on, .st-plan__week .is-on small { color: var(--acc-2); }
.st-plan__week .is-on { box-shadow: inset 0 0 0 1.5px rgba(109, 74, 230, .5); }
.st-plan__slots { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; }
.st-plan__slot { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; padding: 5px 0 5px 12px; box-shadow: inset 2px 0 0 var(--acc); }
.st-plan__when { display: grid; gap: 2px; font-size: var(--t3); color: var(--ink-3); }
.st-plan__when b { font-size: var(--t2); font-weight: 600; color: var(--ink); white-space: nowrap; }
.st-plan__what { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.st-plan__what b { font-size: var(--t1); font-weight: 600; line-height: 1.25; }
.st-plan__what em { font-style: normal; font-size: var(--t3); color: var(--ink-3); }

/* «Пост сейчас» (ноутбук, 424x236): сначала бриф, после генерации пост
   занимает тело окна - фото квадратом, заголовок, текст, хэштеги */
.st-pn .st-app__bar { height: 38px; }
.st-pn__stage { position: relative; display: grid; padding: 12px 16px 14px; }
.st-pn__stage > * { grid-area: 1 / 1; min-width: 0; min-height: 0; transition: opacity .45s var(--vt-ease-in), transform .55s var(--vt-ease-in); }
.st-pn__brief { display: flex; flex-direction: column; gap: 7px; }
.st-pn__area { position: relative; flex: 1 1 auto; min-height: 0; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(109, 74, 230, .35); font-size: var(--t1); font-weight: 500; line-height: 1.4; }
.st-pn__row { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-pn__sw { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t3); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.st-pn__sw i, .st-vreq__sw i { position: relative; flex: none; width: 24px; height: 14px; border-radius: 999px; background: var(--acc, #6D4AE6); }
.st-pn__sw i::after, .st-vreq__sw i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.st-pn__go { height: 30px; transition: opacity .3s ease; }
.st-pn__go .vt-touch { left: 70%; top: 55%; }
.st-pn__result { display: flex; flex-direction: column; gap: 9px; }
.st-pn__asked { flex: none; font-size: var(--t3); color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.st-pn__asked b { font-weight: 600; color: var(--ink-2); }
.st-pn__post { flex: 1 1 auto; min-height: 0; display: flex; gap: 12px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -14px rgba(23, 20, 43, .3); }
.st-pn__ph { flex: none; height: 100%; aspect-ratio: 1; border-radius: 8px; background: #D9D3EA center / cover no-repeat; }
.st-pn__txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 1px; }
.st-pn__txt b { font-size: var(--t1); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.st-pn__txt span { font-size: var(--t2); line-height: 1.45; color: var(--ink-2); }
.st-pn__txt em { margin-top: auto; font-style: normal; font-size: var(--t3); font-weight: 600; color: var(--acc-2); }
.st-pn__acts { position: relative; flex: none; display: flex; gap: 8px; }
.st-pn__acts > .st-app__btn { flex: 1 1 0; height: 30px; transition: opacity .35s ease; }
.st-pn__pub .vt-touch { left: 74%; top: 55%; }
.st-pn__done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; font-size: var(--t2); font-weight: 600; color: #15803D; background: #E9F9EF; transition: opacity .45s ease; }
.st-pn__done svg { width: 14px; height: 14px; flex: none; stroke-width: 2.6; }

/* Штурман (ноутбук, 396x211): один лист - подачи сверху, под ними растет пост */
.st-sh .st-app__bar { height: 38px; }
.st-sh .st-app__body { padding: 12px 16px 14px; }
.st-sh__doc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -14px rgba(23, 20, 43, .3); }
.st-sh__angles { display: flex; gap: 6px; margin-bottom: 4px; white-space: nowrap; }
.st-sh__angles em { position: relative; flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-style: normal; font-size: var(--t2); font-weight: 500; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 20, 43, .16);
  transition: color .3s ease, background-color .3s ease, box-shadow .3s ease, opacity .45s var(--vt-ease-in), transform .5s var(--vt-ease-in); }
.st-sh__angles em.is-pick { font-weight: 600; color: var(--acc-2); background: var(--acc-soft); box-shadow: inset 0 0 0 1.5px rgba(109, 74, 230, .55); }
.st-sh__angles .vt-touch { left: 86%; top: 60%; }
.st-sh__first { position: relative; font-size: var(--t1); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.st-sh__rest { font-size: var(--t2); line-height: 1.5; color: var(--ink-2); transition: opacity .6s ease; }

/* Статьи (журнальный разворот, 412x218): страница статьи и факты с источниками.
   Бумага, а не экран устройства: печать крупнее шкалы экранов - заголовок 15 px,
   текст 11-11.5 px на экране 1440 (ревью владельца 26.09: мелко не читается) */
.st-art { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.st-art__page { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 13px; }
.st-art__page--r { padding-left: 19px; }
.st-art__tabs { display: flex; gap: 11px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.st-art__tabs em { font-style: normal; padding-bottom: 2px; }
.st-art__tabs em.is-on { color: var(--acc-2); box-shadow: 0 1.5px 0 var(--acc); }
.st-art__h { font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.st-art__by { font-size: 10px; font-weight: 500; color: var(--ink-3); }
.st-art__lead { font-size: 11px; line-height: 1.5; color: var(--ink-2); }
.st-art__lead sup, .st-art__fact > i { font-style: normal; display: inline-grid; place-items: center; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 4px; font-size: 9px; font-weight: 800; line-height: 1; color: #fff; background: var(--acc); vertical-align: 2px; margin-left: 2px; }
.st-art__lab { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-2); }
.st-art__fact { display: flex; align-items: flex-start; gap: 8px; }
.st-art__fact > i { flex: none; margin: 1px 0 0; vertical-align: 0; }
.st-art__fact > span { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.st-art__fact small { font-size: 10px; font-weight: 500; color: var(--ink-3); }

/* Чистовик (бумага, 379x245): текст с подсветкой -> чистый текст, оценка выше.
   Бумага, а не экран: текст 14 px на экране 1440, как было до шкалы экранов
   (ревью владельца 26.09: мелко не читается) */
.st-ch2 { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 15px 18px; }
.st-ch2__top { display: flex; align-items: center; justify-content: space-between; }
.st-ch2__tool { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.st-ch2__tool svg { width: 15px; height: 15px; color: var(--acc); }
.st-ch2__score { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.st-ch2__score svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.st-ch2__score circle { fill: none; stroke-width: 3; }
.st-ch2__bg { stroke: rgba(23, 20, 43, .1); }
.st-ch2__fg { stroke: #E0A33A; stroke-linecap: round; stroke-dasharray: 64px 100px; transition: stroke-dasharray .9s var(--vt-ease-in), stroke .5s ease; }
.st-ch2__score b { position: absolute; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; transition: opacity .4s ease; }
.st-ch2__was { color: #9A5B0E; }
.st-ch2__now { opacity: 0; color: #15803D; }
.st-ch2__tx { font-size: 14px; line-height: 1.6; color: var(--ink); }
.st-ch2__tx mark { background: rgba(255, 72, 176, .18); color: inherit; border-radius: 3px; padding: 0 2px; }
.st-ch2__tx--now { display: none; }
.st-ch2__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--line); }
.st-ch2__weak, .st-ch2__good { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.st-ch2__weak { color: var(--ink-2); }
.st-ch2__weak i { width: 7px; height: 7px; border-radius: 50%; background: #FF48B0; }
.st-ch2__good { display: none; color: #15803D; }
.st-ch2__good svg { width: 13px; height: 13px; stroke-width: 2.8; flex: none; }
.st-ch2__fix { position: relative; flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--acc-2); box-shadow: inset 0 0 0 1.5px rgba(109, 74, 230, .45); white-space: nowrap; }
.st-ch2__fix .vt-touch { left: 78%; top: 55%; }

/* карточка запроса картинки (бумага, 289x196) */
.st-req, .st-vreq { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 18px; }
.st-req__k { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t3); font-weight: 600; color: var(--ink-3); }
.st-req__k svg { width: 14px; height: 14px; color: var(--acc); }
.st-req__prompt { position: relative; font-size: var(--t1); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.st-req__style { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 26px; padding: 0 11px 0 9px; border-radius: 999px; font-size: var(--t3); font-weight: 600; color: var(--acc-2); box-shadow: inset 0 0 0 1.5px rgba(109, 74, 230, .45); white-space: nowrap; }
.st-req__style i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex: none; }
.st-req__saved { display: flex; align-items: center; gap: 6px; font-size: var(--t3); font-weight: 600; color: #15803D; }
.st-req__saved svg { width: 14px; height: 14px; flex: none; stroke-width: 2.6; }

/* отпечаток картинки (бумага, 240x301): поле, кадр тремя красками */
.st-print { width: 100%; height: 100%; padding: 11px; }
.st-print .vt-print { width: 100%; height: 100%; border-radius: 3px; }

/* карточка запроса ролика (бумага, 263x155) */
.st-vreq { gap: 10px; padding: 14px 16px; }
.st-vreq .st-req__k { display: none; }
.st-vreq__prompt { position: relative; font-size: var(--t1); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.st-vreq__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.st-vreq__opts em { font-style: normal; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: var(--t3); font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px rgba(23, 20, 43, .14); }
.st-vreq__sw { flex-basis: 100%; display: inline-flex; align-items: center; gap: 8px; font-size: var(--t3); font-weight: 500; color: var(--ink-2); white-space: nowrap; }

/* Видеоредактор (монитор, 530x217): кадр 9:16 и три дорожки */
.st-ed .st-app__bar { height: 38px; }
.st-ed__exp { margin-left: auto; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 7px; font-size: var(--t3); font-weight: 600; color: #fff; background: var(--acc); }
.st-ed__body { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; padding: 12px 16px 14px; }
.st-ed__prev { position: relative; flex: none; aspect-ratio: 9 / 16; height: 100%; border-radius: 8px; background: #14102C; overflow: hidden; box-shadow: 0 3px 8px -5px rgba(23, 20, 43, .35); }
.st-ed__v { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; display: block; }
/* субтитр в кадре - как в готовом ролике: белый текст на темной плашке.
   Белый жирный с тенью прямо по светлой пене читался мылом (владелец 26.09) */
.st-ed__sub { position: absolute; left: 3px; right: 3px; bottom: 14px; text-align: center; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: -.005em; color: #fff; }
.st-ed__sub i { font-style: normal; padding: 3px 5px 4px; border-radius: 5px; background: rgba(16, 12, 34, .78); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .45); white-space: nowrap; }
.st-ed__sub i:first-child, .st-ed.is-live.is-sub2 .st-ed__sub i:first-child, .st-ed.is-live:not(.is-sub2) .st-ed__sub i:last-child { display: none; }
.st-ed.is-live:not(.is-sub2) .st-ed__sub i:first-child { display: inline; }
.st-ed__tl { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.st-ed__ruler { flex: none; display: flex; justify-content: space-between; margin-left: 76px; font-size: var(--t3); line-height: 1.2; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-ed__track { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 8px; align-items: center; }
.st-ed__track > span:first-child { font-size: var(--t3); font-weight: 500; color: var(--ink-2); }
.st-ed__lane { height: 100%; min-height: 0; display: flex; gap: 4px; padding: 4px; border-radius: 7px; background: #EFEDF8; }
.st-ed__clips { gap: 0; }
.st-ed__clips i { flex: 1; background: #2A2160 center / cover no-repeat; }
.st-ed__clips i:first-child { border-radius: 5px 0 0 5px; }
.st-ed__clips i:last-child { border-radius: 0 5px 5px 0; }
.st-ed__subs em { font-style: normal; display: flex; align-items: center; padding: 0 8px; border-radius: 5px; font-size: var(--t3); font-weight: 600; color: var(--acc-2); background: #E4DEFC; white-space: nowrap; overflow: hidden; }
.st-ed__subs em:first-child { flex: 2; }
.st-ed__subs em:last-child { flex: 3; }
.st-ed__wave { flex: 1; border-radius: 5px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' preserveAspectRatio='none'%3E%3Cpath d='M1 5v2M3 3.5v5M5 4.5v3M7 2v8M9 4v4M11 5v2M13 3v6M15 1.5v9M17 4v4M19 3v6M21 5v2M23 2.5v7M25 4v4M27 3.5v5M29 1v10M31 4v4M33 3v6M35 5v2M37 2v8M39 4v4M41 3v6M43 1.5v9M45 4.5v3M47 3v6M49 5v2M51 2.5v7M53 4v4M55 3v6M57 4.5v3M59 5v2' stroke='%238B72EE' stroke-width='1.1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 70% no-repeat; }
.st-ed__head { position: absolute; top: 18px; bottom: 0; left: calc(80px + (100% - 84px) * var(--p, 0)); width: 2px; border-radius: 2px; background: #FF48B0; box-shadow: 0 0 6px rgba(255, 72, 176, .7); }

/* ИИ-Киностудия (монитор, 447x207): три сцены на холсте, связи с импульсами,
   лента монтажа с плейхедом. Раскладка на flex - порты связей всегда в
   середине узла при любой базе интерфейса */
.st-cine { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; color: #EDEAFF;
  background: radial-gradient(rgba(167, 139, 250, .16) 1px, transparent 1.3px) 0 0 / 14px 14px, radial-gradient(90% 70% at 50% 0%, #2A2160 0%, #1A1438 70%); }
.st-cine__bar { flex: none; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.st-cine__bar b { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t2); font-weight: 600; }
.st-cine__bar b svg { width: 15px; height: 15px; color: #C4B5FD; }
.st-cine__bar span { font-size: var(--t3); color: rgba(237, 234, 255, .62); }
.st-cine__canvas { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 18px 6px; }
.st-cine__node { flex: 0 0 104px; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 11px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 12px 22px -14px rgba(0, 0, 0, .8); }
.st-cine__node b { display: flex; align-items: center; gap: 6px; padding: 0 2px; font-size: var(--t3); font-weight: 600; line-height: 16px; white-space: nowrap; }
.st-cine__node b i { font-style: normal; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; font-size: 9.5px; font-weight: 700; color: #1A1438; background: #C4B5FD; }
.st-cine__th { position: relative; height: 58px; border-radius: 7px; background: #2A2160 center / cover no-repeat; }
.st-cine__th em { position: absolute; right: 5px; bottom: 5px; font-style: normal; font-size: var(--t3); font-weight: 600; line-height: 1.4; color: #fff; padding: 0 5px; border-radius: 5px; background: rgba(18, 14, 42, .72); }
.st-cine__link { position: relative; flex: 1 1 0; max-width: 44px; min-width: 20px; height: 2px; background: rgba(167, 139, 250, .55); }
.st-cine__link::before, .st-cine__link::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #1A1438; box-shadow: inset 0 0 0 1.5px #C4B5FD; }
.st-cine__link::before { left: -3.5px; }
.st-cine__link::after { right: -3.5px; }
.st-cine__link i { position: absolute; inset: -1px 0; border-radius: 2px; background: linear-gradient(90deg, transparent, #F0ABFC 50%, transparent) -70% 0 / 40% 100% no-repeat; opacity: 0; filter: drop-shadow(0 0 3px #E879F9); }
.st-cine__tl { position: relative; flex: none; height: 26px; margin: 4px 18px 14px; padding: 4px; border-radius: 8px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.st-cine__clips { display: grid; grid-template-columns: 4fr 5fr 6fr; gap: 3px; height: 100%; }
.st-cine__clips i { border-radius: 5px; background: #2A2160 center / cover no-repeat; opacity: .9; }
.st-cine__head { position: absolute; top: -3px; bottom: -3px; left: 4px; width: 2px; border-radius: 2px; background: #FF48B0; box-shadow: 0 0 8px rgba(255, 72, 176, .8); }

/* без JS касаний нет - только финальные кадры */
html:not(.vt-js) [data-page="studio"] .vt-touch { display: none; }

/* ---------- сценарии живых модулей (классы от data-steps) ----------
   Скрытые стартовые состояния - только с vt-js; без JS и при reduced-motion
   модуль сразу в финальном кадре (showcase.js добавляет все классы). */
/* первый экран: карточки встают -> касание «Видео» -> карточка выбрана */
.vt-js [data-steps] .st-cat__card { opacity: 0; transform: translateY(4px); transition: opacity .45s var(--vt-ease-in), transform .5s var(--vt-ease-in), box-shadow .35s ease; }
.vt-js [data-steps].is-a .st-cat__card { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .st-cat__card:nth-child(2) { transition-delay: .08s; }
.vt-js [data-steps].is-a .st-cat__card:nth-child(3) { transition-delay: .16s; }
.vt-js [data-steps].is-a .st-cat__card:nth-child(4) { transition-delay: .24s; }
.vt-js [data-steps].is-b .st-cat .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 2; }
[data-steps].is-c .st-cat__card.is-pick { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(79, 70, 229, .45), 0 10px 20px -12px rgba(79, 70, 229, .5); }
[data-steps].is-c .st-cat__card.is-pick .st-cat__open svg { transform: translateX(2px); }

/* кольца индекса заполняются, когда сцена встает */
.vt-js [data-steps] .st-ring__fg { stroke-dasharray: 0 100px; transition: stroke-dasharray 1.1s var(--vt-ease-in) .25s; }
.vt-js [data-steps].is-a .st-ring__fg { stroke-dasharray: calc(var(--v) * 1px) 100px; }

/* главы разделов: тема встает, пост приходит в канал, медиатека заполняется */
.vt-js [data-steps] .st-topic > * { opacity: 0; transform: translateY(5px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-a .st-topic > * { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .st-topic > :nth-child(2) { transition-delay: .15s; }
.vt-js [data-steps].is-a .st-topic > :nth-child(3) { transition-delay: .3s; }
[data-steps].is-b .st-topic .st-ring { animation: st-glow 1.4s ease-out 1; }
.vt-js [data-steps] .st-chan .vt-app__post { opacity: 0; transform: translateY(-10px); transition: opacity .6s var(--vt-ease-in), transform .7s var(--vt-ease-in); }
.vt-js [data-steps].is-a .st-chan .vt-app__post { opacity: 1; transform: none; }
[data-steps].is-b .st-chan .vt-app__ok { color: #15803D; }
[data-steps].is-b .st-chan .vt-app__ok i { background: #16A34A; }
.vt-js [data-steps] .st-lib__grid i { opacity: 0; transform: scale(.92); transition: opacity .45s ease, transform .5s var(--vt-ease-in); }
.vt-js [data-steps].is-a .st-lib__grid i { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .st-lib__grid i:nth-child(2n) { transition-delay: .1s; }
.vt-js [data-steps].is-a .st-lib__grid i:nth-child(3n) { transition-delay: .2s; }
.vt-js [data-steps].is-a .st-lib__grid i:nth-child(5n) { transition-delay: .3s; }

/* Хайпометр: темы -> «В пост» -> вместо кнопки пост, в который легла тема.
   Без JS - финал: кнопки нет, дата поста видна */
.vt-js [data-steps] .st-hype__row { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-a .st-hype__row { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .st-hype__row:nth-child(2) { transition-delay: .12s; }
.vt-js [data-steps].is-a .st-hype__row:nth-child(3) { transition-delay: .24s; }
.vt-js [data-steps].is-b .st-hype__go .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 1; }
.st-hype__go { opacity: 0; transform: scale(.94); }
.vt-js [data-steps]:not(.is-c) .st-hype__go { opacity: 1; transform: none; }
.vt-js [data-steps]:not(.is-c) .st-hype__done { opacity: 0; }

/* Поиск инфоповодов: запрос -> «Найти» -> находка -> «Добавить в пост» ->
   «Добавлен в запланированный пост». Без JS - финальный кадр */
.vt-js [data-steps].is-b .st-srch__find .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards; }
.vt-js [data-steps].is-c .st-srch__find .vt-touch { opacity: 0 !important; animation: none; }
.vt-js [data-steps] .st-srch__hook { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-c .st-srch__hook { opacity: 1; transform: none; }
.vt-js [data-steps].is-d .st-srch__add .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 1; }
.st-srch__add { opacity: 0; transform: scale(.96); }
.vt-js [data-steps]:not(.is-e) .st-srch__add { opacity: 1; transform: none; }
.vt-js [data-steps]:not(.is-e) .st-srch__ok { opacity: 0; }

/* Муза: описание дела -> «Подобрать идею» -> идеи */
.vt-js [data-steps].is-b .st-muse__go .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards; }
.vt-js [data-steps].is-c .st-muse__go .vt-touch { opacity: 0 !important; animation: none; }
.vt-js [data-steps] .st-muse__idea { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-c .st-muse__idea { opacity: 1; transform: none; }
.vt-js [data-steps].is-c .st-muse__idea:nth-child(2) { transition-delay: .18s; }

/* Контент-план: темы по очереди ложатся в посты недели */
.vt-js [data-steps] .st-plan__what { opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-a .st-plan__slot:nth-child(1) .st-plan__what,
.vt-js [data-steps].is-b .st-plan__slot:nth-child(2) .st-plan__what,
.vt-js [data-steps].is-c .st-plan__slot:nth-child(3) .st-plan__what { opacity: 1; transform: none; }

/* «Пост сейчас»: бриф -> «Сгенерировать пост» -> пост и кнопки ->
   «Опубликовать сейчас» -> «Опубликовано в каналах». Без JS - финальный кадр */
.st-pn__brief { opacity: 0; }
.vt-js [data-steps]:not(.is-c) .st-pn__brief { opacity: 1; }
.vt-js [data-steps]:not(.is-c) .st-pn__result { opacity: 0; transform: translateY(6px); }
.vt-js [data-steps].is-b .st-pn__go .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards; }
.vt-js [data-steps].is-b .st-pn__go { opacity: .82; }
.vt-js [data-steps].is-d .st-pn__pub .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards, vt-pulse 1.2s ease-out .5s 1; }
.st-pn__acts--pub > .st-app__btn { opacity: 0; }
.vt-js [data-steps]:not(.is-e) .st-pn__acts > .st-app__btn { opacity: 1; }
.vt-js [data-steps]:not(.is-e) .st-pn__done { opacity: 0; }

/* Штурман: подачи -> выбор «Закулисье» -> первая строка -> абзац. Без JS - финал */
.vt-js [data-steps] .st-sh__angles em { opacity: 0; transform: translateY(5px); }
.vt-js [data-steps].is-a .st-sh__angles em { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .st-sh__angles em:nth-child(2) { transition-delay: .1s; }
.vt-js [data-steps].is-a .st-sh__angles em:nth-child(3) { transition-delay: .2s; }
.vt-js [data-steps].is-b .st-sh__angles .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards; }
.vt-js [data-steps].is-c .st-sh__angles .vt-touch { opacity: 0 !important; animation: none; }
.vt-js [data-steps]:not(.is-b) .st-sh__angles em.is-pick { font-weight: 500; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 20, 43, .16); }
.vt-js [data-steps]:not(.is-c) .st-sh__rest { opacity: 0; }

/* Статьи: факты -> заголовок и абзац -> сноски */
.vt-js [data-steps] .st-art__fact, .vt-js [data-steps] .st-art__h, .vt-js [data-steps] .st-art__by, .vt-js [data-steps] .st-art__lead { opacity: 0; transform: translateY(5px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-a .st-art__fact { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .st-art__fact:nth-of-type(2) { transition-delay: .14s; }
.vt-js [data-steps].is-a .st-art__fact:nth-of-type(3) { transition-delay: .28s; }
.vt-js [data-steps].is-b .st-art__h, .vt-js [data-steps].is-b .st-art__by, .vt-js [data-steps].is-b .st-art__lead { opacity: 1; transform: none; }
.vt-js [data-steps] .st-art__lead sup { opacity: 0; transition: opacity .4s ease; }
.vt-js [data-steps].is-c .st-art__lead sup { opacity: 1; }

/* Чистовик: слабые места -> «Исправить все найденное» -> чистый текст, оценка
   выше. Без JS - финальный кадр (чистый текст) */
.st-ch2__tx--was, .st-ch2__was, .st-ch2__weak, .st-ch2__fix { display: none; }
.st-ch2__tx--now { display: block; }
.st-ch2__now { opacity: 1; }
.st-ch2__fg { stroke: #22C55E; stroke-dasharray: 88px 100px; }
.st-ch2__good { display: inline-flex; }
.vt-js [data-steps]:not(.is-c) .st-ch2__tx--was { display: block; }
.vt-js [data-steps]:not(.is-c) .st-ch2__tx--now { display: none; }
.vt-js [data-steps]:not(.is-c) .st-ch2__was { display: block; opacity: 1; }
.vt-js [data-steps]:not(.is-c) .st-ch2__now { opacity: 0; }
.vt-js [data-steps]:not(.is-c) .st-ch2__fg { stroke: #E0A33A; stroke-dasharray: 64px 100px; }
.vt-js [data-steps]:not(.is-c) .st-ch2__weak { display: inline-flex; }
.vt-js [data-steps]:not(.is-c) .st-ch2__good { display: none; }
.vt-js [data-steps]:not(.is-c) .st-ch2__fix { display: inline-flex; }
.vt-js [data-steps] .st-ch2__tx mark { background: transparent; transition: background-color .5s ease; }
.vt-js [data-steps].is-a .st-ch2__tx mark { background: rgba(255, 72, 176, .18); }
.vt-js [data-steps].is-b .st-ch2__fix .vt-touch { animation: vt-tap .55s var(--vt-ease-in) forwards; }

/* Изображения: описание -> три краски (.vt-print, showcase.css) -> медиабиблиотека */
.vt-js [data-steps] .st-req__saved { opacity: 0; transform: translateY(4px); transition: opacity .45s ease, transform .5s var(--vt-ease-in); }
.vt-js [data-steps].is-d .st-req__saved { opacity: 1; transform: none; }


/* Видеоредактор: клипы и звук встают на дорожки, субтитры, плейхед */
.vt-js [data-steps] .st-ed__clips i, .vt-js [data-steps] .st-ed__wave, .vt-js [data-steps] .st-ed__subs em { opacity: 0; transform: scaleX(.6); transform-origin: 0 50%; transition: opacity .45s ease, transform .55s var(--vt-ease-in); }
.vt-js [data-steps].is-a .st-ed__clips i, .vt-js [data-steps].is-a .st-ed__wave { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .st-ed__clips i:nth-child(2) { transition-delay: .1s; }
.vt-js [data-steps].is-a .st-ed__clips i:nth-child(3) { transition-delay: .2s; }
.vt-js [data-steps].is-b .st-ed__subs em { opacity: 1; transform: none; }
.vt-js [data-steps].is-b .st-ed__subs em:nth-child(2) { transition-delay: .15s; }
.vt-js [data-steps] .st-ed__sub { opacity: 0; transition: opacity .5s ease; }
.vt-js [data-steps].is-b .st-ed__sub { opacity: 1; }

/* Киностудия: сцены встают, по связям бегут импульсы, плейхед идет */
.vt-js [data-steps] .st-cine__node { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--vt-ease-in), transform .6s var(--vt-ease-in); }
.vt-js [data-steps].is-a .st-cine__node { opacity: 1; transform: none; }
.vt-js [data-steps].is-a .st-cine__node:nth-child(3) { transition-delay: .15s; }
.vt-js [data-steps].is-a .st-cine__node:nth-child(5) { transition-delay: .3s; }
[data-steps].is-a .st-cine__link i { animation: st-imp 2.4s linear .6s infinite; }
[data-steps].is-a .st-cine__link:nth-child(4) i { animation-delay: 1.8s; }
[data-steps].is-a .st-cine__head { animation: st-play 9s linear .6s infinite; }

@keyframes st-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes st-flow { 0% { stroke-dashoffset: 100; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes st-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes st-imp { 0% { background-position: -70% 0; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { background-position: 170% 0; opacity: 0; } }
@keyframes st-play { from { left: 4px; } to { left: calc(100% - 6px); } }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-glow { 0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .55); } 100% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); } }

@media (prefers-reduced-motion: reduce) {
  .st-lamp, .st-cine__link i, .st-cine__head { animation: none !important; }
}

/* ---------- адаптив ---------- */
@media (min-width: 1200px) {
  /* карточка первого экрана - по центру промежутка между краем окна и левым
     краем планшета (--tab-x - доля арта из углов экрана, views_studio.hero_geo):
     поля слева и справа от карточки равны при любой ширине */
  [data-page="studio"] .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(--tab-x, .527));
    --cw: min(560px, calc(var(--wall) - 64px));
  }
  .st-glass {
    background: radial-gradient(90% 70% at 100% 0%, rgba(255, 92, 184, .09) 0%, transparent 55%), linear-gradient(135deg, rgba(36, 27, 82, .42) 0%, rgba(18, 14, 42, .26) 100%);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 60px -30px rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  }
}
@media (max-width: 1199px) {
  .st-hero { background: linear-gradient(180deg, #17122F 0%, var(--vt-paper) 100%); }
  .st-eyebrow { justify-content: center; }
  [data-page="studio"] .st-hero-m::before { background: linear-gradient(180deg, #16112E, rgba(18, 14, 42, 0)); }
  [data-page="studio"] .st-hero-m::after { background: linear-gradient(0deg, var(--vt-paper), rgba(18, 14, 42, 0)); }
  /* разделы: одна колонка, карточка лежит - кадр слева, текст справа */
  .st-doors { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
  .st-door { flex-direction: row; }
  [data-page="studio"] .st-door__scene { width: 46%; aspect-ratio: 4 / 3; align-self: center; }
  .st-door { align-items: center; }
  .st-hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
  .st-hub__core { grid-column: 1 / -1; grid-row: 1; padding: 0; }
  .st-hub__card { max-width: 340px; }
  .st-hub__wires { display: none; }
}
@media (max-width: 959px) {
  .st-duo { grid-template-columns: minmax(0, 1fr); }
  .st-duo { max-width: 640px; margin-inline: auto; }
  .st-row, .st-row--flip { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 640px; margin-inline: auto; width: 100%; }
  .st-row--flip .st-row__text { order: 0; }
  .st-rows { padding-inline: 20px; }
}
@media (max-width: 639px) {
  /* сцена на телефоне: кадр --m-ar, арт по его высоте и крупнее в --mz раз
     (views_studio.mobile_zoom: модуль на 390 - от 0.9), фокус на главной
     поверхности; карточка запроса рядом не помещается - в кадре только экран */
  .st-row__scene { margin-inline: -16px; border-radius: 0; aspect-ratio: var(--m-ar, 4 / 5); box-shadow: none; }
  .st-row__scene .vt-art, .vt-ch__grid > .vt-scene.st-ch__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, .5)) * 100%), 0%);
  }
  .st-row .st-q-side { display: none; }
  .st-rows { padding-inline: 16px; }
  .st-row__title { font-size: 22px; }
  .st-row__lead { font-size: 15.5px; }
  /* разделы на телефоне - лента с прокруткой вбок, следующая карточка видна краем */
  .st-doors { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; max-width: none; margin-inline: -16px; padding: 4px 16px 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .st-doors::-webkit-scrollbar { display: none; }
  .st-door { flex-direction: column; scroll-snap-align: start; }
  [data-page="studio"] .st-door__scene { width: auto; aspect-ratio: 16 / 10; align-self: stretch; }
  .st-door__body { padding: 18px 18px 16px; }
  .st-door__t { font-size: 19px; }
  .st-door__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
  .st-door__tools a { font-size: 13.5px; white-space: normal; }
  /* дуэт: экраны устройств уходят под стекло подписи */
  .st-hub { grid-template-columns: minmax(0, 1fr); }
  .st-hub__col { grid-template-rows: none; }
  .st-duo__card { min-height: 420px; }
  .st-duo__body { margin: 10px; padding: 18px 18px 20px; }
  /* холст Киностудии на телефоне: три кадра в ряд, без связей */
  .st-cine__link { visibility: hidden; flex: 0 0 14px; min-width: 0; }
}
@media (max-width: 380px) {
  .st-doors { grid-auto-columns: 88%; }
}