/* Схемы страниц раздела Solutions (11.11.2026; владелец: «в таком же стиле, сдержанно, больше инфографики»; правки по первой
   тройке: «свободнее», «прорисовать, что происходит», карточка задачи не сжатая, матрицу убрать). Каркас страницы и общие
   детали (карточки, телефон, строки, выключатель, указатель, движение sn-a) - assets/social.css; здесь только то, чего там нет:
   телефон с экраном приложения и схемы этих страниц (lib/sol.php). Классы только so-*. Движение - в конце файла, под
   html.sn-anim и .sn-in у схемы (ставит sn_boot); без них схема стоит картинкой в итоговом виде. */

/* ---------- телефон с экраном приложения ---------- */
.so-scr{background:#f4f4f0}
.so-scr::after{display:none}
.so-scr .sn-sb{color:#0b0b0d}
.so-scr .sn-sb i{background:#0b0b0d}
.so-app{position:absolute;inset:calc(var(--w)*.16) calc(var(--w)*.07) calc(var(--w)*.075);display:flex;flex-direction:column;gap:calc(var(--w)*.04)}
.so-seq .so-app{opacity:0}
.so-seq .so-app:last-of-type{opacity:1}
.so-app-h{display:block;min-height:calc(var(--w)*.1);font:700 calc(var(--w)*.088)/1.1 var(--sans);letter-spacing:-.02em;color:#0b0b0d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-row{position:relative;display:flex;align-items:center;gap:calc(var(--w)*.045);padding:calc(var(--w)*.04);border-radius:calc(var(--w)*.06);background:#fff;box-shadow:0 1px 2px rgba(16,16,20,.07)}
.so-row>i{flex:0 0 auto;display:block;width:calc(var(--w)*.13);height:calc(var(--w)*.13);border-radius:calc(var(--w)*.04);background:#e2e8e3}
.so-row>span{flex:1;display:grid;gap:calc(var(--w)*.03);min-width:0}
.so-row b{display:block;height:calc(var(--w)*.035);width:78%;border-radius:99px;background:#c6cbc6}
.so-row s{display:block;height:calc(var(--w)*.028);width:50%;border-radius:99px;background:#e0e3df}
.so-row u{flex:0 0 auto;text-decoration:none;font:600 calc(var(--w)*.058)/1 var(--sans);letter-spacing:-.01em;color:#0b0b0d}
.so-row.on{box-shadow:0 0 0 1.5px var(--sn-ok)}
.so-row.on>i{position:relative;background:var(--sn-okbg)}
.so-row.on>i::after{content:"";position:absolute;left:50%;top:45%;width:26%;height:48%;border:solid var(--sn-oktx);border-width:0 calc(var(--w)*.018) calc(var(--w)*.018) 0;transform:translate(-50%,-50%) rotate(45deg)}
.so-tot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--w)*.03);padding:calc(var(--w)*.05) calc(var(--w)*.055);border-radius:calc(var(--w)*.06);background:#fff;box-shadow:0 1px 2px rgba(16,16,20,.07);font:500 calc(var(--w)*.06)/1 var(--sans);color:#55555e;white-space:nowrap}
.so-tot b{font-weight:700;color:#0b0b0d}
.so-tot.hl{box-shadow:0 0 0 1.5px var(--sn-ok)}
.so-cta{position:relative;display:flex;align-items:center;justify-content:center;margin-top:auto;height:calc(var(--w)*.17);border-radius:calc(var(--w)*.06);background:#0b0b0d;font:600 calc(var(--w)*.064)/1 var(--sans);color:#fff;white-space:nowrap}
.so-box{display:none;position:absolute;inset:calc(var(--w)*-.03);border:1.5px solid var(--sn-ok);border-radius:calc(var(--w)*.08);pointer-events:none}
.so-cta.hl .so-box,.so-cta.err .so-box{display:block}
.so-cta.err .so-box{border-color:#dc2626}
.so-rip{position:absolute;left:50%;top:50%;width:calc(var(--w)*.18);height:calc(var(--w)*.18);margin:calc(var(--w)*-.09);border-radius:50%;background:rgba(22,163,74,.4);opacity:0;pointer-events:none}
.so-row .so-rip{left:auto;right:calc(var(--w)*.12)}
.so-in{display:flex;align-items:center;gap:calc(var(--w)*.025);height:calc(var(--w)*.17);padding:0 calc(var(--w)*.06);border:1px solid #d8dbd6;border-radius:calc(var(--w)*.05);background:#fff}
.so-in s{display:block;height:calc(var(--w)*.035);width:64%;border-radius:99px;background:#c6cbc6}
.so-in i{display:block;width:calc(var(--w)*.042);height:calc(var(--w)*.042);border-radius:50%;background:#0b0b0d}
.so-okv{display:grid;justify-items:center;gap:calc(var(--w)*.06);margin:auto 0}
.so-okv svg{box-sizing:border-box;width:calc(var(--w)*.3);height:calc(var(--w)*.3);padding:calc(var(--w)*.085);border-radius:50%;background:var(--sn-okbg);color:var(--sn-oktx)}
.so-okv b{font:700 calc(var(--w)*.085)/1 var(--sans);color:#0b0b0d}
.so-ld{display:block;height:calc(var(--w)*.05);margin-top:calc(var(--w)*.52);border-radius:99px;background:#fff;overflow:hidden}
.so-ld i{display:block;width:68%;height:100%;border-radius:99px;background:var(--sn-ok)}
.so-ld.err i{width:42%;background:#dc2626}
.so-bn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:calc(var(--w)*.34);border-radius:calc(var(--w)*.06);background:linear-gradient(135deg,#dbe8de,#e3e7f3);font:700 calc(var(--w)*.13)/1 var(--sans);letter-spacing:-.02em;color:#0b0b0d}
.so-bn.hl{box-shadow:0 0 0 1.5px var(--sn-ok)}
.so-bn+.so-ld{margin-top:calc(var(--w)*.1)}
.so-mb{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:calc(var(--w)*.15);border-radius:calc(var(--w)*.06);background:#fff;box-shadow:0 1px 2px rgba(16,16,20,.07);font:600 calc(var(--w)*.062)/1 var(--sans);color:#0b0b0d;white-space:nowrap}
.so-mb.hl{box-shadow:0 0 0 1.5px var(--sn-ok)}
.so-ph.mid{--w:128px;box-shadow:0 16px 30px -18px rgba(16,16,20,.5)}

/* ---------- герой: карточка и телефон рядом, без наезда ---------- */
.so-hero{gap:clamp(18px,2.4vw,30px)}
.so-hero .sn-ph{--w:188px;margin-left:0;margin-top:0}
.so-hcard{flex:1 1 0;min-width:0;max-width:390px}
/* провод: точка идёт к телефону на каждое действие и обратно, когда экран прочитан */
.so-wire{--ww:44px;position:relative;flex:0 0 44px;display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,#8fa695 55%,transparent 55%) 0 0/7px 2px repeat-x}
.so-wire b{position:absolute;left:0;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--sn-ok);box-shadow:0 0 0 3px rgba(22,163,74,.2);opacity:0}
.so-hero .so-wire{margin:0 -8px}
.so-ic,.sn-li .so-ic{flex:0 0 38px;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:var(--sn-soft);overflow:visible}
.so-ic svg,.sn-li .so-ic svg{width:18px;height:18px;color:var(--sn-ink)}
/* 12.11: флаг страны вместо значка - круглый, во всю плашку, с тонким кольцом */
.so-icf,.sn-li .so-icf{background:none}
.so-icf .sn-flag{width:34px;height:34px;border:0;box-shadow:0 0 0 1px rgba(16,16,20,.1),0 4px 10px -4px rgba(16,16,20,.35)}
@media (max-width:1180px) and (min-width:1081px){.so-hero .sn-ph{--w:160px}}
@media (max-width:560px){.so-hero .so-wire{--ww:30px;flex:0 0 auto;width:30px;margin:8px 0;transform:rotate(90deg)}.so-hero{flex-direction:column;gap:20px;padding:56px 16px 64px}.so-hero .sn-ph{--w:156px}.so-hcard{flex:0 0 auto;width:100%;max-width:none}.so-hero .sn-teamcard{position:static;align-self:flex-start}}

/* телефон героя встаёт вместе с карточкой, без паузы перед ним */
.sn-anim .so-hero.sn-in .sn-ph{animation:sn-rise .5s cubic-bezier(.2,.7,.2,1) both}

/* ---------- просторные карточки: задача и списки ---------- */
.so-run,.so-list,.so-listc{font-size:13.5px}
.so-run .sn-card-h,.so-list .sn-card-h,.so-listc .sn-card-h{padding:14px 17px;font-size:14px}
.so-run .sn-card-h small,.so-list .sn-card-h small,.so-listc .sn-card-h small{font-size:12px}
.so-list .sn-li,.so-listc .sn-li{padding:12px 17px;gap:11px}
.so-list .sn-li code,.so-listc .sn-li code{font-size:14px}
.so-list .sn-li small,.so-listc .sn-li small{font-size:12px}
.so-run{width:100%;max-width:410px}
.so-msg{margin:15px 17px 9px;padding:13px 15px;border-radius:13px 13px 13px 4px;background:var(--sn-soft);font-size:13.5px;line-height:1.45;color:var(--sn-ink)}
.so-run .sn-li{gap:11px;border-top:0;padding:8px 17px}
.so-mk{flex:0 0 18px;display:block;width:18px;height:18px;border-radius:50%;background:#e7e8e3}
.so-mk b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--sn-okbg)}
.sn-li .so-mk svg{width:10px;height:10px;color:var(--sn-oktx)}
.so-run .sn-li.bad .so-mk b{background:#fee2e2}
.so-run .sn-li.bad .so-mk svg{color:#b91c1c}
.so-run .sn-li span{white-space:normal;line-height:1.35}
.so-ans{margin:11px 17px 17px;padding:12px 15px;border:1px solid #cfe9d6;border-radius:11px;background:#f1faf3;font-size:13.5px;line-height:1.45;color:var(--sn-ink)}
.so-ans small{display:block;margin-bottom:4px;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sn-oktx)}
/* итог «найдена ошибка» - спокойный: без красной заливки (владелец: «красное окно не нравится»), красный остаётся только у крестика шага */
.so-ans.bad{border-color:var(--sn-line);background:#fafaf7}
.so-ans.bad small{color:var(--sn-mut)}
.so-ans{position:relative}
.so-anst{display:block}
.so-wait{display:none;position:absolute;left:15px;bottom:18px;gap:4px}
.so-wait i{display:block;width:5px;height:5px;border-radius:50%;background:#9aa39c}
.so-q{margin:8px 17px 10px;padding:13px 15px;border:1px solid var(--sn-line);border-radius:11px;background:#fff}
.so-q>b{display:block;margin-bottom:11px;font-weight:600;line-height:1.35}
.so-opts{position:relative;display:flex;flex-wrap:wrap;gap:9px}
.so-opts .sn-btn{font-style:normal;padding:8px 13px;font-size:12.5px;background:#fff}
.so-opts .pick{background:#0b0b0d;border-color:#0b0b0d;color:#fff}
.so-opts .sn-cur{left:38px;top:18px}
.so-ask .so-then{padding-bottom:16px}

/* ---------- цикл агента ---------- */
.so-loop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;width:100%;max-width:560px}
.so-loop .sn-ph{--w:176px}
.so-loop-c{display:grid;gap:14px;min-width:0}
.so-loop .sn-card{font-size:13.5px}
.so-loop .sn-card-h{padding:13px 16px;font-size:14px}
.so-loop .sn-card-h small{font-size:12px}
.so-loop .sn-li{padding:11px 16px}
.so-loop .so-act{gap:11px}
.so-kind{flex:0 0 auto;margin-left:auto;font-size:12px;color:var(--sn-mut)}
@media (max-width:520px){.so-loop{grid-template-columns:minmax(0,1fr);justify-items:center}.so-loop .sn-ph{--w:150px}.so-loop-c{width:100%}}

/* ---------- карточка - пунктир - телефон ---------- */
.so-link{max-width:580px;grid-template-columns:minmax(0,1fr) 40px auto}
.so-link .so-wire{--ww:40px}
.so-link .sn-ph{--w:158px}
.so-foot{background:#fafaf7;border-radius:0 0 12px 12px;color:var(--sn-txt)}
.so-foot span{white-space:normal!important;line-height:1.3}
.so-listc .sn-li>svg{width:16px;height:16px}
/* карточка задачи рядом с телефоном не помещается в узкой панели двухколоночного ряда - ставим друг под другом */
@media (min-width:901px) and (max-width:1060px){.so-wired{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px}.so-wired .so-wire{--ww:30px;width:30px;margin:8px 0;transform:rotate(90deg)}.so-wired .sn-ph{--w:150px}.so-wired>.sn-card{width:100%}.so-loop{grid-template-columns:minmax(0,1fr);justify-items:center}.so-loop .sn-ph{--w:150px}.so-loop-c{width:100%}}
@media (max-width:620px){.so-link .so-wire{--ww:30px;width:30px;margin:8px 0;transform:rotate(90deg)}.so-link{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px}.so-link .sn-hop{width:1.5px;height:26px;margin:0;background:linear-gradient(180deg,#16a34a 50%,transparent 50%) 0 0/1.5px 8px repeat-y}.so-link .sn-hop::after{right:auto;left:-4px;top:auto;bottom:-3px;border:4.5px solid transparent;border-bottom:0;border-top:7px solid var(--sn-ok)}.so-link .sn-ph{--w:150px}.so-link>.sn-card{width:100%}}

/* ---------- повтор шагов ---------- */
.so-rep{width:100%;max-width:520px}
.so-rep .sn-card-h{padding:14px 17px;font-size:14px}
.so-rep .sn-card-h small{font-size:12px}
.so-frames{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px;padding:16px 17px 4px}
.so-frames figure{display:grid;gap:8px;justify-items:center;margin:0;min-width:0}
/* кадр - тот же экран приложения, что на телефоне, в ширину кадра: --w берётся от figure (container query) */
.so-frames figure{container-type:inline-size}
.so-fr{--w:100cqw;position:relative;display:block;width:100%;aspect-ratio:9/15;border-radius:calc(var(--w)*.1);background:#f4f4f0;box-shadow:0 0 0 1px var(--sn-line);overflow:hidden}
.so-fr .so-app{inset:calc(var(--w)*.1) calc(var(--w)*.075) calc(var(--w)*.08)}
.so-fr .so-rip{opacity:.9}
.so-frames figcaption{font-size:11.5px;line-height:1.25;color:var(--sn-mut);text-align:center}
.so-bar{position:relative;height:4px;margin:16px 24px 26px;border-radius:9px;background:var(--sn-soft)}
.so-bar>i{position:absolute;inset:0;border-radius:9px;background:var(--sn-ok);transform-origin:0 50%}
.so-bar>b{position:absolute;inset:0;transform:translateX(100%)}
.so-bar>b::before{content:"";box-sizing:border-box;position:absolute;left:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;border:2px solid var(--sn-ok)}
.so-bar .sn-cur{opacity:1;left:-1px;top:2px}
@media (max-width:480px){.so-frames{gap:8px;padding:14px 12px 4px}.so-frames figcaption{font-size:10.5px}}

/* ---------- расписание, сброс, ADB ---------- */
.so-sched{width:100%;max-width:400px}
.so-time{flex:0 0 auto;min-width:60px;font:700 21px/1 var(--sans);letter-spacing:-.02em;color:var(--sn-ink)}
.so-sched .is-off .so-time{color:var(--sn-mut)}
.so-reset{width:100%;max-width:380px}
.so-val{flex:0 0 auto;margin-left:auto;font-weight:600;justify-items:end}
.so-meter{flex:1 1 auto;display:block;max-width:130px;height:6px;margin-left:auto;border-radius:9px;background:var(--sn-soft);overflow:hidden}
.so-meter i{display:block;width:4%;height:100%;border-radius:9px;background:var(--sn-ok)}
.so-meter+.so-val{margin-left:0;min-width:48px}
.so-resetf{position:relative;gap:13px}
.so-resetf .sn-btn{padding:8px 13px;font-size:12.5px}
.so-resetf small{color:var(--sn-mut)}
.so-resetf .sn-cur{left:42px;top:26px}
.so-adb{width:100%;max-width:380px}
.so-adb .sn-li>svg{width:16px;height:16px;color:var(--sn-ink)}

/* ---------- одна задача на трёх телефонах ---------- */
.so-par{display:grid;gap:22px;justify-items:center;width:100%}
.so-chip{display:flex;align-items:center;gap:10px;max-width:100%;padding:12px 17px;font-size:13.5px;font-weight:500}
.so-chip svg{flex:0 0 auto;width:16px;height:16px;color:var(--sn-ok)}
.so-par-row{display:flex;align-items:flex-start;gap:clamp(12px,2.2vw,24px)}
.so-par-row figure{margin:0}
.so-prog{display:block;height:4px;margin-top:12px;border-radius:9px;background:#fff;overflow:hidden}
.so-prog i{display:block;height:100%;border-radius:9px;background:var(--sn-ok);transform-origin:0 50%}
.so-par-row figure.bad .so-prog i{background:#dc2626}
.so-par-row figcaption{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:9px;font-size:11.5px;color:var(--sn-txt);white-space:nowrap}
.so-res{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--sn-okbg)}
.so-res svg{width:10px;height:10px;color:var(--sn-oktx)}
.so-par-row figure.bad .so-res{background:#fee2e2}
.so-par-row figure.bad .so-res svg{color:#b91c1c}
@media (max-width:1240px) and (min-width:901px){.so-ph.mid{--w:108px}.so-par-row{gap:14px}}
@media (max-width:380px){.so-par .so-ph.mid{--w:76px}}
@media (max-width:560px){.so-ph.mid{--w:88px}.so-par-row{gap:9px}.so-par-row figcaption{font-size:10px;gap:4px}.so-res{width:14px;height:14px}}

/* ---------- вторая тройка (Commerce, Gaming, IT & Security): lib/sol2.php ---------- */
/* три телефона стран: флаг в кружке на экране, подписей нет */
.so-trio{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2.2vw,24px)}
.so-trio figure{position:relative;margin:0}
.so-trio figure:nth-child(2){margin-top:22px}
.so-flagb{position:absolute;right:calc(128px*.13);bottom:calc(128px*.13);display:block;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 2px 6px rgba(16,16,20,.22);overflow:hidden}
.so-flagb img{display:block;width:100%;height:100%;max-width:none;border:0;border-radius:0;object-fit:cover}
/* снимки с нескольких телефонов */
.so-shots{width:100%;max-width:440px}
.so-shotgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 17px 18px}
.so-shotgrid figure{display:grid;gap:9px;justify-items:center;margin:0;min-width:0;container-type:inline-size}
.so-shotgrid figcaption{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--sn-txt);white-space:nowrap}
/* телефон - пунктир - ответ данными */
.so-data{grid-template-columns:auto 40px minmax(0,1fr)}
.so-data .so-listc .sn-li{justify-content:space-between}
.so-data .so-val{font-size:14px}
/* ключи и сессии */
.so-keys,.so-sess{width:100%;max-width:410px}
.so-keys .sn-li small,.so-sess .sn-li small{white-space:normal;line-height:1.35}
.so-rev{position:relative}
.so-rev .sn-btn{margin-left:auto;padding:7px 12px;font-size:12px}
.so-rev .sn-cur{left:auto;right:34px;top:30px}
.so-when{flex:0 0 auto;margin-left:auto;font-size:12px;color:var(--sn-mut);white-space:nowrap}
.so-sess .sn-li.bad .so-mk b{background:#fee2e2}
.so-sess .sn-li.bad .so-mk svg{color:#b91c1c}
/* сохранённые снимки: миниатюра экрана, название, время, флаг страны */
.so-evi{width:100%;max-width:400px}
.so-thumb{flex:0 0 40px;display:block;container-type:inline-size}
.so-evi .sn-li{gap:13px}
.so-evi .sn-flag{margin-left:auto;width:22px;height:22px}
@media (max-width:1240px) and (min-width:901px){.so-flagb{right:calc(108px*.13);bottom:calc(108px*.13);width:23px;height:23px}}
@media (max-width:560px){.so-flagb{right:calc(88px*.13);bottom:calc(88px*.13);width:20px;height:20px}.so-trio{gap:9px}.so-shotgrid{gap:9px;padding:14px 12px 16px}.so-shotgrid figcaption{font-size:10px;gap:4px}}
@media (max-width:620px){.so-data{grid-template-columns:minmax(0,1fr)}}
@media (max-width:380px){.so-trio .so-ph.mid{--w:76px}.so-flagb{right:10px;bottom:10px}}

/* ---------- движение ---------- */
/* один экран (цикл 6 с): место найдено → тап */
@keyframes so-hl1{0%,8%{box-shadow:0 1px 2px rgba(16,16,20,.07)}16%,88%{box-shadow:0 0 0 1.5px #16a34a}100%{box-shadow:0 1px 2px rgba(16,16,20,.07)}}
@keyframes so-box{0%,8%{opacity:0;transform:scale(1.1)}16%,88%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes so-rip{0%,46%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}62%,100%{opacity:0;transform:scale(2.4)}}
@keyframes so-ck{0%,48%{transform:scale(0)}54%{transform:scale(1.25)}58%,100%{transform:none}}
.sn-anim .sn-in .so-one .so-tot.hl{animation:so-hl1 6s 1s infinite both}
.sn-anim .sn-in .so-one .so-cta.hl .so-box{animation:so-box 6s 1s infinite both}
.sn-anim .sn-in .so-one .so-rip{animation:so-rip 6s 1s infinite both}
.sn-anim .sn-in .so-act .so-mk b{animation:so-ck 6s 1s infinite both}
/* два экрана (цикл 8 с; правка владельца: «долго»): приложение открылось → тап → второй экран → найденное место.
   Карточка задачи рядом (so-sync) и провод so-wire идут по тем же отметкам времени:
   2-7 % точка к телефону → 8 % экран 1, шаг 1; 19-24 % точка → 25 % тап → 33 % экран 2, шаг 2;
   38 % тап/рамка на втором экране → 41-47 % точка обратно → 49 % шаг 3 → 54 % итог; 96-100 % сброс. */
/* первый экран виден с первой же секунды (правка владельца: «телефон появляется с задержкой»): пустого телефона в начале цикла нет */
@keyframes so-q1{0%,29%{opacity:1;transform:none}33%,95%{opacity:0;transform:translateX(-16%)}95.1%{opacity:0;transform:none}100%{opacity:1;transform:none}}
@keyframes so-q2{0%,29%{opacity:0;transform:translateX(16%)}33%,95%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes so-qrip{0%,22%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}31%,100%{opacity:0;transform:scale(2.6)}}
@keyframes so-qrip2{0%,35%{opacity:0;transform:scale(.4)}38%{opacity:1;transform:scale(1)}44%,100%{opacity:0;transform:scale(2.6)}}
@keyframes so-qhl{0%,36%{box-shadow:0 1px 2px rgba(16,16,20,.07)}40%,95%{box-shadow:0 0 0 1.5px #16a34a}100%{box-shadow:0 1px 2px rgba(16,16,20,.07)}}
@keyframes so-qbox{0%,39%{opacity:0;transform:scale(1.1)}43%,95%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes so-s1{0%,7%{transform:scale(0)}9%{transform:scale(1.2)}11%,96%{transform:none}100%{transform:scale(0)}}
@keyframes so-s2{0%,33%{transform:scale(0)}35%{transform:scale(1.2)}37%,96%{transform:none}100%{transform:scale(0)}}
@keyframes so-s3{0%,48%{transform:scale(0)}50%{transform:scale(1.2)}52%,96%{transform:none}100%{transform:scale(0)}}
@keyframes so-s4{0%,53%{opacity:0;transform:translateY(4px)}57%,96%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes so-w{0%,52%{opacity:1}55%,97%{opacity:0}100%{opacity:1}}
@keyframes so-blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes so-wire{0%{transform:none;opacity:0}2%{transform:none;opacity:1}7%{transform:translateX(var(--ww));opacity:1}8%{transform:translateX(var(--ww));opacity:0}18%{transform:none;opacity:0}19%{transform:none;opacity:1}24%{transform:translateX(var(--ww));opacity:1}25%{transform:translateX(var(--ww));opacity:0}40%{transform:translateX(var(--ww));opacity:0}41%{transform:translateX(var(--ww));opacity:1}47%{transform:none;opacity:1}48%,100%{transform:none;opacity:0}}
.sn-anim .sn-in .so-seq .so-app:nth-of-type(1){animation:so-q1 8s .4s infinite both}
.sn-anim .sn-in .so-seq .so-app:nth-of-type(2){animation:so-q2 8s .4s infinite both}
.sn-anim .sn-in .so-seq .so-app:nth-of-type(1) .so-rip{animation:so-qrip 8s .4s infinite both}
.sn-anim .sn-in .so-seq .so-app:nth-of-type(2) .so-rip{animation:so-qrip2 8s .4s infinite both}
.sn-anim .sn-in .so-seq .so-app:nth-of-type(2) .so-tot.hl,.sn-anim .sn-in .so-seq .so-app:nth-of-type(2) .so-mb.hl{animation:so-qhl 8s .4s infinite both}
@keyframes so-qld{0%{transform:scaleX(0)}26%,100%{transform:none}}
.so-ld i{transform-origin:0 50%}
.sn-anim .sn-in .so-seq .so-app:nth-of-type(1) .so-ld i{width:100%;animation:so-qld 8s .4s infinite both}
.sn-anim .sn-in .so-seq .so-app:nth-of-type(2) .so-box{animation:so-qbox 8s .4s infinite both}
.sn-anim .sn-in .so-sync .k1 .so-mk b{animation:so-s1 8s .4s infinite both}
.sn-anim .sn-in .so-sync .k2 .so-mk b{animation:so-s2 8s .4s infinite both}
.sn-anim .sn-in .so-sync .k3 .so-mk b{animation:so-s3 8s .4s infinite both}
.sn-anim .sn-in .so-sync .so-anst{animation:so-s4 8s .4s infinite both}
.sn-anim .sn-in .so-sync .so-wait{display:flex;animation:so-w 8s .4s infinite both}
.sn-anim .sn-in .so-sync .so-wait i{animation:so-blink 1s infinite}
.sn-anim .sn-in .so-sync .so-wait i:nth-child(2){animation-delay:.18s}
.sn-anim .sn-in .so-sync .so-wait i:nth-child(3){animation-delay:.36s}
.sn-anim .sn-in .so-wire b{animation:so-wire 8s .4s infinite both}
/* пароль: точки появляются по одной */
@keyframes so-dot{0%,10%{transform:scale(0)}16%,90%{transform:none}100%{transform:scale(0)}}
.sn-anim .sn-in .so-pw i{animation:so-dot 6s 1s infinite both}
.sn-anim .sn-in .so-pw i:nth-child(2){animation-delay:1.25s}
.sn-anim .sn-in .so-pw i:nth-child(3){animation-delay:1.5s}
.sn-anim .sn-in .so-pw i:nth-child(4){animation-delay:1.75s}
.sn-anim .sn-in .so-pw i:nth-child(5){animation-delay:2s}
.sn-anim .sn-in .so-pw i:nth-child(6){animation-delay:2.25s}
.sn-anim .sn-in .so-link .sn-hop{animation:sn-flow .7s linear infinite}
/* повтор: бегунок и подсветка кадра */
@keyframes so-play{from{transform:none}to{transform:translateX(100%)}}
@keyframes so-fill{from{transform:scaleX(0)}to{transform:none}}
@keyframes so-fron{0%,24%{box-shadow:0 0 0 2px var(--sn-ok)}25%,100%{box-shadow:0 0 0 1px var(--sn-line)}}
.sn-anim .sn-in .so-bar>i{animation:so-fill 8s linear 1s infinite both}
.sn-anim .sn-in .so-bar>b{animation:so-play 8s linear 1s infinite both}
.sn-anim .sn-in .so-fr{animation:so-fron 8s calc(var(--k)*2s + 1s) infinite}
@keyframes so-fa2{0%,23%{opacity:.42}26%,100%{opacity:1}}
@keyframes so-fa3{0%,48%{opacity:.42}51%,100%{opacity:1}}
@keyframes so-fa4{0%,73%{opacity:.42}76%,100%{opacity:1}}
@keyframes so-frrip{0%{opacity:0;transform:scale(.4)}4%{opacity:1;transform:scale(1.9)}9%,100%{opacity:.9;transform:none}}
.sn-anim .sn-in .so-frames figure:nth-child(2) .so-app{animation:so-fa2 8s linear 1s infinite both}
.sn-anim .sn-in .so-frames figure:nth-child(3) .so-app{animation:so-fa3 8s linear 1s infinite both}
.sn-anim .sn-in .so-frames figure:nth-child(4) .so-app{animation:so-fa4 8s linear 1s infinite both}
.sn-anim .sn-in .so-fr .so-rip{animation:so-frrip 8s calc(var(--k)*2s + 1s) infinite}   /* без fill: до своей очереди кадр не подсвечен */
/* три телефона (цикл 7 с, каждый следующий на .45 с позже): полоска идёт, тап по Pay, экран «Paid» и галочка;
   на телефоне с ошибкой - два тапа, экран не меняется, красная рамка и крестик */
@keyframes so-prog{0%{transform:scaleX(0)}46%,100%{transform:none}}
@keyframes so-pop{0%,46%{transform:scale(0)}50%{transform:scale(1.2)}53%,96%{transform:none}100%{transform:scale(0)}}
@keyframes so-p1{0%,34%{opacity:1;transform:none}38%,95%{opacity:0;transform:translateX(-16%)}100%{opacity:1;transform:none}}
@keyframes so-p2{0%,34%{opacity:0;transform:translateX(16%)}38%,95%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes so-prip{0%,23%{opacity:0;transform:scale(.4)}26%{opacity:1;transform:scale(1)}32%,100%{opacity:0;transform:scale(2.6)}}
@keyframes so-prip2{0%,23%{opacity:0;transform:scale(.4)}26%{opacity:1;transform:scale(1)}31%{opacity:0;transform:scale(2.6)}32%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1)}41%,100%{opacity:0;transform:scale(2.6)}}
@keyframes so-errb{0%,41%{opacity:0;transform:scale(1.1)}45%,96%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.sn-anim .sn-in .so-prog i{animation:so-prog 7s calc(var(--k)*.45s + 1s) infinite both}
.sn-anim .sn-in .so-res{animation:so-pop 7s calc(var(--k)*.45s + 1s) infinite both}
.sn-anim .sn-in .so-par figure:not(.bad) .so-app:nth-of-type(1){animation:so-p1 7s calc(var(--k)*.45s + 1s) infinite both}
.sn-anim .sn-in .so-par figure:not(.bad) .so-app:nth-of-type(2){animation:so-p2 7s calc(var(--k)*.45s + 1s) infinite both}
.sn-anim .sn-in .so-par figure:not(.bad) .so-app:nth-of-type(1) .so-rip{animation:so-prip 7s calc(var(--k)*.45s + 1s) infinite both}
.sn-anim .sn-in .so-par figure.bad .so-app:nth-of-type(1) .so-rip{animation:so-prip2 7s calc(var(--k)*.45s + 1s) infinite both}
.sn-anim .sn-in .so-par figure.bad .so-cta.err .so-box{animation:so-errb 7s calc(var(--k)*.45s + 1s) infinite both}
@keyframes so-pld{0%{transform:scaleX(0)}30%,100%{transform:none}}
@keyframes so-plderr{0%{transform:scaleX(0);background:#16a34a}26%,40%{transform:none;background:#16a34a}45%,96%{transform:none;background:#dc2626}100%{transform:scaleX(0);background:#16a34a}}
.sn-anim .sn-in .so-par figure:not(.bad) .so-app:nth-of-type(1) .so-ld i{width:100%;animation:so-pld 7s calc(var(--k)*.45s + 1s) infinite both}
.sn-anim .sn-in .so-par figure.bad .so-ld i{animation:so-plderr 7s calc(var(--k)*.45s + 1s) infinite both}
/* три телефона стран: найденное место подсвечивается по очереди */
@keyframes so-trhl{0%,6%{box-shadow:0 1px 2px rgba(16,16,20,.07)}12%,30%{box-shadow:0 0 0 1.5px #16a34a}38%,100%{box-shadow:0 1px 2px rgba(16,16,20,.07)}}
.sn-anim .sn-in .so-trio .so-tot.hl,.sn-anim .sn-in .so-trio .so-mb.hl{animation:so-trhl 6s calc(var(--k)*1.6s + 1s) infinite both}
/* ключ отзывают кнопкой: тот же указатель и те же отметки времени, что у сброса */
.sn-anim .sn-in .so-rev .sn-cur{transform-origin:0 0;animation:so-rs-cur 9s 1s infinite both}
/* сброс и вопрос человеку: указатель жмёт кнопку */
@keyframes so-meter{0%,36%{width:62%}41%,95%{width:4%}100%{width:62%}}
@keyframes so-rs-cur{0%{opacity:0;transform:translate(46px,34px)}10%{opacity:1}26%,33%{opacity:1;transform:none}35%{opacity:1;transform:scale(.84)}38%,48%{opacity:1;transform:none}60%,100%{opacity:0;transform:translate(30px,26px)}}
@keyframes so-rs-btn{0%,33%,40%,100%{background:#fff;border-color:#e4e4df;color:#0b0b0d}35%,38%{background:#0b0b0d;border-color:#0b0b0d;color:#fff}}
@keyframes so-pick{0%,36%,100%{background:#fff;border-color:#e4e4df;color:#0b0b0d}39%,95%{background:#0b0b0d;border-color:#0b0b0d;color:#fff}}
@keyframes so-then{0%,42%,100%{opacity:0}48%,95%{opacity:1}}
.sn-anim .sn-in .so-meter i{animation:so-meter 9s 1s infinite both}
.sn-anim .sn-in .so-resetf .sn-cur{transform-origin:0 0;animation:so-rs-cur 9s 1s infinite both}
.sn-anim .sn-in .so-resetf .sn-btn{animation:so-rs-btn 9s 1s infinite both}
.sn-anim .sn-in .so-opts .sn-cur{transform-origin:0 0;animation:so-rs-cur 9s 1s infinite both}
.sn-anim .sn-in .so-opts .pick{animation:so-pick 9s 1s infinite both}
.sn-anim .sn-in .so-ask .so-then{animation:so-then 9s 1s infinite both}
.sn-anim .sn-fig:not(.sn-in) .so-ask .so-then{opacity:0}
/* 12.11: товары с фото и названием, баннеры - фото (so_scr: SO_GOODS, SO_PHOTOS; файлы assets/shop/*.webp) */
.so-good>i.so-pic{flex:0 0 auto;display:block;width:calc(var(--w)*.15);height:calc(var(--w)*.15);border-radius:calc(var(--w)*.045);background:#e9ece8 center/cover no-repeat;overflow:hidden}
.so-good>i.so-pic svg{display:block;width:100%;height:100%}
.so-good>span{gap:calc(var(--w)*.012)}
.so-good b{height:auto;width:auto;background:none;border-radius:0;font:600 calc(var(--w)*.052)/1.15 var(--sans);letter-spacing:-.01em;color:#0b0b0d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-good s{height:auto;width:auto;background:none;border-radius:0;text-decoration:none;font:500 calc(var(--w)*.04)/1.15 var(--sans);color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-good.on>i.so-pic{position:relative}
.so-good.on>i.so-pic::before{content:"";position:absolute;inset:0;background:rgba(22,163,74,.55)}
.so-good.on>i.so-pic::after{content:"";position:absolute;left:50%;top:45%;width:24%;height:44%;border:solid #fff;border-width:0 calc(var(--w)*.016) calc(var(--w)*.016) 0;transform:translate(-50%,-50%) rotate(45deg)}
.so-bnp{position:relative;background:#e9ece8 center/cover no-repeat;overflow:hidden}
.so-bnp em{position:absolute;left:calc(var(--w)*.04);top:calc(var(--w)*.04);padding:calc(var(--w)*.018) calc(var(--w)*.04);border-radius:99px;background:#16a34a;color:#fff;font:700 calc(var(--w)*.06)/1 var(--sans);font-style:normal;letter-spacing:-.01em}
/* 12.11: строка-история корзины темы (доставка, дата, сеанс) под заголовком экрана */
.so-note2{display:flex;align-items:center;gap:calc(var(--w)*.03);margin-top:calc(var(--w)*-.015);padding:calc(var(--w)*.03) calc(var(--w)*.045);border-radius:calc(var(--w)*.05);background:var(--sn-okbg,#e8f6ec);font:600 calc(var(--w)*.045)/1.1 var(--sans);color:var(--sn-oktx,#15803d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-note2 i{flex:0 0 auto;width:calc(var(--w)*.05);height:calc(var(--w)*.05);border-radius:50%;border:calc(var(--w)*.011) solid currentColor;position:relative}
.so-note2 i::after{content:"";position:absolute;left:45%;top:18%;width:calc(var(--w)*.011);height:40%;background:currentColor;transform-origin:bottom;box-shadow:calc(var(--w)*.01) calc(var(--w)*.012) 0 0 transparent}
/* 12.11 (владелец: «в повторе ничего не происходит»): добавленный товар - фото остаётся, в углу зелёный значок с галочкой;
   в кадре повтора (.so-fr) в свою очередь (--k: кадр, шаг 2 с из цикла 8 с) товар добавляется на глазах - тап, рамка, значок
   выпрыгивает (.so-good.new); в кадре корзины (.so-cartv) строки въезжают по одной, итог подсвечивается последним */
.so-good.on>i.so-pic{overflow:visible;position:relative}
.so-good.on>i.so-pic::before{display:none}
.so-good.on>i.so-pic::after{left:auto;top:auto;right:-14%;bottom:-14%;width:52%;height:52%;border:0;border-radius:50%;transform:none;box-shadow:0 0 0 calc(var(--w)*.012) #fff;background:#16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 8.4l2.4 2.4 5.2-5.4'/%3E%3C/svg%3E") center/66% no-repeat}
@keyframes so-addring{0%,4%{box-shadow:0 1px 2px rgba(16,16,20,.07)}8%,92%{box-shadow:0 0 0 1.5px var(--sn-ok)}100%{box-shadow:0 1px 2px rgba(16,16,20,.07)}}
@keyframes so-addbadge{0%,5%{transform:scale(0)}9%{transform:scale(1.3)}12%,92%{transform:none}100%{transform:scale(0)}}
@keyframes so-rowin{0%,1%{opacity:0;transform:translateY(8px)}6%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes so-totin{0%,12%{opacity:0;box-shadow:0 1px 2px rgba(16,16,20,.07)}16%{opacity:1;box-shadow:0 1px 2px rgba(16,16,20,.07)}20%,92%{opacity:1;box-shadow:0 0 0 1.5px var(--sn-ok)}100%{opacity:0}}
.sn-anim .sn-in .so-fr .so-good.new{animation:so-addring 8s calc(var(--k)*2s + 1s) infinite both}
.sn-anim .sn-in .so-fr .so-good.new>i.so-pic::after{animation:so-addbadge 8s calc(var(--k)*2s + 1s) infinite both}
.sn-anim .sn-in .so-fr .so-cartv>.so-note2,.sn-anim .sn-in .so-fr .so-cartv>.so-good{animation:so-rowin 8s calc(var(--k)*2s + 1s) infinite both}
.sn-anim .sn-in .so-fr .so-cartv>.so-good:nth-of-type(2){animation-delay:calc(var(--k)*2s + 1.15s)}
.sn-anim .sn-in .so-fr .so-cartv>.so-good:nth-of-type(3){animation-delay:calc(var(--k)*2s + 1.3s)}
.sn-anim .sn-in .so-fr .so-cartv>.so-tot.hl{animation:so-totin 8s calc(var(--k)*2s + 1s) infinite both}
@media (prefers-reduced-motion:reduce){.sn-anim .sn-in .so-fr .so-good.new,.sn-anim .sn-in .so-fr .so-good.new>i.so-pic::after,.sn-anim .sn-in .so-fr .so-cartv>*{animation:none!important}}