/* «И ещё» (spec сайта §6.3): двенадцать карточек одной лентой, в каждой
   своя маленькая сцена из продукта.

   Лента. Пока страница идёт вниз, кадр стоит, а лента едет вбок ровно за
   прокруткой (apple-design: прямое управление, 1:1, поэтому linear — это
   не анимация во времени, а следование за пальцем). Движение даёт
   временная шкала прокрутки, слушателя scroll нет; на сколько ехать,
   меряет scripts/more-ride.mjs и ставит --ride. Где шкалы нет или
   движение просили убрать, лента листается пальцем со щелчком по карточке.

   Сцены. Одна история на карточку: завязка, действие, итог (motion-design).
   Почерк один на всё: вход замедлением --ease-out, перемещение на месте
   --ease-in-out, щелчок успеха с перелётом в 3–4%. Длительности: 260,
   440 и 640 мс; шаг каскада 45–120 мс, каскад укладывается в полсекунды.
   Двигаются только transform, opacity и clip-path. Базовые правила
   описывают итог: без движения сцена стоит в нём сразу; завязку задаёт
   .is-live .mr-card:not(.is-in), действие — .is-in. */

.mr{position:relative;margin-top:clamp(56px,7vw,104px)}
.mr-head{display:grid;gap:8px;margin-bottom:clamp(22px,2.6vw,32px)}
.mr-heading{font-size:var(--f-panel);line-height:1.1;font-weight:750;letter-spacing:-.03em}
.mr-head p{font-size:17px;line-height:1.5;color:var(--ink-2)}
.mr-rail{
  --rail-pad:max(var(--gutter),calc((100% - 1320px) / 2 + var(--gutter)));
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rail-pad);scrollbar-width:none;
}
.mr-rail::-webkit-scrollbar{display:none}
.mr-track{position:relative;display:flex;gap:16px;width:max-content;margin:0;padding:4px var(--rail-pad) 10px;list-style:none}
.mr-card{
  flex:none;width:312px;display:flex;flex-direction:column;gap:18px;padding:8px 8px 22px;border-radius:30px;
  background:var(--card);box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgb(23 24 26 / .04),0 28px 56px -36px var(--shadow);
  scroll-snap-align:start;
}
/* Двойная рамка (навык high-end-visual-design): белая рамка, в ней
   утопленное окно со сценой; радиус окна — радиус рамки минус отступ. */
.mr-scene{
  --well:var(--bg-2);
  position:relative;height:216px;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgb(255 255 255 / .7),transparent 60%),var(--well);
  box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 2px rgb(23 24 26 / .05);
}
[data-theme="dark"] .mr-card{background:var(--bg-2);box-shadow:0 0 0 1px var(--line-2),0 28px 56px -36px var(--shadow)}
[data-theme="dark"] .mr-scene{--well:color-mix(in srgb,var(--bg) 55%,var(--bg-2));background:radial-gradient(120% 90% at 50% 0%,rgb(255 255 255 / .04),transparent 60%),var(--well)}
.mr-text{display:grid;gap:6px;padding-inline:14px}
.mr-title{font-size:19px;line-height:1.25;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.mr-text p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.mr-foot{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.mr-bar{display:none}
.mr-paddles{display:none;gap:10px;margin-left:auto}
.mr-paddle{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--bg-2);color:var(--ink);cursor:pointer;
  transition:background-color var(--t-ui) ease,opacity var(--t-ui) ease,transform var(--t-press) var(--ease-out)}
.mr-paddle svg{width:20px;height:20px}
.mr-paddle:active{transform:scale(.96)}
.mr-paddle:disabled{opacity:.4;cursor:default}
.mr-paddle:focus-visible{outline:2px solid var(--crest);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .mr-paddles{display:flex}
  .mr-paddle:not(:disabled):hover{background:var(--line)}
}
/* Метка тянется до низа ленты: открыли страницу посередине — сцены,
   мимо которых лента уже проехала, всё равно сыграют. */
.mr-cue{position:absolute;left:0;bottom:0;width:1px;opacity:0;pointer-events:none}

@supports (animation-timeline:view()){
  /* Кадр во весь экран, а лента в нём по центру: сверху и снизу остаётся
     воздух. Отрицательные поля заводят этот воздух под соседей, чтобы
     до ленты и после неё не было двойного промежутка; сам кадр прозрачен
     и нажатий не перехватывает. */
  .mr.is-ride{height:calc(100svh + var(--ride,0px) * .8);margin-block:calc(-1 * clamp(40px,9svh,96px)) calc(-1 * clamp(56px,12svh,128px));view-timeline:--mr block;pointer-events:none}
  .is-ride :is(.mr-head,.mr-card){pointer-events:auto}
  .is-ride .mr-frame{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--head-h) + 12px) 0 4svh;overflow:clip}
  .is-ride .mr-rail{overflow:visible;scroll-snap-type:none}
  .is-ride .mr-track{animation:mr-ride linear both;animation-timeline:--mr;animation-range:contain 0% contain 100%}
  .is-ride .mr-foot{margin-top:28px}
  .is-ride .mr-paddles{display:none}
  .is-ride .mr-bar{display:block;width:min(240px,40%);height:3px;border-radius:2px;background:var(--line);overflow:hidden}
  .mr-bar i{display:block;height:100%;border-radius:inherit;background:var(--ink);transform-origin:left;animation:mr-bar linear both;animation-timeline:--mr;animation-range:contain 0% contain 100%}
  @keyframes mr-ride{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--ride,0px)),0,0)}}
  /* Въезд и уход карточек — в scripts/more-ride.mjs: одна анимация на
     карточку на той же шкале прокрутки. */
  @keyframes mr-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media (prefers-reduced-motion:no-preference){
    .mr-head{animation:rise linear backwards;animation-timeline:view();animation-range:entry 0 entry 200px}
  }
}

/* ── сцены: общее ─────────────────────────────────────────────────── */
.ms{
  --lift:0 1px 0 var(--line-2),0 16px 30px -20px var(--shadow),0 4px 10px -6px var(--shadow);
  --tick-ink:#fff;--pop:cubic-bezier(.34,1.36,.64,1);--ring:color-mix(in srgb,var(--ink) 24%,transparent);
  position:absolute;inset:0;display:grid;place-items:center;font-size:13px;line-height:1.35;color:var(--ink);
}
[data-theme="dark"] .ms{--tick-ink:#17181A}
.ms p{margin:0}
.ms-sheet,.ms-card,.ms-panel,.ms-slip,.ms-pin,.ms-log,.ms-task,.ms-place,.ms-field,.ms-hits,.ms-letter{background:var(--card);box-shadow:var(--lift)}
.ms-cap{font-size:12px;font-weight:650;color:var(--ink-3)}
.ms-chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:14px;background:var(--rose);color:var(--ink);font-size:12.5px;font-weight:700;white-space:nowrap}
.ms-line{display:flex;justify-content:space-between;gap:12px}
.ms-line span{color:var(--ink-2)}
.ms-line b{font-weight:650;white-space:nowrap}

