/* FROST 5 · сайт-разговор (/). Эталон — docs/frost5/mock/c2.html («Сайт», компьютер и телефон); движение — docs/frost5/MOTION.md.
   Цвета ТОЛЬКО через токены family.css: ни одного вбитого цвета, иначе светлая тема ломается — класс html.light
   перекрашивает лишь переменные. Новый оттенок нужен — просим токен у диспетчера, а не вписываем hex сюда.
   Исключение одно — два служебных токена тени ниже (--hl, --s-near): это не палитра, а белый/чёрный с прозрачностью. */

/* ===== Движение: множитель длительности, сдвиг, пружина =====
   У владельца включено «меньше движения»: длительности ×0.5, сдвиги ≤ 6px, но движение остаётся — выключать его нельзя.
   Поэтому каждая анимация ниже считает время через --k, а смещение — через --sh/--rs, а не вбитыми числами. */
:root{
  --k:1; --sh:10px; --rs:.5em;
  /* пружина: точки демпфированного осциллятора (перелёт ~8%); браузеры без linear() берут мягкий выезд */
  --spring:cubic-bezier(.22,1,.36,1);
  /* высота поверхностей. Три ступени: e1 — карточки и панели, e2 — главное (набросок системы, кнопка-акцент) и наведение, e3 — окно помощника.
     Сверху чёткая светлая кромка, ниже две тени: ближняя короткая и дальняя мягкая. Без прозрачности под текстом: поверхности плотные,
     иначе текст зависит от яркости неба за ними. */
  --hl:rgba(255,255,255,.08); --s-near:rgba(0,0,0,.4);
  --e1:inset 0 1px 0 var(--hl),0 1px 2px var(--s-near),0 8px 16px -8px var(--shade);
  --e2:inset 0 1px 0 var(--hl),0 2px 5px var(--s-near),0 16px 30px -12px var(--shade);
  --e3:inset 0 1px 0 var(--hl),0 4px 8px var(--s-near),0 30px 60px -20px var(--shade);
  --navh:68px;
}
html.light{--hl:rgba(255,255,255,.95); --s-near:rgba(35,55,95,.2)}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,.069,.23,.425,.617,.781,.909,.998,1.052,1.078,1.083,1.076,1.062,1.046,1.03,1.017,1.006,.999,.995,.993,.993,.994,.995,.996,.998)}
}
/* «Меньше движения» (у владельца включено системно): --k:0 — все длительности, посчитанные через него,
   становятся нулевыми, и страница рисуется сразу в итоговом виде. Было .5: заголовок всё равно выезжал,
   блоки всё равно проявлялись, просто вдвое быстрее — владелец 28.10 назвал это «всё мигает». */
@media (prefers-reduced-motion:reduce){:root{--k:0;--sh:6px;--rs:0}}

[hidden]{display:none!important}   /* display у .btn/.rb/.chip сильнее атрибута hidden, поэтому гасим явно */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--navh) + 12px)}
/* Небо рисует общий модуль sky.css/sky.js: тело и обёртки сайта прозрачные, иначе сплошной фон из family.css закроет небо */
body{overflow-x:hidden;background:transparent}
.sp{flex:1}
.wrap{width:100%;max-width:1360px;margin:0 auto}
.site{min-height:100dvh;display:flex;flex-direction:column;position:relative;z-index:1;background:transparent}
main{flex:1}
button{font-family:inherit}
a.btn{text-decoration:none}   /* ссылка-кнопка («Кабинет», «Открыть кабинет проекта») без подчёркивания, как обычная кнопка */

/* кнопка-акцент — на ступень выше обычной */
.btn.pri,.btn.ice{box-shadow:var(--e1)}
/* Наведение действует только там, где указатель умеет наводиться. На телефоне наведения нет: браузер
   вешает :hover после КАСАНИЯ и держит, пока не тапнешь в другое место — кнопка остаётся подсвеченной,
   стрелка уехавшей. Владелец 28.10: «интерфейсы кнопки все былмает». */
@media (hover:hover){.btn.pri:hover,.btn.ice:hover{box-shadow:var(--e2)}}

/* ===== Шапка. Липкая; при прокрутке сжимается и получает плотную подложку с размытием =====
   Высота шапки в потоке не меняется (иначе страница под ней дёргалась бы): сжимается только подложка (scaleY) и содержимое сдвигается на половину разницы. */
.top{position:sticky;top:0;z-index:20}
.top::before{content:"";position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--edge);opacity:.9;transform-origin:50% 0;transition:transform calc(260ms*var(--k)) var(--spring),opacity calc(200ms*var(--k))}
html.sc .top::before{opacity:1;transform:scaleY(.8);box-shadow:var(--e1)}
.nav{position:relative;display:flex;align-items:center;gap:18px;padding:16px 28px;transition:transform calc(260ms*var(--k)) var(--spring)}
html.sc .nav{transform:translateY(calc(var(--navh)*-.1))}
html.sc .prog{bottom:calc(var(--navh)*.2)}   /* нить прилипает к нижней кромке сжатой подложки, а не висит под ней */
.prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ice);transform-origin:0 50%;transform:scaleX(var(--rp,0));pointer-events:none}
@supports (animation-timeline:scroll()){
  @keyframes prog{to{transform:scaleX(1)}}
  .prog{transform:scaleX(0);animation:prog linear both;animation-timeline:scroll(root block)}
}

/* знак: лучи прорисовываются, узлы загораются, жёлтая искра вспыхивает (доска знаков, вариант A); под html.js — иначе без скрипта знак мог бы остаться недорисованным */
.mark{display:flex;align-items:center;gap:9px;color:var(--fg)}
.mark .word{font:800 italic 20px/1 var(--disp);letter-spacing:.04em}
/* знак — ссылка на корень сайта (владелец 09.10: «логотип всегда должен вести на лендинг, где бы он ни был»); зона нажатия 44px без смены раскладки */
a.mark{text-decoration:none;padding:8px 0;margin:-8px 0}
@media (max-width:388px){a.mark{padding:8px;margin:-8px}}   /* слово прячется, знак 28px: зона нажатия до 44 в обе стороны, раскладка не меняется */
.lg{display:block;flex:none;overflow:visible}
.lg .ice{stroke:var(--ice)} .lg .icef{fill:var(--ice)} .lg .volt{fill:var(--volt)} .lg .ink{fill:var(--bg)}
html.js .lg .arm{stroke-dasharray:40;stroke-dashoffset:40;animation:draw calc(.5s*var(--k)) cubic-bezier(.22,1,.36,1) forwards}
html.js .lg .arm:nth-child(2){animation-delay:0s} html.js .lg .arm:nth-child(3){animation-delay:0s}
html.js .lg .arm:nth-child(4){animation-delay:0s} html.js .lg .arm:nth-child(5){animation-delay:0s}
html.js .lg .arm:nth-child(6){animation-delay:0s}
html.js .lg .node{transform-box:fill-box;transform-origin:center;animation:pop calc(.36s*var(--k)) cubic-bezier(.34,1.56,.64,1) both;animation-delay:0s}
html.js .lg .spark{transform-box:fill-box;transform-origin:center;animation:spark calc(.6s*var(--k)) ease-out both;animation-delay:0s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes spark{0%{transform:scale(0);opacity:0}50%{transform:scale(1.35);opacity:1}100%{transform:scale(1);opacity:1}}

.links{display:flex;gap:4px}
.lnk{height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--mu);font:700 13px var(--f);cursor:pointer;transition:transform var(--t1) var(--ease),background-color var(--t1)}
@media (hover:hover){.lnk:hover{background:var(--p2);color:var(--fg)}}
.lnk:active{transform:scale(.985)}
.lnk:focus-visible,.chip:focus-visible,.rb:focus-visible,.it:focus-visible,.dmore summary:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.ibtn{width:36px;padding:0}
.ibtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.menub{display:none}
/* Переключатель языка RU · UK · EN: обычные ссылки (работают без JS), текущий язык отмечен рамкой и плотной заливкой.
   Цвета только из токенов семьи: свои оттенки здесь не заводим, иначе тёмная и светлая темы разойдутся. */
.langs{display:flex;gap:2px}
.langs a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;border:1px solid transparent;border-radius:9px;color:var(--mu);font:700 12px var(--f);letter-spacing:.06em;text-decoration:none;transition:background-color var(--t1)}
@media (hover:hover){.langs a:hover{background:var(--p2);color:var(--fg)}}
.langs a[aria-current]{background:var(--p2);color:var(--fg);border-color:var(--edge2)}
.langs a:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.langs-m{justify-content:center;gap:6px}

/* ===== Первый экран ===== */
.hero{display:grid;grid-template-columns:5fr 7fr;gap:30px;padding:14px 28px 20px;align-items:center}
/* левая колонка стоит на небе — значит, на плотной поверхности; на телефоне блок уезжает в нить и своей поверхности не имеет */
.heroslot>.copy{padding:26px 28px 24px;background:var(--p1);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--e2)}
.copy .lb{color:var(--mu)}
h1{margin:10px 0 12px;font:800 italic clamp(32px,2.9vw,42px)/.98 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
/* три строки-маски: слово поднимается из-под нижней кромки строки; поля маски гасят обрезку наклонных букв */
h1 .ln{display:block;overflow:hidden;padding:.08em .14em .12em;margin:-.08em -.14em -.12em}
h1 .lw{display:block}
html.js h1 .lw{transform:translateY(115%);animation:lnup calc(560ms*var(--k)) var(--spring) forwards;animation-delay:0s}
@keyframes lnup{to{transform:none}}
/* ротация голубого слова: четыре слова в одной ячейке — ширина строки равна самому длинному, строка не прыгает */
.rot{display:inline-grid}
.rw{grid-area:1/1;font-style:inherit;color:var(--ice-t);opacity:0}
html.js .rw{transform:translateY(var(--rs));filter:blur(6px);transition:transform calc(560ms*var(--k)) var(--spring),opacity calc(360ms*var(--k)) ease,filter calc(360ms*var(--k)) ease}
.rw.on{opacity:1}
html.js .rw.on{transform:none;filter:none}
html.js .rw.out{opacity:0;transform:translateY(calc(var(--rs)*-1));filter:blur(6px)}
.slogan{margin:14px 0 10px;display:flex;align-items:center;gap:10px;font:800 italic clamp(16px,1.6vw,20px)/1.1 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.slogan i{width:10px;height:10px;border-radius:3px;background:var(--ice);flex:none}
.lead{color:var(--mu);font-size:15px;margin:0;max-width:44ch}
.hint{margin-top:18px;color:var(--mu);font:600 12px var(--mono)}
html.js .copy .slogan,html.js .copy .lead,html.js .copy .hint{animation:rise calc(300ms*var(--k)) var(--spring) both;animation-delay:0s}

/* ===== Нить. Слои задаёт контейнер .conv (и окна проб .pw): c0 — поверхность, cb — пузырь, cc — карточка, cn — вложенное =====
   В тёмной между слоями берём шаг через уровень (p1→p3), чтобы пузырь отличался от фона заметнее соседнего уровня;
   в светлой карточка — p2 с волосяной кромкой, вложенное — белое. */
.conv,.pw{--c0:var(--p1);--cb:var(--p3);--cc:var(--p3);--cn:var(--p2);--cf:var(--fg);--cm:var(--mu);--ce:var(--edge);--seg:var(--ice);--off:var(--seg-off);color:var(--cf)}
/* Колонка чата не шире экрана. Замер прода 30.10 на 390 px: страница 743, сама колонка 1096 — её растягивала полоса
   сфер, одна строка из одиннадцати кнопок шириной 1096 px, которая должна прокручиваться ВНУТРИ себя.
   Одного min-width:0 не хватило (проверено на живой странице: по-прежнему 743) — колонка тянулась по содержимому
   даже с нулевым минимумом. Решает именно max-width:100%: колонка 390, прокрутка полосы остаётся внутренней. */
.conv{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%}
html.light .conv,html.light .pw{--cc:var(--p2);--cn:var(--p1)}
.conv .tag,.pw .tag{background:var(--cn);color:var(--cf)}
.conv .tag.ok{background:var(--gr-soft);color:var(--gr)} .conv .tag.ice,.pw .tag.ice{background:var(--ice-soft);color:var(--ice-t)}
.conv .btn,.pw .btn{background:var(--cn);color:var(--cf);border-color:var(--ce)}
.conv .btn.pri{background:var(--volt);color:var(--volt-ink);border-color:transparent}
.conv .btn.ice,.pw .btn.ice{background:var(--ice);color:var(--ice-ink);border-color:transparent}
.conv .batt i,.pw .batt i{background:var(--off)} .conv .batt i.on,.pw .batt i.on{background:var(--seg)}
/* окно помощника — главное на экране, поэтому на высшей ступени */
.win2{position:relative;height:clamp(480px,calc(100dvh - 150px),640px);border-radius:20px;background:var(--c0);border:1px solid var(--ce);box-shadow:var(--e3);overflow:hidden}
/* Световое пятно по кромке под курсором: только там, где есть мышь (на телефоне пятна нет — нет и курсора). Рамка рисуется маской:
   градиент виден лишь в полосе в 1px по периметру. Координаты ставит скрипт. */
@media (hover:hover) and (pointer:fine){
  .win2::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--ice),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity calc(260ms*var(--k))}
  .win2.lit::after{opacity:.9}
}

.cvh{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ce)}
.cvh b{display:block;font:800 14px/1.2 var(--f)}
/* Аватар менеджера (владелец 09.10: «тут не оформлено»): знак FROST белым на ледяном круге и зелёная точка «онлайн» */
.av{position:relative;width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,#2E9FD6 0%,#0B5E8E 55%,#083E63 100%);box-shadow:0 0 0 3px var(--ice-soft),0 6px 14px -6px rgba(6,60,100,.6)}
.av svg{width:24px;height:24px}
.av .on{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#2EE6A0;box-shadow:0 0 0 2.5px var(--panel,var(--p1))}
.av .on::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2EE6A0;animation:avpulse 2.4s ease-out infinite}
@keyframes avpulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.av .on::after{animation-duration:4.8s}}
.sm{font-size:12px}
.ttl{font:800 italic 20px/1.1 var(--disp);text-transform:uppercase}

/* Нижняя кромка нити растворяет содержимое, а не рубит его. Нить прокручивается, и на её нижней границе карточка
   обрывалась ровной линией ровно там, где начинается полоса сфер: это читалось не как «дальше прокрути», а как поломка
   (владелец 30.10, кадр телефона: «что это за пидарский переход»). Та же мера языка, что у самой полосы, — она так же
   растворяет свой правый край. Маска только снизу: сверху нить упирается в шапку разговора, обрыва там нет. */
