/* The landing at the platform's own address (15.910): the first screen moved by the scroll (--p, 0…1, set by
   landing.js), then the stations (15.1177, 15.1179; stations.js) — a part of the program a screen: its mark, its words,
   its functions with pictures and a device with the program itself playing; the scroll switches the stations; the
   tariff builder (15.921). The program's tokens and parts throughout. */

/* 15.919 («Лендинг не пролистывается»): the program's body holds the page still for its own screens — the landing
   scrolls as a page: the root scrolls down, never sideways, the body is not a scroller; 15.1177 («прокрутка просто
   будет переключать "станции", на которых останавливается камера»): the scroll stops at a station's start */
html:has(body.ld) { height: auto; overflow-x: hidden; overflow-y: auto; scroll-behavior: smooth; }
/* 15.939 («убрать выделения»): as in the program, text is not selected — only fields are */
body.ld { height: auto; overflow: visible; }

.ld {
  --ld-wide: 1180px; /* вне шкалы: the page's measure */
  --ld-gutter: var(--sp-300);
  --ld-band: calc(var(--sp-600) * 2.5);
  --ld-h1: calc(var(--fs-num-xl) * 1.5);
  --ld-h2: var(--fs-num-xl);
  --ld-say: var(--fs-l);
  --ld-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}
.ld-wrap { width: 100%; max-width: var(--ld-wide); margin: 0 auto; padding-inline: var(--ld-gutter); box-sizing: border-box; }
.ld h1, .ld h2, .ld h3 { font-family: var(--font-h); color: var(--ink); margin: 0; text-wrap: balance; }
.ld h1 { font-size: var(--ld-h1); line-height: 1.04; font-weight: var(--fw-bold); letter-spacing: -.03em; }
.ld h2 { font-size: var(--ld-h2); line-height: 1.08; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.ld h3 { font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-semi); }
.ld p { margin: 0; color: var(--ink2); }
.ld-lead { font-size: var(--ld-say); line-height: 1.5; max-width: 52ch; color: var(--ink2); }
.ld-big { height: var(--h-field); padding-inline: var(--sp-300); font-size: var(--fs-l); }
a.btn { text-decoration: none; }
.ld-dim { color: var(--ink3); }
.ld-sign { flex: none; display: inline-grid; place-items: center; width: var(--h-field); height: var(--h-field);
  border-radius: var(--r); background: var(--acc-weak); color: var(--acc-ink); }
.ld-sign-good { width: var(--sp-600); height: var(--sp-600); border-radius: 50%; }
.ld-band { padding-block: var(--ld-band); }
/* 15.926 («не забывай про отступы»): the spacing is declared by the containers */
.ld-stack { display: flex; flex-direction: column; gap: var(--sp-600); }
.ld-head { display: flex; flex-direction: column; gap: var(--sp-200); }

/* ─── the header, translucent over the stations ───────────────────────────────────────────────────────────── */
.ld-top { position: sticky; top: 0; z-index: var(--z-drawer);
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(1.8) blur(var(--sp-250));
  border-bottom: var(--bw) solid color-mix(in srgb, var(--line) 60%, transparent); padding-top: env(safe-area-inset-top, 0px); }
.ld-top-row { display: flex; align-items: center; gap: var(--sp-300); height: var(--topbar-h); }
.ld-logo { display: flex; color: var(--ink); height: var(--sp-300); }
.ld-logo svg, .ld-foot-logo svg { height: 100%; width: auto; }
.ld-nav { display: flex; gap: var(--sp-300); margin-right: auto; }
.ld-nav a { color: var(--ink2); text-decoration: none; font-size: var(--fs); transition: color var(--dur-pop); }
.ld-nav a:hover { color: var(--ink); }
.ld-top-acts { display: flex; align-items: center; gap: var(--sp-100); }

/* ─── the first screen: tall as --len screens, its picture held while scrolled through ─────────────────────── */
.ld-scene { position: relative; height: calc(var(--len) * 100svh); --p: 0; }
.ld-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: start; }
.ld-hero-stage { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; }
.ld-hero-stage .login-mesh { opacity: .7; }
.ld-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-300);
  text-align: center; padding: calc(var(--ld-top) + var(--sp-500)) var(--ld-gutter) 0;
  opacity: calc(1 - var(--p) * 1.6); transform: translateY(calc(var(--p) * -12svh)); }
.ld-hero-text .ld-lead { margin: 0 auto; }
.ld-hero-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-150); }
/* the window stands below the buttons with the page's large gap and rises by the text's height (--rise) */
.ld-hero-app { position: relative; z-index: 2; width: min(calc(100% - var(--ld-gutter) * 2), var(--ld-wide));
  margin-top: var(--sp-600); transform-origin: 50% 0;
  transform: translateY(calc(var(--p) * (var(--rise, 40svh) + var(--sp-600) - var(--ld-top)) * -1))
             scale(calc(.86 + var(--p) * .14)); }

/* 15.1180: DEOS's column on an app's tile, as an iPhone's icon — the tile a dark stone of its own in both themes (an
   icon's ground is its drawing, not the page's), the column nearer than the tile, the light sliding over it as it
   leans; the shadow under it breathes with its float */
.ld-icon { --icon-ground: #232733; --icon-ground-2: #14161d; /* вне шкалы: the icon's own stone */
  /* 15.1188 («я же говорил как в обсидиане большо»): as large as Obsidian's */
  position: relative; width: calc(var(--sp-600) * 4.25); aspect-ratio: 1; perspective: 1200px; /* вне шкалы: the icon's depth */
  margin-bottom: var(--sp-100); }
.ld-icon-body { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateY(calc(var(--float, 0px) * -1)) rotateX(var(--turn-x, 0deg)) rotateY(var(--turn-y, 0deg)); }
.ld-icon-tile { position: absolute; inset: 0; overflow: hidden;
  border-radius: 22.5%; /* вне шкалы: an app icon's corner, a share of its side */
  background: radial-gradient(120% 100% at 28% 12%, var(--icon-ground), var(--icon-ground-2) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .06),
              0 var(--sp-300) var(--sp-500) rgba(8, 10, 18, .32); }
.ld-icon-gloss { position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent calc(var(--gloss, 50%) - 30%), rgba(255, 255, 255, .13) var(--gloss, 50%),
                              transparent calc(var(--gloss, 50%) + 30%)); }
.ld-icon-mark { position: absolute; left: 50%; top: 50%; height: 60%; width: auto;
  transform: translate(-50%, -50%) translateZ(10px); /* вне шкалы: the column's distance over its tile */
  filter: drop-shadow(0 var(--sp-100) var(--sp-150) rgba(0, 0, 0, .5)); }
.ld-icon-shadow { position: absolute; left: 14%; right: 14%; bottom: -16%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 10, 18, .28), transparent);
  transform: scale(calc(1 - var(--lift, 0) * .08)); opacity: calc(.9 - var(--lift, 0) * .25); }

/* the program in a window */
.ld-app { display: grid; grid-template-columns: 200px minmax(0, 1fr); /* вне шкалы: the window's menu */
  height: min(640px, 76svh); background: var(--bg); border: var(--bw) solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-overlay), 0 var(--sp-500) calc(var(--sp-600) * 2) color-mix(in srgb, var(--ink) 18%, transparent); }
.ld-app-nav { display: flex; flex-direction: column; gap: var(--sp-050); padding: var(--sp-200) var(--sp-150);
  border-right: var(--bw) solid var(--line); background: var(--card); }
.ld-app-item { display: flex; align-items: center; gap: var(--sp-150); height: var(--h-field-sm); padding-inline: var(--sp-150);
  border: 0; border-radius: var(--r-s); background: none; color: var(--ink2); font: inherit; text-align: left; cursor: pointer; }
.ld-app-item:hover { background: var(--a-100); color: var(--ink); }
.ld-app-item.on { background: var(--acc-weak); color: var(--acc-ink); }
.ld-app-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ld-app-top { display: flex; align-items: center; gap: var(--sp-300); height: var(--topbar-h); padding-inline: var(--sp-300);
  border-bottom: var(--bw) solid var(--line); }
.ld-app-title { font-family: var(--font-h); font-weight: var(--fw-semi); font-size: var(--fs-l); }
.ld-app-search { display: flex; align-items: center; gap: var(--sp-100); flex: 0 1 280px; height: var(--h-btn); /* вне шкалы: the search field */
  padding-inline: var(--sp-150); border-radius: var(--r-s); background: var(--a-100); color: var(--ink3); margin-right: auto; }
.ld-app-body { flex: 1; min-height: 0; overflow: hidden; padding: var(--sp-300); }
.ld-app-screen { animation: ld-in var(--dur-zoom) var(--ease-out); }
@keyframes ld-in { from { opacity: 0; transform: translateY(var(--sp-150)); } }
.ld-greet { font-family: var(--font-h); font-size: var(--fs-num-l); font-weight: var(--fw-bold); margin-bottom: var(--sp-300); }
.ld-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.ld-tile, .ld-panel { padding: var(--sp-200); background: var(--card); border-radius: var(--r-l); min-width: 0; }
.ld-tile-l, .ld-panel-h { color: var(--ink3); font-size: var(--fs-s); display: flex; align-items: center; gap: var(--sp-075); }
.ld-panel-h { margin-bottom: var(--sp-150); }
.ld-tile-n { font-family: var(--font-h); font-size: var(--fs-num); font-weight: var(--fw-bold); margin-block: var(--sp-100); }
.ld-tile-d { color: var(--acc-ink); font-size: var(--fs-s); }
.ld-dash-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gap); }
.ld-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-100); align-items: end;
  height: 140px; /* вне шкалы: the chart's height */ }
.ld-bar { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: var(--sp-075); height: 100%; }
.ld-bar i { width: 100%; height: calc(var(--h) * 100%); border-radius: var(--r-xs); background: var(--acc);
  animation: ld-grow .6s var(--ease-out); transform-origin: bottom; }
@keyframes ld-grow { from { transform: scaleY(0); } }
.ld-bar span { color: var(--ink3); font-size: var(--fs-xs); }
.ld-rows { display: flex; flex-direction: column; }
.ld-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-200); align-items: baseline;
  padding-block: var(--sp-100); border-bottom: var(--bw) solid var(--line); }
.ld-row > :first-child:nth-last-child(2) { grid-column: 1 / 3; }
.ld-orders { gap: var(--sp-050); }
/* 15.1165 («вертикалить вот так вот текст нельзя»): a narrow window never sets a word as a column of letters */
.ld-order { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-100) var(--sp-200); padding: var(--sp-150) var(--sp-200);
  background: var(--card); border-radius: var(--r-l); }
