/* 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.1306 («проблема с оттягиванием страницы вверх для обновления страницы на главной»): the page is never pulled past
   its top or bottom — no refresh by a pull, no spring */
html:has(body.ld), body.ld { overscroll-behavior-y: none; }
/* 15.939 («убрать выделения»): as in the program, text is not selected — only fields are */
/* 15.1269 («лого непереносимым невыделяемым сделай»): no picture or logo is dragged off the page or selected */
.ld img, .ld svg { -webkit-user-drag: none; user-select: none; }
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); }

/* 15.1358: the page under the capabilities' window does not scroll */
html.ld-locked:has(body.ld), html.ld-locked body.ld { overflow: hidden; overscroll-behavior: none; }

/* 15.1361: the catch lines of the phone's stepping (see the phone's block) */
.ld-catch { display: none; }

/* ─── 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; text-wrap: pretty; /* 15.1330: no lone last word */ }
.ld-hero h1 .ld-line { display: block; }
.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; }
/* 15.1281 («отодвинь преимущества от заголовка. отодвинь заголовок от названия»): the name, the title and the
   advantages stand apart as three steps */
.ld-station-mark + h2 { margin-top: var(--sp-100); }
.ld-station-text > .ld-feats { margin-top: var(--sp-200); }
.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)); }
/* 15.1321 («Иконка просчёта с первого раза не загружается»; «Всё равно иконки просчёта нет первой»): a phone's browser
   left the sign unpainted over the glass until the page was repainted — the sign was a sibling drawn over the glass's
   blurred layer, with a shadow filter of its own. The glass is a real element now and the sign is inside it, drawn with
   it; no filter on the sign */
.ld-glass { position: absolute; inset: 0; display: grid; place-items: center; 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 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); }
/* 15.1280 («почему у стара другого вида иконки?»): Star's as the others' — its own colour's tint, over its night */
.ld-tone-night .ld-feat-pic { color: color-mix(in srgb, var(--glow-a) 70%, #fff);
  background: linear-gradient(165deg, color-mix(in srgb, var(--glow-a) 28%, var(--star-night-2)),
                              color-mix(in srgb, var(--glow-a) 9%, var(--star-night-2))); }
.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(800px, calc((100svh - var(--ld-top) - var(--sp-600) * 2) * 1.7)); }
.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); }
/* 15.1252 («здесь ноут настилается на контент»): the base is as wide as the laptop's place, the lid narrower inside it —
   nothing reaches past the device's column */
.ld-device-laptop .ld-bezel { margin-inline: 6%; 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) 0 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 0 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 { display: block; width: 25px; color: var(--ink); /* вне шкалы: the battery's drawing */ }
.ld-bat svg { display: block; width: 100%; height: auto; }
.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); }
/* 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 */
/* 15.1290: Atom's splash over the program, as the program shows it while Atom takes a project apart */
.ld-at { position: relative; height: 100%; }
.ld-at-under { height: 100%; }
.ld-at-veil { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--sp-200);
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); }
.ld-at-card { gap: var(--sp-100); }
.ld-at .load-mark.ld-at-mark { width: var(--sp-500); height: var(--sp-500); margin-bottom: 0; display: grid; place-items: center; }
.ld-at .load-picture.ld-at-picture { width: min(100%, 420px); /* вне шкалы: the drawing's place in the shrunk program */ }
/* 15.1351 («анимация атома слишком цветастая, она в оригинале гораздо менее насыщенная»): the drawing is a few times
   smaller than in Atom's own window while its glow kept the window's blur — the glow scaled to the drawing and quieter */
.ld-at .load-picture canvas { filter: saturate(.62); }
.ld-at .load-picture canvas.sketch-glow.shown { filter: blur(var(--sp-075)) saturate(.62); opacity: .4; }
:root:not([data-theme="dark"]) .ld-at .load-picture canvas.sketch-glow.shown { opacity: .25; }

