/* ==========================================================================
   MEDIA BOX — ЭКРАНЫ-ЗАГЛУШКИ ВНУТРИ ТЕЛЕФОНОВ (screens.css)
   --------------------------------------------------------------------------
   Пара к assets/js/components/MockScreen.js (MB.MockScreen.create).
   Это анимированные «экраны приложений», которые видны в телефонах,
   пока заказчик не прислал настоящие записи экрана. Когда у телефона
   появится видео (devices.js → video), заглушка остаётся под ним как
   запасной экран: пока видео играет, она скрыта и стоит на паузе
   (hero.css, .device[data-video="playing"]), а если видео не загрузится —
   снова оживает. Если задан постер, заглушка создаётся только при ошибке
   загрузки постера.

   Устройство:
     .mock                    — корень: занимает весь экран телефона
                                (position:absolute; inset:0) и является
                                контейнером (container-type: inline-size).
       .mock__screen          — колонка: статус-бар → шапка → содержимое
         .mock__status        — время и значки (нет в варианте mini)
         .mock__bar           — значок платформы, заголовок, бейдж «авто»
         .mock__body.{mf|mw|mc|mu|mp|mt|ma|ms} — само действие
     У реалистичного экрана (.mock--real, раздел 13) шапки нет:
       .mock__status (поверх приложения) + .mock__body.mr
     Телефоны — Android: под экраном панель .mock__nav (◁ ○ □), у корня
     класс .mock--nav (у прежнего варианта mini панели нет).

   Модификаторы корня:
     .mock--{действие}        — scroll-feed, watch, comment, upload,
                                publish, traffic, accounts, stats,
                                home, feed-cycle, upload-cycle, profile-cycle
     .mock--p-{платформа}     — telegram, instagram, tiktok, youtube, mediabox
     .mock--real              — «как настоящий телефон» (раздел 13)
     .mock--mini              — упрощённый вариант для «Как работает»
     .mock--static            — без анимации (статичный кадр)

   Правила:
     • ВСЕ размеры внутри — в cqw (1cqw = 1% ширины экрана телефона),
       поэтому экран одинаково выглядит при ширине и 60px, и 400px.
     • Анимируются только transform и opacity, циклы 4–8 секунд.
     • --mock-offset — отрицательная задержка (например, -2.4s). Hero
       ставит её каждому телефону, чтобы 15 экранов не двигались синхронно.
     • Предок с классом .is-paused ставит все анимации на паузу.
     • prefers-reduced-motion и [data-motion="reduced"] → статичный кадр.
       Базовые (не анимированные) стили каждого элемента и есть этот
       «осмысленный» кадр: загрузка завершена, комментарий отправлен и т.п.
   ========================================================================== */


/* ==========================================================================
   1. КОРЕНЬ И ТОКЕНЫ ПЛАТФОРМ
   ========================================================================== */

.mock {
  /* Палитра по умолчанию — наш собственный интерфейс Media Box */
  --m-bg: #0a0f1d;
  --m-surface: #131b31;
  --m-surface-2: #1b2440;
  --m-field: #10182c;
  --m-text: #e9edf7;
  --m-muted: #8f98ad;
  --m-skel: rgba(233, 237, 247, .16);     /* «строки текста»-заглушки */
  --m-skel-2: rgba(233, 237, 247, .08);
  --m-line: rgba(255, 255, 255, .07);     /* тонкие разделители */
  --m-accent: #38d9ff;
  --m-accent-2: #7b5cff;
  --m-on-accent: #06101f;                 /* текст на акцентной кнопке */
  --m-soft: rgba(56, 217, 255, .12);      /* мягкая подсветка акцентом */
  --m-soft-line: rgba(56, 217, 255, .38);
  --m-ok: #34e0a1;                        /* успех / «онлайн» */
  --m-like: #ff4d6d;
  --m-grad: linear-gradient(135deg, #38d9ff 0%, #7b5cff 100%);
  /* Три абстрактные «картинки» для превью постов и видео */
  --m-g1: linear-gradient(155deg, #16305f 0%, #2c8fd6 48%, #7b5cff 100%);
  --m-g2: linear-gradient(210deg, #2a1a5c 0%, #7b5cff 45%, #e56bd0 100%);
  --m-g3: linear-gradient(170deg, #0c3a44 0%, #1fb6a6 50%, #38d9ff 100%);
  --m-glyph-bg: linear-gradient(135deg, #38d9ff 0%, #7b5cff 100%);
  --m-glyph-fg: #06101f;

  /* Сдвиг фазы анимаций (задаёт Hero или options.offset) */
  --mo: var(--mock-offset, 0s);

  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
  contain: layout paint style;
  border-radius: inherit;
  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--font, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
  text-align: left;
  pointer-events: none;          /* клики проходят к ссылке-телефону */
  user-select: none;
  -webkit-user-select: none;
}

/* Telegram: тёмно-синий интерфейс, голубой акцент */
.mock--p-telegram {
  --m-bg: #0e1621;
  --m-surface: #182533;
  --m-surface-2: #22303f;
  --m-field: #17212b;
  --m-text: #f1f5f9;
  --m-muted: #7f91a4;
  --m-accent: #2aabee;
  --m-accent-2: #6ec6f5;
  --m-on-accent: #ffffff;
  --m-soft: rgba(42, 171, 238, .14);
  --m-soft-line: rgba(42, 171, 238, .42);
  --m-grad: linear-gradient(135deg, #37b6f5 0%, #1f8fd1 100%);
  --m-g1: linear-gradient(160deg, #123a5c 0%, #2aabee 60%, #9fe0ff 100%);
  --m-g2: linear-gradient(200deg, #1d2d6b 0%, #4a7bff 55%, #7fd3ff 100%);
  --m-g3: linear-gradient(170deg, #0f3947 0%, #23a6a0 55%, #8be8d4 100%);
  --m-glyph-bg: #2aabee;
  --m-glyph-fg: #ffffff;
}

/* Instagram: чёрный фон, тёплый градиент */
.mock--p-instagram {
  --m-bg: #000000;
  --m-surface: #121212;
  --m-surface-2: #262626;
  --m-field: #1a1a1a;
  --m-text: #f5f5f5;
  --m-muted: #a8a8a8;
  --m-accent: #e1306c;
  --m-accent-2: #f77737;
  --m-on-accent: #ffffff;
  --m-soft: rgba(225, 48, 108, .14);
  --m-soft-line: rgba(225, 48, 108, .42);
  --m-grad: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%);
  --m-g1: linear-gradient(150deg, #f9ce34 0%, #ee2a7b 55%, #6228d7 100%);
  --m-g2: linear-gradient(210deg, #3b1f7a 0%, #c13584 55%, #fd8d32 100%);
  --m-g3: linear-gradient(170deg, #0f2f4f 0%, #405de6 50%, #e1306c 100%);
  --m-glyph-bg: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 52%, #6228d7 100%);
  --m-glyph-fg: #ffffff;
}

/* TikTok: чёрный полноэкранный интерфейс, бирюзово-красные акценты */
.mock--p-tiktok {
  --m-bg: #000000;
  --m-surface: #161616;
  --m-surface-2: #252525;
  --m-field: #1f1f1f;
  --m-text: #f5f5f5;
  --m-muted: #a0a0a8;
  --m-accent: #fe2c55;
  --m-accent-2: #25f4ee;
  --m-on-accent: #ffffff;
  --m-soft: rgba(37, 244, 238, .12);
  --m-soft-line: rgba(37, 244, 238, .4);
  --m-grad: linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%);
  --m-g1: linear-gradient(160deg, #051c2c 0%, #0f6f86 45%, #25f4ee 100%);
  --m-g2: linear-gradient(200deg, #2a0512 0%, #a3163a 50%, #fe2c55 100%);
  --m-g3: linear-gradient(165deg, #12082c 0%, #5a2bd1 45%, #25f4ee 80%, #fe2c55 100%);
  --m-glyph-bg: #111111;
  --m-glyph-fg: #ffffff;
}

/* YouTube: графитовый фон, красный акцент */
.mock--p-youtube {
  --m-bg: #0f0f0f;
  --m-surface: #1f1f1f;
  --m-surface-2: #2c2c2c;
  --m-field: #222222;
  --m-text: #f1f1f1;
  --m-muted: #aaaaaa;
  --m-accent: #ff0033;
  --m-accent-2: #ff6a3d;
  --m-on-accent: #ffffff;
  --m-soft: rgba(255, 0, 51, .13);
  --m-soft-line: rgba(255, 0, 51, .45);
  --m-grad: linear-gradient(135deg, #ff0033 0%, #ff6a3d 100%);
  --m-g1: linear-gradient(160deg, #2b0710 0%, #b3122e 50%, #ff7a45 100%);
  --m-g2: linear-gradient(200deg, #10213f 0%, #2f6fd6 55%, #9ad0ff 100%);
  --m-g3: linear-gradient(170deg, #241036 0%, #7a2d9c 50%, #ff5a7a 100%);
  --m-glyph-bg: #ff0033;
  --m-glyph-fg: #ffffff;
}

/* .mock--p-mediabox использует палитру по умолчанию (см. .mock) */


/* ==========================================================================
   2. КАРКАС ЭКРАНА: статус-бар, шапка, бейдж «авто», содержимое
   ========================================================================== */

.mock__screen {
  /* Шкала шрифтов (в долях ширины экрана) */
  --fs-xs: 4.2cqw;
  --fs-s: 5cqw;
  --fs-m: 6.2cqw;
  --fs-l: 7.8cqw;
  --fs-xl: 11.5cqw;

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-s);
  line-height: 1.25;
  letter-spacing: 0;
}

.mock__screen svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Статус-бар Android: время слева, Wi-Fi / сеть / батарея справа.
       Камера-«точка» корпуса — по центру над ним (её рисует телефон). --- */
.mock__status {
  position: relative;
  z-index: 4;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 9cqw;
  padding: .4cqw 6.2cqw 0 7cqw;
  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 3.9cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Значки справа — одна SVG-картинка (STATUS_ICONS в MockScreen.js) */
.mock__sys {
  display: block;
  width: 11.5cqw;
  height: 3.3cqw;
  opacity: .92;
}

/* --- Нижняя панель Android: «назад», «домой», «последние» (◁ ○ □).
       Экран (.mock__screen) заканчивается над ней. --- */
.mock {
  --sysnav: 8.6cqw;                    /* высота панели навигации */
}

.mock--nav .mock__screen {
  bottom: var(--sysnav);
}

.mock__nav {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sysnav);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(255, 255, 255, .78);
  background: #000;
  pointer-events: none;
}

/* SVG 200 × 12 на всю ширину (высота 6cqw = 100cqw × 12/200): ◁ ○ □ на 25/50/75 % */
.mock__nav svg {
  display: block;
  width: 100%;
  height: 6cqw;
}

/* Наш интерфейс Media Box и Telegram — панель в цвет фона приложения */
.mock--p-mediabox:not(.mock--real) .mock__nav,
.mock--p-telegram:not(.mock--real) .mock__nav {
  color: var(--m-muted);
  background: var(--m-bg);
  border-top: 1px solid var(--m-line);
}

/* Рабочий стол Android: панель прозрачная, под ней видны обои. Экран идёт
   до самого низа, нижний ряд и строка поиска подняты над кнопками,
   у открытого приложения под кнопками — чёрная полоса (рамка снизу:
   содержимое приложения занимает только область над ней). */
.mock--home.mock--nav .mock__screen {
  bottom: 0;
}

.mock--home .mock__nav {
  color: rgba(255, 255, 255, .9);
  background: transparent;
}

/* --- Шапка приложения --- */
.mock__bar {
  position: relative;
  z-index: 4;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  height: 13cqw;
  padding: 0 4cqw;
  border-bottom: 1px solid var(--m-line);
}

/* Круглый значок платформы (простой глиф из MB.icons) */
.mock__glyph {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 7.4cqw;
  height: 7.4cqw;
  padding: 1.5cqw;
  border-radius: 50%;
  color: var(--m-glyph-fg);
  background: var(--m-glyph-bg);
}

/* Наш значок Media Box: скруглённый квадрат с силуэтом телефона */
.mock--p-mediabox .mock__glyph {
  border-radius: 2.2cqw;
  box-shadow: inset 0 .3cqw 0 rgba(255, 255, 255, .4);
}

.mock--p-mediabox .mock__glyph::before {
  content: '';
  width: 2.8cqw;
  height: 4.2cqw;
  border: .55cqw solid var(--m-glyph-fg);
  border-radius: .9cqw;
}

.mock__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-m);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Бейдж «авто» — фирменный знак Media Box: действие выполняет робот.
   Одинаковый на всех платформах, чтобы читался как «это делаем мы». */
.mock__auto {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  height: 6.2cqw;
  padding: 0 2.2cqw 0 1.8cqw;
  border: 1px solid rgba(56, 217, 255, .4);
  border-radius: 999px;
  font-size: 3.8cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  color: #bff2ff;
  background: rgba(10, 30, 48, .72);
}

.mock__auto::before {
  content: '';
  width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 50%;
  background: #34e0a1;
  box-shadow: 0 0 1.6cqw rgba(52, 224, 161, .9);
  animation: mk-pulse 1.6s ease-in-out var(--mo) infinite;
}

/* --- Область действия --- */
.mock__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* --- Касание робота: точка + кольцо (по умолчанию невидимо) --- */
.mock__tap {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 12cqw;
  height: 12cqw;
  margin: -6cqw 0 0 -6cqw;
  border: .7cqw solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 26%, rgba(255, 255, 255, .18) 30% 100%);
  box-shadow: 0 0 3cqw rgba(56, 217, 255, .55);
  opacity: 0;
  pointer-events: none;
}

/* --- Абстрактная «картинка» (превью поста, видео) --- */
.mk-art {
  position: relative;
  overflow: hidden;
  background: var(--m-g1);
}

.mk-art--2 {
  background: var(--m-g2);
}

.mk-art--3 {
  background: var(--m-g3);
}

/* Мягкое «солнце» */
.mk-art::before {
  content: '';
  position: absolute;
  top: 12%;
  right: 12%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 68%);
}

/* «Холм» снизу — даёт ощущение фотографии без реальных изображений */
.mk-art::after {
  content: '';
  position: absolute;
  left: -15%;
  right: 20%;
  bottom: -38%;
  height: 72%;
  border-radius: 50% 50% 0 0;
  background: rgba(0, 0, 0, .26);
}

.mk-art--2::after {
  left: 25%;
  right: -20%;
}

/* --- Числовые «барабаны»: значения идут столбиком, окно показывает одну
       строку, а transform прокручивает столбик. Без JS-таймеров. --- */
.mk-roll {
  display: inline-block;
  height: var(--lh);
  line-height: var(--lh);
  overflow: hidden;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

.mk-roll__strip {
  display: block;
  white-space: pre;
}

/* ==========================================================================
   3. SCROLL-FEED — лента постов листается вверх (робот делает свайп)
   --------------------------------------------------------------------------
   В ленте 2 одинаковые группы по 3 поста. Лента сдвигается на 1/6 своей
   высоты за шаг (ровно один пост), после трёх шагов она на -50% —
   это тот же кадр, что и в начале, поэтому цикл бесшовный.
   Все посты одинаковой высоты (одинаковая разметка), отступы — margin
   внутри flex-колонки (не схлопываются, входят в высоту ленты).
   ========================================================================== */

.mf {
  background: var(--m-bg);
}

.mf-track {
  position: absolute;
  top: 3cqw;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  animation: mk-feed 7.5s var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)) var(--mo) infinite both;
}

.mf-post {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  margin: 0 4cqw 4cqw;
  padding: 3.2cqw;
  border: 1px solid var(--m-line);
  border-radius: 4.5cqw;
  background: var(--m-surface);
}

.mf-head {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-s);
  font-weight: 700;
  white-space: nowrap;
}

/* Аватар — абстрактный градиент */
.mf-head::before {
  content: '';
  flex: none;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  background: var(--m-grad);
}

.mf-media {
  aspect-ratio: 16 / 10;
  border-radius: 3cqw;
}

/* Две строки текста-заглушки */
.mf-text {
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
}

.mf-text::before,
.mf-text::after {
  content: '';
  height: 2.2cqw;
  border-radius: 99px;
  background: var(--m-skel);
}

.mf-text::after {
  width: 62%;
  background: var(--m-skel-2);
}

.mf-meta {
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--m-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Media Box: статус задачи зелёным */
.mock--p-mediabox .mf-meta {
  color: var(--m-ok);
}

/* --- Telegram: посты канала — «пузыри» на фоне чата --- */
.mock--p-telegram .mf {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(42, 171, 238, .10), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(94, 110, 200, .12), transparent 60%),
    var(--m-bg);
}

.mock--p-telegram .mf-post {
  gap: 1.8cqw;
  margin-right: 10cqw;
  padding: 1.6cqw 1.6cqw 2.4cqw;
  border: 0;
  border-radius: 4.5cqw 4.5cqw 4.5cqw 1.4cqw;
}

.mock--p-telegram .mf-media {
  order: -1;
  border-radius: 3.2cqw 3.2cqw 1.4cqw 1.4cqw;
}

.mock--p-telegram .mf-head,
.mock--p-telegram .mf-text,
.mock--p-telegram .mf-meta {
  padding: 0 1.6cqw;
}

.mock--p-telegram .mf-head {
  color: var(--m-accent);
}

.mock--p-telegram .mf-head::before {
  display: none;
}

.mock--p-telegram .mf-meta {
  align-self: flex-end;
}

/* --- Instagram: посты во всю ширину, квадратное фото, кольцо у аватара --- */
.mock--p-instagram .mf-post {
  gap: 2.4cqw;
  margin: 0 0 4cqw;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mock--p-instagram .mf-head,
.mock--p-instagram .mf-text,
.mock--p-instagram .mf-meta {
  padding: 0 3.5cqw;
}

.mock--p-instagram .mf-head::before {
  background:
    radial-gradient(circle closest-side, var(--m-surface-2) 0 68%, #000 70% 82%, transparent 84%),
    var(--m-grad);
}

.mock--p-instagram .mf-media {
  aspect-ratio: 1 / 1;
  border-radius: 0;
}

.mock--p-instagram .mf-meta {
  order: 2;
  color: var(--m-text);
  font-weight: 700;
}

.mock--p-instagram .mf-text {
  order: 3;
}

/* --- TikTok: вертикальные видео на весь экран --- */
.mock--p-tiktok .mf-track {
  top: 0;
}

.mock--p-tiktok .mf-post {
  margin: 0 0 1cqw;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
}

.mock--p-tiktok .mf-media {
  aspect-ratio: 9 / 16;
  border-radius: 0;
}

.mock--p-tiktok .mf-head {
  position: absolute;
  left: 4cqw;
  right: 22cqw;
  bottom: 15cqw;
  z-index: 1;
  color: #fff;
}

.mock--p-tiktok .mf-head::before {
  display: none;
}

.mock--p-tiktok .mf-text {
  position: absolute;
  left: 4cqw;
  right: 26cqw;
  bottom: 6cqw;
  z-index: 1;
}

.mock--p-tiktok .mf-text::before {
  background: rgba(255, 255, 255, .55);
}

.mock--p-tiktok .mf-text::after {
  background: rgba(255, 255, 255, .35);
}

/* Колонка кнопок справа: три белых кружка */
.mock--p-tiktok .mf-post::after {
  content: '';
  position: absolute;
  right: 3cqw;
  bottom: 16cqw;
  z-index: 1;
  width: 8cqw;
  height: 34cqw;
  background: radial-gradient(circle, rgba(255, 255, 255, .88) 0 2.6cqw, transparent 2.8cqw) 0 0 / 8cqw 11.4cqw repeat-y;
}

.mock--p-tiktok .mf-meta {
  display: none;
}

/* --- YouTube: превью 16:9 во всю ширину, под ним канал и название --- */
.mock--p-youtube .mf-post {
  gap: 2.2cqw;
  margin: 0 0 4.5cqw;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mock--p-youtube .mf-media {
  order: -1;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.mock--p-youtube .mf-head,
.mock--p-youtube .mf-text,
.mock--p-youtube .mf-meta {
  padding: 0 4cqw;
}

/* Свайп: палец появляется внизу и уходит вверх вместе с лентой.
   Длительность 2.5s = 1/3 цикла ленты, поэтому они всегда синхронны. */
.mf-swipe {
  top: auto;
  bottom: 18cqw;
  left: 62%;
  animation: mk-swipe 2.5s var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)) var(--mo) infinite both;
}

@keyframes mk-feed {
  0%, 24%     { transform: translate3d(0, 0, 0); }
  33.3%, 57.3% { transform: translate3d(0, -16.6667%, 0); }
  66.6%, 90.6% { transform: translate3d(0, -33.3333%, 0); }
  100%        { transform: translate3d(0, -50%, 0); }
}

@keyframes mk-swipe {
  0%, 62% { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
  70%     { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  96%     { opacity: .9; transform: translate3d(0, -46cqw, 0) scale(.9); }
  100%    { opacity: 0; transform: translate3d(0, -50cqw, 0) scale(.8); }
}


/* ==========================================================================
   4. WATCH — вертикальное видео: прогресс, двойной тап, сердечки
   ========================================================================== */

/* Видео на весь экран: статус-бар и шапка лежат поверх него */
.mock--watch .mock__body {
  position: absolute;
  inset: 0;
}

.mock--watch .mock__bar {
  border-bottom: 0;
}

.mock--watch .mock__status,
.mock--watch .mock__bar {
  color: #fff;
}

.mock--watch .mock__title {
  text-shadow: 0 .3cqw 1.2cqw rgba(0, 0, 0, .4);
}

.mw {
  background: #000;
}

/* «Видео» — градиент с медленно плывущими световыми пятнами */
.mw-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--m-g1);
}

.mw-video::before,
.mw-video::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.mw-video::before {
  left: -30cqw;
  top: 40cqw;
  width: 120cqw;
  height: 120cqw;
  background: radial-gradient(circle, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 62%);
  animation: mk-drift 8s ease-in-out var(--mo) infinite alternate both;
}

.mw-video::after {
  right: -45cqw;
  bottom: 10cqw;
  width: 110cqw;
  height: 110cqw;
  background: radial-gradient(circle, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 65%);
  animation: mk-drift-2 6.5s ease-in-out var(--mo) infinite alternate both;
}

/* Затемнения сверху и снизу — чтобы читались подписи */
.mw::before,
.mw::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.mw::before {
  top: 0;
  height: 36cqw;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
}

.mw::after {
  bottom: 0;
  height: 70cqw;
  background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
}

/* Кнопки справа */
.mw-side {
  position: absolute;
  right: 3.4cqw;
  bottom: 24cqw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5cqw;
}

.mw-btn {
  position: relative;
  display: block;
  width: 9.5cqw;
  height: 9.5cqw;
  color: #fff;
  opacity: .95;
}

/* Лайк «включается» красным поверх белого */
.mw-like-on {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--m-like);
  animation: mk-like 6s var(--mo) infinite both;
}

/* Подпись снизу слева */
.mw-info {
  position: absolute;
  left: 4cqw;
  right: 20cqw;
  bottom: 9cqw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2.2cqw;
}

.mw-name {
  overflow: hidden;
  font-size: var(--fs-m);
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mw-cap {
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
}

.mw-cap::before,
.mw-cap::after {
  content: '';
  height: 2.2cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, .55);
}

.mw-cap::after {
  width: 64%;
  background: rgba(255, 255, 255, .32);
}

/* Полоса прогресса просмотра: заполняется через scaleX */
.mw-progress {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: 4cqw;
  z-index: 2;
  height: 1cqw;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .24);
}

.mw-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(.62);
  transform-origin: left center;
  animation: mk-progress 6s linear var(--mo) infinite both;
}

.mock--p-youtube .mw-progress::after,
.mock--p-instagram .mw-progress::after {
  background: var(--m-accent);
}

.mock--p-mediabox .mw-progress::after {
  background: var(--m-grad);
}

/* Сердечки, всплывающие от кнопки лайка */
.mw-heart {
  --d: 0s;
  --x: -6cqw;
  position: absolute;
  right: 5cqw;
  bottom: 60cqw;
  z-index: 2;
  display: block;
  width: 6cqw;
  height: 6cqw;
  color: var(--m-like);
  opacity: 0;
  animation: mk-float 2.4s ease-out calc(var(--mo) + var(--d)) infinite both;
}

.mw-heart--2 {
  --d: .8s;
  --x: -11cqw;
  color: #ffffff;
}

.mw-heart--3 {
  --d: 1.6s;
  --x: -3cqw;
  color: var(--m-accent-2);
}

/* Большое сердце после двойного тапа по центру */
.mw-big {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 3;
  display: block;
  width: 26cqw;
  height: 26cqw;
  margin: -13cqw 0 0 -13cqw;
  color: var(--m-like);
  opacity: 0;
  animation: mk-bigheart 6s var(--mo) infinite both;
}

.mw .mock__tap {
  top: 44%;
  animation: mk-tap-watch 6s var(--mo) infinite both;
}

@keyframes mk-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(22cqw, -26cqw, 0) scale(1.18); }
}

@keyframes mk-drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-18cqw, -30cqw, 0) scale(.95); }
}

@keyframes mk-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes mk-like {
  0%, 31% { opacity: 0; transform: scale(.6); }
  34%     { opacity: 1; transform: scale(1.25); }
  39%     { opacity: 1; transform: scale(1); }
  95%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1); }
}

@keyframes mk-float {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.5); }
  15%  { opacity: 1; transform: translate3d(0, -6cqw, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--x), -46cqw, 0) scale(1.1); }
}