.ld-order-ico { flex: none; display: grid; place-items: center; width: var(--h-btn); height: var(--h-btn);
  border-radius: 50%; background: var(--a-100); color: var(--ink2); }
.ld-order-main { flex: 1 1 11em; min-width: 0; }
.ld-order-name { font-weight: var(--fw-med); }
.ld-order-sum { flex: none; }
.ld-live { cursor: default; }
.ld-live .orp-dot, .ld-dot { background: var(--acc); animation: orp-beat 1.6s ease-in-out infinite; }
.ld-dot { flex: none; width: var(--sp-075); height: var(--sp-075); border-radius: 50%; }

/* ─── a station: one screen, its own lights wandering behind ─────────────────────────────────────────────── */
.ld-station { --tone: var(--acc-solid); --glow-a: var(--acc); --glow-b: var(--tag-teal);
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; min-height: 100svh;
  display: grid; align-items: center; padding-block: calc(var(--ld-top) + var(--sp-300)) var(--sp-400); }
.ld-tone-warm { --tone: color-mix(in srgb, var(--tag-orange) 84%, #000); --glow-a: var(--tag-orange); --glow-b: var(--tag-rose); }
.ld-tone-info { --tone: var(--tag-blue); --glow-a: var(--tag-blue); --glow-b: var(--tag-sky); }
.ld-tone-echo { --tone: var(--echo-2); --glow-a: var(--echo-1); --glow-b: var(--echo-3); }
.ld-tone-atom { --tone: var(--atom-3); --glow-a: var(--atom-2); --glow-b: var(--tag-teal); }
.ld-tone-ares { --tone: var(--tag-slate); --glow-a: var(--tag-slate); --glow-b: var(--tag-blue); }
/* Star keeps its night (15.922: «сначала затемнение, а потом загорается небо и звёзды на весь экран») */
.ld-tone-night { --tone: var(--star-acc-solid); --glow-a: var(--star-1); --glow-b: var(--star-3); background: var(--star-night); }
.ld-tone-night h2 { color: var(--star-ink); }
.ld-tone-night .ld-lead, .ld-tone-night .ld-feat-words > span { color: var(--star-ink-2); }
.ld-tone-night .ld-feat-words b { color: var(--star-ink); }
.ld-tone-night .ld-screen { --acc: var(--star-2); --acc-solid: var(--star-acc-solid); --acc-weak: var(--star-acc-weak);
  --acc-ink: var(--star-acc-ink); }
.ld-station-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
/* 15.1177 («движущийся разноцветный фон, который движется при прокрутке… Пусть движется сам»): three soft lights of
   the station's colours drifting by themselves, slowly, whatever the scroll */
.ld-glows { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ld-glows i { position: absolute; width: 56vmax; aspect-ratio: 1; border-radius: 50%; opacity: .22;
  background: radial-gradient(closest-side, var(--glow-a), transparent); will-change: transform; }
.ld-glows i:nth-child(1) { left: -14vmax; top: -18vmax; animation: ld-drift-a 26s ease-in-out infinite alternate; }
.ld-glows i:nth-child(2) { right: -18vmax; bottom: -22vmax; background: radial-gradient(closest-side, var(--glow-b), transparent);
  animation: ld-drift-b 31s ease-in-out infinite alternate; }
.ld-glows i:nth-child(3) { left: 38%; top: 30%; width: 34vmax; opacity: .14; animation: ld-drift-c 23s ease-in-out infinite alternate; }
.ld-tone-night .ld-glows i { opacity: .3; }
@keyframes ld-drift-a { to { transform: translate(22vmax, 16vmax) scale(1.15); } }
@keyframes ld-drift-b { to { transform: translate(-24vmax, -12vmax) scale(.9); } }
@keyframes ld-drift-c { 50% { transform: translate(-16vmax, 10vmax) scale(1.2); } to { transform: translate(12vmax, -8vmax); } }

.ld-station-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-600); align-items: center; }
/* the device keeps the wider column on either side */
.ld-station-grid.ld-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ld-flip .ld-station-text { order: 2; }
.ld-station h2 { font-size: calc(var(--ld-h2) * .86); }
.ld-station-text { display: flex; flex-direction: column; gap: var(--sp-250); min-width: 0; }
.ld-station-mark { display: flex; align-items: center; min-height: var(--sp-500); color: var(--ink); }
.ld-tone-night .ld-station-mark { color: var(--star-ink); }
.ld-station-pic { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-200); }
/* 15.1193: the words under a demonstration's screen — small, quiet, centred under it */
/* 15.1194 («можно же было шире сделать, под компьютером»; «не упереть влево, а сделать слева направо»): across the
   device's whole width, from its left edge to its right — one line under a computer */
.ld .ld-demo-note { margin: var(--sp-200) 0 0; color: var(--ink3); font-size: var(--fs-xs); line-height: var(--lh-s); text-align: center; }
.ld-tone-night .ld-demo-note, .ld-tv-night .ld-demo-note { color: var(--star-ink-2); }
.ld-hero-app .ld-demo-note { margin-top: var(--sp-150); }
.ld-tv .ld-demo-note { font-size: var(--fs-s); }
/* a part without a logo of its own: its sign on a tile, as an app's, and its name */
.ld-app-mark { display: flex; align-items: center; gap: var(--sp-150); }
.ld-app-mark-tile { flex: none; display: grid; place-items: center; width: var(--sp-500); height: var(--sp-500); }
/* 15.1219 («с градиентами, более глубокие, как у эппл»), 15.1231 («зачем такие скевоморфичные устаревшие? сделай модные
   новые красивые»): no glossy tile — a pane of frosted glass laid over a shape of the part's colour, the colour running
   from its light shade to its second hue and peeking out at the top left; the glass's rim lit, the sign white over it */
.ld-app-mark-tile, .ld-way-pic { position: relative; isolation: isolate; border-radius: 30%; color: var(--ink-on-dark); }
.ld-app-mark-tile::before, .ld-way-pic::before { content: ""; position: absolute; z-index: -1; left: -12%; top: -12%;
  width: 96%; height: 96%; border-radius: 34%; rotate: -8deg;
  background: linear-gradient(145deg, color-mix(in srgb, var(--glow-a) 80%, #fff), var(--glow-a) 45%, var(--glow-b)); }
.ld-app-mark-tile::after, .ld-way-pic::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .14));
  backdrop-filter: blur(4px) saturate(1.5);
  box-shadow: inset 0 0 0 var(--bw) rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .55),
              0 var(--sp-150) var(--sp-300) calc(var(--sp-150) * -1) color-mix(in srgb, var(--glow-b) 70%, transparent); }
.ld-app-mark-tile svg, .ld-way-pic svg { position: relative; filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--glow-b) 50%, #000)); }
.ld-app-mark b { font-family: var(--font-h); font-size: var(--fs-h); font-weight: var(--fw-semi); }
/* 15.1179 («описание функционала С ГРАФИКОЙ»): the functions, each with its picture on the station's colour */
.ld-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-200); }
.ld-feat { display: flex; align-items: center; gap: var(--sp-200); }
/* the functions' pictures — quieter: a soft tint of the mark's own colour (15.1238, «почему не в цвет?» — they took the
   station's tone while the mark took its light), its sign in that colour */
