/* Сцены: плеер (Stage) и UI-примитивы в языке референс-видео.
   Экран сцены тёмный (графит чуть светлее страницы), внутри живут белые окна настоящих программ.
   Цвет только в работе: синий = акцент интерфейса, зелёный = сработало, красный = потеря.
   Всё, что лежит прямо на тёмном экране (подписи, метки, таймеры, плитки созвона), берёт --st-*;
   всё внутри белых карточек берёт светлые токены экрана (--ink*, --line*, --blue).
   Любой текст в сцене не мельче 11px: все font-size через max(11px, …).
   Размеры внутри экрана масштабируются от --k (engine.js ставит от ширины экрана),
   подписи от --sh (высота экрана). Только transform/opacity/filter в анимациях. */

/* ---------- плеер ---------- */
.stage{
  /* тёмный экран: то, что лежит прямо на нём */
  --st-bg:#1B1B1B;--st-tile:#252525;--st-tile-2:#303030;
  --st-ink:#F2F2EF;--st-ink-2:#A8A8A3;--st-ink-3:#8A8A85;
  --st-hair:rgba(255,255,255,.08);--st-hair-2:rgba(255,255,255,.15);
  --st-blue:#7D95FF;--st-green:#4CC38A;--st-red:#F0726A; /* светлые оттенки: контраст на графите от 4.5:1 */
  /* точки на canvas (dots.js читает --blue/--green/... с canvas, см. .stage__dots) */
  --dot-blue:#6E86FA;--dot-green:#3DBE7E;--dot-red:#EE6A62;--dot-grey:#8A8A85;--dot-dim:#3E3E3B;
  /* белые окна внутри экрана: нейтральные серые, без тёплых оттенков */
  --sc-bar:#F6F6F5;--sc-fill:#F2F2F0;--sc-chat:#ECEEF1;--sc-red-ink:#B3312A;
  --sc-sh:0 1px 2px rgba(0,0,0,.35),0 18px 44px -14px rgba(0,0,0,.7);
  --sc-sh-sm:0 1px 2px rgba(0,0,0,.3),0 8px 22px -8px rgba(0,0,0,.55);
  --cap-ink:var(--st-ink);
  position:relative;width:100%;font-family:var(--font)}
.stage__screen{--k:1;--sw:1100px;--sh:688px;position:relative;aspect-ratio:16/10;
  background:radial-gradient(120% 90% at 50% 0%,#1F1F1F 0%,var(--st-bg) 62%);
  border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--st-hair);overflow:hidden;isolation:isolate}
.stage[data-tall] .stage__screen{aspect-ratio:4/5;border-radius:14px}
.stage__content,.stage__dots,.stage__ui{position:absolute;inset:0}
.stage__dots{z-index:0}.stage__ui{z-index:1}.stage__cap{z-index:3}
.stage__screen[data-dots-top] .stage__dots{z-index:2} /* точки поверх карточек: строки внутри таблиц и окон */
.stage__dots{width:100%;height:100%;--blue:var(--dot-blue);--green:var(--dot-green);--red:var(--dot-red);--ink-3:var(--dot-grey);--line-2:var(--dot-dim)}
.stage__ui,.stage__cap{pointer-events:none}

/* подпись: сверху по центру, как в видео */
.stage__cap{position:absolute;left:6%;right:6%;top:calc(var(--sh) * .078)}
.stage[data-tall] .stage__cap{left:4.5%;right:4.5%;top:calc(var(--sh) * .045)}
.sc-cap{position:absolute;inset:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:calc(var(--sh) * .016)}
/* подпись: тот же гротеск, что и на странице, плотный трекинг; акцент только цветом */
.sc-cap__main{font-family:var(--font);font-size:max(12px,calc(var(--sh) * .054));line-height:1.14;font-weight:500;letter-spacing:-.03em;
  color:var(--cap-ink);text-wrap:balance;max-width:25em;font-feature-settings:'kern' 1,'ss01' 1}
.stage[data-tall] .sc-cap__main{font-size:max(12px,calc(var(--sw) * .056));line-height:1.12}
.sc-cap__sub{font-size:max(13px,calc(var(--sh) * .025));line-height:1.4;color:var(--st-ink-2);letter-spacing:-.01em;
  text-wrap:balance;max-width:34em}
.stage[data-tall] .sc-cap__sub{font-size:max(13px,calc(var(--sw) * .037))}
.stage .kw{transition:none} /* base.css даёт .kw CSS-переходы; в сценах словами управляет GSAP */
.stage .kw-acc{color:var(--st-blue);font-weight:inherit;font-style:normal}
.stage .kw-nb{white-space:nowrap}
.stage .kw-acc--ok{color:var(--st-green)}
.stage .kw-acc--loss{color:var(--st-red)}

