/* app/map/static/stand.css
   Интерактивный план стенда — /stand/ (задача 8).

   Эта страница живёт своей жизнью, отдельно от телефонных страниц `/` и
   `/e/<код>/` (style.css): та вёрстка светлая и минималистичная, план
   стенда — тёмная витрина по образцу артворка 28.08
   (docs/context/prior-2026-08-28/карта-маршрута.html). Общий принцип
   единственный: `[data-lang]` показаны оба по умолчанию, прячет только JS
   (см. правило в конце файла) — и тач-цели не меньше 44 физических px.

   Почему план внутри `.map-wrap` умеет скроллиться по горизонтали, а не
   просто сжимается до ширины экрана: план стенда — 23 000×10 000 мм,
   вытянутый прямоугольник 2.3:1. На телефоне 390px, сжатый под экран
   целиком, план становится меньше 170px высотой — 26 кружков с цифрами на
   такой полосе нечитаемы. `.plan-stage` держит минимальную ширину
   (см. ниже), гость листает план горизонтально, как схему метро; тач-цели
   при этом не зависят от масштаба — это отдельный слой HTML-кнопок
   (.node-hit), а не сами SVG-кружки (см. комментарий в build_map.py у
   _STAND_R_ANCHOR_RATIO/_STAND_R_MINOR_RATIO — там же расчёт масштаба).
*/

:root {
  color-scheme: dark;

  --bg: #080a10;
  --panel: #0f141f;
  --panel-2: #0a0e16;
  --line: #1e2838;
  --line-2: #2a3648;
  --ink: #eaeff7;
  --ink-2: #94a2b8;
  --ink-3: #5c6a80;
  --cyan: #3de0f0;

  --partner: #8fa3be; /* запасное значение — см. тот же приём в style.css */

  --radius: 0.9rem;
  --touch: max(2.75rem, 44px);

  font-size: clamp(15px, 1.1vw + 10px, 17px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.stand {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* .node-hit — круглая кнопка; общий прямоугольный outline вокруг неё на
   клавиатурном фокусе рисует заметный квадратный уголок поверх кружка.
   Свой круглый индикатор фокуса уже есть (::after ниже, border-radius:
   50%), поэтому здесь фокус-outline браузера сознательно снят. */
.node-hit:focus-visible { outline: none; }

/* [data-lang] по умолчанию видимы — тот же страховочный приём, что в
   style.css: если stand.js не выполнился, гость видит оба языка сразу,
   не пустую страницу. */
[data-lang][hidden] { display: none !important; }
[data-lang] { min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------- атмосфера фона --- */
/* Тёмный фон + мягкое свечение + сетка — визуальный язык артворка 28.08,
   перенесённый на CSS-слои страницы (в SVG уходит только сетка/рамка
   самого плана, см. build_map.py::_stand_shell_svg). */
/* Футаж под всем остальным. Приглушён сильнее, чем на квизе: там он фон под
   крупным текстом, а здесь под планом зала с мелкими цветными точками, и
   любое лишнее движение под ними мешает считывать карту. Поверх футажа
   ложится тёмная вуаль (.stand-bg получил свой слой заливки), поэтому
   контраст точек и подписей не падает. */
.stand-footage {
  position: fixed;
  inset: 0;
  /* z-index: 0, а НЕ -1. У body.stand непрозрачный фон, а по порядку отрисовки
     фон блочного потомка кладётся поверх слоёв с отрицательным z-index —
     видео было закрашено целиком и не показывалось вовсе. С нулевым слоем оно
     рисуется по порядку в разметке: сначала видео, потом .stand-bg с вуалью,
     потом зерно, и только затем .stand-shell (z-index 1) с содержимым. */
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: blur(16px) brightness(0.62) saturate(1.25);
  transform: scale(1.08);
}

.stand-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 520px at 80% 15%, rgba(228, 75, 224, 0.12), transparent 62%),
    radial-gradient(900px 620px at 15% 85%, rgba(61, 224, 240, 0.10), transparent 64%),
    linear-gradient(rgba(61, 224, 240, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 224, 240, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(8, 10, 16, 0.28), rgba(8, 10, 16, 0.46));
  background-size: auto, auto, 48px 48px, 48px 48px, auto;
}
.stand-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- каркас --- */
/* Высота страницы — ровно окно, не по контенту (правка ревью 30.08: план
   2.3:1 при фиксированной высоте по контенту кончался на верхних 2/3
   экрана и ниже оставалась пустая полоса фона). `.stand-shell` теперь сам
   высотой в весь viewport и flex-колонка: шапка и подвал по контенту,
   `.stand-layout` забирает всё, что осталось (flex:1), и именно в эти
   пиксели вписывается план — см. `.map-wrap`/`.plan-stage` ниже.
   `min-height: 0` у `.stand-layout` — обязателен: без него flex-item в
   колонке не сжимается меньше контента и высота всё равно поедет. */
html, body { height: 100%; }
html { background: var(--bg); }
.stand-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
/* На телефоне высота в один экран больше не нужна и мешает: под планом стоит
   список экспонатов, и странице надо дать прокрутиться обычным образом. */
@media (max-width: 859.98px) {
  html, body { height: auto; }
  .stand-shell { height: auto; min-height: 100dvh; }
}

.stand-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12, 16, 24, 0.9), rgba(12, 16, 24, 0.3));
  backdrop-filter: blur(10px);
}
.stand-brand h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* Манера подписей служебного текста из артворка: разрядка, капс, мелкий
   кегль. Габариты и счётчик экспонатов — как раз такой текст. */