.ld-feat-pic { flex: none; display: grid; place-items: center; width: var(--sp-500); height: var(--sp-500); border-radius: var(--r);
  background: linear-gradient(165deg, color-mix(in srgb, var(--glow-a) 26%, var(--card)), color-mix(in srgb, var(--glow-a) 8%, var(--card)));
  color: color-mix(in srgb, var(--glow-a) 80%, var(--ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 var(--bw) color-mix(in srgb, var(--glow-a) 26%, transparent),
              0 var(--sp-050) var(--sp-150) color-mix(in srgb, var(--glow-a) 16%, transparent); }
.ld-tone-night .ld-feat-pic { background: var(--star-glass-2); color: var(--star-ink); box-shadow: none; }
.ld-feat-words { display: flex; flex-direction: column; gap: var(--sp-025); min-width: 0; }
.ld-feat-words b { font-weight: var(--fw-semi); color: var(--ink); }
.ld-feat-words > span { color: var(--ink2); font-size: var(--fs); }

/* ─── the devices: a screen drawn at its own size and shrunk whole into its place ─────────────────────────── */
.ld-device { width: 100%; }
.ld-device-laptop { max-width: min(700px, calc((100svh - var(--ld-top) - var(--sp-600) * 2) * 1.5)); }
.ld-device-phone { max-width: min(310px, calc((100svh - var(--ld-top) - var(--sp-600) * 2) * .485)); }
.ld-bezel { position: relative; padding: var(--sp-100); border-radius: var(--r-xl); background: var(--star-night);
  box-shadow: inset 0 0 0 var(--bw) var(--star-line), 0 0 0 var(--bw) var(--line2), var(--sh-overlay),
              0 var(--sp-500) calc(var(--sp-600) * 1.5) color-mix(in srgb, var(--ink) 16%, transparent); }
/* 15.1230 («макет ноута неправильный, нижняя часть обрезается экраном и иллюзия объёма теряется»), 15.1236 («надо было
   только часть корпуса с клавиатурой на передний план выставить. Ну ок, чередуй разные ноутбуки тогда»; 15.1237 — the
   one with its keyboard in perspective refused: «а зачем объём? я не просил об этом»): the base always stands in front
   of the lid, and two laptops take turns — «slab», the first drawing; «metal», the lid's metal rim and a slab of
   aluminium, silver on the light page, space grey on the dark; every size a share of the laptop's own width */
.ld-device-laptop { container-type: inline-size;
  --metal-hi: #f4f5f7; --metal: #c8cbd1; --metal-lo: #8e939c; --metal-rim: #b9bdc4; /* вне шкалы: aluminium */
  --metal-floor: color-mix(in srgb, var(--ink) 34%, transparent); }
:root[data-theme="dark"] .ld-device-laptop {
  --metal-hi: #8a8e97; --metal: #4a4e56; --metal-lo: #23252a; --metal-rim: #5a5e66; /* вне шкалы: space grey */
  --metal-floor: rgba(0, 0, 0, .7); }
.ld-device-laptop .ld-bezel { border-radius: var(--r-l) var(--r-l) var(--r-xs) var(--r-xs); padding: var(--sp-150) var(--sp-150) var(--sp-200); }
.ld-laptop-metal .ld-bezel { border-radius: 2.4cqw 2.4cqw .9cqw .9cqw; padding: 1.7cqw 1.7cqw 2.3cqw;
  /* вне шкалы: a laptop's shares of its width */
  box-shadow: inset 0 0 0 .14cqw color-mix(in srgb, #fff 9%, transparent), 0 0 0 .32cqw var(--metal-rim),
              0 0 0 calc(.32cqw + var(--bw)) color-mix(in srgb, var(--metal-lo) 60%, transparent),
              0 var(--sp-500) calc(var(--sp-600) * 1.5) color-mix(in srgb, var(--ink) 16%, transparent); }
/* 15.1225 («Экран айфона на телефоне … искажён»): the phone's frame, corners and island in proportion to its own
   width, as an iPhone's — the same at every size */
.ld-device-phone { container-type: inline-size; }
.ld-device-phone .ld-bezel { border-radius: 15cqw; padding: 3.2cqw; /* вне шкалы: an iPhone's shares of its width */ }
/* the phone's island over its screen */
.ld-device-phone .ld-bezel::after { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(3.2cqw + 2.4cqw);
  width: 30cqw; height: 8.6cqw; translate: -50% 0; border-radius: 4.3cqw; background: var(--star-night); }
/* the base: in front of the lid, over its lower edge */
.ld-base { position: relative; z-index: 1; }
.ld-laptop-slab .ld-base { height: var(--sp-150); margin: calc(var(--sp-050) * -1) -7% 0;
  border-radius: var(--r-xs) var(--r-xs) var(--r-l) var(--r-l); background: var(--star-night-2);
  box-shadow: inset 0 var(--bw) 0 color-mix(in srgb, #fff 22%, transparent),
              0 var(--sp-200) var(--sp-300) color-mix(in srgb, var(--ink) 14%, transparent); }
.ld-laptop-metal .ld-base { height: 2.5cqw; margin: -.1cqw -6.5% 0;
  border-radius: .5cqw .5cqw 9cqw 9cqw / .5cqw .5cqw 2cqw 2cqw; /* вне шкалы: the slab's rounded ends */
  background: linear-gradient(180deg, var(--metal-hi) 0, var(--metal-hi) 14%, var(--metal) 22%,
                              color-mix(in srgb, var(--metal) 55%, var(--metal-lo)) 62%, var(--metal-lo) 100%);
  box-shadow: inset 0 .12cqw 0 color-mix(in srgb, #fff 55%, transparent),
              inset 0 -.15cqw .2cqw color-mix(in srgb, #000 22%, transparent); }
/* the thumb's notch in the front lip */
.ld-laptop-metal .ld-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%;
  height: 1cqw; translate: -50% 0; border-radius: 0 0 1.4cqw 1.4cqw / 0 0 1cqw 1cqw;
  background: linear-gradient(180deg, var(--metal-lo), var(--metal) 85%);
  box-shadow: inset 0 .2cqw .3cqw color-mix(in srgb, #000 30%, transparent); }
/* the shadow it casts on the floor */
.ld-laptop-metal .ld-base::after { content: ""; position: absolute; z-index: -1; left: 3%;
  right: 3%; top: 60%; height: 3.4cqw; border-radius: 50%; background: radial-gradient(closest-side, var(--metal-floor), transparent);
  filter: blur(.6cqw); }
.ld-screen { position: relative; overflow: hidden; width: 100%; border-radius: var(--r-xs); background: var(--bg); }
.ld-screen:has(.ld-sw) { background: var(--star-night); }
.ld-device-phone .ld-screen { border-radius: calc(15cqw - 3.2cqw); }
.ld-screen-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--fit, 1));
  font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink); }

/* the program as it stands inside the laptop */
/* 15.1187 («выглядит криво же»): the menu as wide as its longest group's name, «Настройки компании» */
.ld-prog { display: grid; grid-template-columns: 196px minmax(0, 1fr); /* вне шкалы: the program's menu in the device */
  height: 100%; background: var(--bg); }
.ld-prog-menu { display: flex; flex-direction: column; gap: var(--sp-150); padding: var(--sp-150) var(--sp-100);
  border-right: var(--bw) solid var(--line); background: var(--card); overflow: hidden; }
.ld-prog-logo { display: flex; height: var(--sp-250); padding-inline: var(--sp-100); color: var(--ink); }
.ld-prog-logo svg { height: 100%; width: auto; }
.ld-prog-group { display: flex; flex-direction: column; gap: var(--sp-025); }
.ld-prog-gh { display: flex; align-items: center; gap: var(--sp-075); padding: 0 var(--sp-100) var(--sp-025);
  color: var(--ink3); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ld-prog-gh > svg { flex: none; }
.ld-prog-item { margin-left: calc(var(--sp-150) + var(--sp-075)); }
.ld-prog-item { padding: var(--sp-050) var(--sp-100); border-radius: var(--r-xs); color: var(--ink2); white-space: nowrap; }
.ld-prog-item.on { background: var(--acc-weak); color: var(--acc-ink); }
.ld-prog-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ld-prog-top { flex: none; display: flex; align-items: center; gap: var(--sp-200); height: var(--sp-500); padding-inline: var(--sp-200);
  border-bottom: var(--bw) solid var(--line); }
.ld-prog-top > b { font-family: var(--font-h); font-size: var(--fs); font-weight: var(--fw-semi); white-space: nowrap; }
.ld-prog-search { display: flex; align-items: center; gap: var(--sp-075); flex: 0 1 200px; /* вне шкалы: the search field */
  height: var(--h-btn-sm); padding-inline: var(--sp-100); border-radius: var(--r-s); background: var(--a-100); color: var(--ink3);
  margin-right: auto; }
.ld-prog-me { flex: none; display: inline-block; width: var(--h-btn-sm); height: var(--h-btn-sm); border-radius: 50%;
  background: var(--acc-solid); color: var(--ink-on-dark); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  text-align: center; align-content: center; line-height: 1; text-box: trim-both cap alphabetic; }
.ld-prog-body { position: relative; flex: 1; min-height: 0; padding: var(--sp-200); overflow: hidden; }

/* the program's small parts inside the devices */
.ld-chips { display: flex; flex-wrap: wrap; gap: var(--sp-050); }
.ld-chip { flex: none; display: inline-flex; align-items: center; gap: var(--sp-050); height: var(--h-btn-sm);
  padding-inline: var(--sp-100); border: 0; border-radius: var(--r-s); background: var(--a-100); color: var(--ink2);
  font: inherit; font-size: var(--fs-s); cursor: pointer; transition: background var(--dur-pop), color var(--dur-pop); }
.ld-chip:hover { background: var(--a-200); color: var(--ink); }
.ld-chip.on { background: var(--acc-solid); color: var(--ink-on-dark); }
.ld-chip-s { font-size: var(--fs-xs); }
.ld-q-card { display: flex; flex-direction: column; gap: var(--sp-100); padding: var(--sp-150); min-width: 0; min-height: 0;
  background: var(--card); border-radius: var(--r-l); }
.ld-q-h { color: var(--ink2); font-size: var(--fs-s); font-weight: var(--fw-semi); }
.ld-q-title { font-family: var(--font-h); font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-semi); }
.ld-q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-150); }
.ld-q-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-100); }
.ld-q-sum > div { display: flex; flex-direction: column; gap: var(--sp-025); padding: var(--sp-100) var(--sp-150);
  background: var(--card); border-radius: var(--r-l); }
.ld-q-sum b { font-size: var(--fs); }
.ld-q-final { background: var(--acc-weak) !important; }
.ld-q-final b, .ld-q-price { font-family: var(--font-h); font-size: var(--fs-l); color: var(--acc-ink); }

/* the quote: positions, the cut map, the price */
.ld-q { display: flex; flex-direction: column; gap: var(--sp-150); height: 100%; }
.ld-q-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-150); }
.ld-q-rows { display: flex; flex-direction: column; }
.ld-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-100); align-items: baseline;
  padding-block: var(--sp-075); border-bottom: var(--bw) solid var(--line); opacity: .14; translate: var(--sp-150) 0;
  transition: opacity var(--dur-zoom), translate var(--dur-zoom) var(--ease-out); }
.ld-qrow.on { opacity: 1; translate: 0 0; }
.ld-q-map svg { display: block; width: 100%; height: auto; }
.ld-q-say { font-size: var(--fs-xs); }
.ld-sheet { fill: var(--field2); stroke: var(--line2); stroke-width: 8; }
.ld-part rect { fill: transparent; stroke: var(--line2); stroke-width: 6; stroke-dasharray: 24 18; transition: fill .3s, stroke .3s; }
.ld-part text { fill: var(--mat-ink, var(--ink)); font: var(--fw-med) 96px var(--font); text-anchor: middle; dominant-baseline: central;
  opacity: 0; transition: opacity .3s; }
.ld-part.on rect { fill: var(--mat, var(--acc-weak)); stroke: var(--acc-solid); stroke-dasharray: none; }
.ld-part.on text { opacity: 1; }

/* the client's proposal on the phone */
.ld-cl { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg);
  font-size: var(--fs); line-height: var(--lh); }
/* the status bar over the screen: the time, the signal and the battery; the island stands between them */
.ld-status { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--sp-500);
  padding: var(--sp-050) var(--sp-300) 0; background: var(--card); color: var(--ink); }
.ld-status b { font-size: var(--fs-s); font-weight: var(--fw-semi); }
.ld-status-icons { display: flex; align-items: center; gap: var(--sp-075); }
.ld-sig { display: flex; align-items: flex-end; gap: var(--sp-025); height: var(--sp-150); }
.ld-sig i { width: 3px; border-radius: 1px; background: var(--ink); /* вне шкалы: the signal's bars */ }
.ld-sig i:nth-child(1) { height: 35%; } .ld-sig i:nth-child(2) { height: 55%; } .ld-sig i:nth-child(3) { height: 78%; }
.ld-sig i:nth-child(4) { height: 100%; }
.ld-bat { position: relative; display: block; width: 22px; height: 11px; padding: 1.5px; box-sizing: border-box;
  /* вне шкалы: the battery's drawing */ border: var(--bw) solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 3px; }
.ld-bat i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: var(--ink); }
.ld-cl-bar { flex: none; display: flex; align-items: center; gap: var(--sp-150); padding: var(--sp-100) var(--sp-200) var(--sp-150);
  border-bottom: var(--bw) solid var(--line); background: var(--card); }
.ld-cl-bar > div { display: flex; flex-direction: column; min-width: 0; }
.ld-cl-bar b { font-family: var(--font-h); font-size: var(--fs); }
.ld-cl-bar .ld-dim { font-size: var(--fs-s); }
.ld-cl-co { flex: none; display: inline-block; width: var(--h-btn); height: var(--h-btn); border-radius: var(--r-s);
  background: var(--acc-solid); color: var(--ink-on-dark); font-size: var(--fs-s); font-weight: var(--fw-semi);
  text-align: center; align-content: center; line-height: 1; text-box: trim-both cap alphabetic; }
.ld-cl-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-150); padding: var(--sp-150) var(--sp-200);
  overflow: hidden; }