/* Продажа у стойки */
/* Чек продажи — та же бумага, что квитанция на плитке: зубчатый низ. */
.ms-paper{position:relative;isolation:isolate;width:224px;display:grid;gap:8px;padding:15px 17px 22px;
  filter:drop-shadow(0 12px 14px var(--shadow)) drop-shadow(0 1px 1px var(--line))}
.ms-paper::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--card);border-radius:14px 14px 0 0;
  -webkit-mask:conic-gradient(from -45deg at 50% 100%,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/12px 100% repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 6px) no-repeat;
  mask:conic-gradient(from -45deg at 50% 100%,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/12px 100% repeat-x,linear-gradient(#000,#000) top/100% calc(100% - 6px) no-repeat}
.ms-total{display:flex;justify-content:space-between;margin-top:2px;padding-top:9px;border-top:1px dashed var(--line);font-size:14.5px;font-weight:750}

/* Заселение */
.ms-sheet{width:256px;display:grid;gap:2px;margin:0;padding:7px;border-radius:16px;list-style:none}
.ms-sheet li{position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:0 9px;border-radius:10px;font-size:13px;font-weight:600}
.ms-sheet li i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ok);color:var(--tick-ink)}
.ms-sheet li i svg{width:12px;height:12px}
.ms-sign{position:absolute;right:10px;top:50%;width:46px;height:20px;margin-top:-10px;fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Акции */
.ms-card{width:236px;display:grid;justify-items:start;gap:10px;padding:16px 18px 18px;border-radius:16px}
.ms-what{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.ms-prices{display:flex;align-items:baseline;gap:12px}
.ms-prices s{position:relative;font-size:16px;font-weight:650;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.ms-prices s i{position:absolute;left:-3px;right:-3px;top:52%;height:2px;border-radius:1px;background:var(--crest);transform-origin:left}
.ms-prices b{font-size:30px;line-height:1;font-weight:750;letter-spacing:-.035em;white-space:nowrap}

/* Тарифы */
.ms-tariffs{align-content:center;gap:12px}
.ms-panel{display:grid;gap:10px;padding:13px 14px 10px;border-radius:16px}
.ms-bars{display:grid;grid-template-columns:repeat(7,28px);gap:5px;height:100px}
.ms-bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-height:0}
.ms-bar em{font-style:normal;font-size:10px;font-weight:650;color:var(--ink-3);white-space:nowrap;letter-spacing:-.02em}
.ms-bar i{width:100%;height:calc(var(--h) * .62);border-radius:7px 7px 3px 3px;background:color-mix(in srgb,var(--ink) 14%,var(--card));transform-origin:bottom}
.ms-bar.is-up i{background:var(--crest)}
.ms-bar.is-up em{color:var(--ink)}
.ms-bar u{text-decoration:none;font-size:10.5px;font-weight:600;color:var(--ink-3)}

/* Задачи */
.ms-tasks{align-content:center;justify-content:center;gap:8px}
.ms-bell{position:relative;justify-self:end;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--card);box-shadow:var(--lift)}
.ms-bell svg{width:17px;height:17px;transform-origin:50% 2px}
.ms-bell b{position:absolute;top:-5px;right:-6px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--crest);color:#fff;font-size:11px;font-weight:750}
.ms-stack{width:244px;display:grid;gap:6px}
.ms-task{position:relative;display:grid;gap:1px;padding:8px 12px 8px 15px;border-radius:12px}
.ms-task::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 2px 2px 0;background:var(--kind)}
.ms-task[data-kind="call"]{--kind:var(--crest)}
.ms-task[data-kind="prep"],.ms-task[data-kind="clean"]{--kind:color-mix(in srgb,var(--ink) 18%,transparent)}
.ms-task b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-task span{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Отчёты */
.ms-reports .ms-panel{width:248px;gap:12px;padding:14px 16px 10px}
.ms-legend{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:650;color:var(--ink-3);white-space:nowrap}
.ms-legend span:last-child{display:inline-flex;align-items:center;gap:6px}
.ms-legend i{width:12px;height:2px;border-radius:1px;background:var(--ink)}
.ms-legend span:first-child{font-size:12.5px;color:var(--ink)}
.ms-chart{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.ms-col{display:grid;gap:5px;justify-items:center}
.ms-area{position:relative;width:100%;height:112px}
/* Месяцы — светлым тоном хохолка, лучший месяц — полным, идущий —
   совсем светлым: на графике читается одно главное. */
.ms-area i{position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:6px 6px 3px 3px;background:color-mix(in srgb,var(--crest) 32%,var(--card));transform-origin:bottom}
.ms-col:nth-child(5) .ms-area i{background:var(--crest)}
.ms-col:last-child .ms-area i{background:color-mix(in srgb,var(--crest) 16%,var(--card))}
.ms-area b{position:absolute;left:-3px;right:-3px;bottom:var(--g);height:2px;border-radius:1px;background:var(--ink)}
.ms-col u{text-decoration:none;font-size:10.5px;font-weight:600;color:var(--ink-3)}

/* Роли и журнал */
.ms-roles{align-content:center;gap:8px}
.ms-roles>*{width:248px}
.ms-pin{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px}
.ms-pin span{font-size:12.5px;font-weight:650}
.ms-pin p{display:flex;gap:7px}
.ms-pin i{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.ms-log{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;padding:10px 14px;border-radius:14px}
.ms-log span{grid-row:1/3;font-size:11.5px;font-weight:650;color:var(--ink-3);padding-top:1px}
.ms-log b{font-size:12.5px;font-weight:700}
.ms-log em{font-style:normal;font-size:11.5px;color:var(--ink-2)}
.ms-roles-row{display:flex;gap:4px}
.ms-roles-row i{font-style:normal;flex:auto;text-align:center;padding:6px 0;border-radius:9px;font-size:11px;font-weight:650;color:var(--ink-2);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ms-roles-row i.is-on{background:var(--ink);color:var(--on-ink)}

/* Зарплата */
.ms-slip{width:248px;display:grid;gap:8px;padding:14px 16px 14px;border-radius:16px}
.ms-slip .ms-line{font-size:12px}
.ms-split{display:flex;height:8px;margin-top:4px;border-radius:4px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.ms-adv{width:var(--adv);background:color-mix(in srgb,var(--ink) 32%,var(--card));transform-origin:left}
.ms-rest{flex:1;background:var(--crest);transform-origin:left}
.ms-sum{display:grid;grid-template-columns:var(--adv) 1fr;gap:8px}
.ms-sum span{display:grid;gap:1px;font-size:11px;font-weight:600;color:var(--ink-3)}
.ms-sum b{font-size:13px;font-weight:700;color:var(--ink-2)}
.ms-sum .is-pay{justify-items:end;text-align:right}
.ms-sum .is-pay b{font-size:16px;font-weight:750;letter-spacing:-.02em;color:var(--ink)}

/* Приложение */
.ms-app{grid-auto-flow:column;place-content:center;gap:16px}
.ms-phone{position:relative;width:138px;height:204px;padding:4px;border-radius:27px;background:linear-gradient(160deg,#3A3C41,#141517 40%,#1E1F22);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1),inset 0 0 0 2px #0E0F10,0 18px 30px -18px var(--shadow)}
.ms-phone::before{content:'';position:absolute;z-index:2;top:10px;left:50%;width:40px;height:11px;margin-left:-20px;border-radius:6px;background:#0B0C0D}
.ms-screens{display:flex;width:100%;height:100%;border-radius:23px;background:var(--card);overflow:hidden}
.ms-face{flex:none;width:100%;display:grid;align-content:start;gap:7px;padding:28px 10px 12px}
.ms-face b{font-size:11.5px;font-weight:750;margin-bottom:2px}
.ms-face span{display:flex;align-items:center;gap:6px;padding:6px 7px;border-radius:8px;background:var(--bg-2);font-size:10px;font-weight:600;line-height:1.2;white-space:nowrap}
.ms-face span i{font-style:normal;font-weight:750;color:var(--crest)}
.ms-face span.is-ok{background:var(--t-pine);color:var(--ink)}
.ms-face span svg{width:11px;height:11px;flex:none;color:var(--ok)}
.ms-screens .ms-face{transform:translateX(-100%)}
.ms-faces{display:grid;gap:6px}
.ms-faces i{font-style:normal;padding:7px 11px;border-radius:10px;font-size:11.5px;font-weight:650;color:var(--ink-2);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ms-faces i:last-child{background:var(--ink);color:var(--on-ink)}

/* Письма */
.ms-letters{place-items:end center;padding-bottom:12px}
.ms-env{position:relative;width:204px;height:122px}
.ms-back,.ms-pocket,.ms-flap{position:absolute;inset:0;border-radius:12px}
.ms-back{background:color-mix(in srgb,var(--crest) 30%,var(--card))}
.ms-letter{position:absolute;left:14px;right:14px;top:8px;height:108px;display:grid;align-content:start;gap:2px;padding:11px 12px;border-radius:8px;transform:translateY(-74px)}
.ms-letter span{font-size:10.5px;font-weight:650;color:var(--ink-3)}
.ms-letter b{font-size:13px;font-weight:750}
.ms-letter em{font-style:normal;font-size:11px;color:var(--ink-2)}
.ms-letter u{text-decoration:none;justify-self:start;margin-top:4px;padding:2px 6px;border-radius:5px;background:var(--bg-2);font-size:10.5px;font-weight:700}
.ms-pocket{background:color-mix(in srgb,var(--crest) 16%,var(--card));clip-path:polygon(0 34%,50% 72%,100% 34%,100% 100%,0 100%);box-shadow:var(--lift)}
.ms-flap{bottom:auto;height:64%;border-radius:12px 12px 0 0;background:color-mix(in srgb,var(--crest) 22%,var(--card));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transform:perspective(500px) rotateX(180deg);z-index:0}
.ms-letter{z-index:1}.ms-pocket{z-index:2}

/* Юрлица и кассы */
.ms-places{position:relative;width:248px;display:grid;gap:6px}
.ms-place{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:12px}
.ms-place>i{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;background:var(--bg-2);color:var(--ink-2)}
.ms-place>i svg{width:16px;height:16px}
.ms-place:first-child>i{background:var(--tint-bg,var(--rose));color:var(--tint-ink,var(--crest-2))}
.ms-place span{display:grid;font-size:12.5px;font-weight:650;line-height:1.25}
.ms-place small{font-size:10.5px;font-weight:600;color:var(--ink-3)}
.ms-place b{display:grid;overflow:hidden;margin-left:auto;font-size:13px;font-weight:700;text-align:right}
.ms-place em{grid-area:1/1;font-style:normal}
.ms-place em:first-child{opacity:0;transform:translateY(-110%)}
.ms-coin{position:absolute;right:86px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sand);color:var(--wait);opacity:0;box-shadow:var(--lift)}
.ms-coin svg{width:18px;height:18px}

/* Поиск */
.ms-search{align-content:center;gap:8px}
.ms-search>*{width:252px}
.ms-field{display:flex;align-items:center;gap:9px;height:42px;padding:0 10px 0 12px;border-radius:13px;box-shadow:var(--lift),inset 0 0 0 1.5px color-mix(in srgb,var(--crest) 55%,transparent)}
.ms-field svg{width:15px;height:15px;flex:none;color:var(--ink-3)}
.ms-q{font-size:14.5px;font-weight:650;white-space:nowrap}
.ms-caret{width:2px;height:18px;margin-left:-6px;border-radius:1px;background:var(--crest)}
.ms-field kbd{margin-left:auto;padding:2px 7px;border-radius:7px;background:var(--bg-2);font:inherit;font-size:11px;font-weight:650;color:var(--ink-3)}
.ms-hits{display:grid;gap:2px;padding:5px;border-radius:13px}
.ms-hit{display:grid;padding:7px 9px;border-radius:9px}
.ms-hit b{font-size:12.5px;font-weight:700}
.ms-hit span{font-size:11.5px;color:var(--ink-3)}
.ms-hit.is-on{background:color-mix(in srgb,var(--crest) 11%,transparent)}

/* Склад: остатки строками, у чая после продажи 4 → 3 и метка охрой. */
.ms-stock{align-content:center;gap:12px;--ochre:#9A5B05}
[data-theme="dark"] .ms-stock{--ochre:#E3B062}
.ms-stock .ms-panel{width:236px;gap:0;padding:12px 14px 8px}
.ms-stock-head{display:flex;justify-content:space-between;padding-bottom:6px}
.ms-stock-row{position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:32px;border-top:1px solid var(--line)}
.ms-stock-row span{color:var(--ink-2)}
.ms-stock-row b{font-weight:700;font-variant-numeric:tabular-nums}
.ms-stock-row.is-low b{color:var(--ochre)}
.ms-stock-row.is-low::before{content:'';position:absolute;inset:2px -8px;z-index:-1;border-radius:8px;background:color-mix(in srgb,var(--ochre) 10%,transparent)}
.ms-qty{display:inline-grid;overflow:hidden;vertical-align:bottom}
.ms-qty em{grid-area:1/1;font-style:normal}
.ms-qty em:first-child{opacity:0;transform:translateY(-100%)}
.ms-buy{background:color-mix(in srgb,var(--ochre) 14%,var(--card));color:var(--ochre)}

/* Сканер: наклейка со своим кодом, луч проходит, товар встаёт в чек. */
.ms-scan{align-content:center;gap:14px}
.ms-label{position:relative;overflow:hidden;display:grid;justify-items:center;gap:4px;width:200px;padding:12px 18px 8px;border-radius:10px;background:#FFFFFF;color:#17181A;
  box-shadow:0 1px 0 var(--line-2),0 14px 26px -18px var(--shadow),0 3px 8px -5px var(--shadow)}
[data-theme="dark"] .ms-label{background:#F1EFEA}
.ms-bars-code{display:block;width:100%;height:46px;fill:#17181A}
.ms-digits{font-size:11.5px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.ms-beam{position:absolute;left:8px;right:8px;top:12px;height:2px;border-radius:1px;background:var(--crest);box-shadow:0 0 10px 1px color-mix(in srgb,var(--crest) 55%,transparent);opacity:0}
.ms-scanned{display:flex;justify-content:space-between;gap:14px;width:200px;padding:10px 14px;border-radius:12px;background:var(--card);box-shadow:var(--lift)}
.ms-scanned span{color:var(--ink-2)}
.ms-scanned b{font-weight:700;white-space:nowrap}

/* ── сцены: движение ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  @keyframes ms-rise{from{opacity:0;transform:translateY(14px)}}
  @keyframes ms-drop{from{opacity:0;transform:translateY(-8px)}}
  @keyframes ms-fade{from{opacity:0}}
  @keyframes ms-pop{from{opacity:0;transform:scale(.92)}}
  @keyframes ms-grow-y{from{transform:scaleY(0)}}
  @keyframes ms-grow-x{from{transform:scaleX(0)}}
  @keyframes ms-dim{from{color:var(--ink-3)}}
  @keyframes ms-mute{from{color:var(--ink)}}

  /* Продажа: чек поднимается, строки ложатся сверху, итог щёлкает. */
  .is-live .mr-card:not(.is-in) :is(.ms-sales .ms-line,.ms-sales .ms-total){opacity:0}
  .is-in .ms-sales .ms-line{animation:ms-drop 260ms var(--ease-out) calc(220ms + var(--i) * 110ms) backwards}
  .is-in .ms-sales .ms-total{animation:ms-pop 440ms var(--pop) 620ms backwards}

  /* Заселение: галочки по порядку окна, между первой и второй — подпись. */
  @keyframes ms-tick{from{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ring);transform:scale(.7)}to{background:var(--ok);box-shadow:none;transform:none}}
  @keyframes ms-mark{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
  @keyframes ms-write{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  .ms-sheet li i path{stroke-dasharray:24}
  .ms-sign path{stroke-dasharray:1}
  .is-live .mr-card:not(.is-in) .ms-sheet li i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ring)}
  .is-live .mr-card:not(.is-in) .ms-sheet li i path{stroke-dashoffset:24}
  .is-live .mr-card:not(.is-in) .ms-sheet li{color:var(--ink-3)}
  .is-live .mr-card:not(.is-in) .ms-sign path{stroke-dashoffset:1}
  .is-in .ms-sheet li{--at:calc(200ms + var(--i) * 230ms + min(var(--i),1) * 340ms);animation:ms-dim 260ms ease var(--at) backwards}
  .is-in .ms-sheet li i{animation:ms-tick 300ms var(--pop) var(--at) both}
  .is-in .ms-sheet li i path{animation:ms-mark 260ms var(--ease-out) calc(var(--at) + 90ms) both}
  .is-in .ms-sign path{animation:ms-write 460ms cubic-bezier(.45,0,.25,1) 300ms both}

  /* Акция: старая цена зачёркивается, новая поднимается, ярлык щёлкает. */
  .is-live .mr-card:not(.is-in) .ms-prices s i{transform:scaleX(0)}
  .is-live .mr-card:not(.is-in) :is(.ms-prices b,.ms-promo .ms-chip){opacity:0}
  .is-live .mr-card:not(.is-in) .ms-prices s{color:var(--ink)}
  .is-in .ms-prices s{animation:ms-mute 260ms ease 520ms backwards}
  .is-in .ms-prices s i{animation:ms-grow-x 300ms var(--ease-out) 380ms backwards}
  .is-in .ms-prices b{animation:ms-rise 440ms var(--ease-out) 600ms backwards}
  .is-in .ms-promo .ms-chip{animation:ms-pop 440ms var(--pop) 860ms backwards}

  /* Тарифы: столбики встают волной, выходные выше; условие отмены. */
  .is-live .mr-card:not(.is-in) .ms-bar i{transform:scaleY(0)}
  .is-live .mr-card:not(.is-in) :is(.ms-bar em,.ms-tariffs .ms-chip){opacity:0}
  .is-in .ms-bar i{animation:ms-grow-y 520ms var(--ease-out) calc(160ms + var(--i) * 45ms) backwards}
  .is-in .ms-bar em{animation:ms-fade 260ms ease calc(460ms + var(--i) * 45ms) backwards}
  .is-in .ms-tariffs .ms-chip{animation:ms-rise 440ms var(--ease-out) 820ms backwards}

  /* Задачи: колокольчик качается и затухает, задачи встают стопкой. */
  @keyframes ms-ring{
    0%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-13deg)}45%{transform:rotate(9deg)}
    60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}100%{transform:rotate(0)}
  }
  .is-live .mr-card:not(.is-in) :is(.ms-bell b,.ms-task){opacity:0}
  .is-in .ms-bell svg{animation:ms-ring 760ms ease-in-out 80ms both}
  .is-in .ms-bell b{animation:ms-pop 300ms var(--pop) 160ms backwards}
  .is-in .ms-task{animation:ms-drop 440ms var(--ease-out) calc(320ms + var(--i) * 120ms) backwards}

  /* Отчёты: месяцы растут волной, засечки прошлого года встают сверху. */
  @keyframes ms-tick-in{from{opacity:0;transform:translateY(-6px)}}
  .is-live .mr-card:not(.is-in) .ms-area i{transform:scaleY(0)}
  .is-live .mr-card:not(.is-in) .ms-area b{opacity:0}
  .is-in .ms-area i{animation:ms-grow-y 560ms var(--ease-out) calc(160ms + var(--i) * 60ms) backwards}
  .is-in .ms-area b{animation:ms-tick-in 300ms var(--ease-out) calc(700ms + var(--i) * 45ms) backwards}

  /* Роли: ПИН набирается, роль включается, правка ложится в журнал. */
  @keyframes ms-dot{from{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ring);transform:scale(.8)}to{background:var(--ink);box-shadow:none;transform:none}}
  @keyframes ms-role{from{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-2)}}
  .is-live .mr-card:not(.is-in) .ms-pin i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ring)}
  .is-live .mr-card:not(.is-in) .ms-log{opacity:0}
  .is-live .mr-card:not(.is-in) .ms-roles-row i.is-on{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-2)}
  .is-in .ms-pin i{animation:ms-dot 200ms var(--pop) calc(180ms + var(--i) * 110ms) both}
  .is-in .ms-roles-row i.is-on{animation:ms-role 260ms ease 640ms backwards}
  .is-in .ms-log{animation:ms-rise 440ms var(--ease-out) 820ms backwards}

  /* Зарплата: строки расчёта, затем полоса: аванс, остаток к выплате. */
  .is-live .mr-card:not(.is-in) :is(.ms-slip .ms-line,.ms-sum){opacity:0}
  .is-live .mr-card:not(.is-in) :is(.ms-adv,.ms-rest){transform:scaleX(0)}
  .is-in .ms-slip .ms-line{animation:ms-drop 260ms var(--ease-out) calc(180ms + var(--i) * 110ms) backwards}
  .is-in .ms-adv{animation:ms-grow-x 440ms var(--ease-out) 460ms backwards}
  .is-in .ms-rest{animation:ms-grow-x 440ms var(--ease-out) 800ms backwards}
  .is-in .ms-sum{animation:ms-rise 440ms var(--ease-out) 1000ms backwards}

  /* Приложение: экран администратора уезжает, приходит экран персонала. */
  @keyframes ms-swipe{from{transform:none}}
  @keyframes ms-face-off{from{background:var(--ink);color:var(--on-ink)}to{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-2)}}
  @keyframes ms-face-on{from{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-2)}}
  .is-live .mr-card:not(.is-in) .ms-screens .ms-face{transform:none}
  .is-live .mr-card:not(.is-in) .ms-faces i:first-child{background:var(--ink);color:var(--on-ink)}
  .is-live .mr-card:not(.is-in) .ms-faces i:last-child{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink-2)}
  .is-in .ms-screens .ms-face{animation:ms-swipe 640ms var(--ease-in-out) 900ms backwards}
  .is-in .ms-faces i:first-child{animation:ms-face-off 260ms ease 1000ms both}
  .is-in .ms-faces i:last-child{animation:ms-face-on 260ms ease 1000ms backwards}

  /* Письма: клапан открывается, письмо выходит из конверта. */
  @keyframes ms-flap{0%{transform:perspective(500px) rotateX(0);z-index:3}49.9%{z-index:3}50%{z-index:0}100%{transform:perspective(500px) rotateX(180deg);z-index:0}}
  @keyframes ms-out{from{transform:translateY(0)}}
  .is-live .mr-card:not(.is-in) .ms-flap{transform:perspective(500px) rotateX(0);z-index:3}
  .is-live .mr-card:not(.is-in) .ms-letter{transform:none}
  .is-in .ms-flap{animation:ms-flap 420ms var(--ease-in-out) 260ms both}
  .is-in .ms-letter{animation:ms-out 640ms cubic-bezier(.3,1.25,.5,1) 560ms backwards}

  /* Юрлица и кассы: монета едет из кассы на счёт, суммы перелистываются. */
  @keyframes ms-coin{
    0%{opacity:0;transform:translate(0,0) scale(.6)}
    18%{opacity:1;transform:translate(0,0) scale(1)}
    50%{transform:translate(-12px,26px) scale(1.04)}
    82%{opacity:1;transform:translate(0,53px) scale(1)}
    100%{opacity:0;transform:translate(0,53px) scale(.6)}
  }
  @keyframes ms-old{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-110%)}}
  @keyframes ms-new{from{opacity:0;transform:translateY(110%)}}
  .is-live .mr-card:not(.is-in) .ms-place em:first-child{opacity:1;transform:none}
  .is-live .mr-card:not(.is-in) .ms-place.is-moved em:last-child{opacity:0;transform:translateY(110%)}
  .is-in .ms-coin{animation:ms-coin 900ms var(--ease-in-out) 240ms both}
  .is-in .ms-place.is-moved em:first-child{animation:ms-old 300ms var(--ease-out) var(--at) both}
  .is-in .ms-place.is-moved em:last-child{animation:ms-new 300ms var(--ease-out) var(--at) backwards}
  .ms-place:nth-child(1){--at:300ms}
  .ms-place:nth-child(2){--at:980ms}

  /* Поиск: запрос набирается, курсор мигает, находятся гость и бронь. */
  @keyframes ms-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes ms-blink{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
  .is-live .mr-card:not(.is-in) .ms-q{clip-path:inset(0 100% 0 0)}
  .is-live .mr-card:not(.is-in) .ms-caret{opacity:0}
  .is-live .mr-card:not(.is-in) .ms-hit{opacity:0}
  .is-in .ms-q{animation:ms-type 520ms steps(4,end) 200ms both}
  /* Курсор не стоит в пустоте, пока буквы проявляются: он загорается, когда запрос набран. */
  /* Одна анимация, а не две (ms-off + ms-blink): две на одном свойстве
     видеокарта не берёт, и курсор будил главный поток каждый кадр (замер
     3.10). Первая половина круга — погашен, она же держится, пока
     набирается запрос. */
  .is-in .ms-caret{animation:ms-blink 1s steps(1,end) 720ms infinite backwards}
  .mr.is-off .ms-caret{animation-play-state:paused}
  .is-in .ms-hit{animation:ms-drop 260ms var(--ease-out) calc(760ms + var(--i,0) * 100ms) backwards}
  .ms-hit:nth-child(2){--i:1}
}