/* 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); }
/* 15.1256: the card carried to the next stage rides over the others, lifted */
.ld-ln-card.ld-carried { position: relative; z-index: 2; box-shadow: var(--sh-overlay), inset 0 0 0 var(--bw-sel) var(--acc); }
/* 15.1292: a card under the hand — it never scrolls the page or selects, the stage under it lights */
.ld-ln-card { touch-action: none; cursor: grab; }
.ld-ln-card.ld-held { cursor: grabbing; transition: none; }
.ld-ln-col.ld-ln-over { background: color-mix(in srgb, var(--acc) 12%, var(--a-100)); }
.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); }
.ld-ro-peek-words { display: flex; flex-direction: column; min-width: 0; }
.ld-ro-peek-words > .num { white-space: nowrap; }

/* 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); }
  /* 15.1309 («На мобилках же можно было предпросмотр экрана больше сделать… а стрелки поместишь по краям самой карточки,
     а не просмотра»): the picture runs across the window's whole width, the device in it as wide as it allows; the
     arrows at the window's own edges */
  .ld-tour .slides-view { margin-inline: calc(var(--pad-side, var(--sp-300)) * -1); }
  .ld-tour .slides-pic { border-radius: 0; }
  .ld-tour .slides-back { left: var(--sp-100); }
  .ld-tour .slides-next { right: var(--sp-100); }
}
.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); }
/* 15.1304: a capability's slide carries its station's lights — the station's tone, the lights at the slide's measure */
.ld-tv-calm.ld-tv-toned { background: var(--field2); }
.ld-tv-toned { isolation: isolate; }
.ld-tv-toned .ld-glows i { width: 80%; opacity: .32; }
.ld-tv-toned .ld-glows i:nth-child(1) { left: -22%; top: -40%; }
.ld-tv-toned .ld-glows i:nth-child(2) { right: -25%; bottom: -45%; left: auto; top: auto; }
.ld-tv-toned .ld-glows i:nth-child(3) { left: 35%; top: 25%; width: 50%; opacity: .2; }
/* 15.1372 («у лайна и у отслеживаемых кп одинаковые цвета, а у мультизаказа цветов вообще нет. Проверь там вообще все
   карточки»): every slide its own lights — the base the program's green with gold, Line its logo's indigo and azure, the
   tracked proposals cyan, the multi-order rose and violet, the economy gold and orange; the others as their stations */
.ld-tv-toned.ld-tone-base { --tone: var(--acc-solid); --glow-a: var(--acc); --glow-b: var(--tag-amber); }
.ld-tv-toned.ld-tone-line { --tone: var(--line-3); --glow-a: var(--line-3); --glow-b: var(--line-2); }
.ld-tv-toned.ld-tone-watch { --tone: var(--tag-teal); --glow-a: var(--tag-teal); --glow-b: var(--tag-sky); }
.ld-tv-toned.ld-tone-multi { --tone: var(--tag-rose); --glow-a: var(--tag-rose); --glow-b: var(--tag-violet); }
.ld-tv-toned.ld-tone-gold { --tone: var(--tag-amber); --glow-a: var(--tag-amber); --glow-b: var(--tag-orange); }

/* ─── 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: clip; background: var(--bg); }
/* 15.1239: the living ground behind 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); }
/* 15.1285 («на мобилке не видно огоньков, потому что экран длиннющий… Сделай их больше и подвижнее»), 15.1297 («я
   сказал только на мобиле поменять»): on a phone alone the ground stands in view while the long section scrolls by — a
   screen tall, held at the top — its lights large and wandering over it */