.stand-dims {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.stand-layout {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* ------------------------------------------------------------- план --- */
/* Правка ревью 30.08 — было два независимых дефекта:
   1) `.plan-stage` держала `width: max(100%, 1200px)` всегда, даже когда
      справа открывалась панель. Карта не ужималась под грид ниже —
      кружки у правого края (МСП/ВЭБ.РФ) не просто уезжали за прокрутку,
      а буквально оказывались под панелью, потому что стадия была шире
      отведённой ей 1fr-колонки. Ниже 1200px принудительных больше нет
      нигде, кроме явного мобильного брейкпоинта (см. media ниже) — на
      широком экране план всегда 100% своей колонки и сжимается вместе
      с ней, когда появляется панель.
   2) Высота плана бралась только из аспекта (инлайн `aspect-ratio` из
      Python — соотношение сторон стенда), то есть план был ровно
      `ширина/2.3` высотой — на 1600×1000 это ~700px, а `.stand-layout`
      после починки каркаса (см. `.stand-shell` выше) высотой ~900px:
      снизу оставалась пустая полоса. Теперь `.map-wrap` — grid с
      `place-items: center`, а у `.plan-stage` есть `max-height: 100%`
      вдобавок к аспекту: план дорастает по высоте, пока не упрётся в
      потолок контейнера, и лишь тогда (по формуле aspect-ratio) начинает
      уступать по ширине — обычный приём «вписать прямоугольник с
      фиксированным соотношением сторон в контейнер, отцентровав». Тач-цели
      (.node-hit, HTML-кнопки поверх SVG) спозиционированы в процентах от
      `.plan-stage`, а не от экрана, поэтому от пересчёта масштаба не
      ломаются.

   Горизонтальная прокрутка остаётся только для узкого экрана (≤859px,
   см. media ниже) — там панель уже не колонка, а лист снизу, и план
   по-прежнему должен листаться, а не сжиматься до нечитаемых кружков. */
.map-wrap {
  position: relative;
  height: 100%;
  overflow-x: auto;
  /* По вертикали план тоже листается: на телефоне панель подробностей
     закрывает нижнюю половину экрана, и точки из нижней части зала —
     робототехника, водоросли, зеркало — иначе недостижимы вовсе. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem;
  display: grid;
  place-items: center;
}
.plan-stage {
  position: relative;
  width: 100%;
  max-height: 100%;
  margin-inline: auto;
}
@media (max-width: 859.98px) {
  /* Раньше здесь стоял принудительный минимум 1200px с прокруткой по двум
     осям: цифры в кружках оставались читаемыми, но в окно 390x354 попадала
     четверть зала, и целиком план не был виден ни разу. Для карты это потеря
     главного — по ней ориентируются, а сориентироваться по четверти нельзя.

     Теперь план вписывается в ширину целиком (на 390px это ~170px высоты).
     Цифры на таком масштабе всё равно не прочитать, поэтому они скрыты, а
     точки остаются цветными метками партнёров: план показывает устройство
     зала, а выбор экспоната идёт через список под ним (.plan-index). */
  .plan-stage { width: 100%; max-height: none; }
}
.plan-stage svg.plan {
  display: block;
  width: 100%;
  height: 100%;
  /* SVG-корень по умолчанию clip'ает всё, что выходит за viewBox — у g1
     (якорь, координата почти впритык к нижнему краю: margin 235 против
     ободка+фон радиусом 596) и g3 (угол у правого нижнего края) кружок с
     ободком/гало иначе обрезается ровно на границе рамки плана (баг из
     ревью 30.08: «нижняя серая 1 режется рамкой плана»). Рамку и сетку не
     трогаем — они по-прежнему честно 0..width/0..height, просто разрешаем
     самому SVG рисовать чуть за пределы viewBox, когда точка стоит у края. */
  overflow: visible;
}


/* Числовая геометрия (stroke-width, rx, font-size, letter-spacing) сюда
   НЕ выносится — она доли от plan.width и приходит инлайновым style прямо
   от Python (build_map.py::_stand_shell_svg/_stand_node_svg), потому что
   stand-plan.json уже дважды за эту задачу менял масштаб координат
   (мм-схема заказчика и система координат артворка 28.08 — см.
   task-8-report.md). Здесь остаются только цвета и то, что от масштаба
   не зависит: инлайновый style всегда побеждает класс по специфичности
   CSS, поэтому конфликта нет. */
.plan-frame { fill: #0b0f17; stroke: var(--line); }
.plan-grid { stroke: #141c28; }
.plan-dim { fill: #445269; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ---------------------------------------------------------- точки --- */
/* y-смещение цифры внутри кружка (dy) считается в Python вместе с
   радиусом, поэтому dominant-baseline тут нарочно не используется —
   держим один источник правды на выравнивание, а не два по разным
   браузерным механизмам. */
/* Точка — кольцо, а не залитый кружок: залитые читаются как леденцы и
   спорят с чертёжной манерой плана. Тонкая обводка цветом партнёра плюс
   слабая заливка — язык артворка 28.08. */
.node-dot { fill: var(--partner); fill-opacity: .16; stroke: var(--partner); }
.node.is-selected .node-dot { fill-opacity: .32; }

/* --- архитектура зала: помещения, пилоны, спираль амфитеатра --- */
.plan-room { fill: #090c13; stroke: #1b2432; stroke-width: 1.4; }
.plan-room-label {
  fill: #3d4a5e;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.plan-pylons { fill: none; stroke: #2a3648; stroke-linecap: round; opacity: .55; }
.plan-pylon-mark { stroke: var(--cyan); opacity: .45; }
.plan-core { fill: #e44be0; opacity: .035; }
.plan-spiral { fill: none; stroke: #e44be0; opacity: .7; }
.node-back { fill: #080a10; opacity: 0.94; }
.node-halo { fill: var(--partner); opacity: 0; filter: url(#stand-soft); transition: opacity 0.25s; }
.node-ring { fill: none; stroke: var(--partner); opacity: 0.6; }
.node-num {
  fill: var(--partner);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}
.node.is-selected .node-halo { opacity: .45; }


/* Реальная тач-цель — прозрачная HTML-кнопка поверх SVG, а не сам кружок
   (см. комментарий в шапке файла и в build_map.py). Центр кнопки совпадает
   с центром точки через translate(-50%,-50%), сама кнопка ничего не
   рисует — видимость даёт SVG под ней. */
.plan-hits { position: absolute; inset: 0; }
.node-hit {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.node-hit:hover::after,
.node-hit:focus-visible::after,
.node-hit.is-selected::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  opacity: 0.7;
}

/* ------------------------------------------------------------ панель --- */
.stand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 11% прозрачности: сначала 6% («5–7%», 02.09), потом владелец
     попросил добавить ещё 5. Сквозь подложку просвечивает футаж. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel) 89%, transparent),
    color-mix(in srgb, var(--panel-2) 89%, transparent)
  );
  border-left: 1px solid var(--line);
}
.stand-panel[hidden] { display: none; }

.panel-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  min-width: var(--touch);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.panel-close:active { background: rgba(255, 255, 255, 0.1); }

.panel-body { padding: 3.2rem 1.3rem 1.5rem; overflow-y: auto; }
.panel-content[hidden] { display: none; }

.panel-eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.panel-title {
  margin: 0 0 0.7rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.panel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem 0.25rem 0.5rem;
  margin: 0 0.4rem 0.4rem 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--ink-2);
}
.panel-chip i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--partner);
  box-shadow: 0 0 6px var(--partner);
}
.panel-block { margin-top: 1.1rem; }
.panel-block h4 {
  margin: 0 0 0.4rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.panel-block p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
/* На узком экране панель — лист снизу, поверх плана: приподнимается над
   картой, закрывается крестиком, кликом по фону (обработчик на .map-wrap
   в stand.js) или Escape. На широком — колонка сбоку, план ужимается сеткой
   (см. .stand-layout.has-panel ниже), ничего не перекрывая. */
/* На телефоне всплывающего листа больше нет. Он занимал 72% высоты и накрывал
   список: выбрав экспонат с длинным описанием, гость терял возможность выбрать
   следующий — между планом сверху и листом снизу оставалась полоска в полстроки
   (замечание владельца 31.08 со скриншотом). Описание там открывается отдельной
   страницей /e/<код>/ — той же, что по QR с таблички. Панель остаётся в потоке
   и показывает только рассказ о стенде. */
@media (max-width: 859.98px) {
  .stand-panel {
    position: static;
    max-height: none;
    overflow: visible;
    border-left: none;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
    padding-bottom: 0;
  }
  .panel-close { display: none; }
}

@media (min-width: 860px) {
  .stand-layout.has-panel {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 34%);
    align-items: stretch;
  }
  /* .map-wrap уже height:100% всегда (см. выше) — грид только даёт ему
     колонку 1fr вместо полной ширины, дальше сжатие плана берёт на себя
     .plan-stage { max-height: 100% }. */
  .stand-panel { width: 100%; }
}

/* ------------------------------------------------------ подвал/легенда --- */
.stand-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(8, 10, 16, 0.7);
}
.stand-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stand-legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--ink-2);
}
.stand-legend i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--partner);
  box-shadow: 0 0 6px var(--partner);
}
.stand-legend b {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 400;
  color: var(--ink-3);
}

