/* The 70% glyph scale matches the previous display font's layout footprint. */
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400 700;font-display:swap;size-adjust:70%;src:url('assets/fonts/press-start-2p.woff2') format('woff2')}
.chrome .chrome__cta{flex:0 1 auto;min-width:0;white-space:nowrap;text-align:center;line-height:1.6}
@media(max-width:640px){.chrome .chrome__cta{display:none}}
@media(max-width:360px){.chrome .chrome__stage{display:none}.chrome .chrome__band{gap:6px;padding-inline:10px}}
/* ═══════════════════════════════════════════════════════════════════════
   CRAZYBOTS — главная. Пиксельный язык взят из панели Chatty
   (src/styles/_tokens.scss, _fonts.scss, _mixins.scss): те же цвета,
   те же два шрифта, тот же приём объёма — светлая кромка сверху-слева,
   тёмная снизу-справа, жёсткая тень без размытия.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Шрифты: свои файлы, кириллица отдельной подвыборкой ──────────────── */


@font-face{font-family:'Ark Pixel';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/ark-pixel-12-zh.woff2?v=30) format('woff2')}   /* Ark Pixel 12px zh_cn, подмножество под тексты страницы, OFL 1.1 */

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/jetbrains-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/jetbrains-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/jetbrains-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ── Токены ───────────────────────────────────────────────────────────
   Цвета взяты из фирменных файлов, не подобраны на глаз:
   logo_1.svg → оранжевый #ff6601, синий #023554, голубой #55a0df;
   промо-дек (chatty_plan/chatty_promo_visual_story/deck.css) → петроль,
   циан, бумага, жёлтый, зелёный.                                        */
:root{
  /* Палитра панели робота Chatty (chattybot-frontend/src/styles/_tokens.scss):
     кремовая страница и кремовый лист, синие ступенчатые рамки, синяя полоса-шапка
     с бликом, тёмно-синяя рейка, кнопки семейством. Оранжевый — только для текущего. */
  --ground:#f1ebda;       /* фон страницы — на тон глубже листа */
  --ink:#0d1b2a;          /* экран лица, чернила */
  --rule:#000622;         /* самая тёмная линия */
  --petrol:#0d1b2a;       /* основной текст */
  --navy:#0d5bd9;         /* заголовки, текст и синие заливки */
  --outline-blue:var(--heading-blue); /* рамки в цвет заголовков */
  --rail:#012556;         /* рейка/полоса трассы */
  --heading-blue:var(--band); /* заголовки в тон синей шапке */
  --band:#0d5bd9;         /* синяя полоса-шапка */
  --band-glow:#5eb0fe;--band-glow-2:#2b83fa;--bevel-lt:#dad7d5;--bevel-md:#c8c4c1;
  --paper:#fcf9f1;        /* лист панели */
  --paper-lo:#f4efe2;
  --white:#fcf9f1;
  --butter:#fcf5d1;       /* пузырь реплики гостя в диалогах: тёплый против
                             холодного пузыря робота (--bubble) */
  --blue:#004bfc;         /* основное действие */
  --blue-line:#010e67;
  --blue-lit:#1e6bff;
  --blue-soft:#8dc6ff;    /* подписи на тёмном, выделение */
  --blue-pale:#d0ecfc;    /* обычная кнопка */
  --blue-pale-line:var(--band); /* единый синий для текста и нажатия вторичных кнопок */
  --orange:#ff6601;       /* основное действие и указатель, цвет логотипа */
  --orange-line:#8f3600;
  --sky-blue:#8dc6ff;
  --cyan:#5eb0fe;         /* пиксели лица, блик полосы */
  --yellow:#ffd875;
  --green:#0e4a2e;
  --green-soft:#d6efe6;
  --mint:#b7f0c1;
  --slate:#6b7a99;
  --mist:#dce5f5;
  --shadow:#cec1a0;       /* жёсткая тень на креме */
  --shadow-paper:#cec1a0;
  --emboss-hi:#ffffff;--emboss-lo:#dccfae;
  --brick:#e2dac5;
  --asphalt:#4f5b73;      /* полоса трассы: холодный серый в тон чернилам и сланцу */
  --stair:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 2px,calc(100% - 4px) 2px,calc(100% - 4px) 4px,calc(100% - 2px) 4px,calc(100% - 2px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 2px) calc(100% - 6px),calc(100% - 2px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 2px),calc(100% - 6px) calc(100% - 2px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 2px),4px calc(100% - 2px),4px calc(100% - 4px),2px calc(100% - 4px),2px calc(100% - 6px),0 calc(100% - 6px),0 6px,2px 6px,2px 4px,4px 4px,4px 2px,6px 2px);   /* лестница угла 3×2 px — обрезка подложки и тени под ступенчатую рамку */
  --frame-orange:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'><path fill='%238f3600' d='M4 2h1v1h-1zM5 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM13 2h1v1h-1zM12 2h1v1h-1zM13 3h1v1h-1zM12 3h1v1h-1zM15 4h1v1h-1zM14 4h1v1h-1zM13 4h1v1h-1zM12 4h1v1h-1zM15 5h1v1h-1zM14 5h1v1h-1zM13 5h1v1h-1zM12 5h1v1h-1zM4 15h1v1h-1zM5 15h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM2 13h1v1h-1zM3 13h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM2 12h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM5 12h1v1h-1zM13 15h1v1h-1zM12 15h1v1h-1zM13 14h1v1h-1zM12 14h1v1h-1zM15 13h1v1h-1zM14 13h1v1h-1zM13 13h1v1h-1zM12 13h1v1h-1zM15 12h1v1h-1zM14 12h1v1h-1zM13 12h1v1h-1zM12 12h1v1h-1zM6 0h6v3h-6zM6 15h6v3h-6zM0 6h3v6h-3zM15 6h3v6h-3zM3 3h1v1h-1zM14 3h1v1h-1zM3 14h1v1h-1zM14 14h1v1h-1z'/></svg>");
  --frame-blue2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'><path fill='%230d5bd9' d='M4 2h1v1h-1zM5 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM13 2h1v1h-1zM12 2h1v1h-1zM13 3h1v1h-1zM12 3h1v1h-1zM15 4h1v1h-1zM14 4h1v1h-1zM13 4h1v1h-1zM12 4h1v1h-1zM15 5h1v1h-1zM14 5h1v1h-1zM13 5h1v1h-1zM12 5h1v1h-1zM4 15h1v1h-1zM5 15h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM2 13h1v1h-1zM3 13h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM2 12h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM5 12h1v1h-1zM13 15h1v1h-1zM12 15h1v1h-1zM13 14h1v1h-1zM12 14h1v1h-1zM15 13h1v1h-1zM14 13h1v1h-1zM13 13h1v1h-1zM12 13h1v1h-1zM15 12h1v1h-1zM14 12h1v1h-1zM13 12h1v1h-1zM12 12h1v1h-1zM6 0h6v3h-6zM6 15h6v3h-6zM0 6h3v6h-3zM15 6h3v6h-3zM3 3h1v1h-1zM14 3h1v1h-1zM3 14h1v1h-1zM14 14h1v1h-1z'/></svg>");
  --frame-img:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'><path fill='%230d5bd9' d='M4 2h1v1h-1zM5 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM13 2h1v1h-1zM12 2h1v1h-1zM13 3h1v1h-1zM12 3h1v1h-1zM15 4h1v1h-1zM14 4h1v1h-1zM13 4h1v1h-1zM12 4h1v1h-1zM15 5h1v1h-1zM14 5h1v1h-1zM13 5h1v1h-1zM12 5h1v1h-1zM4 15h1v1h-1zM5 15h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM2 13h1v1h-1zM3 13h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM2 12h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM5 12h1v1h-1zM13 15h1v1h-1zM12 15h1v1h-1zM13 14h1v1h-1zM12 14h1v1h-1zM15 13h1v1h-1zM14 13h1v1h-1zM13 13h1v1h-1zM12 13h1v1h-1zM15 12h1v1h-1zM14 12h1v1h-1zM13 12h1v1h-1zM12 12h1v1h-1zM6 0h6v3h-6zM6 15h6v3h-6zM0 6h3v6h-3zM15 6h3v6h-3zM3 3h1v1h-1zM14 3h1v1h-1zM3 14h1v1h-1zM14 14h1v1h-1z'/></svg>");

  /* Вторичный текст, разделители и лёгкие заливки набраны прозрачностью
     чернил. Ночью чернила светлые, и та же прозрачность должна считаться уже
     от них — поэтому у каждой ступени свой токен, а не rgba по месту. */
  --text-lede:var(--text-lede);   /* лид, крупный вторичный текст */
  --text-soft:var(--text-soft);   /* основной вторичный */
  --text-mute:var(--text-mute);    /* мелкие подписи */
  --text-faint:var(--text-faint);  /* рамки пиксельных иконок, штриховка */
  --text-ghost:var(--text-ghost);   /* точечные разделители */
  --line-soft:var(--line-soft);   /* пунктир списков */
  --wash-lo:var(--wash-lo);     /* самая лёгкая заливка-зона */
  --wash:var(--wash);
  --wash-hi:var(--wash-hi);     /* внутренняя тень стенда */
  --bar-idle:var(--bar-idle);    /* пустой столбик графика */
  --paper-veil:var(--paper-veil); /* лист поверх фотографии */
  --field:#f5eeda;                  /* заливка поля ввода */
  --field-dots:var(--field-dots);  /* точечная фактура поля карты зон */
  /* Синий бывает текстом и бывает заливкой, и ночью это расходится: текст
     уходит в светлый, заливка остаётся насыщенной, иначе кремовая подпись на
     ней пропадает. Днём оба — один и тот же #0d5bd9. Так же разведены
     зелёный и оранжевый, у которых есть и заливка, и текстовая роль. */
  --navy-fill:#0d5bd9;
  --green-ink:#0e4a2e;
  --orange-ink:#8f3600;
  /* Пара к --white: тёмные чернила на СВЕТЛОЙ акцентной плашке (золото,
     циан). Сами плашки в обеих темах одинаковые, значит и чернила на них
     одинаковые: если брать --petrol, ночью он уходит в кремовый и надпись
     на золоте пропадает. */
  --ink-accent:#0d1b2a;
  --photo-mat:#fff;                 /* подложка под фото и схемы: снимки сняты
                                       на белом, и ночью она тоже белая */

  /* Цветные островки страниц роботов: мятный блок «цикла обучения», голубой
     блок программы и пузыри диалога. Ночью они уходят в тёмное, а линии и
     текст в них — в светлое: так же разведена доска сценариев в панели
     ($cb-d-scen-move / $cb-d-scen-mimic и их линии). */
  --mint-soft:#d6efe6;   --mint-line:#98bfb0;
  --sky-soft:#e3f1fc;    --sky-line:#a5c2e1;  --sky-active:#ceecfc;
  --bubble:#e3f2fc;      --bubble-line:#91b6db;  --bubble-guest-line:#d8c995;
  /* Карта зон: чем ближе гость, тем теплее плитка */
  --zone-mid:rgba(94,176,254,.22);  --zone-mid-hi:rgba(94,176,254,.4);
  --zone-near:rgba(255,102,1,.16);  --zone-near-hi:rgba(255,102,1,.35);
  --wash-orange:rgba(255,102,1,.08);

  --stair-sm:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 1px,calc(100% - 2px) 1px,calc(100% - 2px) 2px,calc(100% - 1px) 2px,calc(100% - 1px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 1px) calc(100% - 3px),calc(100% - 1px) calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) calc(100% - 1px),calc(100% - 3px) calc(100% - 1px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 1px),2px calc(100% - 1px),2px calc(100% - 2px),1px calc(100% - 2px),1px calc(100% - 3px),0 calc(100% - 3px),0 3px,1px 3px,1px 2px,2px 2px,2px 1px,3px 1px);   /* лестница угла 1 px — мелкие элементы: тумблер темы */

  /* Кирпич аркадного уровня (game.js рисует его на канве и читает эти токены).
     Отдельно от --brick: там полоса-платформа между стадиями, а здесь стена
     лабиринта, и ночью ей нужен запас контраста к подложке страницы. */
  --maze-brick:#e2dac5;  --maze-brick-lo:#cec1a0;
  /* Корпус 3D-Chatty (main.js красит им меши модели). Днём — тон полосы-шапки;
     ночью полоса темнеет, а робот на тёмной странице должен остаться ярким,
     поэтому у корпуса свой токен, а не var(--band). */
  --robot-body:#0d5bd9;
  --robot-bounce:#cbd8dc;   /* отражённый свет сцены робота */

  --line:2px;
  --u:8px;
  --font-display:'Press Start 2P',system-ui,sans-serif;
  /* китайский: иероглифы берёт пиксельный Ark Pixel (OFL), латиницу — Press Start 2P */
  --font-display-zh:'Press Start 2P','Ark Pixel',system-ui,sans-serif;
  --font-body:'JetBrains Mono','SF Mono',ui-monospace,monospace;
}

