/* Сайт autopost. Кольори — лише токени в блоках :root нижче; шрифти системні (CSP: font-src 'self',
   без зовнішніх шрифтів). Ширини за стандартом стека: телефон ≤ 639, планшет 640–1023, ПК ≥ 1024. */
:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --grid: rgb(36 89 232 / 0.1);
  --surface: #ffffff;
  --ink: #0d1424;
  --ink-2: #2b3448;
  --muted: #566076;
  --line: #c9d1de;
  --accent: #2459e8;
  --accent-ink: #ffffff;
  --shadow: 0 12px 32px rgb(13 20 36 / 0.16);
  --sunken: #f8f9fb;
  --chip: #eef0f3;
  --info-bg: #eef4ff;
  --info-line: #c7d8f7;
  --info-ink: #1d4ed8;
  --ok-bg: #ecfdf3;
  --ok-ink: #067647;
  --warn-bg: #fff4d6;
  --warn-ink: #8a3b0a;
  --logo: #2459e8;
  --f-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hdr: 64px;
  --gut: clamp(16px, 4vw, 40px);
}

/* Токени руху ПЛАН_0007 NEW-05 (UI_0006 HANDOFF §4.1) — ті самі значення, що в web/src/styles/tokens.css. Селектор `html`,
   а не `:root`: `check_site.py` порівнює лише кольорові блоки `:root` світлої й темної тем. */
html {
  --ease-slide: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-enter: 240ms;
  --motion-exit: 200ms;
  --motion-scrim: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1018;
    --grid: rgb(122 162 255 / 0.09);
    --surface: #121926;
    --ink: #e8edf6;
    --ink-2: #c4ccdb;
    --muted: #96a1b5;
    --line: #34405a;
    --accent: #7da4ff;
    --accent-ink: #0b1018;
    --shadow: 0 12px 32px rgb(0 0 0 / 0.5);
    --sunken: #0e141d;
    --chip: #252f3e;
    --info-bg: #14213a;
    --info-line: #2b3f63;
    --info-ink: #8ab4ff;
    --ok-bg: #0f2a1d;
    --ok-ink: #6ce2a4;
    --warn-bg: #2e2210;
    --warn-ink: #fdc25a;
    --logo: #7da4ff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1018;
  --grid: rgb(122 162 255 / 0.09);
  --surface: #121926;
  --ink: #e8edf6;
  --ink-2: #c4ccdb;
  --muted: #96a1b5;
  --line: #34405a;
  --accent: #7da4ff;
  --accent-ink: #0b1018;
  --shadow: 0 12px 32px rgb(0 0 0 / 0.5);
  --sunken: #0e141d;
  --chip: #252f3e;
  --info-bg: #14213a;
  --info-line: #2b3f63;
  --info-ink: #8ab4ff;
  --ok-bg: #0f2a1d;
  --ok-ink: #6ce2a4;
  --warn-bg: #2e2210;
  --warn-ink: #fdc25a;
  --logo: #7da4ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-weight: 700; letter-spacing: -0.02em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--f-mono); }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--gut); }

.skip { position: absolute; left: -9999px; top: 0; padding: 10px 14px; background: var(--accent); color: var(--accent-ink); z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* шапка */
/* Виріз/статус-бар: фон шапки заходить під нього (NEW-01). Селектор `html`, а не `:root` — токени кольору тут не чіпаємо. */
html { --hdr-top: env(safe-area-inset-top, 0px); }
.hdr { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: var(--hdr-top); }
/* Підкладка над шапкою кольору фону: під час «відскоку» iOS (негативна прокрутка) крізь щілину зверху не видно контент. */
.hdr::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--bg); pointer-events: none; }
.hdr-in {
  height: var(--hdr);
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; min-width: 0; }
.brand-txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
/* Знак autopost (DEC-355, знак власника): контури — site/tools/brand.py з site/src/brand/autopost-logo-source.svg;
   без плитки, колір — токен --logo (синій у світлій темі, світло-синій у темній). */
.logo { width: 32px; height: 32px; flex: none; fill: var(--logo); }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { font: 500 11px/1.2 var(--f-mono); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Мови на всіх ширинах — тонка капсула з кодами UA · EN · PL · RU, поточна виділена (як на riadov.systems). */
.langs { --k: 1.2; position: relative; display: flex; border: 1px solid var(--line); border-radius: 999px; padding: calc(2px * var(--k)); background: var(--surface); }
.langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Пропорції riadov.systems (23 px, 6×8, 11 px, рамка 2) помножено на --k: капсула ≈ 34 px заввишки, дотик — ::after нижче. */
  position: relative;
  min-height: calc(23px * var(--k));
  padding: calc(6px * var(--k)) calc(8px * var(--k));
  font: 600 calc(11px * var(--k))/1 var(--f-mono);
  color: var(--muted);
  text-decoration: none;
  border-radius: 999px;
}
/* Поточна мова — тонована плашка (у темній темі темна з світлим текстом, без «світлої плашки»). */
.langs a[aria-current="true"] { background: var(--info-bg); color: var(--info-ink); box-shadow: inset 0 0 0 1px var(--info-line); }
.icon-btn {
  position: relative;
  isolation: isolate;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn::before { content: ''; position: absolute; z-index: -1; inset: 0; border: 1px solid var(--line); border-radius: inherit; background: var(--surface); }
.icon-btn svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .langs a:hover, .icon-btn:hover::before { background: var(--sunken); }
}
.langs a:active, .icon-btn:active::before { background: var(--info-bg); }
/* Зона дотику ≥ 44 px по висоті невидимим ::after (по ширині сусідні посилання вже впритул). */
.langs a::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (max-width: 1023px) {
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn::before { inset: 5px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: 600 15px/1 var(--f-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-main { background: var(--accent); color: var(--accent-ink); }
/* «Увійти» / «Панель»: обидва підписи в одній клітинці сітки — ширина кнопки = ширшому, шапка не стрибає. */
.hdr-cta { display: inline-grid; }
.hdr-cta > span { grid-area: 1 / 1; text-align: center; }
.hdr-cta .cta-panel, .hdr-cta.is-panel .cta-login { visibility: hidden; }
.hdr-cta.is-panel .cta-panel { visibility: visible; }
.hdr .brand-name { text-transform: uppercase; letter-spacing: 0.04em; }
.btn-main:hover { filter: brightness(1.08); }
.btn-line { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--ink-2); }

/* головна-лендинг (ПЛАН_0003 NEW-21, HANDOFF UI_0003) і 404 */
/* герой — крапкова підкладка, як на riadov.systems (radial-gradient 1,2 px, крок 22 px, колір — токен --grid) поверх
   тону зебри секції */
.hero { padding-block: clamp(40px, 8vw, 96px) clamp(48px, 7vw, 88px); }
.hero, .hero.sec-alt {
  background-color: var(--bg);
  background-image: radial-gradient(var(--grid) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
}
.hero.sec-alt { background-color: var(--surface); }
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.1; }
.hero .lead { max-width: 56ch; font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-2); }
.hero .row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn { height: 48px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: center; }
.hero-text { display: grid; gap: 22px; min-width: 0; }
.over { margin: 0; font: 600 13px/1.3 var(--f-sans); letter-spacing: 0.04em; color: var(--info-ink); }
.note { font-size: 14px; color: var(--muted); }
.nf .big { font: 700 clamp(64px, 14vw, 120px)/1 var(--f-mono); color: var(--accent); margin-bottom: 12px; }
.nf .lead { margin-top: 20px; }
.nf .row { margin-top: 32px; }

/* знак мережі в смузі «Публікує в» (DEC-358) — монохромна іконка `icons/<мережа>.svg`, та сама, що в сценах */
.mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--chip);
  color: var(--ink);
}
.mark svg { width: 16px; height: 16px; }
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.2 var(--f-sans); white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge-info { background: var(--info-bg); color: var(--info-ink); }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.nets { padding-block: 40px; border-block: 1px solid var(--line); text-align: center; }
.nets .over { color: var(--muted); }
.pills { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* Плашка мережі (DEC-358): висота 42 px (плитка 24 + 2 × 8 + рамка), радіус = половина висоти, значок починається там,
   де кінчається заокруглення (лівий відступ = радіусу); хвиля значка — 4 px, запас до верху плашки ≥ 3 px. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 20px 8px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
}
.sec-alt .pill { background: var(--bg); }
/* Планшет і ПК (DEC-358, правки власника): значок 24 px у щільній плитці 32, підпис 16 px; плашка 50 px заввишки,
   радіус 25 — значок з 25-го px, як кінчається заокруглення. */
@media (min-width: 640px) {
  .nets .over { font-size: 15px; }
  .pills { margin-top: 20px; gap: 14px; }
  .pill { gap: 12px; min-height: 50px; padding: 8px 26px 8px 24px; font-size: 16px; }
  .pill .mark { width: 32px; height: 32px; border-radius: 9px; }
  .pill .mark svg { width: 24px; height: 24px; }
  .pill .badge { padding: 4px 10px; font-size: 13px; }
}

.sec { padding-block: clamp(48px, 8vw, 88px); }
.sec-alt { background: var(--surface); }
.sec h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.2; letter-spacing: -0.01em; }
.sec .sub { margin-top: 12px; max-width: 760px; font-size: clamp(16px, 2vw, 20px); color: var(--ink-2); }
.grid { margin-top: clamp(24px, 4vw, 40px); display: grid; gap: clamp(16px, 2vw, 24px); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { padding: 24px; display: grid; align-content: start; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.sec-alt .card { background: var(--bg); }
.card h3 { font-size: 18px; line-height: 1.35; font-weight: 600; }
.card p { color: var(--ink-2); }
.ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--info-bg); color: var(--info-ink); }
.ic svg { width: 20px; height: 20px; }
/* номер кроку (DEC-357) — плитка як `.ic`, без анімації при наведенні (раніше масштаб 1,08 «стрибав» цифрою) */
.num { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--info-bg); color: var(--info-ink); font: 700 17px/1 var(--f-sans); font-variant-numeric: tabular-nums; }

.plans { margin-top: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.plan { grid-template-rows: auto auto auto 1fr auto; gap: 14px; }
.plan-featured { border: 2px solid var(--accent); }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.price span, .plan-note { font-size: 14px; color: var(--muted); }
.plan dl { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); display: grid; align-content: start; gap: 8px; font-size: 14px; }
.plan dl div { display: flex; justify-content: space-between; gap: 12px; }
.plan dt { color: var(--ink-2); }
.plan dd { margin: 0; font-weight: 600; white-space: nowrap; }
.plan .btn { width: 100%; }
/* −/+ додаткових проєктів на платних картках (ПЛАН_0007 NEW-69, Б§3.21 C4): як `Stepper` панелі — кнопки 44 × 44,
   значення табличними цифрами; блок по центру: заголовок і рядок «[−] N × ціна [+]». Формула під ціною плавно
   розгортається (NEW-11): висота й прозорість ≈ 200 мс, на N = 0 висоти немає; prefers-reduced-motion — без анімації. */