.lang {
  flex: none;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.lang:active { background: rgba(255, 255, 255, 0.09); }

/* Панель на узком экране — лист снизу, он перекрывает нижнюю половину.
   Пока он открыт, область карты ужимается до верхней части экрана: иначе
   выбранная точка физически оказывается под листом и её не видно ни при
   какой прокрутке (план по вертикали помещается целиком, скроллить нечего). */
@media (max-width: 859.98px) {
  /* План помещается целиком, прокручивать внутри нечего — иначе внутренняя
     прокрутка перехватывает жест и страница под пальцем стоит на месте. */
  .map-wrap { height: auto; overflow: visible; padding: 0.9rem; }
  /* Цифры в кружках на этом масштабе нечитаемы — точка работает цветной
     меткой партнёра, номер гость видит в списке. */
  .node-num { display: none; }
}

/* ═══ Верхняя панель групп ═══════════════════════════════════════════════
   Гость на панели входной группы спрашивает «где Сколтех» или «что тут про
   науку», а не «где экспонат номер семь». Две оси группировки отвечают на
   оба вопроса, не заставляя читать легенду из двадцати шести строк. */

.stand-groups {
  border-bottom: 1px solid var(--line);
  background: rgba(12, 16, 24, .55);
  backdrop-filter: blur(10px);
}

.grp-axis { display: flex; gap: .35rem; padding: .5rem .75rem 0; }
.axis-btn {
  min-height: 2rem;
  padding: 0 .75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.axis-btn.is-on { color: var(--ink); border-color: var(--line-2); background: var(--panel); }

.grp-row { display: flex; overflow-x: auto; scrollbar-width: none; }
.grp-row::-webkit-scrollbar { display: none; }
.grp-row[hidden] { display: none; }

.grp {
  flex: 1 0 auto;
  min-width: 11rem;
  min-height: var(--touch);
  padding: .55rem .9rem .6rem;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.grp:hover { background: rgba(255, 255, 255, .03); }
.grp.is-on { border-bottom-color: var(--acc); background: rgba(255, 255, 255, .04); }

/* Кегли и цвета подняты 02.09 по замечанию команды: «АКТ 01» и подзаголовки
   были .6rem цветом --ink-3 — с телефона не читались вовсе. --ink-2 вместо
   --ink-3 даёт контраст AA на тёмном фоне. */
.grp-kicker {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink-2);
  transition: color .25s ease;
}
.grp.is-on .grp-kicker { color: var(--acc); }
.grp-title { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); margin: .12rem 0 .06rem; }
.grp-sub {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-2);
}
@media (max-width: 859.98px) {
  .grp-kicker { font-size: .78rem; }
  .grp-title { font-size: 1.05rem; }
  .grp-sub { font-size: .78rem; }
}
.grp-sub i { font-style: normal; color: var(--acc); }