.ld-cl-photo { position: relative; flex: none; height: 200px; /* вне шкалы: the product's picture */ border-radius: var(--r-l); overflow: hidden;
  background: var(--field2); }
.ld-cl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.ld-cl-photo img.on { opacity: 1; }
.ld-cl-name { display: flex; flex-direction: column; }
.ld-cl-name b { font-family: var(--font-h); font-size: var(--fs-l); }
.ld-cl-label { font-size: var(--fs-s); margin-bottom: calc(var(--sp-100) * -1); }
.ld-cl-specs { display: flex; flex-direction: column; padding: var(--sp-050) var(--sp-150); background: var(--card); border-radius: var(--r-l); font-size: var(--fs-s); }
.ld-cl-specs > div { display: flex; justify-content: space-between; gap: var(--sp-150); padding-block: var(--sp-075); }
.ld-cl-specs > div + div { border-top: var(--bw) solid var(--line); }
.ld-cl-price { display: flex; justify-content: space-between; align-items: baseline; }
.ld-cl-price b { font-family: var(--font-h); font-size: var(--fs-h); }
.ld-cl-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-150);
  padding: var(--sp-150) var(--sp-200) var(--sp-300); border-top: var(--bw) solid var(--line); background: var(--card); }
.ld-cl-foot > div { display: flex; flex-direction: column; font-size: var(--fs-s); }
.ld-cl-foot b { font-family: var(--font-h); font-size: var(--fs-l); }
.ld-cl-agree { flex: none; display: inline-flex; align-items: center; gap: var(--sp-075); height: var(--h-field-sm); padding-inline: var(--sp-200);
  border: 0; border-radius: var(--r); background: var(--acc-solid); color: var(--ink-on-dark); font: inherit; font-weight: var(--fw-med); cursor: pointer; }
.ld-cl-agree.on { background: var(--acc-weak); color: var(--acc-ink); }
/* the finger of the played viewing */
.ld-finger { position: absolute; z-index: 3; width: var(--sp-500); height: var(--sp-500);
  margin: calc(var(--sp-500) / -2) 0 0 calc(var(--sp-500) / -2); border-radius: 50%;
  background: color-mix(in srgb, var(--acc) 35%, transparent); border: var(--bw-sel) solid var(--acc); opacity: 0;
  transition: left .7s var(--ease-out), top .7s var(--ease-out), opacity var(--dur-fold), transform var(--dur-pop); pointer-events: none; }
:is(.ld-touching, .ld-replaying) > .ld-finger { opacity: 1; }
.ld-finger.ld-tap { transform: scale(.7); box-shadow: 0 0 0 var(--sp-200) color-mix(in srgb, var(--acc) 25%, transparent); }

/* the whole flat in one proposal */
.ld-mo-list { gap: var(--sp-100); }
.ld-mo-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; /* вне шкалы: a product's thumbnail */ gap: var(--sp-150);
  align-items: center; padding: var(--sp-150); background: var(--card); border-radius: var(--r-l); transition: opacity var(--dur-fold); }
.ld-mo-card.off { opacity: .45; }
.ld-mo-pic { width: 64px; height: 64px; /* вне шкалы: a product's thumbnail */ border-radius: var(--r); background-size: cover; background-position: center; }
.ld-mo-words { display: flex; flex-direction: column; gap: var(--sp-075); min-width: 0; }
.ld-mo-words b { font-size: var(--fs-s); font-weight: var(--fw-semi); line-height: var(--lh-s); }
.ld-mo-price { font-size: var(--fs-s); font-weight: var(--fw-semi); }
.ld-mo-sw { display: flex; cursor: pointer; }

/* the tracked proposal in the program */
.ld-tr { display: grid; grid-template-columns: 206px minmax(0, 1fr); /* вне шкалы: the views' column */ gap: var(--sp-200); height: 100%; }
.ld-tr-side { display: flex; flex-direction: column; gap: var(--sp-150); min-width: 0; }
.ld-tr-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-100); }
.ld-tr-head > b { font-family: var(--font-h); font-size: var(--fs-l); }
.ld-tr-head .chip { gap: var(--sp-075); }
.ld-tr-views { display: flex; flex-direction: column; gap: var(--sp-025); }
.ld-tr-view { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-100); align-items: center;
  padding: var(--sp-075) var(--sp-100); border: 0; border-radius: var(--r-s); background: none; color: var(--ink2); font: inherit;
  text-align: left; cursor: pointer; }
.ld-tr-view > span:nth-child(2) { display: flex; flex-direction: column; }
.ld-tr-view b { color: var(--ink); font-weight: var(--fw-med); }
.ld-tr-view.on { background: var(--acc-weak); color: var(--acc-ink); }
.ld-tr-score { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-075); padding: var(--sp-150);
  background: var(--card); border-radius: var(--r-l); }
.ld-tr-score b { font-family: var(--font-h); font-size: var(--fs-l); }
.ld-tr-scale, .ld-tr-track { grid-column: 1 / -1; display: block; height: var(--sp-075); border-radius: var(--r-full); background: var(--a-200); overflow: hidden; }
.ld-tr-scale i, .ld-tr-track i { display: block; height: 100%; border-radius: inherit; background: var(--acc-solid); transition: width .6s linear; }
.ld-tr-main { display: flex; flex-direction: column; align-items: center; gap: var(--sp-150); min-width: 0; }
.ld-tr-phone { position: relative; flex: none; display: flex; flex-direction: column; gap: var(--sp-100); width: 196px; height: 308px;
  /* вне шкалы: the client's phone shown in the report */ padding: var(--sp-150) var(--sp-100); box-sizing: border-box; overflow: hidden;
  border: var(--sp-075) solid var(--star-night); border-radius: var(--r-xl); background: var(--card); }
.ld-tr-phone-bar { font-family: var(--font-h); font-weight: var(--fw-semi); padding-inline: var(--sp-050); }
.ld-tr-card { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); /* вне шкалы: the product's thumbnail */
  gap: var(--sp-100); align-items: center; padding: var(--sp-075); border-radius: var(--r); background: var(--field2);
  transition: background var(--dur-zoom); }
.ld-tr-pic { height: 52px; border-radius: var(--r-s); background-size: cover; background-position: center; }
.ld-tr-sec { position: absolute; right: var(--sp-075); top: var(--sp-075); padding: 0 var(--sp-075); border-radius: var(--r-xs);
  background: var(--card); font-size: var(--fs-xs); font-weight: var(--fw-semi); opacity: 0; transition: opacity var(--dur-fold); }
/* the heat of each product — the share of time in the accent, as the program's heat map */
.ld-heat .ld-tr-card { background: color-mix(in srgb, var(--acc) calc(var(--heat) * 60%), var(--field2)); }
.ld-heat .ld-tr-sec { opacity: 1; }
.ld-tr-time { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-100); align-items: center; width: 196px; }
.ld-tr-time .ld-tr-track { grid-column: auto; }

/* Star's window over the program (15.1186): the visual whole on Star's night, read by a line, its modules outlined and
   numbered; beside it how sure Star is, what it found and its question — Star's own ink, its accent flat (15.1182) */
.ld-sw { display: flex; flex-direction: column; height: 100%; background: var(--star-night); color: var(--star-ink);
  --sw-acc: var(--star-2); }
.ld-sw-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-200);
  padding: var(--sp-150) var(--sp-250); }
.ld-sw-top > div { display: flex; flex-direction: column; min-width: 0; }
.ld-sw-top b { font-family: var(--font-h); font-size: var(--fs); }
.ld-sw-top span { color: var(--star-ink-2); font-size: var(--fs-xs); }
.ld-sw-tools { display: flex; gap: var(--sp-200); color: var(--star-ink-2); }
.ld-sw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); /* вне шкалы: the visual at 4:5 */ gap: var(--sp-250);
  padding: 0 var(--sp-250) var(--sp-250); }
.ld-sw-pic { position: relative; align-self: start; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden;
  box-shadow: 0 var(--sp-200) var(--sp-500) rgba(0, 0, 0, .45); }
.ld-sw-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-sw-scan { position: absolute; left: 0; right: 0; top: 0; height: var(--bw-sel); background: var(--sw-acc);
  box-shadow: 0 0 var(--sp-150) var(--sp-025) var(--sw-acc); opacity: 0; transition: top .38s linear, opacity var(--dur-fold); }
.ld-sw-reading .ld-sw-scan { opacity: 1; }
.ld-sw-box { position: absolute; display: grid; place-items: center; box-sizing: border-box; border: var(--bw-sel) solid var(--sw-acc);
  border-radius: var(--r-xs); background: color-mix(in srgb, var(--sw-acc) 14%, transparent); opacity: 0; transform: scale(1.04);
  transition: opacity .3s, transform .3s var(--ease-out), background var(--dur-pop); }
.ld-sw-box.on { opacity: 1; transform: none; }
.ld-sw-box.lit { background: color-mix(in srgb, var(--sw-acc) 40%, transparent); }
.ld-sw-n { flex: none; display: inline-block; width: var(--sp-250); height: var(--sp-250); border-radius: 50%;
  background: var(--star-night); color: var(--star-ink); box-shadow: inset 0 0 0 var(--bw-sel) var(--sw-acc);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); text-align: center; align-content: center; line-height: 1;
  text-box: trim-both cap alphabetic; }
.ld-sw-box .ld-sw-n { background: color-mix(in srgb, var(--star-night) 80%, transparent); }
.ld-sw-side { display: flex; flex-direction: column; gap: var(--sp-150); min-width: 0; }
.ld-sw-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-150); }
.ld-sw-head > b { font-family: var(--font-h); font-size: var(--fs-l); }
.ld-sw-state { display: inline-flex; align-items: center; gap: var(--sp-075); height: var(--h-btn-sm); padding-inline: var(--sp-100);
  border: 0; border-radius: var(--r-s); background: var(--star-glass-2); color: var(--star-ink); font: inherit; font-size: var(--fs-xs);
  cursor: pointer; }
.ld-sw-state.ld-sw-reading { cursor: default; }
.ld-sw-state .ld-dot { background: var(--sw-acc); }
.ld-sw-card { display: flex; flex-direction: column; gap: var(--sp-100); padding: var(--sp-150); border-radius: var(--r-l);
  background: var(--star-glass); box-shadow: inset 0 0 0 var(--bw) var(--star-line); }
.ld-sw-sure { flex-direction: row; align-items: center; gap: var(--sp-200); }
.ld-sw-ring-box { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; /* вне шкалы: the ring */ }
.ld-sw-ring-box b { font-family: var(--font-h); font-size: var(--fs); }
.ld-sw-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--sw-acc) calc(var(--v, 0) * 1turn), var(--star-glass-2) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--sp-075)), #000 calc(100% - var(--sp-075) + 1px)); }
.ld-sw-aspects { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-075) var(--sp-150); align-items: center;
  font-size: var(--fs-xs); }