/* ── Ночная тема ────────────────────────────────────────────────────────
   Механика и палитра взяты из панели Chatty
   (`chattybot-frontend/src/styles/_tokens.scss`, ветка `$cb-d-*`, и
   `App.module.scss`, блок `.theme_dark`): тема — это класс на корне,
   который переопределяет те же токены; разметка и правила не меняются.
   Выбор хранится в `localStorage['theme']`, по умолчанию светлая — как
   `getTheme()` в панели. Атрибут ставит встроенный скрипт в <head> до
   подключения стилей, иначе на каждой загрузке мигает крем.

   Что НЕ переворачивается — ровно то же, что совпадает в `.theme_light` и
   `.theme_dark` у панели: семейство кнопок (синяя, голубая, оранжевая со
   своими обводками), пиксельные иконки деталей, подложки под фото и видео.
   И два места, которые на этом сайте темны и днём, — экран лица робота и
   консоль сессии.                                                         */
:root[data-theme="dark"]{
  /* Ночь и для того, что рисует браузер: полоса прокрутки, каретка, подсветка
     автозаполнения, выпадающий список <select>. Без этого они остаются
     дневными — на снимках вьюпорта такого не видно. */
  color-scheme:dark;

  /* ── поверхности */
  --ground:#0b1530;        /* $cb-d-bg — подложка страницы */
  --paper:#101e42;         /* $cb-d-panel — лист карточки и панели */
  --paper-lo:#16295a;      /* $cb-d-panel-hi — наведение и вложенный блок:
                              ночью он светлее листа, а не темнее */
  --paper-veil:rgba(16,30,66,.92);
  --butter:#3a2c17;        /* $cb-d-scen-group — тёплый пузырь гостя остаётся тёплым */
  --field:#0f1c3d;
  --mist:#1c3566;          /* штриховка-заглушка */
  --brick:#1a2b52;         /* кирпич полосы между стадиями */
  --asphalt:#26304a;       /* полотно трассы слева */

  /* ── объём: ночью светлая кромка едва заметна, а тень наоборот глубже
        (то же решение, что в `.theme_dark` панели) */
  --emboss-hi:#1b2f5c;
  --emboss-lo:#060d20;
  --shadow:#05091a;
  --shadow-paper:#05091a;

  /* ── чернила */
  --petrol:#fff4d6;        /* $cb-d-cream — основной текст */
  --slate:#8a97b3;         /* чуть светлее панельного $cb-d-slate (#7d8aa6):
                              на листе #101e42 тот даёт 4.4 — ниже порога для
                              мелких подписей, которых здесь большинство */
  --text-lede:rgba(255,244,214,.86);
  --text-soft:rgba(255,244,214,.8);
  --text-mute:rgba(255,244,214,.74);
  --text-faint:rgba(255,244,214,.55);
  --text-ghost:rgba(255,244,214,.34);

  /* ── линии */
  --outline-blue:#173a77;  /* $cb-d-line — рамки карточек, полей и панелей */
  --rule:#173a77;
  --line-soft:rgba(142,184,255,.28);
  --wash-lo:rgba(142,184,255,.05);
  --wash:rgba(142,184,255,.1);
  --wash-hi:rgba(0,0,0,.35);
  --bar-idle:rgba(142,184,255,.16);
  --field-dots:rgba(142,184,255,.18);
  /* Ступенчатые углы — тот же спрайт, перекрашенный в ночную линию: прямые
     стороны рамки берут цвет из border-color, а углы из border-image, и если
     перекрасить только первое, углы останутся дневными. */
  --frame-img:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'><path fill='%23173a77' d='M4 2h1v1h-1zM5 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM13 2h1v1h-1zM12 2h1v1h-1zM13 3h1v1h-1zM12 3h1v1h-1zM15 4h1v1h-1zM14 4h1v1h-1zM13 4h1v1h-1zM12 4h1v1h-1zM15 5h1v1h-1zM14 5h1v1h-1zM13 5h1v1h-1zM12 5h1v1h-1zM4 15h1v1h-1zM5 15h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM2 13h1v1h-1zM3 13h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM2 12h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM5 12h1v1h-1zM13 15h1v1h-1zM12 15h1v1h-1zM13 14h1v1h-1zM12 14h1v1h-1zM15 13h1v1h-1zM14 13h1v1h-1zM13 13h1v1h-1zM12 13h1v1h-1zM15 12h1v1h-1zM14 12h1v1h-1zM13 12h1v1h-1zM12 12h1v1h-1zM6 0h6v3h-6zM6 15h6v3h-6zM0 6h3v6h-3zM15 6h3v6h-3zM3 3h1v1h-1zM14 3h1v1h-1zM3 14h1v1h-1zM14 14h1v1h-1z'/></svg>");

  /* ── синий */
  --navy:#5f9bff;          /* $cb-d-blue-lit: ссылки и синий текст. Панель это
                              уже посчитала — #2d7cff на тёмной панели даёт
                              4.2 и читается тускло (комментарий к --btns-ink) */
  --heading-blue:#5f9bff;  /* алиас на --band разрывается явно: полоса-шапка
                              ночью темнеет, и заголовки в её тон исчезли бы */
  --navy-fill:#1a5ae0;     /* $cb-d-blue-deep — заливка под кремовой подписью */

  /* ── полоса-шапка: ночью темнее дневной, и блики с фаской свои, иначе
        рельеф полосы пропадает (тот же разбор — в _tokens.scss панели) */
  --band:#0a3f96;          /* $cb-d-topbar */
  --band-glow:#2f7ae0;     /* $cb-d-chrome-glow */
  --band-glow-2:#14539f;   /* $cb-d-chrome-glow-2 */
  --bevel-lt:#46639f;      /* $cb-d-bevel-lt */
  --bevel-md:#0a1430;      /* $cb-d-bevel-md */

  /* ── акценты: цвет остаётся тем же, но текстовая роль уходит в светлое,
        а заливка — в читаемую под кремовой подписью */
  --green:#1c6b45;
  --green-ink:#74dfae;     /* $cb-d-scen-mimic-line */
  --orange-ink:#ffa06a;
  --yellow:#ffe89a;        /* $cb-d-gold — золото ночью светлее дневного */
  --maze-brick:#2f4470;  --maze-brick-lo:#16233f;
  --robot-body:#2d7cff;    /* $cb-d-blue — основное действие ночной палитры */
  --robot-bounce:#16233f;

  /* ── цветные островки: подложка в тёмное, линия в светлое */
  --mint-soft:#12352a;   --mint-line:rgba(116,223,174,.4);
  --sky-soft:#16305e;    --sky-line:rgba(127,176,255,.3);  --sky-active:#1f3f6d;
  /* Пузыри лежат на листе панели (--paper #101e42), а не на подложке секции:
     замерено на .sec--session. Ночной #16305e отличался от листа на 6/18/28,
     а тёплый пузырь гостя брал ночной --butter и сливался с листом совсем.
     Держим то же отношение, что днём: реплика робота холоднее и светлее
     листа, реплика гостя — теплее его. */
  --bubble:#21457f;      --bubble-line:#5f8ac9;  --bubble-guest-line:#8a6b34;
  --zone-mid:rgba(94,176,254,.26);  --zone-mid-hi:rgba(94,176,254,.45);
  --zone-near:rgba(255,102,1,.2);   --zone-near-hi:rgba(255,102,1,.4);
  --wash-orange:rgba(255,102,1,.14);
}