/* ═══ Масштаб карты не меняется ══════════════════════════════════════════
   Панель подробностей больше не отбирает у плана колонку: она ложится
   поверх. Иначе при каждом открытии точки карта перерисовывалась в другом
   масштабе, и глаз терял место, на которое только что смотрел. */

@media (min-width: 860px) {
  .stand-layout.has-panel .map-wrap { width: 100%; }
  .stand-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(30rem, 38vw);
    border-left: 1px solid var(--line-2);
    box-shadow: -30px 0 60px rgba(0, 0, 0, .45);
    transform: translateX(2rem);
    opacity: 0;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
  }
  .stand-layout.has-panel .stand-panel { transform: none; opacity: 1; }
}

/* ═══ Плавность ══════════════════════════════════════════════════════════ */

.node { transition: opacity .3s ease; }
.node-dot { transition: fill-opacity .25s ease, stroke-width .25s ease; }
.node-halo { transition: opacity .35s ease; }
.node-hit::after { transition: opacity .2s ease, transform .2s ease; }

/* Точки вне выбранной группы гаснут, а не исчезают: гость должен видеть,
   что на стенде есть и другое, просто сейчас речь не о нём. */
.stand-layout.has-focus .node { opacity: .18; }
.stand-layout.has-focus .node.in-group { opacity: 1; }
.stand-layout.has-focus .node.is-selected { opacity: 1; }

.panel-content { animation: panel-in .3s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(.6rem); }
  to   { opacity: 1; transform: none; }
}