.thread{display:flex;flex-direction:column;gap:10px;padding:16px;overflow:auto;flex:1;min-height:0;-webkit-mask-image:linear-gradient(180deg,black calc(100% - 22px),transparent);mask-image:linear-gradient(180deg,black calc(100% - 22px),transparent)}
/* вход ответов и карточек — пружиной: подъём и прозрачность */
@keyframes fadein{from{opacity:0}to{opacity:1}}   /* появление раздела без сдвига: плашки не прыгают при прокрутке */
@keyframes rise{from{opacity:0;transform:translateY(var(--sh))}to{opacity:1;transform:none}}
.thread>*{flex:none;animation:rise calc(240ms*var(--k)) var(--spring) both;animation-delay:var(--d,0ms)}
.thread>.copy{align-self:stretch;padding:4px 2px 6px}
.m{max-width:84%;padding:10px 13px;border-radius:16px 16px 16px 5px;background:var(--cb);font-size:14px;line-height:1.42;align-self:flex-start;overflow-wrap:anywhere}
.m.me{align-self:flex-end;border-radius:16px 16px 5px 16px;background:var(--ice);color:var(--ice-ink);font-weight:700}
.m.err{box-shadow:inset 3px 0 0 var(--pk)}
.m .fact{margin-top:6px;color:var(--cm);font-size:12.5px}
.m.ty{display:flex;align-items:center;gap:8px;padding:10px 14px}
/* «Агент думает» — знак «Кристалл-узел» (тот же, что в шапке) по кругу проигрывает её анимацию, период 1.6 с: лучи прорисовываются →
   узлы выпрыгивают → искра вспыхивает → короткая пауза → знак гаснет и всё снова (владелец 09.10: «наш анимирующийся логотип в чате,
   когда агент думает»). Цвета — токены. «Меньше движения» (у владельца включено системно): лучи стоят целиком, узлы и искра только
   пульсируют — движение мягче, но не выключено. */
.typing{display:inline-flex;align-items:center}
.think{display:block;width:22px;height:22px;flex:none;overflow:visible}
.think .tk-ice{stroke:var(--ice)} .think .tk-icef{fill:var(--ice)} .think .tk-spark{fill:var(--volt)} .think .tk-ink{fill:var(--bg)}
.think .tk-arm{stroke-dasharray:40;stroke-dashoffset:40;animation:tkdraw 1.6s cubic-bezier(.22,1,.36,1) infinite}
.think .tk-arm:nth-child(2){animation-delay:.04s} .think .tk-arm:nth-child(3){animation-delay:.08s} .think .tk-arm:nth-child(4){animation-delay:.12s}
.think .tk-arm:nth-child(5){animation-delay:.16s} .think .tk-arm:nth-child(6){animation-delay:.2s}
.think .tk-node,.think .tk-spark{transform-box:fill-box;transform-origin:center;opacity:0}
.think .tk-node{animation:tkpop 1.6s cubic-bezier(.34,1.56,.64,1) infinite}
.think .tk-spark{animation:tkspark 1.6s ease-out infinite}
@keyframes tkdraw{0%{stroke-dashoffset:40;opacity:1}30%,72%{stroke-dashoffset:0;opacity:1}88%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes tkpop{0%,26%{transform:scale(.2);opacity:0}46%,72%{transform:scale(1);opacity:1}88%,100%{transform:scale(.6);opacity:0}}
@keyframes tkspark{0%,45%{transform:scale(0);opacity:0}56%{transform:scale(1.35);opacity:1}64%,72%{transform:scale(1);opacity:1}88%,100%{transform:scale(.6);opacity:0}}
@keyframes tkpulse{0%,100%{transform:scale(.82);opacity:.45}50%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .think .tk-arm{animation:none;stroke-dashoffset:0}
  .think .tk-node{animation:tkpulse 1.6s ease-in-out infinite;opacity:.45}
  .think .tk-node:nth-child(2){animation-delay:.2s} .think .tk-node:nth-child(3){animation-delay:.4s} .think .tk-node:nth-child(4){animation-delay:.6s} .think .tk-node:nth-child(5){animation-delay:.8s}
  .think .tk-spark{animation:tkpulse 1.6s ease-in-out infinite;animation-delay:.5s;opacity:.45}
}
@keyframes blink{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* карточки в нити: набросок системы, проба, кабинет. Набросок — главное в ответе, поэтому на ступень выше пузыря */
.cd{align-self:flex-start;width:min(460px,100%);background:var(--cc);border:1px solid var(--ce);border-radius:var(--r1);padding:12px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--e2)}
.cd ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cd li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;min-width:0}
.cd li:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--seg);margin-top:6px;flex:none}
.cd li span{min-width:0;overflow-wrap:anywhere}
.cd li .as{font-style:italic}
/* строки наброска собираются ступенькой: новая строка входит пружиной, прежние не дёргаются при обновлении */
.cd li.nw{animation:rise calc(240ms*var(--k)) var(--spring) both;animation-delay:var(--d,0ms)}
.cd .pl{display:grid;gap:3px;padding-top:6px;border-top:1px solid var(--ce)}
.bigp{font:800 italic clamp(22px,2.2vw,26px)/1.1 var(--disp);text-transform:uppercase;font-variant-numeric:tabular-nums}
.cd .row{flex-wrap:wrap}
/* отсчёт чисел: итоговый текст лежит невидимым и держит размер, поверх него — бегущие цифры; строка не меняет ширину, пока цифры растут */
.cnt{display:inline-grid;vertical-align:baseline}
.bigp.cnt{display:grid}
.cnt>*{grid-area:1/1}
.cnt .fin{opacity:0}
.cnt.done .fin{opacity:1}

/* проба: окно-мини-система прямо в карточке, не поверх чата */
.prbox:empty{display:none}
.pr{border:1px solid var(--ce);border-radius:var(--r2);background:var(--c0);overflow:hidden;animation:rise calc(240ms*var(--k)) var(--spring)}
.pr .wt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--ce)}
.pr .wt b{font:700 13px var(--f);min-width:0}
.pr .wt u{width:10px;height:10px;border-radius:3px;background:var(--p3);display:inline-block;flex:none}
.pr .wb{display:grid;gap:8px;padding:10px}
.pr .list{display:flex;flex-direction:column;gap:6px}
.it{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:4px 10px;align-items:center;min-height:34px;padding:6px 10px;border:0;border-radius:10px;background:var(--p2);color:var(--cf);font:600 13px/1.3 var(--f);text-align:left;cursor:pointer;transition:transform var(--t1) var(--ease),background-color var(--t2)}
.it:active,.chip:active,.press:active,.rb:active{transform:scale(.985)}
/* строки пробы берут уровни напрямую: поверхность пробы в светлой теме белая, и --cn (тоже белый) слил бы строки с фоном */
.it.hot{background:var(--p3);box-shadow:inset 3px 0 0 var(--seg)}
.it .mono{font-size:12px;color:var(--cm)}
.it.hot .mono{color:var(--cf)}   /* строка на третьем уровне (L* 38.5): серый --cm даёт 3.6:1, основной цвет — больше 6 */
.it span{overflow-wrap:anywhere}
.pr .acts{display:flex;flex-wrap:wrap;gap:8px}
.pr .acts .btn,.cd .btn[data-act=probe]{height:44px}
.pr .mu{color:var(--cm)}

/* Варианты ответа стоят в нити ПОД последним сообщением помощника (как в брифе HR Landing) и пропадают после выбора: выбранное
   становится пузырём клиента. Над строкой ввода больше ничего нет — окно не теряет высоту на полосу чипов.
   Акценты функциональные: вариант — мягкий акцент (второстепенное), «Готово» и вход через Telegram — заливка (главное). */
/* Вброс сфер — полоса внизу чата над строкой ввода, как в первой версии (cf5f329, слово владельца 09.10 04:00): чипы входят пачкой с
   поочерёдным появлением, жирные, прозрачные с кромкой. Только сферы; всё после выбора (задачи, вопросы) остаётся в нити под сообщением. */