/* ── База ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--petrol);
  font-family:var(--font-body);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--navy)}
h1,h2,h3{color:var(--heading-blue);font-family:var(--font-display);font-weight:700;margin:0;letter-spacing:.02em}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}

:focus-visible{outline:var(--line) solid var(--orange);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--u);top:var(--u);z-index:99;background:var(--paper);color:var(--petrol);padding:var(--u);border:var(--line) solid var(--outline-blue)}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px;width:100%}

/* Панели уровня — один и тот же лист с рамкой, кромкой и жёсткой тенью */
/* Карточки — лист панели: ступенчатая синяя рамка (border-image), под ней подложка
   и тень — псевдоэлементами, обрезанными той же лестницей, чтобы крем и тень
   не вылезали квадратом за выемки углов. ::after — лист с кромками объёма,
   ::before — жёсткая тень, сдвинутая на 4 px. */
.card,.mode,.perk,.venues{position:relative;isolation:isolate;color:var(--petrol);
  border:3px solid transparent;box-shadow:none;
  background:linear-gradient(var(--shadow),var(--shadow)) right bottom/6px 6px no-repeat;
  background-origin:border-box;background-clip:border-box}
/* рамка тоже на ::after: псевдоэлемент с отрицательным z-index перекрыл бы рамку самого элемента */
.card::after,.mode::after,.perk::after,.venues::after{content:'';position:absolute;inset:-3px;z-index:-1;pointer-events:none;
  border:3px solid var(--outline-blue);border-image-source:var(--frame-img);border-image-slice:6;border-image-width:6px;border-image-repeat:repeat;
  background:var(--paper);background-clip:padding-box;clip-path:var(--stair);
  box-shadow:inset 4px 4px 0 var(--emboss-hi),inset -4px -4px 0 var(--emboss-lo)}
.card::before,.mode::before,.perk::before,.venues::before{content:'';position:absolute;inset:-3px;z-index:-2;pointer-events:none;
  background:var(--shadow);clip-path:var(--stair);transform:translate(4px,4px);transition:transform .08s steps(2,end)}

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  padding:10px 18px;border:3px solid transparent;position:relative;isolation:isolate;
  cursor:pointer;transition:transform .06s steps(1);
}
/* Кнопки как в панели робота: ступенчатая рамка (px-frame) своей глубокой
   обводки — на ::after вместе с заливкой, обрезанной лестницей; тень —
   слоями box-shadow с отрицательным разбросом, повторяющими лестницу (px-emboss) */
.btn::after{content:"";position:absolute;inset:-3px;z-index:-1;pointer-events:none;
  border:3px solid var(--outline-blue);border-image-source:var(--frame-blue2);border-image-slice:6;border-image-width:6px;border-image-repeat:repeat;
  background-color:var(--blue-pale);background-clip:padding-box;clip-path:var(--stair);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),inset -1px -1px 0 rgba(0,0,0,.16)}
.btn{--btn-ink:var(--shadow);   /* цвет тени: бежевый на креме; в синей шапке — глубокий синий */
  box-shadow:9px 3px 0 -6px var(--btn-ink),3px 9px 0 -6px var(--btn-ink),5px 3px 0 -4px var(--btn-ink),3px 5px 0 -4px var(--btn-ink);   /* тень 3 px, как у прежних кнопок */
  /* выемка лестницы в правом нижнем углу закрашивается цветом тени, как в панели */
  background:linear-gradient(var(--btn-ink),var(--btn-ink)) right bottom/6px 6px no-repeat;
  background-origin:border-box;background-clip:border-box}
.btn--primary{color:#fff}
.btn--primary::after{border-color:var(--orange-line);border-image-source:var(--frame-orange);background-color:var(--orange);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.3)}
/* тень у оранжевой такая же бежевая и того же размера, что у обычной — объём даёт рамка, а не тень */
.btn--ghost{color:var(--blue-pale-line)}
.btn--ghost::after{background-image:radial-gradient(rgba(13,91,217,.22) .5px,transparent .5px);background-size:4px 4px}   /* точечная фактура обычной кнопки панели */
/* Наведение — как выбор пункта в меню приставки: слева мигает стрелка-курсор,
   кнопка приподнимается на пиксель, тень растёт. Стрелка живёт внутри
   отступа, ширина кнопки не меняется. Всё ступенями. */
.btn{position:relative}
.btn::before{content:"\25B6";position:absolute;left:6px;top:50%;translate:0 -50%;
  font-size:.7em;line-height:1;opacity:0}
.btn:hover,.btn:focus-visible{transform:translate(-2px,-2px);filter:none}
.btn:hover::before,.btn:focus-visible::before{opacity:1;animation:sel-blink .5s steps(2,end) infinite}
.btn--primary:hover,.btn--primary:focus-visible,.btn--ghost:hover,.btn--ghost:focus-visible{
  box-shadow:11px 5px 0 -6px var(--btn-ink),5px 11px 0 -6px var(--btn-ink),7px 5px 0 -4px var(--btn-ink),5px 7px 0 -4px var(--btn-ink),3px 5px 0 -2px var(--btn-ink),5px 3px 0 -2px var(--btn-ink)}
.chrome__cta{--btn-ink:#062a75}   /* на синей полосе тень — тёмно-синяя, бежевая там чужая */
@keyframes sel-blink{50%{opacity:0}}

/* Нажатие — кнопка уходит в собственную тень и меняет цвета местами */
.btn:active,.btn.is-pressed{transform:translate(3px,3px)!important;opacity:1!important;box-shadow:none;background:none}
.btn--primary:active::after,.btn--primary.is-pressed::after{background-color:var(--white)}.btn--primary:active,.btn--primary.is-pressed{color:var(--orange)}
.btn--ghost:active::after,.btn--ghost.is-pressed::after{background-color:var(--blue-pale-line);background-image:none}.btn--ghost:active,.btn--ghost.is-pressed{color:var(--white)}
/* Press feedback is a solid inset state, never a fade or a replacement of entrance animations. */
.btn--lg{font-size:16px;padding:14px 26px}

/* ── Оконная шапка ────────────────────────────────────────────────────── */
.chrome{position:sticky;top:0;z-index:20}
.chrome__band{
  display:flex;align-items:center;gap:24px;
  background:var(--band);color:#fff;padding:8px 24px;
  /* полоса панели: голубой блик внутри сверху-слева, чёрная линия снизу, серая утопленная фаска под ней */
  border-bottom:3px solid #000;
  box-shadow:inset 2px 2px 0 var(--band-glow),inset 6px 6px 0 var(--band-glow-2),0 3px 0 var(--bevel-lt),0 8px 0 var(--bevel-md);
  position:relative;z-index:2;
}
@media(min-width:1000px){.chrome__band{padding-block:16px}}
.chrome__brand{display:flex;align-items:center;gap:10px}
a.chrome__brand{color:inherit;text-decoration:none}   /* логотип-ссылка на страницах роботов — как на главной, без стиля ссылки */
a.chrome__brand:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.chrome__logo{height:30px;width:auto;display:block}
.chrome__name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.12em}
.chrome__stage{font-family:var(--font-display);font-size:13px;letter-spacing:.08em;
  display:flex;gap:8px;align-items:baseline;color:var(--sky-blue)}
.chrome__stage-num{background:var(--ink);padding:2px 6px;color:var(--yellow)}
.chrome__nav{margin-left:auto;display:flex;gap:20px}
.chrome__nav a{font-family:var(--font-display);font-size:14px;letter-spacing:.06em;
  color:var(--white);text-decoration:none;padding:4px 2px;border-bottom:var(--line) solid transparent}
.chrome__nav a:hover{border-bottom-color:var(--orange)}
/* Переключатель языка: три ссылки-ярлыка, текущий — заливкой */
.chrome__lang{display:flex;gap:4px;margin-left:16px}
.chrome__lang a{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;color:var(--white);text-decoration:none;padding:3px 7px;border:1px solid rgba(241,235,218,.35)}
.chrome__lang a:hover{border-color:var(--orange)}
/* ── Переключатель темы ────────────────────────────────────────────────
   Тот же тумблер, что в панели робота (AppSwitchTheme + AppSwitch):
   прямоугольная дорожка со ступенчатыми углами, квадратная фишка, ход
   шагами, никаких скруглений. Дорожка — углубление: тёмная кромка сверху
   слева, светлая снизу справа, наоборот к коробкам.
   Подпись рядом обязательна — без неё тумблер читается как случайная
   пилюля возле языка (ровно это записано в панели). */