@media (max-width: 700px) {
  .ld-tariff-ground { position: sticky; inset: auto; top: 0; height: 100lvh;
    margin: calc(var(--ld-band) * -1) 0 calc(var(--ld-band) - 100lvh); /* 15.1326: the largest view — the bar folded */ }
  /* 15.1302 («огни можешь уменьшить, их незачем тогда держать огромными»): the ground stands in view, the lights at a
     screen's measure */
  .ld-tariff-ground .login-orb { width: 120cqw; height: 120cqw; margin: -60cqw 0 0 -60cqw; filter: blur(4cqmin) opacity(var(--lit, 0)); }
  .ld-tariff-ground .login-orb-1 { animation: orb-glow-a 9s ease-in-out infinite, ld-wander-a 13s ease-in-out infinite alternate; }
  .ld-tariff-ground .login-orb-2 { animation: orb-glow-b 13s ease-in-out infinite, ld-wander-b 11s ease-in-out infinite alternate; }
  .ld-tariff-ground .login-orb-3 { animation: orb-glow-a 11s ease-in-out infinite, ld-wander-c 15s ease-in-out infinite alternate; }
  .ld-tariff-ground .login-orb-4 { animation: orb-glow-b 8s ease-in-out infinite, ld-wander-b 12s ease-in-out infinite alternate-reverse; }
  .ld-tariff-ground .login-orb-5 { animation: orb-glow-a 7s ease-in-out infinite, ld-wander-a 10s ease-in-out infinite alternate-reverse; }
}
@keyframes ld-wander-a { to { transform: translate(28cqw, 22cqh) scale(1.15); } }
@keyframes ld-wander-b { to { transform: translate(-30cqw, 18cqh) scale(.9); } }
@keyframes ld-wander-c { to { transform: translate(18cqw, -26cqh) scale(1.1); } }
.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; }
/* 15.1298 («в одну высоту их сделай»): on a computer the parts' list stands as tall as the card beside it — its rows
   share the room equally */
@media (min-width: 901px) {
  .ld-tariff-grid > .ld-plan, .ld-tariff-grid > .ld-sum { align-self: stretch; }
  .ld-sum > a.btn.primary:last-of-type { margin-top: auto; }
  .ld-plan > .ld-plan-row { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
}
/* 15.1285 («сами строчки пусть будут матовым стеклом»): the rows are frosted glass over the lights */
.ld-plan-row { border-radius: var(--r-l); background: color-mix(in srgb, var(--card) 58%, transparent);
  backdrop-filter: blur(var(--sp-250)) saturate(1.4); -webkit-backdrop-filter: blur(var(--sp-250)) saturate(1.4);
  box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--ink) 8%, transparent); transition: background var(--dur-fold); }
.ld-plan-row.ld-chosen { background: color-mix(in srgb, var(--acc) 14%, color-mix(in srgb, var(--card) 58%, transparent)); }
.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); }
/* 15.1320: the protection's row — a phone's card screen with the room only */
.ld-guard { display: none; }
.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 */
/* 15.1301 («карточка лицензии в тарифах должна лежать поверх своей рамки»): the card's drawing (its canvas has room
   around the card for its lean) lies over the stage and the frame — never clipped at any angle */
.ld-card-stage { position: relative; z-index: 1; overflow: visible; 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; }
/* 15.1364 («в загрузке вот эта хуйня висит зачем-то»): while the metal card is being made, the page's own flat drawing
   of it (the kit's place and fallback) is not shown; it comes only if the metal has not come in 4 s (no WebGL) */
.ld-card-stage .sub-card:not(.sub-card-cast) {
  animation: sub-card-float 7s ease-in-out infinite, ld-plate-late .4s var(--ease-out) 4s backwards; }
@keyframes ld-plate-late { from { opacity: 0; } }
.ld-card-stage .sub-card-holder { width: 100%; padding-block: var(--sp-100); touch-action: none; }
/* 15.1283 («когда удерживаешь палец на карточке в тарифах - пролистывания не должно быть»): a finger on the card turns
   it — the page is not scrolled under it */