.chips{display:flex;gap:6px;padding:8px 12px 0;flex-wrap:nowrap;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;padding-right:28px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent);flex:none}
.chips::-webkit-scrollbar{display:none}
.chips>*{flex:none}
.chips:empty{display:none}
.chips.stg>*{animation:rise calc(240ms*var(--k)) var(--spring) both;animation-delay:0s}
.chips .chip{min-height:34px;padding:6px 12px;border-radius:17px;border:1px solid var(--ce);background:transparent;color:var(--cf);font:700 12.5px/1.2 var(--f)}
@media (hover:hover){.chips .chip:hover{background:var(--cn)}}
.opts{align-self:flex-start;max-width:100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
/* ступенькой входит только новый набор (другой вопрос, сфера), а не каждая перерисовка при отметке варианта */
.opts.stg>*{animation:rise calc(240ms*var(--k)) var(--spring) both;animation-delay:0s}
.ql{flex-basis:100%;color:var(--cm);font:600 12px var(--f)}
.chip{min-height:36px;padding:6px 14px;border-radius:18px;border:1px solid color-mix(in srgb,var(--ice) 38%,var(--ce));background:var(--ice-soft);color:var(--ice-t);font:700 13px/1.2 var(--f);text-align:left;cursor:pointer;transition:transform var(--t1) var(--ease),background-color var(--t1)}
@media (hover:hover){.chip:hover{background:color-mix(in srgb,var(--ice) 22%,transparent)}}
.chip[aria-pressed=true]{background:var(--ice);color:var(--ice-ink);border-color:transparent}
.chip[aria-pressed=true]::before{content:"✓";margin-right:6px}
.chip.go{background:var(--ice);color:var(--ice-ink);border-color:transparent}
.chip.alt{background:transparent;border-color:var(--ce);color:var(--cm);font-weight:600}
.chip:disabled{opacity:.6;cursor:default}
.opts input[type=date]{height:36px;border-radius:10px;border:1px solid var(--ce);background:var(--cb);color:var(--cf);padding:0 10px;font:600 13px var(--f)}

/* Карточка контакта под сообщением помощника: сверху крупная кнопка входа через Telegram (главное действие шага — фирменный синий
   Telegram, #2AABEE), под ней одно поле «имя и телефон» (необязательно, если вошёл через Telegram).
   Контраст (скилл ui-contrast): белая надпись на #2AABEE даёт 2.6:1 — ниже порога 4.5:1 для текста на залитой кнопке, поэтому надпись
   тёмная (6.9:1), а белый значок самолётика стоит на тёмно-синем кружке (4.8:1) — фирменный знак на месте, читается всё. */
.tgc{align-self:flex-start;width:min(460px,100%);background:var(--cc);border:1px solid var(--ce);border-radius:var(--r1);padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--e2)}
.tgbig{width:100%;height:56px;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;background:#2AABEE;color:#06222E;font:800 16px/1 var(--f);cursor:pointer;box-shadow:0 6px 16px -6px rgba(42,171,238,.65);transition:transform var(--t1) var(--ease),filter var(--t1)}
@media (hover:hover){.tgbig:hover{filter:brightness(1.05)}}
.tgbig:active{transform:scale(.985)}
.tgbig .pl{width:32px;height:32px;border-radius:50%;background:#1779AA;display:grid;place-items:center;flex:none}
.tgbig svg{width:18px;height:18px;fill:#fff;margin-left:-1px}
.tgbig:disabled{cursor:default;filter:none;opacity:.8}
.tgbig:focus-visible,.tgc .btn:focus-visible,.chip:focus-visible,a.chip:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.tgnote{margin:0;color:var(--cm);font-size:12.5px;line-height:1.4}
.tgnote a{color:var(--ice-t);font-weight:700}
.tgl{color:var(--cm);font:600 12.5px/1.35 var(--f)}
.tgok{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 10px;border-radius:8px;background:var(--gr-soft);color:var(--gr);font:700 12.5px/1.2 var(--f);overflow-wrap:anywhere}
.tgok::before{content:"✓"}
.tgc .prow{display:flex;gap:8px}
.tgc .ph{flex:1 1 0;width:0;min-width:0;height:48px;border-radius:var(--r2);background:var(--cn);border:1px solid var(--ce);padding:0 14px;color:var(--cf);font:600 16px var(--f);outline:0}
.tgc .ph::placeholder{color:var(--cm)}
.tgc .ph:focus{border-color:var(--ice-t)}
.tgc .ph[aria-invalid=true]{border-color:var(--pk)}
.tgc .btn.soft{height:48px;padding:0 16px;font-size:14px;background:var(--ice-soft);color:var(--ice-t);border-color:color-mix(in srgb,var(--ice) 38%,var(--ce))}
.tgc.done .ph,.tgc.done .btn{opacity:.55;pointer-events:none}
.phe{margin:0;color:var(--pk);font-size:12.5px;line-height:1.4}
/* реплики переписки сделки: подпись автора над текстом; служебные события — тихой строкой */
.who{font:700 11.5px/1.2 var(--f);color:var(--ice-t);margin-bottom:3px}
.m.eng{box-shadow:inset 3px 0 0 var(--ice)}
.m.ev{background:transparent;color:var(--cm);font-size:12.5px;padding:2px 4px}
a.chip{text-decoration:none;display:inline-flex;align-items:center}

/* Строка ввода: поле, справа «Отправить» (квадратная, мягкий акцент) и широкий микрофон (заливка акцентом — главное действие строки) */
.comp{display:flex;gap:8px;align-items:center;padding:10px 12px;flex:none}
.comp .in{flex:1;min-width:0;height:44px;border-radius:22px;background:var(--cb);border:1px solid var(--ce);padding:0 16px;color:var(--cf);font:600 14px var(--f);outline:0}
.comp .in:focus{border-color:var(--ice-t)}
.comp .in::placeholder{color:var(--cm)}
.comp .in:disabled{opacity:.7}
.rb{width:44px;height:44px;border-radius:12px;border:1px solid var(--ce);background:var(--cb);color:var(--cf);display:grid;place-items:center;cursor:pointer;flex:none;padding:0;transition:transform var(--t1) var(--ease),background-color var(--t1)}
.rb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rb.send{background:var(--ice-soft);color:var(--ice-t);border-color:color-mix(in srgb,var(--ice) 38%,var(--ce))}
@media (hover:hover){.rb.send:hover:not(:disabled){background:color-mix(in srgb,var(--ice) 22%,transparent)}}
.rb.send:disabled{opacity:.5;cursor:default}
.rb.mic{width:72px;background:var(--ice);color:var(--ice-ink);border-color:transparent}
.rb.mic svg{width:22px;height:22px}
.rb.mic.on{background:var(--pk);color:var(--bg);border-color:transparent;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px var(--pk-soft)}}

/* ===== Разделы ниже первого экрана ===== */
.sec{padding:92px 28px 0}
/* Заголовок раздела лежит прямо на небе, без своей карточки: отдельные плашки у каждого раздела дробили страницу (владелец 08.10:
   «сырой»). Читаемость держит мягкая подложка из цвета фона — тот же приём, что у .hd в sky.css; scrim — запасной цвет без color-mix. */
.sh{width:fit-content;max-width:min(780px,100%);margin:0 0 26px -14px;padding:8px 14px;border-radius:14px;background:var(--scrim);background:color-mix(in srgb,var(--bg) 82%,transparent)}
.sh .lb{margin-bottom:6px}
.sh h2{margin:0;font:800 italic clamp(26px,3vw,40px)/1.02 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.sh p{margin:10px 0 0;color:var(--mu);font-size:15px;max-width:60ch}

/* появление при прокрутке: раздел целиком — заголовок, внутри — ступенька по 50 мс у первых 5 элементов.
   Через animation с fill «backwards», а не transition: после показа элемент возвращается к обычным стилям, и подъём при наведении работает. */
html.js .sec:not(.in) .sh,html.js .sec:not(.in) .stg>*{opacity:0}
html.js .sec.in .sh{animation:fadein calc(300ms*var(--k)) var(--ease) backwards}
html.js .sec.in .stg>*{animation:fadein calc(300ms*var(--k)) var(--ease) backwards;animation-delay:0s}
/* витрина устройств — одна панель, а не набор карточек: появляется целиком (figure внутри «растворены» display:contents) */
html.js .sec:not(.in) .dpanel{opacity:0}
html.js .sec.in .dcar{animation:fadein calc(300ms*var(--k)) var(--ease) backwards;animation-delay:60ms}

/* Направления */
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}   /* владелец 11.10: крупные карточки (Разработка, Техника) — верхним рядом, меньшие (Продвижение,
   Консультации) — нижним; в ряду карточки одной высоты, а «Вам:» и кнопка прижаты к низу — без пустоты посередине */
.dg .dyou{margin-top:auto}
.dg,.cs,.bt,.nc{background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1);transition:transform var(--t2) var(--spring),box-shadow var(--t2)}
@media (hover:hover){.dg:hover,.cs:hover,.bt:hover,.nc:hover{box-shadow:var(--e2)}}   /* без подъёма: плашка не прыгает, отклик — только тень (владелец 16.10) */
.dg{display:flex;flex-direction:column;gap:14px;padding:20px}
.dgh{display:flex;gap:14px;align-items:flex-start}
.dgn{font:700 12px var(--mono);color:var(--ice-t);padding-top:7px}
.dg h3{margin:0;font:800 italic 22px/1.1 var(--disp);text-transform:uppercase}
.dg .hook{margin:4px 0 0;color:var(--mu);font-size:14px}
.dl{margin:0;padding:0;list-style:none;display:grid;gap:8px}
/* пункт — ссылка на страницу направления /s/<ключ>; квадратик-маркер переехал с li на ссылку, чтобы вся строка была целью нажатия */
.dl a{display:grid;grid-template-columns:8px 1fr;gap:1px 10px;margin:0 -8px;padding:6px 8px;border-radius:10px;color:inherit;text-decoration:none;transition:background-color var(--t1)}
.dl a:before{content:"";grid-row:1/3;width:8px;height:8px;border-radius:2px;background:var(--ice);margin-top:6px}
@media (hover:hover){.dl a:hover{background:var(--p2)}}
.dl a:focus-visible{outline:2px solid var(--ice);outline-offset:1px}
.dl a b:after{content:"\2192";display:inline-block;margin-left:6px;color:var(--ice-t);opacity:0;transform:translateX(-4px);transition:opacity var(--t2),transform var(--t2) var(--spring)}
@media (hover:hover){.dl a:hover b:after,.dl a:focus-visible b:after{opacity:1;transform:none}}
@media (hover:none){.dl a b:after{opacity:.75;transform:none}}
.dl b{font-size:14px}
.dl span{color:var(--mu);font-size:13px;grid-column:2}
.dmore{border-top:1px solid var(--edge);padding-top:12px}
.dmore summary{cursor:pointer;list-style:none;color:var(--mu);font-size:13px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.dmore summary::-webkit-details-marker{display:none}
.dmore summary:after{content:"+";width:36px;height:36px;border-radius:9px;background:var(--p2);display:grid;place-items:center;font:700 16px var(--mono);color:var(--fg)}
.dmore[open] summary:after{content:"−"}   /* «−» вместо поворота: поворачивается вся коробка и ромбом вылезает за край */
.dmore .dl{margin-top:12px;animation:rise calc(240ms*var(--k)) var(--spring)}
.dyou{margin-top:auto;display:flex;gap:8px;align-items:baseline;padding:10px 12px;border-radius:var(--r2);background:var(--p2);font-size:13px}
.dyou b{color:var(--ice-t);flex:none}
.dcta{height:44px;align-self:flex-start}

/* Случаи «Было → Стало → Вам» */
.csg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.cs{padding:16px 18px}
.cst{white-space:pre-line;font-size:13.5px;line-height:1.45;color:var(--mu)}
.cs .cr{display:grid;gap:5px;padding:9px 0;border-top:1px solid var(--edge)}
.cs .cr:first-child{border-top:0;padding-top:0}
.cs .cr:last-child{padding-bottom:0}
.cs .cr p{margin:0;font-size:13.5px;line-height:1.45;color:var(--mu)}
.cs .ck{justify-self:start;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font:700 11.5px/1 var(--f);background:var(--pk-soft);color:var(--pk)}
html:not(.light) .cs .ck{color:#FFA8C0}   /* «Было»: --pk на подкрашенной плашке в тёмной теме — 4.05:1, этот оттенок — 6.0; правила k1/k2 ниже сильнее по специфичности и красят свои метки сами */
.cs .cr.k1 .ck{background:var(--ice-soft);color:var(--ice-t)}
.cs .cr.k2 .ck{background:var(--gr-soft);color:var(--gr)}
.cs .cr.k2 p{color:var(--fg);font-weight:600}

/* Как я работаю: слева заголовок (липкий), справа рельса из шести шагов */
.howg{display:grid;grid-template-columns:5fr 7fr;gap:30px;align-items:start}
.howg>.sh{position:sticky;top:calc(var(--navh) + 18px)}
.rail{position:relative;margin:0;padding:22px 24px 22px 70px;list-style:none;display:grid;gap:0;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1)}
/* линия: от центра первого круга до центра последнего; длину (--lh) и заполнение (--p) ставит скрипт при прокрутке */
.rl{position:absolute;left:39px;top:38px;width:2px;height:var(--lh,0);background:var(--p3);border-radius:1px}
.rl i{position:absolute;inset:0;background:var(--ice);border-radius:1px;transform-origin:50% 0;transform:scaleY(var(--p,0))}
.rs{position:relative;padding:0 0 26px}
.rs:last-child{padding-bottom:0}
.rs:before{content:attr(data-n);position:absolute;left:-46px;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--p2);border:1px solid var(--edge2);font:700 12px var(--mono);color:var(--mu);transition:background-color var(--t2),color var(--t2),border-color var(--t2)}
.rs h3{margin:0 0 4px;font:800 italic 17px/1.2 var(--disp);text-transform:uppercase}
.rs p{margin:0;color:var(--mu);font-size:14px;max-width:56ch}
html.js .rs h3,html.js .rs p{opacity:.5;transition:opacity var(--t2)}
html.js .rs.on h3,html.js .rs.on p{opacity:1}
.rs.on:before{background:var(--ice);color:var(--ice-ink);border-color:transparent;animation:pop calc(.36s*var(--k)) cubic-bezier(.34,1.56,.64,1)}

/* Попробуйте сами: окна живых проб. Компьютер — сетка 2×2, телефон — лента с прилипанием */
.tg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.pwo{border-radius:var(--r2);box-shadow:var(--e1);transition:transform var(--t2) var(--spring),box-shadow var(--t2)}
@media (hover:hover){.pwo:hover{box-shadow:var(--e2)}}
.pwo{display:flex}
.pwo>.pr{animation:none;flex:1;min-width:0}
/* восьмая ячейка — приглашение рассказать свою задачу: сетка 4×2 (и 2×4 на планшете) остаётся ровной без дыры */
.tcta{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px;border:1px solid var(--edge);border-radius:var(--r2);background:var(--p1)}
.tcta b{font:800 italic 20px/1.1 var(--disp);text-transform:uppercase}
.tcta p{margin:0;color:var(--mu);font-size:14px}
.tcta .btn{align-self:flex-start;height:44px}
.pw .wt b{font:800 italic 14px var(--disp);text-transform:uppercase}
/* название пробы длиннее окна обрезалось многоточием («КАМПАНИЯ ПРОДВИЖЕНИЯ») — важнее прочитать целиком, чем сохранить одну строку */
.pw .wt b.ell{overflow:visible;text-overflow:clip;white-space:normal;line-height:1.15}

/* База: четыре плитки, у каждой своя маленькая живая иллюстрация (CSS, без картинок) */
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
.bt{padding:14px 14px 18px}
.bt h3{margin:0 0 6px;font:800 italic 17px/1.15 var(--disp);text-transform:uppercase}
.bt p{margin:0;color:var(--mu);font-size:13.5px}
.bsite{display:inline-block;margin:12px 0 0;padding:8px 14px;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r2);box-shadow:var(--e1);color:var(--mu);font-size:13px}
.bsite b{color:var(--fg)}
.ill{position:relative;height:126px;margin-bottom:14px;border-radius:var(--r2);background:var(--p2);border:1px solid var(--edge);overflow:hidden}
/* Мини-интерфейсы «Базы» — той же техникой, что лента устройств: цифры, строки, пузыри, ледяной акцент; статично и читается и при «меньше движения».
   Текст на p3 — основным цветом (серый --mu на третьем уровне дал бы <4.5:1). Только токены family.css. */
.ill .ui{display:grid;gap:5px;padding:9px 10px;align-content:start}
.ill .uh{display:flex;align-items:center;gap:4px}
.ill .uh u{width:6px;height:6px;border-radius:2px;background:var(--p3);text-decoration:none}
.ill .uh .mono{margin-left:auto;display:flex;gap:4px}
.ill .uh em{font:600 10px/1 var(--mono);font-style:normal;padding:3px 6px;border-radius:5px;background:var(--p3);color:var(--fg)}
.ill .ur{display:flex;align-items:center;gap:8px;height:20px;padding:0 8px;border-radius:7px;background:var(--p3);font:600 10.5px/1 var(--mono);color:var(--fg)}
.ill .ur i{flex:1;height:5px;border-radius:3px;background:var(--edge2)}
.ill .ur.hot{background:var(--ice-soft);box-shadow:inset 3px 0 0 var(--ice)}
.ill .ur.hot i{background:var(--ice)}
.ill .ub{justify-self:start;padding:5px 10px;border-radius:7px;background:var(--ice);color:var(--ice-ink);font:800 10.5px/1 var(--f)}
.ill .bb{justify-self:start;max-width:80%;padding:6px 9px;border-radius:11px 11px 11px 4px;background:var(--p3);color:var(--fg);font:600 11px/1.25 var(--f)}
.ill .bb.me{justify-self:end;border-radius:11px 11px 4px 11px;background:var(--ice);color:var(--ice-ink)}
.ill .bb b{font:800 11.5px/1.25 var(--mono)}
.ill-ai .ui{gap:9px;padding-top:12px}
.ill .sr{display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:7px;background:var(--p3);color:var(--fg);font:600 11px/1 var(--mono)}
.ill .sr s{width:8px;height:8px;border-radius:50%;background:var(--gr);text-decoration:none;flex:none}
.ill .sr b{margin-left:auto;color:var(--gr);font:800 10px/1 var(--mono)}
html.light .ill .sr b{color:var(--gr)}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}

/* Числа + вопросы: слева заголовок и три цифры, справа ответы. Цифры стопкой — «значение слева, подпись справа» */
.faqg{display:grid;grid-template-columns:5fr 7fr;gap:30px;align-items:start}
.faql{position:sticky;top:calc(var(--navh) + 18px)}
.faql .sh{margin-bottom:14px}
.ngrid{display:grid;grid-template-columns:1fr;gap:10px}
.nc{display:flex;align-items:baseline;gap:18px;padding:16px 20px}
.nv{flex:none;min-width:7.4ch;font:700 clamp(28px,3vw,40px)/1 var(--mono);letter-spacing:-.02em;color:var(--fg)}
.nl{color:var(--mu);font-size:14px}
.faq{display:grid;gap:8px}
.fq{background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1)}
.fq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;min-height:56px;padding:10px 14px 10px 20px;border-radius:var(--r1);font:700 15px/1.3 var(--f)}
.fq summary::-webkit-details-marker{display:none}
.fq summary:after{content:"+";width:36px;height:36px;border-radius:9px;background:var(--p2);display:grid;place-items:center;font:700 16px var(--mono);color:var(--fg)}
.fq[open] summary:after{content:"\2212"}
.fq summary:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.fq p{margin:0;padding:0 20px 18px;color:var(--mu);font-size:14.5px;line-height:1.5;max-width:62ch;animation:rise calc(240ms*var(--k)) var(--spring)}

/* Финал */
.ask{padding-bottom:12px}
.askb{padding:54px 24px 46px;text-align:center;background:var(--p1);border:1px solid var(--edge);border-radius:24px;box-shadow:var(--e3)}
.askb h2{margin:0;font:800 italic clamp(32px,5vw,64px)/1 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.askb p{margin:16px auto 24px;max-width:56ch;color:var(--mu);font-size:15px}
.btn.big{height:52px;padding:0 28px;font-size:15px;border-radius:var(--r2)}
.askl{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--mu);font:700 13px var(--f)}
.askl i{width:8px;height:8px;border-radius:2px;background:var(--ice)}

.foot{display:flex;justify-content:space-between;gap:12px;color:var(--mu);font-size:12px}
/* «Условия работы» — ссылка на оферту, которую клиент видит и в чате, и перед оплатой; здесь она нужна тем, кто читает сайт до разговора.
   Зона нажатия растёт до 44px отступом с обратным вылетом: подвал по высоте остаётся прежним. */
.foot a{display:inline-flex;align-items:center;white-space:nowrap;padding:14px 8px;margin:-14px -8px;border-radius:8px;color:var(--ice-t);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--edge2)}
@media (hover:hover){.foot a:hover{text-decoration-color:currentColor}}
.foot a:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}
.foot.wrap{width:calc(100% - 56px);margin:28px auto 22px;padding:12px 18px;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r2);box-shadow:var(--e1)}