.chrome__theme{display:flex;align-items:center;gap:8px;margin-left:16px;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;flex:none}
.chrome__theme-label{font-family:var(--font-display);font-size:11px;letter-spacing:.06em;color:var(--white);white-space:nowrap}
.chrome__theme-track{position:relative;display:block;width:44px;height:24px;flex:none;
  background-color:rgba(0,0,0,.34);clip-path:var(--stair-sm);
  box-shadow:inset 0 2px 0 rgba(0,0,0,.3),inset 2px 0 0 rgba(0,0,0,.3),
    inset 0 -2px 0 rgba(255,255,255,.26),inset -2px 0 0 rgba(255,255,255,.26);
  transition:background-color .12s steps(2)}
/* Фишка не рисует себе рамку: на 18 px она съела бы её целиком. Тень —
   filter, а не box-shadow: clip-path обрезает всё, что рисует элемент,
   вместе с наружной тенью, а фильтр применяется уже после выреза. */
.chrome__theme-track::before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;
  background-color:var(--blue-soft);clip-path:var(--stair-sm);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.55),inset -2px -2px 0 rgba(0,0,0,.28);
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.35));
  transition:background-color .12s steps(2),transform .12s steps(2)}
.chrome__theme[aria-checked="true"] .chrome__theme-track{background-color:var(--cyan)}
.chrome__theme[aria-checked="true"] .chrome__theme-track::before{background-color:var(--white);transform:translateX(20px)}
.chrome__theme:focus-visible{outline:var(--line) solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.chrome__theme-track,.chrome__theme-track::before{transition:none}}

.chrome__lang a.is-on{background:var(--cyan);border-color:var(--cyan);color:var(--ink-accent)}
/* Китайский: заголовки, кнопки и подписи — пиксельным Ark Pixel (сетка 12 px,
   размеры кратны 12, чтобы пиксели ложились ровно), основной текст — системным
   шрифтом ради читаемости. Разрядка и капс у иероглифов не нужны. */
html[data-lang="zh-hans"]{--font-display:var(--font-display-zh)}
html[data-lang="zh-hans"] .hero__title,html[data-lang="zh-hans"] .phero__title{font-size:clamp(36px,4vw,48px);line-height:1.25;letter-spacing:0}
html[data-lang="zh-hans"] .banner__title{font-size:36px;line-height:1.3}
html[data-lang="zh-hans"] h3,html[data-lang="zh-hans"] .mode h3,html[data-lang="zh-hans"] .perk h3{font-size:24px;line-height:1.25}
html[data-lang="zh-hans"] .btn{font-size:12px;letter-spacing:0;text-transform:none}
html[data-lang="zh-hans"] .btn--lg{font-size:12px;padding:16px 26px}
html[data-lang="zh-hans"] .chrome__nav a,html[data-lang="zh-hans"] .chrome__stage,html[data-lang="zh-hans"] .venues__label,html[data-lang="zh-hans"] .slide__go,
html[data-lang="zh-hans"] .contacts dt,html[data-lang="zh-hans"] .ask__field span,html[data-lang="zh-hans"] .level-hud b,html[data-lang="zh-hans"] .lane__enter,
html[data-lang="zh-hans"] .card__tag,html[data-lang="zh-hans"] .scroll-hint{font-size:12px;letter-spacing:0;text-transform:none}
html[data-lang="zh-hans"] .banner__title,html[data-lang="zh-hans"] .hero__title,html[data-lang="zh-hans"] h3{letter-spacing:0}
.chrome__rule{height:4px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 4px,var(--orange) 4px 8px)}

/* ── Рельс прогресса ──────────────────────────────────────────────────── */
/* ── Стадия ───────────────────────────────────────────────────────────── */
.stage{padding:72px 0 64px;position:relative;scroll-margin-top:88px}

/* Кадр в рамке — общий вид для всех фотографий на странице */
.shot{position:relative;border:var(--line) solid var(--outline-blue);overflow:hidden;
  box-shadow:5px 0 0 var(--shadow),0 5px 0 var(--shadow),5px 5px 0 var(--shadow)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot figcaption{position:absolute;left:0;bottom:0;background:var(--navy-fill);color:var(--white);
  font-family:var(--font-display);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 8px}
/* Первый экран занимает всю высоту окна минус шапка и полоса-разделитель:
   разделитель ложится ровно на нижний край экрана, следующий блок не торчит.
   На очень высоких экранах — не выше 1100 px, иначе экран пустеет. */
.stage--hero{padding-top:40px;padding-bottom:48px;box-sizing:border-box;
  min-height:min(calc(100svh - var(--chrome-height,110px) - var(--divider-height,32px)),1100px);display:flex;flex-direction:column;justify-content:center}
@media(min-width:881px){
 .hero__art .robot{width:min(320px,calc((100svh - var(--chrome-height,110px) - var(--divider-height,32px) - 88px) * .5627))}
}
@media(min-width:881px) and (max-height:800px){
 .stage--hero{padding-top:24px;padding-bottom:24px}
}

/* Полоса «земли» между стадиями — кирпичи уровня */
.ground{height:32px;
  border-top:var(--line) solid var(--rule);
  border-bottom:var(--line) solid var(--rule);
  background:
    repeating-linear-gradient(90deg,var(--brick) 0 30px,var(--navy-fill) 30px 32px),
    repeating-linear-gradient(0deg,transparent 0 14px,var(--navy-fill) 14px 16px);}
/* Финишная полоса — шахматка вместо кирпичей: конец уровня */
.ground--finish{background:
  repeating-conic-gradient(var(--navy-fill) 0% 25%,var(--paper) 0% 50%) 0 0/32px 32px;}

/* Заголовок стадии */
.banner{margin-bottom:36px;max-width:760px}
.banner__num{display:inline-block;font-family:var(--font-display);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  background:var(--orange);padding:4px 10px;margin-bottom:12px}
.banner__title{font-size:clamp(30px,5vw,46px);line-height:1.1;margin-bottom:10px}
.banner__title{color:var(--heading-blue)}
.banner__lede{color:var(--text-soft);max-width:60ch}

.eyebrow{font-family:var(--font-display);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);margin-bottom:16px}

/* ── 1-1 Герой ────────────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);
  gap:56px;align-items:center}   /* высоту задаёт .stage--hero */
.hero__art{position:relative;display:flex;justify-content:center}
/* Робот: настоящий Chatty, а поверх его экрана — живое пиксельное лицо.
   Экран на картинке занимает 29.0% / 12.7% / 42.0% × 12.2% — по замеру. */
.robot{position:relative;margin:0;width:min(100%,320px)}
.robot__img{display:block;width:100%;height:auto}
.robot__img[data-src]:not([src]){visibility:hidden;aspect-ratio:619 / 1100}
.robot:has(>.robot__img[data-src]:not([src]))>.face{display:none}
/* 3D-модель из плеера сценариев: тот же вьюер в iframe, кадр и камера
   зафиксированы, управление выключено. Картинка остаётся запасным вариантом
   только когда WebGL недоступен или модель действительно не поднялась. */
.robot__3d{position:absolute;inset:0;isolation:isolate}
.robot__3d iframe{display:block;width:100%;height:100%;border:0;background:transparent;pointer-events:none;
  opacity:0;transform:scale(.975);transition:opacity .3s steps(4,end),transform .3s steps(4,end)}   /* курсор над роботом видит страница, а не вьюер: иначе его подсветка звеньев и потеря слежения */
.robot__3d.is-ready iframe{opacity:1;transform:none}
/* Первый canvas WebGL кратко бывает белым. До первого настоящего кадра его
   полностью перекрывает загрузочный портал в палитре уровня. */
.robot__portal{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:12px;
  color:var(--heading-blue);background:radial-gradient(circle at 50% 46%,rgba(94,176,254,.2),rgba(255,102,1,.07) 30%,var(--paper) 67%);
  pointer-events:none;opacity:1;transition:opacity .24s steps(3,end)}