.panel-list { margin: .4rem 0 0; padding: 0 0 0 .1rem; list-style: none; }
.panel-list li {
  padding: .3rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .92rem;
}
.panel-list li:last-child { border-bottom: 0; }
.panel-list b { color: var(--ink); font-weight: 600; }
.panel-label {
  margin-top: 1rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Секретная шестая печать: на карте обычная точка, в панели — отдельная
   плашка. Гость находит её сам, поэтому подсказки на плане нет. */
.panel-secret {
  margin: .8rem 0 0;
  padding: .7rem .9rem;
  border: 1px dashed var(--acc, var(--line-2));
  border-radius: var(--radius);
  color: var(--ink);
  font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ═══ Легенда — активная ══════════════════════════════════════════════════
   Клик по партнёру в легенде делает то же, что вкладка группы наверху:
   подсвечивает его точки. Легенда и так висит перед глазами, заставлять
   гостя тянуться к верхней панели незачем. */

.stand-legend li { padding: 0; }
.stand-legend .legend-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  min-height: var(--touch);
  padding: 0 .6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.stand-legend .legend-btn:hover { background: rgba(255, 255, 255, .04); }
.stand-legend .legend-btn.is-on {
  border-color: var(--partner);
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
}
.stand-legend .legend-btn i {
  flex: none;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--partner);
  transition: box-shadow .25s ease;
}
.stand-legend .legend-btn.is-on i { box-shadow: 0 0 0 4px color-mix(in srgb, var(--partner) 25%, transparent); }

/* ═══ Масштаб плана зафиксирован ══════════════════════════════════════════
   План рассчитывается один раз от высоты области и дальше не пересчитывается:
   ни открытие панели, ни выбор группы его не двигают. Прежде карта прыгала
   при каждом клике, и глаз терял место, на которое только что смотрел. */

@media (min-width: 860px) {
  /* План вписывается в область целиком — и по ширине, и по высоте. Область
     не меняется при открытии панели: панель лежит поверх, а не отбирает
     колонку, поэтому пересчитывать масштаб нечему. */
  .map-wrap { display: grid; place-items: center; overflow: hidden; width: 100%; }
  .plan-stage { width: 100%; max-width: 100%; max-height: 100%; height: auto; }
  .plan-stage svg.plan { width: 100%; height: auto; }
}

/* Панель лежит поверх, а не отбирает колонку. Более ранняя грид-раскладка
   (`.stand-layout.has-panel { grid-template-columns: 1fr minmax(320px, 34%) }`)
   ужимала карту при каждом открытии точки, и план перерисовывался в другом
   масштабе — глаз терял место, на которое только что смотрел. */
@media (min-width: 860px) {
  .stand-layout,
  .stand-layout.has-panel {
    display: block;
    grid-template-columns: none;
  }
  .stand-layout.has-panel .map-wrap,
  .stand-layout.has-focus .map-wrap { width: 100%; height: 100%; }
}

/* Место под панель зарезервировано всегда, даже когда она закрыта.
   Иначе выбор одной точки заставлял бы карту либо ужиматься (масштаб
   прыгает), либо уходить под панель (правый край стенда — МСП и ВЭБ.РФ —
   становится не виден). Карта чуть меньше, зато всегда целиком на экране
   и всегда в одном масштабе. */
@media (min-width: 860px) {
  .stand-layout { padding-right: min(30rem, 38vw); }
  .stand-panel { width: min(30rem, 38vw); }
}

/* Полное описание от партнёра. Тексты Сколтеха идут списками и пошаговыми
   пояснениями, поэтому абзацы исходника сохраняются, а панель прокручивается:
   у некоторых экспонатов описание под две тысячи знаков. */
.panel-full p { margin: 0 0 .55rem; }
.panel-full p:last-child { margin-bottom: 0; }
.panel-full i { color: var(--ink-3); }

/* Крестик прячется на вводной карточке. Атрибут hidden сам по себе не
   срабатывает: у кнопки задан display, и он перекрывает браузерное правило. */
.panel-close[hidden] { display: none; }

/* ═══ Список экспонатов под планом (только телефон) ══════════════════════
   План на узком экране отвечает на вопрос «как устроен зал», список — на
   вопрос «покажи вот это». Разделение вынужденное: 22 точки на плане шириной
   390px стоят ближе 44px друг к другу, и надёжно попасть пальцем в нужную
   нельзя ни при каком оформлении самих точек. */

.plan-index { display: none; }

@media (max-width: 859.98px) {
  .plan-index {
    display: block;
    padding: 0.25rem 0.9rem 1.5rem;
  }

  .idx-act { margin-top: 1.4rem; }
  .idx-act:first-child { margin-top: 0.6rem; }

  .idx-act-head {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0 0 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .idx-act-n {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--acc);
  }

  .idx-list { margin: 0; padding: 0; list-style: none; }

  .idx-item {
    display: flex;
    text-decoration: none;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: var(--touch);
    padding: 0.5rem 0.2rem;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, padding-left 0.15s ease;
  }
  .idx-item:active { background: rgba(255, 255, 255, 0.05); }
  .idx-list li:last-child .idx-item { border-bottom: none; }

  /* Номер — тот же, что на табличке у экспоната и на плане: по нему гость
     сличает список с залом, раз на плане цифры уже не помещаются. */
  .idx-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1px solid var(--partner);
    border-radius: 50%;
    background: color-mix(in srgb, var(--partner) 16%, transparent);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.72rem;
    color: var(--ink);
  }

  .idx-name { flex: 1 1 auto; font-size: 0.95rem; line-height: 1.3; }

  /* Шеврон — признак того, что строка ведёт на отдельную страницу, а не
     раскрывается на месте. Без него переход читается как поломка. */
  .idx-go { flex: none; color: var(--ink-3); font-size: 1.2rem; line-height: 1; }

  /* Строка, к которой вернулись со страницы экспоната, не должна оказаться
     под закреплённым планом. */
  /* Замерено: при 12rem заголовок акта вставал на 6px выше нижней кромки
     закреплённого плана и частично уходил под него. */
  .idx-list li { scroll-margin-top: 13rem; }
  .idx-act { scroll-margin-top: 13.5rem; }

  /* Выбранная строка держит связь с планом: там же подсвечивается её точка. */
  .idx-item.is-selected {
    padding-left: 0.6rem;
    background: color-mix(in srgb, var(--partner) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--partner);
  }

}