.ld-sw-aspect { display: contents; }
.ld-sw-aspect > .num { color: var(--star-ink-2); text-align: right; }
.ld-sw-meter { display: block; height: var(--sp-075); border-radius: var(--r-full); background: var(--star-glass-2); overflow: hidden; }
.ld-sw-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sw-acc); transition: width .8s var(--ease-out); }
.ld-sw-meter i.on { width: calc(var(--v) * 100%); }
.ld-sw-h { color: var(--star-ink-2); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.ld-sw-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-050); }
.ld-sw-item { display: flex; align-items: center; gap: var(--sp-075); min-width: 0; padding: var(--sp-050) var(--sp-075);
  border-radius: var(--r-s); background: var(--star-glass); font-size: var(--fs-xs); opacity: .25;
  transition: opacity .3s, background var(--dur-pop); }
.ld-sw-item.on { opacity: 1; }
.ld-sw-item.lit { background: color-mix(in srgb, var(--sw-acc) 30%, transparent); }
.ld-sw-q { font-size: var(--fs-xs); }
.ld-sw-qhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-150); }
.ld-sw-q .ld-chip { background: var(--star-glass-2); color: var(--star-ink); }
.ld-sw-q .ld-chip.on { background: var(--star-acc-solid); color: var(--ink-on-dark); }
.ld-sw-done { display: flex; align-items: center; gap: var(--sp-075); color: var(--star-ink-2); opacity: 0; transition: opacity var(--dur-fold); }
.ld-sw-done.on { opacity: 1; }

/* Echo in «Сообщения» */
.ld-ec { display: grid; grid-template-columns: 190px minmax(0, 1fr); /* вне шкалы: the chats' column */ height: calc(100% + var(--sp-200) * 2);
  margin: calc(var(--sp-200) * -1); }
.ld-ec-list { display: flex; flex-direction: column; gap: var(--sp-025); padding: var(--sp-100); border-right: var(--bw) solid var(--line); }
.ld-ec-person { display: flex; align-items: center; gap: var(--sp-100); padding: var(--sp-075) var(--sp-100); border-radius: var(--r); }
.ld-ec-person.on { background: var(--acc-weak); }
.ld-ec-who { display: flex; flex-direction: column; min-width: 0; }
.ld-ec-who b { font-weight: var(--fw-med); }
.ld-ec-ava { flex: none; display: grid; place-items: center; width: var(--h-btn); height: var(--h-btn); border-radius: 50%;
  background: var(--a-100); color: var(--ink2); overflow: hidden; }
.ld-ec-ava img { width: 70%; height: 70%; object-fit: contain; }
.ld-ec-face { display: inline-block; background: var(--acc-weak); color: var(--acc-ink); font-weight: var(--fw-semi);
  text-align: center; align-content: center; line-height: 1; text-box: trim-both cap alphabetic; }
.ld-ec-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ld-ec-head { flex: none; display: flex; align-items: center; gap: var(--sp-150); padding: var(--sp-100) var(--sp-200); border-bottom: var(--bw) solid var(--line); }
.ld-ec-head > div { display: flex; flex-direction: column; }
.ld-ec-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-100);
  padding: var(--sp-150) var(--sp-200); overflow: hidden; }
.ld-ec-date { align-self: center; padding: 0 var(--sp-100); border-radius: var(--r-s); background: var(--a-100); color: var(--ink3); font-size: var(--fs-xs); }
.ld-ec-msg { align-self: flex-start; display: flex; flex-direction: column; gap: var(--sp-025); max-width: 84%; padding: var(--sp-100) var(--sp-150);
  border-radius: var(--r-l); background: var(--card); border: var(--bw) solid var(--line); animation: ld-in var(--dur-fold) var(--ease-out); }
.ld-ec-msg > b { color: var(--acc-ink); font-size: var(--fs-xs); }
.ld-ec-msg.mine { align-self: flex-end; background: var(--acc-weak); border-color: transparent; }
.ld-typing { flex-direction: row; gap: var(--sp-050); padding-block: var(--sp-150); }
.ld-typing i { width: var(--sp-075); height: var(--sp-075); border-radius: 50%; background: var(--ink3); animation: ld-typing 1s ease-in-out infinite; }
.ld-typing i:nth-child(2) { animation-delay: .15s; }
.ld-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ld-typing { 50% { opacity: .3; transform: translateY(calc(var(--sp-050) * -1)); } }
.ld-ec-asks { flex: none; display: flex; flex-wrap: wrap; gap: var(--sp-050); padding: 0 var(--sp-200) var(--sp-100); }
.ld-ec-input { flex: none; margin: 0 var(--sp-200) var(--sp-150); padding: var(--sp-100) var(--sp-150); border-radius: var(--r);
  box-shadow: inset 0 0 0 var(--bw-sel) var(--acc); }

/* Atom: a whole kitchen taken apart (15.1215) — the project's drawing, its modules found and numbered, their parts */
.ld-at { display: grid; grid-template-columns: minmax(0, 1fr) 236px; /* вне шкалы: the analysis' column */ gap: var(--sp-200); height: 100%; }
.ld-at-left { display: flex; flex-direction: column; gap: var(--sp-100); min-width: 0; }
.ld-at-chip { gap: var(--sp-050); border: 0; background: var(--acc-weak); color: var(--acc-ink); }
.ld-at-wall { width: 100%; height: 100%; }
.ld-at-wall svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ld-at-wall .ld-al-mod { animation: none; opacity: .35; transition: opacity .35s; }
.ld-at-wall .ld-al-mod.found { opacity: 1; }
.ld-at-wall .ld-al-mod.lit .ld-al-body { fill: color-mix(in srgb, var(--acc) 42%, var(--card)); stroke-width: 2.5; }
.ld-at-badge { opacity: 0; transition: opacity .3s; }
.ld-al-mod.found .ld-at-badge { opacity: 1; }
.ld-at-badge circle { fill: var(--acc-solid); }
.ld-at-badge text { fill: var(--ink-on-dark); font: var(--fw-semi) 84px var(--font); text-anchor: middle; dominant-baseline: central; }
.ld-at-side { gap: var(--sp-100); min-height: 0; overflow: hidden; }
.ld-at-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-100); }
.ld-at-state { font-size: var(--fs-xs); color: var(--ink3); white-space: nowrap; }
.ld-at-state.done { color: var(--acc-ink); font-weight: var(--fw-semi); }
.ld-at-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-025); overflow: hidden; }
.ld-at-mod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-100);
  padding: var(--sp-050) var(--sp-075); border: 0; border-radius: var(--r-s); background: none; color: var(--ink); font: inherit;
  text-align: left; cursor: pointer; animation: ld-in var(--dur-fold) var(--ease-out); }
.ld-at-mod:hover { background: var(--acc-weak); }
.ld-at-mod > span:nth-child(2) { display: flex; gap: var(--sp-075); align-items: baseline; }
.ld-at-n { display: inline-block; width: var(--sp-250); height: var(--sp-250); border-radius: 50%; background: var(--acc-solid);
  color: var(--ink-on-dark); font-size: var(--fs-xs); text-align: center; align-content: center; line-height: 1;
  text-box: trim-both cap alphabetic; }
.ld-at-back { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-050); margin-bottom: var(--sp-050);
  padding: var(--sp-025) var(--sp-075); border: 0; border-radius: var(--r-s); background: var(--acc-weak); color: var(--acc-ink);
  font: inherit; font-weight: var(--fw-semi); cursor: pointer; }
.ld-at-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-100); padding: var(--sp-025) var(--sp-075); }
.ld-at-row > .ld-dim { grid-column: 1 / -1; font-size: var(--fs-xs); }
.ld-at-sub { margin-top: var(--sp-100); padding-inline: var(--sp-075); color: var(--ink2); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.ld-at-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-050); padding-top: var(--sp-100);
  border-top: var(--bw) solid var(--line); }
.ld-at-totals > div { display: flex; flex-direction: column; }
.ld-at-totals span { font-size: var(--fs-xs); }
.ld-at-totals b { font-family: var(--font-h); font-size: var(--fs-l); }
.ld-at-totals.done b { color: var(--acc-ink); }

/* Ares: a cabinet in three dimensions */
.ld-ar { display: grid; grid-template-columns: minmax(0, 1fr) 200px; /* вне шкалы: the properties' column */ gap: var(--sp-200); height: 100%; }
.ld-ar-stage { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--card); border-radius: var(--r-l); overflow: hidden; }
.ld-ar-tools { flex: none; display: flex; align-items: center; gap: var(--sp-075); padding: var(--sp-100); border-bottom: var(--bw) solid var(--line); }
.ld-ar-tool { display: grid; place-items: center; width: var(--h-btn-sm); height: var(--h-btn-sm); border-radius: var(--r-s); color: var(--ink2); }
.ld-ar-tool.on { background: var(--acc-weak); color: var(--acc-ink); }
.ld-ar-gap { flex: 1; }
.ld-ar-view { flex: 1; min-height: 0; display: grid; place-items: center; perspective: 900px; /* вне шкалы: the view's depth */
  cursor: grab; touch-action: pan-y; background: var(--field2); }
.ld-ar-view:active { cursor: grabbing; }
.ld-ar-hint { position: absolute; left: var(--sp-150); bottom: var(--sp-100); display: flex; align-items: center; gap: var(--sp-075); font-size: var(--fs-xs); }
.ld-ar-side { display: flex; flex-direction: column; gap: var(--sp-050); padding: var(--sp-150); background: var(--card); border-radius: var(--r-l); }
.ld-ar-side > .ld-q-title { margin-bottom: var(--sp-100); }
.ld-ar-row { display: flex; justify-content: space-between; gap: var(--sp-100); padding-block: var(--sp-050); border-bottom: var(--bw) solid var(--line); }
.ld-ar-width { flex-direction: column; gap: var(--sp-075); padding-bottom: var(--sp-100); }
.ld-ar-price { margin-top: auto; display: flex; flex-direction: column; padding: var(--sp-100) var(--sp-150); border-radius: var(--r); background: var(--acc-weak); }
.ld-ar-price b { font-family: var(--font-h); font-size: var(--fs-l); color: var(--acc-ink); }
.ld-cube { --w: 160px; --h: 144px; --d: 64px; /* вне шкалы: the cabinet at 20 % */
  position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d;
  transform: rotateX(-16deg) rotateY(var(--spin, -30deg)); transition: width .4s var(--ease-out); }