.robot__portal-vortex{position:relative;display:block;width:112px;aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(from 8deg,transparent 0 12deg,var(--cyan) 12deg 20deg,transparent 20deg 29deg,var(--orange) 29deg 34deg,transparent 34deg 45deg);
  -webkit-mask:radial-gradient(circle,transparent 0 17%,#000 18% 31%,transparent 32% 39%,#000 40% 55%,transparent 56%);
  mask:radial-gradient(circle,transparent 0 17%,#000 18% 31%,transparent 32% 39%,#000 40% 55%,transparent 56%);
  filter:drop-shadow(0 0 7px rgba(94,176,254,.8));animation:portal-spin 1.05s steps(16,end) infinite}
.robot__portal-vortex::before{content:"";position:absolute;inset:20%;border-radius:50%;
  background:repeating-conic-gradient(from 23deg,var(--orange) 0 9deg,transparent 9deg 23deg,var(--cyan) 23deg 31deg,transparent 31deg 45deg);
  -webkit-mask:radial-gradient(circle,transparent 0 34%,#000 36% 66%,transparent 68%);
  mask:radial-gradient(circle,transparent 0 34%,#000 36% 66%,transparent 68%);
  animation:portal-counter .72s steps(12,end) infinite}
.robot__portal-vortex::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;
  background:var(--yellow);border:3px solid var(--orange);box-shadow:0 0 0 3px var(--navy-fill),0 0 14px var(--cyan);
  transform:translate(-50%,-50%) rotate(45deg)}
.robot__portal-label{font-family:var(--font-display);font-size:9px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;
  color:var(--heading-blue);text-shadow:2px 2px 0 var(--shadow);text-align:center}
.robot__3d.is-ready .robot__portal{opacity:0}
@keyframes portal-spin{to{transform:rotate(360deg)}}
@keyframes portal-counter{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){
  .robot__3d iframe,.robot__portal{transition:none}
  .robot__portal-vortex,.robot__portal-vortex::before{animation:none}
}
.robot.is-3d .robot__img{visibility:hidden}
.robot.is-3d .face{display:none}   /* лицо рисуется на экране модели */
/* снимок сцены + 2D-лицо, натянутое на плоскость экрана */
.robot__snap{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.robot__face{position:absolute;left:0;top:0;transform-origin:0 0;image-rendering:pixelated;
  backface-visibility:hidden}
.robot .face{position:absolute;left:29.0%;top:12.74%;width:41.98%;height:12.2%;margin:0}
.robot__snapwrap{position:absolute;left:0;top:0;transform-origin:0 0}
.robot__3d.is-moved{z-index:5}   /* живая сцена, перенесённая на фигуру в контактах — поверх содержимого блока */
main{overflow-x:clip}             /* перенесённая трансформацией сцена на пиксель-другой выходит за край и тянет горизонтальную прокрутку */
.robot__face--css{position:absolute;left:29.0%;top:12.74%;width:41.98%;height:12.2%;transform:none;image-rendering:pixelated}
.hero__title{font-size:clamp(32px,4.6vw,54px);line-height:1.08;margin-bottom:20px;max-width:16ch;text-wrap:balance}
.hero__title{color:var(--heading-blue)}
.hero__lede{font-size:16px;max-width:46ch;margin-bottom:28px;color:var(--text-lede)}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hero__facts{display:flex;gap:10px;flex-wrap:wrap}
.hero__facts li{font-family:var(--font-display);font-size:12px;letter-spacing:.06em;
  background:var(--paper);color:var(--petrol);border:var(--line) solid var(--outline-blue);
  padding:4px 10px;box-shadow:3px 3px 0 var(--shadow)}

/* Лицо: экран в корпусе */
.face{margin:0}
.face__screen{display:grid;gap:1px;background:#000;padding:2.5% 3%;height:100%;box-sizing:border-box;
  grid-template-columns:repeat(var(--cols),1fr);grid-auto-rows:1fr}
.face__px{background:transparent}
.face__px.on{background:var(--cyan)}
.face__px.dim{background:#123a77}

.scroll-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:13px;letter-spacing:.1em;color:var(--navy);
  animation:bob 1.6s steps(2) infinite}
/* подсказка выходит после кнопок: спрятана, пока текст не набран, потом
   включается ступенями через секунду после появления кнопок */
.stage.is-untyped .scroll-hint{visibility:hidden}
.stage.is-typed .scroll-hint{visibility:visible;
  animation:hint-in .4s steps(3,end) 1.1s backwards, bob 1.6s steps(2) 1.5s infinite}
@keyframes hint-in{0%{opacity:0}50%{opacity:1}75%{opacity:.2}100%{opacity:1}}
@keyframes bob{50%{transform:translate(-50%,6px)}}

/* Все стадии на десктопе — во всю высоту окна между разделителями: верхняя
   полоса под шапкой, нижняя — по нижнему краю экрана. Контента больше экрана —
   блок просто выше. На низких окнах (ноутбук 1366×768) сетки карточек чуть
   мельче и отступы уже, чтобы влезть целиком. */
@media (min-width:1280px){
  .stage:not(.stage--hero){box-sizing:border-box;min-height:calc(100svh - 68px - 32px);
    padding-top:36px;padding-bottom:36px;
    display:flex;flex-direction:column;justify-content:center}
  .stage:not(.stage--hero) .banner{margin-bottom:28px}
  .stage:not(.stage--hero) .wrap{width:100%}
  #stage-4 .perks{grid-template-columns:repeat(3,1fr)}   /* auto-fit на 1366 давал 4+2 с дырой */
  #stage-3 .modes{margin-bottom:16px}
  #stage-3 .mode{padding:16px 18px}
  @media (max-height:1000px){
    .stage:not(.stage--hero){padding-top:24px;padding-bottom:24px}
    .stage:not(.stage--hero) .banner{margin-bottom:18px}
    .banner__lede{max-width:70ch}
    /* Дробного zoom здесь быть не должно: при .86 трёхпиксельная обводка и
       ступенчатая тень округляются в разные стороны, и тень перекрывает рамку.
       Влезаем настоящими размерами; если всё же не влезло — viewport-fit.js
       масштабирует лист целиком через transform. */
    #stage-2 .card__shot{aspect-ratio:16/9}
    #stage-2 .card{gap:10px;padding:16px}
    #stage-3 .mode__shot{aspect-ratio:16/9}
    #stage-3 .modes{margin-bottom:12px}
    #stage-3 .slider__item{flex-basis:176px}
    #stage-3 .venues{padding:8px 12px 6px}
    .perks{gap:14px;margin-bottom:14px}
    .perk h3{font-size:16px}
    .perk{padding:14px 16px}
    #stage-4 .venues{padding:8px 12px 6px}
    .slide__logo{height:64px}
  }
}

/* Подзаголовок «Трёх роботов» — терминальная строка, как на старте:
   приглашение «>» и курсор, который остаётся мигать после набора */
#stage-2 .banner__lede::before{content:"> ";color:var(--cyan)}
#stage-2.is-typed .banner__lede::after{content:"";display:inline-block;width:.55em;height:1em;
  vertical-align:-.15em;margin-left:3px;background:currentColor;animation:caret 1s steps(2) infinite}
@media (prefers-reduced-motion:reduce){ #stage-2.is-typed .banner__lede::after{animation:none} }

/* «Три робота»: до набора текста карточки спрятаны (место занято), после —
   включаются одна за другой, как экраны: полоска → раскрытие; фото
   «загружается» построчно; кнопка «Подробнее» выходит последней. */
#stage-2.is-untyped .card{visibility:hidden}
#stage-2.is-typed .card{visibility:visible;animation:card-in .5s steps(5,end) backwards}
#stage-2.is-typed .card:nth-child(2){animation-delay:.18s}
#stage-2.is-typed .card:nth-child(3){animation-delay:.36s}
#stage-2.is-typed .card__shot img{animation:shot-in .7s steps(10,end) .5s backwards}
#stage-2.is-typed .card:nth-child(2) .card__shot img{animation-delay:.68s}
#stage-2.is-typed .card:nth-child(3) .card__shot img{animation-delay:.86s}
/* «Подробнее» — контурная, выходит последней и потом покачивается, у каждой
   карточки своя фаза; на наведении покачивание замирает */
#stage-2.is-typed .card__more{animation:btn-in .55s steps(6,end) 1.25s backwards, btn-flick .35s steps(3,end) 1.8s backwards,
  btn-float 2.6s steps(2,end) 2.2s infinite}
#stage-2.is-typed .card:nth-child(2) .card__more{animation-delay:1.43s,1.98s,1.5s}
#stage-2.is-typed .card:nth-child(3) .card__more{animation-delay:1.61s,2.16s,.8s}
#stage-2.is-typed .card__more:hover{animation-play-state:paused}
@keyframes card-in{0%{transform:scale(1,.04);opacity:0}40%{transform:scale(1,.04);opacity:1}80%{transform:scale(1,1.06)}100%{transform:none}}
@keyframes shot-in{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0)}}

/* Наведение на карточку — как выбор в меню: приподнимается, тень больше,
   у названия стрелка-курсор, роль мигает оранжевым. Всё ступенями. */
.card{transition:transform .08s steps(2,end)}
.card:hover{transform:translate(-3px,-3px)}
.card:hover::before{transform:translate(7px,7px)}
.card__name{position:relative}
.card:hover .card__name::before{content:"\25B6";position:absolute;left:-1.1em;top:.15em;font-size:.6em;color:var(--orange);
  animation:sel-blink .5s steps(2,end) infinite}
.card:hover .card__role{color:var(--orange)}
.card:hover .card__shot img{animation:shot-flash .3s steps(3,end)}
@keyframes shot-flash{0%{filter:brightness(1)}34%{filter:brightness(1.35)}67%{filter:brightness(1)}100%{filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){
  #stage-2.is-typed .card,#stage-2.is-typed .card__shot img,#stage-2.is-typed .card__more,.card:hover .card__shot img{animation:none}
  .card:hover .card__name::before{animation:none}
}

/* ── 1-2 Карточки роботов ─────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.card{padding:20px;display:flex;flex-direction:column;gap:14px}
#stage-2 .card{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:14px}
#stage-2 .card__head{align-items:center}
#stage-2 .card__head>*{margin-block:0}
#stage-2 .card__more{margin-top:0;align-self:end;justify-self:start}
.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:var(--line) solid var(--outline-blue);padding-bottom:10px}
.card__name{font-size:24px;letter-spacing:.06em}
.card__role{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.card__shot{aspect-ratio:3/2;overflow:hidden;display:block;
  border:var(--line) solid var(--outline-blue)}
.card__shot img{display:block;width:100%;height:100%;object-fit:cover}
.card__shot--whole img{object-fit:contain;background:var(--paper)}
#stage-2 .card__shot{aspect-ratio:3/2}
#stage-2 .card__shot img{object-fit:cover;object-position:center}
.card__line{font-size:14px}
.card__more{margin-top:auto;align-self:flex-start}
/* ── 1-3 Применение ───────────────────────────────────────────────────── */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:40px}
.mode{padding:20px}
.mode--ad::after{box-shadow:inset 0 6px 0 var(--orange),inset 4px 4px 0 var(--emboss-hi),inset -4px -4px 0 var(--emboss-lo)}
.mode--edu::after{box-shadow:inset 0 6px 0 var(--cyan),inset 4px 4px 0 var(--emboss-hi),inset -4px -4px 0 var(--emboss-lo)}
.mode--fun::after{box-shadow:inset 0 6px 0 var(--mint),inset 4px 4px 0 var(--emboss-hi),inset -4px -4px 0 var(--emboss-lo)}
.mode__shot{aspect-ratio:16/9;overflow:hidden;border:var(--line) solid var(--outline-blue);margin:10px 0 12px}
.mode__shot img{display:block;width:100%;height:100%;object-fit:cover}
.mode__shot--whole{aspect-ratio:16/9}
.mode__shot--whole img{object-fit:cover;object-position:center;background:var(--paper)}
.mode h3{font-size:20px;margin-bottom:10px}
.mode p{font-size:14px}

.venues{padding:10px 14px 8px}
.venues__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.venues__label{font-family:var(--font-display);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy);margin:0}
.venues__nav{display:flex;gap:6px}
.venues__btn{font-family:var(--font-display);font-size:11px;line-height:1;padding:5px 8px;
  background:var(--paper);color:var(--navy);border:var(--line) solid var(--outline-blue);cursor:pointer;
  box-shadow:2px 0 0 var(--shadow),0 2px 0 var(--shadow),2px 2px 0 var(--shadow)}