/* ═══ Телефон: рассказ о стенде читается в потоке ═════════════════════════
   Панель играет две разные роли, и на узком экране их нельзя оформлять
   одинаково. Рассказ о стенде гость получает, ничего не нажав, — это чтение,
   и фиксированным листом поверх экрана он закрывал бы весь список экспонатов
   сразу при заходе. Описание конкретного экспоната — наоборот, ответ на
   нажатие, и там лист уместен: он временный и закрывается.

   Порядок чтения задаётся flex-order, а не разметкой: на широком экране
   панель обязана оставаться соседом карты в гриде (колонка справа). */
@media (max-width: 859.98px) {
  .stand-layout {
    display: flex;
    flex-direction: column;
  }
  .map-wrap { order: 1; }
  .stand-panel { order: 2; }
  .plan-index { order: 3; }

  /* План закреплён вверху. Иначе выбор из списка — а список длинный, 22 строки —
     уводит план за экран, и связь «строка → точка на плане» становится
     ненаблюдаемой ровно в тот момент, когда она нужна. Плана 185px из 844:
     лист описания (72vh) начинается ниже и с ним не пересекается. */
  .map-wrap {
    position: sticky;
    top: 0;
    z-index: 12;
    background: linear-gradient(180deg, var(--bg) 78%, rgba(8, 10, 16, 0.86));
    border-bottom: 1px solid var(--line);
  }

  /* План на телефоне только показывает, но не принимает нажатия.
     Тач-цели по 44px на плане 363x158 покрывают 78% его площади, и 35 пар
     точек стоят ближе 44px друг к другу: попасть в нужную нельзя, попадаешь
     в соседнюю. Хуже того, план закреплён вверху — прокрутка списка часто
     начинается пальцем по нему, и замер это подтвердил: свайп переключал
     описание с одного экспоната на другой.

     Уменьшать цели нельзя (44px — минимум по контракту), значит на этой
     ширине план перестаёт быть органом управления и остаётся картой.
     Выбор целиком уходит в список ниже. */
  /* Точки активны и на телефоне (просьба команды 02.09): тап подводит к
     строке экспоната в списке и подсвечивает её — при промахе по тесной
     точке гость видит соседей рядом, ничего не ломается. Раньше нажатия
     были выключены целиком. */

  /* Запаса под лист больше не нужно — перекрывать нечем. */
  .stand-layout.has-panel .plan-index { padding-bottom: 1.5rem; }
}

/* ═══ Телефон: точки без цифр обязаны читаться сами ══════════════════════
   На широком экране кружок держится за счёт цифры внутри: заливка почти
   прозрачная (.16), яркое в точке — номер. На телефоне цифры скрыты, и при
   той же заливке точки тонут в артворке плана — на скриншоте они неотличимы
   от мебели зала. Поэтому здесь заливка сплошная: точка работает цветной
   меткой партнёра. */
/* Точки на телефоне выглядят как на десктопе — кольцо с лёгкой заливкой.
   Сплошная заливка снята по замечанию команды 02.09 («точки другого
   цвета, нежели на горизонтальном формате»). */

/* ═══ Аудиогид в панели карты ════════════════════════════════════════════
   Тот же язык, что у плеера на странице экспоната: моношрифтовая подпись
   вразрядку с точкой партнёра, дальше управление. Первая версия была крупной
   заливной кнопкой с жирной надписью «Слушать аудиогид» — она читалась как
   рекламный призыв и выбивалась из панели, где всё остальное сдержанное:
   тонкий контур чипа, приглушённый текст, капслок мелким кеглем. */

