/* ==========================================================================
   Страница расширения: одна демонстрационная сцена, которая меняется
   по мере прокрутки. Никакого 3D и никаких библиотек — слои, маски,
   прозрачность и масштаб.

   Всё внутри рамки считается от её ширины (cqw), поэтому сцена
   пропорционально ужимается вместе со страницей.
   ========================================================================== */

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* ── рамка браузера с картой НСПД ─────────────────────────────────────────── */

.frame {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #16181c;
  overflow: hidden;
  box-shadow: 0 40px 90px -52px rgba(0, 0, 0, .96);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
}

.frame__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.frame__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .13); }

.frame__url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Две рамки занимают одну высоту и плавно сменяют друг друга. */
.frame__chrome { position: relative; height: 44px; }
.frame__chrome .frame__bar { position: absolute; inset: 0; transition: opacity .8s ease; }
.frame__program {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #181a1d;
  transition: opacity .8s ease;
  font-size: 11px;
  color: #b8bec6;
}
.frame__program-title { display: flex; justify-content: space-between; align-items: center; height: 24px; padding-inline: 13px; }
.cad-program-name { display: inline-flex; align-items: center; gap: 7px; }
.cad-program-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.frame__document { height: 20px; border-bottom: 1px solid var(--line); }
.frame__document > span { display: inline-flex; align-items: center; gap: 22px; height: 100%; padding-inline: 13px; background: #282c32; color: #eee; font-size: 10px; }
.frame__document i { color: #9aa1aa; font-style: normal; }
.frame.is-program .frame__bar { opacity: 0; }
.frame.is-program .frame__program { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .frame__chrome .frame__bar, .frame__program { transition: none; }
}

.frame__body {
  position: relative;
  aspect-ratio: 2.1;
  background: #e9edf0;
  overflow: hidden;
  container-type: inline-size;

  /* общая палитра светлых панелей внутри рамки */
  --ink: #111827;
  --label: #6b7280;
  --rule: #dfe3e9;
  --field: #f6f8fa;
  --field-line: #c2cad3;
  --panel: #eceff3;
  --blue: #1a6fc4;
}

/* ── слои карты ──────────────────────────────────────────────────────────── */

.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .75s ease, transform 1.15s cubic-bezier(.32, .72, .28, 1);
  will-change: opacity, transform;
}

.layer.is-on { opacity: 1; }
.layer:not(.is-on) { pointer-events: none; }
.layer > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── проход «покрытия» по стране ──────────────────────────────────────────
   Сверху лежит та же карта, но с подкрашенными регионами; маска открывает
   её слева направо, и страна как будто «включается». */

.coverage {
  position: absolute;
  inset: 0;
  opacity: 0;
  -webkit-mask-image: linear-gradient(97deg, #000 0%, #000 var(--p), transparent calc(var(--p) + 13%));
          mask-image: linear-gradient(97deg, #000 0%, #000 var(--p), transparent calc(var(--p) + 13%));
  transition: opacity .5s ease, --p 2.9s cubic-bezier(.5, 0, .5, 1);
}

.coverage.is-on { opacity: 1; }
.coverage img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── плашка со счётчиком ─────────────────────────────────────────────────── */

.stat {
  position: absolute;
  left: 2.4cqw;
  bottom: 2.4cqw;
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: .75em 1.15em;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(10, 10, 11, .86);
  backdrop-filter: blur(7px);
  font-size: max(11px, 1.15cqw);
  color: var(--text);
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .3, 1);
}

.stat.is-on { opacity: 1; transform: none; }
.stat b { font-size: 1.75em; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); }

/* ── подписи систем координат поверх регионов ────────────────────────────── */

.tag {
  position: absolute;
  transform: translate(-50%, -50%) scale(.88);
  padding: .42em .85em;
  border-radius: 999px;
  border: 1px solid rgba(255, 74, 23, .55);
  background: rgba(18, 9, 5, .88);
  font-family: var(--mono);
  font-size: max(10px, 1.1cqw);
  font-weight: 600;
  letter-spacing: .02em;
  color: #ffb79f;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1);
}

.tag.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tag--e.is-on { transform: translate(-100%, -50%) scale(1); }

/* ── контур одного участка ───────────────────────────────────────────────── */

.parcel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.parcel polygon {
  fill: #ff4a17;
  fill-opacity: 0;
  stroke: #ff4a17;
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  filter: drop-shadow(0 0 7px rgba(255, 74, 23, .8));
  transition: stroke-dashoffset 1.15s cubic-bezier(.4, 0, .2, 1),
              fill-opacity .55s ease .75s;
}

.parcel.is-drawn polygon { stroke-dashoffset: 0; fill-opacity: .24; }

/* ── затемнение всего, кроме выбранного участка ──────────────────────────── */

.spot {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 9, .44);
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 17% 36% at var(--sx, 50%) var(--sy, 50%),
                                      transparent 0 34%, #000 100%);
          mask-image: radial-gradient(ellipse 17% 36% at var(--sx, 50%) var(--sy, 50%),
                                      transparent 0 34%, #000 100%);
}

.spot.is-on { opacity: 1; }

/* ══════════════════════════════════ КОНТУР ТЕРРИТОРИИ ════════════════════ */
/* Вершины ставятся по очереди, линия растёт следом, потом контур
   замыкается заливкой — как если бы область рисовали мышью. */

.terr, .geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.terr polygon {
  fill: #ff4a17;
  fill-opacity: 0;
  stroke: #ff4a17;
  stroke-width: 2.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 2400);
  stroke-dashoffset: calc(var(--len, 2400) * -1);
  transition: stroke-dashoffset 1.25s linear, fill-opacity .7s ease;
}