.price-box { display: grid; gap: 0; }
.plan-formula { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 200ms ease, opacity 200ms ease, visibility 0s linear 200ms; }
.plan-formula.on { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows 200ms ease, opacity 200ms ease, visibility 0s; }
.plan-formula > p { min-height: 0; margin: 0; padding-top: 4px; overflow: hidden; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .plan-formula, .plan-formula.on { transition: none; } }
.plan-act { display: grid; gap: 12px; }
.plan-extra { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.plan-extra__title { overflow-wrap: anywhere; }
.stepper-sum { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 8ch; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stepper-sum .stepper-val { min-width: 2ch; padding: 0; text-align: end; }
.plan-extra .stepper { gap: 8px; max-width: 100%; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.sec-alt .stepper-btn { background: var(--bg); }
.stepper-btn svg { width: 16px; height: 16px; }
.stepper-btn:disabled { color: var(--muted); cursor: not-allowed; }
@media (hover: hover) { .stepper-btn:not(:disabled):hover { border-color: var(--ink-2); } }
.stepper-val { min-width: 3ch; padding: 0 4px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
/* без JS −/+ не працює — ховаємо разом із формулою, «Обрати» веде з extra=0 */
html:not(.js) .plan-extra, html:not(.js) .plan-formula { display: none; }
.plan-more { margin-top: 24px; display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.plan-more h3 { font-size: 16px; font-weight: 600; }
.plan-more ul { list-style: disc; margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.plan-more p { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.fine { margin-top: 20px; font-size: 14px; color: var(--muted); }

.faq { margin-top: clamp(24px, 4vw, 40px); max-width: 800px; }
.faq details, .faq-item { border-bottom: 1px solid var(--line); }
.faq summary, .faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding-block: 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-head { width: 100%; padding-inline: 0; border: 0; background: transparent; color: inherit; font-family: inherit; text-align: left; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg, .faq-head svg { width: 20px; height: 20px; color: var(--muted); transition: transform var(--motion-exit) var(--ease-slide); }
.faq details[open] summary:not([aria-expanded]) svg,
.faq-head[aria-expanded="true"] svg { transform: rotate(180deg); transition-duration: var(--motion-enter); }
.faq-answer.is-animating { overflow: hidden; }
.faq-answer p { padding-bottom: 20px; color: var(--ink-2); }

/* Заклик (DEC-352): дві колонки — заголовок, текст і кнопка / чотири пункти; на телефоні — одна. */
.end {
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  background: var(--info-bg);
  border: 1px solid var(--info-line);
  border-radius: 12px;
}
.end-main { display: grid; justify-items: start; gap: 16px; }
.end h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.2; }
.end-main > p { max-width: 46ch; font-size: clamp(16px, 1.8vw, 18px); color: var(--ink-2); }
.end-main > .note { font-size: 14px; color: var(--muted); }
.end-main .btn { height: 48px; padding: 0 28px; }
.end-points { display: grid; gap: 10px; }
.end-points .ic { flex: none; }
.end-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--info-line);
  border-radius: 12px;
}
.end-points b { display: block; font-size: 15px; line-height: 1.35; font-weight: 600; }
.end-points li span span { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* документи Сервісу (NEW-05): вміст <main> файла legal-docs/ як є — h1, редакція, розділи h2, абзаци, списки */
.doc { padding-block: clamp(32px, 6vw, 64px); }
.doc .wrap { max-width: 800px; }
.doc h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; }
.doc .edition { margin-top: 8px; color: var(--muted); }
.doc h2 {
  margin: 36px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.3;
  scroll-margin-top: calc(var(--hdr) + var(--hdr-top) + 16px);
}
.doc p { margin: 0 0 12px; color: var(--ink-2); }
.doc ul, .doc ol { margin: 0 0 12px; padding-left: 1.3em; color: var(--ink-2); }
.doc li { margin: 6px 0; }
.doc b, .doc strong { color: var(--ink); }
.doc a { color: var(--accent); overflow-wrap: anywhere; }
.doc code { font-family: var(--f-mono); font-size: 0.92em; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 15px; }
.doc th, .doc td { padding: 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; }

/* Підвал (ПЛАН_0008 NEW-03): компанія з поштою внизу, «Сайт», 8 заглушок соцмереж.
   Типографіка й адаптивні колонки звірені лише з футером riadov.systems; палітра власна.
   «Налаштування cookie» залишається за чинним прапорцем аналітики (DEC-269). */
/* підвал — темний тон зебри секцій (DEC-358); блок над ним — світлий */
.foot { border-top: 1px solid var(--line); background: var(--bg); padding-block: 48px 72px; font-size: 14.5px; color: var(--muted); }
/* Колонки — підсітка двох спільних рядків (DEC-351): 1) знак і заголовки колонок по центру одного рядка; 2) вміст.
   Перший рядок опису зсунуто на половину «повітря» посилання (--fl − 22 px), тож він на одній лінії з першим
   посиланням «Сайт». Опис і посилання — один колір і кегль (`--ink-2`, 14,5/22), як на взірці. */
.foot { --fl: 36px; }
.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) 206px;
  grid-template-rows: auto auto;
  gap: 8px 36px;
}
.foot-col { grid-row: span 2; display: grid; grid-template-rows: subgrid; align-content: start; min-width: 0; }
.foot-col > :first-child { align-self: center; }
.foot-brand { display: inline-flex; justify-self: start; gap: 10px; color: var(--ink); text-decoration: none; }
.foot-brand .logo { width: 28px; height: 28px; }
.foot .about { margin: 0; padding-top: calc((var(--fl) - 22px) / 2); max-width: 46ch; font-size: 14.5px; line-height: 22px; color: var(--ink-2); }
/* Більший відступ від опису до реквізитів, як на взірці. */
/* Реквізити — один рівний список, як на riadov.systems: назва, адреса, NIP · REGON, пошта — усі рядки в одній сітці з
   однаковим gap і однаковою висотою рядка (20 px, хоч кегль NIP менший), тож відстань між сусідніми рядками однакова.
   Пошта — рядок цього ж списку, не окремий блок: окремий блок із власним margin і min-height давав порожнину над нею. */
.req { margin-top: 20px; display: grid; justify-items: start; gap: 4px; font-size: 13px; line-height: 20px; color: var(--ink-2); }
.req b { color: var(--ink); font-weight: 600; }
.req .mono { font-size: 12px; }
/* Ціль пошти — 24 px по висоті псевдоелементом (± 2 px у gap), без зміни висоти рядка. */
.req a { position: relative; color: var(--ink-2); }
.req a::after { content: ""; position: absolute; inset: -2px 0; }
.fh { margin: 0; font: 600 11px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.foot ul { display: grid; align-content: start; }
.foot ul a { display: inline-flex; align-items: center; min-height: var(--fl); font-size: 14.5px; line-height: 22px; color: var(--ink-2); text-decoration: none; }
/* align-content: start — рядок підсітки колонок високий (як опис компанії), без цього ряди плиток розтягуються. */
.soc { display: grid; grid-template-columns: repeat(4, 44px); align-content: start; gap: 10px; }
.soc a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); }
/* Заглушка до появи акаунта (DEC-345): та сама плитка, але не посилання — пунктирна рамка, без наведення. */
.soc .soc-soon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); cursor: default; }
.soc svg { width: 19px; height: 19px; }
.legal { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; justify-items: center; gap: 2px; font-size: 13.5px; text-align: center; }
.legal nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink-2); }
.legal .ls { display: none; }
.copy { margin: 6px 0 0; color: var(--muted); }
.cookie-set {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .foot ul a:hover, .req a:hover { color: var(--accent); text-decoration: underline; }
  .soc a:hover { color: var(--accent); border-color: var(--accent); }
  .cookie-set:hover { color: var(--ink); border-color: var(--ink-2); }
}

/* «Нагору» (Б§3.21 C3, як у панелі — A10): кругла 44 праворуч унизу, відступ 16 + safe area; завжди внизу екрана, над
   підвалом не піднімається (NEW-12). Поява/зникнення — прозорість і зсув 8 px за `--ease-slide`; «менше руху»
   обнуляє тривалість. Під банером cookie (70) і шапкою (50), над вмістом. */
.to-top {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-grid;
  place-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--motion-exit) var(--ease-slide),
    transform var(--motion-exit) var(--ease-slide),
    visibility 0s linear var(--motion-exit);
}
.to-top[data-shown] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--motion-enter) var(--ease-slide),
    transform var(--motion-enter) var(--ease-slide),
    visibility 0s;
}
.to-top svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { color: var(--accent); border-color: var(--accent); }
}
main:focus { outline: none; }