.panel-audio { margin: 0 0 1.35rem; }

.panel-audio-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.panel-audio-head i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--partner);
}

.panel-audio-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.panel-play {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 1px solid var(--partner);
  border-radius: 50%;
  background: color-mix(in srgb, var(--partner) 10%, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.panel-play:hover,
.panel-play:active {
  background: color-mix(in srgb, var(--partner) 24%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--partner) 28%, transparent);
}
.panel-play .ico {
  font-size: 0.7rem;
  line-height: 1;
  /* Треугольник оптически смещён влево — сдвигаем, чтобы стоял по центру. */
  transform: translateX(1px);
}
.panel-play.is-on .ico { font-size: 0.8rem; transform: none; }

.panel-progress {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.panel-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--partner);
  transition: width 0.2s linear;
}

.panel-audio-time {
  flex: none;
  min-width: 4.2rem;
  text-align: right;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  color: var(--ink-3);
}

/* ═══ Заставка простоя ═══════════════════════════════════════════════════
   Выходит поверх всего через 3 минуты без касаний и без играющего аудиогида.
   Здесь видео — содержание, а не фон, поэтому не размыто: приглушено ровно
   настолько, чтобы кнопка и заголовок читались с нескольких метров. */

.saver {
  position: fixed;
  inset: 0;
  z-index: 60; /* выше листа панели (30) и закреплённого плана (12) */
  display: grid;
  place-items: center;
  animation: saver-in 0.6s ease both;
}
.saver[hidden] { display: none; }
@keyframes saver-in { from { opacity: 0; } to { opacity: 1; } }

.saver-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.saver-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(8, 10, 16, 0.35), rgba(8, 10, 16, 0.8) 100%),
    linear-gradient(180deg, rgba(8, 10, 16, 0.45), rgba(8, 10, 16, 0.6));
}

.saver-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5vmin;
}