.terr.is-drawn polygon { stroke-dashoffset: 0; }
.terr.is-full polygon { fill-opacity: .1; }

.terr circle {
  fill: #fff;
  stroke: #ff4a17;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.2);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, 1.4, .5, 1);
}

.terr circle.is-on { opacity: 1; transform: scale(1); }

/* 76 участков внутри контура: загораются волной слева направо */
.geo polygon {
  fill: #ff4a17;
  fill-opacity: 0;
  stroke: #ff4a17;
  stroke-opacity: 0;
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill-opacity .45s ease, stroke-opacity .45s ease;
  transition-delay: calc(var(--i, 0) * 9ms);
}

.geo.is-on polygon { fill-opacity: .2; stroke-opacity: .9; }
.geo.is-hot polygon { fill-opacity: .42; stroke-opacity: 1; transition-duration: .18s; }

/* ══════════════════════════════ карточка объекта НСПД ════════════════════ */
/* Не скриншот, а вёрстка — поэтому у неё есть состояния: определение
   системы координат, нажатие кнопки, прогресс, готовый файл. */

.obj {
  position: absolute;
  top: 4.4cqw;
  left: 2.6cqw;
  width: 33cqw;
  min-width: 148px;
  border: 1px solid #d4dae1;
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: max(9.5px, 1.3cqw);
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 1.6em 3.4em -1.6em rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateX(-1.6em);
  transition: opacity .5s ease, transform .65s cubic-bezier(.2, .8, .3, 1);
}

.obj.is-on { opacity: 1; transform: none; }

.obj__head { padding: .95em 1.1em .85em; }
.obj__back { display: block; font-size: .92em; color: var(--blue); }
.obj__title { margin-top: .5em; font-size: 1.12em; font-weight: 650; letter-spacing: -.01em; }

.obj__bar {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 0 1.1em .9em;
}

