/* EMAPKA — оформление сайта.
 *
 * ОТКУДА ВЗЯТЫ ЗНАЧЕНИЯ. Не придуманы. Сняты с боевой дизайн-системы
 * приложения, чтобы сайт и приложение читались как одна вещь:
 *
 *   product/visual/src/theme.rs                — канонические токены
 *   product/platform/desktop/src/App.css       — их применение на Desktop
 *
 * Оттуда: белый фон с виньеткой по краям, чёрный текст, серый #646464 для
 * второстепенного, контрастная рамка #3c3c3c толщиной 1px, скругление 6px,
 * выпуклая кнопка с тенью 0 2px 3px rgba(0,0,0,.16), которая при нажатии
 * тень теряет и уходит на пиксель вниз, красный #dc2626 для предупреждений,
 * зелёный #228b22 для подтверждений, цель касания 44px, системный шрифт.
 * Знак — слово EMAPKA насыщенностью 800 с разрядкой 0.18em: ровно так, как
 * оно набрано на главном экране приложения (.logo в App.css).
 *
 * Собственного цвета сайт не заводит: в приложении акцентного цвета нет.
 * Иерархию держат насыщенность, рамка и тень, а не новая краска.
 *
 * ЧТО ЕЩЁ НЕ РЕШЕНО. Владелец проводит работу над внешним видом отдельно.
 * До его слова здесь стоит точный перенос приложения на страницу, а не
 * самостоятельное решение. Правка вида меняет токены в :root; разметка,
 * порядок заголовков и доступность от вида не зависят.
 *
 * Ни одного обращения наружу: шрифты системные, чужих картинок нет.
 */

/* ------------------------------------------------------------------ токены */

:root {
  color-scheme: light;

  /* Шрифт — тот же стек, что в приложении. Ноль загрузок. */
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
               "Noto Sans", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Размеры. Основание 16px — как --font-body приложения.
     Заголовок раздела 22px — как --font-heading. Мелкое 12px — как
     --font-caption. Крупнее приложения только заголовок страницы:
     у страницы есть вход, которого у экрана 400px нет. */
  --fs-caption: 0.75rem;   /* 12px  — приложение */
  --fs-small:   0.875rem;  /* 14px  — приложение, строка галочки */
  --fs-body:    1rem;      /* 16px  — приложение */
  --fs-lead:    1.125rem;  /* 18px */
  --fs-h3:      1.125rem;  /* 18px */
  --fs-h2:      1.375rem;  /* 22px  — приложение */
  --fs-h1:      clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);

  /* Отступы. Ряд приложения: 4 · 8 · 10 · 16 — и продолжение для страницы. */
  --sp-1: 4px;
  --sp-2: 8px;    /* --list-gap */
  --sp-3: 10px;   /* --input-padding */
  --sp-4: 16px;   /* --screen-padding */
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  --shell: 60rem;
  --prose: 40rem;

  --radius: 6px;        /* кнопка и поле в приложении */
  --radius-card: 10px;  /* оверлей в приложении */
  --radius-tiny: 2px;   /* галочка в приложении */
  --border-width: 1px;
  --min-tap: 44px;

  /* ЦВЕТ. Светлая тема — палитра приложения (theme.rs), без добавлений.
     Одна поправка: зелёный подписи затемнён с #228b22 до #177317, потому что
     #228b22 на белом даёт 4.39:1 — чуть ниже требуемых WCAG 4.5:1 для текста.
     Как рамка исходный зелёный остаётся: рамке хватает 3:1. */
  --c-bg:          #ffffff;
  --c-bg-sunken:   #fafafa;
  --c-bg-raised:   #ffffff;
  --c-text:        #000000;
  --c-text-dim:    #646464;
  --c-disabled:    #b4b4b4;
  --c-line:        #3c3c3c;
  --c-line-soft:   rgba(0, 0, 0, 0.10);
  --c-line-hair:   rgba(0, 0, 0, 0.08);
  --c-danger:      #dc2626;
  --c-success:     #228b22;
  --c-success-ink: #177317;
  --c-vignette:    rgba(0, 0, 0, 0.04);

  --c-danger-bg:   #fdf3f3;
  --c-success-bg:  #f2f8f3;
  --c-note-bg:     #f6f6f6;

  --shadow-btn:    0 2px 3px rgba(0, 0, 0, 0.16);
  --shadow-card:   0 8px 22px rgba(0, 0, 0, 0.18);
}