.saver-kicker {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(0.65rem, 1.6vmin, 1rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.saver-title {
  margin: 2vmin 0 0;
  font-size: clamp(2rem, 8vmin, 6rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  /* Тот же переливающийся градиент, что на экране ожидания квиза — заставка
     у двух поверхностей должна выглядеть как одна вещь. */
  background: linear-gradient(92deg, var(--ink) 20%, var(--cyan) 50%, var(--magenta) 70%, var(--ink) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: saver-flow 9s ease-in-out infinite;
}
@keyframes saver-flow {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* Кнопка крупная: её жмут стоя, иногда не глядя, и она единственная на экране. */
.saver-btn {
  margin-top: 6vmin;
  min-width: min(34vmin, 22rem);
  min-height: max(var(--touch), 8vmin);
  padding: 0 6vmin;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: rgba(61, 224, 240, 0.1);
  color: var(--ink);
  font: inherit;
  font-size: clamp(1rem, 2.8vmin, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  animation: saver-pulse 2.6s ease-in-out infinite;
}
.saver-btn:active {
  background: rgba(61, 224, 240, 0.24);
  transform: scale(0.98);
}
@keyframes saver-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 224, 240, 0.28); }
  50%      { box-shadow: 0 0 5vmin 1vmin rgba(61, 224, 240, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
  .saver, .saver-title, .saver-btn { animation: none !important; }
}

/* Телефон в ландшафте проходит порог ширины 860px и получает десктопную
   раскладку, рассчитанную на высокий экран: при высоте ~390px карта
   обрезалась, а прокрутки не было (замечание команды 02.09, п. 3).
   На низких окнах оболочка отпускает высоту, и страница листается. */
@media (min-width: 860px) and (max-height: 560px) {
  .stand-shell { height: auto; min-height: 100dvh; }
  .map-wrap { overflow: visible; height: auto; }
}


/* ═══ Фирменная тема стенда (утверждена владельцем 05.09) ═══════════════════
   Направление «плашки + пилон на размытом фоне»: белая плашка заголовка с
   клиньями (как у логотипа ВЭБ|РФ в роликах), оранжевые плашки актов с белым
   торцом (как лейблы DATA SCIENCE), панель — торец пилона с паттерном и
   оранжевой кромкой, служебные R-маркеры и «крылья». Шрифт — Unbounded
   (вариативный, самохостинг: внешние CDN на страницах гостя запрещены).
   Собрано из макетов 05.09, одобренных в телеграме. */

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/unbounded-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/unbounded-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { --font-display: 'Unbounded', sans-serif; --brand-orange: #E8742B; --brand-amber: #E8A63C; }

.stand-brand h1, .panel-title, .grp-title, .panel-eyebrow,
.grp-kicker, .grp-sub, .idx-act-n, .stand-dims {
  font-family: var(--font-display);
}
.stand-brand h1 { font-weight: 600; }
.panel-title { font-weight: 600; }
.grp-title { font-weight: 500; }

/* Белая плашка заголовка с клиновидными срезами. */
.stand-brand h1 {
  clip-path: polygon(0 26%, 2.2% 0, 100% 0, 100% 74%, 97.8% 100%, 0 100%);
  background: #fff;
  color: #0a0f18;
  text-shadow: none;
  padding: .35em .9em;
  font-size: 1.35rem;
  letter-spacing: .02em;
}

/* Акты — оранжевые плашки с белым торцом; активная инвертируется. */
.grp { border-bottom: 0; }
.grp .grp-kicker {
  display: inline-block;
  background: var(--brand-orange);
  color: #fff;
  padding: .28em .7em .24em;
  border-right: .35em solid #fff;
  letter-spacing: .14em;
}
.grp.is-on .grp-kicker { background: #fff; color: var(--brand-orange); border-right-color: var(--brand-orange); }

/* Панель — торец пилона: паттерн живёт в верхней трети и тает в ровный
   тон (вариант П3, выбран владельцем 05.09: сплошной паттерн на карточках
   актов с коротким текстом превращался в чёрную яму на две трети высоты). */
.stand-panel {
  /* 12% прозрачности («10–15», владелец 05.09): фирменный тон панели
     пропускает футаж, как и до брендирования, — тот слой стоял на 89%. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #0c1322 88%, transparent),
    color-mix(in srgb, #090e18 88%, transparent)
  );
  border-left: 2px solid var(--brand-orange);
}
.stand-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  background: url("/media/pilon.jpg") center top/cover;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent);
  pointer-events: none;
}
.panel-body { position: relative; }
.panel-eyebrow { letter-spacing: .35em; color: var(--brand-orange); }
.panel-eyebrow::before { content: "▍"; color: var(--brand-orange); margin-right: .4em; }
.panel-title { text-transform: uppercase; letter-spacing: .18em; line-height: 1.35; }
.panel-audio-head { color: var(--brand-amber); }

/* Фон — размытая фирменная заставка (видео bg-blur.mp4); вуаль легче
   прежней: блюр сам по себе спокойный, глухая вуаль его убивала. */
.stand-bg { background: rgba(6, 10, 18, .45); }

/* Служебные R-маркеры и «крылья» — декоративный слой из роликов паттерна. */
.fx-decor { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.fx-mk {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .35vw;
  font: 600 .6vw ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .12em;
  color: #8fa5bd;
}
.fx-mk::before { content: ""; width: .45vw; height: .45vw; background: var(--brand-orange); }
.fx-wings { position: absolute; display: flex; gap: .35vw; }
.fx-wings i { width: 1.6vw; height: 1.15vw; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%, 28% 100%); }
.fx-wings i + i { background: var(--brand-orange); }
@media (max-width: 859.98px) {
  /* На телефоне декор мешал бы списку, а плашка масштабируется кеглем. */
  .fx-decor { display: none; }
  .stand-brand h1 { font-size: 1.05rem; }
}


/* QR на мобильную карту в вводной карточке панели (просьба владельца 10.09).
   Белая подложка обязательна: панель тёмная, а код сканируется только
   тёмными модулями на светлом. */
.panel-qr { margin-top: 1.2em; display: flex; align-items: center; gap: 1em; }
.panel-qr img {
  width: 8.6em; height: 8.6em; flex: none;
  background: #fff; padding: .55em; border-radius: .8em;
}
.panel-qr p { margin: 0; font-size: .82em; line-height: 1.35; opacity: .85; max-width: 13em; }


/* Кнопка «к началу» (просьба владельца 10.09): круглая, в левом верхнем углу,
   только на широком экране — телефонному гостю заставка не показывается. */
.back-to-start {
  display: none;
  /* правый низ, как у кнопки «домой» в рамках внешних сайтов: левый верх
     занят плашкой «КОД ПРОСВЕЩЕНИЯ», первая версия на неё налезала
     (замечание владельца 10.09) */
  position: fixed; right: 1.4vmin; bottom: 2.2vmin; z-index: 8000;
  width: 5.6vmin; height: 5.6vmin;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  background: rgba(6, 12, 20, .72); color: #dfe7f2;
  font-size: 2.6vmin; line-height: 1;
  cursor: pointer; text-decoration: none;
  align-items: center; justify-content: center;
}
.back-to-start:active { transform: scale(.94); }
@media (min-width: 900px) { .back-to-start { display: flex; } }


/* Вариант для футера стенда: в потоке, вплотную к переключателю языка.
   margin-left: auto прижимает кнопку к правому краю, к RU/EN, — иначе
   space-between растаскивал её в середину полосы (замечание владельца 10.09). */
.back-to-start--inline { position: static; margin-left: auto; margin-right: -0.2rem; }