@charset "UTF-8";
/* Объясняющие анимации в статьях. Каждая анимация — отдельная страница
   /anim/<статья>/<имя>.html: в статью она встраивается через iframe
   (блок ::: animation), по ссылке открывается и сама. Цвета и шрифты —
   токены сайта, поэтому тёмная тема работает без отдельной версии. */

html { background: var(--surface-300); color-scheme: light dark; }
body {
  margin: 0; color: var(--ink-900);
  font-family: var(--body-family); font-size: var(--body-sm-size); line-height: var(--body-sm-line);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.anim { max-width: 960px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.embedded .anim { max-width: none; padding: 0; }
.anim__title {
  margin: 0 0 var(--space-4);
  font-family: var(--label-family); font-size: var(--label-size); line-height: var(--label-line);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--ink-600);
}
.embedded .anim__title { display: none; }
.anim__stage { display: block; width: 100%; height: auto; }

/* Подпись кадра: главный смысл живёт здесь, а не в мелком тексте сцены */
.anim__cap { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); min-height: 4.4em; }

/* Сцена и прозрачная кнопка паузы поверх неё: касание — пауза, ещё касание — дальше */
.anim__view { position: relative; }
.anim__toggle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.anim__toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.anim__badge {
  position: absolute; top: var(--space-3); right: var(--space-3); pointer-events: none;
  padding: 4px 10px; border: 1px solid var(--line-300); border-radius: var(--radius-md);
  background: var(--surface-200); color: var(--ink-600);
  font-family: var(--meta-family); font-size: var(--meta-size);
}
.anim__badge[hidden] { display: none; }
/* Все подписи списком — для читалок, на экране не видны */
.anim__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Режим снимка кадра (?frame=N): без значка и кнопки паузы — для проверки и превью */
.export .anim__toggle, .export .anim__badge { display: none; }

/* Классы для сцен — чтобы все анимации говорили одним языком */
.a-box { fill: var(--surface-200); stroke: var(--line-300); stroke-width: 1.5; }
.a-box--clay { fill: color-mix(in srgb, var(--clay-600) 10%, var(--surface-200)); stroke: var(--clay-600); }
.a-box--ok { fill: color-mix(in srgb, var(--ok-600) 10%, var(--surface-200)); stroke: var(--ok-600); }
.a-box--ghost { fill: none; stroke: var(--line-300); stroke-dasharray: 5 4; }
.a-line { fill: none; stroke: var(--ink-400); stroke-width: 1.5; }
.a-label { font-family: var(--body-family); font-size: 22px; font-weight: 500; fill: var(--ink-900); }
.a-sub { font-family: var(--body-family); font-size: 18px; fill: var(--ink-600); }
.a-mono { font-family: var(--label-family); font-size: 18px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-600); }
.a-note { font-family: var(--meta-family); font-size: 18px; fill: var(--ink-400); }
.a-clay { fill: var(--clay-600); }
.a-ok { fill: var(--ok-600); }
.a-ink { fill: var(--ink-900); }
.a-muted { fill: var(--ink-600); }