/* ===== Меню-лист (телефон): переходы по разделам и язык ===== */
.menu{position:fixed;inset:0;z-index:30;background:var(--scrim);display:flex;align-items:flex-end;animation:fade var(--t2) var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet2{width:100%;max-height:86%;overflow:auto;border-radius:22px 22px 0 0;background:var(--bg);color:var(--fg);padding:10px 14px 18px;animation:up var(--t3) var(--spring);display:grid;gap:8px;align-content:start;box-shadow:var(--e3)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.grab{width:38px;height:5px;border-radius:3px;background:var(--p3);margin:0 auto 4px}
.mlinks{display:grid;gap:8px}
.mlinks .btn{height:48px;justify-content:flex-start;padding:0 16px;font-size:14px}
.foot-m{color:var(--fa);font-size:12px;text-align:center;padding-top:4px}

/* ===== Смена темы =====
   Круговое раскрытие от кнопки (View Transitions): снимок новой темы раскрывается кругом, сам круг рисует скрипт (clip-path).
   Прежняя и новая страница показываются как есть, без стандартного перекрёстного затухания. Без поддержки — плавная смена за 260 мс (.tsw). */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
html.tsw *,html.tsw *::before,html.tsw *::after{transition:background-color 260ms ease,color 260ms ease,border-color 260ms ease,fill 260ms ease,stroke 260ms ease,box-shadow 260ms ease!important}

/* ===== Бизнес в телефоне: карусель отраслей =====
   Каждая отрасль — своя «сцена» (.dslide) с набором устройств и историей на 12 секунд. Историю ведёт скрипт: на активной сцене по очереди
   ставятся классы a1…a9, а CSS каждому элементу говорит, при каком шаге он появляется (.atN), гаснет (.toN), подсвечивается (.hiN/.okN),
   меняет цифру (.swN), рисует линию (.drN) или едет по карте (.mvN). Так одна временная линия двигает все экраны сразу, и они не расходятся,
   а набор «кирпичиков» общий для всех девяти отраслей — новая сцена собирается из разметки без отдельного CSS.
   Двигаем только opacity/transform. Без скрипта в разметке уже стоят все a1…a9 — на каждой сцене виден итоговый кадр.
   Цвета только из токенов: экран — «чёрное стекло» (в светлой теме — белое) в рамке-корпусе, вложенное на ступень выше экрана. */
.dcar{--sw:86%;--gp:2.5%;position:relative}

/* шапка карусели: стрелки крупные и с мягким акцентом — сразу видно, что сцены листаются */
/* стрелки лежат НА макете (владелец 17.10: «стрелки сделай на макете самом, а не выше него»): в .dview, поверх активной карточки, у её левого и правого края.
   Стекло, а не заливка — под кнопкой остаётся читаемый макет; иконка --fg, на наведении --ice. Центр по вертикали — середина карточки (у окна снизу запас 30px, сверху 6px: отсюда −12px).
   translate отдельно от transform, чтобы нажатие (scale) не сбрасывало вертикальное центрирование. */
.dnav{position:absolute;z-index:8;top:calc(50% - 12px);translate:0 -50%;width:44px;height:44px;border-radius:50%;border:1px solid var(--edge2);background:color-mix(in srgb,var(--p1) 52%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);color:var(--fg);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform var(--t2) var(--spring),background-color var(--t2),color var(--t2),box-shadow var(--t2)}
.dprev{left:calc((100% - var(--sw))/2 + 8px)}
.dnext{right:calc((100% - var(--sw))/2 + 8px)}
.dnav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.dnav:hover{color:var(--ice);border-color:var(--ice);box-shadow:var(--e2)}}
.dnav:active{transform:scale(.93)}
.dnav:focus-visible,.dot:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
/* подсказка «листай»: пока посетитель не тронул карусель, правая стрелка чуть подаётся вперёд */
.dcar:not(.touched) .dnext svg{animation:dnudge 2.4s var(--ease) infinite}
@keyframes dnudge{0%,60%,100%{transform:none}75%{transform:translateX(5px)}88%{transform:translateX(-1px)}}
.dot{width:28px;height:44px;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer}
.dot i{display:block;width:8px;height:8px;border-radius:50%;background:var(--seg-off);transition:width 200ms var(--spring),background-color 200ms}
.dot[aria-current="true"] i{width:24px;border-radius:4px;background:var(--ice)}
@media (hover:hover){.dot:hover i{background:var(--fa)}}
@media (hover:hover){.dot[aria-current="true"]:hover i{background:var(--ice)}}

/* заголовок карточки: поверх окна, у верхнего края активной карточки (она держит под него поле --pt). Мышь и касание проходят сквозь него (листание свайпом),
   ловят только точки. Exo 2 курсив прописными; объём — многослойная тень (светлая кромка, тёмная опора, мягкий спуск) и ледяное свечение;
   в светлой теме свечение и тень слабее. Смена текста — 240 мс × --k (≤260 мс). */
.dhd{position:absolute;z-index:7;top:22px;left:calc((100% - var(--sw))/2 + 28px);right:calc((100% - var(--sw))/2 + 28px);display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.dhd .dot{pointer-events:auto}
.dttl{margin:0;min-width:0;font:800 italic clamp(20px,2.4vw,30px)/1.08 var(--disp);text-transform:uppercase;letter-spacing:.01em;color:var(--fg);overflow-wrap:anywhere;
  text-shadow:0 1px 0 rgba(255,255,255,.22),0 2px 1px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.45),0 0 16px color-mix(in srgb,var(--ice) 55%,transparent),0 0 38px color-mix(in srgb,var(--ice) 28%,transparent)}
html.light .dttl{text-shadow:0 1px 0 rgba(255,255,255,.8),0 2px 3px rgba(20,30,50,.20),0 5px 12px rgba(20,30,50,.12),0 0 14px color-mix(in srgb,var(--ice) 22%,transparent)}
.dttl.sw{animation:ttlin calc(240ms*var(--k)) var(--ease)}
@keyframes ttlin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dmeta{display:flex;align-items:center;gap:8px;flex:none}
.dcount{color:var(--mu);font-size:12px}
.ddots{display:flex;justify-content:center;flex-wrap:wrap}
.dcar{--pt:72px}   /* верх карточки: 22 (отступ заголовка) + 44 (строка с точками) + 12 до устройств */
.dprev,.dnext{top:calc(50% - 12px + (var(--pt) - 22px)/2)}   /* центр сцены, а не карточки: сверху заголовок */
/* окно и лента сцен: активная в центре, соседние выглядывают по краям и притушены; высота окна равна высоте активной сцены */
.dview{position:relative;overflow:hidden;touch-action:pan-y;padding:6px 0 30px;margin:-6px 0 -30px;transition:height calc(420ms*var(--k)) var(--spring)}
.dtrack{display:flex;align-items:flex-start;gap:var(--gp);transform:translateX(calc((100% - var(--sw))/2 - var(--i,0)*(var(--sw) + var(--gp)) + var(--dx,0px)));transition:transform calc(560ms*var(--k)) var(--spring)}
.dtrack.drag{transition:none}
.dslide{--bez:color-mix(in srgb,var(--p3) 58%,var(--bg));--s0:var(--bg);--s1:var(--p1);--s2:var(--p2);flex:0 0 var(--sw);min-width:0;position:relative;padding:34px 32px 22px;border-radius:24px;border:1px solid var(--edge);box-shadow:var(--e2);overflow:hidden;background:radial-gradient(70% 90% at 50% 0%,var(--ice-soft),transparent 72%),var(--p1);opacity:.5;transform:scale(.965);transition:opacity calc(420ms*var(--k)) ease,transform calc(560ms*var(--k)) var(--spring)}
html.light .dslide{--bez:color-mix(in srgb,var(--p3) 80%,var(--fg));--s0:var(--p1);--s1:var(--p2);--s2:var(--p3);background:radial-gradient(70% 90% at 50% 0%,var(--ice-soft),transparent 72%),var(--p2)}
.dslide.on{opacity:1;transform:none}
/* поля под стрелки: на широком экране круг 44px (отступ 8px) целиком в поле карточки и макет не перекрывает */
.dslide:not([data-k="screens"]){padding-inline:60px}
html:not(.js) .dslide{opacity:1;transform:none}

/* на широком экране ячейки сетки заняты устройствами и подписями напрямую (figure «растворён»), на узком — figure снова цельный блок.
   Колонки каждой сцены задаёт её --cols, а устройство выбирает свою колонку через --c */
.dstage{display:grid;grid-template-columns:var(--cols,1fr 1fr 1fr);grid-template-rows:auto auto;column-gap:clamp(14px,2.2vw,36px);align-items:end}
.dv{display:contents;margin:0}   /* margin: у figure по умолчанию поля 40px — в ленте на телефоне они сузили бы устройства */
.dv>*{grid-column:var(--c)}
.dvh{grid-row:1;align-self:end;position:relative;z-index:1;min-width:0}
.dv.hang .dvh{margin-bottom:clamp(26px,5vw,76px)}   /* экран висит на стене, а не стоит на полу */
.dcap{grid-row:2;align-self:start;margin:14px auto 0;max-width:24ch;color:var(--mu);font:500 13px/1.35 var(--f);text-align:center;text-wrap:balance}
/* подписи у всех сцен начинаются с одной линии (align-self:start): раньше при align-items:end двухстрочная подпись стояла выше однострочной */
/* корпус: тонкий ободок + внутренняя кромка, мягкая тень предмета на «полу»; блик стекла — диагональный градиент не ярче 6% */
.hw{position:relative;container-type:inline-size;background:var(--bez);border:1px solid var(--edge2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent),0 20px 26px -20px var(--shade)}
.hw::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;background:linear-gradient(125deg,color-mix(in srgb,var(--fg) 6%,transparent),transparent 38%)}
.scr{position:relative;overflow:hidden;background:var(--s0);color:var(--fg);font-size:11px}
.dtag{display:none}