/* Cookie dialog: native modal керує Tab, Escape й inert-фоном; закриття саме по собі не зберігає вибір. */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  top: auto;
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: 0 0 0 auto;
  padding: 18px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 14px;
  color: var(--ink-2);
}
.consent[hidden], .consent:not([open]) { display: none; }
.consent::backdrop { background: var(--bg); opacity: 0.7; }
.consent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.consent-head h2 { font-size: 18px; color: var(--ink); }
.consent-head .icon-btn { min-height: 44px; flex: 0 0 44px; font-size: 24px; }
.consent a { color: var(--accent); }
.consent .row { display: flex; flex-wrap: wrap; gap: 8px; }
.consent .btn { flex: 1 1 auto; font-size: 14px; padding: 0 16px; }

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .g4, .g3, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-more { grid-template-columns: minmax(0, 1fr); }
  .foot { --fl: 44px; }
  .foot ul a { min-width: 44px; }
  /* Планшет: компанія на всю ширину, під нею «Сайт» | «Соцмережі». */
  .foot-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "about about" "site social";
    gap: 28px 32px;
  }
  .foot-col { grid-row: auto; display: block; }
  .foot-col > .fh { margin-bottom: 8px; }
  .foot-about { grid-area: about; }
  .foot-site { grid-area: site; }
  .foot-social { grid-area: social; }
  .foot-brand { display: flex; width: max-content; }
  .foot .about { padding-top: 8px; }
  .end-points li { padding: 10px 12px 10px 10px; }
}
@media (max-width: 639px) {
  .brand small { display: none; }
  .btn { padding: 0 14px; }
  /* Шапка в один рядок: знак + «AUTOPOST», «UA ▾», тема, «Увійти». Мови — кнопка зі списком. */
  .hdr-in { gap: 8px; }
  .brand { flex: 1 1 0; gap: 8px; }
  .hdr .brand-name { font-size: 15px; letter-spacing: 0.02em; }
  .tools { gap: 6px; }
  .langs a { padding: calc(6px * var(--k)) clamp(4px, 1.36vw, calc(8px * var(--k))); }
  .hdr .btn { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 399px) {
  /* 360–390: знак + «AUTOPOST», тонка капсула мов, тема, «Панель» — в один рядок без обрізання назви. */
  .hdr-in { gap: 4px; }
  .tools { gap: 2px; }
  .hdr .brand-name { font-size: 12px; letter-spacing: 0; }
  .hdr .btn { padding: 0 8px; font-size: 13px; }
}
@media (max-width: 370px) {
  .hdr .btn { padding: 0 6px; }
}
@media (max-width: 639px) {
  .doc h2 { scroll-margin-top: calc(var(--hdr) + var(--hdr-top) + 72px); }
  .hero .row .btn { flex: 1 1 100%; }
  .g4, .g3 { grid-template-columns: minmax(0, 1fr); }
  /* Тарифи на телефоні — горизонтальна прокрутка карток (коментар власника у Figma), край до краю екрана. */
  .plans {
    display: flex;
    gap: 16px;
    margin-inline: calc(-1 * var(--gut));
    padding: 2px var(--gut) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    overscroll-behavior-x: contain;
  }
  .plan { flex: 0 0 min(290px, 80%); scroll-snap-align: start; }
  .end { grid-template-columns: minmax(0, 1fr); }
  .end-main .btn { width: 100%; }
  /* Телефон: одна колонка; «Сайт» — посилання рядком з переносом, соцмережі двома рядками. Підвал нижчий
     за екран мінус шапка й «Нагору» — кнопці лишається місце над ним. */
  .foot { padding-block: 28px 64px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 18px; }
  .foot-col { grid-area: auto; }
  .foot-col > .fh { margin-bottom: 4px; }
  .foot-brand { min-height: 44px; }
  .foot .about { padding-top: 4px; }
  .req { margin-top: 12px; }
  .foot-site ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
  .soc { grid-template-columns: repeat(4, 44px); gap: 10px; }
  .legal { margin-top: 18px; padding-top: 4px; }
  .copy { margin-top: 0; }
  .legal nav { flex-wrap: nowrap; justify-content: space-between; gap: 12px; width: 100%; }
  .legal .lf { display: none; }
  .legal .ls { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  html { --motion-enter: 0.01ms; --motion-exit: 0.01ms; --motion-scrim: 0.01ms; }
  html { scroll-behavior: auto; }
  .faq summary svg, .faq-head svg { transition: none; }
}

/* Сцени головної (DEC-357, DEC-358; у дусі riadov.systems): герой і три секції «текст + сцена». Тут — статичний кінцевий
   кадр кожної сцени (так їх бачать без JS і з prefers-reduced-motion), рух — нижче в `prefers-reduced-motion:
   no-preference`, keyframes — у кінці файла. Деталі — `_scene.html`.
   Сцена — фіксований макет 400 px завширшки (`.dz`), координати й вектори польотів — сталі числа в його одиницях.
   Під ширину колонки макет масштабує CSS `zoom` за container queries (`.vis` — контейнер): це масштаб розкладки, тож
   текст рендериться у своєму розмірі й лишається чітким; на ПК 1,2–1,4, на телефоні 0,85–0,9; без JS. Текст у сценах
   не обертається й не масштабується трансформаціями в стані спокою. Рухомі елементи центровано властивістю
   `translate`, анімується лише `transform`/`opacity`. Фон карток сцени — `--card` (у приглушеній секції — фон сторінки). */
.dz { --card: var(--surface); }
.sec-alt .dz { --card: var(--bg); }
.sx-b { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.sx-v { fill: var(--info-bg); stroke: var(--info-line); stroke-width: 1.5; }
.sx-l { fill: var(--line); }
.sx-a { fill: var(--accent); }
.sx-w { fill: var(--warn-ink); }
.sx-o { fill: var(--ok-ink); }
.tile { display: block; width: 100%; height: 100%; }
.net {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--info-line);
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--info-ink);
}
.net svg { width: 22px; height: 22px; }

.vis { container-type: inline-size; min-width: 0; }
.dz { position: relative; width: 400px; margin-inline: auto; zoom: 0.65; }
.dz p { margin: 0; }
@container (min-width: 280px) { .dz { zoom: 0.7; } }
@container (min-width: 300px) { .dz { zoom: 0.75; } }
@container (min-width: 320px) { .dz { zoom: 0.8; } }
@container (min-width: 340px) { .dz { zoom: 0.85; } }
@container (min-width: 352px) { .dz { zoom: 0.88; } }
@container (min-width: 360px) { .dz { zoom: 0.9; } }
@container (min-width: 400px) { .dz { zoom: 1; } }
@container (min-width: 440px) { .dz { zoom: 1.1; } }
@container (min-width: 480px) { .dz { zoom: 1.2; } }
@container (min-width: 520px) { .dz { zoom: 1.3; } }
@container (min-width: 560px) { .dz { zoom: 1.4; } }
.dz > * { position: absolute; }
/* ряд мереж по центру: зсув від центру — `k<n>` × 30 px (шаблон, `live_nets`) */
.k-4 { --nx: -120px; } .k-3 { --nx: -90px; } .k-2 { --nx: -60px; } .k-1 { --nx: -30px; } .k0 { --nx: 0px; }
.k1 { --nx: 30px; } .k2 { --nx: 60px; } .k3 { --nx: 90px; } .k4 { --nx: 120px; }
.sc-nets li { position: absolute; left: calc(200px + var(--nx)); top: 22px; translate: -50% -50%; }
.ok {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--ok-ink);
  color: var(--card);
}
.ok svg { width: 13px; height: 13px; stroke-width: 3; }

/* Пагінація складних сцен (герой, C): номер і назва етапу + три відрізки, поточний заповнюється за час етапу.
   Кінцевий кадр героя — етап 3, усі відрізки повні; сцени C — етап 2 («Розклад»). */
.pg { left: 0; top: 0; width: 400px; height: 38px; }
.pg-lbl { position: absolute; left: 0; top: 0; display: grid; }
.pg-lbl > b { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; font: 600 17px/22px var(--f-sans); white-space: nowrap; }
.pg-lbl i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 12px/1 var(--f-sans);
  font-style: normal;
}
.pg-bar { position: absolute; left: 0; top: 31px; width: 400px; height: 6px; display: flex; gap: 8px; }
.pg-bar i { position: relative; flex: 1; overflow: hidden; border-radius: 3px; background: var(--chip); }
.pg-bar b { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; }
.dz-hero .pg-lbl .c1, .dz-hero .pg-lbl .c2, .dz-c .pg-lbl .c1, .dz-c .pg-lbl .c3 { opacity: 0; }
.dz-c .pg-bar .c3 b { transform: scaleX(0); }

/* Герой: пагінація → поле завантаження / панель мереж (змінюють одне одного) → календар тижня, де пости змінюють один
   одного. Кінцевий кадр: панель мереж з ✓, у рядках — пости «Опубліковано». */
.dz-hero { height: 392px; }
.hs-drop, .hs-out { left: 0; top: 48px; width: 400px; height: 96px; border-radius: 16px; }
.hs-drop { border: 2px dashed var(--line); color: var(--muted); opacity: 0; }
.hs-drop svg { position: absolute; left: 18px; top: 34px; width: 28px; height: 28px; }
.hs-out { z-index: 5; border: 1px solid var(--line); background: var(--card); }
.hs-out li { position: absolute; left: calc(200px + var(--nx) * 1.3); top: 48px; translate: -50% -50%; }
.hs-out .net { width: 52px; height: 52px; }
.hs-out .net svg { width: 26px; height: 26px; }
.hs-cal { left: 0; top: 156px; width: 400px; height: 236px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.hs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 0 16px; }
.hs-head span { display: grid; gap: 1px; min-width: 0; }
.hs-head b { font-size: 16px; line-height: 1.25; }
.hs-head small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-head .logo { width: 30px; height: 30px; }
.hs-row { left: 8px; width: 384px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--sunken); }
.hr1 { top: 204px; } .hr2 { top: 266px; } .hr3 { top: 328px; }
.hs-row .when { position: absolute; left: 12px; top: 8px; width: 46px; display: grid; }
.hs-row .when small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.hs-row .when b { font-size: 15px; line-height: 1.3; }
.hs-slot { position: absolute; left: 64px; top: 4px; width: 48px; height: 48px; border: 1.5px dashed var(--line); border-radius: 10px; }
.hs-c { position: absolute; inset: 0; }
.hs-c.b { opacity: 0; }
.hs-c .th { position: absolute; left: 64px; top: 4px; width: 48px; height: 48px; }
.hs-c > b { position: absolute; left: 124px; right: 12px; top: 8px; font-size: 15px; line-height: 1.25; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-flip { position: absolute; left: 124px; top: 31px; display: inline-grid; justify-items: start; }
.hs-flip > .badge { grid-area: 1 / 1; }
.hs-flip > .badge-info { opacity: 0; }
.dz .badge { padding: 3px 10px; font-size: 12.5px; }
/* файл: центр у слоті свого рядка, у полі завантаження — зсув --px/--py; у кінцевому кадрі файлів немає (вони — у
   мініатюрах рядків) */
.hf { left: 96px; z-index: 6; width: 52px; height: 52px; translate: -50% -50%; opacity: 0; }
.hf.a1, .hf.b1 { top: 232px; --px: 64px; --py: -136px; }
.hf.a2, .hf.b2 { top: 294px; --px: 128px; --py: -198px; }
.hf.a3, .hf.b3 { top: 356px; --px: 192px; --py: -260px; }
/* копія поста: центр на знаку мережі, старт — слот рядка (вектор від знака: −104 − зсув, --sy) */
.hs-copy { position: absolute; left: 50%; top: 50%; z-index: 4; width: 52px; height: 39px; translate: -50% -50%; opacity: 0; }
.cr1 { --sy: 136px; } .cr2 { --sy: 198px; } .cr3 { --sy: 260px; }

/* A. Десятки файлів — десятки постів: поле з файлами → 4 картки постів 2×2; обкладинка лягає на відео картки 4.
   `.sa-old` — копія кінцевого кадру: стоїть у картках, поки падає нова партія, і підміняє кінець циклу початком. Копія
   збігається з кінцем піксель у піксель: мініатюра й кнопка відтворення — у тих самих точках, де стали файл і `.sa-pl`
   (координати в картці — мінус рамка 1,5 px), інакше на межі циклу кадр смикається (ПЛАН_0011 NEW-15). */
.dz-a { height: 296px; }
.sa-drop { left: 0; top: 0; width: 400px; height: 118px; border: 2px dashed var(--line); border-radius: 18px; color: var(--muted); }
.sa-drop svg { position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; }
.sa-slot, .sa-card, .sa-ring { width: 194px; height: 80px; border-radius: 14px; }
.sa-slot { border: 1.5px dashed var(--line); }
.q1 { left: 0; top: 134px; } .q2 { left: 206px; top: 134px; } .q3 { left: 0; top: 216px; } .q4 { left: 206px; top: 216px; }
.sa-card { border: 1.5px solid var(--line); background: var(--card); opacity: 0; }
.sa-card::before { content: ""; position: absolute; left: 14px; top: 11px; width: 56px; height: 56px; border-radius: 12px; background: var(--sunken); }
.sa-card i { position: absolute; left: 84px; height: 8px; border-radius: 4px; background: var(--line); }
.sa-card i:nth-of-type(1) { top: 18px; width: 90px; background: var(--muted); }
.sa-card i:nth-of-type(2) { top: 36px; width: 76px; }
.sa-card i:nth-of-type(3) { top: 53px; width: 86px; }
.sa-card.q4 i { top: 36px; width: 70px; background: var(--line); }
.sa-card .th { position: absolute; left: 12.5px; top: 10.5px; z-index: 1; width: 56px; height: 56px; }
.sa-old { z-index: 7; opacity: 1; }
.sa-name { position: absolute; left: 84px; top: 11px; font: 600 14px/1.2 var(--f-mono); color: var(--ink); }
.sa-chip {
  position: absolute;
  left: 82px;
  top: 50px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok-ink);
  font: 600 12.5px/1.2 var(--f-sans);
  white-space: nowrap;
}
.sa-ring { left: 206px; top: 216px; border: 2.5px solid var(--accent); opacity: 0; }
.sf { z-index: 3; width: 56px; height: 56px; translate: -50% -50%; opacity: 0; --pr: 0deg; }
.sf1 { left: 42px; top: 174px; --px: 28px; --py: -112px; --pr: -8deg; }
.sf2 { left: 248px; top: 174px; --px: -110px; --py: -122px; --pr: 6deg; }
.sf3 { left: 42px; top: 256px; --px: 162px; --py: -190px; --pr: -4deg; }
.sf4 { left: 248px; top: 256px; --px: 20px; --py: -204px; }
.sf5 { left: 248px; top: 256px; z-index: 4; --px: 102px; --py: -212px; }
/* підписи файлів пари — окремо від файлів: не обертаються й не масштабуються, лише з'являються (чіткий текст) */
.tag {
  z-index: 3;
  translate: -50% 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--chip);
  color: var(--ink-2);
  font: 600 13px/1.2 var(--f-mono);
  white-space: nowrap;
  opacity: 0;
}
.tg4 { left: 268px; top: 86px; } .tg5 { left: 350px; top: 78px; }
.sa-play {
  position: absolute;
  left: 62.5px;
  top: 60.5px;
  z-index: 2;
  width: 24px;
  height: 24px;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--accent);
}
.sa-play.sa-pl { left: 270px; top: 278px; z-index: 5; opacity: 0; }
.sa-play svg { width: 13px; height: 13px; fill: var(--accent-ink); }