.ld-face, .ld-door, .ld-shelf { position: absolute; box-sizing: border-box; border: var(--bw-sel) solid var(--acc-solid); transition: width .4s var(--ease-out), transform .4s var(--ease-out), left .4s var(--ease-out); }
.ld-face { inset: 0; background: color-mix(in srgb, var(--card) 92%, var(--acc)); }
.ld-face-front { background: transparent; border-color: transparent; transform: translateZ(calc(var(--d) / 2)); }
.ld-face-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: var(--field2); }
.ld-face-left, .ld-face-right { width: var(--d); left: calc((var(--w) - var(--d)) / 2); }
.ld-face-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.ld-face-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.ld-face-top, .ld-face-bottom { height: var(--d); top: calc((var(--h) - var(--d)) / 2); }
.ld-face-top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.ld-face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.ld-shelf { left: 0; right: 0; height: var(--d); top: calc((var(--h) - var(--d)) / 2); transform: rotateX(90deg);
  background: color-mix(in srgb, var(--acc) 12%, var(--card)); }
.ld-door { top: 0; width: calc(var(--w) / 2); height: var(--h); background: color-mix(in srgb, var(--acc) 28%, var(--card)); }
.ld-door-l { left: 0; transform-origin: 0 50%; transform: translateZ(calc(var(--d) / 2)) rotateY(calc(var(--open, 0) * -105deg)); }
.ld-door-r { right: 0; transform-origin: 100% 50%; transform: translateZ(calc(var(--d) / 2)) rotateY(calc(var(--open, 0) * 105deg)); }

/* Line's board */
.ld-ln { display: flex; flex-direction: column; gap: var(--sp-150); height: 100%; }
.ld-ln-top { display: flex; align-items: center; gap: var(--sp-150); }
.ld-ln-top > b { font-family: var(--font-h); font-size: var(--fs-l); }
.ld-ln-top > .ld-dim { font-size: var(--fs-xs); }
.ld-ln-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-100); }
.ld-ln-col { display: flex; flex-direction: column; gap: var(--sp-075); min-width: 0; padding: var(--sp-100); border-radius: var(--r-l); background: var(--a-100); }
.ld-ln-head { display: flex; align-items: center; gap: var(--sp-075); padding: var(--sp-025) var(--sp-050); }
.ld-ln-head > i { flex: none; width: var(--sp-100); height: var(--sp-100); border-radius: 50%; }
.ld-ln-head b { font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-ln-list { display: flex; flex-direction: column; gap: var(--sp-075); }
.ld-ln-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-025); padding: var(--sp-100); border: 0; border-radius: var(--r);
  background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 var(--bw) var(--line); }
.ld-ln-card:hover { box-shadow: inset 0 0 0 var(--bw-sel) var(--acc); }
.ld-ln-card > b { font-weight: var(--fw-semi); }
.ld-ln-card > .ld-dim { font-size: var(--fs-xs); }
.ld-ln-card.ld-moved { animation: ld-in var(--dur-zoom) var(--ease-out); }
.ld-ln-stripes { display: flex; gap: var(--sp-050); margin-bottom: var(--sp-050); }
.ld-ln-stripes i { width: var(--sp-300); height: var(--sp-050); border-radius: var(--r-full); }
.ld-ink-blue { background: var(--tag-blue); }
.ld-ink-violet { background: var(--tag-violet); }
.ld-ink-amber { background: var(--tag-amber); }
.ld-ink-green { background: var(--tag-green); }
.ld-ln-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-050) var(--sp-100); margin-top: var(--sp-050); color: var(--ink3); font-size: var(--fs-xs); }
.ld-ln-meta > span { display: inline-flex; align-items: center; gap: var(--sp-025); }
.ld-ln-sum { color: var(--ink); }
.ld-ln-who { margin-left: auto; display: inline-block !important; width: var(--sp-300); height: var(--sp-300); border-radius: 50%; background: var(--a-200);
  color: var(--ink2); font-size: var(--fs-xs); font-weight: var(--fw-semi); text-align: center; align-content: center; line-height: 1;
  text-box: trim-both cap alphabetic; }
.ld-ln-add { display: flex; align-items: center; gap: var(--sp-050); padding: var(--sp-050); }

/* the web editor: modules along the wall */
.ld-al { display: flex; flex-direction: column; gap: var(--sp-150); height: 100%; }
.ld-al-palette { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-050); max-width: 330px; /* вне шкалы: the palette's row */ }
.ld-al-room { flex: 1; min-height: 0; padding: var(--sp-150) var(--sp-200); background: var(--card); border-radius: var(--r-l); }
.ld-al-wall { width: 100%; height: 100%; }
.ld-al-wall svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 15.1217: square, as the editor draws them */
.ld-al-mod { cursor: pointer; animation: ld-in var(--dur-fold) var(--ease-out); }
.ld-al-body { fill: color-mix(in srgb, var(--acc) 12%, var(--card)); stroke: var(--acc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ld-al-front { fill: color-mix(in srgb, var(--acc) 26%, var(--card)); stroke: var(--acc); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ld-al-mod:hover .ld-al-body { stroke: var(--ink2); }
.ld-al-floor { stroke: var(--line2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ld-al-dim { fill: none; stroke: var(--ink3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ld-al-size { fill: var(--ink2); font: var(--fw-med) 96px var(--font); text-anchor: middle; }

/* the economy */
.ld-eco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-200); }
.ld-eco-col { display: flex; flex-direction: column; gap: var(--sp-100); min-width: 0; }
.ld-eco-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-150); padding-block: var(--sp-075);
  border-bottom: var(--bw) solid var(--line); }
.ld-eco-row:last-child { border-bottom: 0; }
.ld-eco-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ld-eco-row > span:first-child .ld-dim { font-size: var(--fs-xs); }
.ld-eco-sw { cursor: pointer; }
.ld-eco-rate { display: flex; align-items: center; gap: var(--sp-100); white-space: nowrap; }
.ld-eco-spark svg { display: block; width: 64px; height: 22px; /* вне шкалы: the rate's line */ }
.ld-eco-spark polyline { fill: none; stroke: var(--acc-solid); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ld-eco-final { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-150); padding: var(--sp-100) var(--sp-150);
  border-radius: var(--r); background: var(--acc-weak); color: var(--acc-ink); }

/* the roles */
.ld-ro { display: grid; grid-template-columns: 190px minmax(0, 1fr); /* вне шкалы: the roles' column */ gap: var(--sp-200); }
.ld-ro-list { display: flex; flex-direction: column; gap: var(--sp-050); }
.ld-ro-role { display: flex; align-items: center; gap: var(--sp-100); padding: var(--sp-075) var(--sp-100); border: 0; border-radius: var(--r);
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ld-ro-role > span:last-child { display: flex; flex-direction: column; }
.ld-ro-role b { font-weight: var(--fw-med); }
.ld-ro-role.on { background: var(--acc-weak); }
.ld-ro-main { display: flex; flex-direction: column; gap: var(--sp-150); min-width: 0; }
.ld-ro-main .ld-eco-row { cursor: default; }
.ld-ro-peek { display: flex; align-items: center; gap: var(--sp-075); padding: var(--sp-100) var(--sp-150); border-radius: var(--r); background: var(--a-100); }

/* the notices on the phone */
.ld-nt { background: var(--field2); }
/* 15.1210 («лого сломалось»): the bot's mark — the column in the middle of a round dark ground, as a Telegram bot's */
.ld-cl-co.ld-nt-bot { display: grid; place-items: center; border-radius: 50%; background: var(--star-night); }
.ld-nt-bot img { display: block; width: auto; height: 62%; }
.ld-nt-feed { flex: 1; display: flex; flex-direction: column; gap: var(--sp-100); padding: var(--sp-200); }
.ld-nt-bubble { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-100); padding: var(--sp-150) var(--sp-150) var(--sp-300);
  border-radius: var(--r-l); border-top-left-radius: var(--r-xs); background: var(--card); opacity: 0; transform: translateY(var(--sp-150));
  transition: opacity var(--dur-zoom), transform var(--dur-zoom) var(--ease-out); }
.ld-nt-bubble.on { opacity: 1; transform: none; }
.ld-nt-btn { height: var(--h-btn-sm); padding-inline: var(--sp-150); border: 0; border-radius: var(--r-s); background: var(--acc-weak); color: var(--acc-ink);
  font: inherit; font-size: var(--fs-s); font-weight: var(--fw-med); cursor: pointer; }
.ld-nt-btn.on { background: var(--a-100); color: var(--ink3); }
.ld-nt-time { position: absolute; right: var(--sp-150); bottom: var(--sp-075); color: var(--ink3); font-size: var(--fs-xs); }

/* the data's protection */
.ld-pr { display: flex; flex-direction: column; gap: var(--sp-150); max-width: 480px; /* вне шкалы: the protection's column */ }
.ld-pr-key { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-150); }
.ld-pr-key > div { display: flex; flex-direction: column; gap: var(--sp-025); }
.ld-pr-sign { display: grid; place-items: center; width: var(--sp-500); height: var(--sp-500); border-radius: var(--r); background: var(--acc-weak); color: var(--acc-ink); }
.ld-pr-sw { display: flex; cursor: pointer; }
.ld-pr-state { display: flex; align-items: center; gap: var(--sp-100); color: var(--ink2); }
.ld-pr-state .chip { border: 0; background: var(--a-200); }
.ld-pr-state .chip.ld-sealed { background: var(--acc-weak); color: var(--acc-ink); }
.ld-pr .ld-eco-row .num { font-family: var(--font-mono); }

/* ─── the capabilities' presentation in the tariff (15.928): the same programs in their devices ───────────── */
.ld-tour { display: flex; flex-direction: column; gap: var(--sp-300); }
/* 15.1222 («вот здесь прокрутки нигде не должно было произойти. избеги этого масштабированием»): the picture gives up
   its height to the window's — the window never scrolls, the program in it is shrunk whole to fit */
.ld-tour .slides-pic { max-height: var(--tour-pic, none); }
/* 15.1233: on a computer the picture as wide as a laptop's screen; the arrows at its middle, its height cut too */
.ld-tour .slides-pic { aspect-ratio: 16 / 10; }
.ld-tour .slides-arrow { top: calc(min(31.25cqw, var(--tour-pic, 100vh) / 2) - var(--h-field) / 2); }
/* 15.931: the action spans the window's width with the picture's margins; its words have room at the sides */
.ld-tour-act { justify-content: center; }
.ld-tour-act .btn { flex: 1 1 auto; justify-content: center; padding-inline: var(--sp-300); }
.ld-tour-act .chip { margin-inline: auto; }
@media (max-width: 700px) {
  .ld-tour-act .btn { font-size: var(--fs); }
  /* 15.941: on a phone the picture is square — a phone in it shows whole and larger */
  .ld-tour .slides-pic { aspect-ratio: 1; }
  .ld-tour .slides-arrow { top: calc(min(50cqw, var(--tour-pic, 100vh) / 2) - var(--h-field) / 2); }
}
.ld-tv { position: absolute; inset: 0; overflow: hidden; }
/* 15.944: the picture at its natural size, fitted whole into the slide by landing.js (--tv-scale) */
.ld-tv-inner { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-200); transform: translate(-50%, -50%) scale(var(--tv-scale, 1)); transform-origin: 50% 50%; }
.ld-tv .ld-device-laptop { width: 620px; max-width: none; /* вне шкалы: the slide's laptop */ }
.ld-tv .ld-device-phone { width: 260px; max-width: none; /* вне шкалы: the slide's phone */ }
/* 15.929: the program's own calm ground; Star keeps its night */
.ld-tv-calm { background:
  radial-gradient(70% 70% at 25% 15%, color-mix(in srgb, var(--acc) 24%, transparent), transparent 70%),
  radial-gradient(60% 60% at 90% 95%, color-mix(in srgb, var(--acc-solid) 16%, transparent), transparent 70%),
  var(--field2); }
.ld-tv-night { background: radial-gradient(45% 50% at 80% 20%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%),
  radial-gradient(45% 45% at 15% 85%, color-mix(in srgb, var(--focus) 22%, transparent), transparent 70%), var(--star-night); }
.ld-tv-night .ld-screen { --acc: var(--star-2); --acc-solid: var(--star-acc-solid); --acc-weak: var(--star-acc-weak); --acc-ink: var(--star-acc-ink); }

/* ─── a company's own DEOS in a browser (15.1211) ────────────────────────────────────────────────────────── */
.ld-br { display: flex; flex-direction: column; height: 100%; background: var(--bg); }
.ld-br-top { flex: none; display: flex; align-items: center; gap: var(--sp-200); padding: var(--sp-100) var(--sp-150);
  background: var(--card); border-bottom: var(--bw) solid var(--line); }
.ld-br-dots { display: flex; gap: var(--sp-075); }
.ld-br-dots i { width: var(--sp-150); height: var(--sp-150); border-radius: 50%; background: var(--a-200); }
.ld-br-url { flex: 1; display: flex; align-items: center; gap: var(--sp-075); height: var(--h-btn-sm); max-width: 420px;
  /* вне шкалы: the address bar */ margin-inline: auto; padding-inline: var(--sp-150); border: 0; border-radius: var(--r-s);
  background: var(--a-100); color: var(--ink); font: inherit; font-size: var(--fs-s); cursor: pointer; }
.ld-br-url svg { color: var(--acc-ink); }
.ld-br-page { position: relative; flex: 1; min-height: 0; }
.ld-br-view { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-zoom); pointer-events: none; }
.ld-br-view.on { opacity: 1; pointer-events: auto; }
.ld-br-signin { display: grid; place-items: center; }
.ld-br-ground { z-index: 0; }
.ld-br-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-100);
  width: 260px; /* вне шкалы: the sign-in card */ padding: var(--sp-300); border-radius: var(--r-xl); background: var(--card);
  box-shadow: var(--sh-overlay); }