.venues__btn:hover{background:var(--navy-fill);color:var(--white)}
.venues__btn:active{transform:translate(2px,2px);box-shadow:none}
/* Лента площадок: каждый слайд — ссылка на страницу мероприятия с фото.
   Превью слева, название и подпись-стрелка справа; прокрутка со снапом */
.slider{display:flex;gap:10px;list-style:none;margin:0;padding:2px 2px 6px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.slider::-webkit-scrollbar{display:none}
.slider__item{flex:0 0 200px;scroll-snap-align:start}
.slide{display:block;height:100%;box-sizing:border-box;
  background:var(--paper);border:var(--line) solid var(--outline-blue);text-decoration:none;color:var(--petrol);
  box-shadow:3px 0 0 var(--shadow),0 3px 0 var(--shadow),3px 3px 0 var(--shadow);
  transition:transform .08s steps(2,end),box-shadow .08s steps(2,end)}
.slide:hover,.slide:focus-visible{transform:translate(-2px,-2px);
  box-shadow:5px 0 0 var(--shadow),0 5px 0 var(--shadow),5px 5px 0 var(--shadow);outline:none}
/* фото на всю ширину слайда, название — плашкой поверх нижнего края */
.slide__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-bottom:var(--line) solid var(--outline-blue);
  background:repeating-linear-gradient(45deg,var(--mist) 0 4px,var(--paper-lo) 4px 8px)}
.slide__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.slide__name{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;
  background:rgba(13,91,217,.86);color:var(--white);font-size:11px;line-height:1.25;font-weight:700}
.slide__go{display:block;white-space:nowrap;padding:5px 8px;
  font-family:var(--font-display);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.slide:hover .slide__go{animation:sel-blink .5s steps(2,end) infinite}
#venuesSlider .slider__item{flex-basis:240px;min-width:0}
#venuesSlider .slide__name{position:static;display:block;padding:9px 10px;
 background:var(--paper);color:var(--navy);line-height:1.4;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){ .slider{scroll-behavior:auto} .slide:hover .slide__go{animation:none} }

/* «Где это работает»: та же режиссура, что у «Трёх роботов». Подзаголовок —
   терминальная строка; карточки и панель площадок спрятаны до набора, потом
   включаются по очереди; фото загружаются построчно; слайды выходят последними */
#stage-3 .banner__lede::before{content:"> ";color:var(--cyan)}
#stage-3.is-typed .banner__lede::after{content:"";display:inline-block;width:.55em;height:1em;
  vertical-align:-.15em;margin-left:3px;background:currentColor;animation:caret 1s steps(2) infinite}
#stage-3.is-untyped .mode,#stage-3.is-untyped .venues{visibility:hidden}
#stage-3.is-typed .mode{visibility:visible;animation:card-in .5s steps(5,end) backwards}
#stage-3.is-typed .mode:nth-child(2){animation-delay:.18s}
#stage-3.is-typed .mode:nth-child(3){animation-delay:.36s}
#stage-3.is-typed .mode__shot img{animation:shot-in .7s steps(10,end) .5s backwards}
#stage-3.is-typed .mode:nth-child(2) .mode__shot img{animation-delay:.68s}
#stage-3.is-typed .mode:nth-child(3) .mode__shot img{animation-delay:.86s}
#stage-3.is-typed .venues{visibility:visible;animation:card-in .5s steps(5,end) 1s backwards}
#stage-3.is-typed .slider__item{animation:btn-in .45s steps(5,end) backwards}
#stage-3.is-typed .slider__item:nth-child(1){animation-delay:1.5s}
#stage-3.is-typed .slider__item:nth-child(2){animation-delay:1.62s}
#stage-3.is-typed .slider__item:nth-child(3){animation-delay:1.74s}
#stage-3.is-typed .slider__item:nth-child(4){animation-delay:1.86s}
#stage-3.is-typed .slider__item:nth-child(5){animation-delay:1.98s}
#stage-3.is-typed .slider__item:nth-child(6){animation-delay:2.1s}
/* наведение на карточку применения */
.mode{transition:transform .08s steps(2,end),box-shadow .08s steps(2,end)}
.mode:hover{transform:translate(-3px,-3px)}
.mode:hover::before{transform:translate(7px,7px)}
.mode h3{position:relative}
.mode:hover h3::before{content:"\25B6";position:absolute;left:-1.1em;top:.2em;font-size:.6em;color:var(--orange);
  animation:sel-blink .5s steps(2,end) infinite}
.mode:hover .mode__shot img{animation:shot-flash .3s steps(3,end)}
@media (prefers-reduced-motion:reduce){
  #stage-3.is-typed .banner__lede::after,#stage-3.is-typed .mode,#stage-3.is-typed .mode__shot img,
  #stage-3.is-typed .venues,#stage-3.is-typed .slider__item,.mode:hover .mode__shot img{animation:none}
  .mode:hover h3::before{animation:none}
}

/* ── 1-4 О нас ────────────────────────────────────────────────────────── */
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:20px}
.perk{padding:18px}
.perk h3{font-size:18px;margin-bottom:8px}
.perk p{font-size:14px;color:var(--text-mute)}
.perk{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;align-content:start}
.perk__icon{display:block;width:72px;height:72px;grid-column:1;grid-row:1/3;background-image:url('/assets/img/icons/trust-retro-set.png');background-size:300% 200%;background-repeat:no-repeat;image-rendering:pixelated;clip-path:var(--stair)}
.perk h3,.perk p{grid-column:2}
.perk__icon--1{background-position:0 0}
.perk__icon--2{background-position:50% 0}
.perk__icon--3{background-position:100% 0}
.perk__icon--4{background-position:0 100%}
.perk__icon--5{background-position:50% 100%}
.perk__icon--6{background-position:100% 100%}
@media(max-width:640px){.perk{grid-template-columns:64px minmax(0,1fr);column-gap:14px}.perk__icon{width:64px;height:64px}}
/* курсор-указатель меню приставки на наведении — тот же, что у режимов в 1-3 */
.perk{transition:transform .08s steps(2,end),box-shadow .08s steps(2,end)}
.perk:hover{transform:translate(-3px,-3px)}
.perk:hover::before{transform:translate(7px,7px)}
.perk h3{position:relative}
.perk:hover h3::before{content:"\25B6";position:absolute;left:-1.1em;top:.2em;font-size:.6em;color:var(--orange);
  animation:sel-blink .5s steps(2,end) infinite}

/* Лента партнёров: слайд — логотип на белом и подпись, без ссылки */
.slider--logos .slider__item{flex-basis:200px}
div.slide--logo{cursor:default}
.slide__logo{display:flex;align-items:center;justify-content:center;height:78px;padding:10px 16px;box-sizing:border-box;
  background:var(--photo-mat);border-bottom:var(--line) solid var(--outline-blue)}
.slide__logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.slide__who{display:block;padding:6px 8px 7px;font-size:11px;line-height:1.3;color:var(--petrol)}

/* Режиссура 1-4: заголовок и текст набираются, карточки выходят по очереди,
   потом лента партнёров и по одному логотипы — как в 1-2 и 1-3 */
#stage-4 .banner__lede::before{content:"> ";color:var(--cyan)}
#stage-4.is-typed .banner__lede::after{content:"";display:inline-block;width:.55em;height:1em;
  vertical-align:-.15em;margin-left:3px;background:currentColor;animation:caret 1s steps(2) infinite}