/* ------------------------------------------------------------- тёмная тема
 *
 * Это НЕ инверсия светлой. Тёмная тема делается по своим правилам, и они
 * общие для всей отрасли (Material Design 3, IBM Carbon, Apple HIG):
 *
 *   · подложка — тёмно-серая (#121212), а не чёрная: на чистом чёрном белый
 *     текст даёт ореол и режет глаз;
 *   · текст — не чисто белый (#e8e8e8), по той же причине;
 *   · приподнятая поверхность в темноте становится СВЕТЛЕЕ, а не отбрасывает
 *     тень: тень на тёмном фоне не читается;
 *   · насыщенные цвета гасятся. Красный приложения #dc2626 на тёмном слепит,
 *     поэтому берётся #f27d7d — тот же красный, но пригодный для темноты.
 *
 * Каждая пара «цвет на поверхности» посчитана по WCAG 2.2: текст не ниже
 * 4.5:1, рамки не ниже 3:1. Самая слабая пара — рамка на приподнятой
 * поверхности, 3.88:1.
 *
 * Правило записано дважды намеренно:
 *   1) в медиа-запросе — для тех, кто ничего не выбирал и идёт за системой;
 *   2) на [data-theme="dark"] — для тех, кто выбрал тёмную руками.
 * Значения обязаны совпадать; менять их надо в обоих местах.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg:          #121212;
    --c-bg-sunken:   #191919;
    --c-bg-raised:   #1e1e1e;
    --c-text:        #e8e8e8;
    --c-text-dim:    #a6a6a6;
    --c-disabled:    #6b6b6b;
    --c-line:        #7a7a7a;
    --c-line-soft:   rgba(255, 255, 255, 0.16);
    --c-line-hair:   rgba(255, 255, 255, 0.11);
    --c-danger:      #f27d7d;
    --c-success:     #7fd08f;
    --c-success-ink: #7fd08f;
    --c-vignette:    rgba(0, 0, 0, 0.35);
    --c-danger-bg:   #2a1717;
    --c-success-bg:  #152616;
    --c-note-bg:     #1c1c1c;
    --shadow-btn:    none;
    --shadow-card:   0 8px 22px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:          #121212;
  --c-bg-sunken:   #191919;
  --c-bg-raised:   #1e1e1e;
  --c-text:        #e8e8e8;
  --c-text-dim:    #a6a6a6;
  --c-disabled:    #6b6b6b;
  --c-line:        #7a7a7a;
  --c-line-soft:   rgba(255, 255, 255, 0.16);
  --c-line-hair:   rgba(255, 255, 255, 0.11);
  --c-danger:      #f27d7d;
  --c-success:     #7fd08f;
  --c-success-ink: #7fd08f;
  --c-vignette:    rgba(0, 0, 0, 0.35);
  --c-danger-bg:   #2a1717;
  --c-success-bg:  #152616;
  --c-note-bg:     #1c1c1c;
  --shadow-btn:    none;
  --shadow-card:   0 8px 22px rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] { color-scheme: light; }

/* -------------------------------------------------------------- основание */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--c-text);
  background: var(--c-bg);
  /* Виньетка приложения: фон светлее в центре, темнее к краям. */
  background-image: radial-gradient(ellipse at center, var(--c-bg) 60%, var(--c-vignette) 100%);
  background-attachment: fixed;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-underline-offset: 0.18em;
}

img, svg { max-width: 100%; height: auto; }

/* Ссылка в чёрно-белой системе опознаётся подчёркиванием, а не краской. */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 2px;
  border-radius: var(--radius-tiny);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--c-bg-sunken);
  border: var(--border-width) solid var(--c-line-soft);
  border-radius: var(--radius-tiny);
  padding: 0.08em 0.35em;
  word-break: break-word;
}

/* Разделитель приложения: 1px, десятипроцентный чёрный. */
hr { border: 0; border-top: 1px solid var(--c-line-soft); margin: var(--sp-6) 0; }

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

/* ------------------------------------------------------------------ каркас */

.s-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.s-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--c-bg);
  color: var(--c-text);
  border: var(--border-width) solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
}
.s-skip:focus { left: var(--sp-2); top: var(--sp-2); }

.s-main:focus { outline: none; }