/* ── узкие экраны ─────────────────────────────────────────────────── */
@media (max-width:767px){
  .mr-head p{font-size:16px}
  .mr-track{gap:12px}
  .mr-card{width:min(80vw,300px);padding:7px 7px 20px;border-radius:28px}
  .mr-scene{border-radius:21px;height:208px}
  .mr-text{padding-inline:12px}
  .is-ride .mr-foot{margin-top:22px}
}

/* Склад и сканер: истории (владелец 10.10: «всё остальное в „ещё“»). */
@media (prefers-reduced-motion:no-preference){
  @keyframes ms-out-up{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-100%)}}
  @keyframes ms-in-up{from{opacity:0;transform:translateY(100%)}}
  @keyframes ms-sweep{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(46px)}}
  @keyframes ms-bump{0%,100%{transform:none}40%{transform:translateY(-3px) scale(1.06)}}

  /* Склад: строки ложатся, продажа снимает у чая одну штуку, остаток
     краснеет охрой, встаёт «Пора докупить». */
  .is-live .mr-card:not(.is-in) .ms-stock-row{opacity:0}
  .is-live .mr-card:not(.is-in) .ms-qty em:first-child{opacity:1;transform:none}
  .is-live .mr-card:not(.is-in) .ms-qty em:last-child{opacity:0}
  .is-live .mr-card:not(.is-in) .ms-stock-row.is-low::before,.is-live .mr-card:not(.is-in) .ms-buy{opacity:0}
  .is-in .ms-stock-row{animation:ms-drop 260ms var(--ease-out) calc(200ms + var(--i) * 100ms) backwards}
  .is-in .ms-qty em:first-child{animation:ms-out-up 300ms var(--ease-out) 820ms both}
  .is-in .ms-qty em:last-child{animation:ms-in-up 300ms var(--ease-out) 820ms backwards}
  .is-in .ms-stock-row.is-low::before{animation:ms-fade 260ms ease 900ms backwards}
  .is-in .ms-buy{animation:ms-pop 440ms var(--pop) 1180ms backwards}

  /* Сканер: луч сверху вниз по штрихам, наклейка отзывается, товар встаёт в чек. */
  .is-live .mr-card:not(.is-in) .ms-scanned{opacity:0}
  .is-in .ms-beam{animation:ms-sweep 760ms cubic-bezier(.45,0,.25,1) 260ms both}
  .is-in .ms-label{animation:ms-bump 300ms var(--ease-out) 1020ms}
  .is-in .ms-scanned{animation:ms-rise 420ms var(--ease-out) 1080ms backwards}
}