.ld-br-card > b { font-family: var(--font-h); font-size: var(--fs-l); }
.ld-br-logo { display: inline-block; width: var(--sp-500); height: var(--sp-500); border-radius: var(--r); background: var(--acc-solid);
  color: var(--ink-on-dark); font-weight: var(--fw-semi); text-align: center; align-content: center; line-height: 1;
  text-box: trim-both cap alphabetic; }
.ld-br-field { align-self: stretch; display: flex; flex-direction: column; gap: var(--sp-025); padding: var(--sp-075) var(--sp-150);
  border-radius: var(--r-s); background: var(--field2); font-size: var(--fs-xs); }
.ld-br-value { min-height: var(--lh); color: var(--ink); font-size: var(--fs); }
.ld-br-enter { align-self: stretch; height: var(--h-field-sm); border: 0; border-radius: var(--r); background: var(--acc-solid);
  color: var(--ink-on-dark); font: inherit; font-weight: var(--fw-med); cursor: pointer; transition: transform var(--dur-pop); }
.ld-br-enter.on { transform: scale(.96); }
.ld-br-dash { display: flex; flex-direction: column; gap: var(--sp-200); padding: var(--sp-300); }
.ld-br-greet { font-family: var(--font-h); font-size: var(--fs-num); font-weight: var(--fw-bold); }
.ld-br-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-150); }
.ld-br-tile { display: flex; flex-direction: column; gap: var(--sp-075); padding: var(--sp-200); border-radius: var(--r-l); background: var(--card); }
.ld-br-tile b { font-family: var(--font-h); font-size: var(--fs-h); }

/* ─── the tariff builder ─────────────────────────────────────────────────────────────────────────────────── */
.ld-tariff { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
/* 15.1239: the living ground over the whole section — round lights spread down it, lit by the parts chosen */
.ld-tariff-ground { z-index: -1; }
.ld-tariff-ground .login-orb { width: 80cqw; height: 80cqw; margin: -40cqw 0 0 -40cqw;
  filter: blur(4cqmin) opacity(var(--lit, 0)); transition: filter .7s var(--ease-out); }
.ld-tariff-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--sp-500); align-items: start; }
.ld-plan { display: flex; flex-direction: column; gap: var(--sp-100); min-width: 0; }
.ld-plan-row { border-radius: var(--r-l); background: var(--card); transition: background var(--dur-fold); }
.ld-plan-row.ld-chosen { background: color-mix(in srgb, var(--acc) 9%, var(--card)); }
.ld-plan-line { display: flex; align-items: center; gap: var(--sp-200); padding-left: var(--sp-200); }
.ld-plan-sw { flex: none; display: flex; cursor: pointer; }
.ld-plan-head { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-050) var(--sp-200);
  padding: var(--sp-200) var(--sp-200) var(--sp-200) 0; border: 0; background: none; color: var(--ink); font: inherit;
  text-align: left; cursor: pointer; }
.ld-plan-name { flex: 1 1 11em; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-025); }
.ld-plan-name b { font-family: var(--font-h); font-size: var(--fs-l); font-weight: var(--fw-semi); }
/* 15.1223: a product's own logo in place of its name — in the row and over its slide */
.ld-plan-logo { display: flex; align-items: center; height: var(--lh-l); color: var(--ink); }
.ld-tour .slides-words h3 { display: flex; justify-content: center; align-items: center; min-height: var(--sp-400); }
.ld-plan-name .ld-dim { font-size: var(--fs-s); }
.ld-plan-price { flex: none; font-weight: var(--fw-semi); }
.ld-plan-more { flex: none; display: flex; align-items: center; gap: var(--sp-050); color: var(--acc-ink); font-size: var(--fs-s); }
/* 15.985: the place on the server — its size chosen under its name, in the card's column (15.1171) */
.ld-place { display: flex; flex-direction: column; gap: var(--sp-150); padding: var(--sp-150) 0; border-block: var(--bw) solid var(--line); }
.ld-place-line { display: flex; align-items: center; gap: var(--sp-150); }
.ld-place-ic { flex: none; display: grid; place-items: center; width: var(--sp-500); height: var(--sp-500); border-radius: var(--r);
  background: var(--acc-weak); color: var(--acc-ink); }
.ld-place-pick { display: flex; min-width: 0; }
.ld-place-pick > .segment { max-width: 100%; }
.ld-place-more { margin: 0; font-size: var(--fs-s); line-height: var(--lh-s); }
.ld-sum { position: sticky; top: calc(var(--ld-top) + var(--sp-300)); display: flex; flex-direction: column; gap: var(--sp-200);
  padding: var(--sp-300); background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-overlay); }
/* 15.1171, 15.1178: the subscription's card over the login's living ground — its lights come with the parts chosen */
.ld-card-stage { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  margin: calc(var(--sp-300) * -1) calc(var(--sp-300) * -1) 0; padding: var(--sp-300) var(--sp-300) var(--sp-200);
  border-radius: var(--r-xl) var(--r-xl) 0 0; }
.ld-card-stage .sub-card-holder { width: 100%; padding-block: var(--sp-100); }
.ld-tier-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-050); }
.ld-tier { padding: var(--sp-075) var(--sp-050); border-radius: var(--r-s); background: var(--a-100); color: var(--ink3);
  font-size: var(--fs-s); text-align: center; white-space: nowrap; transition: background var(--dur-fold), color var(--dur-fold); }
.ld-tier.on { background: var(--acc-weak); color: var(--acc-ink); font-weight: var(--fw-med); }
.ld-sum-price { display: flex; align-items: baseline; gap: var(--sp-100); flex-wrap: wrap; }
.ld-sum-n { font-family: var(--font-h); font-size: var(--fs-num-l); font-weight: var(--fw-bold); }
.ld-sum-was { color: var(--ink3); text-decoration: line-through; }
.ld-sum-was:empty { display: none; }
.ld-sum-list { display: flex; flex-direction: column; font-size: var(--fs-s); }
.ld-sum-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-150); font-size: var(--fs-s); }
.ld-sum .btn.primary { align-self: stretch; justify-content: center; }
.chip.ld-full { background: var(--acc-weak); color: var(--acc-ink); border: 0; }

/* ─── the way in and the request ─────────────────────────────────────────────────────────────────────────── */
/* 15.1212: the way in — a screen of its own, the steps on one line joined by the way between them */
.ld-way, .ld-request { --tone: var(--acc-solid); --glow-a: var(--acc); --glow-b: var(--tag-teal);
  position: relative; isolation: isolate; overflow: hidden; }
.ld-request { --glow-a: var(--tag-blue); --glow-b: var(--acc); }
.ld-way-head { display: flex; flex-direction: column; gap: var(--sp-250); max-width: 720px; /* вне шкалы: the head's measure */ }
.ld-way-head h2, .ld-request-text h2 { font-size: calc(var(--ld-h2) * .86); }
.ld-way-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-400); counter-reset: none; }
.ld-way-step { position: relative; display: flex; flex-direction: column; gap: var(--sp-150); padding: var(--sp-400) var(--sp-300);
  border-radius: var(--r-xl); background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: inset 0 0 0 var(--bw) var(--line), var(--sh-overlay); backdrop-filter: blur(var(--sp-200)); }
.ld-way-step h3 { font-size: var(--fs-h); line-height: 1.25; }
.ld-way-step p { font-size: var(--fs-l); line-height: var(--lh-l); }
/* the way from one step to the next */
.ld-way-step:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: calc(var(--sp-400) + var(--sp-300));
  left: 100%; width: var(--sp-400); height: var(--bw-sel); background: color-mix(in srgb, var(--tone) 60%, transparent); }