/* ------------------------------------------------------------------- шапка
 *
 * Одна строка: слово EMAPKA слева, три значка справа. Ни списка языков, ни
 * перечисления разделов, ни слова «Тема» — всё это лежит внутри вкладок,
 * которые выпадают по нажатию.
 *
 * Значки взяты общепринятые: глобус — язык, полумесяц или солнце — тема,
 * три полосы — меню. Человек узнаёт их по любому другому сайту, поэтому
 * подписи им не нужны; название всё равно есть для программ чтения с экрана
 * и всплывает подсказкой при наведении.
 */

.s-header {
  position: relative;
  z-index: 40;
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-bg);
}

.s-header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding-block: var(--sp-2);
}

.s-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.s-brand-name {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 1.25rem;
  white-space: nowrap;
}
.s-brand-stage {
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.s-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
}

/* Значок-кнопка. Сама область нажатия — 44px, как требует и Apple, и Material;
   видимый значок внутри меньше. */
.s-ico-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--min-tap);
  height: var(--min-tap);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
  list-style: none;
}
.s-ico-btn::-webkit-details-marker { display: none; }
.s-ico-btn::marker { content: ""; }
.s-ico-btn:hover { background: var(--c-bg-sunken); }

.s-ico { width: 24px; height: 24px; display: block; }

/* Переключатель темы. Без скриптов переключать нечем — значок скрыт, чтобы
   человек не нажимал на мёртвую кнопку. */
.s-theme-toggle { display: none; }
:root[data-js="on"] .s-theme-toggle { display: inline-flex; }

/* Какой значок показан, решает действующая тема, а не скрипт.
   Светлая — полумесяц на тёмном кружке: «нажми, станет темно».
   Тёмная  — солнце на светлом кружке: «нажми, станет светло». */
.s-ico--sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s-ico--moon { display: none; }
  :root:not([data-theme="light"]) .s-ico--sun { display: block; }
}
:root[data-theme="dark"] .s-ico--moon { display: none; }
:root[data-theme="dark"] .s-ico--sun { display: block; }

/* ----------------------------------------------------------- выпадающие вкладки
 *
 * Сделаны на <details> — родном элементе браузера. Он открывается нажатием и
 * с клавиатуры без единой строки скрипта, поэтому вкладки работают, даже если
 * скрипты выключены. Скрипт добавляет только удобство: закрытие по Esc и по
 * щелчку мимо, и то, что две вкладки не бывают открыты одновременно.
 */

.s-pop { position: relative; }

.s-pop-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--sp-2));
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - var(--sp-4) * 2));
  padding: var(--sp-1);
  background: var(--c-bg);
  border: var(--border-width) solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  z-index: 50;
}

.s-pop-list { list-style: none; margin: 0; padding: 0; }
.s-pop-list li { margin: 0; }
.s-pop-list a {
  display: flex;
  align-items: center;
  min-height: var(--min-tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-text);
  white-space: nowrap;
}
.s-pop-list a:hover { background: var(--c-bg-sunken); }
.s-pop-list a[aria-current] { font-weight: 700; }
/* Действующий язык и открытый раздел помечены не только жирным: цвет тоже
   не единственный признак. */
.s-pop-list a[aria-current]::after {
  content: "\00a0\2713";
  margin-inline-start: auto;
  padding-inline-start: var(--sp-3);
}

/* Языков шесть — на низком экране столбик прокручивается, а не вылезает. */
.s-pop-panel--lang .s-pop-list { max-height: min(60vh, 22rem); overflow-y: auto; }

/* ------------------------------------------------------------------- текст */

.s-prose { max-width: calc(var(--prose) + var(--sp-4) * 2); padding-block: var(--sp-7) var(--sp-8); }
.page-home .s-prose { max-width: calc(48rem + var(--sp-4) * 2); }

.s-h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

.s-standfirst {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-text-dim);
  margin: 0 0 var(--sp-6);
  text-wrap: pretty;
}

.s-prose h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
  margin: var(--sp-7) 0 var(--sp-3);
  text-wrap: balance;
}

.s-prose h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  margin: var(--sp-5) 0 var(--sp-2);
  text-wrap: balance;
}

.s-prose p, .s-prose ul, .s-prose ol, .s-prose dl { margin: 0 0 var(--sp-4); }
.s-prose ul, .s-prose ol { padding-inline-start: 1.4em; }
.s-prose li { margin-bottom: var(--sp-2); }

