/* Connector Studio — кадры 12–19. Префикс st-. Токены — из style.css.
   Для неспециалистов: крупный текст (основной ≥ 18 px), мало элементов, воздух.
   Конечное состояние действия — стиль по умолчанию; анимация идёт к нему (fill both),
   под .shot анимации выключены → сразу финал. */

@keyframes st-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes st-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes st-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }

/* ───────── рамка панели ───────── */
.st-panel { position: absolute; left: 96px; top: 96px; width: 880px; padding: 32px 42px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(8px); }
.st-top { display: flex; align-items: center; gap: 14px; }
.st-top b { font: 600 22px/1 var(--sans); color: var(--acc); }
.st-mock { margin-left: auto; font: 500 16px/1 var(--mono); color: var(--ink3); padding: 7px 10px; border: 1px dashed rgba(255,255,255,.18); border-radius: 7px; }
.st-tabs { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.st-tabs li { padding-top: 10px; border-top: 3px solid rgba(255,255,255,.1); font: 500 17px/1 var(--sans); color: var(--ink3); }
.st-tabs li.done { border-top-color: rgba(53,208,138,.5); color: var(--ink2); }
.st-tabs li.on { border-top-color: var(--acc); color: var(--ink); font-weight: 600; box-shadow: 0 -6px 14px -8px rgba(53,208,138,.8); }
.st-panel h2 { font-size: 40px !important; line-height: 1.12 !important; margin: 0 0 12px !important; }
.st-panel .gw-lead { font-size: 21px; line-height: 1.45; margin: 0 0 26px; }
.st-label { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 16px/1.4 var(--sans); color: var(--ink3); }
.st-sub { margin: 26px 0 14px; font: 600 20px/1.2 var(--sans); color: var(--ink2); animation: st-in .5s both; animation-delay: var(--d); }

/* общие кусочки */
.st-doc { flex: none; position: relative; width: 34px; height: 44px; border-radius: 4px; background: linear-gradient(180deg, #3a463f, #232b27); border: 1.5px solid rgba(53,208,138,.7); }
.st-doc::before { content: ''; position: absolute; left: 7px; right: 9px; top: 16px; height: 14px; background: repeating-linear-gradient(180deg, rgba(53,208,138,.6) 0 2px, transparent 2px 6px); }
.st-tick { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--acc); }
.st-tick::after { content: ''; position: absolute; left: 9px; top: 5px; width: 6px; height: 12px; border: solid var(--bg); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.st-btn { flex: none; padding: 16px 26px; border-radius: 10px; background: var(--acc); color: var(--bg); font: 600 20px/1 var(--sans); }
.st-press { animation: st-press .6s both; animation-delay: calc(var(--d) + .9s); }
@keyframes st-press { 0% { transform: none; filter: none; } 35% { transform: scale(.9); filter: brightness(1.25); box-shadow: 0 0 0 0 rgba(53,208,138,.7); } 100% { transform: none; filter: none; box-shadow: 0 0 0 18px rgba(53,208,138,0); } }

/* ───────── 12 · обзор ───────── */
.st-flow { position: absolute; left: 96px; right: 96px; bottom: 76px; }
.st-flow-head { display: grid; grid-template-columns: 1fr 760px; gap: 60px; align-items: end; margin-bottom: 34px; }
.st-flow-head .gw-kicker { font-size: 16px; }
.st-flow-head h2 { font-size: 54px !important; margin: 0 !important; }
.st-flow-head .gw-lead { margin: 0; font-size: 22px; }
.st-flow-bar { position: relative; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); margin-bottom: 18px; }
.st-flow-bar::after { content: ''; position: absolute; inset: 0; border-radius: 2px; background: var(--acc); transform-origin: left; box-shadow: 0 0 16px rgba(53,208,138,.6); animation: st-bar 2.6s cubic-bezier(.4,.1,.3,1) both 1s; }
.st-flow-row { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto 1fr; column-gap: 34px; }
.st-fstep { position: relative; padding: 26px 28px 28px; border-radius: 16px; background: rgba(16,40,29,.88); border: 1px solid var(--acc); box-shadow: 0 0 34px rgba(53,208,138,.16); display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; animation: st-lit .7s ease both; animation-delay: var(--d); }
@keyframes st-lit { from { background: rgba(12,13,12,.86); border-color: rgba(255,255,255,.09); box-shadow: none; } to { background: rgba(16,40,29,.88); border-color: #35d08a; box-shadow: 0 0 34px rgba(53,208,138,.16); } }
.st-fstep:not(:last-child)::after { content: ''; position: absolute; right: -27px; top: 50%; width: 20px; height: 2px; background: var(--acc); }
.st-fstep:not(:last-child)::before { content: ''; position: absolute; right: -35px; top: calc(50% - 6px); border: 6px solid transparent; border-left: 8px solid var(--acc); }
.st-fn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--acc); color: var(--bg); font: 600 19px/1 var(--mono); margin-bottom: 18px; }
.st-fstep b { font: 600 26px/1.2 var(--sans); }
.st-fstep p { margin: 12px 0 0; font: 400 20px/1.4 var(--sans); color: var(--ink2); }
.st-file { position: absolute; right: 18px; top: 18px; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 10px; background: #0d1411; border: 1px solid rgba(53,208,138,.7); font: 500 18px/1 var(--sans); box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: st-fly 1.1s cubic-bezier(.3,.7,.2,1) both .35s; }
.st-file .st-doc { width: 20px; height: 26px; }
.st-file .st-doc::before { top: 9px; height: 9px; left: 4px; right: 5px; }
@keyframes st-fly { 0% { opacity: 0; transform: translate(-60px, -340px) rotate(-14deg) scale(1.25); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.st-formats { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.st-fm-k { font: 500 18px/1 var(--sans); color: var(--ink3); margin-right: 8px; }
.st-fm { padding: 10px 16px; border-radius: 9px; border: 1px solid var(--line); background: rgba(12,13,12,.8); font: 500 18px/1 var(--sans); color: var(--ink2); animation: st-in .5s both; animation-delay: var(--d); }
.st-flow .st-label { margin-top: 18px; padding-top: 0; border-top: 0; }

/* ───────── 13 · покажи систему ───────── */
.st-drop { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border: 2px dashed rgba(53,208,138,.55); border-radius: 14px; background: rgba(53,208,138,.05); animation: st-drop 1.2s ease both .4s; }
@keyframes st-drop { 0% { border-color: rgba(255,255,255,.15); background: transparent; } 60% { border-color: #35d08a; background: rgba(53,208,138,.14); } 100% { border-color: rgba(53,208,138,.55); background: rgba(53,208,138,.05); } }
.st-dfile { display: flex; align-items: center; gap: 18px; animation: st-fly2 .9s cubic-bezier(.3,.7,.2,1) both .4s; }
@keyframes st-fly2 { from { opacity: 0; transform: translate(260px, -160px) rotate(10deg) scale(1.2); } to { opacity: 1; transform: none; } }
.st-dfile b { display: block; font: 600 24px/1.2 var(--sans); }
.st-dfile span { display: block; margin-top: 6px; font: 400 18px/1.2 var(--sans); color: var(--ink3); }
.st-parsed { display: flex; align-items: center; gap: 12px; font: 600 20px/1 var(--sans); color: var(--acc); animation: st-pop .5s both 1.2s; }
.st-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.st-fact { padding: 18px 20px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.025); animation: st-in .5s both; animation-delay: var(--d); }
.st-fact b { display: block; font: 600 36px/1 var(--sans); color: var(--ink); }
.st-fact span { display: block; margin-top: 10px; font: 400 18px/1.3 var(--sans); color: var(--ink2); }
.st-readings { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.st-readings span { padding: 10px 15px; border-radius: 20px; border: 1px solid rgba(53,208,138,.45); background: rgba(53,208,138,.07); font: 500 18px/1 var(--sans); animation: st-in .35s both; animation-delay: var(--d); }
.st-readings .st-more { border-style: dashed; color: var(--ink2); background: transparent; }

/* ───────── 14 · ИИ строит связь ───────── */
.st-link { display: grid; grid-template-columns: 1fr 140px 1fr; align-items: center; margin-bottom: 26px; }
.st-node { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); animation: st-in .5s both .5s; }
.st-node.is-net { border-color: var(--acc); background: rgba(16,40,29,.8); animation-delay: .8s; }
.st-node span { display: block; font: 500 18px/1 var(--sans); color: var(--ink3); }
.st-node b { display: block; margin-top: 10px; font: 600 22px/1.2 var(--sans); }
.st-wire { position: relative; height: 3px; margin: 0 10px; background: rgba(53,208,138,.5); border-radius: 2px; animation: st-bar .6s both 1s; transform-origin: left; }
.st-wire i { position: absolute; left: 0; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); animation: st-run 1.8s linear infinite; animation-delay: calc(var(--d) + 1.2s); opacity: 0; }
@keyframes st-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 11px); opacity: 0; } }
.shot .st-wire i:first-child { animation: none !important; opacity: 1; left: calc(50% - 6px); }
.st-check { display: grid; gap: 12px; }
.st-ci { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 12px; border: 1px solid rgba(53,208,138,.4); background: rgba(53,208,138,.05); animation: st-ci .5s both; animation-delay: var(--d); }
.st-ci .st-tick { animation: st-pop .45s both; animation-delay: calc(var(--d) + .2s); }
@keyframes st-ci { from { opacity: .25; border-color: rgba(255,255,255,.09); background: transparent; } to { opacity: 1; border-color: rgba(53,208,138,.4); background: rgba(53,208,138,.05); } }
.st-ci span { display: block; font: 500 18px/1 var(--sans); color: var(--ink3); }
.st-ci b { display: block; margin-top: 8px; font: 600 21px/1.25 var(--sans); }

/* ───────── 15 · проверка ───────── */
.st-cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.st-city { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(53,208,138,.45); background: rgba(53,208,138,.08); font: 500 19px/1 var(--sans); animation: st-green .5s both; animation-delay: var(--d); }
.st-city i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
@keyframes st-green { from { border-color: rgba(255,255,255,.09); background: transparent; color: #7d8781; } to { border-color: rgba(53,208,138,.45); background: rgba(53,208,138,.08); color: #eef2ef; } }
.st-warn-h b { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%; background: var(--arid); color: var(--bg); font: 600 20px/1 var(--sans); vertical-align: middle; }
.st-warn-h { color: var(--ink); font-size: 22px; }
.st-wrong { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-wi { display: flex; gap: 14px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(217,154,60,.5); background: rgba(217,154,60,.08); animation: st-in .45s both; animation-delay: var(--d); }
.st-wi > i { flex: none; margin-top: 6px; width: 10px; height: 10px; border-radius: 2px; background: var(--arid); }
.st-wi b { display: block; font: 600 20px/1.25 var(--sans); }
.st-wi span { display: block; margin-top: 6px; font: 400 18px/1.35 var(--sans); color: var(--ink2); }

/* ───────── 16 · вопросы ───────── */
.st-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.st-q { padding: 20px 0 22px; border-top: 1px solid var(--line); animation: st-in .5s both; animation-delay: var(--d); }
.st-q > b { display: block; font: 600 23px/1.25 var(--sans); }
.st-ev { display: block; margin-top: 6px; font: 400 18px/1.35 var(--sans); color: var(--ink3); }
.st-opts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.st-opt { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 24px; border: 1px solid rgba(255,255,255,.14); font: 500 19px/1 var(--sans); color: var(--ink3); }
.st-opt.on { padding-left: 10px; border-color: var(--acc); background: rgba(53,208,138,.16); color: var(--ink); animation: st-pick .45s both; animation-delay: var(--d); }
.st-opt.on .st-tick { animation: st-pop .45s both; animation-delay: var(--d); }
@keyframes st-pick { from { border-color: rgba(255,255,255,.14); background: transparent; color: #7d8781; } to { border-color: #35d08a; background: rgba(53,208,138,.16); color: #eef2ef; } }
.st-done { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); font: 600 20px/1 var(--sans); color: var(--acc); animation: st-in .5s both; animation-delay: var(--d); }

/* ───────── 17 · предпросмотр ───────── */
.st-chart { padding: 16px 20px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.st-chart-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.st-chart-h b { font: 600 20px/1.2 var(--sans); }
.st-chart-h span { font: 400 18px/1.2 var(--sans); color: var(--ink3); }
.st-cb { display: grid; grid-template-columns: 130px 1fr 56px; gap: 14px; align-items: center; height: 27px; animation: st-in .3s both; animation-delay: var(--d); }
.st-cb span { font: 400 18px/1 var(--sans); color: var(--ink2); }
.st-cb b { font: 600 18px/1 var(--sans); text-align: right; }
.st-cb-t { height: 12px; }
.st-cb-t i { display: block; height: 100%; min-width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, rgba(53,208,138,.55), #35d08a); transform-origin: left; animation: st-bar .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d) + .2s); }
.st-qual { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; margin: 16px 0; }
.st-ql { display: flex; align-items: center; gap: 10px; font: 500 18px/1.2 var(--sans); animation: st-in .4s both; animation-delay: var(--d); }
.st-ql .st-tick { width: 22px; height: 22px; }
.st-ql .st-tick::after { left: 7.5px; top: 4px; width: 5px; height: 10px; border-width: 0 2.5px 2.5px 0; }
.st-approve { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px 16px 22px; border-radius: 12px; border: 1px solid rgba(53,208,138,.55); background: rgba(16,40,29,.7); animation: st-in .5s both; animation-delay: var(--d); }
.st-ap-l { display: grid; gap: 8px; }
.st-ap-l > b { font: 600 21px/1.25 var(--sans); }
.st-stamp { font: 500 18px/1.3 var(--sans); color: var(--acc); animation: st-fade .4s both; animation-delay: calc(var(--d) + 1.3s); }

/* ───────── 18 · самолечение ───────── */
.st-alert { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 12px; background: rgba(217,154,60,.12); border: 1px solid rgba(217,154,60,.65); animation: st-in .5s both .5s; }
.st-alert > i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--arid); box-shadow: 0 0 12px var(--arid); }
.st-alert b { font: 600 22px/1.3 var(--sans); }
.st-ba { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; margin: 18px 0; }
.st-card { padding: 18px 22px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); animation: st-in .5s both; animation-delay: var(--d); }
.st-card span { display: block; font: 500 18px/1 var(--sans); color: var(--ink3); }
.st-card b { display: block; margin: 12px 0 8px; font: 600 28px/1.1 var(--sans); white-space: nowrap; }
.st-card em { display: block; font: 400 18px/1.2 var(--sans); font-style: normal; color: var(--ink2); }
.st-card.is-after { border-color: rgba(217,154,60,.6); }
.st-card.is-after b { color: #f0c27a; }
.st-arrow { justify-self: center; position: relative; width: 30px; height: 2px; background: var(--ink3); }
.st-arrow::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--ink3); border-right: 0; }
.st-pause { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 500 19px/1.3 var(--sans); color: var(--ink2); animation: st-in .45s both; animation-delay: var(--d); }
.st-pause i { flex: none; width: 18px; height: 18px; background: linear-gradient(90deg, var(--arid) 0 6px, transparent 6px 12px, var(--arid) 12px 18px); }
.st-fix-k { font: 500 18px/1 var(--sans); color: var(--acc); }
.st-live { position: relative; height: 26px; margin-top: 18px; }
.st-live span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 12px; font: 600 21px/26px var(--sans); white-space: nowrap; }
.st-live span::before { content: ''; width: 12px; height: 12px; border-radius: 50%; }
.st-paused { color: var(--arid); opacity: 0; animation: st-out .4s both; animation-delay: calc(var(--d) + 1s); }
.st-paused::before { background: var(--arid); }
.st-resumed { color: var(--acc); animation: st-fade .4s both; animation-delay: calc(var(--d) + 1.2s); }
.st-resumed::before { background: var(--acc); box-shadow: 0 0 10px var(--acc); }

/* ───────── 19 · шаблоны ───────── */
.st-tpl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-tcol { padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(53,208,138,.45); background: rgba(16,40,29,.55); }
.st-tcol.is-out { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.02); }
.st-tcol-h { font: 600 19px/1.2 var(--sans); color: var(--ink2); margin-bottom: 14px; }
.st-ti { display: flex; align-items: center; gap: 12px; padding: 7px 0; font: 500 19px/1.2 var(--sans); animation: st-in .4s both; animation-delay: var(--d); }
.st-ti .st-tick { width: 22px; height: 22px; }
.st-ti .st-tick::after { left: 7.5px; top: 4px; width: 5px; height: 10px; border-width: 0 2.5px 2.5px 0; }
.st-ti.is-x span { color: var(--ink3); text-decoration: line-through; text-decoration-color: #ff8a7a; text-decoration-thickness: 2px; }
.st-x { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #ff8a7a; }
.st-x::before, .st-x::after { content: ''; position: absolute; left: 4.5px; top: 9px; width: 10px; height: 2px; background: #ff8a7a; transform: rotate(45deg); }
.st-x::after { transform: rotate(-45deg); }
.st-next { margin: 18px 0 22px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(94,200,255,.45); background: rgba(10,30,44,.6); }
.st-next > b { display: block; font: 600 20px/1.2 var(--sans); margin-bottom: 14px; }
.st-next-flow { display: flex; gap: 22px; }
.st-next-flow span { flex: 1 1 auto; white-space: nowrap; position: relative; padding: 11px 12px; border-radius: 9px; border: 1px solid #5ec8ff; background: rgba(94,200,255,.12); font: 500 18px/1.2 var(--sans); text-align: center; animation: st-step .45s both; animation-delay: var(--d); }
.st-next-flow span:not(:last-child)::after { content: ''; position: absolute; right: -18px; top: 50%; width: 14px; height: 2px; background: #5ec8ff; }
@keyframes st-step { from { border-color: rgba(255,255,255,.1); background: transparent; color: #7d8781; } to { border-color: #5ec8ff; background: rgba(94,200,255,.12); color: #eef2ef; } }
.st-cmp { display: grid; gap: 16px; }
.st-bar { display: grid; grid-template-columns: 250px 1fr 140px; gap: 18px; align-items: center; }
.st-bar-l b { display: block; font: 600 20px/1.2 var(--sans); }
.st-bar-l em { display: block; margin-top: 4px; font: 400 18px/1.2 var(--sans); font-style: normal; color: var(--ink3); }
.st-bar-t { height: 18px; border-radius: 4px; background: rgba(255,255,255,.05); }
.st-bar-t i { display: block; height: 100%; border-radius: 4px; transform-origin: left; }
.st-bar.is-long .st-bar-t i { width: 100%; background: linear-gradient(90deg, #c0811c, #d99a3c); animation: st-bar 2s linear both 2.7s; }
.st-bar.is-short .st-bar-t i { width: 2.5%; min-width: 10px; background: var(--acc); box-shadow: 0 0 12px var(--acc); animation: st-bar .3s ease-out both 2.7s; }
.st-bar-v { font: 600 24px/1.2 var(--sans); text-align: right; white-space: nowrap; }
.st-bar.is-long .st-bar-v { color: var(--arid); animation: st-fade .4s both 4.5s; }
.st-bar.is-short .st-bar-v { color: var(--acc); animation: st-fade .4s both 3s; }

/* ───────── съёмка: сразу финал ───────── */
.shot .st-panel *, .shot .st-flow *, .shot .st-flow-bar::after { animation: none !important; }
.shot .st-paused { opacity: 0; }
.st-city i { animation: st-dot .5s both; animation-delay: var(--d); }
@keyframes st-dot { from { background: #3a403d; box-shadow: none; } to { background: #35d08a; box-shadow: 0 0 8px #35d08a; } }
.shot .st-city i { animation: none !important; }