@keyframes mk-bigheart {
  0%, 30% { opacity: 0; transform: scale(.3) rotate(-10deg); }
  34%     { opacity: 1; transform: scale(1.15) rotate(-8deg); }
  39%     { opacity: 1; transform: scale(1) rotate(-8deg); }
  48%     { opacity: 0; transform: translate3d(0, -12cqw, 0) scale(1.05) rotate(-8deg); }
  100%    { opacity: 0; transform: translate3d(0, -12cqw, 0) scale(1.05) rotate(-8deg); }
}

/* Двойной тап */
@keyframes mk-tap-watch {
  0%, 26% { opacity: 0; transform: scale(.6); }
  27.5%   { opacity: 1; transform: scale(.8); }
  29.5%   { opacity: 0; transform: scale(1.5); }
  30.5%   { opacity: 1; transform: scale(.8); }
  33%     { opacity: 0; transform: scale(1.6); }
  100%    { opacity: 0; transform: scale(1.6); }
}

/* ==========================================================================
   5. COMMENT — окно комментариев: текст печатается, нажимается «отправить»,
      новый комментарий появляется сверху списка
   --------------------------------------------------------------------------
   Печать: поверх готового текста лежит «шторка» (.mc-mask) цвета поля,
   она уезжает вправо рывками steps() — буквы открываются по одной.
   Левая кромка шторки — это курсор.
   ========================================================================== */

.mc {
  display: flex;
  flex-direction: column;
  background: var(--m-bg);
}

/* Затемнённое видео/пост над шторкой комментариев */
.mc-post {
  flex: 0 0 34cqw;
  opacity: .55;
}

.mc-sheet {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: -4cqw;
  padding: 2cqw 4cqw 4cqw;
  border-radius: 5cqw 5cqw 0 0;
  background: var(--m-surface);
  box-shadow: 0 -2cqw 6cqw rgba(0, 0, 0, .35);
}

/* «Ручка» шторки */
.mc-sheet::before {
  content: '';
  flex: none;
  align-self: center;
  width: 10cqw;
  height: 1.2cqw;
  margin-bottom: 2.6cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, .2);
}

.mc-head {
  flex: none;
  padding-bottom: 3cqw;
  border-bottom: 1px solid var(--m-line);
  font-size: var(--fs-m);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.mc-count {
  margin-left: 1.2cqw;
  font-weight: 600;
  color: var(--m-muted);
}

.mc-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 3cqw;
  overflow: hidden;
}

/* Один комментарий: аватар + имя + текст. Высота фиксирована (17cqw) —
   на столько же сдвигается список, когда появляется новый. */
.mc-item {
  display: grid;
  grid-template-columns: 8cqw minmax(0, 1fr);
  column-gap: 2.6cqw;
  row-gap: 1.2cqw;
  align-content: start;
  height: 17cqw;
}

.mc-item::before {
  content: '';
  grid-row: 1 / span 2;
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  background: var(--m-g2);
}

.mc-item:nth-child(2)::before {
  background: var(--m-g3);
}

.mc-name {
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--m-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mc-line {
  width: 86%;
  height: 2.2cqw;
  margin-top: .6cqw;
  border-radius: 99px;
  background: var(--m-skel);
}

.mc-item:nth-child(2) .mc-line {
  width: 64%;
}

/* Список старых комментариев (в статичном кадре уже сдвинут вниз) */
.mc-list {
  transform: translate3d(0, 17cqw, 0);
  animation: mk-mc-list 7s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) var(--mo) infinite both;
}

/* Новый комментарий — наш, с фирменным аватаром */
.mc-new {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  animation: mk-mc-new 7s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) var(--mo) infinite both;
}

.mc-new::before {
  background: var(--m-grad);
}

.mc-new .mc-name {
  color: var(--m-text);
}

.mc-msg {
  overflow: hidden;
  font-size: var(--fs-s);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Поле ввода и кнопка отправки */
.mc-input {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding-top: 3cqw;
  border-top: 1px solid var(--m-line);
}

.mc-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 10cqw;
  padding: 0 3.2cqw;
  overflow: hidden;
  border: 1px solid var(--m-line);
  border-radius: 99px;
  background: var(--m-field);
}

/* Подсказка в пустом поле (текст — из data-ph); лежит над шторкой */
.mc-field::before {
  content: attr(data-ph);
  position: absolute;
  z-index: 1;
  left: 3.2cqw;
  right: 3.2cqw;
  top: 50%;
  overflow: hidden;
  font-size: var(--fs-s);
  line-height: 1.2;
  color: var(--m-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  animation: mk-mc-ph 7s linear var(--mo) infinite both;
}

.mc-typed {
  font-size: var(--fs-s);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  animation: mk-mc-typed 7s linear var(--mo) infinite both;
}

/* Шторка, открывающая текст по буквам */
.mc-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3.2cqw;
  right: 0;
  background: var(--m-field);
  animation: mk-mc-mask 7s linear var(--mo) infinite both;
}

/* Курсор — левая кромка шторки */
.mc-mask::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: .6cqw;
  border-radius: 99px;
  background: var(--m-accent);
  animation: mk-blink 1s steps(1, end) var(--mo) infinite;
}

.mc-send {
  flex: none;
  display: block;
  width: 10cqw;
  height: 10cqw;
  padding: 2.4cqw;
  border-radius: 50%;
  color: var(--m-on-accent);
  background: var(--m-accent);
  animation: mk-mc-press 7s var(--mo) infinite both;
}

.mock--p-instagram .mc-send,
.mock--p-mediabox .mc-send {
  background: var(--m-grad);
}

/* Касание кнопки «отправить» */
.mc .mock__tap {
  left: auto;
  top: auto;
  right: 3cqw;
  bottom: 3cqw;
  margin: 0;
  animation: mk-tap-comment 7s var(--mo) infinite both;
}

@keyframes mk-mc-ph {
  0%, 7%   { opacity: 1; }
  8%, 53%  { opacity: 0; }
  57%, 100% { opacity: 1; }
}

@keyframes mk-mc-typed {
  0%, 50%  { opacity: 1; }
  52%, 96% { opacity: 0; }
  98%, 100% { opacity: 1; }
}

/* 8–46%: печать (22 рывка), 54%: шторка возвращается, пока текста нет */
@keyframes mk-mc-mask {
  0%     { transform: translate3d(0, 0, 0); }
  8%     { transform: translate3d(0, 0, 0); animation-timing-function: steps(22, end); }
  46%    { transform: translate3d(100%, 0, 0); }
  53.9%  { transform: translate3d(100%, 0, 0); }
  54%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes mk-mc-press {
  0%, 48% { transform: scale(1); }
  50%     { transform: scale(.86); }
  54%, 100% { transform: scale(1); }
}

@keyframes mk-tap-comment {
  0%, 47% { opacity: 0; transform: scale(.6); }
  49%     { opacity: 1; transform: scale(.8); }
  54%     { opacity: 0; transform: scale(1.5); }
  100%    { opacity: 0; transform: scale(1.5); }
}

@keyframes mk-mc-list {
  0%, 52%  { transform: translate3d(0, 0, 0); }
  60%, 92% { transform: translate3d(0, 17cqw, 0); }
  99%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes mk-mc-new {
  0%, 53%  { opacity: 0; transform: translate3d(0, -4cqw, 0); }
  60%, 91% { opacity: 1; transform: translate3d(0, 0, 0); }
  96%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

@keyframes mk-blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}


/* ==========================================================================
   6. UPLOAD — загрузка видео: прогресс, проценты, галочка «Загружено»
   ========================================================================== */

.mu {
  display: flex;
  flex-direction: column;
  gap: 4cqw;
  padding: 4cqw;
}

.mu-card {
  display: flex;
  flex-direction: column;
  gap: 2.8cqw;
  padding: 3.5cqw;
  border: 1px solid var(--m-line);
  border-radius: 5cqw;
  background: var(--m-surface);
}

.mu-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 3.2cqw;
}

/* Значок «выгрузка» в центре превью — мягко покачивается */
.mu-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 13cqw;
  height: 13cqw;
  padding: 3cqw;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  animation: mk-bob 1.6s ease-in-out var(--mo) infinite both;
}

