/* Страницы под соцсети, вторая версия (11.11.2026; владелец показал browserstack.com/automate: «более по-деловому, меньше
   текста, инфографика»). Светлая страница (body.pg-light), короткий герой со схемой справа, полоса цифр, ряды «заголовок +
   три пункта + схема» зигзагом, сравнение двумя карточками, три шага, плитки других сетей. Схемы собраны из белых карточек
   интерфейса на светлой панели (sn-fig), куски рисует lib/social.php. На экранах телефонов - стоковые фото
   assets/social/*.webp (список и лицензия - SN_PHOTOS в lib/social.php), без чужих логотипов и интерфейсов.
   Движение (конец файла): всё под html.sn-anim и .sn-in у схемы - их ставит sn_boot(); без них схема стоит картинкой. Классы только с префиксом sn-: короткие имена (.viz .row .tag .who .scr) заняты site.css. */

:root{--sn-ink:#0b0b0d;--sn-txt:#3f3f46;--sn-mut:#74747f;--sn-line:#e4e4df;--sn-soft:#f0f0ec;--sn-ok:#16a34a;--sn-okbg:#dcfce7;--sn-oktx:#15803d}

/* ---------- телефон (тёмный корпус, сцена на экране) ---------- */
.sn-ph{--w:170px;position:relative;flex:0 0 auto;width:var(--w);aspect-ratio:9/19;padding:calc(var(--w)*.035);border-radius:calc(var(--w)*.15);background:#0b0b0d;box-shadow:0 26px 50px -24px rgba(16,16,20,.55)}
.sn-scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--w)*.118);background:#111}
.sn-feed{position:absolute;inset:0;display:flex;flex-direction:column}
.sn-feed img{flex:0 0 100%;display:block;width:100%;height:100%;min-height:0;max-width:none;object-fit:cover}
.sn-scr::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 56%,rgba(0,0,0,.6) 100%);pointer-events:none}
.sn-sb{position:absolute;z-index:2;top:calc(var(--w)*.045);left:calc(var(--w)*.085);right:calc(var(--w)*.085);display:flex;align-items:center;justify-content:space-between;font:600 calc(var(--w)*.06)/1 var(--sans);letter-spacing:-.01em;color:#fff}
.sn-sb i{display:block;width:calc(var(--w)*.11);height:calc(var(--w)*.045);border-radius:99px;background:rgba(255,255,255,.85)}
.sn-ui{position:absolute;z-index:2;inset:auto 0 0 0;padding:0 calc(var(--w)*.07) calc(var(--w)*.06);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--w)*.05);align-items:end}
.sn-ui-cap{display:grid;gap:calc(var(--w)*.03);padding-bottom:calc(var(--w)*.03)}
.sn-ui-cap b{display:block;height:calc(var(--w)*.04);width:46%;border-radius:99px;background:rgba(255,255,255,.92)}
.sn-ui-cap s{display:block;height:calc(var(--w)*.028);width:88%;border-radius:99px;background:rgba(255,255,255,.5)}
.sn-ui-cap s+s{width:62%}
.sn-ui-side{display:grid;gap:calc(var(--w)*.05);padding-bottom:calc(var(--w)*.03)}
.sn-ui-side i{display:block;width:calc(var(--w)*.12);height:calc(var(--w)*.12);border-radius:50%;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.3)}
.sn-ui-side i.f{overflow:hidden;background:#fff;border:1.5px solid #fff}
.sn-ui-side i.f img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.sn-ui-tabs{grid-column:1/-1;display:flex;justify-content:space-between;padding:calc(var(--w)*.04) calc(var(--w)*.04) 0;border-top:1px solid rgba(255,255,255,.16)}
.sn-ui-tabs i{display:block;width:calc(var(--w)*.075);height:calc(var(--w)*.075);border-radius:30%;background:rgba(255,255,255,.4)}
.sn-ui-tabs i.on{background:#fff}

/* ---------- детали схем ---------- */
.sn-flag{display:inline-block;flex:0 0 auto;width:18px;height:18px;border-radius:50%;object-fit:cover;border:1px solid rgba(16,16,20,.12)}
.sn-av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--c,#3b82f6);border:2px solid #fff;font:600 12px/1 var(--sans,inherit);color:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(16,16,20,.18)}
.sn-av img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.sn-av+.sn-av{margin-left:-10px}
.sn-fig{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:320px;padding:clamp(18px,2.6vw,34px);border-radius:22px;background:linear-gradient(135deg,#e9f3ec 0%,#eef0f6 100%);overflow:hidden}
@media (max-width:560px){.sn-fig{min-height:0;padding:28px 16px}}
.sn-card{min-width:0;border:1px solid var(--sn-line);border-radius:13px;background:#fff;box-shadow:0 16px 36px -22px rgba(16,16,20,.32);font-size:12.5px;line-height:1.3;color:var(--sn-ink)}
.sn-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--sn-line);font-weight:600}
.sn-card-h small{font:500 11px/1 var(--sans);color:var(--sn-mut)}
.sn-li{display:flex;align-items:center;gap:9px;padding:9px 14px;border-top:1px solid var(--sn-soft);min-width:0}
.sn-card-h+.sn-li,.sn-li:first-child{border-top:0}
.sn-li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-li b{display:block;font-weight:500}
.sn-li small{display:block;font-size:11px;color:var(--sn-mut)}
.sn-li code{font:600 13px/1.25 var(--sans);letter-spacing:-.005em;color:var(--sn-ink)}
.sn-li svg{flex:0 0 auto;width:15px;height:15px;color:var(--sn-ok)}
.sn-pill{flex:0 0 auto;font-style:normal;margin-left:auto;padding:4px 9px;border-radius:99px;background:var(--sn-okbg);font-size:10.5px;font-weight:600;color:var(--sn-oktx);white-space:nowrap}
.sn-pill.off{background:var(--sn-soft);color:var(--sn-mut)}
.sn-pill.red{background:#fee2e2;color:#b91c1c}
.sn-dot{flex:0 0 auto;display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sn-ok)}
.sn-swap{display:inline-grid}
.sn-li small.sn-swap{display:grid}
.sn-swap>*{grid-area:1/1}
.sn-swap>.a{opacity:0}
.sn-pills{flex:0 0 auto;margin-left:auto;justify-items:end;overflow:visible!important}
.sn-pills .sn-pill{margin-left:0}
.sn-teamfig .sn-pill{padding:0;border-radius:0;background:none;font-size:12px;font-weight:500;color:var(--sn-ink)}
.sn-teamfig .sn-pill.off{color:var(--sn-mut)}
.sn-teamfig .sn-pill.red{color:#b91c1c}
.sn-cur,.sn-li .sn-cur{position:absolute;z-index:4;width:18px;height:20px;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))}
.sn-dot.off{background:#c4c4bd}
.sn-dot.wait{background:#f59e0b}
.sn-btn{flex:0 0 auto;padding:6px 10px;border:1px solid var(--sn-line);border-radius:8px;font-size:11px;line-height:1;font-weight:600;color:var(--sn-ink);white-space:nowrap}
.sn-th,.sn-li .sn-th{position:relative;display:block;flex:0 0 36px;width:36px;height:36px;overflow:visible}
.sn-th img:first-child{display:block;width:100%;height:100%;border-radius:10px;object-fit:cover}
.sn-th .sn-flag{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;border:2px solid #fff}
.sn-tog{position:relative;flex:0 0 auto;display:block;margin-left:auto;width:30px;height:18px;border-radius:99px;background:var(--sn-ok)}
.sn-tog::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transform:translateX(12px)}
.sn-tog.off{background:#d6d6d0}
.sn-tog.off::after{transform:none}
.sn-li.is-off .sn-th img:first-child{filter:grayscale(1) brightness(.78)}
.sn-li.is-off code{color:var(--sn-mut)}
.sn-note{position:absolute;z-index:3;display:flex;align-items:flex-end;gap:6px;font:italic 500 13px/1.25 var(--sans,inherit);color:#33333a;white-space:nowrap}
.sn-note svg{flex:0 0 auto;width:34px;height:26px;color:#33333a}

/* ---------- герой ---------- */
.sn-hero{padding-top:clamp(24px,3.4vw,48px);padding-bottom:clamp(28px,4vw,56px)}
.sn-hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.sn-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.sn-hero h1{font-size:clamp(36px,4.3vw,58px);line-height:1.08;font-weight:700;letter-spacing:-.032em;text-wrap:balance}
.sn-hero .lede{max-width:470px;font-size:17px;line-height:1.6;color:var(--sn-txt)}
.sn-hero .sn-sub{margin:-6px 0 0;font-size:15px;color:var(--sn-mut)}
.sn-hero .hero-cta{margin-top:6px}
.sn-fig-hero{min-height:440px;gap:0;padding-top:54px;padding-bottom:54px}
.sn-fig-hero .sn-accts{flex:1 1 0;max-width:340px}
.sn-fig-hero .sn-accts .sn-li,.sn-fig-hero .sn-accts .sn-card-h{padding-right:48px}
.sn-fig-hero .sn-ph{--w:176px;z-index:2;margin-left:-34px;margin-top:26px}
.sn-fig-hero .sn-teamcard{position:absolute;z-index:3;left:6%;bottom:26px;display:flex;align-items:center;gap:10px;padding:9px 13px}
.sn-fig-hero .sn-teamcard small{display:block;font-size:11px;color:var(--sn-mut)}
.sn-note.n1{top:16px;left:30%}
.sn-note.n2{bottom:20px;right:5%;align-items:flex-start}
.sn-note.n2 svg{transform:scaleY(-1)}
@media (max-width:1080px){.sn-hero-grid{grid-template-columns:minmax(0,1fr)}.sn-fig-hero{max-width:640px;width:100%;margin:0 auto}}
@media (max-width:560px){.sn-fig-hero{min-height:0;padding:44px 12px 62px}.sn-fig-hero .sn-ph{--w:112px;margin-left:-18px}.sn-fig-hero .sn-accts .sn-li,.sn-fig-hero .sn-accts .sn-card-h{padding-left:10px;padding-right:26px;gap:7px}.sn-fig-hero .sn-li .sn-th{flex-basis:30px;width:30px;height:30px}.sn-fig-hero .sn-btn{padding:5px 7px;font-size:10px}.sn-fig-hero .sn-accts .sn-li small{display:none}.sn-fig-hero .sn-teamcard{left:10px;bottom:12px}.sn-note.n1{left:14px;top:12px}.sn-note.n2{display:none}}

/* ---------- полоса цифр ---------- */
.sn-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--sn-line);border-radius:18px;background:#fff;overflow:hidden}
.sn-nums div{display:flex;flex-direction:column;gap:6px;padding:22px clamp(16px,2.4vw,30px);border-left:1px solid var(--sn-line)}
.sn-nums div:first-child{border-left:0}
.sn-nums b{font-size:clamp(26px,2.8vw,36px);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--sn-ink)}
.sn-nums span{font-size:13.5px;color:var(--sn-mut)}
@media (max-width:760px){.sn-nums{grid-template-columns:repeat(2,minmax(0,1fr))}.sn-nums div:nth-child(3){border-left:0}.sn-nums div:nth-child(n+3){border-top:1px solid var(--sn-line)}}

/* ---------- ряды «заголовок + три пункта + схема» ---------- */
.sn-rows{display:grid;gap:clamp(44px,6.5vw,88px);margin-top:clamp(36px,5vw,64px)}
.sn-duo{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,80px);align-items:center}
.sn-duo:nth-child(even) .sn-fig{order:-1}
.sn-duo h3{font-size:clamp(22px,2.3vw,29px);line-height:1.2;font-weight:700;letter-spacing:-.022em}
.sn-ul{display:grid;gap:13px;margin:20px 0 0;padding:0;list-style:none}
.sn-ul li{position:relative;padding-left:28px;font-size:16px;line-height:1.55;color:var(--sn-txt)}
.sn-ul li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--sn-okbg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2315803d' stroke-width='2.2' 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/12px no-repeat}
@media (max-width:900px){.sn-duo{grid-template-columns:minmax(0,1fr)}.sn-duo .sn-fig,.sn-duo:nth-child(even) .sn-fig{order:2}}
.sn-mid{display:flex;justify-content:center;margin-top:clamp(36px,5vw,60px)}

/* схема 1: стопка карточек-телефонов (у каждого аккаунта своя карточка устройства); стопка перелистывается */
.sn-stack{display:grid;width:100%;max-width:340px;padding:34px 40px 0 0}
.sn-stack>.sn-dev{position:relative;grid-area:1/1;padding:15px 16px 13px;background:#fff;transform-origin:50% 0}
.sn-stack>.sn-dev::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#f7f8f6;opacity:0;pointer-events:none}
.sn-stack>.sn-dev:nth-child(n+2)::after{opacity:1}
.sn-stack>.sn-dev:nth-child(1){z-index:3}
.sn-stack>.sn-dev:nth-child(2){z-index:2;transform:translate(20px,-17px) scale(.95)}
.sn-stack>.sn-dev:nth-child(3){z-index:1;transform:translate(40px,-34px) scale(.9)}
.sn-devh{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid var(--sn-soft)}
.sn-devh code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 14px/1.2 var(--sans);letter-spacing:-.005em;color:var(--sn-ink)}
.sn-devh small{margin-left:auto;font-size:11.5px;color:var(--sn-mut);white-space:nowrap}
.sn-dev dl{display:grid;gap:11px;margin:13px 0 0;padding:0}
.sn-dev dl div{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:16px}
.sn-dev dt{margin:0;font-size:12px;font-weight:400;color:var(--sn-mut)}
.sn-dev dd{display:flex;align-items:center;gap:9px;margin:0;font-size:12.5px;font-weight:500;color:var(--sn-ink);white-space:nowrap}
.sn-bar{display:block;width:84px;height:6px;border-radius:99px;background:var(--sn-soft);overflow:hidden}
.sn-bar i{display:block;width:var(--p,50%);height:100%;border-radius:99px;background:var(--sn-ok);transform-origin:0 50%}
.sn-devf{display:flex;align-items:center;gap:7px;margin-top:13px;padding-top:11px;border-top:1px dashed var(--sn-line);font-size:11.5px;color:var(--sn-txt)}
.sn-devf svg{flex:0 0 auto;width:14px;height:14px;color:var(--sn-ok)}
@media (max-width:480px){.sn-stack{padding:28px 30px 0 0}.sn-stack>.sn-dev:nth-child(2){transform:translate(15px,-14px) scale(.95)}.sn-stack>.sn-dev:nth-child(3){transform:translate(30px,-28px) scale(.9)}.sn-bar{width:60px}}
/* схема 2: команда */
.sn-teamfig{width:100%;max-width:420px}
.sn-teamfig .sn-li{padding:11px 14px}
.sn-teamfig .sn-li.gone{position:relative}
.sn-teamfig .sn-li.gone b,.sn-teamfig .sn-li.gone small{opacity:.5}
.sn-teamfig .sn-li.gone .sn-av{opacity:.5;filter:grayscale(1)}
.sn-teamfig .sn-cur{right:26px;top:56%}
.sn-teamfig .sn-lock{background:#fafaf8;border-top:1px dashed var(--sn-line);border-radius:0 0 13px 13px;color:var(--sn-txt)}
.sn-teamfig .sn-lock code{margin-left:auto;letter-spacing:.22em;color:var(--sn-mut)}
@media (max-width:480px){.sn-teamfig .sn-lock code{display:none}}
/* схема 3: страны */
.sn-geo{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2vw,22px)}
.sn-geo figure{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0;min-width:0}
.sn-geo figure:nth-child(2){margin-bottom:22px}
.sn-geo .sn-ph{--w:clamp(104px,11vw,138px)}
.sn-geo .sn-ui-side i{width:calc(var(--w)*.145);height:calc(var(--w)*.145)}
@media (max-width:480px){.sn-geo .sn-ph{--w:88px}}
/* схема 4: один файл из библиотеки -> галерея одного телефона */
.sn-lib{display:grid;grid-template-columns:minmax(0,1fr) 44px auto;align-items:center;width:100%;max-width:470px}
.sn-libc{position:relative}
.sn-libg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.sn-libg span{position:relative;display:block;aspect-ratio:1;border-radius:8px;background:#111}
.sn-libg img{display:block;width:100%;height:100%;border-radius:8px;object-fit:cover}
.sn-libg .sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sn-ok)}
.sn-libg .sel svg{position:absolute;right:4px;top:4px;width:16px;height:16px;padding:3px;border-radius:50%;background:var(--sn-ok);color:#fff}
.sn-libc>.sn-cur{left:54%;top:52%}
.sn-gal>div{--g:calc(var(--w)*.03)}
.sn-hop{position:relative;display:block;height:1.5px;margin:0 7px 0 5px;background:linear-gradient(90deg,#16a34a 50%,transparent 50%) 0 0/8px 1.5px repeat-x}
.sn-hop::after{content:"";position:absolute;right:-3px;top:-4px;border:4.5px solid transparent;border-right:0;border-left:7px solid var(--sn-ok)}
.sn-phg{--w:132px}
.sn-phg .sn-scr::after{display:none}
.sn-gal{position:absolute;inset:0;padding:calc(var(--w)*.17) calc(var(--w)*.06) 0;background:#101012}
.sn-gal b{display:block;margin-bottom:calc(var(--w)*.05);font:600 calc(var(--w)*.078)/1 var(--sans,inherit);color:#fff}
.sn-gal>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
.sn-gal span{display:block;aspect-ratio:1;border-radius:calc(var(--w)*.045);overflow:hidden;background:#222}
.sn-gal img{display:block;width:100%;height:100%;object-fit:cover}
.sn-gal .sn-got{box-shadow:0 0 0 1.5px var(--sn-ok)}
@media (max-width:480px){.sn-lib{grid-template-columns:minmax(0,1fr) 22px auto}.sn-hop{margin:0 5px 0 2px}.sn-phg{--w:100px}.sn-libg{gap:6px;padding:9px}.sn-libc .sn-card-h{padding:9px;gap:6px;font-size:11.5px}.sn-libc .sn-btn{padding:5px 6px;font-size:10px}}

/* ---------- два телефона на точечной сетке сайта (как .pg-dots / .cta3): указатель тянет ленту вверх ---------- */
.sn-wall{position:relative;padding:clamp(30px,5vw,60px) 16px;border-radius:22px;background:linear-gradient(135deg,#e9f3ec 0%,#eef0f6 100%);overflow:hidden}
.sn-wall::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(11,11,13,.3) 1px,transparent 1.3px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 76%);mask-image:radial-gradient(ellipse at center,#000 20%,transparent 76%);pointer-events:none}
.sn-duet{--pw:clamp(128px,19vw,214px);--gp:clamp(18px,5vw,76px);position:relative;display:flex;justify-content:center;align-items:flex-start;gap:var(--gp)}
.sn-duet .sn-ph{--w:var(--pw)}
.sn-duet>div:nth-child(2){margin-top:clamp(20px,4vw,48px)}
.sn-ptr{--xa:calc(50% - var(--gp)/2 - var(--pw)*.42);--xb:calc(50% + var(--gp)/2 + var(--pw)*.58);position:absolute;z-index:5;top:62%;left:var(--xa);transform-origin:0 0;pointer-events:none}
.sn-ptr .sn-cur{position:static;display:block;width:24px;height:26px;opacity:1}

/* ---------- три шага ---------- */
.sn-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.sn-steps li{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--sn-line);border-radius:18px;background:#fff}
.sn-steps .sn-n{display:flex;align-items:center;gap:12px}
.sn-steps .sn-n b{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--sn-ink);font:600 14px/1 var(--sans);color:#fff}
.sn-steps .sn-n i{flex:1;height:0;border-top:1.5px dashed #c9cfca}
.sn-steps .sn-n svg{width:22px;height:22px;color:var(--sn-ok)}
.sn-steps h3{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.sn-steps p{font-size:14.5px;line-height:1.55;color:var(--sn-txt)}
@media (max-width:820px){.sn-steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- плитки других сетей ---------- */
.sn-nets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sn-nets span,.sn-nets a{display:flex;align-items:center;justify-content:center;min-height:74px;padding:14px;border:1px solid var(--sn-line);border-radius:14px;background:#fff;font-size:15.5px;font-weight:600;color:var(--sn-ink);text-align:center;text-decoration:none}
.sn-nets a:hover{border-color:#b9c4bc}
.sn-nets.n3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:860px;margin-inline:auto}
.sn-nets.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:760px){.sn-nets{grid-template-columns:repeat(2,minmax(0,1fr))}.sn-nets.n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sn-nets.n3 span,.sn-nets.n3 a{min-height:60px;padding:8px 4px;font-size:14px}}
@media (max-width:980px) and (min-width:761px){.sn-nets.n5{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sn-nets.n5 span,.sn-nets.n5 a{padding:10px 6px;font-size:14px}}
.sn-marks{margin:18px auto 0;text-align:center;font-size:12.5px;line-height:1.6;color:var(--sn-mut)}

/* ---------- движение схем (html.sn-anim ставит sn_boot(), .sn-in - когда схема въехала в экран) ---------- */
/* схема за экраном (sn_boot ставит sn-off): всё её движение на паузе, вернулась - идёт дальше с того же места */
.sn-anim .sn-off *,.sn-anim .sn-off *::before,.sn-anim .sn-off *::after{animation-play-state:paused!important}
@keyframes sn-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sn-fade{from{opacity:0}to{opacity:1}}
@keyframes sn-draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes sn-ping{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%,100%{box-shadow:0 0 0 5px rgba(22,163,74,0)}}
@keyframes sn-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sn-flow{to{background-position:8px 0}}
/* лента: кадр стоит, потом уезжает вверх; последний кадр = первый, петля без рывка */
@keyframes sn-feed2{0%,40%{transform:translateY(0)}47%,90%{transform:translateY(-100%)}97%,100%{transform:translateY(-200%)}}
@keyframes sn-feed3{0%,26%{transform:translateY(0)}31%,59%{transform:translateY(-100%)}64%,92%{transform:translateY(-200%)}97%,100%{transform:translateY(-300%)}}
/* дорожка нового телефона: стоит -> запускается -> аккаунт вошёл */
/* команда: оператор -> нажатие -> доступ снят */
@keyframes sn-kai-a{0%,36%{opacity:1}41%,95%{opacity:0}100%{opacity:1}}
@keyframes sn-kai-b{0%,36%{opacity:0}41%,95%{opacity:1}100%{opacity:0}}
@keyframes sn-kai-dim{0%,36%{opacity:1}41%,95%{opacity:.5}100%{opacity:1}}
@keyframes sn-kai-av{0%,36%,100%{opacity:1;filter:none}41%,95%{opacity:.5;filter:grayscale(1)}}
@keyframes sn-kai-cur{0%{opacity:0;transform:translate(46px,56px)}10%{opacity:1}28%,34%{opacity:1;transform:translate(0,0)}36%{opacity:1;transform:translate(0,0) scale(.82)}39%,52%{opacity:1;transform:translate(0,0)}66%,100%{opacity:0;transform:translate(34px,44px)}}

/* герой: последний телефон списка включается и через время выключается */
@keyframes sn-tog{0%,22%,100%{background:#d6d6d0}28%,92%{background:#16a34a}}
@keyframes sn-knob{0%,22%,100%{transform:none}28%,92%{transform:translateX(12px)}}
@keyframes sn-wake{0%,22%,100%{filter:grayscale(1) brightness(.78)}30%,92%{filter:none}}
@keyframes sn-wake-t{0%,22%,100%{color:#74747f}30%,92%{color:#0b0b0d}}

@keyframes sn-grow{from{transform:scaleX(0)}to{transform:none}}

/* стопка телефонов: передняя карточка уходит назад, средняя выходит вперёд; у всех один цикл со сдвигом начала */
@keyframes sn-stk{0%,28%{transform:none;opacity:1;z-index:3}30.4%{transform:translate(0,26px) scale(.97);opacity:0;z-index:3}30.6%{transform:translate(40px,-44px) scale(.9);opacity:0;z-index:1}
  33%,61%{transform:translate(40px,-34px) scale(.9);opacity:1;z-index:1}66%,94%{transform:translate(20px,-17px) scale(.95);opacity:1;z-index:2}100%{transform:none;opacity:1;z-index:3}}
@keyframes sn-stk-cover{0%,30.4%{opacity:0}30.6%,94%{opacity:1}100%{opacity:0}}
@keyframes sn-grow{from{transform:scaleX(0)}to{transform:none}}

/* стопка телефонов: передняя карточка уходит назад, средняя выходит вперёд; у всех один цикл со сдвигом начала */
@keyframes sn-stk{0%,28%{transform:none;opacity:1;z-index:3}30.4%{transform:translate(0,26px) scale(.97);opacity:0;z-index:3}30.6%{transform:translate(40px,-44px) scale(.9);opacity:0;z-index:1}
  33%,61%{transform:translate(40px,-34px) scale(.9);opacity:.5;z-index:1}66%,94%{transform:translate(20px,-17px) scale(.95);opacity:.75;z-index:2}100%{transform:none;opacity:1;z-index:3}}
/* библиотека: указатель выбирает файл -> жмёт Upload -> кадр встаёт первым в галерее, остальные сдвигаются на место */
@keyframes sn-lb-cur{0%{left:78%;top:112%;opacity:0}7%{opacity:1}14%,22%{left:54%;top:52%;opacity:1}31%,42%{left:calc(100% - 49px);top:21px;opacity:1}54%,100%{left:94%;top:44%;opacity:0}}
@keyframes sn-lb-sel{0%,17%,100%{box-shadow:0 0 0 0 #fff,0 0 0 0 rgba(22,163,74,0)}20%,95%{box-shadow:0 0 0 2px #fff,0 0 0 4px #16a34a}}
@keyframes sn-lb-ck{0%,17%,100%{transform:scale(0)}22%{transform:scale(1.2)}26%,95%{transform:scale(1)}}
@keyframes sn-lb-btn{0%,33%,42%,100%{background:#fff;border-color:#e4e4df;color:#0b0b0d;transform:none}35%,39%{background:#0b0b0d;border-color:#0b0b0d;color:#fff;transform:scale(.94)}}
@keyframes sn-lb-hop{0%,38%,100%{opacity:0}44%,95%{opacity:1}}
@keyframes sn-lb-got{0%,46%,100%{opacity:0;transform:scale(.4)}54%{opacity:1;transform:scale(1.06)}58%,95%{opacity:1;transform:none}}
@keyframes sn-gl-a{0%,44%,100%{transform:translateX(calc(-100% - var(--g)))}52%,95%{transform:none}}
@keyframes sn-gl-b{0%,44%,100%{transform:translate(calc(100% + var(--g)),calc(-100% - var(--g)))}52%,95%{transform:none}}

/* два телефона: указатель нажимает внизу экрана и тянет ленту вверх (три раза), переходит на второй телефон и тянет его;
   отрезки «тянет» совпадают по времени и кривой с шагами лент sn-sc-a/b */
@keyframes sn-ptr{0%,7%{left:var(--xa);top:62%;transform:none}8%{left:var(--xa);top:62%;transform:scale(.86)}12%{left:var(--xa);top:34%;transform:scale(.86)}13%{left:var(--xa);top:34%;transform:none}19%{left:var(--xa);top:62%;transform:none}20%{left:var(--xa);top:62%;transform:scale(.86)}24%{left:var(--xa);top:34%;transform:scale(.86)}25%{left:var(--xa);top:34%;transform:none}31%{left:var(--xa);top:62%;transform:none}32%{left:var(--xa);top:62%;transform:scale(.86)}36%{left:var(--xa);top:34%;transform:scale(.86)}37%{left:var(--xa);top:34%;transform:none}44%{left:var(--xa);top:38%;transform:none}53%,57%{left:var(--xb);top:68%;transform:none}58%{left:var(--xb);top:68%;transform:scale(.86)}62%{left:var(--xb);top:40%;transform:scale(.86)}63%{left:var(--xb);top:40%;transform:none}69%{left:var(--xb);top:68%;transform:none}70%{left:var(--xb);top:68%;transform:scale(.86)}74%{left:var(--xb);top:40%;transform:scale(.86)}75%{left:var(--xb);top:40%;transform:none}81%{left:var(--xb);top:68%;transform:none}82%{left:var(--xb);top:68%;transform:scale(.86)}86%{left:var(--xb);top:40%;transform:scale(.86)}87%{left:var(--xb);top:40%;transform:none}94%{left:var(--xb);top:44%;transform:none}100%{left:var(--xa);top:62%;transform:none}}
@keyframes sn-sc-a{0%,8%{transform:translateY(0)}12%,20%{transform:translateY(-100%)}24%,32%{transform:translateY(-200%)}36%,100%{transform:translateY(-300%)}}
@keyframes sn-sc-b{0%,58%{transform:translateY(0)}62%,70%{transform:translateY(-100%)}74%,82%{transform:translateY(-200%)}86%,100%{transform:translateY(-300%)}}

/* до появления: куски схемы скрыты (только когда скрипт точно их покажет) */
.sn-anim .sn-fig:not(.sn-in) .sn-a,.sn-anim .sn-wall:not(.sn-in) .sn-a,.sn-anim .sn-fig:not(.sn-in) .sn-note,
.sn-anim .sn-fig-hero:not(.sn-in) .sn-ph,.sn-anim .sn-fig-hero:not(.sn-in) .sn-teamcard{opacity:0}
/* появление лесенкой */
.sn-anim .sn-in .sn-a{animation:sn-rise .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.11s) both}
.sn-anim .sn-fig-hero.sn-in .sn-ph{animation:sn-rise .7s cubic-bezier(.2,.7,.2,1) .2s both}
.sn-anim .sn-fig-hero.sn-in .sn-teamcard{animation:sn-rise .6s cubic-bezier(.2,.7,.2,1) .8s both}
.sn-anim .sn-in .sn-note{animation:sn-fade .5s 1.2s both}
.sn-anim .sn-in .sn-note.n2{animation-delay:1.6s}
.sn-anim .sn-in .sn-note svg path{stroke-dasharray:60;animation:sn-draw .7s 1.3s both}
.sn-anim .sn-in .sn-note.n2 svg path{animation-delay:1.7s}
/* живое */
.sn-anim .sn-in .sn-feed.n2{animation:sn-feed2 9s cubic-bezier(.7,0,.2,1) var(--d,0s) infinite}
.sn-anim .sn-in .sn-feed.n3{animation:sn-feed3 13s cubic-bezier(.7,0,.2,1) var(--d,0s) infinite}
.sn-anim .sn-in .sn-dot:not(.off):not(.wait){animation:sn-ping 2.2s ease-out infinite}
.sn-anim .sn-in .sn-geo .sn-ph{animation:sn-float 5.5s ease-in-out infinite}
.sn-anim .sn-in .sn-geo figure:nth-child(2) .sn-ph{animation-delay:-1.8s}
.sn-anim .sn-in .sn-geo figure:nth-child(3) .sn-ph{animation-delay:-3.6s}
.sn-anim .sn-in .sn-swap>.a{animation:sn-kai-a 9s 1s infinite both}
.sn-anim .sn-in .sn-swap>.b{animation:sn-kai-b 9s 1s infinite both}
.sn-anim .sn-in .sn-teamfig .sn-li.gone b{animation:sn-kai-dim 9s 1s infinite both}
.sn-anim .sn-in .sn-teamfig .sn-li.gone .sn-av{animation:sn-kai-av 9s 1s infinite both}
.sn-anim .sn-in .sn-teamfig .sn-li.gone small{opacity:1}
.sn-anim .sn-in .sn-teamfig .sn-li.gone small>.b{animation-name:sn-kai-b}
.sn-anim .sn-in .sn-teamfig .sn-cur{transform-origin:0 0;animation:sn-kai-cur 9s 1s infinite both}
.sn-anim .sn-in .sn-li.is-off .sn-tog{animation:sn-tog 9s 2.2s infinite both}
.sn-anim .sn-in .sn-li.is-off .sn-tog::after{animation:sn-knob 9s 2.2s infinite both}
.sn-anim .sn-in .sn-li.is-off .sn-th img:first-child{animation:sn-wake 9s 2.2s infinite both}
.sn-anim .sn-in .sn-li.is-off code{animation:sn-wake-t 9s 2.2s infinite both}
.sn-anim .sn-in .sn-bar i{animation:sn-grow 1s cubic-bezier(.2,.7,.2,1) .5s both}
.sn-anim .sn-in .sn-stack>.sn-dev{animation:sn-stk 10.5s cubic-bezier(.5,0,.2,1) 0s infinite both}
.sn-anim .sn-in .sn-stack>.sn-dev::after{animation:sn-stk-cover 10.5s cubic-bezier(.5,0,.2,1) 0s infinite both}
.sn-anim .sn-in .sn-stack>.sn-dev:nth-child(2),.sn-anim .sn-in .sn-stack>.sn-dev:nth-child(2)::after{animation-delay:-6.93s}
.sn-anim .sn-in .sn-stack>.sn-dev:nth-child(3),.sn-anim .sn-in .sn-stack>.sn-dev:nth-child(3)::after{animation-delay:-3.465s}
.sn-anim .sn-in .sn-libc>.sn-cur{animation:sn-lb-cur 9s 1.2s infinite both}
.sn-anim .sn-in .sn-libg .sel{animation:sn-lb-sel 9s 1.2s infinite both}
.sn-anim .sn-in .sn-libg .sel svg{animation:sn-lb-ck 9s 1.2s infinite both}
.sn-anim .sn-in .sn-libc .sn-btn{animation:sn-lb-btn 9s 1.2s infinite both}
.sn-anim .sn-in .sn-hop{animation:sn-lb-hop 9s 1.2s infinite both,sn-flow .7s linear infinite}
.sn-anim .sn-in .sn-gal .sn-got{animation:sn-lb-got 9s 1.2s infinite both}
.sn-anim .sn-in .sn-gal span:nth-child(even){animation:sn-gl-a 9s cubic-bezier(.5,0,.2,1) 1.2s infinite both}
.sn-anim .sn-in .sn-gal span:nth-child(odd):not(.sn-got){animation:sn-gl-b 9s cubic-bezier(.5,0,.2,1) 1.2s infinite both}
.sn-anim .sn-in .sn-duet>div:nth-child(1) .sn-feed{animation:sn-sc-a 14s cubic-bezier(.6,0,.2,1) 1s infinite both}
.sn-anim .sn-in .sn-duet>div:nth-child(2) .sn-feed{animation:sn-sc-b 14s cubic-bezier(.6,0,.2,1) 1s infinite both}
.sn-anim .sn-in .sn-ptr{animation:sn-ptr 14s cubic-bezier(.6,0,.2,1) 1s infinite both}
@media (prefers-reduced-motion:reduce){.sn-anim .sn-fig *,.sn-anim .sn-wall *{animation:none!important;opacity:revert}}