.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-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; }
.ld-request-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-250); }
/* 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 { transition: none; }
  .ld-bar i, .ld-app-screen, .ld-ln-card, .ld-ec-msg, .ld-al-mod, .ld-glows i, .ld-typing i, .ld-tariff-ground .login-orb,
  .ld-request-card::before { animation: none; }
}
html[data-motion="calm"] :is(.ld-glows i, .ld-typing i, .ld-request-card::before) { animation: none; }

/* 15.1299 («На телефоне пролистывание щелчками сделать строгим, чтобы листалось как в тиктоке, ровно по экранам»): a
   phone's own snapping — one swipe, one screen: every station a stop that is never flown past; the first screen and
   the bands after the stations are stops too, taller ones read through freely */
@media (max-width: 700px) {
  html:has(body.ld) { scroll-snap-type: y mandatory; }
  /* 15.1314, 15.1357, 15.1361 («СДЕЛАЙ ТАМ ЩЕЛЧОК КАК В СТАНЦИЯХ ВЫШЕ, НО СНИЗЬ ПОРОГ СРАБАТЫВАНИЯ… ПРИ БЫСТРОЙ
     ПРОКРУТКЕ ПУСТЬ СРАБАТЫВАЕТ СРАЗУ, ПРИ МЕДЛЕННОЙ ПУСТЬ ДАЁТ НЕМНОГО НАЕХАТЬ НА СЕБЯ»): the tariff and everything below
     it are one area (`.ld-tail`, a stop at its top) — the browser rests anywhere in it, as long as no other snapping
     edge is on the screen; the tariff's card and the request are caught by a line at their foot (`.ld-catch`,
     end-aligned, a stop): it enters the screen only at the block's own place, so a slow scroll runs onto a block freely
     while a fling stops at it; the script brings a block resting 40 % seen into place. A link's jump goes unsnapped
     (`ld-jump`). */
  .ld-scene, .ld-station { scroll-snap-align: start; }
  .ld-tail { scroll-snap-align: start; scroll-snap-stop: always; }
  html.ld-jump:has(body.ld) { scroll-snap-type: none; }
  /* 15.1375: a field typed in — the keyboard opens and closes without the snapping (landing.js) */
  html.ld-typing:has(body.ld) { scroll-snap-type: none; }
  .ld-catch { display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none;
    scroll-snap-align: end; scroll-snap-stop: always; overflow-anchor: none; }
  .ld-catch.off { scroll-snap-align: none; }
  /* 15.1367 («она просто сместилась»): relative for its catch line only — the computer's sticky offset (top) not carried */
  .ld-tariff .ld-sum { position: relative; top: 0; }
  /* the card's line 16 under its foot — the screen's foot when the card stands under the header */
  .ld-sum > .ld-catch { top: calc(100% + var(--sp-200) - 1px); }
  /* the request's line a screen under its top — the screen's foot when its top stands under the header */
  #request > .ld-catch { top: calc(100svh - var(--ld-top) - 1px); }
  .ld-station { scroll-snap-stop: always; }
  /* 15.1307: a fling from the stations stops at the tariff's top (the tail's) — never flown to its end */
  /* 15.1306: the first screen stops at the page's very top, under the header — the page was pulled up by the header's
     height to the first screen's own start */
  .ld-hero { scroll-margin-top: calc(var(--ld-top) + var(--sp-200)); /* past the top: clamped to the very top */ }
}