.mu-file {
  overflow: hidden;
  font-size: var(--fs-s);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mu-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2cqw;
  font-size: var(--fs-xs);
  color: var(--m-muted);
}

/* Проценты — «барабан» из 9 значений (0% … 100%) */
.mu-pct {
  --lh: 7.4cqw;
  font-size: var(--fs-l);
  font-weight: 800;
  color: var(--m-text);
}

.mu-pct .mk-roll__strip {
  transform: translate3d(0, calc(var(--lh) * -8), 0);
  animation: mk-mu-pct 6.5s linear var(--mo) infinite both;
}

.mu-size {
  padding-bottom: .8cqw;
  white-space: nowrap;
}

.mu-bar {
  position: relative;
  height: 1.8cqw;
  overflow: hidden;
  border-radius: 99px;
  background: var(--m-skel-2);
}

/* Заполнение */
.mu-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--m-grad);
  transform-origin: left center;
  animation: mk-mu-fill 6.5s linear var(--mo) infinite both;
}

/* Зелёный слой «готово» поверх заполнения */
.mu-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--m-ok);
  animation: mk-mu-ok 6.5s ease-out var(--mo) infinite both;
}

.mu-state {
  position: relative;
  height: 7cqw;
  font-size: var(--fs-s);
  font-weight: 700;
}

.mu-busy,
.mu-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  white-space: nowrap;
}

.mu-busy {
  color: var(--m-muted);
  opacity: 0;
  animation: mk-mu-busy 6.5s ease-out var(--mo) infinite both;
}

.mu-done {
  color: var(--m-ok);
  transform-origin: left center;
  animation: mk-mu-done 6.5s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) var(--mo) infinite both;
}

.mu-done > svg {
  flex: none;
  width: 5.8cqw;
  height: 5.8cqw;
}

/* Очередь следующих видео */
.mu-queue {
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
}

.mu-qtitle {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

.mu-q {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  padding: 2.4cqw;
  overflow: hidden;
  border: 1px solid var(--m-line);
  border-radius: 3.5cqw;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--m-muted);
  white-space: nowrap;
  background: var(--m-surface);
}

.mu-q::before {
  content: '';
  flex: none;
  width: 9cqw;
  height: 9cqw;
  border-radius: 2cqw;
  background: var(--m-g2);
}

.mu-q + .mu-q::before {
  background: var(--m-g3);
}

@keyframes mk-bob {
  0%, 100% { transform: translate3d(0, .8cqw, 0); }
  50%      { transform: translate3d(0, -.8cqw, 0); }
}

/* 5–70%: загрузка, 74%: «готово», 94%: сброс */
@keyframes mk-mu-fill {
  0%, 5%   { transform: scaleX(0); }
  70%, 93% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

@keyframes mk-mu-ok {
  0%, 70%  { opacity: 0; }
  74%, 89% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

@keyframes mk-mu-pct {
  0%     { transform: translate3d(0, 0, 0); }
  5%     { transform: translate3d(0, 0, 0); animation-timing-function: steps(8, end); }
  70%    { transform: translate3d(0, calc(var(--lh) * -8), 0); }
  93.9%  { transform: translate3d(0, calc(var(--lh) * -8), 0); }
  94%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes mk-mu-busy {
  0%, 69%  { opacity: 1; }
  72%, 93% { opacity: 0; }
  96%, 100% { opacity: 1; }
}

@keyframes mk-mu-done {
  0%, 70%  { opacity: 0; transform: scale(.9); }
  75%, 91% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}


/* ==========================================================================
   7. PUBLISH — черновик поста → нажатие «Опубликовать» → «Опубликовано»
   ========================================================================== */

.mp {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding: 4cqw;
}

.mp-card {
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  padding: 3.2cqw;
  border: 1px solid var(--m-line);
  border-radius: 5cqw;
  background: var(--m-surface);
  animation: mk-mp-card 6s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) var(--mo) infinite both;
}

.mp-media {
  aspect-ratio: 4 / 3;
  border-radius: 3.2cqw;
}

.mp-cap {
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
}

.mp-cap::before,
.mp-cap::after {
  content: '';
  height: 2.2cqw;
  border-radius: 99px;
  background: var(--m-skel);
}

.mp-cap::after {
  width: 70%;
  background: var(--m-skel-2);
}

.mp-tags {
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--m-accent);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mock--p-tiktok .mp-tags {
  color: var(--m-accent-2);
}

/* Настройки публикации */
.mp-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 2.6cqw 3.2cqw;
  overflow: hidden;
  border: 1px solid var(--m-line);
  border-radius: 3.5cqw;
  font-size: var(--fs-xs);
  color: var(--m-muted);
  white-space: nowrap;
  background: var(--m-surface);
}

.mp-opt b {
  font-weight: 700;
  color: var(--m-text);
}

.mp-btn {
  flex: none;
  display: grid;
  place-items: center;
  height: 12cqw;
  margin-top: auto;
  overflow: hidden;
  border-radius: 99px;
  font-size: var(--fs-m);
  font-weight: 800;
  white-space: nowrap;
  color: var(--m-on-accent);
  background: var(--m-grad);
  opacity: .6;
  animation: mk-mp-btn 6s var(--mo) infinite both;
}

/* Уведомление об успехе — выезжает сверху */
.mp-toast {
  position: absolute;
  top: 4cqw;
  left: 7cqw;
  right: 7cqw;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  height: 12cqw;
  padding: 0 3cqw;
  overflow: hidden;
  border: 1px solid rgba(52, 224, 161, .45);
  border-radius: 99px;
  font-size: var(--fs-m);
  font-weight: 800;
  white-space: nowrap;
  color: var(--m-text);
  background: var(--m-surface-2);
  box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, .5);
  animation: mk-mp-toast 6s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) var(--mo) infinite both;
}

.mp-toast > svg {
  flex: none;
  width: 6.4cqw;
  height: 6.4cqw;
  color: var(--m-ok);
}

/* Касание кнопки «Опубликовать» (центр кнопки: 10cqw от низа) */
.mp .mock__tap {
  top: auto;
  bottom: 4cqw;
  margin: 0 0 0 -6cqw;
  animation: mk-tap-publish 6s var(--mo) infinite both;
}

@keyframes mk-mp-card {
  0%, 50%  { opacity: 1; transform: scale(1); }
  58%, 86% { opacity: .55; transform: scale(.97); }
  94%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes mk-mp-btn {
  0%, 40%  { opacity: 1; transform: scale(1); }
  43%      { opacity: 1; transform: scale(.94); }
  47%      { opacity: 1; transform: scale(1); }
  52%, 88% { opacity: .6; transform: scale(1); }
  94%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes mk-mp-toast {
  0%, 50%  { opacity: 0; transform: translate3d(0, -150%, 0); }
  57%, 86% { opacity: 1; transform: translate3d(0, 0, 0); }
  93%, 100% { opacity: 0; transform: translate3d(0, -150%, 0); }
}

@keyframes mk-tap-publish {
  0%, 39% { opacity: 0; transform: scale(.6); }
  41.5%   { opacity: 1; transform: scale(.8); }
  47%     { opacity: 0; transform: scale(1.5); }
  100%    { opacity: 0; transform: scale(1.5); }
}

/* ==========================================================================
   8. TRAFFIC — потоки переходов из соцсетей стекаются в воронку, счётчик растёт
   --------------------------------------------------------------------------
   Геометрия (всё в cqw): поле .mt-flow шириной 92cqw и высотой 40cqw.
   Центры четырёх источников: 8.5 / 33.5 / 58.5 / 83.5 от левого края,
   т.е. -37.5 / -12.5 / +12.5 / +37.5 от центра (--x). Внизу линии входят
   в широкий край воронки в точках -21 / -7 / +7 / +21 от центра (--x2).
   Точки летят ровно по нарисованным линиям (SVG в MockScreen.js).
   ========================================================================== */

.mt {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding: 4cqw;
}

.mt-src {
  display: flex;
  justify-content: space-between;
  padding: 0 2cqw;
}

.mt-node {
  --c: var(--m-accent);
  display: block;
  width: 13cqw;
  height: 13cqw;
  padding: 3.4cqw;
  border: 1px solid var(--m-line);
  border-radius: 4cqw;
  color: var(--c);
  background: var(--m-surface);
}

.mt-node--telegram  { --c: #2aabee; }
.mt-node--instagram { --c: #e1306c; }
.mt-node--tiktok    { --c: #25f4ee; }
.mt-node--youtube   { --c: #ff0033; }

.mt-flow {
  position: relative;
  flex: none;
  height: 40cqw;
  margin-top: -1cqw;
}

/* Линии-направляющие */
.mt-flow > svg {
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, .13);
}

/* Точки-переходы */
.mt-dot {
  --x: 0cqw;
  --x2: 0cqw;
  --d: 0s;
  --c: var(--m-accent);
  position: absolute;
  left: 50%;
  top: 0;
  width: 2.8cqw;
  height: 2.8cqw;
  margin: -1.4cqw 0 0 -1.4cqw;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 2.6cqw var(--c);
  /* Статичный кадр: точка на середине пути */
  transform: translate3d(calc((var(--x) + var(--x2)) * .5), 20cqw, 0);
  animation: mk-mt-dot 2.4s cubic-bezier(.45, 0, .55, 1) calc(var(--mo) + var(--d)) infinite both;
}

.mt-dot--1 { --x: -37.5cqw; --x2: -21cqw; --d: 0s;    --c: #2aabee; }
.mt-dot--2 { --x: -12.5cqw; --x2: -7cqw;  --d: .45s;  --c: #e1306c; }
.mt-dot--3 { --x: 12.5cqw;  --x2: 7cqw;   --d: .9s;   --c: #25f4ee; }
.mt-dot--4 { --x: 37.5cqw;  --x2: 21cqw;  --d: 1.35s; --c: #ff4d6d; }
.mt-dot--5 { --x: -37.5cqw; --x2: -21cqw; --d: 1.6s;  --c: #2aabee; }
.mt-dot--6 { --x: 12.5cqw;  --x2: 7cqw;   --d: 2s;    --c: #25f4ee; }

/* Воронка (форма — статичный clip-path, мерцает только слой-подсветка) */
.mt-funnel {
  position: relative;
  flex: none;
  align-self: center;
  width: 58cqw;
  height: 22cqw;
  margin-top: -2cqw;
  clip-path: polygon(0 0, 100% 0, 63% 100%, 37% 100%);
  background:
    repeating-linear-gradient(180deg, transparent 0 6.4cqw, rgba(0, 0, 0, .22) 6.4cqw 7.3cqw),
    var(--m-grad);
  opacity: .9;
}

.mt-funnel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 80%);
  opacity: 0;
  animation: mk-mt-pulse 1.2s ease-out var(--mo) infinite both;
}

/* Итог: «переходы +128» */
.mt-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 3cqw 4cqw;
  border: 1px solid var(--m-line);
  border-radius: 4.5cqw;
  background: var(--m-surface);
}

.mt-label {
  overflow: hidden;
  font-size: var(--fs-s);
  font-weight: 700;
  color: var(--m-muted);
  white-space: nowrap;
}

.mt-val {
  --lh: 9.4cqw;
  font-size: var(--fs-l);
  font-weight: 800;
  text-align: right;
  color: var(--m-ok);
}

.mt-val .mk-roll__strip {
  transform: translate3d(0, calc(var(--lh) * -4), 0);
  animation: mk-mt-count 6s linear var(--mo) infinite both;
}

.mt-note {
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  color: var(--m-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

@keyframes mk-mt-dot {
  0%   { opacity: 0; transform: translate3d(var(--x), 0, 0) scale(.7); }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--x2), 40cqw, 0) scale(1); }
}

@keyframes mk-mt-pulse {
  0%   { opacity: 0; }
  20%  { opacity: .55; }
  100% { opacity: 0; }
}

/* Счётчик: 4 шага по 1.2 с, затем пауза и незаметный сброс */
@keyframes mk-mt-count {
  0%     { transform: translate3d(0, 0, 0); animation-timing-function: steps(4, end); }
  80%    { transform: translate3d(0, calc(var(--lh) * -4), 0); }
  95.9%  { transform: translate3d(0, calc(var(--lh) * -4), 0); }
  96%, 100% { transform: translate3d(0, 0, 0); }
}


/* ==========================================================================
   9. ACCOUNTS — список аккаунтов: подсветка переключается сверху вниз,
      точки статуса загораются зелёным («Аккаунт 3 из 12»)
   --------------------------------------------------------------------------
   Строка — 17cqw, подсветка сдвигается на 17cqw каждые 1.5 с (цикл 7.5 с).
   Точка строки k запускается с задержкой k × 1.5 с — ровно когда до неё
   доходит подсветка.
   ========================================================================== */

.ma {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding: 4cqw;
}

.ma-head {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 2.6cqw 3.6cqw;
  overflow: hidden;
  border: 1px solid var(--m-line);
  border-radius: 4cqw;
  font-size: var(--fs-m);
  font-weight: 800;
  white-space: nowrap;
  background: var(--m-surface);
}

.ma-num {
  --lh: 8cqw;
  min-width: 2.6ch;
  padding: 0 1cqw;
  border-radius: 1.6cqw;
  text-align: center;
  color: var(--m-accent);
  background: var(--m-soft);
}

.ma-num .mk-roll__strip {
  transform: translate3d(0, calc(var(--lh) * -2), 0);
  animation: mk-ma-num 7.5s var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)) var(--mo) infinite both;
}

.ma-list {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ma-row {
  --d: 0s;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 9cqw minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 2.8cqw;
  row-gap: .6cqw;
  align-content: center;
  align-items: center;
  height: 17cqw;
  padding: 0 3.4cqw;
}

/* Разделитель без влияния на высоту строки */
.ma-row + .ma-row {
  box-shadow: inset 0 1px 0 var(--m-line);
}

.ma-row::before {
  content: '';
  grid-row: 1 / 3;
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: var(--m-g1);
}

.ma-row:nth-child(2)  { --d: 1.5s; }
.ma-row:nth-child(3)  { --d: 3s; }
.ma-row:nth-child(4)  { --d: 4.5s; }
.ma-row:nth-child(5)  { --d: 6s; }
.ma-row:nth-child(2)::before { background: var(--m-g2); }
.ma-row:nth-child(3)::before { background: var(--m-g3); }
.ma-row:nth-child(4)::before { background: var(--m-grad); }
.ma-row:nth-child(5)::before { background: var(--m-g2); }

.ma-name {
  grid-column: 2;
  align-self: end;
  overflow: hidden;
  font-size: var(--fs-s);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ma-sub {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--m-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Точка статуса: серая основа + зелёный слой */
.ma-st {
  position: relative;
  grid-column: 3;
  grid-row: 1 / 3;
  width: 2.8cqw;
  height: 2.8cqw;
  border-radius: 50%;
  background: #4b5470;
}

.ma-st::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--m-ok);
  box-shadow: 0 0 2cqw rgba(52, 224, 161, .75);
  animation: mk-ma-ok 7.5s linear calc(var(--mo) + var(--d)) infinite both;
}

/* Подсветка активного аккаунта (в статичном кадре — третий) */
.ma-hl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 17cqw;
  border: 1px solid var(--m-soft-line);
  border-radius: 4cqw;
  background: var(--m-soft);
  transform: translate3d(0, 34cqw, 0);
  animation: mk-ma-hl 7.5s var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)) var(--mo) infinite both;
}

/* Касание по строке — каждые 1.5 с, сразу после прихода подсветки */
.ma-hl .mock__tap {
  left: auto;
  right: 9cqw;
  width: 10cqw;
  height: 10cqw;
  margin: -5cqw 0 0 0;
  animation: mk-tap-row 1.5s var(--mo) infinite both;
}

@keyframes mk-ma-hl {
  0%, 16%    { opacity: 1; transform: translate3d(0, 0, 0); }
  20%, 36%   { transform: translate3d(0, 17cqw, 0); }
  40%, 56%   { transform: translate3d(0, 34cqw, 0); }
  60%, 76%   { transform: translate3d(0, 51cqw, 0); }
  80%, 96%   { opacity: 1; transform: translate3d(0, 68cqw, 0); }
  98.9%      { opacity: 0; transform: translate3d(0, 68cqw, 0); }
  99%        { opacity: 0; transform: translate3d(0, 0, 0); }
  100%       { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mk-ma-num {
  0%, 16%    { transform: translate3d(0, 0, 0); }
  20%, 36%   { transform: translate3d(0, calc(var(--lh) * -1), 0); }
  40%, 56%   { transform: translate3d(0, calc(var(--lh) * -2), 0); }
  60%, 76%   { transform: translate3d(0, calc(var(--lh) * -3), 0); }
  80%, 98.9% { transform: translate3d(0, calc(var(--lh) * -4), 0); }
  99%, 100%  { transform: translate3d(0, 0, 0); }
}

@keyframes mk-ma-ok {
  0%        { opacity: 0; transform: scale(.5); }
  7%        { opacity: 1; transform: scale(1.3); }
  11%, 56%  { opacity: 1; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes mk-tap-row {
  0%, 12% { opacity: 0; transform: scale(.6); }
  20%     { opacity: .9; transform: scale(.8); }
  40%     { opacity: 0; transform: scale(1.5); }
  100%    { opacity: 0; transform: scale(1.5); }
}


/* ==========================================================================
   10. STATS — дашборд: растут столбики, рисуется линия, бегут просмотры
   ========================================================================== */

.ms {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding: 4cqw;
}

.ms-kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: .6cqw;
  padding: 3.4cqw 4cqw;
  border: 1px solid var(--m-line);
  border-radius: 4.5cqw;
  background: var(--m-surface);
}

.ms-label {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--m-muted);
  white-space: nowrap;
}

/* «Живая» точка у заголовка */
.ms-label::before {
  content: '';
  flex: none;
  width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 50%;
  background: var(--m-ok);
  animation: mk-pulse 1.6s ease-in-out var(--mo) infinite;
}

.ms-delta {
  padding: .8cqw 2cqw;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--m-ok);
  background: rgba(52, 224, 161, .14);
}

.ms-num {
  --lh: 13cqw;
  grid-column: 1 / -1;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.02em;
}

.ms-num .mk-roll__strip {
  transform: translate3d(0, calc(var(--lh) * -4), 0);
  animation: mk-ms-num 7s linear var(--mo) infinite both;
}

.ms-chart {
  position: relative;
  flex: none;
  height: 60cqw;
  border: 1px solid var(--m-line);
  border-radius: 4.5cqw;
  background: var(--m-surface);
}

/* Подпись периода (текст — из data-label) */
.ms-chart::before {
  content: attr(data-label);
  position: absolute;
  top: 3cqw;
  left: 4cqw;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--m-muted);
  white-space: nowrap;
}

.ms-bars {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  top: 16cqw;
  bottom: 4cqw;
  display: flex;
  align-items: flex-end;
  gap: 2.4cqw;
}

.ms-bar {
  --i: 0;
  --h: 50%;
  flex: 1 1 0;
  height: var(--h);
  border-radius: 1.4cqw 1.4cqw .6cqw .6cqw;
  background: var(--m-soft-line);
  transform-origin: center bottom;
  animation: mk-ms-bar 7s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) calc(var(--mo) + var(--i) * .09s) infinite both;
}

.ms-bar:nth-child(1) { --i: 0; --h: 36%; }
.ms-bar:nth-child(2) { --i: 1; --h: 52%; }
.ms-bar:nth-child(3) { --i: 2; --h: 44%; }
.ms-bar:nth-child(4) { --i: 3; --h: 64%; }
.ms-bar:nth-child(5) { --i: 4; --h: 58%; }
.ms-bar:nth-child(6) { --i: 5; --h: 80%; }
.ms-bar:nth-child(7) { --i: 6; --h: 94%; }

/* Последний столбик — «сегодня», ярким акцентом */
.ms-bar:last-child {
  background: var(--m-grad);
}

/* Линия: обёртка и SVG едут навстречу друг другу — линия «прорисовывается»
   слева направо, хотя анимируется только transform */
.ms-line {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  top: 10cqw;
  height: 30cqw;
  overflow: hidden;
  color: var(--m-accent);
  animation: mk-ms-wipe 7s var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)) var(--mo) infinite both;
}