.obj__select {
  display: flex;
  align-items: center;
  gap: .5em;
  height: 2.6em;
  padding: 0 .8em;
  border: 1px solid var(--field-line);
  border-radius: .6em;
  background: var(--field);
  font-size: .96em;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.obj__select::after {
  content: "";
  width: .42em; height: .42em;
  border-right: .13em solid #55606f;
  border-bottom: .13em solid #55606f;
  transform: translateY(-.15em) rotate(45deg);
}

.obj__select.is-hot { border-color: var(--blue); box-shadow: 0 0 0 .22em rgba(26, 111, 196, .2); }

.obj__btn {
  display: grid;
  place-items: center;
  height: 2.6em;
  padding: 0 1.1em;
  border-radius: .6em;
  background: var(--blue);
  font-size: .96em;
  font-weight: 650;
  color: #fff;
  white-space: nowrap;
  transition: transform .18s ease, filter .18s ease;
}

.obj__btn.is-press { transform: scale(.94); filter: brightness(.88); }

/* строка «система координат определена» */
.obj__crs {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 1.1em .9em;
  padding: .5em .7em;
  border-radius: .5em;
  background: rgba(70, 160, 110, .13);
  font-size: .92em;
  color: #1d6b45;
  opacity: 0;
  transform: translateY(-.2em);
  transition: opacity .45s ease, transform .45s ease;
}

.obj__crs.is-on { opacity: 1; transform: none; }
.obj__crs i { width: .45em; height: .45em; border-radius: 50%; background: #2f9e68; flex: 0 0 auto; }

/* прогресс, готовый файл и программы — только в геройской демонстрации */
.obj__prog {
  height: 0;
  margin: 0 1.1em;
  border-radius: 999px;
  background: #dbe0e7;
  overflow: hidden;
  opacity: 0;
  transition: height .3s ease, opacity .3s ease, margin .3s ease;
}

.obj__prog.is-on { height: .32em; opacity: 1; margin-bottom: .9em; }
.obj__prog i { display: block; width: 0; height: 100%; background: var(--blue); transition: width 1.15s cubic-bezier(.4, 0, .3, 1); }
.obj__prog.is-run i { width: 100%; }

.obj__file {
  display: flex;
  align-items: center;
  gap: .55em;
  margin: 0 1.1em .9em;
  padding: .55em .75em;
  border: 1px solid #bfd6ea;
  border-radius: .5em;
  background: #eaf2fa;
  font-size: .92em;
  font-weight: 600;
  opacity: 0;
  transform: translateY(.35em);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .3, 1);
}

.obj__file.is-on { opacity: 1; transform: none; }
.obj__file svg { flex: 0 0 auto; color: var(--blue); }
.obj__file span { margin-left: auto; color: #2f9e68; font-weight: 650; }

.obj__apps {
  display: flex;
  gap: .5em;
  margin: 0 1.1em 1em;
  opacity: 0;
  transform: translateY(.35em);
  transition: opacity .45s ease, transform .45s ease;
}

.obj__apps.is-on { opacity: 1; transform: none; }

.obj__apps b {
  padding: .4em .7em;
  border: 1px solid #cfd6de;
  border-radius: 999px;
  background: var(--field);
  font-size: .88em;
  font-weight: 600;
  color: #3a4653;
}

.obj__rows { padding: 0 1.1em 1em; }

.obj__row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: .8em;
  padding: .5em 0;
  border-top: 1px solid var(--rule);
  font-size: .93em;
}

.obj__row span { color: var(--label); }
.obj__row b { font-weight: 600; }

/* ═══════════════════════════ боковая панель расширения ═══════════════════ */
/* Панель Chrome живёт справа. В ней собирают территорию: кварталы или
   контур на карте, формат, проверка, экспорт. */

.side {
  position: absolute;
  top: 2.6cqw;
  right: 2.4cqw;
  width: 27cqw;
  min-width: 150px;
  border: 1px solid #d4dae1;
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: max(9.5px, 1.28cqw);
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 1.6em 3.4em -1.6em rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateX(1.6em);
  transition: opacity .5s ease, transform .65s cubic-bezier(.2, .8, .3, 1);
}

.side.is-on { opacity: 1; transform: none; }
.side:not(.is-on) { pointer-events: none; }

.side__tabs { display: grid; grid-template-columns: 1fr 1fr; background: #dde2e8; }

.side__tab {
  display: grid;
  place-items: center;
  padding: .55em .4em;
  min-height: 2.9em;
  font-size: .88em;
  line-height: 1.18;
  font-weight: 600;
  color: #59636f;
  text-align: center;
  transition: background .25s ease, color .25s ease;
}

.side__tab.is-on { background: var(--panel); color: #0d1b2a; }
.side__tab--object { font-size: 7px; font-weight: 400; }

.side__body { display: grid; gap: .68em; padding: .8em .85em .85em; }
.side__field { display: grid; gap: .35em; }

.side__label {
  font-size: .8em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--label);
}

.side__area {
  padding: .45em .6em;
  border: 1px solid var(--field-line);
  border-radius: .55em;
  background: var(--field);
  font-family: var(--mono);
  font-size: .85em;
  line-height: 1.5;
}

.side__row { display: flex; gap: .5em; }

.side__chip {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .42em .65em;
  border: 1px solid var(--field-line);
  border-radius: .55em;
  background: var(--field);
  font-size: .86em;
  font-weight: 600;
  color: #3a4653;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.side__chip.is-hot { border-color: var(--blue); color: var(--blue); background: #eaf2fa; }

/* выпадающий список форматов */
.side__select {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  height: 2.5em;
  padding: 0 .7em;
  border: 1px solid var(--field-line);
  border-radius: .55em;
  background: var(--field);
  font-size: .93em;
  font-weight: 600;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.side__select::after {
  content: "";
  width: .4em; height: .4em;
  border-right: .13em solid #55606f;
  border-bottom: .13em solid #55606f;
  transform: translateY(-.15em) rotate(45deg);
  transition: transform .25s ease;
}

.side__select.is-open {
  border-color: var(--blue);
  box-shadow: 0 0 0 .2em rgba(26, 111, 196, .18);
}

.side__select.is-open::after { transform: translateY(.05em) rotate(225deg); }

.side__list {
  position: absolute;
  left: -1px; right: -1px;
  top: calc(100% + .3em);
  z-index: 3;
  margin: 0;
  padding: .25em;
  list-style: none;
  border: 1px solid var(--field-line);
  border-radius: .55em;
  background: #fff;
  box-shadow: 0 1em 2em -.8em rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateY(-.35em);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.side__select.is-open .side__list { opacity: 1; transform: none; }
.side__list li { padding: .35em .5em; border-radius: .35em; font-weight: 500; color: #3a4653; }
.side__list li.is-pick { background: var(--blue); color: #fff; font-weight: 650; }

/* подсказка и результат делят одну ячейку: высота панели не скачет,
   а до проверки на этом месте стоит осмысленный текст */
.side__swap { display: grid; }
.side__swap > * { grid-area: 1 / 1; }

.side__hint {
  margin: 0;
  align-self: center;
  font-size: .88em;
  line-height: 1.5;
  color: var(--label);
  opacity: 0;
  transition: opacity .35s ease;
}

.side__hint.is-on { opacity: 1; }

/* результат проверки территории */
.side__result {
  display: grid;
  gap: .35em;
  padding: .5em .65em;
  border-radius: .55em;
  background: rgba(70, 160, 110, .12);
  opacity: 0;
  transform: translateY(-.3em);
  transition: opacity .45s ease, transform .45s ease;
}

.side__result.is-on { opacity: 1; transform: none; }
.side__result > b { font-size: 1.05em; color: #1d6b45; }
.side__result > b span { font-size: 1.5em; font-weight: 700; letter-spacing: -.02em; }

.side__rows { display: grid; gap: .2em; }

.side__rows div {
  display: flex;
  justify-content: space-between;
  gap: .6em;
  font-size: .88em;
  color: #3d4b44;
}

.side__rows b { font-variant-numeric: tabular-nums; }

/* прогресс и готовый файл появляются вместе с высотой */
.side__out {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.3, .7, .3, 1);
}

.side__out > div { display: grid; gap: .5em; min-height: 0; overflow: hidden; }
.side__out.is-on { grid-template-rows: 1fr; }

.side__prog {
  height: 0;
  border-radius: 999px;
  background: #dbe0e7;
  overflow: hidden;
  opacity: 0;
  transition: height .3s ease, opacity .3s ease;
}

.side__prog.is-on { height: .32em; opacity: 1; }
.side__prog i { display: block; width: 0; height: 100%; background: var(--blue); transition: width 1.2s cubic-bezier(.4, 0, .3, 1); }
.side__prog.is-run i { width: 100%; }

.side__file {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .42em .6em;
  border: 1px solid #bfd6ea;
  border-radius: .5em;
  background: #eaf2fa;
  font-size: .86em;
  font-weight: 600;
  opacity: 0;
  transform: translateY(.35em);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .3, 1);
}

.side__file.is-on { opacity: 1; transform: none; }
.side__file svg { flex: 0 0 auto; color: var(--blue); }
.side__file em { margin-left: auto; font-style: normal; color: #2f9e68; font-weight: 650; }

.side__foot { display: grid; gap: .5em; }
.side__rule { height: 1px; background: var(--rule); }

.side__btn {
  display: grid;
  place-items: center;
  height: 2.4em;
  border-radius: .55em;
  background: var(--blue);
  font-size: .93em;
  font-weight: 650;
  color: #fff;
  transition: transform .18s ease, filter .18s ease;
}

.side__btn b { font-weight: inherit; }
.side__btn b + b { display: none; }
.side__btn.is-next b { display: none; }
.side__btn.is-next b + b { display: block; }
.side__btn.is-press { transform: scale(.96); filter: brightness(.88); }

/* ═══════════════════════════════════ AutoCAD ══════════════════════ */
/* Та же геометрия в тех же координатах: карта растворяется, линии остаются.
   Полотно лежит внутри слоя (и двигается вместе с ним), а обвязка —
   на уровне сцены, чтобы не ехать за масштабом. */

.cad {
  position: absolute;
  inset: 0;
  background: #0e1013;
  transition: background .6s ease;
}

.cad::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 5.2% 11%;
  transition: opacity .6s ease;
}

.cad__geo { position: absolute; inset: 0; width: 100%; height: 100%; }
.cad__parcel-labels { fill: #ff6a3d; font-family: var(--mono); font-size: 13px; text-anchor: middle; dominant-baseline: central; }

.cad__geo polygon {
  fill: none;
  stroke: #ff6a3d;
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .6s ease, stroke .6s ease, fill-opacity .6s ease;
}

.cad__geo .cad__terr {
  stroke: #6fc6ff;
  stroke-width: 2.2;
  stroke-dasharray: 9 6;
}

/* перекрестье курсора — только в CAD */
.cad__cross { position: absolute; inset: 0; opacity: .5; transition: opacity .4s ease; }
.cad__cross i { position: absolute; background: rgba(255, 255, 255, .3); }
.cad__cross i:first-child { left: 0; right: 0; top: 44%; height: 1px; }
.cad__cross i:last-child  { top: 0; bottom: 0; left: 63%; width: 1px; }



/* ── обвязка чертежа ─────────────────────────────────────────────────────── */

.cad-ui { position: absolute; inset: 0; pointer-events: none; }
.cad__properties {
  position: absolute;
  top: 2.4cqw;
  right: 2.4cqw;
  width: 28cqw;
  padding: 1cqw;
  background: #3b4452;
  border: 1px solid #586271;
  border-radius: 3px;
  color: #dce2eb;
  font-size: max(6px, 1.2cqw);
  line-height: 1.3;
  opacity: 0;
  transform: translateX(.6em);
  transition: opacity .6s ease, transform .6s ease;
}
.cad__properties.is-on { opacity: 1; transform: none; }
.cad__properties-title, .cad__properties-select, .cad__properties-group { display: flex; align-items: center; justify-content: space-between; }
.cad__properties-title { padding-block-end: .6em; font-weight: 600; }
.cad__properties-select { padding: .5em; margin-block-end: .7em; background: #505d70; border: 1px solid #687487; }
.cad__properties-group { padding: .4em .6em; background: #2c333f; font-weight: 600; }
.cad__property { display: grid; grid-template-columns: minmax(0, 1fr) 18%; min-height: 2.15em; border-bottom: 1px solid #2d3642; }
.cad__property > span { padding: .4em .6em; white-space: nowrap; }
.cad__property > b { padding: .4em; border-left: 1px solid #2d3642; font-weight: 400; color: #a2aebe; }

.cad__tabs {
  position: absolute;
  top: 2.4cqw;
  right: 2.4cqw;
  display: flex;
  gap: .35em;
  padding: .3em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(12, 13, 15, .82);
  backdrop-filter: blur(7px);
  font-size: max(10px, 1.12cqw);
  opacity: 0;
  transform: translateY(-.5em);
  pointer-events: auto;
  transition: opacity .5s ease, transform .5s ease, background .6s ease, border-color .6s ease;
}

.cad__tabs.is-on { opacity: 1; transform: none; }

.cad__tab {
  padding: .42em 1em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-weight: 620;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.cad__tab.is-on { background: var(--accent); color: #0a0a0a; }

.cad__layers {
  position: absolute;
  top: 2.4cqw;
  left: 2.4cqw;
  display: grid;
  gap: .4em;
  min-width: 23cqw;
  padding: .75em .85em;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(12, 13, 15, .82);
  backdrop-filter: blur(7px);
  font-size: max(9.5px, 1.1cqw);
  color: var(--text);
  opacity: 0;
  transform: translateX(-.6em);
  transition: opacity .5s ease, transform .5s ease, background .6s ease, border-color .6s ease, color .6s ease;
}

.cad__layers.is-on { opacity: 1; transform: none; }


.cad__ltitle {
  display: block;
  padding-bottom: .5em;
  margin-bottom: .15em;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--mono);
  font-size: .92em;
  color: #ffb79f;
}


.cad__layers p { display: flex; align-items: center; gap: .55em; margin: 0; }
.cad__layers p i { width: .62em; height: .62em; border-radius: 2px; background: #ff6a3d; flex: 0 0 auto; }
.cad__layers p i.is-line { background: #6fc6ff; }
.cad__layers p b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 650; }

.cad__coords {
  position: absolute;
  right: 2.4cqw;
  bottom: 2.4cqw;
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding: .6em .95em;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(12, 13, 15, .82);
  backdrop-filter: blur(7px);
  font-family: var(--mono);
  font-size: max(9.5px, 1.06cqw);
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .5s ease, transform .5s ease, background .6s ease, border-color .6s ease, color .6s ease;
}

.cad__coords.is-on { opacity: 1; transform: none; }


.cad__coords em { font-style: normal; color: var(--accent); font-weight: 600; }

/* масштабная линейка и север — обычная обвязка чертежа */
.cad__scale {
  position: absolute;
  left: 2.4cqw;
  bottom: 2.4cqw;
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .55em .85em;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(12, 13, 15, .82);
  backdrop-filter: blur(7px);
  font-family: var(--mono);
  font-size: max(9px, 1.02cqw);
  color: rgba(255, 255, 255, .72);
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .5s ease, transform .5s ease, color .6s ease,
              background .6s ease, border-color .6s ease;
}

.cad__scale.is-on { opacity: 1; transform: none; }

.cad__north { display: flex; align-items: center; gap: .3em; font-weight: 650; }
.cad__north i {
  width: 0; height: 0;
  border-left: .34em solid transparent;
  border-right: .34em solid transparent;
  border-bottom: .8em solid currentColor;
}

.cad__bar { display: flex; width: 12cqw; height: .55em; border: 1px solid currentColor; }
.cad__bar i { flex: 1 1 0; }
.cad__bar i:nth-child(odd) { background: currentColor; }

/* ── строка статуса поверх карты ─────────────────────────────────────────── */

.status {
  position: absolute;
  left: 50%;
  bottom: 2.4cqw;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .6em 1em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 10, 11, .88);
  backdrop-filter: blur(7px);
  font-size: max(10.5px, 1.15cqw);
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, .6em);
  transition: opacity .5s ease, transform .5s ease;
}

.status.is-on { opacity: 1; transform: translate(-50%, 0); }

.status i {
  width: .5em; height: .5em;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 1em rgba(70, 217, 154, .8);
}

/* ══════════════════════════════════════════════════════ ГЕРОЙ СТРАНИЦЫ ═══ */

.p-hero { padding-block: clamp(20px, 2.4vw, 32px) 0; }

.p-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

.p-hero h1 { margin-top: 15px; max-width: 22ch; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.022em; }
.p-hero h1 .accent { color: var(--accent); }
.p-hero .lead { margin-top: 14px; max-width: 44ch; font-size: 17px; }
.p-hero__aside { display: grid; gap: 14px; }
.p-hero__aside .btn-row { margin: 0; }

.p-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--dim);
}

.p-hero__facts span { display: inline-flex; align-items: center; gap: 7px; }

@media (max-width: 880px) {
  .p-hero__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ═════════════════════════════════════════════ ЗАКРЕПЛЁННАЯ ИСТОРИЯ ══════ */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(256px, 312px);
  gap: clamp(22px, 2.8vw, 44px);
  align-items: start;
}

/* z-index обязателен: у шагов есть opacity, и без него они
   перекрывают закреплённую сцену на узких экранах */
.story__stage { position: sticky; top: 88px; z-index: 2; }

.story__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 13px;
}

/* шесть штрихов — где мы в истории; по ним можно щёлкнуть */
.rail { display: flex; gap: 5px; flex: 0 0 auto; }

.rail button {
  width: 17px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  cursor: pointer;
  transition: width .35s cubic-bezier(.2, .8, .3, 1), background .35s ease;
}

.rail button:hover { background: rgba(255, 255, 255, .32); }
.rail button.is-on { width: 30px; background: var(--accent); }

.story__cap {
  margin: 0;
  min-height: 1.5em;
  font-size: 13px;
  color: var(--dim);
  transition: opacity .35s ease;
}

.step {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 3vh;
  opacity: .26;
  transition: opacity .55s ease;
}

.step.is-active { opacity: 1; }

.step__n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: 13px;
}

.step > h2 { font-size: clamp(23px, 2.5vw, 31px); line-height: 1.16; letter-spacing: -.015em; }
.step > p { margin: 13px 0 0; font-size: 16px; line-height: 1.62; color: var(--muted); }

.step__note {
  margin-top: 17px;
  padding-left: 13px;
  border-left: 2px solid var(--line-2);
  font-size: 14.3px;
  line-height: 1.55;
  color: var(--dim);
}

/* ── итоговая полоса фактов ──────────────────────────────────────────────── */

.sum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}

.sum__i {
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.sum__i b {
  display: block;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 720;
  letter-spacing: -.03em;
  color: var(--accent);
}

.sum__i span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 880px) {
  .sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .sum { grid-template-columns: minmax(0, 1fr); }
}

/* ── узкий экран: сцена остаётся закреплённой, но одной колонкой ─────────── */

@media (max-width: 660px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story__stage { top: 68px; padding-bottom: 12px; background: var(--bg); }
  /* текст шага уходит под карту — край смягчаем, чтобы это читалось как приём */
  .story__stage::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 26px;
    background: linear-gradient(var(--bg), transparent);
    pointer-events: none;
  }
  .step { min-height: 62vh; padding-block: 2vh; }
}

/* на телефоне рамка становится выше, а надписи внутри — крупнее */
@media (max-width: 660px) {
  /* узкая рамка режет края — сдвиг территории влево там не нужен */
  .frame__body { aspect-ratio: 1.7; --tx: 0%; }
  .obj  { top: 3.4cqw; left: 3cqw; width: 44cqw; font-size: max(9.5px, 2.45cqw); }
  .side { top: 3cqw; right: 3cqw; width: 42cqw; font-size: max(9.5px, 2.35cqw); }
  .side__field--area, .side__field--draw { display: none; }
  .cad__layers { min-width: 34cqw; font-size: max(9px, 2.1cqw); }
  .cad__layers p b { display: none; }
  .cad__tabs   { font-size: max(9.5px, 2.1cqw); }
  .cad__coords { font-size: max(8.5px, 1.9cqw); gap: .7em; }
  .cad__scale  { display: none; }
  .tag    { font-size: max(9.5px, 2.2cqw); }
  .stat   { font-size: max(10px, 2.3cqw); }
  .status { font-size: max(10px, 2.3cqw); bottom: 3.4cqw; }
  .story__stage { top: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .layer, .tag, .stat, .status, .obj, .side, .spot, .coverage,
  .terr polygon, .terr circle, .geo polygon, .parcel polygon,
  .obj__prog i, .obj__file, .obj__apps, .side__prog i, .cad__tabs, .cad__layers, .cad__coords, .cad__scale {
    transition-duration: 1ms !important;
  }
}

/* сборка сцены «как было» — без анимации возврата */
.no-anim, .no-anim * { transition: none !important; animation: none !important; }

/* Компактная демонстрация: панели уменьшаются вместе с рамкой. */
@container (max-width: 400px) {
  .side { width: 27cqw; min-width: 0; font-size: 1.18cqw; }
  .obj { width: 33cqw; min-width: 0; font-size: 1.3cqw; }
  .side__tab--object { font-size: .88em; }
  .cad__layers { min-width: 23cqw; font-size: 1.1cqw; }
  .cad__coords { font-size: 1.06cqw; }
}