/* 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(1130px, calc((100svh - var(--ld-top) - var(--sp-600) * 2) * 1.7)); }
  .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(1400px, calc((100svh - var(--ld-top) - var(--sp-600) * 2) * 1.7)); }
  .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; }
}
/* 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 h2 { font-size: var(--fs-num); }
  .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); }
  /* 15.1276, 15.1277 («преимущества не в ряд сделать а вертикально»; «подписи под заголовки»), 15.1278 («сломал все
     иконки, сжал, дохуиллион текста… тесно и скомканно»): on a phone a station says its title and its three advantages —
     one under another, the pictures as large as on a computer, air between them; the lead stays for the computer */
  .ld-station .ld-lead { display: none; }
  .ld-feats { gap: var(--sp-200); }
  .ld-feat { gap: var(--sp-150); }
  .ld-feat-words b { font-size: var(--fs); line-height: var(--lh); }
  .ld-feat-words > span { font-size: var(--fs-s); line-height: var(--lh-s); }
  .ld-device-laptop .ld-bezel { padding: var(--sp-075) var(--sp-075) var(--sp-100); }
  /* 15.1270, 15.1282 («можешь вернуть в принципе прокрутку экранами на телефоны, если количество контента останется как
     в новом варианте»): on a phone a station is the screen's height again — its name, title and three advantages with
     the air of 15.1279 and 15.1281, the device in the room left, sized by that room (a laptop ≈ 0.575 of its width tall
     plus its base and note, a phone ≈ twice its width); the same measures for every station */
  /* 15.1326 («На айфонах в новых браузерах нижняя панель сворачивается и оголяет кусок следующей станции»): a station
     is the large screen — the browser's bars folded — so nothing of the next one shows; 15.1408 («при движении страницы
     лендинга вверх-вниз постоянно меняются панели инструментов… интерфейс лендинга реагирует… с рывками и
     подёргиванием»): never the screen's current height (dvh), which changes while the bars fold and moved every station
     above — the content keeps to the small screen (the bars out), the difference is air at the foot, under the bars */
  .ld-station { height: 100svh; height: 100lvh; min-height: 0; display: flex; flex-direction: column;
    padding-block: calc(var(--ld-top) + var(--sp-200)) var(--sp-200);
    padding-block: calc(var(--ld-top) + var(--sp-200)) calc(var(--sp-200) + 100lvh - 100svh); }
  .ld-station > .ld-station-grid { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: var(--sp-300); }
  .ld-station-text { flex: none; gap: var(--sp-200); }
  .ld-station-mark { height: var(--sp-400); display: flex; align-items: center; }
  .ld-station-pic { flex: 1 1 0; min-height: 0; align-self: stretch; container-type: size; justify-content: flex-end; }
  .ld-station-pic .ld-device-laptop { width: min(100cqw, calc((100cqh - 80px) * 1.72)); max-width: none;
    /* вне шкалы: the laptop's base and note */ }
  .ld-station-pic .ld-device-phone { width: min(100cqw, calc((100cqh - 48px) * .5)); max-width: none;
    /* вне шкалы: the phone's note */ }
  /* the note across the column, not the narrow device — two lines at most */
  .ld .ld-station .ld-demo-note { width: calc(100vw - var(--ld-gutter) * 2); margin: var(--sp-100) 0 0;
    margin-inline: calc((100% - (100vw - var(--ld-gutter) * 2)) / 2); }
  .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); }
  /* 15.1327 («первый экран тоже должен пролистнуться щелчком, он слишком долго открывается и слишком длинный»): on a
     phone the first screen is one screen; one swipe — the first station */
  .ld-scene.ld-hero { --p: 0 !important; scroll-snap-stop: always;
    /* under the header: the header and the first screen are the screen; a short one — the words and a part of the
       window still (then it scrolls through) */
    height: max(calc(100svh - var(--ld-top)), calc(var(--rise, 0px) + var(--sp-600) + var(--sp-500)));
    /* 15.1408: the large screen, steady while the bars fold */
    height: max(calc(100lvh - var(--ld-top)), calc(var(--rise, 0px) + var(--sp-600) + var(--sp-500))); }
  .ld-hero .ld-sticky { height: 100%; }
  .ld-hero-text { padding-top: var(--sp-500); opacity: 1; transform: none; }
  /* 15.1330 («Если не лезет - то уменьшай… слово "себя" в конце не нужно одним оставлять - чуть уменьши шрифт»): each
     sentence of the title on its own line, the size giving way to the width (the longer line is 12.7 of its size
     wide); the words under it a little smaller */
  .ld-hero h1 { font-size: min(var(--ld-h1), calc((100vw - var(--ld-gutter) * 2) / 12.9)); }
  .ld-hero h1 .ld-line { white-space: nowrap; }
  .ld-hero-text .ld-lead { font-size: calc(var(--ld-say) * .94); }
  /* 15.1329 («А где интерфейс который был внизу первого экрана?»; «А зачем его уменьшил? Он должен был быть на пол
     экрана, чтобы заставить человека пролистнуть ниже как было раньше»): the program's window at its own size under the
     buttons, cut by the screen's foot — the rest of it is below */
  .ld-hero-app { transform: none; }
  /* 15.1315 («Вот эта часть тоже должна быть на весь экран телефона»): the card, the place and the price — a screen
     of their own as a station is: from under the header to the screen's foot, a stop of the phone's stepping; the card
     with its tiers at the top, the price and the request at the foot, the place between them in the middle (15.1319:
     «Слишком одиноко и свободно карточка теперь стоит» — the card alone in the middle of the room) */
  /* 15.1408: the small screen — whole with the bars out, steady while they fold */
  .ld-sum { padding: var(--sp-200); height: calc(100svh - var(--ld-top) - var(--sp-400)); min-height: 0;
    container-type: size;
    /* its place under the header — the script settles it there (15.1361) */
    scroll-margin-top: calc(var(--ld-top) + var(--sp-200)); }
  .ld-sum > .ld-place:not(.ld-guard) { margin-block: auto; }
  .ld-sum > .ld-place + .ld-guard { margin-top: calc(var(--sp-200) * -1); border-top: 0; }
  .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; }
  /* 15.1410: a part the card's room does not hold (measured by the script) */
  .ld-sum > .ld-spare-off { display: none !important; }
  .ld-sum.ld-sum-grow { height: auto; min-height: calc(100svh - var(--ld-top) - var(--sp-400)); container-type: inline-size; }
  /* 15.1319: a screen with the room shows the full set's offer under the price as a computer does */
  @container (min-height: 600px) {
    .ld-sum > .ld-guard { display: flex; margin-bottom: auto; }
    .ld-sum > .ld-place:has(+ .ld-guard) { margin-bottom: 0; }
  }
  @container (min-height: 700px) {
    .ld-sum > .ld-sum-note { display: flex; }
    .ld-sum > .ld-sum-was:not(:empty) { display: block; }
  }
  .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; }
  /* 15.1337 («Этот экран тоже на весь экран мобилки сделай»), 15.1342 («А где заполнение заявки?» — the words alone on a
     screen once the long text was gone): the title, the promises and the form start right under the header; a link to
     the request lands it there */
  #request { scroll-margin-top: var(--ld-top); }
  /* 15.1344 («Почему низ карточки не влез? Ну вместил бы»): the words, the promises and the whole form in one screen —
     the gaps a step tighter; 15.1346 («Почему снизу отступ больше чем сверху?»): the screen under the header, all of it
     in its middle — the same air above and below */
  .ld-request { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--sp-200); min-height: calc(100svh - var(--ld-top)); }
  .ld-request > .ld-wrap { width: 100%; }
  .ld-request-grid { gap: var(--sp-300); }
  .ld-request-card { padding: var(--sp-300); gap: var(--sp-200); }
  /* 15.1345 («И маску заполнения вправо упри, почему сместилось?»): the fields' values at the right as on a computer —
     a narrow row group (`rowgroup.css`, a container under 360) put them after the label; the same chain, one step more */
  :root .ld-form .rg-group .rg-row > :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input)) {
    text-align: right; }
  /* 15.1339 («Покажем деос на вашей компании можешь сделать справа от лого просто, текст увеличишь как раз»): the title
     beside the icon, larger */
  .ld-request-head { flex-direction: row; align-items: center; gap: var(--sp-200); }
  .ld-request-head h2 { font-size: var(--fs-num-l); line-height: 1.12; }
  /* 15.1338, 15.1340, 15.1341: on a phone the words under the title, the data's note and the card's line are left out */
  .ld-request-lead, .ld-request-card-head > .ld-dim, .ld-form .rg-foot { display: none; }
}