#stage-4.is-untyped .perk,#stage-4.is-untyped .partners{visibility:hidden}
#stage-4.is-typed .perk{visibility:visible;animation:card-in .5s steps(5,end) backwards}
#stage-4.is-typed .perk:nth-child(2){animation-delay:.12s}
#stage-4.is-typed .perk:nth-child(3){animation-delay:.24s}
#stage-4.is-typed .perk:nth-child(4){animation-delay:.36s}
#stage-4.is-typed .perk:nth-child(5){animation-delay:.48s}
#stage-4.is-typed .perk:nth-child(6){animation-delay:.6s}
#stage-4.is-typed .partners{visibility:visible;animation:card-in .5s steps(5,end) 1s backwards}
#stage-4.is-typed .slider--logos .slider__item{animation:btn-in .45s steps(5,end) backwards}
#stage-4.is-typed .slider--logos .slider__item:nth-child(1){animation-delay:1.5s}
#stage-4.is-typed .slider--logos .slider__item:nth-child(2){animation-delay:1.62s}
#stage-4.is-typed .slider--logos .slider__item:nth-child(3){animation-delay:1.74s}
#stage-4.is-typed .slider--logos .slider__item:nth-child(4){animation-delay:1.86s}
#stage-4.is-typed .slider--logos .slider__item:nth-child(5){animation-delay:1.98s}
@media (prefers-reduced-motion:reduce){
  #stage-4.is-typed .banner__lede::after,#stage-4.is-typed .perk,#stage-4.is-typed .partners,
  #stage-4.is-typed .slider--logos .slider__item,.perk:hover h3::before{animation:none}
}

/* ── 1-5 Контакты ─────────────────────────────────────────────────────── */
.stage--finish{padding-bottom:80px}
.finish{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:end}
.contacts{display:grid;gap:10px;margin-bottom:28px}
.contacts div{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:baseline;
  border-bottom:var(--line) dotted var(--line-soft);padding-bottom:8px}
.contacts dt{font-family:var(--font-display);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.contacts dd{margin:0;font-size:16px;color:var(--petrol)}
.finish__next{margin-top:20px;font-size:13px;color:var(--slate)}
/* Chatty в контактах — тот же робот, что на первом экране: снимок 3D-сцены и живое лицо */
.robot--finish{justify-self:end;align-self:center;width:min(100%,300px)}

/* Форма обратной связи: два поля в ряд, текст во всю ширину, ловушка для ботов скрыта */
.ask{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:8px}
.ask__field{display:block}.ask__field--wide{grid-column:1/-1}
.ask__field span{display:block;font-family:var(--font-body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--slate);margin-bottom:6px;line-height:1.4}
/* Поля как в панели робота (px-input + px-frame): ступенчатая синяя рамка, заливка чуть темнее листа,
   44 px высоты, обычный шрифт 15 px; в фокусе заливка светлеет до листа */
.ask__field input,.ask__field textarea{width:100%;box-sizing:border-box;height:44px;padding:0 14px;
  border:3px solid var(--outline-blue);border-image-source:var(--frame-img);border-image-slice:6;border-image-width:6px;border-image-repeat:repeat;
  background:var(--field);background-clip:padding-box;border-radius:0;
  font-family:var(--font-body);font-size:15px;color:var(--petrol);resize:vertical}
.ask__field textarea{height:auto;min-height:96px;padding:10px 14px}
.ask__field input::placeholder,.ask__field textarea::placeholder{color:var(--slate)}
.ask__field input:focus,.ask__field textarea:focus{outline:none;background-color:var(--paper);box-shadow:none}
.ask__field.is-bad input,.ask__field.is-bad textarea{border-image-source:var(--frame-orange);border-color:var(--orange-line)}
.ask__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ask__row{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ask__note{margin:0;font-size:13px;color:var(--slate)}.ask__note.is-ok{color:var(--green-ink)}.ask__note.is-err{color:var(--orange)}
.ask.is-sent .btn{pointer-events:none;opacity:.6}
@media (max-width:640px){.ask{grid-template-columns:1fr}}

/* Режиссура 1-5: заголовок и подводка набираются, строки контактов
   выскакивают одна за другой, кнопка выходит как на первом экране и плавает,
   приписка мигает, фото проявляется сверху вниз */
#stage-5 .banner__lede::before{content:"> ";color:var(--cyan)}
#stage-5.is-typed .banner__lede::after{content:"";display:inline-block;width:.55em;height:1em;
  vertical-align:-.15em;margin-left:3px;background:currentColor;animation:caret 1s steps(2) infinite}
#stage-5.is-untyped .contacts div,#stage-5.is-untyped .ask,
#stage-5.is-untyped .finish__next,#stage-5.is-untyped .robot--finish{visibility:hidden}
#stage-5.is-typed .ask{visibility:visible;animation:card-in .4s steps(4,end) .6s backwards}
#stage-5.is-typed .contacts div{visibility:visible;animation:card-in .4s steps(4,end) backwards}
#stage-5.is-typed .contacts div:nth-child(2){animation-delay:.12s}
#stage-5.is-typed .contacts div:nth-child(3){animation-delay:.24s}
#stage-5.is-typed .contacts div:nth-child(4){animation-delay:.36s}
#stage-5.is-typed .contacts div:nth-child(5){animation-delay:.48s}
#stage-5.is-typed .finish__copy .btn{visibility:visible;transform-origin:50% 50%;
  animation:btn-in .55s steps(6,end) .8s backwards, btn-flick .35s steps(3,end) 1.35s backwards,
            btn-float 2.6s steps(2,end) 1.7s infinite}
#stage-5.is-typed .finish__copy .btn:hover{animation-play-state:paused}
#stage-5.is-typed .finish__next{visibility:visible;animation:hint-in .4s steps(3,end) 1.5s backwards}
/* The live 3D layer is translated from the hero to this figure using its
   bounding rect. A scale entrance on the figure made that rect temporarily
   collapse, so the model was placed near the section bottom until the next
   scroll recalculation. Keep the geometry stable from its first visible frame. */
#stage-5.is-typed .robot--finish{visibility:visible}
@media (prefers-reduced-motion:reduce){
  #stage-5.is-typed .banner__lede::after,#stage-5.is-typed .contacts div,#stage-5.is-typed .finish__copy .btn,
  #stage-5.is-typed .finish__next,#stage-5.is-typed .robot--finish{animation:none}
}

/* Стадия за экраном: все её анимации стоят. Возвращается в кадр — идут
   дальше с того же места; незапущенные выходы дождутся её появления. */
.stage.is-off,.stage.is-off *,.stage.is-off *::before,.stage.is-off *::after{animation-play-state:paused!important}


/* ── Полоса трассы: страница как уровень ──────────────────────────────── */
/* Содержимое сдвинуто вправо, слева живёт трасса. Шапка идёт во всю ширину —
   это HUD. Полоса зеркалит геометрию страницы: препятствие в полосе стоит
   ровно напротив своего разделителя. */
:root{--lane:96px}
main,.foot{padding-left:var(--lane)}