/* телефон: Telegram-бот */
/* телефон: рамка ≈2% ширины, скругление ≈17% (эллипс «x/y» даёт круглый угол при любой пропорции), «остров», строка статуса, полоска «домой», кнопки по бокам */
.hw-phone{width:100%;max-width:240px;margin:0 auto;aspect-ratio:9/18;border-radius:17%/8.5%;padding:max(3px,2.1%)}
.hw-phone::before{content:"";position:absolute;z-index:5;left:50%;top:2.4%;transform:translateX(-50%);width:27%;aspect-ratio:3.3;border-radius:99px;background:#000}   /* остров: физически чёрный в обеих темах */
.dv-phone .dvh{width:100%;max-width:240px;justify-self:center}
.dv-phone .dvh::before{content:"";position:absolute;left:-2px;top:15%;width:3px;height:5%;border-radius:2px 0 0 2px;background:var(--bez);box-shadow:0 190% 0 var(--bez)}   /* громкость */
.dv-phone .dvh::after{content:"";position:absolute;right:-2px;top:22%;width:3px;height:9%;border-radius:0 2px 2px 0;background:var(--bez)}   /* питание */
.hw-phone .scr{height:100%;border-radius:15.5%/7.8%;display:flex;flex-direction:column;padding-bottom:calc(3px + 3.4%);   /* полоска «домой» — под содержимым, а не поверх кнопок */
  font-size:clamp(9px,5.7cqw,13.5px)}
.hw-phone .scr::before{content:"9:41";flex:none;box-sizing:border-box;height:2.7em;padding:1.05em 0 0 2em;font:800 .78em/1 var(--f);color:var(--fg);background:linear-gradient(currentColor,currentColor) right 6.2em bottom 1em/.3em .45em no-repeat,linear-gradient(currentColor,currentColor) right 5.65em bottom 1em/.3em .7em no-repeat,linear-gradient(currentColor,currentColor) right 5.1em bottom 1em/.3em .95em no-repeat,radial-gradient(circle,currentColor 58%,transparent 62%) right 3.3em bottom .85em/.8em .8em no-repeat,linear-gradient(color-mix(in srgb,currentColor 75%,transparent),color-mix(in srgb,currentColor 75%,transparent)) right 1.3em bottom .9em/1.6em .8em no-repeat}   /* время слева; справа три крошечных значка: сеть, Wi-Fi, батарея */
.hw-phone .scr::after{content:"";position:absolute;left:50%;bottom:1.6%;transform:translateX(-50%);width:34%;height:3px;border-radius:2px;background:color-mix(in srgb,var(--fg) 55%,transparent)}
.ph-h{display:flex;align-items:center;justify-content:center;gap:.6em;padding:.2em .9em .8em;border-bottom:1px solid var(--edge);font-weight:800}
.ph-av{display:none}
.ph-t{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:.55em;padding:.8em .8em .4em;overflow:hidden}
/* переписка прижата к строке ввода, как в мессенджере: новое сообщение всегда видно целиком, старые уходят вверх под мягкий край */
.ph-t:not(.pc){justify-content:flex-end;-webkit-mask-image:linear-gradient(transparent,#000 1.4em);mask-image:linear-gradient(transparent,#000 1.4em)}
.bb{max-width:90%;padding:.6em .85em;border-radius:1.1em 1.1em 1.1em .35em;background:var(--s2);line-height:1.35}
.bb.me{align-self:flex-end;border-radius:1.1em 1.1em .35em 1.1em;background:var(--ice);color:var(--ice-ink);font-weight:700}
.bb.ok{background:var(--gr-soft);color:var(--gr);font-weight:700}
.pp{display:grid}
.pp>.bb{grid-area:1/1;align-self:start;justify-self:start}   /* «печатает» и ответ лежат в одной ячейке: место под ответ занято заранее, строки не прыгают */
.bb.ty{display:flex;gap:.3em;align-items:center;padding:.75em .9em;width:max-content}
.bb.ty i{width:.5em;height:.5em;border-radius:50%;background:var(--mu);animation:blink 1s infinite var(--ease);animation-play-state:paused}
.bb.ty i:nth-child(2){animation-delay:.15s} .bb.ty i:nth-child(3){animation-delay:.3s}
.dslide.run .bb.ty i{animation-play-state:running}
.ks{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.6em}
.k{padding:.4em .8em;border-radius:1em;border:1px solid var(--edge2);background:var(--s1);font:700 .95em var(--mono)}
.ph-i{display:flex;align-items:center;margin:.2em .8em 1.5em;padding:.6em .9em;border-radius:1.5em;background:var(--s1);color:var(--fa)}
.ph-i i{display:none}

/* рабочее место: списки, заявки, тикеты */
/* монитор: тонкая рамка без «подбородка» */
.hw-desk{width:100%;aspect-ratio:16/10;border-radius:10px;padding:4px}
.hw-desk .scr{height:100%;border-radius:7px;font-size:clamp(9px,3.5cqw,14px);display:flex;flex-direction:column}
.dk-top{display:flex;align-items:center;gap:.5em;padding:.65em .8em;border-bottom:1px solid var(--edge)}
.dk-top u{display:none}
.dk-top b{font:800 1.05em var(--f)}
.dk-l{flex:1;min-height:0;display:grid;align-content:center;padding:.3em .5em}   /* строки по центру экрана: пустота внизу монитора убрана */
.dk-r{display:grid;grid-template-columns:1fr auto auto;gap:.7em;align-items:center;padding:.85em .5em;border-bottom:1px solid var(--edge);min-width:0}
.dk-r:last-child{border-bottom:0}
.dk-r>b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-r .mono{color:var(--mu);white-space:nowrap}
.v-p{font-style:normal;padding:.2em .6em;border-radius:.6em;font-weight:700;background:transparent;color:var(--mu);white-space:nowrap;font-size:.94em}
.v-p.i{background:var(--ice);color:var(--ice-ink)}
.v-p.g{background:var(--gr-soft);color:var(--gr)}
.v-p.w{background:var(--ice-soft);color:var(--ice-t)}
.v-p.r{background:var(--s2);color:var(--fg)}
.stw{display:grid;justify-items:end}
.stw>*{grid-area:1/1}   /* стопка состояний: статус меняется на месте, строка не прыгает */
.desk-stand{position:relative;height:26px}   /* наклонная алюминиевая ножка + плоское основание, без толстой шеи */
.desk-stand::before{content:"";position:absolute;left:50%;top:0;width:7%;height:21px;transform:translateX(-50%);background:var(--bez);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.desk-stand::after{content:"";position:absolute;left:50%;bottom:0;width:26%;height:5px;transform:translateX(-50%);border-radius:4px;background:var(--bez);border:1px solid var(--edge2)}

/* киоск и терминал: планшет на стойке */
/* киоск-«тотем»: портретный экран, под ним зона бесконтактной оплаты и щель чека, тонкая ножка и плоское основание */
.hw-kiosk{width:100%;aspect-ratio:3/4;border-radius:14px;padding:4px}
.hw-kiosk .scr{height:100%;border-radius:10px;display:flex;flex-direction:column;font-size:clamp(9px,5.6cqw,16px)}
.kk-top{display:flex;align-items:center;padding:.8em 1em;border-bottom:1px solid var(--edge);font:800 1.05em var(--f)}
.kk-b{flex:1;min-height:0;display:grid;padding:.9em}
.kk-b>*{grid-area:1/1}
.kk-a{display:grid;font-size:1.12em;gap:1em;align-content:center;text-align:center}
.kk-a b{font:700 1.1em/1.25 var(--f)}
.kk-m{display:grid;gap:.45em;align-content:center}
.kk-r{display:flex;justify-content:space-between;gap:.5em;padding:.7em .9em;border-radius:.8em;background:var(--s1)}
.kk-btn{padding:.9em;border-radius:.9em;background:var(--ice);color:var(--ice-ink);font-weight:800;text-align:center}
.kk-ok{display:grid;justify-items:center;align-content:center;gap:.45em;text-align:center}
.kk-ok svg{width:5.4em;height:5.4em;fill:none;stroke:var(--gr);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kk-ok circle{stroke-dasharray:145;stroke-dashoffset:145;transition:stroke-dashoffset calc(600ms*var(--k)) ease}
.kk-ok path{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset calc(400ms*var(--k)) ease calc(250ms*var(--k))}
.kk-ok b{font:800 1.15em var(--f)}
.kk-ok span{color:var(--mu)}
.kk-big{font:800 3em/1 var(--mono);color:var(--ice-t)}
.kiosk-stand{display:none}   /* широкая плашка-основание с значком оплаты читалась полосой под киоском (владелец 17.10): остаётся только ножка из .dvh::after */
.kiosk-stand::before{content:"";position:absolute;left:11%;top:50%;width:26px;aspect-ratio:1;margin-top:-13px;border-radius:8px;border:1.5px solid var(--mu);background:repeating-radial-gradient(circle at 18% 50%,transparent 0 3.5px,color-mix(in srgb,var(--mu) 85%,transparent) 3.5px 4.5px)}   /* значок бесконтактной оплаты */
.kiosk-stand::after{content:"";position:absolute;right:11%;top:50%;width:34%;height:4px;margin-top:-2px;border-radius:2px;background:var(--s0)}   /* щель чека */
.dv-kiosk .dvh::after{content:"";display:block;height:30px;background:linear-gradient(var(--bez),var(--bez)) 50% 0/5% 100% no-repeat,linear-gradient(var(--bez),var(--bez)) 50% 100%/56% 5px no-repeat}

/* планшет (официант, водитель, отчёт): горизонтальный, без стойки */
/* планшет на лёгком кронштейне */
.hw-tab{width:100%;max-width:300px;margin:0 auto;aspect-ratio:4/3;border-radius:12px;padding:4px}
.hw-tab .scr{height:100%;border-radius:8px;display:flex;flex-direction:column;font-size:clamp(9px,5cqw,15px)}
.tb-b{flex:1;min-height:0;display:grid;gap:.6em;align-content:center;padding:.65em}
.tab-arm{position:relative;height:30px;background:linear-gradient(var(--bez),var(--bez)) 50% 0/16% 5px no-repeat}   /* крепление под планшетом */
.tab-arm::before{content:"";position:absolute;left:50%;top:3px;width:5px;height:24px;margin-left:-2px;background:var(--bez);transform:skewX(-16deg);border-radius:2px}   /* одна наклонная балка */
.tab-arm::after{content:"";position:absolute;left:50%;bottom:0;width:34%;height:5px;transform:translateX(-50%);border-radius:3px;background:var(--bez);border:1px solid var(--edge2)}
/* смарт-терминал: сверху щель принтера и выходящая полоска чека; физических клавиш нет */
.hw-pos{width:100%;max-width:150px;margin:0 auto;aspect-ratio:1/1.9;border-radius:18px;padding:5px;display:flex;flex-direction:column}
.hw-pos::before{content:"";position:absolute;z-index:3;left:50%;top:-1px;width:42%;height:6px;transform:translateX(-50%);border-radius:0 0 5px 5px;background:var(--s0)}
.dv-pos .dvh::before{content:"";position:absolute;left:50%;top:-11px;width:28%;height:15px;transform:translateX(-50%);background:#fff;border:1px solid var(--edge2);border-bottom:0}   /* бумага — физически белая */
.hw-pos .scr{flex:1;min-height:0;border-radius:13px;display:flex;flex-direction:column;font-size:clamp(9px,8.4cqw,13.5px)}
.hw-pos .tb-b{padding:.5em}
.pos-k{display:none}

/* экран на стене: цифры дня, табло, схемы */
/* экран на стене: безрамочный, крепление не видно */
.hw-wall{width:100%;aspect-ratio:16/9;border-radius:6px;padding:2px}
.hw-wall .scr{height:100%;border-radius:4px;display:flex;flex-direction:column;padding:.8em 1em .9em;font-size:clamp(9px,3.5cqw,15px)}
.wl-top{display:flex;align-items:center;font:800 1.05em var(--f)}
.wl-t{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;margin-top:.7em}
.wl-t.t2{grid-template-columns:repeat(2,1fr)}
.wt{display:grid;gap:.1em;padding:.55em .7em;border-radius:.7em;background:var(--s1)}
.wv{display:grid;font-size:2em;line-height:1.1;white-space:nowrap}
.wv b{grid-area:1/1;font-weight:700;transition:opacity calc(260ms*var(--k)) ease,transform calc(420ms*var(--k)) var(--spring)}
.wv .nw{opacity:0;transform:translateY(var(--sh))}
.wk{color:var(--mu)}
.wl-b{flex:1;min-height:0;display:flex;align-items:flex-end;gap:.5em;margin-top:.7em}
.wl-b i{flex:1;height:100%;border-radius:.3em .3em 0 0;background:var(--s2);transform-origin:50% 100%;transform:scaleY(var(--h));transition:transform calc(520ms*var(--k)) var(--spring),background-color calc(260ms*var(--k))}
/* стенд без цифр: на широком экране карта, табло и схема занимают весь экран без полей */
.hw-wall.fill .scr{padding:0}
.hw-wall.fill .wl-top{padding:.6em .9em;border-bottom:1px solid var(--edge)}


/* ---------- кирпичики для отраслей ---------- */
/* стол в плане зала */
.fl{flex:1;min-height:0;padding:.5em .8em .8em}
.hall{display:block;width:100%;height:100%}
.hall *{transition:fill calc(260ms*var(--k)),stroke calc(260ms*var(--k))}
.hl-wall{fill:none;stroke:var(--mu);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hl-door{fill:none;stroke:var(--fa);stroke-width:1;stroke-dasharray:2 2}
.hl-win{fill:none;stroke:var(--mu);stroke-width:1}
.hl-bar,.tb{fill:none;stroke:var(--mu);stroke-width:1.3}
.hl-st,.ch{fill:none;stroke:var(--fa);stroke-width:1}
.hl-sofa{fill:none;stroke:var(--mu);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.tn{font:600 6.4px var(--mono);fill:var(--mu);text-anchor:middle}
.hl-t.bz .tb{fill:var(--p3)}
.hl-t.bz .tn{fill:var(--fg)}
.hl-time{font:600 5.6px var(--mono);fill:var(--ice-t);text-anchor:middle}
/* столик 4 — «главный герой» сцены: бронь на 19:00 (лёд) → гость сел (занят, как остальные) */
.a4 .hl-4 .tb{stroke:var(--ice);fill:var(--ice-soft)}
.a4 .hl-4 .tn{fill:var(--ice-t)}
.a7 .hl-4 .tb{stroke:var(--mu);fill:var(--p3)}
.a7 .hl-4 .tn{fill:var(--fg)}
/* карта: улицы, кварталы, маршрут, машины */
.map{display:block;width:100%;height:100%}
.mp-bg{fill:var(--s0)}
.mp-bl{fill:var(--s1);stroke:var(--edge)}
.mp-st{fill:none;stroke:var(--s2);stroke-width:6;stroke-linecap:round}
.mp-rt{fill:none;stroke:var(--ice);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.mp-rt.g{stroke:var(--ice)}
.mp-car{fill:var(--mu);stroke:var(--s0);stroke-width:1.2}
.mp-car.me{fill:var(--ice)}
.mp-pin{fill:var(--fg);stroke:var(--s0);stroke-width:1.2}
.mp-pin.g{fill:var(--gr)}
.mp-ring{fill:none;stroke:var(--ice);stroke-width:1.4;transform-box:fill-box;transform-origin:center}
.dslide.run .mp-ring.pz{animation:ring 1.6s ease-out infinite}
/* ---------- карты такси и доставки (владелец 17.10: «карту нарисуй и движение по ней более детальное и графичное») ----------
   Город одной неплотной сеткой: фон — кварталы, проспекты шире улиц, одна диагональ, река и парк спокойной заливкой, три мелкие подписи. Цвета только из токенов.
   Движение — CSS motion path: значок едет по тому же контуру, что нарисован как маршрут, и поворачивается по ходу (offset-rotate:auto, углы контура скруглены, поэтому
   поворот плавный). Положение на каждом шаге сцены задают --d5…--d9 у самого значка; путь «прорисовывается» тем же шагом и временем (линейно), поэтому линия не обгоняет значок.
   Длительность делится на --k (а не умножается): при «меньше движения» (--k=.5) значок едет медленнее, но не замирает. */
.mp-rv{fill:none;stroke:color-mix(in srgb,var(--ice) 20%,transparent);stroke-width:9;stroke-linecap:round}
.mp-pk{fill:var(--gr-soft);stroke:var(--gr-soft);stroke-width:4;stroke-linejoin:round}
.mp-s path,.mp-a path,.mp-d{fill:none;stroke:var(--s2);stroke-linecap:round;stroke-linejoin:round}
.mp-s path{stroke-width:2.4;opacity:.7}
.mp-d{stroke-width:3.4}
.mp-a path{stroke-width:5}
.mp-l text{font:600 5px var(--f);fill:var(--fa)}
.mp-t{font:700 5.2px var(--mono);fill:var(--fg);text-anchor:middle;paint-order:stroke;stroke:var(--s0);stroke-width:1.8px;stroke-linejoin:round}
.mp-t.g{fill:var(--gr)}
.mp-pr{fill:none;stroke:var(--mu);stroke-width:1.8;stroke-dasharray:3 2.4;stroke-linecap:round}
.mp-car path{fill:inherit}
.mp-car path.b{fill:var(--s0);opacity:.5}
.mp-st0{fill:var(--ice);stroke:var(--s0);stroke-width:1}
.mp-hs{fill:var(--fg);stroke:var(--s0);stroke-width:1}
.mp-hs.g{fill:var(--gr)}
.mp-rt{stroke-width:2.4}
.mp-mv{offset-rotate:auto;offset-distance:0%;transition:offset-distance calc(900ms/var(--k)) linear}
.a5 .mp-mv{offset-distance:var(--d5,0%)}
.a6 .mp-mv{offset-distance:var(--d6,0%)}
.a7 .mp-mv{offset-distance:var(--d7,0%)}
.a8 .mp-mv{offset-distance:var(--d8,0%)}
.a9 .mp-mv{offset-distance:var(--d9,0%)}
/* маршрут доставки прорисовывается теми же шагами, что и едет курьер (dr6 из общей базы рисует всё сразу — здесь переопределено по долям) */
.mp-rt[style*="--o6"]{stroke-dashoffset:1;transition:stroke-dashoffset calc(900ms/var(--k)) linear}
.a6 .mp-rt[style*="--o6"]{stroke-dashoffset:var(--o6)}
.a7 .mp-rt[style*="--o6"]{stroke-dashoffset:var(--o7)}
.a8 .mp-rt[style*="--o6"]{stroke-dashoffset:var(--o8)}
.a9 .mp-rt[style*="--o6"]{stroke-dashoffset:0}
/* пейджер: круглый «шайба» с экранчиком и светодиодом по ободу */
/* пейджер: «шайба»-squircle со светодиодным кольцом по краю */
.hw-pager{width:100%;max-width:120px;margin:0 auto;aspect-ratio:1;border-radius:30%;padding:11%;display:grid}
.hw-pager::before{content:"";position:absolute;inset:4.5%;border-radius:26%;border:2px solid var(--seg-off);pointer-events:none}
.hw-pager .scr{border-radius:22%;display:grid;align-content:center;justify-items:center;gap:.1em;font-size:clamp(9px,10cqw,15px);text-align:center}
.pg-l{color:var(--mu);font-weight:700}
.pg-n{display:grid;font:800 3.6em/1 var(--mono)}
.pg-n>*{grid-area:1/1}
.pg-s{display:grid;font-weight:800;text-transform:uppercase;font-size:.85em}
.pg-s>*{grid-area:1/1;font-style:normal}
.pg-s .g{color:var(--gr)}
.pg-led,.pg-w{display:none}
@keyframes pgring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes pgled{0%,100%{opacity:.35}50%{opacity:1}}
/* табло выдачи */
.bd{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:.7em;margin-top:.7em}
.bd-c{display:grid;grid-template-rows:auto repeat(2,1fr);gap:.4em;padding:.6em .7em;border-radius:.8em;background:var(--s1)}
.bd-c>span{color:var(--mu);font-weight:700}
.bd-n{display:grid;align-items:center;padding:0 .5em;border-radius:.5em;font:800 1.55em/1 var(--mono)}
.bd-n.d{color:var(--mu)}
/* участки цеха */
.zs{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;padding:.8em}
.zn{display:grid;grid-template-rows:auto auto auto auto;align-content:center;gap:.9em;padding:.7em;border-radius:.8em;background:var(--s1);min-width:0}
.zn>b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk{display:grid;place-items:center;border-radius:.6em;background:transparent;font:800 1em var(--mono);color:var(--mu);min-height:2.2em}
.tk>*{grid-area:1/1}
.tk .bt{padding:.3em .7em;border-radius:.5em;background:var(--ice);color:var(--ice-ink)}
.pgb{height:.4em;border-radius:.2em;background:var(--s2);overflow:hidden}
.pgb i{display:block;height:100%;background:var(--ice);transform-origin:0 50%;transform:scaleX(0);transition:transform calc(1300ms*var(--k)) linear}
/* воронка */
.fn{flex:1;display:grid;gap:.55em;align-content:center;margin-top:.4em}
.fn-r{display:grid;grid-template-columns:5.4em 1fr auto;gap:.6em;align-items:center}
.fn-r>span{color:var(--mu)}
.fn-b{height:1.2em;border-radius:.35em;background:var(--ice);transform-origin:0 50%;transform:scaleX(var(--w));transition:transform calc(700ms*var(--k)) var(--spring)}
.fn-b.g{background:var(--gr)}
.fn-r .wv{font-size:1.25em}
/* точки состояния и статусная строка */
.sv{display:flex;align-items:center;gap:.7em;padding:.55em .3em;border-bottom:1px solid var(--edge)}
.sv>b{font-weight:700}
.sv>.v-p{margin-left:auto}
.sv .stw{margin-left:auto}
.sv .wv{font-size:1.15em;margin-left:auto}
.stw.ws{justify-items:stretch}
.stw.ws>*{text-align:center;padding:.6em}
.bb.al{background:var(--s2);color:var(--fg);font-weight:700}
.dt{display:inline-block;width:.75em;height:.75em;border-radius:50%;background:var(--gr);flex:none}
.dt.r{background:var(--ice)}
.dtw{display:grid;flex:none}
.dtw>*{grid-area:1/1}
/* звёзды оценки */
.stars{display:flex;gap:.25em;margin-top:.5em}
.stars svg{width:1.5em;height:1.5em;fill:var(--mu);stroke:none}
.stars svg:nth-child(2){--i:1}.stars svg:nth-child(3){--i:2}.stars svg:nth-child(4){--i:3}.stars svg:nth-child(5){--i:4}
/* QR-метка на столе */
.qr{display:block;width:62%;max-width:9em;margin:0 auto;aspect-ratio:1;position:relative;border-radius:.6em;background:#fff;padding:.5em}
.qr svg{display:block;width:100%;height:100%}
.qr .scan{position:absolute;left:0;right:0;top:0;height:.28em;background:var(--ice);box-shadow:0 0 .9em var(--ice);opacity:0}
/* рекламное объявление */
.ad-i{height:4em;border-radius:.7em;background:linear-gradient(135deg,var(--ice-soft),var(--pk-soft) 55%,var(--volt-soft));border:1px solid var(--edge);display:grid;place-items:center;color:var(--ice-t)}
.ad-i svg{width:2.4em;height:2.4em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mp-w{flex:1;min-height:0}
.mp-w .map{height:100%}
/* Чипы ВНУТРИ сценки устройства (киоск с объявлением). Селектор был голый `.chips` и стоял ниже полосы сфер в чате —
   и перебивал её: вместо одной прокручиваемой строки (nowrap, 34 px) сферы разворачивались в пять рядов, занимали пол-экрана
   телефона и срезали карточку «Набросок системы» на середине заголовка (кадр 30.10, 390×844). Область действия сужена до сценки. */
.dv .chips{display:flex;flex-wrap:wrap;gap:.35em}
.dv .chips .k{font-family:var(--f);padding:.3em .65em}
.srcs{padding:.2em .5em;border-radius:.5em;background:var(--s2);color:var(--mu);font:700 .85em var(--mono)}

/* ---------- «Любые экраны»: контурная площадь с экранами разной формы и дирижаблем ----------
   Сцена не завязана на шаги a1…a9: она живёт своими петлями, пока слайд активен (.dslide.run снимает паузу). Фасады — тонкие линии без
   заливки (var(--mu)), экраны — «чёрное стекло» с неоновым контуром. Толщина линий не зависит от масштаба (non-scaling-stroke), поэтому
   на телефоне, где сцена сжимается целиком, контуры остаются читаемыми. Свечение — drop-shadow только в тёмной теме: на светлой оно
   давало бы грязные ореолы, там остаются те же огни без засветки. Петли на «меньше движения» не выключаются, а замедляются вдвое (делим на --k). */
.scn{padding:2px 0 0}
.sc-scene{display:block;width:100%;height:auto;overflow:hidden;--nz-y:var(--volt)}
html.light .sc-scene{--nz-y:var(--volt-t)}
.sc-scene .ln{fill:none;stroke:var(--mu);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sc-scene .dim{stroke:var(--edge2);stroke-width:1}
.sc-scene .scrn{fill:var(--s0);stroke:var(--c);stroke-width:1.8;vector-effect:non-scaling-stroke}
.sc-scene .cI{--c:var(--ice)} .sc-scene .cY{--c:var(--nz-y)} .sc-scene .cG{--c:var(--gr)} .sc-scene .cP{--c:var(--pk)}
/* огни: пунктир из нулевых штрихов с круглыми концами — это лампочки по контуру, которые «бегут» по кругу */
.sc-scene .ch{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 28;vector-effect:non-scaling-stroke;animation:chase calc(1.6s/var(--k)) linear infinite}
.sc-scene .ch2{animation-name:chase2}
.sc-scene .nz{fill:none;stroke:var(--c);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;animation:neon calc(3.4s/var(--k)) ease-in-out infinite alternate}
.sc-scene .nz.d2{animation-delay:calc(-1.2s/var(--k))}
.sc-scene .nzt{fill:none;stroke:var(--c);stroke-width:1.5;font:800 italic 30px var(--disp);letter-spacing:.04em;animation:neon calc(3s/var(--k)) ease-in-out infinite alternate}
.sc-scene .lamp{fill:var(--nz-y);animation:neon calc(2.4s/var(--k)) ease-in-out infinite alternate}
.sc-scene .nz,.sc-scene .nzt,.sc-scene .ch,.sc-scene .scrn,.sc-scene .lamp{filter:drop-shadow(0 0 3px var(--c,var(--nz-y)))}
html.light .sc-scene .nz,html.light .sc-scene .nzt,html.light .sc-scene .ch,html.light .sc-scene .scrn,html.light .sc-scene .lamp{filter:none}
@keyframes chase{from{stroke-dashoffset:0}to{stroke-dashoffset:-28}}
@keyframes chase2{from{stroke-dashoffset:14}to{stroke-dashoffset:-14}}
@keyframes neon{from{opacity:.55}to{opacity:1}}
/* что показывают экраны: кадры крутятся по кругу, у каждого экрана свой сдвиг --o (кратен 5 с, чтобы всегда горел ровно один кадр) */
.sc-scene .f{opacity:0;animation:fc3 calc(15s/var(--k)) linear infinite;animation-delay:calc((var(--i)*5s - var(--o,0s))/var(--k))}
.sc-scene .f.f4{animation-name:fc4;animation-duration:calc(20s/var(--k))}
@keyframes fc3{0%{opacity:1}28%{opacity:1}34%{opacity:0}94%{opacity:0}100%{opacity:1}}
@keyframes fc4{0%{opacity:1}21%{opacity:1}27%{opacity:0}95%{opacity:0}100%{opacity:1}}
/* бегущая строка и дирижабль */
.sc-scene .tk-t{font:700 14px var(--mono);fill:var(--fg);animation:tick calc(14s/var(--k)) linear infinite}
.sc-scene .air-t{font:800 12px var(--disp);fill:var(--fg);animation:tick2 calc(9s/var(--k)) linear infinite}
@keyframes tick{from{transform:translateX(200px)}to{transform:translateX(-420px)}}
@keyframes tick2{from{transform:translateX(125px)}to{transform:translateX(-250px)}}
.sc-scene .air{animation:drift calc(70s/var(--k)) linear infinite;animation-delay:calc(-24s/var(--k))}
.sc-scene .air-b{animation:bob calc(6s/var(--k)) ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-170px)}to{transform:translateX(1180px)}}
@keyframes bob{from{transform:translateY(-4px)}to{transform:translateY(5px)}}
/* пока слайд не на экране, всё стоит: пустая работа по таймеру на невидимой сцене ни к чему */
.sc-scene :is(.f,.ch,.nz,.nzt,.lamp,.tk-t,.air-t,.air,.air-b){animation-play-state:paused}
.dslide.run .sc-scene :is(.f,.ch,.nz,.nzt,.lamp,.tk-t,.air-t,.air,.air-b){animation-play-state:running}
/* содержимое экранов */
.sy{fill:none;stroke:var(--fg);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sy-i{fill:var(--ice);stroke:none}
.sy-g{fill:none;stroke:var(--gr);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sy-y{fill:none;stroke:var(--nz-y);stroke-width:2.4;stroke-linecap:round}
.sy-s{fill:var(--s1);stroke:var(--edge2);stroke-width:1.4}
.sy-e{fill:none;stroke:var(--edge2);stroke-width:3;stroke-linecap:round}
.sy-n{fill:var(--fg);font:700 20px var(--mono);text-anchor:middle}
.sy-ib{fill:var(--ice-t);font:800 italic 26px var(--disp);text-anchor:middle;letter-spacing:.03em}
@media (max-width:600px){.scn{margin:0 -4px}}
.sy-t{fill:none;stroke:var(--edge2);stroke-width:10;stroke-linecap:round}
.sy-p{fill:none;stroke:var(--ice);stroke-width:10;stroke-linecap:round}

/* ---------- ступени истории (классы aN накапливаются: a3 включает всё, что было при a1 и a2) ---------- */
/* появление (atN), исчезновение (toN), плавное проявление без сдвига (fdN): общая база переходов, чтобы элемент мог нести и at, и to */
.at1,.at2,.at3,.at4,.at5,.at6,.at7,.at8,.at9{opacity:0;transform:translateY(var(--sh));transition:opacity calc(240ms*var(--k)) ease,transform calc(420ms*var(--k)) var(--spring),background-color calc(220ms*var(--k)),color calc(220ms*var(--k)),border-color calc(220ms*var(--k)),box-shadow calc(260ms*var(--k)),filter calc(200ms*var(--k))}
.fd1,.fd2,.fd3,.fd4,.fd5,.fd6,.fd7,.fd8,.fd9{opacity:0;transition:opacity calc(240ms*var(--k)) ease,transform calc(420ms*var(--k)) var(--spring),background-color calc(220ms*var(--k)),color calc(220ms*var(--k)),border-color calc(220ms*var(--k)),box-shadow calc(260ms*var(--k)),filter calc(200ms*var(--k))}
.to1,.to2,.to3,.to4,.to5,.to6,.to7,.to8,.to9,.hi1,.hi2,.hi3,.hi4,.hi5,.hi6,.hi7,.hi8,.hi9,.ok1,.ok2,.ok3,.ok4,.ok5,.ok6,.ok7,.ok8,.ok9,.pr1,.pr2,.pr3,.pr4,.pr5,.pr6,.pr7,.pr8,.pr9,.rb1,.rb2,.rb3,.rb4,.rb5,.rb6,.rb7,.rb8,.rb9,.rg1,.rg2,.rg3,.rg4,.rg5,.rg6,.rg7,.rg8,.rg9{transition:opacity calc(240ms*var(--k)) ease,transform calc(420ms*var(--k)) var(--spring),background-color calc(220ms*var(--k)),color calc(220ms*var(--k)),border-color calc(220ms*var(--k)),box-shadow calc(260ms*var(--k)),filter calc(200ms*var(--k))}
.a1 .at1,.a2 .at2,.a3 .at3,.a4 .at4,.a5 .at5,.a6 .at6,.a7 .at7,.a8 .at8,.a9 .at9{opacity:1;transform:none}
/* fdN без transform: у SVG-элементов позиция задана атрибутом transform, а CSS transform:none его бы сбросил */
.a1 .fd1,.a2 .fd2,.a3 .fd3,.a4 .fd4,.a5 .fd5,.a6 .fd6,.a7 .fd7,.a8 .fd8,.a9 .fd9{opacity:1}
/* toN идёт после atN: у элемента с at3 to5 на шаге 5 побеждает скрытие */
.a1 .to1,.a2 .to2,.a3 .to3,.a4 .to4,.a5 .to5,.a6 .to6,.a7 .to7,.a8 .to8,.a9 .to9{opacity:0}
/* подсветка: hiN — акцент, okN — «сделано/в норме», prN — нажатие, rbN/rgN — цветная полоса строки */
.a1 .hi1,.a2 .hi2,.a3 .hi3,.a4 .hi4,.a5 .hi5,.a6 .hi6,.a7 .hi7,.a8 .hi8,.a9 .hi9{background:var(--ice);color:var(--ice-ink);border-color:transparent}
.a1 .ok1,.a2 .ok2,.a3 .ok3,.a4 .ok4,.a5 .ok5,.a6 .ok6,.a7 .ok7,.a8 .ok8,.a9 .ok9{background:var(--gr-soft);color:var(--gr);border-color:var(--gr)}
.a1 .pr1,.a2 .pr2,.a3 .pr3,.a4 .pr4,.a5 .pr5,.a6 .pr6,.a7 .pr7,.a8 .pr8,.a9 .pr9{transform:scale(.95);filter:brightness(1.15)}
.a1 .rb1,.a2 .rb2,.a3 .rb3,.a4 .rb4,.a5 .rb5,.a6 .rb6,.a7 .rb7,.a8 .rb8,.a9 .rb9{box-shadow:inset 3px 0 0 var(--ice)}
.a1 .rg1,.a2 .rg2,.a3 .rg3,.a4 .rg4,.a5 .rg5,.a6 .rg6,.a7 .rg7,.a8 .rg8,.a9 .rg9{box-shadow:inset 3px 0 0 var(--gr)}
/* смена цифры на плитке: старая уходит вверх, новая встаёт на место */
.a1 .sw1 .od,.a2 .sw2 .od,.a3 .sw3 .od,.a4 .sw4 .od,.a5 .sw5 .od,.a6 .sw6 .od,.a7 .sw7 .od,.a8 .sw8 .od,.a9 .sw9 .od{opacity:0;transform:translateY(calc(var(--sh)*-1))}
.a1 .sw1 .nw,.a2 .sw2 .nw,.a3 .sw3 .nw,.a4 .sw4 .nw,.a5 .sw5 .nw,.a6 .sw6 .nw,.a7 .sw7 .nw,.a8 .sw8 .nw,.a9 .sw9 .nw{opacity:1;transform:none}
/* линия маршрута рисуется (pathLength=1), машина едет: каждый шаг — свой вложенный <g class="mvN"> с --x/--y, перемещения складываются */
.dr1,.dr2,.dr3,.dr4,.dr5,.dr6,.dr7,.dr8,.dr9{stroke-dashoffset:1;transition:stroke-dashoffset calc(1100ms*var(--k)) ease-in-out}
.a1 .dr1,.a2 .dr2,.a3 .dr3,.a4 .dr4,.a5 .dr5,.a6 .dr6,.a7 .dr7,.a8 .dr8,.a9 .dr9{stroke-dashoffset:0}
.mv1,.mv2,.mv3,.mv4,.mv5,.mv6,.mv7,.mv8,.mv9{transition:transform calc(1100ms*var(--k)) linear}
.a1 .mv1,.a2 .mv2,.a3 .mv3,.a4 .mv4,.a5 .mv5,.a6 .mv6,.a7 .mv7,.a8 .mv8,.a9 .mv9{transform:translate(var(--x,0px),var(--y,0px))}
/* столбики и полосы: bhN — столбик вырастает и красится, pbN — полоса прогресса, fwN — полоса воронки */
.a1 .bh1,.a2 .bh2,.a3 .bh3,.a4 .bh4,.a5 .bh5,.a6 .bh6,.a7 .bh7,.a8 .bh8,.a9 .bh9{transform:scaleY(var(--h2,.9));background:var(--ice)}
.a1 .pb1,.a2 .pb2,.a3 .pb3,.a4 .pb4,.a5 .pb5,.a6 .pb6,.a7 .pb7,.a8 .pb8,.a9 .pb9{transform:scaleX(1)}
.a1 .fw1,.a2 .fw2,.a3 .fw3,.a4 .fw4,.a5 .fw5,.a6 .fw6,.a7 .fw7,.a8 .fw8,.a9 .fw9{transform:scaleX(var(--w2))}
/* галочка в круге (ckN): обводка дорисовывается */
.a1 .ck1 circle,.a1 .ck1 path,.a2 .ck2 circle,.a2 .ck2 path,.a3 .ck3 circle,.a3 .ck3 path,.a4 .ck4 circle,.a4 .ck4 path,.a5 .ck5 circle,.a5 .ck5 path,.a6 .ck6 circle,.a6 .ck6 path,.a7 .ck7 circle,.a7 .ck7 path,.a8 .ck8 circle,.a8 .ck8 path,.a9 .ck9 circle,.a9 .ck9 path{stroke-dashoffset:0}
/* звёзды оценки зажигаются по очереди */
.st1 svg{opacity:0;transform:scale(.4);transition:opacity calc(240ms*var(--k)) ease calc(var(--i,0)*90ms*var(--k)),transform calc(420ms*var(--k)) var(--spring) calc(var(--i,0)*90ms*var(--k))}
.a1 .st1 svg{opacity:1;transform:none}
.st2 svg{opacity:0;transform:scale(.4);transition:opacity calc(240ms*var(--k)) ease calc(var(--i,0)*90ms*var(--k)),transform calc(420ms*var(--k)) var(--spring) calc(var(--i,0)*90ms*var(--k))}
.a2 .st2 svg{opacity:1;transform:none}
.st3 svg{opacity:0;transform:scale(.4);transition:opacity calc(240ms*var(--k)) ease calc(var(--i,0)*90ms*var(--k)),transform calc(420ms*var(--k)) var(--spring) calc(var(--i,0)*90ms*var(--k))}
.a3 .st3 svg{opacity:1;transform:none}
.st4 svg{opacity:0;transform:scale(.4);transition:opacity calc(240ms*var(--k)) ease calc(var(--i,0)*90ms*var(--k)),transform calc(420ms*var(--k)) var(--spring) calc(var(--i,0)*90ms*var(--k))}
.a4 .st4 svg{opacity:1;transform:none}
.st5 svg{opacity:0;transform:scale(.4);transition:opacity calc(240ms*var(--k)) ease calc(var(--i,0)*90ms*var(--k)),transform calc(420ms*var(--k)) var(--spring) calc(var(--i,0)*90ms*var(--k))}
.a5 .st5 svg{opacity:1;transform:none}
.st6 svg{opacity:0;transform:scale(.4);transition:opacity calc(240ms*var(--k)) ease calc(var(--i,0)*90ms*var(--k)),transform calc(420ms*var(--k)) var(--spring) calc(var(--i,0)*90ms*var(--k))}
.a6 .st6 svg{opacity:1;transform:none}
.st7 svg{opacity:0;transform:scale(.4);transition:opacity calc(240ms*var(--k)) ease calc(var(--i,0)*90ms*var(--k)),transform calc(420ms*var(--k)) var(--spring) calc(var(--i,0)*90ms*var(--k))}
.a7 .st7 svg{opacity:1;transform:none}
.st8 svg{opacity:0;transform:scale(.4);transition:opacity calc(240ms*var(--k)) ease calc(var(--i,0)*90ms*var(--k)),transform calc(420ms*var(--k)) var(--spring) calc(var(--i,0)*90ms*var(--k))}
.a8 .st8 svg{opacity:1;transform:none}
.st9 svg{opacity:0;transform:scale(.4);transition:opacity calc(240ms*var(--k)) ease calc(var(--i,0)*90ms*var(--k)),transform calc(420ms*var(--k)) var(--spring) calc(var(--i,0)*90ms*var(--k))}
.a9 .st9 svg{opacity:1;transform:none}
/* сканирование QR на шаге 1: полоса проходит сверху вниз и гаснет на шаге 2 */
.qr .scan{transition:top calc(900ms*var(--k)) ease-in-out,opacity calc(300ms*var(--k))}.a1 .qr .scan{top:calc(100% - .28em);opacity:1}.a2 .qr .scan{opacity:0}
/* пейджер: на шаге vbN корпус дрожит, по краю идёт зелёная волна, подсвечивается "готово" */
.a7 .vb7::before{border-color:var(--gr);animation:pgled calc(1.8s*var(--k)) ease-in-out infinite}   /* кольцо мягко пульсирует (только opacity), пока заказ ждёт гостя */
.a8 .vb7::before{animation:none;border-color:var(--seg-off)}
/* порядок правил важен: поздние шаги перекрывают ранние */
/* ---------- Г48: минимализм сцены ----------
   Правила владельца (17.10): на экране одновременно ≤4–5 строк, один акцент (лёд — действие, жёлтый — только деньги, зелёный — только «✓ готово/закрыто»),
   никаких меток «Боль/ИИ», плашек и бейджей «пример» на каждом экране, шрифт один, подсказка ИИ — одна строка-уведомление вверху экрана. */
.dslide .mn{font-style:normal;color:var(--volt-t)}
.a1 .hi1 .mn,.a2 .hi2 .mn,.a3 .hi3 .mn,.a4 .hi4 .mn,.a5 .hi5 .mn,.a6 .hi6 .mn,.a7 .hi7 .mn,.a8 .hi8 .mn,.a9 .hi9 .mn{color:inherit}   /* строка выбрана (лёд) — сумма читается тем же цветом, что и текст: жёлтое на льду не различимо */
/* уведомление ИИ живёт только внутри экранов сцены: голый .ai цеплял карточки «Болей и решений» и проб приложения */
.dslide .ai{position:absolute;z-index:6;left:0;right:0;top:0;padding:.7em .9em;background:var(--s1);border-bottom:1px solid var(--edge);color:var(--ice-t);font-weight:700;font-size:.95em;line-height:1.3;transition-duration:calc(380ms*var(--k))}
.dslide .ai b{margin-right:.3em}
.hw-phone .ai{top:2.1em;padding:.5em .9em;font-size:.88em}
.clz{max-height:0;overflow:hidden;margin-top:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .6em;padding:.5em .3em 0;border-top:1px solid var(--edge);text-align:center}
.clz b{color:var(--gr);font-weight:800}
.clz span{color:var(--mu);font-size:.92em}
.a9 .clz{max-height:5em;padding-top:.5em}
.clz{transition:max-height calc(300ms*var(--k)) ease,opacity calc(240ms*var(--k)) ease,transform calc(420ms*var(--k)) var(--spring)}
.okline{color:var(--gr);font-weight:700;padding:.1em .3em}
.ph-t.pc .pc-sl.big{flex:1;align-content:center}
.sv-l{flex:1;display:grid;align-content:center}
.sv-l .sv{padding:.8em .3em}
.kk-m>b{font-size:1.25em}
.kk-m .mn{font-size:1.6em}
.wl-t{flex:1;margin-block:.5em;align-items:stretch}
.wl-t .wt{align-content:center}   /* плитки цифр — в середине экрана, итог сделки — внизу */
.wl-t .wv{font-size:2.2em}
/* второй акт переписки: «прокрутка» — новые сообщения занимают весь экран телефона, старые уходят под них */
.ph2{display:contents}   /* второй акт — продолжение той же ленты: новые сообщения встают ниже, прежние остаются выше и тускнеют, как в мессенджере */
.ph2>*{opacity:0;transform:translateY(var(--sh));transition:opacity calc(240ms*var(--k)) ease,transform calc(420ms*var(--k)) var(--spring)}
.a8 .ph2>*:not(.at9){opacity:1;transform:none}
.a8 .ph-t:not(.ap)>:not(.ph2):not([class*=" to"]){opacity:.5}   /* .ap — экран-приложение сотрудника (водитель, кладовщик, официант): это не переписка, прежние строки не тускнеют */
.ph2 .bb{max-width:100%}
.okline.at8{margin-top:.2em}
/* карточки телефона заказчика/гостя (бывшие правила полосы цепочек — полосы больше нет, экраны остались) */
.pc{gap:.7em}
.pc-card{display:grid;gap:.4em;padding:.7em .8em;border-radius:.9em;background:var(--s1);font-weight:700;line-height:1.3}
.pc-pay{display:flex;align-items:center;gap:.4em;color:var(--gr);font-weight:700;font-size:.92em}
.pc-pay svg{flex:none;width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bb .pc-pay{margin-top:.35em}
.pc-st{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:0 .2em;color:var(--mu);font-weight:600}
.pc-sl{display:grid;gap:.35em}
.pc-sl:not(.big) .pc-r{padding:.9em .8em}
.pc-r{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.55em .7em;border-radius:.7em;background:var(--s1);font-weight:700;min-width:0}
.pc-r.cur{background:var(--ice-soft)}
.pc-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-i{display:flex;justify-content:space-between;gap:.5em;font-weight:600}
.pc-i b{color:var(--mu)}
.dslide .pc-i b.mn{color:var(--volt-t)}
.zq{display:grid;gap:.3em;justify-items:center;color:var(--mu);font-weight:600}
.pgb i.slow{transition-duration:calc(3000ms*var(--k))}   /* полоска «готовится» ползёт до момента «готов», а не заполняется за секунду */
.kk-btn.sc{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--edge2)}
.pc>.kk-btn{margin-top:auto}
.pc-cur{display:grid;gap:.55em;padding:.2em 0 .5em}
.pc-big{font-size:2.5em;line-height:1.1;padding:.3em .1em .1em}
.pc-sl.big{gap:.55em}
.pc-sl.big .pc-r{padding:.95em .8em}
.pc-sl.big .pc-cur .pc-r{padding:.7em .8em}
.pc-got{display:grid;gap:.3em;padding:.7em .8em;border-radius:.9em;background:var(--gr-soft);line-height:1.3}
.pc-got b{color:var(--gr);font-weight:800}
.pc-got span{color:var(--mu)}
.pc-qr{align-self:center;margin:auto 0;width:5.6em;height:5.6em;padding:.4em;border-radius:.5em;background:#fff;fill:#07080C}   /* QR — физически чёрное на белом */

/* ---------- Г48-C2: компактная и ровная вёрстка внутри экранов (владелец 17.10: «объекты должны компактно и минималистично располагаться») ----------
   Раньше у каждого устройства были свои отступы в em от своего кегля (.55em, .85em, .9em…) — строки разной высоты, шапки разного роста, а содержимое
   «плавало» по центру экрана с пустотой сверху и снизу. Теперь одна шкала в пикселях (4 / 8 / 12), одна высота строки списка (--rh) и одна шапка (--hh),
   контент прижат к шапке и идёт сверху вниз. Кегль текста по-прежнему масштабируется от контейнера (.scr), поэтому экраны не ломаются на планшете и телефоне. */
.scr{--rh:32px;--hh:32px}
.ph-h,.dk-top,.kk-top,.wl-top{box-sizing:border-box;flex:none;min-height:var(--hh);padding:0 12px;display:flex;align-items:center;gap:8px;font:800 12px/1.2 var(--f);border-bottom:1px solid var(--edge)}
.ph-h{justify-content:center}   /* у телефона заголовок по центру, как в мессенджере */
/* строки списков: одна высота, текст по центру строки, разделитель — волосок */
.dk-l{align-content:start;padding:4px 8px}
.dk-r{min-height:var(--rh);padding:0 8px;gap:8px}
.kk-b{padding:8px}
.kk-m{gap:4px;align-content:start}
.kk-r{min-height:var(--rh);align-items:center;padding:0 12px;border-radius:8px}
.kk-btn{padding:0 12px;min-height:var(--rh);display:grid;align-items:center;border-radius:8px}
.tb-b{display:flex;flex-direction:column;gap:4px;align-content:normal;padding:8px}
.tb-b .okline{margin-top:auto;padding:4px 0 0}
.sv-l{align-content:start;padding:4px 8px}
.sv,.sv-l .sv{min-height:var(--rh);padding:0 4px;gap:8px}
.zs{gap:8px;padding:8px}
.zn{align-content:start;gap:4px;padding:8px 12px;border-radius:8px}
.bd{gap:8px;margin:0;padding:8px}
.bd-c{gap:4px;padding:8px;border-radius:8px}
.fn{align-content:start;gap:8px;margin:0;padding:12px}
.fl{padding:8px}
.pc{--rh:28px;gap:4px;padding:4px 12px}
.pc-sl,.pc-sl.big{gap:4px}
.pc-r,.pc-sl:not(.big) .pc-r,.pc-sl.big .pc-r,.pc-sl.big .pc-cur .pc-r{min-height:var(--rh);padding:0 12px;border-radius:8px}
.pc-card,.pc-got{gap:4px;padding:4px 12px;border-radius:8px}
.pc-cur{gap:4px;padding:0}
.pc-card .v-p{justify-self:start}
.pc-big{font-size:2em;white-space:nowrap}
/* переписка: ровный шаг между пузырями, поля у экрана 12px */
.ph-t{gap:8px;padding:8px 12px 4px}
.ph-i{margin:4px 12px 20px}
/* стена: шапка как у остальных экранов, плитки с полями 12px */
.hw-wall .scr{padding:0}
.wl-t{margin:8px 12px 4px;gap:8px}
.wt{padding:4px 12px;border-radius:8px}
.wl-t .wv{font-size:1.9em}
.ph-t.pc .pc-sl.big{align-content:start}
.wl-t.t2,.wl-t{align-items:stretch}
.clz{margin:0 12px;padding:8px 0 0}
.a9 .clz{padding:8px 0}
.hw-wall.fill .wl-top{padding:0 12px}
/* панель сети на стене (офис, владелец 17.10: «рамка тоже зелёная и меняется, если устройства сбоят»): у каждой строки-устройства тонкая зелёная рамка;
   когда принтер сбоит (шаг 3) рамка плавно становится малиновой, точка и статус — тоже, после починки инженером (шаг 7) — снова зелёная. Те же шаги at/to, что ведут сцену;
   переход 300 мс × --k (при «меньше движения» вдвое короче, но не выключен). Порядок правил важен: a7 стоит ниже a3 и перекрывает его. */
.sv.fr{border:1px solid color-mix(in srgb,var(--gr) 60%,transparent);border-radius:8px;margin:0 0 4px;padding:0 8px;transition:border-color calc(300ms*var(--k)) ease,background-color calc(300ms*var(--k)) ease}
.sv-l .sv.fr{border-bottom:1px solid color-mix(in srgb,var(--gr) 60%,transparent)}
.a3 .sv.f3{border-color:var(--pk);background:var(--pk-soft)}
.a7 .sv.f3{border-color:color-mix(in srgb,var(--gr) 60%,transparent);background:transparent}
.sv .dt.r{background:var(--pk)}
.sv .v-p.r{background:var(--pk-soft);color:var(--pk)}
.ph-h b,.dk-top b,.wl-top b{font:inherit}   /* у заголовка внутри шапки был свой кегль (1.05em) — шапки разных устройств получались разного роста */
.sv-l .sv.fr:last-child{margin-bottom:0}
.hw-tab .scr{--rh:28px}
.hw-tab .tb-b{gap:0;padding:4px 8px}
@media (max-width:600px){.scr{--rh:28px;--hh:28px}.pc-card,.pc-got{padding:4px 8px}.ph-h,.dk-top,.kk-top,.wl-top{font-size:11px;padding:0 8px}}

/* ---------- узкие экраны: figure снова цельный блок «устройство + подпись»; узкие устройства парами, широкие — на всю строку ---------- */
@media (max-width:1100px){
  .dslide{padding:28px 22px 20px}
  .dslide:not([data-k="screens"]){padding-inline:60px}
  .dstage{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:30px 18px;align-items:end}
  .dv{display:flex;flex-direction:column;align-items:center;gap:0}
  .dv>*{grid-column:auto;grid-row:auto}
  .dv.n{order:1} .dv.w{order:2;grid-column:1/-1}
  .dv.lone{grid-column:1/-1}
  .dv .dvh{width:100%;max-width:520px;margin-bottom:0}
  .dv.n .dvh{max-width:250px}
  .dv.n .hw-pager{max-width:132px}
  .hw-desk{aspect-ratio:16/10}   /* строки теперь одной высоты 28–32px и прижаты к шапке (Г48-C2) — в 16:10 помещаются, а 4:3 давало пустую нижнюю половину монитора */
}
@media (max-width:600px){
  .dcar{--sw:88%;--gp:2.6%}
  /* на телефоне поля карточки в 12px — круг 44px там перекрыл бы устройства; кнопка лежит на самом краю карточки (половина над соседней, притушенной) и заходит на макет ≈8px */
  .dprev{left:calc((100% - var(--sw))/2 - 20px)}
  .dnext{right:calc((100% - var(--sw))/2 - 20px)}
  /* кольцо пейджера (.pg-w) на 1.6 выходило за край слайда и давало горизонтальный перелив 336>313 — на телефоне оно растёт до 1.2 (1.25 всё ещё упирается в край слайда на 2px) */
  @keyframes pgring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.2);opacity:0}}
  .dslide,.dslide:not([data-k="screens"]){padding:22px 16px 16px;border-radius:20px}
  .dstage{gap:26px 12px}
  .dv.lone .dvh{max-width:200px}
  .hw-phone{aspect-ratio:9/23;border-radius:17%/6.65%}   /* в паре по 155 px переписка с прежними сообщениями длиннее — телефон выше */
  .hw-phone .scr{border-radius:15.5%/6%}
  .dv.dv-phone .dvh{max-width:240px}
  .hw-tab{aspect-ratio:1}
  .ph-t{gap:.45em;padding:.7em .7em}
  .hw-phone .scr{font-size:clamp(9px,5.6cqw,12px);border-radius:15.5%/6%}
  .ad-i{height:3em}
}

@media (max-width:1280px){.tg{grid-template-columns:1fr 1fr}}

/* ===== Планшет ===== */
@media (max-width:1100px){
  .csg{grid-template-columns:repeat(2,1fr)}
  .bgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:18px}
  .hint{display:none}
  .links{display:none}
  .dgrid,.tg{grid-template-columns:1fr}
  .howg,.faqg{grid-template-columns:1fr;gap:18px}
  .howg>.sh,.faql{position:static}
}

/* ===== Телефон: первый экран — помощник на весь экран, ниже страница идёт обычной прокруткой ===== */
@media (max-width:600px){
  :root{--navh:60px}
  .nav{padding:8px 12px;gap:10px}
  .menub,#navCab{display:inline-flex;height:44px;padding:0 8px}   /* «Кабинет» остаётся в шапке рядом с «Меню»: цель нажатия 44px; поля 12 вместо 14 — кнопка темы больше не сжимается (flex:none), и 11px на 390 надо вернуть */
  .nav>.sp{margin-left:-4px}   /* распорка шириной 0 всё равно брала два зазора по 4px — один отдаём обратно */
  .nav>.langs{display:none}   /* на телефоне шапка узкая: язык переехал в лист «Меню» (.langs-m), там цели нажатия по 44px */
  .langs-m a{min-width:56px;height:44px;font-size:13px}
  .ibtn{width:44px;height:44px;flex:none}   /* flex:none — иначе во flex-шапке на 390 сжимается до 33px и цель нажатия <44 */
  .it{min-height:44px}   /* строки проб — кнопки: на телефоне цель нажатия 44px, видимая плашка та же по ширине */
  .hero{padding:0;display:flex;flex-direction:column;gap:0;height:calc(100dvh - var(--navh));min-height:min(520px,calc(100dvh - var(--navh)))}   /* на экране ниже 580px окно чата не выше самого экрана: поле ввода не уезжает за кромку */
  .heroslot{display:none}
  .thread>.copy{animation:none}   /* у блока свои ступенчатые входы по строкам, общий подъём поверх них лишний */
  .win2{flex:1;height:auto;min-height:0;border-radius:0;border-width:1px 0;box-shadow:none}
  .cvh{display:none}   /* шапка окна на весь экран только отнимает место: имя помощника уже есть в первом сообщении */
  /* Первый экран на 390×844: десять чипов отраслей по 44px занимают пять рядов (244px) и переполняли ленту на ~25px — лента
     прокручивалась к последнему ряду, а подпись над заголовком уходила под липкую шапку. Цели нажатия 44px сохраняем, а
     вертикальный ритм вокруг них уплотняем: зазоры 10→8, поля 12→10, поля заголовка и блока .copy, зазор между рядами чипов 6→4. */
  .thread{padding:10px 12px;gap:8px}
  .thread>.copy{padding:0 2px 2px}
  h1{font-size:min(30px,7.7vw);margin:4px 0}   /* на 390 и шире — прежние 30px; на 360 и 320 слово «РАЗРАБОТАЮ» выпирало за экран на 6–25px */
  .slogan{margin:10px 0 8px}
  .lead{font-size:14px}
  .m{max-width:92%;font-size:15px}
  .opts{gap:4px 6px}
  .chip{min-height:44px;padding:6px 14px;font-size:14px}
  .chips{gap:5px;max-height:38dvh}   /* полоса сфер: как в первой версии, потолок — 38% высоты экрана, дальше прокрутка */
  .chips .chip{min-height:44px;padding:6px 14px;font-size:13px}
  /* на узком экране подсказка «Например: Иван, +380 50 123 45 67» в одной строке с кнопкой обрезалась — поле и кнопка встают друг под другом */
  .tgc .prow{flex-direction:column}
  .tgc .ph{flex:none;width:auto}
  .tgc .btn.soft{height:48px;width:100%}
  .rb.mic{width:58px}
  .comp{padding:10px 12px max(10px,env(safe-area-inset-bottom))}
  .comp .in{font-size:16px}   /* меньше 16px iOS при фокусе приближает страницу */
  .opts input[type=date]{height:44px;font-size:16px}
  .cd{width:100%}
  .sec{padding:48px 16px 0}
  .sh{padding:10px 14px}
  .foot.wrap{width:calc(100% - 32px)}
  .bgrid{grid-template-columns:1fr}
  .rail{padding:18px 16px 18px 58px}
  .rl{left:31px;top:34px}
  .rs:before{left:-42px}
  /* ленты: «Случаи» и «Пробы» листаются вбок с прилипанием к карточке; горизонтальная прокрутка — только внутри ленты, страница вбок не едет */
  .csg,.tg{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 16px;scroll-padding:0 16px;overscroll-behavior-x:contain}
  .csg>*,.tg>*{scroll-snap-align:start}
}
/* Язык — одна кнопка в шапке со списком (details/summary — работает без JS) */
.lang1{position:relative}
.lang1>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:12px;border:1px solid var(--edge2);background:var(--p2);color:var(--fg);font:800 12px var(--f);letter-spacing:.05em;cursor:pointer;user-select:none}
.lang1>summary::-webkit-details-marker{display:none}
.lang1>summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.lang1>summary:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.lang1-m{position:absolute;right:0;top:calc(100% + 6px);z-index:50;display:grid;min-width:170px;padding:6px;border-radius:12px;background:var(--p1);border:1px solid var(--edge2);box-shadow:var(--sh)}
.lang1-m a{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:9px;color:var(--fg);text-decoration:none;font:600 13.5px var(--f)}
.lang1-m a b{font:800 12px var(--f);color:var(--mu);width:22px}
@media (hover:hover){.lang1-m a:hover{background:var(--p2)}} .lang1-m a[aria-current]{background:var(--ice-soft)} .lang1-m a[aria-current] b{color:var(--ice-t)}
@media (max-width:600px){.nav>.lang1{display:block!important}.lang1>summary{height:44px;padding:0 12px}.lang1-m a{height:44px}}
/* телефон: шапка узкая — у кнопки языка только код, без глобуса; кнопки шапки плотнее, чтобы не было прокрутки вбок */
@media (max-width:600px){.lang1>summary svg{display:none}.lang1>summary{padding:0 10px;min-width:44px;justify-content:center}.nav{gap:4px}}   /* знак · «Кабинет» · язык · тема · «Меню» на 320–430 в одной строке */
/* Точки ленты отраслей на телефоне: десять целей по 44px в один ряд не помещаются в 358px, поэтому сетка 5×2 по центру. Раньше здесь были
   pointer-events:none и inert из site.js — точки были индикатором, и касание уходило в div#dcar (владелец и замер 16.10: «точки не нажимаются»). */
/* на телефоне десять точек в сетку 5×2 съедали полэкрана над сценой: листают стрелками на макете, место показывает счётчик «7 / 10» */
@media (max-width:600px){.ddots{display:none}}
/* 388, а не 380: кнопка темы держит 44px и не сжимается, на 381–388 слово FROST рядом с ней уже не помещается (знак остаётся) */
@media (max-width:388px){.nav .mark b,.nav .mark .word{display:none}}

/* ===== Сенсорные экраны шире телефона (планшет, телефон боком): цели нажатия 44px =====
   Правила ≤600px уже дают 44px на телефоне стоймя; на 601px и шире шапка, чипы, строки проб и точки ленты оставались по 34–36px. */
@media (pointer:coarse){
  .lnk,.chip,.it,summary{min-height:44px}
  .chips .chip{min-height:44px}
  .lang1>summary{min-height:44px;min-width:44px}
  .lang1-m a{height:44px}
}
@media (pointer:coarse) and (min-width:481px){ .dot{width:44px} }   /* точки ленты кликабельны (на ≤480 они индикатор); десять по 44px помещаются */

/* Поле ввода не тянет ширину страницы: у <input> своя ширина по умолчанию (≈170px) входит в расчёт окна на 320–360px и растягивала его на 6–25px;
   flex:1 растягивает поле до нужного, а начальная ширина — ноль */
.comp .in{width:0}

/* ===== Телефон боком и низкие окна (высота ≤ 560px, альбомная) =====
   Окно помощника целиком под шапкой: прежнее clamp(480px,…) было выше экрана 375–430px, и поле ввода уезжало на 400–450px вниз
   (матрица экранов 09.10: 667×375, 844×390, 932×430). Шапка уплотнена, строка с именем помощника скрыта (как на телефоне стоймя). */
@media (max-height:560px) and (orientation:landscape){
  :root{--navh:56px}
  .nav{padding:6px 16px}
  .hero{grid-template-columns:5fr 7fr;gap:16px;padding:8px 16px}
  .heroslot{display:block}
  .heroslot>.copy{padding:12px 16px}
  .heroslot h1{font-size:clamp(20px,7vh,30px);margin:4px 0}
  .slogan{margin:6px 0 4px}
  .win2{height:calc(100dvh - var(--navh) - 16px);min-height:220px}
  .cvh{display:none}
  .thread{padding:10px 12px}
  .chips{max-height:34dvh}
}

/* ===== Большие мониторы: контент шире, но не растянут ===== */
@media (min-width:1900px){ .wrap{max-width:1560px} }
@media (min-width:2400px){ .wrap{max-width:1800px} }

/* ===== Круглые эффекты убраны (владелец 09.10: «круглые анимации на фоне до сих пор есть, мне не нравится») =====
   Расходящиеся кольца: «готово» в иллюстрации пробы, метка на карте в сцене карусели, кольцо у пейджера. Сами рисунки остаются, не расходится кольцо.
   Остаются элементы интерфейса: точка «онлайн» у аватара, пульс кнопки микрофона во время записи, точки ленты. Круг при смене темы — в menu5.js. */
.ill-ok .pd:after{display:none}
.dslide.run .mp-ring.pz{animation:none;opacity:0}
.pg-w{display:none}

/* ---------- карточка слайда: лёгкий объём (владелец 17.10) ----------
   светлая кромка сверху (inset), мягкая глубокая тень снизу и едва заметный градиент поверхности; слой градиента кладётся поверх прежних фонов через background-image,
   цвет поверхности (--p1 / --p2) остаётся как был, поэтому обе темы сохраняют свои ступени. */
html .dslide,html.light .dslide{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 14%,transparent),var(--e2),0 28px 40px -26px var(--shade);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--fg) 4%,transparent),transparent 42%),radial-gradient(70% 90% at 50% 0%,var(--ice-soft),transparent 72%)}
html.light .dslide{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--e2),0 24px 36px -28px var(--shade)}
/* поле под заголовок (после всех media-правил выше, чтобы их padding не перебил) */
.dslide,.dslide:not([data-k="screens"]){padding-top:var(--pt)}
@media (max-width:1100px){
  .dcar{--pt:112px}   /* заголовок и ряд счётчик+точки в две строки: 22 + ≈30 + 44 + 12 + запас на второй ряд названия */
  .dhd{flex-direction:column;align-items:flex-start;gap:0}
  .dmeta{margin-top:4px}
}
@media (max-width:600px){
  .dcar{--pt:96px}   /* точек на телефоне нет (Г51): 16 + название до 2 строк + счётчик + 12 до устройств */
  .dcap{font-size:12px}
  .dhd{left:calc((100% - var(--sw))/2 + 16px);right:calc((100% - var(--sw))/2 + 16px);top:16px}
  .dttl{font-size:clamp(18px,5.4vw,24px)}
}
@media (max-width:480px){
  .dmeta{flex-direction:column;align-items:flex-start;gap:0}
}

/* Вечное движение при «меньше движения» (у владельца оно включено системно, правило П12). Раньше этот режим
   только замедлял анимации через --k, а бесконечные оставлял: стрелка карусели дёргалась всегда, точки
   «печатает» прыгали всё время, пока открыт слайд, микрофон пульсировал. Владелец 28.10 назвал это
   «интерфейсы кнопки все былмает, мигает». Движение, у которого нет конца, при этом режиме просто не идёт. */
@media (prefers-reduced-motion:reduce){
  .dnudge,[class*="dnudge"],.rb.mic,.rb.mic::after{animation:none!important}
  .sc i,.sc span,.scene *{animation:none!important}
}

/* ===== Ссылки списка направлений: зона нажатия ≥44 px на телефоне =====
   Строка списка осталась плотной (32 px, правило «строка ≤34»), палец ловит невидимая подложка. Вылет 6 px:
   промежуток между строками 8 px, подложки соседей делят только щель и на чужую строку не заходят.
   ::before у ссылки занят маркером, ::after на самой ссылке свободен (стрелка живёт на b:after). */
@media (max-width:600px){
  .dl a{position:relative}
  /* -7, а не -6: строка 32 px плюс 2x6 даёт ровно 44 и упирается в границу — дробные доли высоты оказывались
     чуть НИЖЕ порога, и обход 30.10 честно продолжал считать эти девять ссылок мелкими. Запас в точку снимает спор. */
  .dl a::after{content:"";position:absolute;inset:-7px 0}
}