/* B. Один текст — під кожну мережу: текст ліворуч → копії у вкладки Telegram, LinkedIn, X (лічильники символів); X
   задовгий → кнопка «Розбити з ШІ на гілку» → стара картка X зникає, з'являються частини 1/2 і 2/2. Щоб чотири картки
   вмістилися в місце трьох, кожна стає нижчою 96 → 58 px: рядки тексту ховаються, а фон обрізає `clip-path: inset(…
   round R)` — зовнішній шар `.bo` кольору рамки й внутрішній `.bi` кольору картки, тож картка в кожному кадрі ціла, з
   рамкою й заокругленими кутами (DEC-358). Проміжок між картками — 8 px, межі й підписи не перекриваються. Заготовки
   вкладок ховаються, щойно приходить їхня картка. */
.dz-b { height: 304px; }
.sb-src { left: 0; top: 62px; width: 150px; height: 180px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.sb-src p { display: flex; align-items: center; gap: 7px; padding: 13px 0 0 14px; color: var(--info-ink); }
.sb-src svg { width: 18px; height: 18px; }
.sb-src b { font-size: 14px; color: var(--ink); }
.sb-lines { position: absolute; left: 14px; top: 52px; width: 120px; display: grid; gap: 12px; }
.sb-lines i { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.sb-lines i:nth-child(2) { width: 86%; } .sb-lines i:nth-child(4) { width: 72%; }
.sb-lines i:nth-child(5) { width: 92%; } .sb-lines i:nth-child(6) { width: 54%; }
.sb-tab, .sb-fill, .sb-part { left: 164px; width: 236px; height: 96px; }
.t1 { top: 0; } .t2 { top: 104px; } .t3 { top: 208px; }
.sb-tab { border: 1.5px dashed var(--line); border-radius: 14px; opacity: 0; }
.bo, .bi { position: absolute; }
.bo { inset: 0; border-radius: 14px; background: var(--line); clip-path: inset(0 0 38px 0 round 14px); }
.bi { inset: 1.5px; border-radius: 12.5px; background: var(--card); clip-path: inset(0 0 38px 0 round 12.5px); }
.sb-fill.t3 .bo { background: var(--warn-ink); clip-path: inset(0 0 0 0 round 14px); }
.sb-fill.t3 .bi { clip-path: inset(0 0 0 0 round 12.5px); }
.sb-tab .net, .sb-fill .net, .sb-part .net { position: absolute; left: 12px; top: 11px; width: 36px; height: 36px; }
.sb-tab .net svg, .sb-fill .net svg, .sb-part .net svg { width: 18px; height: 18px; }
.sb-tab > b, .sb-fill > b { position: absolute; left: 56px; top: 18px; font-size: 14px; line-height: 1.4; }
.ln { position: absolute; left: 14px; top: 60px; width: 120px; height: 6px; border-radius: 3px; background: var(--line); opacity: 0; }
.ln + .ln { top: 72px; width: 84px; }
.sb-fill.t2 .ln { width: 150px; } .sb-fill.t2 .ln + .ln { width: 110px; }
/* стиснутий стовпчик із 4 карток (24…280) — по центру картки «Ваш текст» (62…242): виступи 38 / 38 px макета */
.sb-fill.t1 { transform: translateY(24px); }
.sb-fill.t2 { transform: translateY(-14px); }
.cnt {
  position: absolute;
  right: 12px;
  top: 17px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok-ink);
  font: 600 12.5px/1.3 var(--f-mono);
  white-space: nowrap;
}
.cnt-w { background: var(--warn-bg); color: var(--warn-ink); }
.sb-fill.t3 { opacity: 0; }
.sb-part > b { position: absolute; left: 56px; top: 19px; font: 600 13px/1.4 var(--f-mono); color: var(--muted); }
.x1 { top: 208px; transform: translateY(-52px); } .x2 { top: 222px; }
/* кнопка як у панелі (primary, `--radius-md`), з іконкою ШІ — окремим рядком на всю ширину вмісту картки X: від кола
   значка й від низу картки — по 12 px макета (16,8 px на 1440, 10,6 px на 390); пульс-обвідка — перед натисканням */
.sb-ai {
  left: 176px;
  top: 267px;
  z-index: 4;
  width: 212px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 25px;
  padding: 0 11px 0 9px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 12.5px/1 var(--f-sans);
  white-space: nowrap;
  opacity: 0;
}
.sb-ai svg { width: 15px; height: 15px; }
/* обвідка-пульс — лише прозорістю, на 3 px навколо кнопки: лишається всередині картки X (раніше масштаб 1,18
   виносив її за межу картки) */
.sb-ai::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--accent); border-radius: 11px; opacity: 0; }
.sb-cp { z-index: 6; width: 40px; height: 40px; translate: -50% -50%; left: 282px; opacity: 0; --px: -207px; }
.p1 { top: 48px; --py: 104px; } .p2 { top: 152px; --py: 0px; } .p3 { top: 256px; --py: -104px; }

/* C. Погодження й розклад: редактор → Telegram власника («Погодити» → ✓) → пости по одному в слоти тижня → лінія
   «зараз» — кожен пост у свій час вилітає в мережі. Кінцевий кадр: «Погоджено», у слотах тижня — заплановані пости. */
.dz-c { height: 298px; }
.sc-node {
  left: 4px;
  top: 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--info-ink);
}
.sc-node svg { width: 24px; height: 24px; }
.sc-node > b { position: absolute; left: 50%; top: calc(100% + 4px); translate: -50% 0; font: 600 13px/1.2 var(--f-sans); color: var(--ink-2); white-space: nowrap; }
.sc-tg { left: 84px; top: 48px; width: 316px; height: 70px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); }
.sc-tg p { position: absolute; left: 76px; top: 8px; display: flex; align-items: center; gap: 6px; color: var(--accent); }
.sc-tg p svg { width: 15px; height: 15px; }
.sc-tg p b { font: 600 13px/1.3 var(--f-sans); color: var(--muted); }
.sc-tile { position: absolute; left: 14px; top: 16px; width: 48px; height: 36px; border: 1.5px dashed var(--line); border-radius: 7px; }
.sc-btns { position: absolute; left: 76px; right: 12px; top: 28px; display: grid; }
.sc-btns b { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 5px; height: 32px; border-radius: 9px; font: 600 14px/1 var(--f-sans); white-space: nowrap; }
.sc-btn { background: var(--accent); color: var(--accent-ink); opacity: 0; }
.sc-ok { background: var(--ok-bg); color: var(--ok-ink); }
.sc-ok svg { width: 16px; height: 16px; stroke-width: 2.6; }
.sc-week { left: 0; top: 134px; width: 400px; height: 110px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.sc-day, .sc-slot { position: absolute; translate: -50% 0; }
.sc-day { top: 7px; font: 500 12.5px/1.3 var(--f-mono); color: var(--muted); white-space: nowrap; }
.sc-day b { margin-right: 5px; font: 600 14px/1.3 var(--f-sans); color: var(--ink); }
.sc-slot { top: 30px; width: 80px; height: 70px; border: 1.5px dashed var(--line); border-radius: 12px; }
.d1 { left: 56px; } .d2 { left: 152px; } .d3 { left: 248px; } .d4 { left: 344px; }
.sc-p0, .sc-p { z-index: 3; width: 52px; height: 39px; translate: -50% -50%; }
.sc-p0 { left: 122px; top: 82px; opacity: 0; }
.sc-p, .sc-k { top: 199px; }
.sc-k {
  z-index: 2;
  width: 34px;
  height: 34px;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok-ink);
  opacity: 0;
}
.sc-k svg { width: 20px; height: 20px; stroke-width: 2.6; }
.sc-now { left: 8px; top: 160px; z-index: 4; width: 2px; height: 80px; border-radius: 1px; background: var(--accent); opacity: 0; }
.sc-now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); }
.sc-nets { left: 0; top: 254px; width: 400px; height: 44px; }
/* копія поста в значку мережі: центр на значку, старт — слот свого дня (--cx), вектор від значка: cx − 200 − зсув,
   −77 px; ✓ на значку — лише коротко при прильоті */