.lane{position:fixed;left:0;top:0;bottom:0;width:var(--lane);z-index:12;
  overflow:hidden;background:var(--asphalt);
  border-right:var(--line) solid var(--outline-blue);
  /* полотно трассы — асфальт: белая осевая разметка пунктиром и редкие метки у краёв */
  background-image:
    repeating-linear-gradient(to bottom,#fff 0 14px,transparent 14px 30px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.35) 0 2px,transparent 2px 60px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.35) 0 2px,transparent 2px 60px);
  background-size:2px 30px,10px 60px,10px 60px;
  background-position:center top,left 6px top,right 6px top;
  background-repeat:repeat-y,repeat-y,repeat-y}
.lane__scene{position:absolute;left:0;top:0;width:100%;height:0}

/* Препятствия — те же, что на чертеже трассы, вид сверху: полосы поперёк
   трассы, которые бегун пересекает. Спрайт при этом сбоку — обычная для
   игр пара «уровень сверху, герой сбоку». */
.obst{position:absolute;left:0;width:100%;color:var(--white)}   /* препятствия светлые на асфальте */
.obst i{position:absolute;left:8px;right:8px;background:currentColor;display:block}
.obst--steps{height:30px}
.obst--steps i:nth-child(1){top:0;height:9px}
.obst--steps i:nth-child(2){top:18px;height:9px}
.obst--ramp{height:30px}
.obst--ramp i:nth-child(1){top:0;height:30px;
  clip-path:polygon(0 0,100% 0,50% 100%)}
.obst--gate{height:34px}
.obst--gate i:nth-child(1){left:6px;right:auto;top:0;width:12px;height:34px}
.obst--gate i:nth-child(2){right:6px;left:auto;top:0;width:12px;height:34px}
.obst--gate i:nth-child(3){left:6px;right:6px;top:0;height:8px}
.obst--gate i:nth-child(4){left:0;right:0;top:34px;height:14px;
  background:repeating-conic-gradient(var(--navy-fill) 0% 25%,var(--paper) 0% 50%) 0 0/14px 14px}

/* Бегун — гексапод, стоит на месте, трасса едет мимо. Он поверх препятствия:
   пересекает его, а не проваливается внутрь. */
.lane__runner{position:absolute;left:50%;top:52%;z-index:2;--scale:1;--f:0;
  /* лист 12 кадров, каждый 176×138 (2× для ретины), показывается 88×69 */
  width:calc(88px * var(--scale));height:calc(69px * var(--scale));
  background-image:url(assets/img/hexapod.png?v=10);
  background-size:calc(1056px * var(--scale)) calc(69px * var(--scale));
  background-position:calc(var(--f) * -88px * var(--scale)) 0;
  background-repeat:no-repeat;
  transform:translate(-50%,-50%);will-change:transform}

/* Вход в уровень: настоящая кнопка, не подсказка на глазок */
.lane__enter{position:fixed;left:0;width:var(--lane);z-index:14;
  transform:translateY(-50%);display:block;
  /* иначе display:block перебивает атрибут hidden */
  background:var(--yellow);color:var(--ink-accent);border:var(--line) solid var(--outline-blue);
  border-left:0;font-family:var(--font-display);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 4px;cursor:pointer;line-height:1.3;
  box-shadow:4px 0 0 var(--shadow),0 4px 0 var(--shadow),4px 4px 0 var(--shadow)}
.lane__enter[hidden]{display:none}
.lane__enter:hover{background:var(--orange);color:var(--white)}
.lane__enter:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* HUD уровня — фиксированный, чтобы не уезжать с камерой на высоких блоках */
.level-hud{position:fixed;right:16px;top:82px;z-index:13;text-align:right;
  background:var(--navy-fill);color:var(--white);padding:8px 12px;
  font-family:var(--font-body);font-size:12px;line-height:1.5;
  box-shadow:4px 0 0 var(--shadow),0 4px 0 var(--shadow),4px 4px 0 var(--shadow)}
.level-hud b{display:block;font-weight:400;font-family:var(--font-display);letter-spacing:.06em}
.level-hud i{display:block;font-style:normal;opacity:.7}
.level-hud i:empty{display:none}

/* Замок босса над подвалом: узкая полоса, ничего не загораживает */
.foot__trophy{color:var(--orange)}

/* Заставка: набор текста. Скрытая часть держит место, курсор — блок в цвет текста */
.type__off{visibility:hidden}
.is-typing-block .btn{visibility:hidden}   /* место занято, кнопки выходят после набора */

/* Выход кнопок — как включение ЭЛТ: полоска по горизонтали, потом раскрывается
   по вертикали, короткое мерцание. Всё ступенями, без сглаживания. Потом
   кнопки покачиваются по 2 px, вторая в противофазе. */
.is-typed .hero__actions .btn{
  animation:btn-in .55s steps(6,end) backwards, btn-flick .35s steps(3,end) .55s backwards,
            btn-float 2.6s steps(2,end) .9s infinite;
  transform-origin:50% 50%}
.is-typed .hero__actions .btn:nth-child(2){animation-delay:.18s,.73s,-.4s}
/* Робот на первом экране включается, как экран приставки: тонкая полоса,
   разворот по высоте, лёгкий перебор и вспышка — вместе с первыми буквами заголовка */
.stage--hero.is-untyped .hero__art .robot{visibility:hidden}
.stage--hero.is-titled .hero__art .robot{visibility:visible;transform-origin:50% 62%;
  animation:robot-in .8s steps(9,end) .1s backwards, btn-flick .4s steps(3,end) .95s backwards}
/* Once the live scene is reused in the contact block, its source figure is a
   coordinate system rather than an entrance animation. This also covers a
   fast scroll that would otherwise pause robot-in on an intermediate scale. */
.stage--hero .hero__art .robot.is-relocation-stable{animation:none!important;transform:none!important}
@keyframes robot-in{
  0%{transform:scale(.12,.03);opacity:0}
  30%{transform:scale(1,.03);opacity:1}
  65%{transform:scale(1,1.1)}
  85%{transform:scale(.98,.97)}
  100%{transform:none}}
@media (prefers-reduced-motion:reduce){ .stage--hero.is-untyped .hero__art .robot{visibility:visible} .stage--hero.is-titled .hero__art .robot{animation:none} }
@keyframes btn-in{
  0%{transform:scale(.15,.06);opacity:0}
  35%{transform:scale(1,.06);opacity:1}
  70%{transform:scale(1,1.12)}
  100%{transform:none}}
@keyframes btn-flick{0%{opacity:1}33%{opacity:.25}66%{opacity:1}100%{opacity:1}}
@keyframes btn-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
/* Абзац — терминальная строка: моноширинный, с приглашением «>» и курсором,
   который остаётся мигать после набора */
.hero__lede{font-family:var(--font-body)}
.hero__lede::before{content:"> ";color:var(--cyan)}
.is-typed .hero__lede::after{content:"";display:inline-block;width:.55em;height:1em;
  vertical-align:-.15em;margin-left:3px;background:currentColor;animation:caret 1s steps(2) infinite}

/* на наведении покачивание замирает — кнопку легче поймать */
.is-typed .hero__actions .btn:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .is-typed .hero__actions .btn{animation:none} .is-typed .hero__lede::after{animation:none} .btn:hover::before{animation:none} .btn.is-pressed{animation:none} }
/* курсор вне потока: стоит в статической позиции после последнего символа,
   но не даёт строке лишней точки переноса — слово не рвётся */
.type.is-typing .type__on::after{content:"";position:absolute;width:.55em;height:.9em;
  margin:.1em 0 0 2px;background:currentColor;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .type__off{visibility:visible} .is-typing-block .btn{visibility:visible} .type.is-typing .type__on::after{display:none} }

/* Поле уровня поверх содержимого блока */
.level{position:absolute;z-index:11;pointer-events:none}
body.is-playing .lane__runner{visibility:hidden}
body.is-playing .scroll-hint{display:none}   /* декор, не контент: не делать из неё островок-стену */
body.is-playing .lane__enter{display:none}

/* HUD */
.hudbar{display:flex;gap:3px;list-style:none;margin:0;padding:0}
.hudbar li{width:14px;height:10px;background:rgba(252,249,241,.22);
  box-shadow:inset 0 0 0 1px rgba(252,249,241,.45)}
.hudbar li.is-done{background:var(--cyan)}
.hudbar li.is-on{background:var(--orange)}   /* текущая стадия — оранжевым логотипа */
.chrome__say{flex:1 1 auto;min-width:0;margin:0;font-size:12px;
  color:rgba(252,249,241,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrome__pad{margin:0;font-family:var(--font-display);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-accent);background:var(--yellow);padding:3px 8px}
body.is-cleared .chrome__stage-num{background:var(--green);color:var(--white)}

/* Шапка не переносит строки: реплика Chatty ужимается с многоточием, всё остальное — в одну строку */
.chrome__brand,.chrome__stage,.hudbar,.chrome__nav,.chrome__lang,.chrome__cta{flex:none}
.chrome__stage,.chrome__stage-num,.chrome__nav a,.chrome__lang a,.chrome__cta{white-space:nowrap}
.chrome__say{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1279px){ .chrome__say{display:none} }
/* Тумблер занял в полосе 54 px, и на продуктовых страницах с длинным
   призывом («Забронировать», «Обсудить Chatty EDU») полоса переполнялась
   в диапазоне 1181–1400 (замерено). Место возвращают подпись тумблера и
   просветы: шаг полосы 24 → 14 и шаг меню 20 → 12 дают 84 px. */
@media (max-width:1480px){ .chrome__theme-label{display:none} .chrome__theme{margin-left:10px}
  .chrome__band{gap:14px} .chrome__nav{gap:12px} }
@media (max-width:1180px){ .chrome__stage-name{display:none} .chrome__band{gap:10px} }
@media (max-width:1060px){ .hudbar{display:none} .chrome__name{display:none} }
@media (max-width:1099px){ :root{--lane:52px} .lane__runner{--scale:.55} }
@media (max-width:719px){ :root{--lane:0px} .lane{display:none} }
@media (max-width:479px){ .chrome__stage-name{display:none} .chrome__stage-num{white-space:nowrap}
  .chrome__name{display:none} .hudbar{display:none} .chrome__brand{gap:0} }
@media (prefers-reduced-motion:reduce){ .lane__runner.is-hop{animation:none} }

/* ── Подвал ───────────────────────────────────────────────────────────── */
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:1160px;margin:0 auto;padding:24px;font-size:12px;color:var(--slate);
  border-top:var(--line) solid var(--outline-blue)}

/* ── Появление стадии ─────────────────────────────────────────────────── */
.anim .stage:not(.is-in) .banner,
.anim .stage:not(.is-in) .card,
.anim .stage:not(.is-in) .mode,
.anim .stage:not(.is-in) .perk{opacity:0;transform:translateY(10px)}
.anim .banner,.anim .card,.anim .mode,.anim .perk{
  transition:opacity .28s steps(3),transform .28s steps(3)}

/* ── Адаптив ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){
}
@media (max-width:880px){
  .hero{grid-template-columns:1fr;gap:32px;min-height:0}
  .robot{width:min(100%,240px)}
  .finish{grid-template-columns:1fr}
  /* В одну колонку фигура робота остаётся прижатой вправо от прежней
     раскладки в две колонки — на телефоне это читается как съехавший блок. */
  .robot--finish{width:min(100%,260px);justify-self:center}
  .chrome__nav{display:none}
  .chrome__theme{margin-left:auto}
  .chrome__lang{flex:none;gap:3px;margin-left:0}
  .chrome__lang a{white-space:nowrap;padding:3px 5px;font-size:11px}
  .chrome__band{gap:10px;padding:8px 14px}
  .chrome__cta{padding:8px 12px;font-size:12px}
  .hudbar li{width:9px;height:8px}
  .chrome__stage{margin-left:auto}
}
@media (max-width:520px){
  .chrome__stage-name{display:none}
  .btn--lg{font-size:14px;padding:12px 18px}
  .stage{padding:48px 0 40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-hint{animation:none}
  .anim .stage:not(.is-in) .banner,
  .anim .stage:not(.is-in) .card,
  .anim .stage:not(.is-in) .mode,
  .anim .stage:not(.is-in) .perk{opacity:1;transform:none}
  .anim .banner,.anim .card,.anim .mode,.anim .perk{transition:none}
}