.ms-line > svg {
  position: absolute;
  inset: 0;
  overflow: visible;
  animation: mk-ms-wipe-in 7s var(--ease-in-out, cubic-bezier(.65, 0, .35, 1)) var(--mo) infinite both;
}

.mock--p-tiktok .ms-line {
  color: var(--m-accent-2);
}

.ms-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3cqw;
}

.ms-tile {
  display: flex;
  flex-direction: column;
  gap: .4cqw;
  padding: 3cqw 3.4cqw;
  overflow: hidden;
  border: 1px solid var(--m-line);
  border-radius: 4cqw;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--m-muted);
  white-space: nowrap;
  background: var(--m-surface);
}

.ms-tile b {
  font-size: var(--fs-m);
  font-weight: 800;
  color: var(--m-text);
}

@keyframes mk-ms-bar {
  0%, 6%   { transform: scaleY(.04); }
  30%, 88% { transform: scaleY(1); }
  96%, 100% { transform: scaleY(.04); }
}

@keyframes mk-ms-wipe {
  0%, 14%  { opacity: 1; transform: translate3d(-100%, 0, 0); }
  55%, 88% { opacity: 1; transform: translate3d(0, 0, 0); }
  93%      { opacity: 0; transform: translate3d(0, 0, 0); }
  95%, 100% { opacity: 0; transform: translate3d(-100%, 0, 0); }
}

@keyframes mk-ms-wipe-in {
  0%, 14%  { transform: translate3d(100%, 0, 0); }
  55%, 93% { transform: translate3d(0, 0, 0); }
  95%, 100% { transform: translate3d(100%, 0, 0); }
}

@keyframes mk-ms-num {
  0%     { transform: translate3d(0, 0, 0); }
  8%     { transform: translate3d(0, 0, 0); animation-timing-function: steps(4, end); }
  56%    { transform: translate3d(0, calc(var(--lh) * -4), 0); }
  93.9%  { transform: translate3d(0, calc(var(--lh) * -4), 0); }
  94%, 100% { transform: translate3d(0, 0, 0); }
}

/* Общая пульсация (бейдж «авто», «живые» точки) */
@keyframes mk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ==========================================================================
   11. ВАРИАНТ MINI — для мини-анимации «Как работает Media Box»
   --------------------------------------------------------------------------
   Без статус-бара, крупнее шрифты и значки, меньше деталей
   (лишние элементы MockScreen.js просто не создаёт).
   ========================================================================== */

.mock--mini .mock__screen {
  --fs-xs: 5.4cqw;
  --fs-s: 6.2cqw;
  --fs-m: 7.6cqw;
  --fs-l: 9.4cqw;
  --fs-xl: 14cqw;
}

/* Отступ сверху — чтобы заголовок не попадал под камеру-«точку» корпуса */
.mock--mini .mock__bar {
  height: 17cqw;
  padding-top: 6cqw;
}

.mock--mini .mock__glyph {
  width: 9cqw;
  height: 9cqw;
  padding: 1.9cqw;
}

.mock--mini .mock__auto {
  height: 7.4cqw;
  padding: 0 2.6cqw 0 2.2cqw;
  font-size: 4.6cqw;
}

.mock--mini .mock__auto::before {
  width: 2cqw;
  height: 2cqw;
}

.mock--mini .mock__tap {
  border-width: .9cqw;
}

/* Лента: только аватар, имя и картинка */
.mock--mini .mf-post {
  gap: 3cqw;
}

.mock--mini .mf-head::before {
  width: 8.6cqw;
  height: 8.6cqw;
}

/* Аккаунты: без второй строки — имя по центру строки */
.mock--mini .ma-name {
  grid-row: 1 / 3;
  align-self: center;
}

.mock--mini .ma-st {
  width: 3.4cqw;
  height: 3.4cqw;
}

/* Видео: крупнее кнопка лайка */
.mock--mini .mw-btn {
  width: 12cqw;
  height: 12cqw;
}

.mock--mini .mw-side {
  bottom: 30cqw;
}

.mock--mini .mw-heart {
  bottom: 44cqw;
  width: 7.5cqw;
  height: 7.5cqw;
}

/* Комментарий: меньше видео сверху */
.mock--mini .mc-post {
  flex-basis: 28cqw;
}

.mock--mini .mc-field,
.mock--mini .mc-send {
  height: 12cqw;
}

.mock--mini .mc-send {
  width: 12cqw;
  padding: 3cqw;
}

/* Статистика: выше график */
.mock--mini .ms-chart {
  height: 72cqw;
}


/* ==========================================================================
   12. ПАУЗА, REDUCED MOTION, СТАТИЧНЫЙ КАДР
   ========================================================================== */

/* Любой предок с .is-paused (или сам .mock) — все анимации на паузе */
.is-paused .mock *,
.is-paused .mock *::before,
.is-paused .mock *::after,
.mock.is-paused *,
.mock.is-paused *::before,
.mock.is-paused *::after {
  animation-play-state: paused !important;
}

/* Системная настройка «уменьшить движение»: анимации выключаются,
   остаются базовые стили — это и есть осмысленный статичный кадр
   (загрузка завершена, комментарий отправлен, пост опубликован…). */
@media (prefers-reduced-motion: reduce) {
  .mock *,
  .mock *::before,
  .mock *::after {
    animation: none !important;
  }
}

/* То же по требованию страницы (Hero ставит data-motion="reduced")
   или для отдельного экрана (options.static → .mock--static) */
[data-motion="reduced"] .mock *,
[data-motion="reduced"] .mock *::before,
[data-motion="reduced"] .mock *::after,
.mock--static *,
.mock--static *::before,
.mock--static *::after {
  animation: none !important;
}

@media print {
  .mock * {
    animation: none !important;
  }
}


/* ==========================================================================
   13. РЕАЛИСТИЧНЫЕ ЭКРАНЫ (v2) — .mock--real
   --------------------------------------------------------------------------
   Пара к разделу «РЕАЛИСТИЧНЫЕ ЭКРАНЫ» в MockScreen.js. Экран выглядит
   как снимок настоящего ANDROID-смартфона (Media Box работает на Android):
   статус-бар Android поверх приложения, панель ◁ ○ □ внизу (раздел 2),
   рабочий стол с круглыми значками и строкой поиска, интерфейсы
   Instagram / TikTok / YouTube.
     13.1 Каркас, иконки, аватары     13.7  Публикация (.mu2)
     13.2 Сцены-«фото» (.mk-scene)    13.8  Профиль (.mpf)
     13.3 Заставки приложений         13.9  Лента Instagram (.mig)
     13.4 Видео (.mv)                 13.10 Рабочий стол (.mh)
     13.5 Видео: анимация             13.11 Три приложения по очереди
     13.6 Комментарии (.mcm)                (.mk-seg)
   Правила те же: размеры в cqw, анимируются только transform и opacity,
   базовые (не анимированные) стили — осмысленный статичный кадр для
   reduced motion. Сцены (.mk-scene) — контейнеры размеров: внутри них
   cqmin = 1% меньшей стороны картинки, поэтому тарелка остаётся круглой
   и в квадратном посте, и в вертикальном видео.
   Время циклов: видео 8 с (два ролика), «отрезок» трёх приложений 4 с
   (полный круг 12 с), публикация 6 с, комментарий 7 с, лента IG 9 с.
   ========================================================================== */