.sc-cp { position: absolute; left: 50%; top: 50%; z-index: 4; width: 52px; height: 39px; translate: -50% -50%; opacity: 0; }
.cp1 { --cx: 56px; } .cp2 { --cx: 152px; } .cp3 { --cx: 248px; } .cp4 { --cx: 344px; }
.sc-nets .ok { transform: scale(0); }

/* Секції «текст + сцена» (DEC-357): як на riadov.systems — текст і сцена на пів ширини, сторони чергуються; фон теж
   чергується (`.sec-alt`, DEC-358). */
.scn { padding-block: clamp(48px, 7vw, 96px); }
.scn-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.scn.flip .scn-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.scn.flip .txt { order: 2; }
.txt { display: grid; gap: 16px; align-content: center; }
.txt .act { font: 600 12px/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--info-ink); }
.txt h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.01em; }
.txt p:last-child { max-width: 46ch; font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-2); }

@media (max-width: 1023px) {
  .scn-in, .scn.flip .scn-in { grid-template-columns: minmax(0, 1fr); }
  .scn.flip .txt { order: 0; }
  .scn .vis { width: 100%; max-width: 560px; justify-self: center; }
  .hero-vis { width: 100%; max-width: 520px; }
}

/* Анімації головної (DEC-354, сцени DEC-357/DEC-358): лише transform/opacity, усе — тільки без prefers-reduced-motion
   (з ним сторінка статична). Появи 0,5–0,6 с; сцени — цикли 12 с (герой — 24 с: два проходи з різними постами), у
   кожній кадр ніколи не порожній: стани змінюють один одного; плашки мереж — хвиля раз на 9 с. 1) поява блоків при
   прокручуванні — `.rv`/`.rv-in` ставить motion.js лише блокам нижче першого екрана (без JS не ховається нічого);
   2) сцени — keyframes у кінці файла (часи етапів — у коментарях до сцен); 3) наведення — картки (без руху номера чи
   тексту), кнопки, плашки, пункти заклику. Цикли `[data-live]` поза екраном на паузі (`.idle`, motion.js). */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; }
  .rv.rv-in { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  /* затримка — за колонкою на ПК: рядок карток з'являється зліва направо */
  .g4 > .rv-in:nth-child(4n + 2), .plans > .rv-in:nth-child(4n + 2) { animation-delay: 0.08s; }
  .g4 > .rv-in:nth-child(4n + 3), .plans > .rv-in:nth-child(4n + 3) { animation-delay: 0.16s; }
  .g4 > .rv-in:nth-child(4n + 4), .plans > .rv-in:nth-child(4n + 4) { animation-delay: 0.24s; }
  .g3 > .rv-in:nth-child(3n + 2) { animation-delay: 0.08s; }
  .g3 > .rv-in:nth-child(3n + 3) { animation-delay: 0.16s; }

  .pills .mark { animation: wave 9s ease-in-out 1s infinite; }
  .pill:nth-child(2) .mark { animation-delay: 1.2s; }
  .pill:nth-child(3) .mark { animation-delay: 1.4s; }
  .pill:nth-child(4) .mark { animation-delay: 1.6s; }
  .pill:nth-child(5) .mark { animation-delay: 1.8s; }
  .pill:nth-child(6) .mark { animation-delay: 2s; }
  .pill:nth-child(7) .mark { animation-delay: 2.2s; }
  .pill:nth-child(8) .mark { animation-delay: 2.4s; }
  .pill:nth-child(9) .mark { animation-delay: 2.6s; }
  .pill:nth-child(10) .mark { animation-delay: 2.8s; }

  /* спільний ритм сцен: цикл 12 с (герой — 24 с), один easing */
  .dz *, .dz *::before, .dz *::after {
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
  }
  .dz-hero *, .dz-hero *::before, .dz-hero *::after { animation-duration: 24s; }

  /* герой (24 с; у кожні 12 с: 0–3,2 файли в поле, 3,2–6,6 у рядки, витісняючи опубліковані, 6,6–11,8 поле → мережі,
     рядки по черзі «Опубліковано», копії до мереж) */
  .dz-hero .pg-lbl .c1 { animation-name: h-pg-c1; } .dz-hero .pg-lbl .c2 { animation-name: h-pg-c2; }
  .dz-hero .pg-lbl .c3 { animation-name: h-pg-c3; }
  .dz-hero .pg-bar .c1 b { animation-name: h-pg-b1; } .dz-hero .pg-bar .c2 b { animation-name: h-pg-b2; }
  .dz-hero .pg-bar .c3 b { animation-name: h-pg-b3; }
  .hs-drop { animation-name: h-drop; }
  .hs-out { animation-name: h-out; }
  .hs-out .ok { animation-name: h-ok; }
  .hs-out .net { animation-name: h-net; }
  .hs-copy.cr1 { animation-name: h-cp1; } .hs-copy.cr2 { animation-name: h-cp2; } .hs-copy.cr3 { animation-name: h-cp3; }
  .hs-row::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 61px;
    border: 2px solid var(--accent);
    border-radius: 10px;
    opacity: 0;
  }
  .hr1::after { animation-name: h-ring1; } .hr2::after { animation-name: h-ring2; } .hr3::after { animation-name: h-ring3; }
  .hf.a1 { animation-name: h-fa1; } .hf.a2 { animation-name: h-fa2; } .hf.a3 { animation-name: h-fa3; }
  .hf.b1 { animation-name: h-fb1; } .hf.b2 { animation-name: h-fb2; } .hf.b3 { animation-name: h-fb3; }
  .hr1 .hs-c.a { animation-name: h-ca1; } .hr2 .hs-c.a { animation-name: h-ca2; } .hr3 .hs-c.a { animation-name: h-ca3; }
  .hr1 .hs-c.b { animation-name: h-cb1; } .hr2 .hs-c.b { animation-name: h-cb2; } .hr3 .hs-c.b { animation-name: h-cb3; }
  .hr1 .a .badge-info { animation-name: h-sa1; } .hr2 .a .badge-info { animation-name: h-sa2; } .hr3 .a .badge-info { animation-name: h-sa3; }
  .hr1 .b .badge-info { animation-name: h-sb1; } .hr2 .b .badge-info { animation-name: h-sb2; } .hr3 .b .badge-info { animation-name: h-sb3; }
  .hr1 .a .badge-ok { animation-name: h-pa1; } .hr2 .a .badge-ok { animation-name: h-pa2; } .hr3 .a .badge-ok { animation-name: h-pa3; }
  .hr1 .b .badge-ok { animation-name: h-pb1; } .hr2 .b .badge-ok { animation-name: h-pb2; } .hr3 .b .badge-ok { animation-name: h-pb3; }

  /* A (12 с): 0,2–3,9 нова партія падає в поле (у картках — попередні пости), 4,2–4,9 старі пости йдуть, 4,9–8,2
     файли по одному лягають у картки, 8,6–10 обкладинка злипається з відео; кінець циклу = початок: 11,96–11,98
     копія `.sa-old` проявляється над тим самим кадром і лише потім 11,98–12 згасає нова партія (без просвіту фону) */
  .sa-old.q1 { animation-name: a-old1; } .sa-old.q2 { animation-name: a-old2; } .sa-old.q3 { animation-name: a-old3; }
  .sa-old.q4 { animation-name: a-old4; }
  .sf1 { animation-name: a-f1; } .sf2 { animation-name: a-f2; } .sf3 { animation-name: a-f3; } .sf4 { animation-name: a-f4; }
  .sf5 { animation-name: a-f5; }
  .sa-card.q1:not(.sa-old) { animation-name: a-c1; } .sa-card.q2:not(.sa-old) { animation-name: a-c2; }
  .sa-card.q3:not(.sa-old) { animation-name: a-c3; } .sa-card.q4:not(.sa-old) { animation-name: a-c4; }
  .sa-card.q4:not(.sa-old) .sa-chip { animation-name: a-chip; }
  .tag.tg4 { animation-name: a-g4; } .tag.tg5 { animation-name: a-g5; }
  .sa-ring { animation-name: a-ring; }
  .sa-pl { animation-name: a-play; }
  /* картки — завжди окремі шари: нова партія й копія `.sa-old` растеризуються однаково (без зсуву рядків на 1 піксель
     пристрою на межі циклу) */
  .dz-a .sa-card { will-change: transform, opacity; }

  /* B (12 с): 0–3,1 копії тексту у вкладки, 3,9–4,7 X задовгий, 4,8–6,2 кнопка ШІ й натискання, 6,2–6,45 стара X
     зникає, 6,5 частина 1/2, 7,1–7,7 картки нижчають (clip-path), 7,7–8,1 частина 2/2; 11,2–11,5 картки згасають, лише потім
     11,55–11,85 повертаються порожні вкладки (жодного перехресного згасання в різних місцях) */
  .sb-tab.t1 { animation-name: b-tab1; } .sb-tab.t2 { animation-name: b-tab2; } .sb-tab.t3 { animation-name: b-tab3; }
  .sb-cp.p1 { animation-name: b-cp1; } .sb-cp.p2 { animation-name: b-cp2; } .sb-cp.p3 { animation-name: b-cp3; }
  .sb-fill.t1 { animation-name: b-f1; } .sb-fill.t2 { animation-name: b-f2; } .sb-fill.t3 { animation-name: b-f3; }
  .sb-fill.t1 .bo, .sb-fill.t2 .bo, .x1 .bo { animation-name: b-clo; }
  .sb-fill.t1 .bi, .sb-fill.t2 .bi, .x1 .bi { animation-name: b-cli; }
  .sb-fill.t1 .ln, .sb-fill.t2 .ln, .x1 .ln { animation-name: b-ln; }
  .sb-fill.t3 .ln { animation-name: b-ln3; }
  .sb-fill.t3 .cnt { animation-name: b-warn; }
  .sb-ai { animation-name: b-ai; }
  .sb-ai::after { animation-name: b-glow; }
  .sb-part.x1 { animation-name: b-x1; } .sb-part.x2 { animation-name: b-x2; }

  /* C (12 с): 0–3,5 погодження в Telegram, 3,5–6,6 пости по одному в слоти, 6,6–11 лінія «зараз» — пости вилітають:
     Пн → 1-ша мережа ряду, Вт → 2-га, Ср → 3-тя, Чт → копії в усі одразу, на значку ✓ */
  .dz-c .pg-lbl .c1 { animation-name: c-pg-c1; } .dz-c .pg-lbl .c2 { animation-name: c-pg-c2; }
  .dz-c .pg-lbl .c3 { animation-name: c-pg-c3; }
  .dz-c .pg-bar .c1 b { animation-name: c-pg-b1; } .dz-c .pg-bar .c2 b { animation-name: c-pg-b2; }
  .dz-c .pg-bar .c3 b { animation-name: c-pg-b3; }
  .sc-p0 { animation-name: c-p0; }
  .sc-btn { animation-name: c-btn; }
  .sc-ok { animation-name: c-ok; }
  .sc-now { animation-name: c-now; }
  .sc-p.d1 { animation-name: c-p1; } .sc-p.d2 { animation-name: c-p2; } .sc-p.d3 { animation-name: c-p3; }
  .sc-p.d4 { animation-name: c-p4; }
  .sc-k.d1 { animation-name: c-k1; } .sc-k.d2 { animation-name: c-k2; } .sc-k.d3 { animation-name: c-k3; }
  .sc-k.d4 { animation-name: c-k4; }
  .sc-cp.cp1 { animation-name: c-cp1; } .sc-cp.cp2 { animation-name: c-cp2; } .sc-cp.cp3 { animation-name: c-cp3; }
  .sc-cp.cp4 { animation-name: c-cp4; }
  .sc-nets li:nth-child(1) .ok { animation-name: c-ok1; } .sc-nets li:nth-child(2) .ok { animation-name: c-ok2; }
  .sc-nets li:nth-child(3) .ok { animation-name: c-ok3; } .sc-nets li:nth-child(n + 4) .ok { animation-name: c-ok4; }
  .sc-nets li:nth-child(1) .net { animation-name: c-net1; } .sc-nets li:nth-child(2) .net { animation-name: c-net2; }
  .sc-nets li:nth-child(3) .net { animation-name: c-net3; } .sc-nets li:nth-child(n + 4) .net { animation-name: c-net4; }

  /* сцени рухаються, лише коли motion.js поставив `run` (без JS — кінцевий кадр, як і з reduced-motion) */
  .vis:not(.run) .dz *, .vis:not(.run) .dz *::before, .vis:not(.run) .dz *::after { animation-name: none; }

  [data-live].idle, [data-live].idle * { animation-play-state: paused; }
  [data-live].idle *::before, [data-live].idle *::after { animation-play-state: paused; }

  @media (hover: hover) {
    .btn { transition: transform 0.2s ease, filter 0.2s ease, border-color 0.2s ease; }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0) scale(0.98); }
    .card { position: relative; transition: transform 0.25s ease; }
    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: var(--shadow);
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }
    .card:hover { transform: translateY(-4px); }
    .card:hover::after { opacity: 0.6; }
    .card .ic svg { transition: transform 0.25s ease; }
    .card:hover .ic svg { transform: scale(1.12); }
    .pill { transition: transform 0.2s ease; }
    .pill:hover { transform: translateY(-2px); }
    .end-points li { transition: transform 0.25s ease; }
    .end-points li:hover { transform: translateX(4px); }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wave {
  0%, 8%, 100% { transform: none; }
  4% { transform: translateY(-4px); }
}
/* Сцени DEC-358 — згенеровано з таймлайнів у секундах (часи етапів — коментарі в блоці анімацій вище): h-* герой
   (24 с), a-* «Десятки файлів», b-* «Один текст», c-* «Погодження й розклад» (по 12 с). */