.s-lead { font-size: var(--fs-lead); color: var(--c-text-dim); }

.s-head { scroll-margin-top: var(--sp-4); }
.s-anchor {
  text-decoration: none;
  color: var(--c-disabled);
  opacity: 0;
  margin-inline-start: 0.35em;
  font-weight: 400;
}
.s-head:hover .s-anchor, .s-anchor:focus-visible { opacity: 1; }

.s-updated {
  color: var(--c-text-dim);
  font-size: var(--fs-caption);
  line-height: 1.3;
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
}

/* -------------------------------------------------------- шаги и врезки */

.s-steps { list-style: none; counter-reset: step; padding: 0; margin: var(--sp-5) 0; }
.s-steps > li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 40px;
  padding-bottom: var(--sp-5);
  margin: 0;
}
/* Номер шага — тот же язык, что слот в приложении: 1px рамка, чёрный текст. */
.s-steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: var(--border-width) solid var(--c-line);
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--c-bg);
}
.s-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 12px;
  top: 29px;
  bottom: 4px;
  width: 1px;
  background: var(--c-line-soft);
}
.s-step-h { display: block; font-weight: 700; line-height: 1.4; }
.s-steps p { margin: var(--sp-1) 0 0; color: var(--c-text-dim); }

.s-callout {
  border: var(--border-width) solid var(--c-line-soft);
  border-inline-start: 3px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-5) 0;
  background: var(--c-note-bg);
}
.s-callout p { margin: 0; }
.s-callout p + p { margin-top: var(--sp-2); }
.s-callout-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  line-height: 1.3;
  margin-bottom: 2px;
}
/* Красный и зелёный — ровно те же роли, что в приложении:
   красный предупреждает, зелёный подтверждает. */
.s-callout--warn { background: var(--c-danger-bg); border-inline-start-color: var(--c-danger); }
.s-callout--warn .s-callout-label { color: var(--c-danger); }
.s-callout--ok { background: var(--c-success-bg); border-inline-start-color: var(--c-success); }
.s-callout--ok .s-callout-label { color: var(--c-success-ink); }

.s-dl-list, .s-dl { margin: var(--sp-5) 0; }
.s-dl dt { font-weight: 700; margin-top: var(--sp-4); }
.s-dl dd { margin: 2px 0 0; color: var(--c-text-dim); }

.s-cards {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.s-card {
  border: var(--border-width) solid var(--c-line);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
  background: var(--c-bg);
  margin: 0;
}
.s-card-h { margin: 0 0 var(--sp-2); font-size: var(--fs-body); font-weight: 700; }
.s-card p { margin: 0; color: var(--c-text-dim); }

.s-quote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  border: var(--border-width) solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-bg);
}
.s-quote blockquote { margin: 0; }
.s-quote p { font-size: var(--fs-body); line-height: 1.5; }
.s-quote-cite { color: var(--c-text-dim); font-size: var(--fs-caption); line-height: 1.3; margin-top: var(--sp-2); }

.s-tablewrap { overflow-x: auto; margin: var(--sp-5) 0; }
.s-table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.s-table caption { text-align: start; color: var(--c-text-dim); font-size: var(--fs-caption); padding-bottom: var(--sp-2); }
.s-table th, .s-table td {
  text-align: start;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-line-hair);
  vertical-align: top;
}
.s-table thead th { border-bottom: 1px solid var(--c-line-soft); }

/* ------------------------------------------------------------ снимки экрана */

.s-shot { margin: var(--sp-5) 0; }
.s-shot img {
  display: block;
  border: var(--border-width) solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
}
.s-shot figcaption { color: var(--c-text-dim); font-size: var(--fs-caption); line-height: 1.3; margin-top: var(--sp-2); }

/* Место под снимок, который придёт из другого потока. */
.s-shot-slot {
  display: grid;
  place-content: center;
  gap: var(--sp-1);
  min-height: 160px;
  padding: var(--sp-5);
  text-align: center;
  border: var(--border-width) dashed var(--c-disabled);
  border-radius: var(--radius);
  background: var(--c-bg-sunken);
  color: var(--c-text-dim);
}
.s-shot-slot-mark { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }
.s-shot-slot-name { font-family: var(--font-mono); font-size: var(--fs-caption); word-break: break-all; }

/* ------------------------------------------------------------------ кнопки */