/* ── «И ещё» эффектнее (владелец 10.10: «теперь займись анимациями в
   „И ещё“»). Тот же почерк, что у плиток «Что умеет»: вещь сцены встаёт
   из глубины — снизу, наклонённая назад, чуть меньше — и выпрямляется;
   истории идут на полтакта позже, когда вещь уже стоит, и у каждой есть
   кульминация: итог чека выскакивает, у склада вылетает «−1», столбики
   вырастают с пружиной, задачи прилетают уведомлениями справа, новая цена
   акции выскакивает крупнее, «К выплате» вспыхивает. Только transform и
   opacity; без движения сцена стоит в итоге. Правила ниже перекрывают
   прежние такты тех же сцен (тот же вес, позже в файле). */
@media (prefers-reduced-motion:no-preference){
  @keyframes ms-stage{from{opacity:0;transform:perspective(900px) translateY(30px) rotateX(16deg) scale(.95)}}
  @keyframes ms-grow-spring{0%{transform:scaleY(0)}68%{transform:scaleY(1.07)}100%{transform:scaleY(1)}}
  @keyframes ms-pop-big{0%{opacity:0;transform:translateY(-6px) scale(1.3)}60%{opacity:1;transform:scale(.96)}100%{opacity:1;transform:none}}
  @keyframes ms-pop-spring{0%{opacity:0;transform:scale(.8)}62%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:none}}
  @keyframes ms-fly{from{opacity:0;transform:translateX(28px) scale(.96)}}
  @keyframes ms-minus{0%{opacity:0;transform:translateX(6px) scale(.8)}22%{opacity:1;transform:none}72%{opacity:1;transform:translateY(-3px)}100%{opacity:0;transform:translateY(-8px)}}
  @keyframes ms-sweep-x{0%{opacity:1;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
  @keyframes ms-nudge{0%,100%{transform:none}25%{transform:rotate(-3deg)}55%{transform:rotate(2.5deg)}80%{transform:rotate(-1deg)}}
  @keyframes ms-flash{0%,100%{transform:none}35%{transform:scale(1.08)}}

  /* Общий вход вещи сцены. */
  .is-live .mr-card:not(.is-in) .ms>:first-child{opacity:0}
  .is-in .ms>:first-child{transform-origin:50% 100%;animation:ms-stage 900ms cubic-bezier(.16,1,.3,1) backwards}

  /* Продажа: позиции ложатся по одной, итог выскакивает. */
  .is-in .ms-sales .ms-line{animation:ms-drop 320ms var(--ease-out) calc(420ms + var(--i) * 170ms) backwards}
  .is-in .ms-sales .ms-total{animation:ms-pop-spring 520ms var(--pop) 1000ms backwards}

  /* Склад: у чая вылетает «−1», строка закрашивается охрой слева направо,
     «Пора докупить» выскакивает и качнулся. */
  /* «−1» всплывает у самого остатка чая, левее цифры, и гаснет. */
.ms-stock-row.is-low::after{content:'−1';position:absolute;right:24px;top:50%;margin-top:-9px;padding:1px 6px;border-radius:999px;background:var(--ochre);color:#fff;font-size:11px;line-height:16px;font-weight:700;opacity:0;pointer-events:none}
  .is-in .ms-stock-row{animation:ms-drop 320ms var(--ease-out) calc(380ms + var(--i) * 130ms) backwards}
  .is-in .ms-stock-row.is-low::after{animation:ms-minus 900ms var(--ease-out) 1000ms both}
  .is-in .ms-qty em:first-child{animation:ms-out-up 320ms var(--ease-out) 1080ms both}
  .is-in .ms-qty em:last-child{animation:ms-in-up 320ms var(--ease-out) 1080ms backwards}
  .ms-stock-row.is-low::before{transform-origin:left}
  .is-in .ms-stock-row.is-low::before{animation:ms-sweep-x 480ms var(--ease-out) 1160ms backwards}
  .is-in .ms-buy{animation:ms-pop-spring 520ms var(--pop) 1500ms backwards,ms-nudge 520ms var(--ease-in-out) 2020ms}

  /* Сканер: луч идёт медленнее, наклейка отзывается, товар выезжает из-под
     наклейки в чек. */
  .is-in .ms-beam{animation:ms-sweep 900ms cubic-bezier(.45,0,.25,1) 520ms both}
  .is-in .ms-label{animation:ms-stage 900ms cubic-bezier(.16,1,.3,1) backwards,ms-bump 320ms var(--ease-out) 1420ms}
  .is-in .ms-scanned{animation:ms-pop-spring 480ms var(--pop) 1480ms backwards}

  /* Заселение: шаги отмечаются чуть реже, каждая отмеченная строка
     коротко закрашивается. */
  .ms-sheet li::before{content:'';position:absolute;inset:0;border-radius:10px;background:color-mix(in srgb,var(--ok) 11%,transparent);transform-origin:left;opacity:0;pointer-events:none}
  .is-in .ms-sheet li{--at:calc(460ms + var(--i) * 300ms + min(var(--i),1) * 380ms)}
  @keyframes ms-row-fill{0%{opacity:1;transform:scaleX(0)}55%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
  .is-in .ms-sheet li::before{animation:ms-row-fill 800ms var(--ease-out) calc(var(--at) - 40ms) both}
  .is-in .ms-sign path{animation:ms-write 620ms cubic-bezier(.45,0,.25,1) 780ms both}

  /* Акция: прежняя цена зачёркивается чертой, новая выскакивает крупнее,
     ярлык акции щёлкает. */
  .is-in .ms-prices s i{animation:ms-grow-x 420ms var(--ease-out) 560ms backwards}
  .is-in .ms-prices s{animation:ms-mute 300ms ease 760ms backwards}
  .is-in .ms-prices b{transform-origin:left bottom;animation:ms-pop-big 560ms cubic-bezier(.34,1.36,.64,1) 860ms backwards}
  .is-in .ms-promo .ms-chip{animation:ms-pop-spring 480ms var(--pop) 1260ms backwards}

  /* Тарифы и отчёты: столбики вырастают с пружиной волной. */
  .is-in .ms-bar i{animation:ms-grow-spring 640ms var(--ease-out) calc(380ms + var(--i) * 70ms) backwards}
  .is-in .ms-bar em{animation:ms-fade 300ms ease calc(760ms + var(--i) * 70ms) backwards}
  .is-in .ms-tariffs .ms-chip{animation:ms-pop-spring 480ms var(--pop) 1320ms backwards}
  .is-in .ms-area i{animation:ms-grow-spring 680ms var(--ease-out) calc(380ms + var(--i) * 80ms) backwards}
  .is-in .ms-area b{animation:ms-tick-in 320ms var(--ease-out) calc(980ms + var(--i) * 60ms) backwards}

  /* Задачи: колокольчик звенит, задачи прилетают справа, как уведомления. */
  .is-in .ms-bell svg{animation:ms-ring 820ms ease-in-out 380ms both}
  .is-in .ms-bell b{animation:ms-pop-spring 360ms var(--pop) 480ms backwards}
  .is-in .ms-task{animation:ms-fly 520ms cubic-bezier(.16,1,.3,1) calc(620ms + var(--i) * 160ms) backwards}

  /* Роли: ПИН набирается, профиль открывается, правка ложится в журнал. */
  .is-in .ms-pin i{animation:ms-dot 220ms var(--pop) calc(440ms + var(--i) * 130ms) both}
  .is-in .ms-roles-row i.is-on{animation:ms-role 280ms ease 1000ms backwards,ms-flash 360ms var(--ease-out) 1000ms}
  .is-in .ms-log{animation:ms-fly 520ms cubic-bezier(.16,1,.3,1) 1180ms backwards}

  /* Зарплата: строки, аванс и остаток полосой, «К выплате» вспыхивает. */
  .is-in .ms-slip .ms-line{animation:ms-drop 320ms var(--ease-out) calc(420ms + var(--i) * 160ms) backwards}
  .is-in .ms-adv{animation:ms-grow-x 520ms var(--ease-out) 760ms backwards}
  .is-in .ms-rest{animation:ms-grow-x 520ms var(--ease-out) 1100ms backwards}
  .is-in .ms-sum{animation:ms-rise 440ms var(--ease-out) 1320ms backwards}
  .ms-sum .is-pay b{display:inline-block;transform-origin:right bottom}
  .is-in .ms-sum .is-pay b{animation:ms-flash 420ms var(--ease-out) 1720ms}

  /* Поиск: находки встают по одной справа. */
  .is-in .ms-hit{animation:ms-fly 460ms cubic-bezier(.16,1,.3,1) calc(820ms + var(--i,0) * 120ms) backwards}
}

/* ── 18.10: расходы, вид страницы, ИИ-помощник ─────────────────────
   Те же правила: базовые правила — итог, завязка у .is-live
   .mr-card:not(.is-in), действие у .is-in; вход вещи — общий ms-stage. */

/* Расходы: месяц на листе — пришло, «Куда ушло» полосой по статьям,
   под полосой статьи с суммами, ниже налог по режиму. */
.ms-costs .ms-panel{width:256px;gap:7px;padding:12px 15px 11px}
.ms-costs .ms-line{font-size:12.5px}
.ms-went{display:flex;gap:2px;height:10px;margin:1px 0 0;border-radius:5px;overflow:hidden}
.ms-went i{width:var(--w);transform-origin:left;background:color-mix(in srgb,var(--ink) 18%,var(--card))}
.ms-went i:nth-child(1){background:var(--crest)}
.ms-went i:nth-child(2){background:color-mix(in srgb,var(--ink) 44%,var(--card))}
.ms-keys{display:flex;gap:12px;margin-top:-1px}
.ms-keys span{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.ms-keys span i{width:8px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--ink) 18%,var(--card))}
.ms-keys span:nth-child(1) i{background:var(--crest)}
.ms-keys span:nth-child(2) i{background:color-mix(in srgb,var(--ink) 44%,var(--card))}
.ms-tax{margin-top:2px}
.ms-tax b{color:var(--crest)}
/* Итог месяца: после статей и налога — что осталось, крупно. */
.ms-left{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px dashed var(--line)}
.ms-left span{font-size:12.5px;font-weight:650;color:var(--ink-2)}
.ms-left b{font-size:17px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;transform-origin:100% 50%}

/* Вид страницы: миниатюра страницы бронирования в трёх стилях продукта
   стопкой; под ней образцы, рамка выбора стоит на последнем. Цвета —
   самих стилей (widget-look.mjs): Бумага, Хвоя, Ночь с засечками. */
.ms-look{grid-template-rows:auto auto;place-content:center;gap:12px}
.ms-pages{display:grid;width:178px}
.ms-page{grid-area:1/1;display:grid;gap:6px;padding:8px 8px 10px;border-radius:14px;background:var(--card);color:var(--ink);box-shadow:var(--lift)}
.ms-photo{height:50px;border-radius:9px;background:linear-gradient(135deg,var(--sand),var(--rose))}
.ms-page b{font-size:13px;font-weight:750;letter-spacing:-.01em}
.ms-slots{display:flex;gap:4px}
.ms-slots i{flex:1;display:grid;place-items:center;height:20px;border-radius:6px;font-style:normal;font-size:10px;font-weight:650;background:var(--fill);color:var(--ink-2)}
.ms-slots i:last-child{background:var(--ink);color:var(--on-ink)}
.ms-page em{display:grid;place-items:center;height:26px;border-radius:8px;font-style:normal;font-size:11px;font-weight:700;background:var(--crest);color:#fff}
.ms-page[data-look="Хвоя"]{background:#EEF4EF;color:#1F3A2E}
.ms-page[data-look="Хвоя"] .ms-photo{background:linear-gradient(135deg,#CFE3D4,#8DB89A)}
.ms-page[data-look="Хвоя"] .ms-slots i{background:#DDE9E0;color:#2E5E4E}
.ms-page[data-look="Хвоя"] :is(.ms-slots i:last-child,em){background:#2E5E4E;color:#fff}
.ms-page[data-look="Ночь"]{background:#1E2024;color:#F1F2F3}
.ms-page[data-look="Ночь"] b{font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:0}
.ms-page[data-look="Ночь"] .ms-photo{background:linear-gradient(135deg,#3B4048,#262A30)}
.ms-page[data-look="Ночь"] .ms-slots i{background:#2C2F35;color:#C6CACE}
.ms-page[data-look="Ночь"] :is(.ms-slots i:last-child,em){background:#ECE8E0;color:#17181A}
.ms-looks{position:relative;display:flex;justify-self:center}
.ms-looks span{display:grid;justify-items:center;gap:4px;width:62px;font-size:10.5px;font-weight:650;color:var(--ink-3)}
.ms-looks span i{width:20px;height:20px;border-radius:50%;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line)}
.ms-looks span:nth-child(2) i{background:#2E5E4E}
.ms-looks span:nth-child(3) i{background:#1E2024}
.ms-looks u{position:absolute;left:17px;top:-4px;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 2px var(--ink);transform:translateX(124px)}

/* ChatGPT: окно разговора с ним. Шапка — «ChatGPT» и знак Tukelo
   «Tukelo подключён»; просьба владельца чернилами справа; строка
   обращения к Tukelo со знаком и галочкой — так ChatGPT показывает работу
   подключённой службы; ответ белым пузырём слева. */
.ms-ai{padding:0 14px}
.ms-chat{display:grid;gap:8px;width:272px;padding:11px 12px 12px;border-radius:16px;background:var(--card);box-shadow:var(--lift)}
.ms-chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:7px;border-bottom:1px solid var(--line-2)}
.ms-chat-head b{font-size:12.5px;font-weight:750}
.ms-chat-head span{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:650;color:var(--ink-3)}
.ms-head-mark{width:auto;height:13px}
.ms-ask{justify-self:end;max-width:208px;padding:7px 11px;border-radius:14px 14px 5px 14px;background:#1E2023;color:#F1F2F3;font-size:12px;font-weight:550;line-height:1.38}
[data-theme="dark"] .ms-ask{background:#55585E}
.ms-tool{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:650;color:var(--ink-2)}
.ms-tool-mark{flex:none;width:auto;height:15px}
.ms-tool-said{display:grid;flex:1;min-width:0}
.ms-tool-said em{grid-area:1/1;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-tool-said em:first-child{opacity:0}
.ms-tool-ok{display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:var(--ok);color:var(--tick-ink)}
.ms-tool-ok svg{width:9px;height:9px}
.ms-reply{justify-self:start;max-width:226px;padding:7px 11px;border-radius:14px 14px 14px 5px;background:var(--fill);font-size:12px;line-height:1.38;transform-origin:0 100%}

@media (prefers-reduced-motion:no-preference){
  @keyframes ms-look-ring{0%,38%{transform:translateX(0)}50%,78%{transform:translateX(62px)}90%,100%{transform:translateX(124px)}}
  @keyframes ms-bubble{from{opacity:0;transform:translateY(10px) scale(.94)}}

  /* Расходы: строки ложатся, полоса заполняется статья за статьёй, под
     ней встают статьи, налог ложится, итог «Осталось» выскакивает. */
  .is-live .mr-card:not(.is-in) :is(.ms-costs .ms-line,.ms-keys span,.ms-left){opacity:0}
  .is-live .mr-card:not(.is-in) .ms-went i{transform:scaleX(0)}
  .is-in .ms-costs .ms-line{animation:ms-drop 320ms var(--ease-out) calc(420ms + var(--i) * 160ms) backwards}
  .is-in .ms-costs .ms-tax{animation:ms-drop 320ms var(--ease-out) 1260ms backwards}
  .is-in .ms-went i{animation:ms-grow-x 460ms var(--ease-out) calc(760ms + var(--i) * 140ms) backwards}
  .is-in .ms-keys span{animation:ms-rise 360ms var(--ease-out) calc(840ms + var(--i) * 120ms) backwards}
  .is-in .ms-left{animation:ms-rise 420ms var(--ease-out) 1500ms backwards}
  .is-in .ms-left b{animation:ms-pop-big 520ms var(--pop) 1580ms backwards}

  /* Вид страницы: рамка едет по образцам, страница перекрашивается
     стилем за стилем. */
  .is-live .mr-card:not(.is-in) .ms-page:not(:first-child){opacity:0}
  .is-live .mr-card:not(.is-in) .ms-looks u{transform:none}
  .is-in .ms-looks u{animation:ms-look-ring 1700ms var(--ease-in-out) 320ms backwards}
  .is-in .ms-page[style="--i:1"]{animation:ms-fade 360ms ease-out 1120ms backwards}
  .is-in .ms-page[style="--i:2"]{animation:ms-fade 360ms ease-out 1860ms backwards}

  /* ChatGPT: окно встаёт, просьба уходит; ChatGPT обращается к Tukelo —
     знак качнулся, «проверяю субботу» сменяется «бронь записана», щёлкает
     галочка; приходит ответ. */
  @keyframes ms-said-a{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
  @keyframes ms-said-b{from{opacity:0;transform:translateY(4px)}}
  .is-live .mr-card:not(.is-in) :is(.ms-ask,.ms-tool,.ms-reply){opacity:0}
  .is-live .mr-card:not(.is-in) .ms-tool-ok{opacity:0;transform:scale(.6)}
  .is-in .ms-ask{animation:ms-bubble 440ms var(--ease-out) 520ms backwards;transform-origin:100% 100%}
  .is-in .ms-tool{animation:ms-rise 360ms var(--ease-out) 1000ms backwards}
  .is-in .ms-tool-mark{animation:ms-nudge 700ms var(--ease-in-out) 1060ms}
  .is-in .ms-tool-said em:first-child{animation:ms-said-a 640ms linear 1000ms both}
  .is-in .ms-tool-said em:last-child{animation:ms-said-b 320ms var(--ease-out) 1640ms backwards}
  .is-in .ms-tool-ok{animation:ms-pop-spring 440ms var(--pop) 1700ms backwards}
  .is-in .ms-reply{animation:ms-bubble 460ms var(--ease-out) 2000ms backwards}
}
}