@keyframes h-pg-c1 { 0%, 12.71% { opacity: 1; } 13.33%, 49.46% { opacity: 0; } 50%, 62.71% { opacity: 1; } 63.33%, 99.46% { opacity: 0; } 100% { opacity: 1; } }
@keyframes h-pg-c2 { 0%, 13.33% { opacity: 0; } 13.96%, 26.88% { opacity: 1; } 27.5%, 63.33% { opacity: 0; } 63.96%, 76.88% { opacity: 1; } 77.5%, 100% { opacity: 0; } }
@keyframes h-pg-c3 { 0%, 27.5% { opacity: 0; } 28.12%, 48.96% { opacity: 1; } 49.46%, 77.5% { opacity: 0; } 78.12%, 98.96% { opacity: 1; } 99.46%, 100% { opacity: 0; } }
@keyframes h-pg-b1 { 0% { transform: scaleX(0); animation-timing-function: linear; } 13.33%, 48.96% { transform: none; } 49.79% { transform: scaleX(0); } 50% { transform: scaleX(0); animation-timing-function: linear; } 63.33%, 98.96% { transform: none; } 99.79%, 100% { transform: scaleX(0); } }
@keyframes h-pg-b2 { 0% { transform: scaleX(0); } 13.33% { transform: scaleX(0); animation-timing-function: linear; } 27.5%, 48.96% { transform: none; } 49.79% { transform: scaleX(0); } 63.33% { transform: scaleX(0); animation-timing-function: linear; } 77.5%, 98.96% { transform: none; } 99.79%, 100% { transform: scaleX(0); } }
@keyframes h-pg-b3 { 0% { transform: scaleX(0); } 27.5% { transform: scaleX(0); animation-timing-function: linear; } 48.33%, 48.96% { transform: none; } 49.79% { transform: scaleX(0); } 77.5% { transform: scaleX(0); animation-timing-function: linear; } 98.33%, 98.96% { transform: none; } 99.79%, 100% { transform: scaleX(0); } }
@keyframes h-drop { 0%, 27.5% { opacity: 1; } 28.96%, 47.71% { opacity: 0; } 49.38%, 77.5% { opacity: 1; } 78.96%, 97.71% { opacity: 0; } 99.37%, 100% { opacity: 1; } }
@keyframes h-out { 0%, 28.12% { opacity: 0; } 29.58%, 47.5% { opacity: 1; } 48.96%, 78.12% { opacity: 0; } 79.58%, 97.5% { opacity: 1; } 98.96%, 100% { opacity: 0; } }
@keyframes h-ok { 0%, 35.42% { transform: scale(0); } 36.25% { transform: scale(1.2); } 36.88%, 49.17% { transform: none; } 49.38%, 85.42% { transform: scale(0); } 86.25% { transform: scale(1.2); } 86.88%, 99.17% { transform: none; } 99.38%, 100% { transform: scale(0); } }
@keyframes h-net { 0%, 35.42% { transform: none; } 36.12% { transform: scale(1.12); } 36.88%, 40.83% { transform: none; } 41.54% { transform: scale(1.12); } 42.29%, 46.25% { transform: none; } 46.96% { transform: scale(1.12); } 47.71%, 85.42% { transform: none; } 86.12% { transform: scale(1.12); } 86.88%, 90.83% { transform: none; } 91.54% { transform: scale(1.12); } 92.29%, 96.25% { transform: none; } 96.96% { transform: scale(1.12); } 97.71%, 100% { transform: none; } }
@keyframes h-ring1 { 0%, 30.21% { opacity: 0; } 31.25%, 32.71% { opacity: 1; } 33.75%, 80.21% { opacity: 0; } 81.25%, 82.71% { opacity: 1; } 83.75%, 100% { opacity: 0; } }
@keyframes h-cp1 { 0% { opacity: 0; transform: scale(0.4); } 31.67% { opacity: 0; transform: translate(calc(-104px - var(--nx) * 1.3), var(--sy)) scale(0.8); } 32.5% { opacity: 1; transform: translate(calc(-104px - var(--nx) * 1.3), calc(var(--sy) - 10px)) scale(1.08); } 35.62% { opacity: 1; transform: scale(0.9); } 36.46% { opacity: 0; transform: scale(0.4); } 81.67% { opacity: 0; transform: translate(calc(-104px - var(--nx) * 1.3), var(--sy)) scale(0.8); } 82.5% { opacity: 1; transform: translate(calc(-104px - var(--nx) * 1.3), calc(var(--sy) - 10px)) scale(1.08); } 85.62% { opacity: 1; transform: scale(0.9); } 86.46%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes h-fa1 { 0% { opacity: 0; transform: scale(0.92); } 1.25% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 44px)); } 3.33%, 14.17% { opacity: 1; transform: translate(var(--px), var(--py)); } 17.08% { opacity: 1; transform: scale(0.92); } 17.71%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes h-ca1 { 0% { opacity: 0; transform: translateX(18px); } 16.88% { opacity: 0; transform: translateX(-14px); } 18.12%, 65.62% { opacity: 1; transform: none; } 66.88%, 100% { opacity: 0; transform: translateX(18px); } }
@keyframes h-sa1 { 0%, 31.67% { opacity: 1; transform: none; } 32.71%, 67.29% { opacity: 0; transform: translateY(-6px); } 67.71%, 100% { opacity: 1; transform: none; } }
@keyframes h-pa1 { 0%, 31.67% { opacity: 0; transform: translateY(6px); } 32.71%, 67.29% { opacity: 1; transform: none; } 67.71%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes h-fb1 { 0% { opacity: 0; transform: scale(0.92); } 51.25% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 44px)); } 53.33%, 64.17% { opacity: 1; transform: translate(var(--px), var(--py)); } 67.08% { opacity: 1; transform: scale(0.92); } 67.71%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes h-cb1 { 0%, 15.62% { opacity: 1; transform: none; } 16.88% { opacity: 0; transform: translateX(18px); } 66.88% { opacity: 0; transform: translateX(-14px); } 68.12%, 100% { opacity: 1; transform: none; } }
@keyframes h-sb1 { 0%, 17.29% { opacity: 0; transform: translateY(-6px); } 17.71%, 81.67% { opacity: 1; transform: none; } 82.71%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes h-pb1 { 0%, 17.29% { opacity: 1; transform: none; } 17.71%, 81.67% { opacity: 0; transform: translateY(6px); } 82.71%, 100% { opacity: 1; transform: none; } }
@keyframes h-ring2 { 0%, 35.62% { opacity: 0; } 36.67%, 38.12% { opacity: 1; } 39.17%, 85.62% { opacity: 0; } 86.67%, 88.13% { opacity: 1; } 89.17%, 100% { opacity: 0; } }
@keyframes h-cp2 { 0% { opacity: 0; transform: scale(0.4); } 37.08% { opacity: 0; transform: translate(calc(-104px - var(--nx) * 1.3), var(--sy)) scale(0.8); } 37.92% { opacity: 1; transform: translate(calc(-104px - var(--nx) * 1.3), calc(var(--sy) - 10px)) scale(1.08); } 41.04% { opacity: 1; transform: scale(0.9); } 41.87% { opacity: 0; transform: scale(0.4); } 87.08% { opacity: 0; transform: translate(calc(-104px - var(--nx) * 1.3), var(--sy)) scale(0.8); } 87.92% { opacity: 1; transform: translate(calc(-104px - var(--nx) * 1.3), calc(var(--sy) - 10px)) scale(1.08); } 91.04% { opacity: 1; transform: scale(0.9); } 91.88%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes h-fa2 { 0% { opacity: 0; transform: scale(0.92); } 4.17% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 44px)); } 6.25%, 18.33% { opacity: 1; transform: translate(var(--px), var(--py)); } 21.25% { opacity: 1; transform: scale(0.92); } 21.88%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes h-ca2 { 0% { opacity: 0; transform: translateX(18px); } 21.04% { opacity: 0; transform: translateX(-14px); } 22.29%, 69.79% { opacity: 1; transform: none; } 71.04%, 100% { opacity: 0; transform: translateX(18px); } }
@keyframes h-sa2 { 0%, 37.08% { opacity: 1; transform: none; } 38.12%, 71.46% { opacity: 0; transform: translateY(-6px); } 71.88%, 100% { opacity: 1; transform: none; } }
@keyframes h-pa2 { 0%, 37.08% { opacity: 0; transform: translateY(6px); } 38.12%, 71.46% { opacity: 1; transform: none; } 71.88%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes h-fb2 { 0% { opacity: 0; transform: scale(0.92); } 54.17% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 44px)); } 56.25%, 68.33% { opacity: 1; transform: translate(var(--px), var(--py)); } 71.25% { opacity: 1; transform: scale(0.92); } 71.87%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes h-cb2 { 0%, 19.79% { opacity: 1; transform: none; } 21.04% { opacity: 0; transform: translateX(18px); } 71.04% { opacity: 0; transform: translateX(-14px); } 72.29%, 100% { opacity: 1; transform: none; } }
@keyframes h-sb2 { 0%, 21.46% { opacity: 0; transform: translateY(-6px); } 21.88%, 87.08% { opacity: 1; transform: none; } 88.13%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes h-pb2 { 0%, 21.46% { opacity: 1; transform: none; } 21.88%, 87.08% { opacity: 0; transform: translateY(6px); } 88.13%, 100% { opacity: 1; transform: none; } }
@keyframes h-ring3 { 0%, 41.04% { opacity: 0; } 42.08%, 43.54% { opacity: 1; } 44.58%, 91.04% { opacity: 0; } 92.08%, 93.54% { opacity: 1; } 94.58%, 100% { opacity: 0; } }
@keyframes h-cp3 { 0% { opacity: 0; transform: scale(0.4); } 42.5% { opacity: 0; transform: translate(calc(-104px - var(--nx) * 1.3), var(--sy)) scale(0.8); } 43.33% { opacity: 1; transform: translate(calc(-104px - var(--nx) * 1.3), calc(var(--sy) - 10px)) scale(1.08); } 46.46% { opacity: 1; transform: scale(0.9); } 47.29% { opacity: 0; transform: scale(0.4); } 92.5% { opacity: 0; transform: translate(calc(-104px - var(--nx) * 1.3), var(--sy)) scale(0.8); } 93.33% { opacity: 1; transform: translate(calc(-104px - var(--nx) * 1.3), calc(var(--sy) - 10px)) scale(1.08); } 96.46% { opacity: 1; transform: scale(0.9); } 97.29%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes h-fa3 { 0% { opacity: 0; transform: scale(0.92); } 7.08% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 44px)); } 9.17%, 22.5% { opacity: 1; transform: translate(var(--px), var(--py)); } 25.42% { opacity: 1; transform: scale(0.92); } 26.04%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes h-ca3 { 0% { opacity: 0; transform: translateX(18px); } 25.21% { opacity: 0; transform: translateX(-14px); } 26.46%, 73.96% { opacity: 1; transform: none; } 75.21%, 100% { opacity: 0; transform: translateX(18px); } }
@keyframes h-sa3 { 0%, 42.5% { opacity: 1; transform: none; } 43.54%, 75.62% { opacity: 0; transform: translateY(-6px); } 76.04%, 100% { opacity: 1; transform: none; } }
@keyframes h-pa3 { 0%, 42.5% { opacity: 0; transform: translateY(6px); } 43.54%, 75.62% { opacity: 1; transform: none; } 76.04%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes h-fb3 { 0% { opacity: 0; transform: scale(0.92); } 57.08% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 44px)); } 59.17%, 72.5% { opacity: 1; transform: translate(var(--px), var(--py)); } 75.42% { opacity: 1; transform: scale(0.92); } 76.04%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes h-cb3 { 0%, 23.96% { opacity: 1; transform: none; } 25.21% { opacity: 0; transform: translateX(18px); } 75.21% { opacity: 0; transform: translateX(-14px); } 76.46%, 100% { opacity: 1; transform: none; } }
@keyframes h-sb3 { 0%, 25.63% { opacity: 0; transform: translateY(-6px); } 26.04%, 92.5% { opacity: 1; transform: none; } 93.54%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes h-pb3 { 0%, 25.63% { opacity: 1; transform: none; } 26.04%, 92.5% { opacity: 0; transform: translateY(6px); } 93.54%, 100% { opacity: 1; transform: none; } }
@keyframes a-old1 { 0%, 35% { opacity: 1; transform: none; } 37.92% { opacity: 0; transform: translateX(22px); } 99.67% { opacity: 0; transform: none; } 99.83%, 100% { opacity: 1; transform: none; } }
@keyframes a-f1 { 0%, 1.67% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)) rotate(var(--pr)); } 5.83%, 40.83% { opacity: 1; transform: translate(var(--px), var(--py)) rotate(var(--pr)); } 45.83%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)) rotate(var(--pr)); } }
@keyframes a-c1 { 0%, 45% { opacity: 0; transform: scale(0.96); } 47.5%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } }
@keyframes a-old2 { 0%, 36% { opacity: 1; transform: none; } 38.92% { opacity: 0; transform: translateX(22px); } 99.67% { opacity: 0; transform: none; } 99.83%, 100% { opacity: 1; transform: none; } }
@keyframes a-f2 { 0%, 8.33% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)) rotate(var(--pr)); } 12.5%, 48.33% { opacity: 1; transform: translate(var(--px), var(--py)) rotate(var(--pr)); } 53.33%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)) rotate(var(--pr)); } }
@keyframes a-c2 { 0%, 52.5% { opacity: 0; transform: scale(0.96); } 55%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } }
@keyframes a-old3 { 0%, 37% { opacity: 1; transform: none; } 39.92% { opacity: 0; transform: translateX(22px); } 99.67% { opacity: 0; transform: none; } 99.83%, 100% { opacity: 1; transform: none; } }
@keyframes a-f3 { 0%, 15% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)) rotate(var(--pr)); } 19.17%, 55.83% { opacity: 1; transform: translate(var(--px), var(--py)) rotate(var(--pr)); } 60.83%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)) rotate(var(--pr)); } }
@keyframes a-c3 { 0%, 60% { opacity: 0; transform: scale(0.96); } 62.5%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } }
@keyframes a-old4 { 0%, 38% { opacity: 1; transform: none; } 40.92% { opacity: 0; transform: translateX(22px); } 99.67% { opacity: 0; transform: none; } 99.83%, 100% { opacity: 1; transform: none; } }
@keyframes a-f4 { 0%, 21.67% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)) rotate(var(--pr)); } 25.83%, 63.33% { opacity: 1; transform: translate(var(--px), var(--py)) rotate(var(--pr)); } 68.33%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)) rotate(var(--pr)); } }
@keyframes a-c4 { 0%, 67.5% { opacity: 0; transform: scale(0.96); } 70%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.96); } }
@keyframes a-f5 { 0%, 28.33% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)); } 32.5%, 71.67% { opacity: 1; transform: translate(var(--px), var(--py)); } 75% { opacity: 1; transform: translate(10px, -26px) scale(1.06); } 78.33%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--px), calc(var(--py) - 56px)); } }
@keyframes a-g4 { 0%, 24.17% { opacity: 0; } 26.25%, 63.33% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes a-g5 { 0%, 30.83% { opacity: 0; } 32.92%, 72.5% { opacity: 1; } 74.17%, 100% { opacity: 0; } }
@keyframes a-chip { 0%, 79.17% { opacity: 0; transform: translateY(6px); } 82.5%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes a-play { 0%, 78.33% { opacity: 0; transform: scale(0.4); } 80.83%, 99.83% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.4); } }
@keyframes a-ring { 0% { opacity: 0; transform: scale(1.05); } 77.92% { opacity: 0; transform: scale(0.97); } 79.58% { opacity: 1; transform: none; } 84.17%, 100% { opacity: 0; transform: scale(1.05); } }
@keyframes b-cp1 { 0% { opacity: 0; transform: scale(0.5); } 0.42% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.7); } 2.08% { opacity: 1; transform: translate(var(--px), var(--py)) scale(1.05); } 7.92% { opacity: 1; transform: scale(0.9); } 9.17%, 100% { opacity: 0; transform: scale(0.5); } }
@keyframes b-cp2 { 0% { opacity: 0; transform: scale(0.5); } 8.75% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.7); } 10.42% { opacity: 1; transform: translate(var(--px), var(--py)) scale(1.05); } 16.25% { opacity: 1; transform: scale(0.9); } 17.5%, 100% { opacity: 0; transform: scale(0.5); } }
@keyframes b-cp3 { 0% { opacity: 0; transform: scale(0.5); } 17.08% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.7); } 18.75% { opacity: 1; transform: translate(var(--px), var(--py)) scale(1.05); } 24.58% { opacity: 1; transform: scale(0.9); } 25.83%, 100% { opacity: 0; transform: scale(0.5); } }
@keyframes b-tab1 { 0%, 6.08% { opacity: 1; } 7.33%, 96.25% { opacity: 0; } 98.75%, 100% { opacity: 1; } }
@keyframes b-tab2 { 0%, 14.42% { opacity: 1; } 15.67%, 96.25% { opacity: 0; } 98.75%, 100% { opacity: 1; } }
@keyframes b-tab3 { 0%, 22.75% { opacity: 1; } 24%, 96.25% { opacity: 0; } 98.75%, 100% { opacity: 1; } }
@keyframes b-f1 { 0%, 7.5% { opacity: 0; transform: none; } 9.58%, 59.17% { opacity: 1; transform: none; } 64.17%, 93.33% { opacity: 1; transform: translateY(24px); } 95.83% { opacity: 0; transform: translateY(24px); } 96.25%, 100% { opacity: 0; transform: none; } }
@keyframes b-f2 { 0%, 15.83% { opacity: 0; transform: none; } 17.92%, 59.17% { opacity: 1; transform: none; } 64.17%, 93.33% { opacity: 1; transform: translateY(-14px); } 95.83% { opacity: 0; transform: translateY(-14px); } 96.25%, 100% { opacity: 0; transform: none; } }
@keyframes b-f3 { 0%, 24.17% { opacity: 0; } 26.25%, 51.67% { opacity: 1; } 53.75%, 100% { opacity: 0; } }
@keyframes b-clo { 0%, 59.17% { clip-path: inset(0 0 0 0 round 14px); } 64.17%, 95.83% { clip-path: inset(0 0 38px 0 round 14px); } 96.25%, 100% { clip-path: inset(0 0 0 0 round 14px); } }
@keyframes b-cli { 0%, 59.17% { clip-path: inset(0 0 0 0 round 12.5px); } 64.17%, 95.83% { clip-path: inset(0 0 38px 0 round 12.5px); } 96.25%, 100% { clip-path: inset(0 0 0 0 round 12.5px); } }
@keyframes b-ln { 0%, 57.5% { opacity: 1; } 59.17%, 95.83% { opacity: 0; } 96.25%, 100% { opacity: 1; } }
@keyframes b-ln3 { 0%, 39.17% { opacity: 1; } 40.83%, 96.25% { opacity: 0; } 96.67%, 100% { opacity: 1; } }
@keyframes b-warn { 0%, 32.5% { transform: none; } 34.17% { transform: scale(1.15); } 35.83% { transform: none; } 37.5% { transform: scale(1.15); } 39.17%, 100% { transform: none; } }
@keyframes b-ai { 0% { opacity: 0; transform: none; } 39.58% { opacity: 0; transform: scale(0.85); } 41.67%, 49.58% { opacity: 1; transform: none; } 50.42% { opacity: 1; transform: scale(0.92); } 51.25%, 51.67% { opacity: 1; transform: none; } 53.33%, 100% { opacity: 0; transform: none; } }
@keyframes b-glow { 0%, 41.67% { opacity: 0; } 43.33% { opacity: 0.9; } 46.25% { opacity: 0; } 47.92% { opacity: 0.9; } 50.42%, 100% { opacity: 0; } }
@keyframes b-x1 { 0%, 54.17% { opacity: 0; transform: none; } 56.25%, 59.17% { opacity: 1; transform: none; } 64.17%, 93.33% { opacity: 1; transform: translateY(-52px); } 95.83% { opacity: 0; transform: translateY(-52px); } 96.25%, 100% { opacity: 0; transform: none; } }
@keyframes b-x2 { 0%, 64.17% { opacity: 0; transform: translateY(10px); } 67.5%, 93.33% { opacity: 1; transform: none; } 95.83% { opacity: 0; transform: none; } 96.25%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes c-pg-c1 { 0%, 27.92% { opacity: 1; } 29.17%, 98.83% { opacity: 0; } 99.92%, 100% { opacity: 1; } }
@keyframes c-pg-c2 { 0%, 29.17% { opacity: 0; } 30.42%, 53.75% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes c-pg-c3 { 0%, 55% { opacity: 0; } 56.25%, 97.83% { opacity: 1; } 98.83%, 100% { opacity: 0; } }
@keyframes c-pg-b1 { 0% { transform: scaleX(0); animation-timing-function: linear; } 29.17%, 97.83% { transform: none; } 99.5%, 100% { transform: scaleX(0); } }
@keyframes c-pg-b2 { 0% { transform: scaleX(0); } 29.17% { transform: scaleX(0); animation-timing-function: linear; } 55%, 97.83% { transform: none; } 99.5%, 100% { transform: scaleX(0); } }
@keyframes c-pg-b3 { 0% { transform: scaleX(0); } 55% { transform: scaleX(0); animation-timing-function: linear; } 96.58%, 97.83% { transform: none; } 99.5%, 100% { transform: scaleX(0); } }
@keyframes c-p0 { 0%, 2.5% { opacity: 1; transform: translate(-92px, -4px); } 10%, 52.5% { opacity: 1; transform: none; } 54.17% { opacity: 0; transform: scale(0.8); } 95% { opacity: 0; transform: translate(-92px, -4px) scale(0.7); } 98.33%, 100% { opacity: 1; transform: translate(-92px, -4px); } }
@keyframes c-btn { 0%, 15% { opacity: 1; transform: none; } 15.83% { opacity: 1; transform: scale(0.92); } 16.67%, 17.5% { opacity: 1; transform: none; } 19.58%, 94.17% { opacity: 0; transform: none; } 96.67%, 100% { opacity: 1; transform: none; } }
@keyframes c-ok { 0% { opacity: 0; transform: none; } 17.5% { opacity: 0; transform: scale(0.85); } 19.58%, 94.17% { opacity: 1; transform: none; } 96.25%, 100% { opacity: 0; transform: none; } }
@keyframes c-now { 0% { opacity: 0; transform: translateX(384px); } 53.75% { opacity: 0; transform: none; } 55% { opacity: 1; transform: none; animation-timing-function: linear; } 90% { opacity: 1; transform: translateX(384px); } 91.67%, 100% { opacity: 0; transform: translateX(384px); } }
@keyframes c-p1 { 0% { opacity: 0; transform: translateY(8px) scale(0.9); } 30.83% { opacity: 0; transform: translate(66px, -117px) scale(0.8); } 32.08% { opacity: 1; transform: translate(66px, -117px) scale(0.9); } 35.42%, 59.79% { opacity: 1; transform: none; } 60.79%, 100% { opacity: 0; transform: translateY(8px) scale(0.9); } }
@keyframes c-cp1 { 0% { opacity: 0; transform: scale(0.4); } 59.79% { opacity: 0; transform: translate(calc(var(--cx) - 200px - var(--nx)), -77px); } 60.62% { opacity: 1; transform: translate(calc(var(--cx) - 200px - var(--nx)), -77px); } 64.79% { opacity: 1; transform: scale(0.8); } 66.04%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes c-k1 { 0%, 33.75% { opacity: 1; transform: none; } 35.42%, 61.04% { opacity: 0; transform: scale(0.5); } 62.71% { opacity: 1; transform: scale(1.15); } 63.54%, 100% { opacity: 1; transform: none; } }
@keyframes c-p2 { 0% { opacity: 0; transform: translateY(8px) scale(0.9); } 36.67% { opacity: 0; transform: translate(-30px, -117px) scale(0.8); } 37.92% { opacity: 1; transform: translate(-30px, -117px) scale(0.9); } 41.25%, 68.54% { opacity: 1; transform: none; } 69.54%, 100% { opacity: 0; transform: translateY(8px) scale(0.9); } }
@keyframes c-cp2 { 0% { opacity: 0; transform: scale(0.4); } 68.54% { opacity: 0; transform: translate(calc(var(--cx) - 200px - var(--nx)), -77px); } 69.38% { opacity: 1; transform: translate(calc(var(--cx) - 200px - var(--nx)), -77px); } 73.54% { opacity: 1; transform: scale(0.8); } 74.79%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes c-k2 { 0%, 39.58% { opacity: 1; transform: none; } 41.25%, 69.79% { opacity: 0; transform: scale(0.5); } 71.46% { opacity: 1; transform: scale(1.15); } 72.29%, 100% { opacity: 1; transform: none; } }
@keyframes c-p3 { 0% { opacity: 0; transform: translateY(8px) scale(0.9); } 42.5% { opacity: 0; transform: translate(-126px, -117px) scale(0.8); } 43.75% { opacity: 1; transform: translate(-126px, -117px) scale(0.9); } 47.08%, 77.29% { opacity: 1; transform: none; } 78.29%, 100% { opacity: 0; transform: translateY(8px) scale(0.9); } }
@keyframes c-cp3 { 0% { opacity: 0; transform: scale(0.4); } 77.29% { opacity: 0; transform: translate(calc(var(--cx) - 200px - var(--nx)), -77px); } 78.12% { opacity: 1; transform: translate(calc(var(--cx) - 200px - var(--nx)), -77px); } 82.29% { opacity: 1; transform: scale(0.8); } 83.54%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes c-k3 { 0%, 45.42% { opacity: 1; transform: none; } 47.08%, 78.54% { opacity: 0; transform: scale(0.5); } 80.21% { opacity: 1; transform: scale(1.15); } 81.04%, 100% { opacity: 1; transform: none; } }
@keyframes c-p4 { 0% { opacity: 0; transform: translateY(8px) scale(0.9); } 48.33% { opacity: 0; transform: translate(-222px, -117px) scale(0.8); } 49.58% { opacity: 1; transform: translate(-222px, -117px) scale(0.9); } 52.92%, 86.04% { opacity: 1; transform: none; } 87.04%, 100% { opacity: 0; transform: translateY(8px) scale(0.9); } }
@keyframes c-cp4 { 0% { opacity: 0; transform: scale(0.4); } 86.04% { opacity: 0; transform: translate(calc(var(--cx) - 200px - var(--nx)), -77px); } 86.88% { opacity: 1; transform: translate(calc(var(--cx) - 200px - var(--nx)), -77px); } 91.04% { opacity: 1; transform: scale(0.8); } 92.29%, 100% { opacity: 0; transform: scale(0.4); } }
@keyframes c-k4 { 0%, 51.25% { opacity: 1; transform: none; } 52.92%, 87.29% { opacity: 0; transform: scale(0.5); } 88.96% { opacity: 1; transform: scale(1.15); } 89.79%, 100% { opacity: 1; transform: none; } }
@keyframes c-ok1 { 0%, 64.62% { transform: scale(0); } 65.79% { transform: scale(1.2); } 66.87%, 69.79% { transform: none; } 71.46%, 90.88% { transform: scale(0); } 92.04% { transform: scale(1.2); } 93.12%, 96.04% { transform: none; } 97.71%, 100% { transform: scale(0); } }
@keyframes c-net1 { 0%, 64.38% { transform: none; } 65.62% { transform: scale(1.12); } 67.12%, 90.62% { transform: none; } 91.88% { transform: scale(1.12); } 93.38%, 100% { transform: none; } }
@keyframes c-ok2 { 0%, 73.38% { transform: scale(0); } 74.54% { transform: scale(1.2); } 75.63%, 78.54% { transform: none; } 80.21%, 90.88% { transform: scale(0); } 92.04% { transform: scale(1.2); } 93.12%, 96.04% { transform: none; } 97.71%, 100% { transform: scale(0); } }
@keyframes c-net2 { 0%, 73.12% { transform: none; } 74.38% { transform: scale(1.12); } 75.88%, 90.62% { transform: none; } 91.88% { transform: scale(1.12); } 93.38%, 100% { transform: none; } }
@keyframes c-ok3 { 0%, 82.12% { transform: scale(0); } 83.29% { transform: scale(1.2); } 84.38%, 87.29% { transform: none; } 88.96%, 90.88% { transform: scale(0); } 92.04% { transform: scale(1.2); } 93.12%, 96.04% { transform: none; } 97.71%, 100% { transform: scale(0); } }
@keyframes c-net3 { 0%, 81.88% { transform: none; } 83.12% { transform: scale(1.12); } 84.62%, 90.62% { transform: none; } 91.88% { transform: scale(1.12); } 93.38%, 100% { transform: none; } }
@keyframes c-ok4 { 0%, 90.88% { transform: scale(0); } 92.04% { transform: scale(1.2); } 93.12%, 96.04% { transform: none; } 97.71%, 100% { transform: scale(0); } }
@keyframes c-net4 { 0%, 90.62% { transform: none; } 91.88% { transform: scale(1.12); } 93.38%, 100% { transform: none; } }
@media print { .rv { opacity: 1; animation: none; } }