/* Точная кнопка приложения: белая, контрастная рамка, тень, 44px,
   при нажатии тень уходит и кнопка опускается на пиксель. */
.s-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--min-tap);
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-width) solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
}
.s-btn:active { box-shadow: none; transform: translateY(1px); }
/* В темноте объём даёт не тень, а более светлая поверхность. */
:root[data-theme="dark"] .s-btn,
:root[data-theme="dark"] .s-gate-link { background: var(--c-bg-raised); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .s-btn,
  :root:not([data-theme="light"]) .s-gate-link { background: var(--c-bg-raised); }
}

/* Главное действие. Инверсия, а не новая краска: палитра приложения
   чёрно-белая, и вес здесь набирается заливкой основного цвета текста. */
.s-btn--primary { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }

/* Недоступная кнопка. Цвет неактивного (#b4b4b4) взят из приложения и годится
   для кнопки, надпись на которой человеку читать не обязательно. Здесь другой
   случай: на кнопке написано «Windows», и это ему нужно прочесть. Поэтому
   надпись остаётся читаемой (5.9:1 в светлой, 7.7:1 в тёмной), а недоступность
   показывает пунктирная рамка и отсутствие тени. */
.s-btn--disabled {
  color: var(--c-text-dim);
  border-color: var(--c-disabled);
  border-style: dashed;
  box-shadow: none;
  cursor: default;
}
.s-btn--disabled .s-dl-meta { color: var(--c-text-dim); }
.s-btn--disabled:active { transform: none; }

.s-cta { margin: var(--sp-5) 0; }
.s-cta .s-btn { display: inline-flex; }

/* ---------------------------------------------------------------- загрузки */

.s-dl { margin: var(--sp-6) 0; }
.s-dl-intro { margin: 0 0 var(--sp-4); }
.s-dl-grid {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.s-dl-card { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.s-dl-card .s-btn { width: 100%; }
.s-dl-os { font-size: var(--fs-body); }
.s-dl-meta { font-size: var(--fs-caption); font-weight: 400; line-height: 1.3; }
.s-dl-req, .s-dl-sum {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.3;
  color: var(--c-text-dim);
}
.s-dl-sum-label { display: block; letter-spacing: 0.12em; text-transform: uppercase; }
.s-sum { display: block; word-break: break-all; font-size: 11px; background: none; border: 0; padding: 0; }
.s-dl-tail { margin: 0; color: var(--c-text-dim); font-size: var(--fs-small); }

/* Подсказка для системы, с которой человек пришёл. Ставит site.js. */
.s-dl-card[data-guess="yes"] .s-btn { outline: 2px solid var(--c-text); outline-offset: 2px; }

/* ------------------------------------------------------------------ подвал */

.s-footer {
  border-top: 1px solid var(--c-line-soft);
  padding-block: var(--sp-5);
  margin-top: var(--sp-8);
}
.s-footer-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-3);
  padding: 0;
  font-size: var(--fs-small);
}
.s-footer-note {
  margin: 0;
  color: var(--c-text-dim);
  font-size: var(--fs-caption);
  line-height: 1.4;
  max-width: var(--prose);
}

/* ------------------------------------- выбор языка и страница «не найдено» */

.s-gate { min-height: 100svh; display: grid; place-items: center; padding: var(--sp-4); }
.s-gate-in { max-width: 32rem; text-align: center; }
/* Знак страницы выбора языка — то же слово, тем же весом и разрядкой,
   что на главном экране приложения. */
.s-gate-mark {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 1.5rem;
  margin: 0 0 var(--sp-5);
}
.s-gate-mark--small { font-size: 1.25rem; color: var(--c-text-dim); }
.s-gate-h { font-size: var(--fs-h2); font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); }
.s-gate-lead { color: var(--c-text-dim); margin: 0 0 var(--sp-5); }
.s-gate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.s-gate-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--min-tap);
  justify-content: center;
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-width) solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-btn);
  text-decoration: none;
  background: var(--c-bg);
}
.s-gate-link:active { box-shadow: none; transform: translateY(1px); }
.s-gate-name { font-weight: 700; }
.s-gate-en { font-size: var(--fs-caption); color: var(--c-text-dim); line-height: 1.3; }

/* ------------------------------------------------------------------- печать */

@media print {
  .s-header, .s-footer, .s-skip, .s-anchor { display: none; }
  body { background: #fff; color: #000; background-image: none; }
  .s-prose { max-width: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}