.ld-way-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-150); margin-bottom: var(--sp-100); }
.ld-way-pic { display: grid; place-items: center; width: var(--sp-600); height: var(--sp-600); }
.ld-way-n { padding: var(--sp-050) var(--sp-150); border-radius: var(--r-s); background: var(--acc-weak); color: var(--acc-ink);
  font-size: var(--fs-s); font-weight: var(--fw-semi); }
.ld-way-acts { display: flex; flex-wrap: wrap; gap: var(--sp-150); }
/* 15.1213: the request — what the visitor gets beside the form in its card */
.ld-request-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: var(--sp-600); align-items: center; }
.ld-request-text { display: flex; flex-direction: column; gap: var(--sp-250); min-width: 0; }
/* 15.1232 («не привлекает»): the hero's icon, smaller, over the title; the title's second line in the colour's gradient */
.ld-icon.ld-icon-s { width: calc(var(--sp-600) * 2); margin-bottom: 0; }
.ld-grad { background: linear-gradient(100deg, var(--acc), var(--tag-teal) 45%, var(--tag-blue));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the promises on glass tiles, each its own colour */
.ld-feats-vivid .ld-feat-pic { position: relative; isolation: isolate; border-radius: 30%; background: none; box-shadow: none;
  color: var(--ink-on-dark); }
/* 15.1238: in the title's own colours, step by step from the accent to the blue */
.ld-feats-vivid .ld-feat:nth-child(1) { --glow-a: var(--acc); --glow-b: var(--tag-teal); }
.ld-feats-vivid .ld-feat:nth-child(2) { --glow-a: var(--tag-teal); --glow-b: var(--tag-blue); }
.ld-feats-vivid .ld-feat:nth-child(3) { --glow-a: var(--tag-blue); --glow-b: var(--tag-violet); }
.ld-feats-vivid .ld-feat-pic::before { content: ""; position: absolute; z-index: -1; left: -12%; top: -12%; width: 96%; height: 96%;
  border-radius: 34%; rotate: -8deg;
  background: linear-gradient(145deg, color-mix(in srgb, var(--glow-a) 80%, #fff), var(--glow-a) 45%, var(--glow-b)); }
.ld-feats-vivid .ld-feat-pic::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .14));
  backdrop-filter: blur(4px) saturate(1.5);
  box-shadow: inset 0 0 0 var(--bw) rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .55); }
.ld-feats-vivid .ld-feat-pic svg { position: relative; }
/* the form's card: a light running round its edge and a glow of the same colours behind it */
@property --ld-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ld-request-frame { position: relative; isolation: isolate; }
.ld-request-frame::before { content: ""; position: absolute; z-index: -1; inset: var(--sp-300); border-radius: var(--r-xl);
  background: linear-gradient(120deg, var(--acc), var(--tag-teal), var(--tag-blue)); filter: blur(var(--sp-600)); opacity: .5; }
.ld-request-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-300); padding: var(--sp-400);
  border-radius: var(--r-xl); background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: inset 0 0 0 var(--bw) var(--line), var(--sh-overlay); backdrop-filter: blur(var(--sp-200)); }
.ld-request-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--bw-sel);
  pointer-events: none;
  background: conic-gradient(from var(--ld-spin), transparent 0 52%, var(--tag-teal) 66%, var(--acc) 76%, var(--tag-blue) 86%,
                             transparent 96%);
  -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);
  animation: ld-spin 7s linear infinite; }
@keyframes ld-spin { to { --ld-spin: 360deg; } }
.ld-request-card-head { display: flex; flex-direction: column; gap: var(--sp-050); }
.ld-request-card-head h3 { font-size: var(--fs-h); }
.ld-request-card .ld-form-acts .btn { flex: 1 1 auto; justify-content: center; }
.ld-form { display: flex; flex-direction: column; gap: var(--sp-300); }
.ld-form-acts { display: flex; justify-content: flex-end; }
.ld-plan-link { text-decoration: none; color: inherit; }
.ld-plan-say { flex: 1; min-width: 0; text-align: right; color: var(--ink2); font-size: var(--fs-s); }
.ld-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.ld-done { display: flex; flex-direction: column; align-items: center; gap: var(--sp-200); padding: var(--sp-500);
  text-align: center; background: var(--card); border-radius: var(--r-l); }
.ld-foot { border-top: var(--bw) solid var(--line); padding-block: var(--sp-400);
  padding-bottom: calc(var(--sp-400) + env(safe-area-inset-bottom, 0px)); color: var(--ink3); }
.ld-foot-row { display: flex; align-items: center; gap: var(--sp-300); }
.ld-foot-logo { display: flex; height: var(--sp-250); color: var(--ink2); }

@media (prefers-reduced-motion: reduce) {
  .ld-qrow, .ld-finger, .ld-door, .ld-cube, .ld-nt-bubble, .ld-sw-meter i, .ld-sw-scan, .ld-at-wall .ld-al-mod { transition: none; }
  .ld-bar i, .ld-app-screen, .ld-ln-card, .ld-ec-msg, .ld-al-mod, .ld-glows i, .ld-typing i,
  .ld-request-card::before { animation: none; }
}
html[data-motion="calm"] :is(.ld-glows i, .ld-typing i, .ld-request-card::before) { animation: none; }

/* 15.1224 («На большом экране выглядит мелко будто бы»): a wide screen gets a wider page, larger words, functions and
   devices — the station keeps the share of the screen it has on a laptop */
@media (min-width: 1600px) {
  .ld { --ld-wide: 1560px; --ld-h1: calc(var(--fs-num-xl) * 1.75); --ld-h2: calc(var(--fs-num-xl) * 1.2);
    --ld-say: calc(var(--fs-l) * 1.15); }
  .ld-device-laptop { max-width: min(1000px, calc((100svh - var(--ld-top) - var(--sp-600) * 2) * 1.5)); }
  .ld-device-phone { max-width: min(400px, calc((100svh - var(--ld-top) - var(--sp-600) * 2) * .485)); }
  .ld-station-text { gap: var(--sp-300); }
  .ld-feats { gap: var(--sp-250); }
  .ld-feat-pic, .ld-app-mark-tile { width: var(--sp-600); height: var(--sp-600); }
  .ld-feat-words b, .ld-feat-words > span { font-size: var(--fs-l); line-height: var(--lh-l); }
  .ld-app-mark b { font-size: calc(var(--fs-h) * 1.15); }
  .ld .ld-demo-note { font-size: var(--fs-s); }
}
@media (min-width: 2200px) {
  .ld { --ld-wide: 1840px; --ld-h2: calc(var(--fs-num-xl) * 1.4); --ld-say: calc(var(--fs-l) * 1.3); }
  .ld-device-laptop { max-width: min(1240px, calc((100svh - var(--ld-top) - var(--sp-600) * 2) * 1.5)); }
  .ld-device-phone { max-width: min(480px, calc((100svh - var(--ld-top) - var(--sp-600) * 2) * .485)); }
}

@media (max-width: 1100px) {
  .ld-nav { display: none; }
  .ld-top-acts { margin-left: auto; }
}
@media (max-width: 900px) {
  .ld { --ld-h1: var(--fs-num-xl); --ld-h2: var(--fs-num-l); --ld-band: calc(var(--sp-600) * 1.5); }
  .ld-station-grid, .ld-station-grid.ld-flip { grid-template-columns: minmax(0, 1fr); gap: var(--sp-300); }
  .ld-flip .ld-station-text { order: 0; }
  .ld-tariff-grid, .ld-request-grid { grid-template-columns: minmax(0, 1fr); }
  .ld-way-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-300); }
  .ld-way-step:not(:last-child)::after { top: 100%; left: calc(var(--sp-300) + var(--sp-300)); width: var(--bw-sel); height: var(--sp-300); }
  .ld-sum { position: static; }
  .ld-sum-list { display: none; }
}
/* 15.1178 («На телефоне можешь сделать более мелкие элементы и демонстрации, ибо у тебя они из-за крупности ничего не
   вмещают»): on a phone a station's words are short — the functions a row of small pictures with their names — and
   the device below them as large as the screen leaves room for, the program in it whole */
@media (max-width: 700px) {
  .ld { --ld-gutter: var(--sp-200); --ld-h1: var(--fs-num-l); --ld-h2: var(--fs-num-s); --ld-say: var(--fs); }
  .ld-station { padding-block: calc(var(--ld-top) + var(--sp-150)) var(--sp-200); }
  .ld-station-grid { gap: var(--sp-200); }
  .ld-station-text { gap: var(--sp-150); }
  .ld-station h2 { font-size: var(--fs-num); }
  .ld-station-mark { min-height: var(--sp-400); }
  .ld-station-mark svg { max-height: var(--sp-300); width: auto; }
  .ld-app-mark-tile { width: var(--sp-400); height: var(--sp-400); }
  .ld-app-mark b { font-size: var(--fs-l); }
  .ld-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-100); }
  .ld-feat { flex-direction: column; align-items: flex-start; gap: var(--sp-075); }
  .ld-feat-pic { width: var(--sp-400); height: var(--sp-400); border-radius: var(--r-s); }
  .ld-feat-words b { font-size: var(--fs-s); line-height: var(--lh-s); }
  .ld-feat-words > span { display: none; }
  .ld-device-laptop { max-width: 100%; }
  .ld-device-laptop .ld-bezel { padding: var(--sp-075) var(--sp-075) var(--sp-100); }
  .ld-device-phone { max-width: min(62vw, calc((100svh - 340px) * .485)); /* вне шкалы: the room the words leave */ }
  .ld-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 62svh; }
  .ld-app-nav { flex-direction: row; border-right: 0; border-bottom: var(--bw) solid var(--line); padding: var(--sp-100); overflow-x: auto; }
  .ld-app-item { flex: none; }
  .ld-app-top { display: none; }
  .ld-app-body { padding: var(--sp-150); }
  .ld-greet { font-size: var(--fs-h); margin-bottom: var(--sp-150); }
  .ld-tiles { grid-template-columns: minmax(0, 1fr); }
  .ld-tile-n { font-size: var(--fs-num-s); }
  .ld-dash-row { grid-template-columns: minmax(0, 1fr); }
  .ld-icon { width: calc(var(--sp-600) * 3); }
  .ld-sum { padding: var(--sp-200); }
  .ld-card-stage { margin: calc(var(--sp-200) * -1) calc(var(--sp-200) * -1) 0; padding-inline: var(--sp-200); }
  .ld-sum-note, .ld-sum-was { display: none; }
  .ld-sum-n { font-size: var(--fs-num-s); }
  .ld-tier { font-size: var(--fs-xs); padding-inline: var(--sp-025); }
  .ld-plan-line { padding-left: var(--sp-150); }
  .ld-plan-name .ld-dim { display: none; }
  .ld-foot-row { flex-wrap: wrap; }
}