/* полоса управления под экраном: на тёмной странице, тонкие линии, белый прогресс */
.stage__bar{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--text,#F2F2EF)}
.stage__btn{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:transparent;
  color:var(--text,#F2F2EF);box-shadow:inset 0 0 0 1px var(--hair-2,rgba(255,255,255,.15));
  transition:transform var(--d-1) var(--ease-out),background-color var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-out)}
.stage__btn .sc-ic{width:15px;height:15px}
.stage__btn:active{transform:scale(.94)}
.stage__btn:focus-visible,.stage__chip:focus-visible{outline:2px solid var(--text,#F2F2EF);outline-offset:2px}
.stage__chapters{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px}
.stage__chapters::-webkit-scrollbar{display:none}
.stage__chip{position:relative;flex:1 1 0;min-width:7.5rem;max-width:18rem;height:36px;padding:0 14px 3px;border-radius:var(--r-pill);
  background:transparent;color:var(--text-3,#74746F);font-size:var(--t-micro);font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--hair,rgba(255,255,255,.08));
  transition:color var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-out),transform var(--d-1) var(--ease-out)}
.stage__chip:active{transform:scale(.97)}
.stage__chip[aria-current]{color:var(--text,#F2F2EF);box-shadow:inset 0 0 0 1px var(--hair-2,rgba(255,255,255,.15))}
.stage__chip-label{display:block;overflow:hidden;text-overflow:ellipsis}
.stage__chip-bar{position:absolute;left:14px;right:14px;bottom:6px;height:1px;border-radius:1px;background:var(--hair-2,rgba(255,255,255,.15));overflow:hidden}
.stage__chip-bar i{position:absolute;inset:0;background:var(--text,#F2F2EF);transform-origin:0 50%;transform:scaleX(0)}
.stage__chapters.is-bare{gap:4px}
.stage__chapters.is-bare .stage__chip{min-width:0;height:16px;padding:0;background:none;box-shadow:none}
.stage__chapters.is-bare .stage__chip-label{display:none}
.stage__chapters.is-bare .stage__chip-bar{left:0;right:0;bottom:7px;height:2px;background:var(--hair-2,rgba(255,255,255,.15))}
@media (hover:hover) and (pointer:fine){
  .stage__btn:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
  .stage__chip:hover{color:var(--text,#F2F2EF)}
}

/* ---------- иконки ---------- */
.sc-ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sc-ic *{vector-effect:non-scaling-stroke}

/* ---------- UI-примитивы: белые окна настоящих программ, нейтральная тень под тёмный экран ---------- */
.sc-card{position:relative;background:var(--paper);border-radius:calc(12px * var(--k,1));color:var(--ink);
  font-size:max(11px,calc(15px * var(--k,1)));line-height:1.35;letter-spacing:-.006em;box-shadow:var(--sc-sh)}
.sc-num{font-variant-numeric:tabular-nums}

.sc-ava{width:2.6em;height:2.6em;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:var(--paper)}
.sc-ava .sc-ic{width:52%;height:52%}
.sc-ava--soft{background:var(--blue-soft);color:var(--blue)}
.sc-ava--green{background:var(--green)}

/* документ / письмо */
.sc-doc{padding:1.2em 1.25em}
.sc-doc__head{display:flex;align-items:center;gap:.8em}
.sc-doc__title{font-size:max(11px,1.07em);font-weight:600;letter-spacing:-.018em;line-height:1.25}
.sc-doc__sub{font-size:max(11px,.87em);color:var(--ink-3);margin-top:.15em}
.sc-doc__lines{display:grid;gap:.7em;margin-top:1.1em;padding-top:1.1em;border-top:1px solid var(--line)}
.sc-doc__line{font-size:max(11px,.93em);color:var(--ink-2)}
.sc-skel{display:block;height:.55em;border-radius:99px;background:var(--line);transform-origin:0 50%}
.sc-doc__foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.75em;margin-top:1.1em;padding-top:1em;
  min-height:3.2em}
.sc-doc__rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}

/* чат / бот */
.sc-tg{display:flex;align-items:center;gap:.8em;padding:1em 1.1em}
.sc-tg__body{flex:1;min-width:0}
.sc-tg__title{font-size:max(11px,1.07em);font-weight:600;letter-spacing:-.018em;line-height:1.25}
.sc-tg__sub{position:relative;margin-top:.15em;font-size:max(11px,.93em);color:var(--ink-3)}
.sc-pill{flex:none;display:inline-flex;align-items:center;height:1.9em;padding:0 .8em;border-radius:.55em;background:var(--blue);
  color:var(--paper);font-size:max(11px,.87em);font-weight:550}
.sc-typing{position:absolute;left:0;top:50%;translate:0 -50%;display:inline-flex;gap:.25em;padding:.4em .55em;border-radius:99px;background:var(--sunk)}
.sc-typing i{width:.34em;height:.34em;border-radius:50%;background:var(--ink-3)}
.sc-msg{max-width:22em;padding:.6em .85em;border-radius:1.1em 1.1em 1.1em .35em;background:var(--paper);box-shadow:var(--sh-1);
  font-size:max(11px,calc(15px * var(--k,1)));line-height:1.4}
.sc-msg.is-out{background:var(--blue);color:var(--paper);border-radius:1.1em 1.1em .35em 1.1em}
.sc-msg__from{font-size:max(11px,.8em);font-weight:600;color:var(--blue);margin-bottom:.1em}
.sc-msg__time{float:right;margin:.45em 0 0 .7em;font-size:max(11px,.72em);color:var(--ink-3)}
.sc-msg.is-out .sc-msg__time{color:rgba(255,255,255,.7)}

/* тост: «Оплата · Подписка +990 ₽» */
.sc-toast{display:flex;align-items:center;gap:.8em;padding:.95em 1.2em .95em .95em}
.sc-toast__ic{position:relative;width:2.6em;height:2.6em;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:var(--paper)}
.sc-toast__ic .sc-ic{width:52%;height:52%}
.sc-toast.is-ok .sc-toast__ic{background:var(--green)}
.sc-toast.is-bad .sc-toast__ic{background:var(--red)}
.sc-toast__body{min-width:0}
.sc-toast__title{font-size:max(11px,.87em);color:var(--ink-2);line-height:1.3}
.sc-toast__value{margin-top:.12em;font-size:max(11px,1.07em);font-weight:600;letter-spacing:-.015em;line-height:1.3}
.sc-toast.is-ok .sc-toast__value{color:var(--green-ink)}
.sc-toast.is-bad .sc-toast__value{color:var(--sc-red-ink)}
.sc-halo{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--green);opacity:0}
.sc-tag{position:absolute;top:-.8em;right:1.1em;display:inline-flex;align-items:center;height:1.75em;padding:0 .75em;border-radius:99px;
  font-size:max(11px,.8em);font-weight:550;background:var(--paper);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line),var(--sc-sh-sm);white-space:nowrap}
.stage[data-tall] .sc-tag{top:auto;bottom:-.8em}
.sc-tag--ok{background:var(--green-soft);color:var(--green-ink);box-shadow:inset 0 0 0 1px rgba(23,130,74,.18),var(--sc-sh-sm)}

/* пилюля: «Канал», «Бот», «пн–пт, 9:00» */
.sc-chip{display:inline-flex;align-items:center;gap:.45em;height:2.2em;padding:0 .85em 0 .7em;border-radius:99px;background:var(--paper);
  color:var(--ink);font-size:max(11px,calc(14px * var(--k,1)));font-weight:500;letter-spacing:-.01em;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line),var(--sc-sh-sm)}
.sc-chip .sc-ic{width:1.15em;height:1.15em;color:var(--blue)}
.sc-chip--blue{background:var(--blue-soft);color:var(--blue-ink);box-shadow:var(--sc-sh-sm)}
.sc-card .sc-chip,.sc-card .sc-chip--blue,.sc-card .sc-chip--ok{box-shadow:none}
.sc-card .sc-chip:not([class*='--']){box-shadow:inset 0 0 0 1px var(--line)}

/* диск в центре кольца точек: чуть светлее экрана, крупная тонкая цифра */
.sc-disc{border-radius:50%;background:radial-gradient(circle at 50% 30%,#262626,#1F1F1F 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:inset 0 0 0 1px var(--st-hair)}
.sc-disc__num{font-size:max(11px,4.6em);font-weight:300;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--st-ink)}
.sc-disc__label{margin-top:.55em;max-width:78%;line-height:1.25;color:var(--st-ink-2);text-wrap:balance}

/* браузер, телефон, таблица, таймер */
.sc-browser{overflow:visible} /* окна не режут края: метка «пример» висит на кромке, углы скругляют сами части */
.sc-browser>div:first-child,.sc-win>div:first-child,.sc-ss>div:first-child,.sp-cal>div:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
.sc-browser>div:last-of-type,.sc-win>div:last-of-type,.sc-ss>div:last-of-type,.sp-cal>div:last-of-type{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.sc-win>div:last-of-type>.sl-tree{border-bottom-left-radius:inherit}
.sc-browser__bar{display:flex;align-items:center;gap:.4em;height:2.4em;padding:0 .9em;border-bottom:1px solid var(--line);background:var(--sc-bar)}
.sc-browser__bar>i,.sc-win__bar>i{width:.62em;height:.62em;border-radius:50%;background:#D9D9D6;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
/* «светофор» окна macOS */
.sc-browser__bar>i:nth-child(1),.sc-win__bar>i:nth-child(1){background:#FF5F57}
.sc-browser__bar>i:nth-child(2),.sc-win__bar>i:nth-child(2){background:#FEBC2E}
.sc-browser__bar>i:nth-child(3),.sc-win__bar>i:nth-child(3){background:#28C840}
.sc-browser__url{display:inline-flex;align-items:center;gap:.35em;margin:0 auto;padding:.2em .9em;border-radius:99px;background:var(--sunk);
  font-size:max(11px,.8em);color:var(--ink-2)}
.sc-browser__url .sc-ic{width:1em;height:1em}
.sc-browser__body{padding:1.2em}
.sc-phone{position:relative;width:calc(220px * var(--k,1));aspect-ratio:9/19;border-radius:calc(36px * var(--k,1));background:var(--paper);
  box-shadow:0 0 0 2px #3A3A3A,var(--sc-sh);overflow:hidden}
.sc-phone__notch{position:absolute;top:2.5%;left:50%;width:30%;height:3.6%;translate:-50% 0;border-radius:99px;background:var(--ink)}
.sc-phone__bar{position:absolute;bottom:1.6%;left:50%;width:34%;height:.6%;translate:-50% 0;border-radius:99px;background:var(--ink)}
.sc-phone__screen{position:absolute;inset:9% 6% 5%}
.sc-sheet{padding:.4em 0;font-size:max(11px,calc(14px * var(--k,1)))}
.sc-sheet__row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:1em;padding:.55em 1.1em;border-top:1px solid var(--line)}
.sc-sheet__row.is-head{border-top:0;color:var(--ink-3);font-size:max(11px,.87em)}
.sc-sheet__row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-timer{position:relative;width:calc(240px * var(--k,1));aspect-ratio:1}
.sc-timer svg{width:100%;height:100%;rotate:-90deg;fill:none;stroke-width:3}
/* таймер лежит прямо на тёмном экране; .is-card = белый диск (внутри сцены с окнами) */
.sc-timer__track{stroke:rgba(255,255,255,.1)}
.sc-timer__arc{stroke:var(--st-blue);stroke-linecap:round}
.sc-timer--loss .sc-timer__track{stroke:rgba(240,114,106,.16)}
.sc-timer--loss .sc-timer__arc{stroke:var(--st-red)}
.sc-timer--loss .sc-timer__num{color:var(--st-red)}
.sc-timer__num{position:absolute;inset:0;display:grid;place-items:center;font-size:max(11px,calc(58px * var(--k,1)));font-weight:300;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--st-ink)}
.sc-timer.is-card{border-radius:50%;background:var(--paper);box-shadow:var(--sc-sh)}
.sc-timer.is-card .sc-timer__track{stroke:var(--blue-soft)}
.sc-timer.is-card .sc-timer__arc{stroke:var(--blue)}
.sc-timer.is-card .sc-timer__num{color:var(--ink)}

/* отзыв */
.sc-review{padding:1em 1.1em 1.05em}
.sc-review__head{display:flex;align-items:center;gap:.7em}
.sc-review__head .sc-ava{width:2.3em;height:2.3em}
.sc-review__name{font-weight:600;letter-spacing:-.015em;line-height:1.25}
.sc-stars{display:inline-flex;gap:.12em;margin-top:.2em;color:var(--ink)}
.sc-stars svg{width:.95em;height:.95em;fill:var(--line-2)}
.sc-stars svg.is-on{fill:currentColor}
.sc-review.is-loss .sc-stars,.sc-review.is-bad .sc-stars{color:var(--red)}
.sc-review.is-ok .sc-stars{color:var(--green)}
.sc-review__text{margin-top:.7em;color:var(--ink-2);line-height:1.45}
.sc-review__skel{display:grid;gap:.55em;margin-top:.85em}
.sc-review__meta{margin-top:.6em;font-size:max(11px,.8em);color:var(--ink-3)}

/* метка «пример»: маленький нейтральный ярлык на краю карточки, читается и на белом, и на графите */
.sc-sample{position:absolute;top:-1em;z-index:2;right:1em;display:inline-flex;align-items:center;height:1.6em;padding:0 .6em;border-radius:.45em;
  font-size:max(11px,calc(11px * var(--k,1)));font-weight:500;letter-spacing:.005em;line-height:1;color:#BDBDB8;background:#2A2A29;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 2px 6px -2px rgba(0,0,0,.4);white-space:nowrap}

/* таблица Google Sheets */
.sc-ss{overflow:visible;font-size:max(11px,calc(13.5px * var(--k,1)))}
.sc-ss__bar{display:flex;align-items:center;gap:.5em;height:2.6em;padding:0 1em;font-weight:600;border-bottom:1px solid var(--line)}
.sc-ss__bar .sc-ic{color:var(--green);width:1.2em;height:1.2em}
.sc-ss__row{display:grid;gap:0;border-bottom:1px solid var(--line)}
.sc-ss__row:last-child{border-bottom:0}
.sc-ss__row>span{display:flex;align-items:center;min-width:0;height:2.35em;padding:0 .75em;border-left:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-ss__row>span:first-child{border-left:0}
.sc-ss__row.is-head{background:var(--sc-bar);color:var(--ink-3);font-size:max(11px,.9em)}
.sc-ss__row .sc-skel{height:.5em}

/* чек-лист, переключатель */
.sc-list{padding:.6em 1.1em}
.sc-list__item{display:flex;align-items:center;gap:.75em;padding:.62em 0;border-bottom:1px solid var(--line)}
.sc-list__item:last-child{border-bottom:0}
.sc-box{width:1.4em;height:1.4em;flex:none;border-radius:.45em;display:grid;place-items:center;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.sc-box .sc-ic{width:.95em;height:.95em;stroke-width:2.2;opacity:0}
.sc-toggle{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.9em 1.1em;font-weight:500}
.sc-switch{position:relative;width:2.6em;height:1.5em;flex:none;border-radius:99px;background:var(--line-2)}
.sc-switch i{position:absolute;left:.15em;top:.15em;width:1.2em;height:1.2em;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* окно приложения */
.sc-win{overflow:visible}
.sc-win__bar{position:relative;display:flex;align-items:center;gap:.4em;height:2.4em;padding:0 .9em;border-bottom:1px solid var(--line);background:var(--sc-bar)}
.sc-win__title{position:absolute;left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:.4em;font-size:max(11px,.82em);color:var(--ink-2);white-space:nowrap}
.sc-win__title .sc-ic{width:1.1em;height:1.1em}
.sc-win__body{padding:1em 1.1em}
.sc-win--code .sc-win__body{font-family:var(--mono);font-size:max(11px,.84em);line-height:1.6;color:var(--ink-2)}
.sc-code-line{white-space:pre-wrap}
.sc-code-line b{color:var(--blue);font-weight:500}
.is-typing::after{content:'';display:inline-block;width:.5em;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--blue);opacity:.7}

/* документ, печать, подпись */
.sc-paper{position:relative;display:flex;flex-direction:column;width:calc(150px * var(--k,1));aspect-ratio:1/1.414;padding:1.1em 1em;border-radius:.3em;
  background:var(--paper);box-shadow:0 0 0 1px rgba(0,0,0,.25),var(--sc-sh-sm);font-size:max(11px,calc(13px * var(--k,1)))}
.sc-paper__title{width:56%;height:.7em;margin-bottom:1.1em;background:var(--line-2)}
.sc-paper__name{margin:-.2em 0 .9em;font-weight:600;font-size:max(11px,1.1em);letter-spacing:-.01em;text-align:center;color:var(--ink)}
.sc-paper__lines{display:grid;gap:.6em}
.sc-paper__lines .sc-skel{height:.42em}
.sc-paper__foot{position:relative;margin-top:auto;height:3.2em}
.sc-paper__stamp,.sc-paper__sign{position:absolute;bottom:0}
.sc-paper__stamp{left:0}
.sc-paper__sign{right:0}
.sc-stamp svg{display:block;width:calc(46px * var(--k,1));height:calc(46px * var(--k,1));fill:none;stroke:var(--blue);stroke-width:1.6;opacity:.85}
.sc-sign svg{display:block;width:calc(64px * var(--k,1));height:calc(26px * var(--k,1));fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* кнопка-приглашение */
.sc-cta{display:inline-flex;align-items:center;gap:.7em;height:3.4em;padding:0 1.4em 0 .4em;border-radius:99px;background:var(--blue);color:#fff;
  font-size:max(11px,calc(17px * var(--k,1)));font-weight:550;letter-spacing:-.015em;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 28px -12px rgba(0,0,0,.7)}
.sc-cta img{width:2.6em;height:2.6em;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.sc-cta .sc-ic{width:1.15em;height:1.15em}

/* показатель с полоской */
.sc-meter{padding:.95em 1.1em 1.05em}
.sc-meter__row{display:flex;justify-content:space-between;align-items:baseline;gap:1em;color:var(--ink-2);font-size:max(11px,.93em)}
.sc-meter__row b{font-size:max(11px,1.5em);font-weight:400;letter-spacing:-.03em;color:var(--ink)}
.sc-meter__track{position:relative;height:.5em;margin-top:.65em;border-radius:99px;background:var(--sunk)}
.sc-meter__plan{position:absolute;top:-.35em;bottom:-.35em;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink)}
.sc-meter__track i{position:absolute;inset:0;border-radius:inherit;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}

/* папка, пост, участник, курсор */
.sc-folder{display:flex;align-items:center;gap:.6em;padding:.75em .95em;font-weight:500;font-size:max(11px,calc(14px * var(--k,1)));white-space:nowrap}
.sc-folder__ic{display:grid;place-items:center;width:2em;height:2em;border-radius:.6em;background:var(--blue-soft);color:var(--blue);flex:none}
.sc-folder__ic .sc-ic{width:1.15em;height:1.15em}
.sc-post{padding:.9em .95em 1em;font-size:max(11px,calc(14px * var(--k,1)))}
.sc-post__head{display:flex;align-items:center;gap:.6em}
.sc-post__head .sc-ava{width:2.2em;height:2.2em}
.sc-post__name{font-weight:600;letter-spacing:-.01em}
.sc-post__rubric{margin-left:auto;height:1.9em;font-size:max(11px,.86em)}
.sc-post__photo{display:grid;place-items:center;height:7.5em;margin-top:.8em;border-radius:.7em;background:var(--blue-soft);color:var(--blue)}
.sc-post__photo .sc-ic{width:2em;height:2em;opacity:.7}
.sc-post__text{margin-top:.75em;line-height:1.45;color:var(--ink-2);min-height:2.9em}
/* плитка участника созвона: тёмная, как в настоящем приложении видеосвязи */
.sc-person{position:relative;display:grid;place-items:center;border-radius:calc(12px * var(--k,1));background:var(--st-tile);color:var(--st-ink-2);
  box-shadow:inset 0 0 0 1px var(--st-hair)}
.sc-person.is-me{box-shadow:inset 0 0 0 1.5px var(--st-blue)}
.sc-person__ava{display:grid;place-items:center;width:42%;max-width:3em;aspect-ratio:1;border-radius:50%;background:var(--st-tile-2);color:var(--st-ink-2)}
.sc-person__ava .sc-ic{width:55%;height:55%}
.sc-person__name{position:absolute;left:.6em;bottom:.5em;font-size:max(11px,calc(11.5px * var(--k,1)));color:var(--st-ink-2)}
.sc-cursor{display:inline-flex;align-items:flex-start;gap:2px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.sc-cursor svg{width:calc(20px * var(--k,1));height:calc(20px * var(--k,1));fill:var(--ink);stroke:var(--paper);stroke-width:1.5;stroke-linejoin:round}
.sc-cursor__badge{margin-top:14px;padding:.2em .6em;border-radius:99px;background:var(--blue);color:var(--paper);font-size:max(11px,calc(12px * var(--k,1)));font-weight:560;white-space:nowrap}
.sc-chip--ok{background:var(--green-soft);color:var(--green-ink);box-shadow:var(--sc-sh-sm)}
.sc-chip--ok .sc-ic{color:inherit}
.sc-chip--bad{background:var(--red-soft);color:var(--sc-red-ink);box-shadow:var(--sc-sh-sm)}
.sc-chip--bad .sc-ic{color:inherit}
/* метка прямо на экране; внутри карточки серая по-светлому */
.sc-label{font-size:max(11px,calc(13px * var(--k,1)));color:var(--st-ink-2);white-space:nowrap;letter-spacing:-.01em}
.sc-label b{color:var(--st-ink);font-weight:600}
.sc-card .sc-label{color:var(--ink-3)}
.sc-card .sc-label b{color:var(--ink)}

/* сообщение бота */
.sc-bot{padding:1em 1.1em 1.05em}
.sc-bot__head{display:flex;align-items:center;gap:.75em}
.sc-bot__name{font-weight:600;letter-spacing:-.015em;line-height:1.25}
.sc-bot__sub{font-size:max(11px,.8em);color:var(--ink-3)}
.sc-bot__lines{display:grid;gap:.35em;margin-top:.8em;padding:.75em .9em;border-radius:.2em 1em 1em 1em;background:var(--sc-fill)}
.sc-bot__lines p{font-size:max(11px,.93em);line-height:1.4;color:var(--ink)}

/* сверка, строка-карточка */
.sc-cmp{padding:.45em .5em;font-size:max(11px,calc(14px * var(--k,1)))}
.sc-cmp__row{display:grid;grid-template-columns:1fr 1fr 7.2em;align-items:center;gap:1em;height:2.6em;padding:0 .8em;border-radius:.6em}
.sc-cmp__row.is-head{height:2.3em;color:var(--ink-3);font-size:max(11px,.9em)}
.sc-cmp__row .sc-skel{height:.5em}
.sc-cmp__ok{display:inline-flex;align-items:center;gap:.3em;justify-self:end;font-size:max(11px,.88em);font-weight:560;opacity:0;
  color:var(--green-ink)}
.sc-cmp__ok .sc-ic{width:1.05em;height:1.05em;stroke-width:2.2}
.sc-item{display:flex;align-items:center;gap:.8em;padding:.8em 1em;font-size:max(11px,calc(14.5px * var(--k,1)))}
.sc-item .sc-ava{width:2.4em;height:2.4em}
.sc-item__label{font-weight:560;letter-spacing:-.012em;line-height:1.25}
.sc-item__sub{font-size:max(11px,.86em);color:var(--ink-3)}
.sc-item.is-ok .sc-ava{background:var(--green-soft);color:var(--green)}
.sc-item.is-loss .sc-ava{background:var(--red-soft);color:var(--red)}


/* ---------- сцена «Агент для агентства» ---------- */
.sa-rate{display:inline-flex;align-items:baseline;gap:.4em;color:var(--ink-3);font-size:max(11px,.93em);white-space:nowrap}
.sa-rate b{font-weight:600;color:var(--ink);font-size:max(11px,1.15em);letter-spacing:-.02em}
.sa-stack>*{width:100%}
.stage[data-tall] .sc-folder{font-size:max(11px,calc(12.5px * var(--k,1)));gap:.5em;padding:.7em .75em}
/* программы: каталог, админка, приложение учёта, календарь */
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8em}
.sp-prod{display:grid;gap:.45em;font-size:max(11px,.9em);font-weight:500;line-height:1.25}
.sp-prod__img{display:grid;place-items:center;aspect-ratio:4/3;border-radius:.6em;background:var(--sunk);color:var(--ink-3)}
.sp-prod__img .sc-ic{width:1.6em;height:1.6em;opacity:.7}
.sp-prod .sc-skel{width:45%;height:.5em}
.sp-code{display:grid;gap:.6em}
.sp-code .sc-skel{height:.5em;background:var(--line)}
.sp-admin{padding:1.05em 1.15em;font-size:max(11px,calc(14.5px * var(--k,1)))}
.sp-admin__title{font-weight:600;letter-spacing:-.015em;margin-bottom:.8em}
.sp-admin__title span{color:var(--ink-3);font-weight:500}
.sp-frow{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.6em 0;border-top:1px solid var(--line);color:var(--ink-3)}
.sp-select{position:relative;display:inline-grid;align-items:center;min-width:6em;height:2.1em;padding:0 .8em;border-radius:.6em;background:var(--sc-fill);color:var(--ink);font-weight:500}
.sp-select b{grid-area:1/1;font-weight:500}
.sp-frow .sc-skel{width:40%;height:.5em}
.sp-admin .sm-btn{margin-top:.8em;width:100%}
.sp-swatch{display:inline-block;width:.9em;height:.9em;border-radius:50%;vertical-align:-.1em;margin-right:.45em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sp-shop{padding:.9em;font-size:max(11px,calc(14px * var(--k,1)))}
.sp-shop .sp-prod__img{aspect-ratio:16/10}
.sp-shop__name{margin-top:.7em;font-weight:600}
.stage[data-tall] .sp-shop{display:grid;grid-template-columns:6.5em 1fr;column-gap:1em;align-items:center}
.stage[data-tall] .sp-shop .sp-prod__img{aspect-ratio:4/3}
.stage[data-tall] .sp-shop__name{margin-top:0}
.sp-shop__color{position:relative;height:1.4em;margin-top:.25em;color:var(--ink-2);font-size:max(11px,.93em)}
.sp-shop__color>span{position:absolute;left:0;top:0;white-space:nowrap}
.sp-app{padding:.9em;font-size:max(11px,calc(14px * var(--k,1)));border-radius:calc(24px * var(--k,1))}
.sp-tabs{display:grid;grid-template-columns:repeat(4,auto);gap:.25em;padding:.25em;border-radius:.8em;background:var(--sunk);font-size:max(11px,.86em);text-align:center}
.sp-tabs span{padding:.45em .3em;border-radius:.6em;color:var(--ink-2);white-space:nowrap}
.sp-tabs span.is-on{background:var(--paper);color:var(--ink);font-weight:560;box-shadow:var(--sh-1)}
.sp-rows{display:grid;gap:.55em;margin-top:.8em}
.sp-row{display:flex;align-items:center;gap:.7em;padding:.7em .75em;border-radius:.8em;background:var(--sc-fill)}
.sp-row .sc-ava{width:2.1em;height:2.1em}
.sp-row .sc-skel{height:.5em}
.sp-row.is-due{background:var(--blue-soft)}
.sp-row .sm-btn{flex:none;height:2em;padding:0 .8em;font-size:max(11px,.86em)}
.sp-cal{overflow:visible;font-size:max(11px,calc(13px * var(--k,1)))}
.sp-cal__bar{display:flex;align-items:center;gap:.5em;height:2.6em;padding:0 1em;font-weight:600;border-bottom:1px solid var(--line)}
.sp-cal__bar .sc-ic{color:var(--blue)}
.sp-cal__grid{position:relative;display:grid;grid-template-columns:repeat(7,1fr)}
.sp-cal__grid>span{height:2.3em;border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:.35em .45em;color:var(--ink-3);font-size:max(11px,.86em)}
.sp-cal__grid>span:nth-child(7n+1){border-left:0}
.sp-cal__ev{position:absolute;display:flex;align-items:center;padding:0 .6em;border-radius:.45em;background:var(--blue);color:var(--paper);font-size:max(11px,.86em);font-weight:560;white-space:nowrap;overflow:hidden}
.sd-run{display:flex;align-items:center;gap:1.1em}
.sd-run .sc-paper{flex:none}
.sd-count{display:grid;gap:.2em}
.sd-count b{font-size:max(11px,2.6em);font-weight:300;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.sd-count span{color:var(--ink-3);font-size:max(11px,.93em)}
.sc-paper.is-wide{aspect-ratio:1.414/1;align-items:center;text-align:center}
.sc-paper.is-wide .sc-paper__title{margin:0 auto .8em}
.sc-paper.is-wide .sc-paper__lines{width:70%}
.sc-paper.is-wide .sc-paper__lines .sc-skel{margin:0 auto}
.sd-slot{display:inline-flex;align-items:center;justify-content:center;min-width:60%;height:1.9em;margin:-.1em 0 .8em;padding:0 .8em;border-radius:.4em;
  border:1.5px dashed var(--line-2);color:var(--ink-3);font-size:max(11px,1.05em);font-weight:500}
.sd-slot.is-name{border:0;color:var(--ink);font-weight:600;font-size:max(11px,1.15em)}
.sd-blender{position:relative;display:grid;place-items:center;height:12em;background:var(--sc-fill)}
.sd-blender svg{width:11em;height:11em;fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-linejoin:round}
.sd-blender svg .dim{stroke:var(--blue);stroke-width:1.4}
.sd-note{font-size:max(11px,calc(13px * var(--k,1)));color:var(--st-ink-2);white-space:nowrap}
.sl-call{display:grid;grid-template-columns:9em 1fr;min-height:13em;font-size:max(11px,calc(13px * var(--k,1)))}
.sl-tree{display:grid;align-content:start;gap:.55em;padding:.9em .9em;border-right:1px solid var(--line);background:var(--sc-bar)}
.sl-tree .sc-skel{height:.45em}
.sl-ed{display:grid;align-content:start;gap:.6em;padding:.9em 1em}
.sl-ed .sc-skel{height:.45em}
.sl-ed .sc-skel.is-blue{background:var(--blue-soft)}
.sl-tile{position:relative;display:grid;place-items:center;border-radius:calc(12px * var(--k,1));background:var(--st-tile);color:var(--st-ink-2);
  box-shadow:inset 0 0 0 1px var(--st-hair)}
.sl-tile .sc-person__ava{width:3em;max-width:none}
.sl-tile .sc-person__name{left:.75em;bottom:.6em}
.sl-share{position:absolute;right:.9em;top:50%;translate:0 -50%;display:inline-flex;align-items:center;gap:.4em;font-size:max(11px,calc(11.5px * var(--k,1)));color:var(--ink-3)}
.sl-share::before{content:'';width:.5em;height:.5em;border-radius:50%;background:var(--green)}
.stage[data-tall] .sl-share{display:none}
.sl-badge{display:inline-flex;align-items:center;gap:.4em;padding:.45em .75em;border-radius:.6em;background:var(--paper);box-shadow:var(--sc-sh-sm);
  font-size:max(11px,calc(13px * var(--k,1)));font-weight:560;line-height:1.25;color:var(--ink)}
.sl-badge .sc-ic{width:1.15em;height:1.15em;color:var(--green)}
.sl-chat{overflow:hidden;font-size:max(11px,calc(14px * var(--k,1)))}
.sl-chat__head{display:flex;align-items:center;gap:.7em;padding:.8em 1em;border-bottom:1px solid var(--line)}
.sl-chat__head img{width:2.5em;height:2.5em;border-radius:50%;object-fit:cover}
.sl-chat__name{font-weight:600;letter-spacing:-.015em}
.sl-chat__sub{font-size:max(11px,.82em);color:var(--blue-ink)}
.sl-chat__body{display:grid;gap:.6em;padding:1em;background:var(--sc-chat)}
.sl-bub{display:grid;gap:.45em;width:62%;padding:.75em .9em;border-radius:1em 1em 1em .3em;background:var(--paper);box-shadow:0 1px 1px rgba(0,0,0,.08)}
.sl-bub.is-me{justify-self:end;border-radius:1em 1em .3em 1em;background:var(--blue-soft)}
.sl-bub .sc-skel{height:.45em}
.sl-bub.is-me .sc-skel{background:#C9D4FB}
/* легенда: те же цвета, что и точки на canvas */
.sp-key{display:inline-block;width:.62em;height:.62em;margin:0 .4em 0 0;border-radius:50%;background:var(--dot-blue);vertical-align:.02em}
.sp-key.is-small{width:.36em;height:.36em;margin-left:1.1em;background:var(--dot-grey);vertical-align:.12em}
.sp-big{font-size:max(11px,calc(18px * var(--k,1)));padding:1.2em 1.35em}
.sp-big .sc-review__text{font-size:max(11px,1.15em);color:var(--ink)}
.sp-num{position:absolute;font-size:max(11px,calc(12px * var(--k,1)));color:var(--st-ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-label .sc-ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;color:var(--st-ink-2)}
.sc-card .sc-label .sc-ic{color:var(--blue)}
.sct-sep{margin:0 .35em;color:var(--st-ink-3)}
.sct-ok{margin-left:auto;display:grid;place-items:center;width:1.6em;height:1.6em;flex:none;border-radius:50%;background:var(--green);color:var(--paper)}
.sct-ok .sc-ic{width:1em;height:1em;stroke-width:2.4}
.sc-item.is-compact{gap:.5em;padding:.6em .65em;font-size:max(11px,calc(13px * var(--k,1)))}
.sc-item.is-compact .sc-ava{width:2em;height:2em}
.sc-item.is-compact .sct-ok{width:1.4em;height:1.4em}
.sct-quote{display:flex;gap:.8em;align-items:flex-start;padding:1.05em 1.1em;font-size:max(11px,calc(14px * var(--k,1)))}
.sct-quote>.sc-ic{flex:none;margin-top:.05em;color:var(--ink-3)}
.sct-quote__lines{flex:1;display:grid;gap:.65em}
.sct-quote__val{display:flex;align-items:center;gap:.5em}
.sct-quote__val b{padding:.1em .5em;border-radius:.45em;font-size:max(11px,1.08em);font-weight:600;white-space:nowrap}
.sm-five{display:flex;flex-direction:column;align-items:flex-start;gap:.7em;padding:.9em 1em;font-size:max(11px,calc(14px * var(--k,1)))}
.sm-five .sc-stars{font-size:max(11px,1.05em);margin:0}
.sm-five .sc-skel{width:100%;height:.5em}
.sm-five .sc-chip{height:1.9em;font-size:max(11px,.86em);padding:0 .7em 0 .55em}
.stage[data-tall] .sm-five{flex-direction:row;align-items:center;gap:.8em;padding:.6em .8em}
.stage[data-tall] .sm-five .sc-skel{flex:1}
.sm-btns{display:flex;gap:.5em;margin-top:.8em}
.sm-btn{flex:1;display:grid;place-items:center;height:2.4em;border-radius:.7em;background:var(--sunk);color:var(--ink);font-weight:560;font-size:max(11px,.93em)}
.sm-btn.is-main{background:var(--blue);color:var(--paper)}
.sm-month{position:absolute;font-size:max(11px,calc(13px * var(--k,1)));color:var(--st-ink-2);text-align:center;white-space:nowrap}
.sr-alert{height:2.5em;padding:0 1em 0 .85em;font-size:max(11px,calc(15px * var(--k,1)));font-weight:560}
.sa-field{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-top:.95em;padding:.6em .8em;border-radius:.65em;background:var(--sc-fill)}
.sa-field span{color:var(--ink-3);font-size:max(11px,.87em);white-space:nowrap}
.sa-field b{font-family:var(--mono);font-weight:500;font-size:max(11px,.85em);color:var(--blue-ink);white-space:nowrap}
.sa-first{margin-top:.85em;color:var(--ink-2);line-height:1.45;font-size:max(11px,.93em)}
.sa-sched{display:flex;align-items:center;gap:.8em;padding:.75em .9em}
.sa-sched .sc-ava{width:2.2em;height:2.2em}
.sa-sched .sa-rate{font-size:max(11px,1em)}
.sc-disc__label:has(.sc-ic){display:inline-flex;align-items:center;white-space:nowrap}
.sc-disc__label .sc-ic{width:1.05em;height:1.05em;margin-right:.3em;vertical-align:-.17em;color:var(--green)}

/* слой карточек: всё позиционирует сцена (left/top в px). Последним, чтобы перебить position у примитивов */
.stage__ui>*,.sc-layer>*{position:absolute;left:0;top:0}