/* --- 13.1 Каркас (Android) --- */
.mock--real {
  --nav-h: 13.5cqw;                    /* высота нижнего меню приложения */
  --top: 9.5cqw;                       /* где начинается шапка приложения (под статус-баром) */

  background: #000;
  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Статус-бар лежит поверх приложения, как в настоящем телефоне */
.mock--real .mock__status {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  color: #fff;
}

/* Экран заканчивается над панелью ◁ ○ □ (см. .mock--nav), поэтому
   приложение занимает всё, что выше неё */
.mock--real .mock__body {
  position: absolute;
  inset: 0;
}

.mk-sp {
  flex: 1 1 auto;
  min-width: 0;
}

.mk-ui {
  position: relative;
  display: block;
  flex: none;
  width: 6.2cqw;
  height: 6.2cqw;
}

/* Аватар — «фото» человека: голова, плечи, фон */
.mk-face {
  position: relative;
  display: block;
  flex: none;
  width: 7.4cqw;
  height: 7.4cqw;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, #f1c7a4 0 21%, rgba(241, 199, 164, 0) 22%),
    radial-gradient(ellipse 62% 42% at 50% 100%, #2f6fe0 0 92%, rgba(47, 111, 224, 0) 100%),
    linear-gradient(160deg, #a7d8ff 0%, #6b8cff 100%);
}

.mk-face--2 {
  background:
    radial-gradient(circle at 50% 40%, #d9a27f 0 21%, rgba(217, 162, 127, 0) 22%),
    radial-gradient(ellipse 62% 42% at 50% 100%, #e0446e 0 92%, rgba(224, 68, 110, 0) 100%),
    linear-gradient(160deg, #ffd3a8 0%, #ff8fa3 100%);
}

.mk-face--3 {
  background:
    radial-gradient(circle at 50% 40%, #8a5a3c 0 21%, rgba(138, 90, 60, 0) 22%),
    radial-gradient(ellipse 62% 42% at 50% 100%, #1f9a66 0 92%, rgba(31, 154, 102, 0) 100%),
    linear-gradient(160deg, #c6f3d8 0%, #5fc9a0 100%);
}

.mk-face--4 {
  background:
    radial-gradient(circle at 50% 40%, #f3d0b5 0 21%, rgba(243, 208, 181, 0) 22%),
    radial-gradient(ellipse 62% 42% at 50% 100%, #7b5cff 0 92%, rgba(123, 92, 255, 0) 100%),
    linear-gradient(160deg, #ffe7a3 0%, #ffb35c 100%);
}

/* Касание робота: на реалистичных экранах кольцо чуть меньше */
.mock--real .mock__tap {
  width: 11cqw;
  height: 11cqw;
  margin: -5.5cqw 0 0 -5.5cqw;
}


/* --- 13.2 Сцены-«фото»: закат, ночной город, блюдо, кофе, товар, горы --- */
.mk-scene {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  container-type: size;
  background: #2a2f45;
}

.mk-scene__a {
  position: absolute;
  display: block;
}

.mk-scene::before,
.mk-scene::after,
.mk-scene__a::before,
.mk-scene__a::after {
  content: '';
  position: absolute;
  display: block;
}

/* Закат над морем */
.mk-scene--sunset {
  background: linear-gradient(180deg, #1c1342 0%, #4b1f66 20%, #a3346d 38%, #ee6457 51%, #ffb466 59%, #ffd99c 60.4%, #2c2552 60.6%, #1b1a3d 76%, #0c0e22 100%);
}

/* Острова на горизонте */
.mk-scene--sunset::before {
  left: -4%;
  top: 55.5%;
  width: 58%;
  height: 5.2%;
  background: #24183f;
  clip-path: polygon(0 100%, 0 62%, 10% 40%, 19% 58%, 31% 12%, 44% 52%, 56% 34%, 70% 70%, 84% 58%, 100% 100%);
}

/* Солнечная дорожка на воде */
.mk-scene--sunset::after {
  left: 36%;
  right: 36%;
  top: 60.6%;
  bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 206, 140, .8) 0 1.1%, rgba(255, 206, 140, 0) 1.1% 3.4%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 85%);
}

/* Солнце: половина диска над горизонтом */
.mk-scene--sunset .mk-scene__a {
  left: 50%;
  top: 60.4%;
  width: 36cqmin;
  height: 18cqmin;
  margin: -18cqmin 0 0 -18cqmin;
  border-radius: 18cqmin 18cqmin 0 0;
  background: radial-gradient(circle at 50% 100%, #fff4d2 0 30%, #ffd27a 40%, rgba(255, 170, 96, .55) 56%, rgba(255, 150, 96, 0) 72%);
}

/* Ночной город */
.mk-scene--city {
  background:
    radial-gradient(ellipse 80% 26% at 50% 82%, rgba(255, 126, 95, .5), rgba(255, 126, 95, 0) 70%),
    linear-gradient(180deg, #060a20 0%, #111a46 34%, #352a6c 60%, #b84f7c 80%, #f28d6a 100%);
}

/* Дома с горящими окнами. Слои сверху вниз: тёмные «перекрытия» между
   этажами, тёмные (не горящие) столбцы окон, полосы тёплых и холодных
   окон, сам цвет домов. Вместе они дают прямоугольные окна. */
.mk-scene--city::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 64%;
  background:
    linear-gradient(180deg, rgba(16, 20, 47, 0) 0 50%, #10142f 50% 100%) 0 0 / 100% 3.6cqmin,
    linear-gradient(90deg, rgba(16, 20, 47, 0) 0 13%, #10142f 13% 19%, rgba(16, 20, 47, 0) 19% 46%, #10142f 46% 50%, rgba(16, 20, 47, 0) 50% 71%, #10142f 71% 77%, rgba(16, 20, 47, 0) 77% 91%, #10142f 91% 95%, rgba(16, 20, 47, 0) 95%),
    linear-gradient(90deg, rgba(255, 210, 130, .92) 0 22%, rgba(255, 210, 130, 0) 22% 50%, rgba(160, 210, 255, .8) 50% 72%, rgba(160, 210, 255, 0) 72%) 1.2% 0 / 8cqmin 100%,
    linear-gradient(180deg, #161b3e 0%, #0a0d24 100%);
  clip-path: polygon(0 100%, 0 24%, 9% 24%, 9% 9%, 18% 9%, 18% 31%, 25% 31%, 25% 0, 36% 0, 36% 19%, 44% 19%, 44% 35%, 52% 35%, 52% 13%, 63% 13%, 63% 27%, 70% 27%, 70% 5%, 79% 5%, 79% 21%, 88% 21%, 88% 39%, 100% 39%, 100% 100%);
}

/* Улица: фары и стоп-сигналы машин */
.mk-scene--city::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 8%;
  background:
    linear-gradient(90deg,
      rgba(255, 60, 70, 0) 6%, rgba(255, 60, 70, .95) 9% 12%, rgba(255, 60, 70, 0) 15%,
      rgba(255, 244, 210, 0) 34%, rgba(255, 244, 210, .95) 37% 40%, rgba(255, 244, 210, 0) 43%,
      rgba(255, 60, 70, 0) 62%, rgba(255, 60, 70, .9) 65% 67%, rgba(255, 60, 70, 0) 70%,
      rgba(255, 244, 210, 0) 82%, rgba(255, 244, 210, .95) 85% 88%, rgba(255, 244, 210, 0) 91%) 0 35% / 100% 22% no-repeat,
    linear-gradient(180deg, #0c0e20, #04050c);
}

/* Луна (ниже верхней строки приложения) */
.mk-scene--city .mk-scene__a {
  right: 22%;
  top: 21%;
  width: 11cqmin;
  height: 11cqmin;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fffbea 0%, #ece4c6 62%, #d4c9a4 100%);
  box-shadow: 0 0 7cqmin rgba(255, 248, 220, .4);
}

/* Блюдо на деревянном столе (вид сверху) */
.mk-scene--food {
  background:
    radial-gradient(120% 60% at 25% 0%, rgba(255, 220, 180, .3), rgba(255, 220, 180, 0) 60%),
    repeating-linear-gradient(96deg, #5b3621 0 6%, #6d4329 6% 12%, #50301c 12% 14.5%, #76492c 14.5% 22%);
}

/* Салфетка */
.mk-scene--food::before {
  left: -12%;
  top: 6%;
  width: 50%;
  height: 26%;
  border-radius: 3%;
  background: repeating-linear-gradient(0deg, #ece6dc 0 9%, #d9d1c4 9% 11%);
  transform: rotate(-14deg);
}

/* Вилка: зубцы, перемычка, ручка (размеры от меньшей стороны картинки) */
.mk-scene--food::after {
  right: 6%;
  top: 50%;
  width: 6cqmin;
  height: 62cqmin;
  margin-top: -31cqmin;
  background:
    linear-gradient(90deg, #c9cdd5 0 16%, rgba(201, 205, 213, 0) 16% 28%, #e9ebef 28% 44%, rgba(233, 235, 239, 0) 44% 56%, #e9ebef 56% 72%, rgba(233, 235, 239, 0) 72% 84%, #c9cdd5 84%) 0 0 / 100% 20% no-repeat,
    linear-gradient(90deg, #a9aeb8, #f3f4f7 50%, #9da2ac) 0 20% / 100% 8% no-repeat,
    linear-gradient(90deg, #a9aeb8, #f3f4f7 50%, #9da2ac) 50% 100% / 42% 74% no-repeat;
  border-radius: .6cqmin .6cqmin 1.6cqmin 1.6cqmin;
  transform: rotate(6deg);
}

/* Тарелка */
.mk-scene--food .mk-scene__a {
  left: 50%;
  top: 52%;
  width: 76cqmin;
  height: 76cqmin;
  margin: -38cqmin 0 0 -38cqmin;
  border-radius: 50%;
  background: radial-gradient(circle, #fbf8f3 0 57%, #e6dfd3 60%, #f6f2eb 64%, #fffdf9 69%, #d8cfc2 70.5%);
  box-shadow: 0 2.4cqmin 5cqmin rgba(30, 14, 6, .5);
}

/* Паста с томатами и базиликом */
.mk-scene--food .mk-scene__a::before {
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 37%, #e0402f 0 8%, #a8221b 10.5%, rgba(168, 34, 27, 0) 11.5%),
    radial-gradient(circle at 65% 61%, #e3442f 0 7.5%, #a8221b 10%, rgba(168, 34, 27, 0) 11%),
    radial-gradient(circle at 61% 30%, #d8352a 0 6%, rgba(216, 53, 42, 0) 7%),
    radial-gradient(ellipse 15% 8% at 43% 65%, #3f8f35 0 80%, rgba(63, 143, 53, 0) 100%),
    radial-gradient(ellipse 11% 7% at 71% 41%, #4ea33f 0 80%, rgba(78, 163, 63, 0) 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .35) 0 6%, rgba(255, 255, 255, 0) 7%),
    repeating-radial-gradient(circle at 46% 52%, #f3c25e 0 2.6%, #dca040 2.6% 4.4%, #f8d47c 4.4% 6.4%);
}

/* Блик на тарелке */
.mk-scene--food .mk-scene__a::after {
  left: 12%;
  top: 8%;
  width: 40%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  transform: rotate(-30deg);
}

/* Капучино с латте-артом (вид сверху) */
.mk-scene--latte {
  background:
    radial-gradient(3% 2% at 16% 82%, #4a2a17 0 80%, rgba(74, 42, 23, 0) 100%),
    radial-gradient(3% 2% at 22% 88%, #3e2313 0 80%, rgba(62, 35, 19, 0) 100%),
    radial-gradient(3% 2% at 84% 16%, #4a2a17 0 80%, rgba(74, 42, 23, 0) 100%),
    radial-gradient(70% 45% at 18% 12%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 70%),
    linear-gradient(150deg, #ecd7c2 0%, #d2ac8d 55%, #b98c6b 100%);
}

/* Блюдце и чашка */
.mk-scene--latte .mk-scene__a {
  left: 50%;
  top: 50%;
  width: 72cqmin;
  height: 72cqmin;
  margin: -36cqmin 0 0 -36cqmin;
  border-radius: 50%;
  background: radial-gradient(circle, #f6f2ec 0 60%, #ddd5ca 61.5% 64%, #fbf9f5 65.5% 98%, #e3dbd0 99%);
  box-shadow: 0 2.6cqmin 6cqmin rgba(90, 50, 20, .35);
}

/* Кофе и «сердце» из молочной пены */
.mk-scene--latte .mk-scene__a::before {
  inset: 23%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 41% 43%, #f3e1c8 0 15%, rgba(243, 225, 200, 0) 16%),
    radial-gradient(circle at 59% 43%, #f3e1c8 0 15%, rgba(243, 225, 200, 0) 16%),
    conic-gradient(from -45deg at 50% 100%, #f3e1c8 0 90deg, rgba(243, 225, 200, 0) 90deg) 50% 62% / 36% 30% no-repeat,
    radial-gradient(circle, #a3602f 0 52%, #7b4321 76%, #5a2e14 100%);
}

/* Ручка чашки */
.mk-scene--latte .mk-scene__a::after {
  left: 79%;
  top: 45%;
  width: 13%;
  height: 10%;
  border-radius: 3cqmin;
  background: #f2ede6;
  box-shadow: inset 0 0 0 .6cqmin #ddd4c8;
}

/* Товар: флакон на подиуме */
.mk-scene--product {
  background:
    radial-gradient(ellipse 60% 38% at 50% 36%, rgba(255, 238, 246, .75), rgba(255, 238, 246, 0) 70%),
    linear-gradient(180deg, #f7a7c1 0%, #d97fcf 55%, #8f5cf0 100%);
}

/* Подиум: боковина и верх */
.mk-scene--product::before {
  left: 20%;
  right: 20%;
  top: 74%;
  bottom: -4%;
  background: linear-gradient(90deg, #d8a3c6 0%, #f8dceb 48%, #c994ba 100%);
}

.mk-scene--product::after {
  left: 20%;
  right: 20%;
  top: 69%;
  height: 10%;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff4f9, #ecc9df);
}

/* Флакон (стоит на подиуме, поверх него) */
.mk-scene--product .mk-scene__a {
  z-index: 1;
  left: 50%;
  top: 74%;
  width: 24cqmin;
  height: 34cqmin;
  margin: -33cqmin 0 0 -12cqmin;
  border-radius: 4cqmin 4cqmin 3cqmin 3cqmin;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .6) 0 9%, rgba(255, 255, 255, 0) 24% 70%, rgba(255, 255, 255, .35) 84%, rgba(255, 255, 255, 0) 95%),
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0 30%, #ffb26b 30% 100%);
  box-shadow: inset 0 0 0 .5cqmin rgba(255, 255, 255, .55), 0 3cqmin 5cqmin rgba(90, 30, 90, .3);
}

/* Колпачок */
.mk-scene--product .mk-scene__a::before {
  left: 30%;
  right: 30%;
  bottom: 100%;
  height: 10cqmin;
  border-radius: 1.2cqmin 1.2cqmin .4cqmin .4cqmin;
  background: linear-gradient(90deg, #1f1f27, #63636f 45%, #24242c);
}

/* Этикетка */
.mk-scene--product .mk-scene__a::after {
  left: 17%;
  right: 17%;
  top: 50%;
  height: 24%;
  border-radius: 1cqmin;
  background: rgba(255, 255, 255, .88);
  box-shadow: inset 0 -2cqmin 0 rgba(150, 95, 170, .22);
}

/* Горы: небо, снежные вершины, лес */
.mk-scene--mountain {
  background:
    radial-gradient(circle at 76% 20%, #fff8dc 0 3%, rgba(255, 244, 205, .55) 5%, rgba(255, 244, 205, 0) 14%),
    linear-gradient(180deg, #4f9fe6 0%, #93c8f0 42%, #dcefff 62%, #cfe6f5 100%);
}

/* Дальний хребет: белые макушки только у самых высоких вершин */
.mk-scene--mountain::before {
  left: -4%;
  right: -4%;
  top: 32%;
  bottom: 0;
  background: linear-gradient(180deg, #f5f9fd 0 7%, #9fb5d3 13%, #6d88b0 40%, #4d6890 100%);
  clip-path: polygon(0 42%, 12% 20%, 22% 31%, 34% 4%, 44% 23%, 52% 15%, 62% 31%, 74% 7%, 86% 27%, 100% 17%, 100% 100%, 0 100%);
}

/* Лес на переднем плане */
.mk-scene--mountain::after {
  left: -4%;
  right: -4%;
  top: 60%;
  bottom: 0;
  background: linear-gradient(180deg, #2f6d4b 0%, #1e4b34 45%, #12301f 100%);
  clip-path: polygon(0 34%, 5% 20%, 9% 30%, 15% 9%, 21% 27%, 29% 19%, 37% 35%, 47% 21%, 55% 36%, 65% 23%, 73% 10%, 79% 26%, 87% 17%, 93% 30%, 100% 20%, 100% 100%, 0 100%);
}

/* Облако */
.mk-scene--mountain .mk-scene__a {
  left: 10%;
  top: 13%;
  width: 26cqmin;
  height: 8cqmin;
  border-radius: 8cqmin;
  background: rgba(255, 255, 255, .9);
  box-shadow: 8cqmin -3cqmin 0 -1cqmin rgba(255, 255, 255, .9);
}

/* В прежних экранах «картинка» .mk-art теперь тоже сцена-фото:
   абстрактные «солнце» и «холм» не нужны, значки — поверх фото */
.mk-art--photo::before,
.mk-art--photo::after {
  display: none;
}

.mk-art--photo > :not(.mk-scene) {
  position: relative;
  z-index: 1;
}


/* --- 13.3 Заставка приложения: логотип при открытии --- */
.mk-splash {
  position: absolute;
  z-index: 26;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 0;
}

.mk-splash__logo {
  display: block;
  width: 21cqw;
  height: 21cqw;
  color: #fff;
}

/* Заставка Android 12+: значок приложения в круге */
.mk-splash--instagram .mk-splash__logo {
  padding: 4.6cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.mk-splash--tiktok .mk-splash__logo {
  filter: drop-shadow(-.7cqw -.5cqw 0 #25f4ee) drop-shadow(.7cqw .5cqw 0 #fe2c55);
}

/* YouTube: красная плашка, белый треугольник (белый круг под прорезью) */
.mk-splash--youtube {
  background: #0f0f0f;
}

.mk-splash--youtube .mk-splash__logo {
  width: 27cqw;
  height: 27cqw;
  color: #ff0033;
  background: radial-gradient(circle at 52% 50%, #fff 0 20%, rgba(255, 255, 255, 0) 21%);
}


/* --- 13.4 Видео в приложении (.mv): Reels / TikTok / Shorts --- */
.mv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-size: 3.9cqw;
  line-height: 1.3;
}

/* Лента роликов: три кадра друг под другом, свайп сдвигает её вверх */
.mv-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--nav-h);
}

.mv-clip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  background: #111;
}

.mv-clip:nth-child(2) {
  top: 100%;
}

.mv-clip:nth-child(3) {
  top: 200%;
}

/* Затемнение сверху и снизу — чтобы читались надписи */
.mv-shade {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--nav-h);
  background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .62) 100%);
}

/* Верхняя строка приложения */
.mv-top {
  position: absolute;
  z-index: 5;
  top: var(--top);
  left: 0;
  right: 0;
  height: 10cqw;
  display: flex;
  align-items: center;
  gap: 4cqw;
  padding: 0 4.6cqw;
}

.mv-top__title {
  font-size: 6.2cqw;
  font-weight: 800;
  letter-spacing: -.01em;
}

.mv-top--tt {
  justify-content: space-between;
  gap: 2cqw;
}

.mv-top__live {
  flex: none;
  padding: .5cqw 1.2cqw;
  border: .45cqw solid #fff;
  border-radius: 1.3cqw;
  font-size: 3cqw;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .03em;
}

.mv-top__tabs {
  display: flex;
  gap: 4cqw;
  min-width: 0;
  font-size: 4.3cqw;
  font-weight: 700;
  white-space: nowrap;
}

.mv-tab {
  position: relative;
  color: rgba(255, 255, 255, .62);
}

.mv-tab.is-on {
  color: #fff;
}

.mv-tab.is-on::after {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: -1.7cqw;
  height: .7cqw;
  border-radius: 1cqw;
  background: #fff;
}

/* Кнопки справа и подписи слева — одна группа: при свайпе она мигает,
   как будто надписи сменились вместе с роликом */
.mv-over {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--nav-h);
}

.mv-rail {
  position: absolute;
  right: 2cqw;
  bottom: 4cqw;
  width: 13cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5cqw;
}

.mv-btn {
  position: relative;
  display: block;
  width: 8.4cqw;
  height: 8.4cqw;
  color: #fff;
}

.mv-btn > .mk-ui {
  width: 100%;
  height: 100%;
}

/* Закрашенная иконка поверх — «лайк поставлен» */
.mv-btn__on {
  position: absolute;
  inset: 0;
  color: #ff3040;
  opacity: 0;
}

.mv--tiktok .mv-btn__on {
  color: #fe2c55;
}

.mv--youtube .mv-btn__on {
  color: #fff;
}

.mv-btn--down > .mk-ui {
  transform: rotate(180deg);
}

/* TikTok: аватар автора с красным плюсом */
.mv-ava {
  position: relative;
  display: block;
  width: 10.6cqw;
  height: 10.6cqw;
  margin-bottom: 1.6cqw;
  border: .5cqw solid #fff;
  border-radius: 50%;
}

.mv-ava > .mk-face {
  width: 100%;
  height: 100%;
}

.mv-ava__plus {
  position: absolute;
  left: 50%;
  bottom: -2.4cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  margin-left: -2.3cqw;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 2.4cqw .55cqw no-repeat,
    linear-gradient(#fff, #fff) center / .55cqw 2.4cqw no-repeat,
    #fe2c55;
}

/* TikTok: вращающаяся пластинка со звуком */
.mv-disc {
  position: relative;
  display: block;
  width: 10cqw;
  height: 10cqw;
  overflow: hidden;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #171717 0 .5cqw, #2b2b2b .5cqw 1cqw);
}

.mv-disc > .mk-scene {
  inset: 2.6cqw;
  border-radius: 50%;
}

/* Reels и Shorts: квадратная обложка звука */
.mv-sq {
  position: relative;
  display: block;
  width: 8.4cqw;
  height: 8.4cqw;
  overflow: hidden;
  border: .5cqw solid #fff;
  border-radius: 1.8cqw;
}

/* Автор, подпись, звук */
.mv-info {
  position: absolute;
  left: 4cqw;
  right: 17cqw;
  bottom: 4cqw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6cqw;
}

.mv-user {
  max-width: 100%;
  overflow: hidden;
  font-size: 4.2cqw;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mv-cap {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: 3.8cqw;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mv-cap--title {
  font-weight: 700;
}

.mv-row {
  display: flex;
  align-items: center;
  gap: 2cqw;
  max-width: 100%;
  min-width: 0;
}

.mv-row .mv-user {
  flex: 0 1 auto;
  min-width: 0;
}

.mv-row .mk-face {
  width: 7cqw;
  height: 7cqw;
}

.mv-pill {
  flex: none;
  padding: .9cqw 2.4cqw;
  border: .35cqw solid rgba(255, 255, 255, .85);
  border-radius: 1.8cqw;
  font-size: 3.3cqw;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.mv-pill--yt {
  border-color: transparent;
  border-radius: 99px;
  color: #0f0f0f;
  background: #fff;
}

.mv-audio {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  max-width: 100%;
  overflow: hidden;
  font-size: 3.4cqw;
  white-space: nowrap;
}

.mv-audio > .mk-ui {
  width: 3.6cqw;
  height: 3.6cqw;
}

.mv-audio__t {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Полоска просмотра ролика */
.mv-progress {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: var(--nav-h);
  height: .55cqw;
  background: rgba(255, 255, 255, .22);
}

.mv-progress__fill {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .95);
  transform: scaleX(.42);
  transform-origin: 0 50%;
}

.mv--youtube .mv-progress__fill {
  background: #ff0033;
}

/* Нижнее меню приложения */
.mv-nav {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--nav-h);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 2.2cqw 1cqw 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #000;
}

.mv-nav--yt {
  background: #0f0f0f;
}

.mv-nav--ig {
  padding-top: 3cqw;
}

.mv-nav__i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6cqw;
  min-width: 0;
  font-size: 2.6cqw;
  font-weight: 600;
  line-height: 1.1;
  color: rgba(255, 255, 255, .6);
}

.mv-nav__i.is-on {
  color: #fff;
}

.mv-nav__l {
  white-space: nowrap;
}

/* TikTok: кнопка «+» с бирюзовым и красным краем */
.mv-nav__add {
  flex: none;
  display: block;
  width: 10.4cqw;
  height: 6.8cqw;
  margin-top: .3cqw;
  border-radius: 1.8cqw;
  background:
    linear-gradient(#111, #111) center / 3.4cqw .65cqw no-repeat,
    linear-gradient(#111, #111) center / .65cqw 3.4cqw no-repeat,
    linear-gradient(90deg, #25f4ee 0 13%, #fff 13% 87%, #fe2c55 87%);
}

/* Instagram: свой аватар вместо иконки профиля */
.mv-nav__me {
  width: 6.2cqw;
  height: 6.2cqw;
}

.mv-nav__me.is-on {
  box-shadow: 0 0 0 .45cqw #000, 0 0 0 .9cqw #fff;
}

/* Большое сердце (у YouTube — палец) после двойного тапа */
.mv-pop {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 40%;
  width: 24cqw;
  height: 24cqw;
  margin: -12cqw 0 0 -12cqw;
  color: #ff3040;
  opacity: 0;
  transform: scale(.4);
}

.mv--tiktok .mv-pop {
  color: #fe2c55;
}

.mv--youtube .mv-pop {
  color: #fff;
}

.mv-tap {
  top: 40%;
}


/* --- 13.5 Видео: анимация ---
   single (8 с): ролик 1 → двойной тап, лайк → свайп → ролик 2 → свайп.
   seg (4 с): заставка → ролик → лайк → свайп (часть цикла трёх приложений). */

/* Медленное «движение камеры» в ролике */
.mv--single .mv-clip > .mk-scene,
.mv--seg .mv-clip > .mk-scene {
  animation: mk-kb 9s ease-in-out var(--mo) infinite alternate both;
}

.mv--single .mv-disc,
.mv--seg .mv-disc {
  animation: mk-spin 6s linear var(--mo) infinite;
}

.mv--single .mv-strip {
  animation: mv-strip2 8s cubic-bezier(.6, 0, .25, 1) var(--mo) infinite both;
}

.mv--single .mv-over {
  animation: mv-over2 8s linear var(--mo) infinite both;
}

.mv--single .mv-btn--like .mv-btn__on {
  animation: mv-liked2 8s linear var(--mo) infinite both;
}

.mv--single .mv-pop {
  animation: mv-pop2 8s var(--mo) infinite both;
}

.mv--single .mv-tap {
  animation: mv-tap2 8s var(--mo) infinite both;
}

.mv--single .mv-progress__fill {
  animation: mv-prog2 4s linear var(--mo) infinite both;
}

.mv--seg .mv-strip {
  animation: mv-strip1 4s cubic-bezier(.6, 0, .25, 1) var(--mo) infinite both;
}

.mv--seg .mv-over {
  animation: mv-over1 4s linear var(--mo) infinite both;
}

.mv--seg .mv-btn--like .mv-btn__on {
  animation: mv-liked1 4s linear var(--mo) infinite both;
}

.mv--seg .mv-pop {
  animation: mv-pop1 4s var(--mo) infinite both;
}

.mv--seg .mv-tap {
  animation: mv-tap1 4s var(--mo) infinite both;
}

.mv--seg .mv-progress__fill {
  animation: mv-prog1 4s linear var(--mo) infinite both;
}

/* Заставка — первые полсекунды «отрезка» */
.mk-seg > .mk-splash {
  animation: mk-splash 4s linear var(--mo) infinite both;
}

@keyframes mk-kb {
  from { transform: scale(1.03); }
  to   { transform: scale(1.12) translate(-1.5%, -2%); }
}

@keyframes mk-spin {
  to { transform: rotate(360deg); }
}

@keyframes mk-splash {
  0%, 8%    { opacity: 1; }
  14%, 100% { opacity: 0; }
}

@keyframes mv-strip2 {
  0%, 42%  { transform: translateY(0); }
  50%, 92% { transform: translateY(-100%); }
  100%     { transform: translateY(-200%); }
}

@keyframes mv-over2 {
  0%, 42%  { opacity: 1; }
  44%, 49% { opacity: 0; }
  52%, 92% { opacity: 1; }
  94%, 99% { opacity: 0; }
  100%     { opacity: 1; }
}

@keyframes mv-liked2 {
  0%, 15%   { opacity: 0; transform: scale(1); }
  16.5%     { opacity: 1; transform: scale(1.3); }
  18.5%, 43% { opacity: 1; transform: scale(1); }
  44%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes mv-pop2 {
  0%, 13%   { opacity: 0; transform: scale(.4) rotate(-8deg); }
  15.5%     { opacity: 1; transform: scale(1.15) rotate(-8deg); }
  19%       { opacity: 1; transform: scale(1) rotate(-8deg); }
  24%, 100% { opacity: 0; transform: translateY(-14cqw) scale(1.1) rotate(-8deg); }
}

/* Касание: двойной тап по ролику, потом два свайпа снизу вверх */
@keyframes mv-tap2 {
  0%, 11%  { opacity: 0; transform: scale(.6); }
  12%      { opacity: 1; transform: scale(.7); }
  13%      { opacity: .3; transform: scale(1.1); }
  13.8%    { opacity: 1; transform: scale(.7); }
  15.5%    { opacity: 0; transform: scale(1.3); }
  38%      { opacity: 0; transform: translateY(40cqw) scale(.8); }
  39.5%    { opacity: 1; transform: translateY(40cqw) scale(.8); }
  47%      { opacity: 1; transform: translateY(-34cqw) scale(.8); }
  49%, 88% { opacity: 0; transform: translateY(-40cqw) scale(.8); }
  88.1%    { opacity: 0; transform: translateY(40cqw) scale(.8); }
  89.5%    { opacity: 1; transform: translateY(40cqw) scale(.8); }
  97%      { opacity: 1; transform: translateY(-34cqw) scale(.8); }
  99%, 100% { opacity: 0; transform: translateY(-40cqw) scale(.8); }
}

@keyframes mv-prog2 {
  0%        { opacity: 1; transform: scaleX(0); }
  84%       { opacity: 1; transform: scaleX(1); }
  86%, 100% { opacity: 0; transform: scaleX(1); }
}

@keyframes mv-strip1 {
  0%, 72%   { transform: translateY(0); }
  84%, 100% { transform: translateY(-100%); }
}

@keyframes mv-over1 {
  0%, 72%   { opacity: 1; }
  75%, 82%  { opacity: 0; }
  86%, 100% { opacity: 1; }
}

@keyframes mv-liked1 {
  0%, 31%   { opacity: 0; transform: scale(1); }
  34%       { opacity: 1; transform: scale(1.3); }
  38%, 73%  { opacity: 1; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes mv-pop1 {
  0%, 28%   { opacity: 0; transform: scale(.4) rotate(-8deg); }
  33%       { opacity: 1; transform: scale(1.15) rotate(-8deg); }
  40%       { opacity: 1; transform: scale(1) rotate(-8deg); }
  50%, 100% { opacity: 0; transform: translateY(-14cqw) scale(1.1) rotate(-8deg); }
}

@keyframes mv-tap1 {
  0%, 25%   { opacity: 0; transform: scale(.6); }
  27%       { opacity: 1; transform: scale(.7); }
  29%       { opacity: .3; transform: scale(1.1); }
  30.5%     { opacity: 1; transform: scale(.7); }
  34%       { opacity: 0; transform: scale(1.3); }
  66%       { opacity: 0; transform: translateY(40cqw) scale(.8); }
  69%       { opacity: 1; transform: translateY(40cqw) scale(.8); }
  82%       { opacity: 1; transform: translateY(-34cqw) scale(.8); }
  86%, 100% { opacity: 0; transform: translateY(-40cqw) scale(.8); }
}

@keyframes mv-prog1 {
  0%, 12%   { opacity: 1; transform: scaleX(0); }
  72%       { opacity: 1; transform: scaleX(.92); }
  74%, 100% { opacity: 0; transform: scaleX(.92); }
}


/* --- 13.6 Комментарии (.mcm): шторка поверх ролика ---
   7 с: печать → «отправить» → свой комментарий появляется первым.
   Статичный кадр: комментарий уже отправлен, поле пустое. */
.mcm {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.mcm-dim {
  position: absolute;
  z-index: 9;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}

.mcm-sheet {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66%;
  display: flex;
  flex-direction: column;
  padding-bottom: 1.6cqw;
  border-radius: 5cqw 5cqw 0 0;
  color: #f2f2f2;
  background: #1c1c1e;
}

.mcm--tiktok .mcm-sheet {
  background: #161616;
}

.mcm--youtube .mcm-sheet {
  background: #212121;
}

.mcm-grab {
  flex: none;
  align-self: center;
  width: 10cqw;
  height: 1.1cqw;
  margin: 2.2cqw 0 1cqw;
  border-radius: 1cqw;
  background: rgba(255, 255, 255, .3);
}

.mcm-title {
  flex: none;
  padding: 1.2cqw 0 2.6cqw;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 4cqw;
  font-weight: 800;
  text-align: center;
}

.mcm-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.mcm-list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.mcm-item {
  display: flex;
  align-items: flex-start;
  gap: 2.6cqw;
  height: 15cqw;
  padding: 2.6cqw 4cqw 0;
}

.mcm-item .mk-face {
  width: 7.6cqw;
  height: 7.6cqw;
}

.mcm-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .6cqw;
}

.mcm-item__name {
  font-size: 3.2cqw;
  font-weight: 700;
  color: #a8a8a8;
}

.mcm-item__text {
  overflow: hidden;
  font-size: 3.7cqw;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mcm-item__like {
  width: 4.2cqw;
  height: 4.2cqw;
  margin-top: 2cqw;
  color: #8a8a8a;
}

.mcm-input {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 2.4cqw 3.6cqw;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.mcm-me {
  width: 7.6cqw;
  height: 7.6cqw;
}

.mcm-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 9.4cqw;
  display: flex;
  align-items: center;
  padding: 0 3.4cqw;
  overflow: hidden;
  border-radius: 99px;
  font-size: 3.6cqw;
  white-space: nowrap;
  background: #2c2c2e;
}

.mcm-ph {
  position: absolute;
  left: 3.4cqw;
  color: #8a8a8a;
}

.mcm-typed {
  position: relative;
  display: inline-block;
  opacity: 0;
}

/* «Шторка» поверх набранного текста: уезжает вправо — текст «печатается» */
.mcm-mask {
  position: absolute;
  top: -.5cqw;
  bottom: -.5cqw;
  left: -.5cqw;
  right: -1cqw;
  background: #2c2c2e;
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

.mcm-send {
  flex: none;
  width: 9.4cqw;
  height: 9.4cqw;
  padding: 2.2cqw;
  border-radius: 50%;
  color: #fff;
  background: #0095f6;
}

.mcm--tiktok .mcm-send {
  background: #fe2c55;
}

.mcm--youtube .mcm-send {
  background: #3ea6ff;
}

/* Касание по кнопке «отправить» (центр: 8,3cqw от правого края, 8,7cqw от низа) */
.mcm .mcm-tap {
  z-index: 11;                      /* над шторкой (10) и затемнением (9) */
  top: auto;
  left: auto;
  right: 2.8cqw;
  bottom: 3.2cqw;
  margin: 0;
}

.mcm-list {
  animation: mcm-list 7s cubic-bezier(.2, .8, .2, 1) var(--mo) infinite both;
}

.mcm-item--new {
  animation: mcm-new 7s linear var(--mo) infinite both;
}

.mcm-ph {
  animation: mcm-ph 7s linear var(--mo) infinite both;
}

.mcm-typed {
  animation: mcm-typed 7s linear var(--mo) infinite both;
}

.mcm-mask {
  animation: mcm-mask 7s linear var(--mo) infinite both;
}

.mcm-send {
  animation: mcm-send 7s var(--mo) infinite both;
}

.mcm-tap {
  animation: mcm-tap 7s var(--mo) infinite both;
}

@keyframes mcm-list {
  0%, 50%  { transform: translateY(-15cqw); }
  57%, 93% { transform: translateY(0); }
  100%     { transform: translateY(-15cqw); }
}

@keyframes mcm-new {
  0%, 51%   { opacity: 0; }
  56%, 92%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes mcm-ph {
  0%, 10%   { opacity: 1; }
  11%, 47%  { opacity: 0; }
  48%, 100% { opacity: 1; }
}

@keyframes mcm-typed {
  0%, 10%   { opacity: 0; }
  11%, 47%  { opacity: 1; }
  48%, 100% { opacity: 0; }
}

@keyframes mcm-mask {
  0%, 11%   { transform: scaleX(1); }
  38%, 100% { transform: scaleX(0); }
}

@keyframes mcm-send {
  0%, 42%   { transform: scale(1); }
  44%       { transform: scale(.86); }
  47%, 100% { transform: scale(1); }
}

@keyframes mcm-tap {
  0%, 41%   { opacity: 0; transform: scale(.6); }
  42.5%     { opacity: 1; transform: scale(.75); }
  46%, 100% { opacity: 0; transform: scale(1.3); }
}


/* --- 13.7 Публикация (.mu2): подпись → кнопка → загрузка → «Опубліковано» ---
   Статичный кадр: видео опубликовано (зелёная плашка вместо кнопки). */
.mu2 {
  --mu-bg: #000;
  --mu-line: rgba(255, 255, 255, .12);
  --mu-btn: #0095f6;
  --mu-btn-fg: #fff;

  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #f5f5f5;
  background: var(--mu-bg);
  font-size: 4cqw;
  line-height: 1.3;
}

.mu2--tiktok {
  --mu-bg: #121212;
  --mu-btn: #fe2c55;
}

.mu2--youtube {
  --mu-bg: #0f0f0f;
  --mu-btn: #f1f1f1;
  --mu-btn-fg: #0f0f0f;
}

/* Шапка Android-экрана: стрелка «назад» и заголовок слева */
.mu2-head {
  position: absolute;
  top: var(--top);
  left: 0;
  right: 0;
  height: 11cqw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5cqw 0 15cqw;
}

.mu2-head > .mk-ui {
  position: absolute;
  left: 3.5cqw;
  width: 6.6cqw;
  height: 6.6cqw;
}

.mu2-title {
  overflow: hidden;
  font-size: 4.6cqw;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mu2-compose {
  position: absolute;
  top: 24cqw;
  left: 5cqw;
  right: 5cqw;
  display: flex;
  align-items: flex-start;
  gap: 4cqw;
}

/* В TikTok обложка справа от подписи */
.mu2--tiktok .mu2-compose {
  flex-direction: row-reverse;
}

.mu2-thumb {
  position: relative;
  flex: none;
  width: 27cqw;
  height: 46cqw;
  overflow: hidden;
  border-radius: 2.4cqw;
  background: #222;
}

.mu2-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2cqw;
  padding-top: 1cqw;
}

.mu2-cap {
  position: relative;
  font-size: 4cqw;
  line-height: 1.32;
}

/* «Шторка» поверх подписи: уезжает вправо — подпись «печатается» */
.mu2-mask {
  position: absolute;
  top: -.5cqw;
  bottom: -.5cqw;
  left: -1cqw;
  right: -1cqw;
  background: var(--mu-bg);
  transform: scaleX(0);
  transform-origin: 100% 50%;
}

.mu2-tags {
  font-size: 3.8cqw;
  font-weight: 600;
  color: #8fc9ff;
}

.mu2--tiktok .mu2-tags {
  font-weight: 700;
  color: #fff;
}

.mu2--youtube .mu2-tags {
  color: #3ea6ff;
}

.mu2-list {
  position: absolute;
  top: 77cqw;
  left: 0;
  right: 0;
  border-top: 1px solid var(--mu-line);
}

.mu2-row {
  display: flex;
  align-items: center;
  gap: 3cqw;
  height: 11.5cqw;
  padding: 0 5cqw;
  border-bottom: 1px solid var(--mu-line);
  font-size: 3.9cqw;
}

.mu2-row > .mk-ui {
  width: 5.6cqw;
  height: 5.6cqw;
}

.mu2-row__t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mu2-row > .mu2-row__go {
  width: 4.4cqw;
  height: 4.4cqw;
  opacity: .55;
}

.mu2-btn {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  bottom: 4.5cqw;
  height: 11.5cqw;
  display: grid;
  place-items: center;
  border-radius: 2.6cqw;
  font-size: 4.2cqw;
  font-weight: 800;
  color: var(--mu-btn-fg);
  background: var(--mu-btn);
}

.mu2--youtube .mu2-btn {
  border-radius: 99px;
}

/* Карточка загрузки на месте кнопки */
.mu2-prog {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: 2.5cqw;
  height: 16cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 2.4cqw;
  border-radius: 3cqw;
  background: #262626;
  opacity: 0;
  transform: translateY(4cqw);
}

.mu2-prog__thumb {
  position: relative;
  flex: none;
  width: 7.4cqw;
  height: 11.2cqw;
  overflow: hidden;
  border-radius: 1.2cqw;
}

.mu2-prog__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2cqw;
}

.mu2-prog__t {
  font-size: 3.8cqw;
  font-weight: 700;
}

.mu2-prog__bar {
  position: relative;
  height: 1.3cqw;
  overflow: hidden;
  border-radius: 1cqw;
  background: rgba(255, 255, 255, .18);
}

.mu2-prog__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mu-btn);
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.mu2--youtube .mu2-prog__fill {
  background: #3ea6ff;
}

/* «Опубліковано» — зелёная плашка на месте кнопки */
.mu2-done {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  bottom: 4.5cqw;
  height: 11.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  border-radius: 2.6cqw;
  font-size: 4.2cqw;
  font-weight: 800;
  color: #fff;
  background: #16a34a;
}

.mu2-done > .mu2-done__ic {
  width: 5.4cqw;
  height: 5.4cqw;
}

/* Касание по кнопке публикации (центр кнопки: 10,25cqw от низа) */
.mu2 .mu2-tap {
  top: auto;
  bottom: 4.75cqw;
  margin: 0 0 0 -5.5cqw;
}

/* single: цикл 6 с */
.mu2--single .mu2-mask {
  animation: mu2-mask 6s linear var(--mo) infinite both;
}

.mu2--single .mu2-tags {
  animation: mu2-tags 6s linear var(--mo) infinite both;
}

.mu2--single .mu2-btn {
  animation: mu2-btn 6s var(--mo) infinite both;
}

.mu2--single .mu2-tap {
  animation: mu2-tap 6s var(--mo) infinite both;
}

.mu2--single .mu2-prog {
  animation: mu2-prog 6s var(--mo) infinite both;
}

.mu2--single .mu2-prog__fill {
  animation: mu2-fill 6s linear var(--mo) infinite both;
}

.mu2--single .mu2-done {
  animation: mu2-done 6s var(--mo) infinite both;
}

/* seg: «отрезок» 4 с внутри цикла трёх приложений */
.mu2--seg .mu2-mask {
  animation: mu2-mask-s 4s linear var(--mo) infinite both;
}

.mu2--seg .mu2-tags {
  animation: mu2-tags-s 4s linear var(--mo) infinite both;
}

.mu2--seg .mu2-btn {
  animation: mu2-btn-s 4s var(--mo) infinite both;
}

.mu2--seg .mu2-tap {
  animation: mu2-tap-s 4s var(--mo) infinite both;
}

.mu2--seg .mu2-prog {
  animation: mu2-prog-s 4s var(--mo) infinite both;
}

.mu2--seg .mu2-prog__fill {
  animation: mu2-fill-s 4s linear var(--mo) infinite both;
}

.mu2--seg .mu2-done {
  animation: mu2-done-s 4s var(--mo) infinite both;
}

@keyframes mu2-mask {
  0%, 8%   { transform: scaleX(1); }
  30%, 97% { transform: scaleX(0); }
  100%     { transform: scaleX(1); }
}

@keyframes mu2-tags {
  0%, 28%  { opacity: 0; }
  32%, 96% { opacity: 1; }
  100%     { opacity: 0; }
}

@keyframes mu2-btn {
  0%, 34%  { opacity: 1; transform: scale(1); }
  35.5%    { opacity: 1; transform: scale(.95); }
  37%      { opacity: 1; transform: scale(1); }
  39%, 96% { opacity: 0; transform: scale(1); }
  100%     { opacity: 1; transform: scale(1); }
}

@keyframes mu2-tap {
  0%, 33%   { opacity: 0; transform: scale(.6); }
  34.5%     { opacity: 1; transform: scale(.75); }
  38%, 100% { opacity: 0; transform: scale(1.3); }
}

@keyframes mu2-prog {
  0%, 38%   { opacity: 0; transform: translateY(4cqw); }
  41%, 77%  { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes mu2-fill {
  0%, 41%   { transform: scaleX(.02); }
  76%, 100% { transform: scaleX(1); }
}

@keyframes mu2-done {
  0%, 78%   { opacity: 0; transform: translateY(3cqw) scale(.94); }
  82%, 94%  { opacity: 1; transform: translateY(0) scale(1); }
  98%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes mu2-mask-s {
  0%, 14%   { transform: scaleX(1); }
  34%, 100% { transform: scaleX(0); }
}

@keyframes mu2-tags-s {
  0%, 32%   { opacity: 0; }
  36%, 100% { opacity: 1; }
}

@keyframes mu2-btn-s {
  0%, 38%   { opacity: 1; transform: scale(1); }
  39.5%     { opacity: 1; transform: scale(.95); }
  41%       { opacity: 1; transform: scale(1); }
  43%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes mu2-tap-s {
  0%, 37%   { opacity: 0; transform: scale(.6); }
  38.5%     { opacity: 1; transform: scale(.75); }
  42%, 100% { opacity: 0; transform: scale(1.3); }
}

@keyframes mu2-prog-s {
  0%, 42%   { opacity: 0; transform: translateY(4cqw); }
  45%, 73%  { opacity: 1; transform: translateY(0); }
  76%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes mu2-fill-s {
  0%, 45%   { transform: scaleX(.02); }
  72%, 100% { transform: scaleX(1); }
}

@keyframes mu2-done-s {
  0%, 74%   { opacity: 0; transform: translateY(3cqw) scale(.94); }
  78%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* --- 13.8 Профиль (.mpf): новое видео первым в сетке ---
   Статичный кадр: видео уже в сетке, внизу плашка «Опубліковано». */
.mpf {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #f5f5f5;
  background: #000;
  font-size: 3.6cqw;
  line-height: 1.3;
}

.mpf--tiktok {
  background: #121212;
}

.mpf--youtube {
  background: #0f0f0f;
}

.mpf-top {
  position: absolute;
  top: var(--top);
  left: 0;
  right: 0;
  height: 10cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 4.4cqw;
}

.mpf-top > .mk-ui {
  width: 5.8cqw;
  height: 5.8cqw;
}

.mpf-top__name {
  min-width: 0;
  overflow: hidden;
  font-size: 4.8cqw;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mpf-head {
  position: absolute;
  top: 22cqw;
  left: 4.4cqw;
  right: 4.4cqw;
  display: flex;
  align-items: center;
  gap: 4cqw;
}

.mpf-ava {
  position: relative;
  flex: none;
  display: block;
  width: 19cqw;
  height: 19cqw;
  padding: .8cqw;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}

.mpf-ava > .mk-face {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 .7cqw #000;
}

.mpf--tiktok .mpf-ava,
.mpf--youtube .mpf-ava {
  padding: 0;
  background: none;
}

.mpf-who {
  display: flex;
  flex-direction: column;
  gap: .8cqw;
  min-width: 0;
}

.mpf-who b {
  overflow: hidden;
  font-size: 4.2cqw;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mpf-who span {
  font-size: 3.4cqw;
  color: #bdbdbd;
}

/* TikTok: шапка профиля по центру */
.mpf--tiktok .mpf-head {
  top: 20.5cqw;
  flex-direction: column;
  gap: 1.8cqw;
  text-align: center;
}

.mpf--tiktok .mpf-who {
  align-items: center;
}

.mpf-btns {
  position: absolute;
  top: 45cqw;
  left: 4.4cqw;
  right: 4.4cqw;
  display: flex;
  gap: 1.8cqw;
}

.mpf--tiktok .mpf-btns {
  top: 55cqw;
  left: 6cqw;
  right: 6cqw;
}

.mpf-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 8cqw;
  padding: 0 1.6cqw;
  overflow: hidden;
  border-radius: 2cqw;
  font-size: 3.1cqw;
  font-weight: 700;
  line-height: 8cqw;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #262626;
}

.mpf--youtube .mpf-btn {
  border-radius: 99px;
  background: #272727;
}

.mpf-tabs {
  position: absolute;
  top: 56cqw;
  left: 0;
  right: 0;
  height: 9cqw;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mpf--tiktok .mpf-tabs {
  top: 66cqw;
}

.mpf-tab {
  position: relative;
  flex: 1 1 0;
  display: grid;
  place-items: center;
  font-size: 3.4cqw;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
}

.mpf-tab.is-on {
  color: #fff;
}

.mpf-tab.is-on::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -1px;
  height: .6cqw;
  background: #fff;
}

.mpf-tab > .mk-ui {
  width: 5.4cqw;
  height: 5.4cqw;
}

.mpf-grid {
  position: absolute;
  top: 65.5cqw;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5cqw;
}

.mpf--tiktok .mpf-grid {
  top: 75.5cqw;
}

.mpf-cell {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1a1a1a;
}

/* Новое видео: пока «загружается» — затемнено и с кольцом загрузки */
.mpf-cell--new {
  z-index: 1;
}

.mpf-cell--new::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
}

.mpf-cell--new::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 9cqw;
  height: 9cqw;
  margin: -4.5cqw 0 0 -4.5cqw;
  border: .8cqw solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
}

/* Плашка «Опубліковано» — внизу, над меню приложения (не закрывает имя профиля) */
.mpf-toast {
  position: absolute;
  z-index: 9;
  bottom: calc(var(--nav-h) + 3cqw);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  padding: 2cqw 4cqw 2cqw 2.6cqw;
  border-radius: 99px;
  font-size: 3.6cqw;
  font-weight: 800;
  white-space: nowrap;
  color: #111;
  background: #fff;
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .45);
  transform: translateX(-50%);
}

.mpf-toast > .mpf-toast__ic {
  width: 4.6cqw;
  height: 4.6cqw;
  color: #12a150;
}

.mpf--seg .mpf-cell--new {
  animation: mpf-pulse 4s var(--mo) infinite both;
}

.mpf--seg .mpf-cell--new::before {
  animation: mpf-load 4s linear var(--mo) infinite both;
}

.mpf--seg .mpf-cell--new::after {
  animation: mk-spin .9s linear infinite, mpf-load 4s linear var(--mo) infinite both;
}

.mpf--seg .mpf-toast {
  animation: mpf-toast 4s var(--mo) infinite both;
}

@keyframes mpf-load {
  0%, 40%   { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@keyframes mpf-pulse {
  0%, 42%   { transform: scale(1); }
  46%       { transform: scale(1.06); }
  52%, 100% { transform: scale(1); }
}

@keyframes mpf-toast {
  0%, 46%   { opacity: 0; transform: translate(-50%, 3cqw); }
  51%, 100% { opacity: 1; transform: translate(-50%, 0); }
}


/* --- 13.9 Лента Instagram (.mig): истории, посты, лайк, свайп (9 с) --- */
.mig {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #f5f5f5;
  background: #000;
  font-size: 3.6cqw;
  line-height: 1.3;
}

.mig-head {
  position: absolute;
  top: var(--top);
  left: 0;
  right: 0;
  height: 11cqw;
  display: flex;
  align-items: center;
  gap: 4.6cqw;
  padding: 0 4.5cqw;
}

.mig-head > .mk-ui {
  width: 6.4cqw;
  height: 6.4cqw;
}

/* Логотип — рукописным шрифтом системы */
.mig-logo {
  font-family: 'Segoe Script', 'Snell Roundhand', 'Brush Script MT', 'Lucida Handwriting', cursive;
  font-size: 6.6cqw;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.mig-stories {
  position: absolute;
  top: 21cqw;
  left: 0;
  right: 0;
  height: 24cqw;
  display: flex;
  gap: 2.4cqw;
  padding: 0 3cqw;
  overflow: hidden;
}

.mig-story {
  flex: none;
  width: 17.4cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
}

.mig-story__ring {
  position: relative;
  display: block;
  width: 17cqw;
  height: 17cqw;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}

.mig-story--me .mig-story__ring {
  background: #3a3a3a;
}

.mig-story__ring > .mk-scene {
  inset: 1.2cqw;
  border-radius: 50%;
  box-shadow: 0 0 0 .7cqw #000;
}

.mig-story__n {
  width: 100%;
  overflow: hidden;
  font-size: 2.8cqw;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #ddd;
}

.mig-view {
  position: absolute;
  top: 46cqw;
  left: 0;
  right: 0;
  bottom: var(--nav-h);
  overflow: hidden;
  border-top: 1px solid #1f1f1f;
}

.mig-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Высота поста фиксирована (136cqw) — на столько лента сдвигается за шаг */
.mig-post {
  height: 136cqw;
  overflow: hidden;
}

.mig-post__head {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  height: 12cqw;
  padding: 0 3.5cqw;
}

.mig-post__user {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 3.7cqw;
  font-weight: 700;
}

.mig-post__head > .mk-ui {
  width: 5cqw;
  height: 5cqw;
}

.mig-post__media {
  position: relative;
  height: 100cqw;
  overflow: hidden;
}

.mig-post__act {
  display: flex;
  align-items: center;
  gap: 4cqw;
  height: 11cqw;
  padding: 0 3.6cqw;
}

.mig-post__act > .mk-ui,
.mig-post__act > .mv-btn {
  width: 6.6cqw;
  height: 6.6cqw;
}

.mig-post__cap {
  display: -webkit-box;
  padding: 0 3.6cqw;
  overflow: hidden;
  font-size: 3.6cqw;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* У Instagram сердце после двойного тапа — белое */
.mig .mv-pop {
  top: 50%;
  color: #fff;
}

.mig-tap {
  top: 50%;
}

.mig-swipe {
  top: 62%;
}

.mig-track {
  animation: mig-scroll 9s cubic-bezier(.6, 0, .25, 1) var(--mo) infinite both;
}

.mig-post--1 .mv-btn__on {
  animation: mig-liked 9s linear var(--mo) infinite both;
}

.mig-post--1 .mv-pop {
  animation: mig-pop 9s var(--mo) infinite both;
}

.mig-tap {
  animation: mig-tap 9s var(--mo) infinite both;
}

.mig-swipe {
  animation: mig-swipe 9s var(--mo) infinite both;
}

@keyframes mig-scroll {
  0%, 36%   { transform: translateY(0); }
  46%, 86%  { transform: translateY(-136cqw); }
  96%, 100% { transform: translateY(-272cqw); }
}

@keyframes mig-liked {
  0%, 16%   { opacity: 0; transform: scale(1); }
  18%       { opacity: 1; transform: scale(1.3); }
  20%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes mig-pop {
  0%, 14%   { opacity: 0; transform: scale(.4); }
  16.5%     { opacity: 1; transform: scale(1.15); }
  20%       { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: 0; transform: scale(1.1); }
}

@keyframes mig-tap {
  0%, 12%   { opacity: 0; transform: scale(.6); }
  13%       { opacity: 1; transform: scale(.7); }
  14%       { opacity: .3; transform: scale(1.1); }
  14.8%     { opacity: 1; transform: scale(.7); }
  16.5%, 100% { opacity: 0; transform: scale(1.3); }
}

@keyframes mig-swipe {
  0%, 33%   { opacity: 0; transform: translateY(30cqw) scale(.8); }
  34.5%     { opacity: 1; transform: translateY(30cqw) scale(.8); }
  43%       { opacity: 1; transform: translateY(-36cqw) scale(.8); }
  45%       { opacity: 0; transform: translateY(-40cqw) scale(.8); }
  45.1%, 83% { opacity: 0; transform: translateY(30cqw) scale(.8); }
  84.5%     { opacity: 1; transform: translateY(30cqw) scale(.8); }
  93%       { opacity: 1; transform: translateY(-36cqw) scale(.8); }
  95%, 100% { opacity: 0; transform: translateY(-40cqw) scale(.8); }
}


/* --- 13.10 Рабочий стол (.mh) ---
   Цикл 12 с: уведомление Media Box → касание Instagram → приложение
   открывается из значка → закрывается; затем TikTok, затем YouTube.
   Статичный кадр: рабочий стол с виджетом и значками соцсетей. */
.mh-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 55% at 15% 8%, #6a46ff 0%, rgba(106, 70, 255, 0) 70%),
    radial-gradient(80% 60% at 95% 95%, #00b3d6 0%, rgba(0, 179, 214, 0) 70%),
    radial-gradient(70% 40% at 80% 35%, rgba(255, 92, 170, .55) 0%, rgba(255, 92, 170, 0) 70%),
    linear-gradient(165deg, #1d1650 0%, #101a44 55%, #07142b 100%);
}

/* Виджет Media Box: задачи телефона, полоски без цифр (виджеты есть и на Android) */
.mh-widget {
  position: absolute;
  top: 12.5cqw;
  left: 5cqw;
  right: 5cqw;
  height: 40cqw;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  padding: 3.6cqw 4cqw;
  border-radius: 6cqw;
  color: #fff;
  background: rgba(18, 22, 44, .58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.mh-widget__head {
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-size: 3.8cqw;
}

.mh-widget__on {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-size: 3cqw;
  font-weight: 600;
  color: #9ff0cf;
}

.mh-widget__on::before {
  content: '';
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 50%;
  background: #34e0a1;
}

.mh-widget__list {
  display: flex;
  flex-direction: column;
  gap: 2.2cqw;
}

.mh-task {
  display: grid;
  gap: 1cqw;
}

.mh-task__t {
  overflow: hidden;
  font-size: 3cqw;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, .85);
}

.mh-task__bar {
  position: relative;
  height: 1.2cqw;
  overflow: hidden;
  border-radius: 1cqw;
  background: rgba(255, 255, 255, .14);
}

.mh-task__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #38d9ff, #7b5cff);
  transform: scaleX(.78);
  transform-origin: 0 50%;
}

.mh-task--2 .mh-task__fill {
  transform: scaleX(.52);
}

.mh-task--3 .mh-task__fill {
  transform: scaleX(.3);
}

/* Сетка значков 4 × 3; первый ряд — Instagram, TikTok, YouTube, Telegram.
   Значки круглые (как на Android-смартфонах Pixel), 14cqw.
   Центры значков первого ряда: x = 15,5 / 38,5 / 61,5cqw, y = 65cqw —
   на них завязаны касания и «вырастание» приложений (ниже). */
.mh-grid {
  position: absolute;
  top: 58cqw;
  left: 4cqw;
  right: 4cqw;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 5.4cqw;
}

.mh-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4cqw;
  min-width: 0;
}

.mh-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 2.8cqw;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 .2cqw .8cqw rgba(0, 0, 0, .45);
}

/* Значок приложения — круг */
.mh-icon {
  position: relative;
  display: block;
  flex: none;
  width: 14cqw;
  height: 14cqw;
  padding: 3.2cqw;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: #444;
  box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .3);
}

.mh-icon--instagram {
  padding: 3.1cqw;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.mh-icon--tiktok {
  padding: 3.4cqw;
  background: #000;
}

.mh-icon--tiktok svg {
  filter: drop-shadow(-.45cqw -.3cqw 0 #25f4ee) drop-shadow(.45cqw .3cqw 0 #fe2c55);
}

.mh-icon--youtube {
  padding: 2.6cqw;
  color: #ff0033;
  background: #fff;
}

.mh-icon--telegram {
  padding: 3.4cqw 3.7cqw 3.4cqw 3.1cqw;
  background: linear-gradient(180deg, #37aee2, #1e96c8);
}

.mh-icon--mediabox {
  padding: 2.6cqw;
  background: linear-gradient(135deg, #38d9ff 0%, #7b5cff 100%);
}

/* «Галерея»: вертушка из четырёх цветных лепестков */
.mh-icon--gallery {
  background: #fff;
}

.mh-icon--gallery::before {
  content: '';
  position: absolute;
  inset: 2.6cqw;
  border-radius: 50%;
  background: conic-gradient(#ea4335 0 90deg, #fbbc05 90deg 180deg, #34a853 180deg 270deg, #4285f4 270deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0 20%, #000 21%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0 20%, #000 21%);
}

/* «Play Маркет»: цветной треугольник «пуск» */
.mh-icon--store {
  background: #fff;
}

.mh-icon--store::before {
  content: '';
  position: absolute;
  top: 3.4cqw;
  bottom: 3.4cqw;
  left: 4.4cqw;
  right: 3.2cqw;
  background: conic-gradient(from 225deg at 30% 50%, #ff3a44 0 90deg, #ffd400 90deg 180deg, #00f076 180deg 270deg, #00c3ff 270deg);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.mh-icon--settings {
  padding: 2.8cqw;
  color: #fff;
  background: linear-gradient(180deg, #7c8aa3, #56627a);
}

.mh-icon--clock {
  padding: 2.6cqw;
  color: #fff;
  background: #1c2a4a;
}

.mh-icon--calendar {
  display: grid;
  place-items: center;
  padding: 0;
  background: #fff;
  box-shadow: inset 0 0 0 .8cqw #4285f4, 0 .6cqw 1.6cqw rgba(0, 0, 0, .3);
}

.mh-cal__d {
  font-size: 6.4cqw;
  font-weight: 700;
  line-height: 1;
  color: #1a73e8;
}

.mh-icon--notes {
  padding: 3.6cqw;
  color: #fff;
  background: #fbbc04;
}

/* «Погода»: солнце за облаком */
.mh-icon--weather {
  background: linear-gradient(180deg, #2f8ef0, #6cc2ff);
}

.mh-icon--weather::before {
  content: '';
  position: absolute;
  left: 2.8cqw;
  top: 2.8cqw;
  width: 5.6cqw;
  height: 5.6cqw;
  border-radius: 50%;
  background: #ffd23f;
}

.mh-icon--weather::after {
  content: '';
  position: absolute;
  left: 5cqw;
  top: 6.6cqw;
  width: 6.8cqw;
  height: 3.6cqw;
  border-radius: 3cqw;
  background: #fff;
  box-shadow: -2.2cqw .5cqw 0 -.5cqw #fff;
}

/* Нижний ряд: телефон, сообщения, браузер, камера */
.mh-icon--dphone {
  padding: 3.6cqw;
  background: #1a73e8;
}

.mh-icon--dmsg {
  padding: 3.4cqw;
  background: #1b6ef3;
}

/* Браузер: трёхцветное кольцо с синей серединой */
.mh-icon--dweb {
  padding: 0;
  background:
    radial-gradient(circle, #4285f4 0 22%, #fff 23% 31%, rgba(255, 255, 255, 0) 32%),
    conic-gradient(from -60deg, #ea4335 0 120deg, #fbbc05 120deg 240deg, #34a853 240deg 360deg);
}

.mh-icon--dcam {
  padding: 3.2cqw;
  color: #3c4043;
  background: #e8eaed;
}

/* Маленькие значки в виджете и в уведомлении */
.mh-widget .mh-icon {
  width: 7cqw;
  height: 7cqw;
  padding: 1.3cqw;
  box-shadow: none;
}

.mh-banner .mh-icon {
  width: 4.8cqw;
  height: 4.8cqw;
  padding: .9cqw;
  box-shadow: none;
}

/* Строка поиска над нижним рядом */
.mh-search {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  bottom: calc(22.4cqw + var(--sysnav));
  height: 11cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 4cqw;
  border-radius: 99px;
  color: #e8eaed;
  background: rgba(28, 32, 52, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.mh-search__g {
  display: block;
  flex: none;
  width: 5.4cqw;
  height: 5.4cqw;
  border-radius: 50%;
  background: conic-gradient(#ea4335 0 90deg, #fbbc05 90deg 180deg, #34a853 180deg 270deg, #4285f4 270deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0 42%, #000 44%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0 42%, #000 44%);
}

.mh-search > .mk-ui {
  width: 5.4cqw;
  height: 5.4cqw;
}

.mh-dock {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  bottom: calc(3cqw + var(--sysnav));
  height: 17cqw;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* Уведомление Media Box — в стиле Android: строка «значок · Media Box · зараз»,
   под ней текст */
.mh-banner {
  position: absolute;
  z-index: 20;
  top: 11cqw;
  left: 3cqw;
  right: 3cqw;
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  padding: 3cqw 4cqw 3.4cqw;
  border-radius: 5cqw;
  color: #1f1f1f;
  background: rgba(243, 245, 251, .97);
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(-26cqw);
}

.mh-banner__head {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  min-width: 0;
  font-size: 2.9cqw;
  color: #5f6368;
}

.mh-banner__head b {
  font-weight: 600;
  color: #3c4043;
}

.mh-banner__t {
  overflow: hidden;
  font-size: 3.6cqw;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Касания по значкам и «вырастающие» из них приложения */
.mh-tap {
  z-index: 13;
  top: 65cqw;
  left: 15.5cqw;
}

.mh-tap--2 {
  left: 38.5cqw;
}

.mh-tap--3 {
  left: 61.5cqw;
}

.mh-open {
  --seg-d: 0s;

  position: absolute;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  border-bottom: var(--sysnav) solid #000;   /* полоса под кнопками ◁ ○ □ */
  border-radius: 6cqw;
  opacity: 0;
  transform: scale(.14);
  transform-origin: 15.5cqw 65cqw;
}

.mh-open--2 {
  --seg-d: -8s;
  transform-origin: 38.5cqw 65cqw;
}

.mh-open--3 {
  --seg-d: -4s;
  transform-origin: 61.5cqw 65cqw;
}

.mh-banner {
  animation: mh-banner 12s var(--mo) infinite both;
}

.mh-tap {
  animation: mh-tap 12s var(--mo) infinite both;
}

.mh-tap--2 {
  animation-delay: calc(var(--mo) - 8s);
}

.mh-tap--3 {
  animation-delay: calc(var(--mo) - 4s);
}

.mh-open {
  animation: mh-open 12s var(--mo) infinite both;
  animation-delay: calc(var(--mo) + var(--seg-d));
}

.mh-open > .mk-splash {
  animation: mh-splash 12s linear infinite both;
  animation-delay: calc(var(--mo) + var(--seg-d));
}

.mh-task__fill {
  animation: mh-fill 12s linear var(--mo) infinite both;
}

/* Полоски «перезапускаются» (скачок к началу) только пока рабочий стол
   закрыт открытым приложением: 1-я — на 11 с, 2-я — на 7 с, 3-я — на 3 с */
.mh-task--1 .mh-task__fill {
  animation-delay: calc(var(--mo) - 1s);
}

.mh-task--2 .mh-task__fill {
  animation-delay: calc(var(--mo) - 5s);
}

.mh-task--3 .mh-task__fill {
  animation-delay: calc(var(--mo) - 9s);
}

@keyframes mh-banner {
  0%, 1%     { opacity: 0; transform: translateY(-26cqw); }
  4%, 8.6%   { opacity: 1; transform: translateY(0); }
  10.6%, 100% { opacity: 0; transform: translateY(-26cqw); }
}

@keyframes mh-tap {
  0%, 10%   { opacity: 0; transform: scale(.6); }
  11%       { opacity: 1; transform: scale(.75); }
  13.5%, 100% { opacity: 0; transform: scale(1.35); }
}

@keyframes mh-open {
  0%, 11.4% { opacity: 0; transform: scale(.14); }
  12%       { opacity: 1; }
  15.5%, 29% { opacity: 1; transform: scale(1); }
  32.4%, 100% { opacity: 0; transform: scale(.14); }
}

@keyframes mh-splash {
  0%, 15.5% { opacity: 1; }
  17.5%, 100% { opacity: 0; }
}

@keyframes mh-fill {
  from { transform: scaleX(.18); }
  to   { transform: scaleX(.92); }
}


/* --- 13.11 Три приложения по очереди (.mk-seg): по 4 с на каждое ---
   Отрезок 1 виден в 0–4 с, 2 — в 4–8 с, 3 — в 8–12 с (отрицательные
   задержки). Внутренние анимации отрезка идут циклом 4 с и совпадают
   с его появлением. Статичный кадр — первое приложение. */
.mk-seg {
  opacity: 0;
  animation: mk-seg 12s var(--mo) infinite both;
}

.mk-seg--1 {
  opacity: 1;
}

.mk-seg--2 {
  animation-delay: calc(var(--mo) - 8s);
}

.mk-seg--3 {
  animation-delay: calc(var(--mo) - 4s);
}

@keyframes mk-seg {
  0%        { opacity: 0; transform: scale(.92); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  3%        { opacity: 1; transform: scale(1); }
  31%       { opacity: 1; transform: scale(1); animation-timing-function: ease-in; }
  33.3%     { opacity: 0; transform: scale(1.03); }
  100%      { opacity: 0; transform: scale(.92); }
}