/* deck.css — стили презентационного движка (слой поверх theme.css).
 *
 * Разделы: раскладка и навигация / слайд и типографика / анимации появления /
 * терминал / код / скриншот браузера / лайтбокс / обзор / режим чтения и печать /
 * узкий экран.
 *
 * Правила, унаследованные от видео-части проекта: анимация только на входе
 * слайда и во время «печати» терминала — никаких пульсаций и «дышащих» рамок
 * в статике; у текста нет will-change.
 */

/* ================================================================
 * 0. токены движка
 * ================================================================ */

:root {
  --deck-topbar: 3rem;
  --deck-maxw: 1120px;
  --deck-widew: 1440px;
  --deck-gap: 0.9rem;
  --deck-anim: 280ms;
  --deck-stagger: 70ms;

  /* подсветка кода: свои цвета из токенов темы, не палитра Pygments.
   * Смесь с --foreground сама поднимает контраст в светлой гамме
   * и осветляет токен в тёмной. */
  --tk-com: var(--muted-foreground);
  --tk-kw: color-mix(in oklab, var(--info) 74%, var(--foreground));
  --tk-str: color-mix(in oklab, var(--success) 70%, var(--foreground));
  --tk-num: color-mix(in oklab, var(--chart-2) 74%, var(--foreground));
  --tk-fn: color-mix(in oklab, var(--chart-3) 76%, var(--foreground));
  --tk-cls: color-mix(in oklab, var(--warning) 72%, var(--foreground));
  --tk-var: color-mix(in oklab, var(--chart-4) 76%, var(--foreground));
  --tk-attr: color-mix(in oklab, var(--chart-5) 72%, var(--foreground));
  --tk-op: color-mix(in oklab, var(--foreground) 72%, var(--muted-foreground));
  --tk-meta: color-mix(in oklab, var(--danger) 74%, var(--foreground));
  --tk-ins: color-mix(in oklab, var(--success) 76%, var(--foreground));
  --tk-del: color-mix(in oklab, var(--danger) 78%, var(--foreground));

  /* панели окон (терминал, код, браузер) */
  --deck-bar: color-mix(in oklab, var(--muted) 55%, var(--surface));
  --deck-body: var(--background);
  --deck-edge: color-mix(in oklab, var(--foreground) 14%, transparent);
}

html {
  /* один слайд = один экран: базовый кегль зависит от ширины вьюпорта */
  font-size: clamp(14.5px, calc(0.42vw + 10.3px), 19px);
}

/* ================================================================
 * 1. раскладка и навигация
 * ================================================================ */

body.deck {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  height: var(--deck-topbar);
  padding-inline: 0.75rem;
  border-bottom: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  font-size: 0.8125rem;
}

.topbar__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted-foreground);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.topbar__home:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}
.topbar__home svg { width: 1.125rem; height: 1.125rem; }

.topbar__titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.2;
}
.topbar__part {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__slide {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__counter {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
}
.topbar__counter b { color: var(--foreground); font-weight: 600; }

.topbar__prog {
  flex: 1;
  min-width: 2rem;
}

.topbar__acts {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}

.tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}
.tbtn svg { width: 1.0625rem; height: 1.0625rem; }
.tbtn:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}
.tbtn.is-on {
  background-color: color-mix(in oklab, var(--primary) 14%, transparent);
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
  color: color-mix(in oklab, var(--primary) 82%, var(--foreground));
}
.tbtn--scheme { width: auto; padding-inline: 0.5rem; gap: 0.375rem; font-size: 0.75rem; font-family: inherit; }
.tbtn__sep {
  width: 1px;
  height: 1.25rem;
  margin-inline: 0.375rem;
  background-color: var(--border);
}

/* сцена */
.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* зоны клика по краям */
.edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: transparent;
  cursor: pointer;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.edge--prev { left: 0; justify-content: flex-start; padding-left: 0.75rem; }
.edge--next { right: 0; justify-content: flex-end; padding-right: 0.75rem; }
.edge svg { width: 1.25rem; height: 1.25rem; }
.edge:hover {
  color: color-mix(in oklab, var(--foreground) 55%, transparent);
  background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
}
.edge[disabled] { pointer-events: none; }

/* подсказка «слайд прокручивается» */
.slide__more {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  background-color: color-mix(in oklab, var(--surface) 85%, transparent);
  box-shadow: inset 0 0 0 1px var(--deck-edge);
  pointer-events: none;
}
.slide.is-active.has-more .slide__more { display: inline-flex; }

/* ================================================================
 * 2. слайд
 * ================================================================ */

.slide {
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: clamp(1rem, 3.2vh, 2.5rem) clamp(1rem, 4.5vw, 4rem);
  scrollbar-gutter: stable;
}
.slide.is-active { display: block; }

.slide__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--deck-gap);
  width: 100%;
  max-width: var(--deck-maxw);
  min-height: 100%;
  margin-inline: auto;
}
.slide--wide .slide__inner { max-width: var(--deck-widew); }
.slide--center .slide__inner { align-items: center; text-align: center; }
.slide--center .slide__inner .blk { width: 100%; }

.blk > :first-child { margin-top: 0; }
.blk > :last-child { margin-bottom: 0; }

.slide__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--primary) 55%, var(--muted-foreground));
}
.slide--center .slide__kicker { justify-content: center; }
.slide__kicker::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--primary) 45%, var(--border));
}

.slide__title {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.2;
}
.slide__rule {
  width: 3.5rem;
  height: 3px;
  margin-top: -0.25rem;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--primary) 65%, var(--border));
}
.slide--center .slide__title { font-size: 2.35rem; }
.slide--center .slide__rule { margin-inline: auto; }

.slide h3 {
  margin: 0.25rem 0 0.4rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.slide h4 {
  margin: 0.25rem 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.slide p { margin: 0 0 0.7em; }
.slide .lead {
  font-size: 1.125rem;
  color: color-mix(in oklab, var(--foreground) 82%, var(--muted-foreground));
}
.slide ul, .slide ol { margin: 0 0 0.7em; }
.slide li { margin-bottom: 0.35em; }
.slide li::marker { color: color-mix(in oklab, var(--primary) 55%, var(--muted-foreground)); }

.slide__num {
  position: absolute;
  right: clamp(1rem, 4.5vw, 4rem);
  bottom: 0.625rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--foreground) 32%, transparent);
  pointer-events: none;
}

/* ================================================================
 * 3. анимации появления
 * ================================================================ */

@keyframes deck-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.slide.is-active [data-anim] {
  animation: deck-in var(--deck-anim) cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * var(--deck-stagger));
}
.slide [data-anim] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .slide.is-active [data-anim] { animation: none; }
  .flow .fl-pkt { display: none; }
  .flow .fl-node, .flow .fl-edge { animation: none !important; }
  .flow .fl-edge { stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* ================================================================
 * 4. терминал
 * ================================================================ */

.term {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px -1px color-mix(in oklab, var(--foreground) 12%, transparent),
    0 10px 24px -18px color-mix(in oklab, var(--foreground) 45%, transparent);
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.3125rem 0.5rem 0.3125rem 0.625rem;
  border-bottom: 1px solid var(--border);
  background-color: var(--deck-bar);
  color: var(--muted-foreground);
}
.dots { display: flex; gap: 0.375rem; flex-shrink: 0; }
.dots i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--foreground) 18%, transparent);
}
.dots i:nth-child(1) { background-color: color-mix(in oklab, var(--danger) 62%, transparent); }
.dots i:nth-child(2) { background-color: color-mix(in oklab, var(--warning) 62%, transparent); }
.dots i:nth-child(3) { background-color: color-mix(in oklab, var(--success) 62%, transparent); }

.term__head {
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted-foreground);
}
.term__head b {
  font-weight: 600;
  color: color-mix(in oklab, var(--foreground) 88%, var(--muted-foreground));
}
.term__ms {
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--muted-foreground) 88%, transparent);
}
.term__spacer { flex: 1; }
.term__acts { display: flex; align-items: center; gap: 0.125rem; flex-shrink: 0; }

.ibtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 1.625rem;
  min-width: 1.625rem;
  padding-inline: 0.3125rem;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.ibtn svg { width: 0.9375rem; height: 0.9375rem; }
.ibtn:hover {
  background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
  color: var(--foreground);
}
.ibtn.is-done { color: var(--success); }

/* пара иконок «покой/сделано» и «светлая/тёмная»: видна одна по состоянию кнопки */
.ic { display: inline-flex; }
.ic--done { display: none; }
.is-done .ic--idle,
.is-on .ic--idle { display: none; }
.is-done .ic--done,
.is-on .ic--done { display: inline-flex; }

.term__body {
  padding: 0.625rem 0.75rem 0.75rem;
  background-color: var(--deck-body);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  cursor: text;
}
.term__body.is-long {
  max-height: 22rem;
  overflow-y: auto;
}

.term__cmd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4375rem;
  min-height: 1.6em;
}
.term__prompt { white-space: pre; user-select: none; }
.term__prompt .u { color: color-mix(in oklab, var(--success) 76%, var(--foreground)); font-weight: 600; }
.term__prompt .h { color: color-mix(in oklab, var(--success) 76%, var(--foreground)); }
.term__prompt .d { color: color-mix(in oklab, var(--info) 74%, var(--foreground)); }
.term__prompt .s { color: var(--muted-foreground); }
.term__cmdtext { white-space: pre-wrap; word-break: break-word; color: var(--foreground); font-weight: 500; }
.term__caret {
  display: none;
  width: 0.5em;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background-color: color-mix(in oklab, var(--foreground) 72%, transparent);
}
.term.is-typing .term__caret { display: inline-block; }

.term__out { margin: 0; }
.tl {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.6em;
  padding-inline: 0.25rem;
  margin-inline: -0.25rem;
  border-radius: 2px;
}
.tl:empty::after { content: "\00a0"; }
.tl--err { color: var(--danger); }
.tl--ok { color: color-mix(in oklab, var(--success) 84%, var(--foreground)); }
.tl--dim { color: var(--muted-foreground); }
.tl--hl {
  background-color: color-mix(in oklab, var(--warning) 14%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in oklab, var(--warning) 80%, transparent);
}
.tl.is-hidden { display: none; }

.term__fold {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
}
.term__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-top: 1px solid var(--border);
  background-color: color-mix(in oklab, var(--muted) 35%, var(--surface));
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}
.term__note { flex: 1; min-width: 0; }

/* ================================================================
 * 5. код
 * ================================================================ */

.code {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px -1px color-mix(in oklab, var(--foreground) 10%, transparent);
}
.code__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.125rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background-color: var(--deck-bar);
}
.code__bar > svg { width: 0.9375rem; height: 0.9375rem; color: var(--muted-foreground); flex-shrink: 0; }
.code__file {
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.code__lang {
  flex-shrink: 0;
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background-color: color-mix(in oklab, var(--foreground) 7%, transparent);
}
.code__spacer { flex: 1; }
.code__body {
  overflow-x: auto;
  background-color: var(--deck-body);
  padding-block: 0.4375rem;
}
.code__body.is-long { max-height: 24rem; overflow-y: auto; }

.cl {
  display: block;
  min-width: max-content;
  padding: 0 0.875rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.62;
  white-space: pre;
}
.cl__n {
  display: inline-block;
  width: 2rem;
  margin-left: -0.5rem;
  margin-right: 0.875rem;
  text-align: right;
  color: color-mix(in oklab, var(--muted-foreground) 72%, transparent);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.cl--hl {
  background-color: color-mix(in oklab, var(--warning) 14%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in oklab, var(--warning) 80%, transparent);
}
.cl:empty::after { content: "\00a0"; }
.cl.is-folded { display: none; }
.code__fold {
  display: flex;
  padding: 0.375rem 0.75rem;
  border-top: 1px solid var(--border);
  background-color: var(--deck-bar);
}

/* токены Pygments -> токены темы */
.tk-com { color: var(--tk-com); font-style: italic; }
.tk-kw { color: var(--tk-kw); font-weight: 600; }
.tk-str { color: var(--tk-str); }
.tk-num { color: var(--tk-num); }
.tk-fn { color: var(--tk-fn); }
.tk-cls { color: var(--tk-cls); }
.tk-var { color: var(--tk-var); }
.tk-attr { color: var(--tk-attr); }
.tk-op { color: var(--tk-op); }
.tk-meta { color: var(--tk-meta); }
.tk-esc { color: var(--tk-meta); font-weight: 600; }
.tk-ins { color: var(--tk-ins); }
.tk-del { color: var(--tk-del); }
.tk-err { color: var(--danger); text-decoration: underline wavy var(--danger); }
.tk-plain { color: var(--foreground); }

/* diff: фон строки по маркеру */
.cl--add { background-color: color-mix(in oklab, var(--success) 12%, transparent); }
.cl--rm { background-color: color-mix(in oklab, var(--danger) 12%, transparent); }

/* карточка файла */
.filecard { margin: 0; }
.filecard__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--deck-bar);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
}
.filecard__bar > svg { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }
.filecard > .code { border-top-left-radius: 0; border-top-right-radius: 0; }
.filecard > .code > .code__bar { display: none; }
.filecard__body { padding: 0.75rem 0.875rem; }

/* ================================================================
 * 6. скриншот браузера
 * ================================================================ */

.shot {
  margin: 0;
  max-width: var(--w, none);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px -1px color-mix(in oklab, var(--foreground) 12%, transparent),
    0 14px 30px -22px color-mix(in oklab, var(--foreground) 55%, transparent);
}
.shot--full { max-width: none; width: 100%; }
.shot__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.3125rem 0.625rem;
  border-bottom: 1px solid var(--border);
  background-color: var(--deck-bar);
}
.shot__url {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
  height: 1.625rem;
  padding-inline: 0.625rem;
  border-radius: 9999px;
  background-color: var(--background);
  box-shadow: inset 0 0 0 1px var(--deck-edge);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  overflow: hidden;
  white-space: nowrap;
}
.shot__url span { overflow: hidden; text-overflow: ellipsis; }
.shot__url svg { width: 0.8125rem; height: 0.8125rem; flex-shrink: 0; color: var(--success); }
.shot__url--local svg { color: var(--muted-foreground); }
.shot__stage {
  display: flex;
  justify-content: center;
  background-color: color-mix(in oklab, var(--muted) 40%, var(--background));
}
.shot__stage img {
  display: block;
  max-width: 100%;
  max-height: min(58vh, 46rem);
  width: auto;
  height: auto;
  cursor: zoom-in;
}
.shot__cap {
  padding: 0.4375rem 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.shot__cap:empty { display: none; }

.shots2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  align-items: start;
}
.shots2__label {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.shots2__label--before {
  color: var(--muted-foreground);
  background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
}
.shots2__label--after {
  color: color-mix(in oklab, var(--success) 82%, var(--foreground));
  background-color: color-mix(in oklab, var(--success) 14%, transparent);
}

/* ================================================================
 * 7. дерево, колонки, шаги
 * ================================================================ */

.tree {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--deck-body);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.62;
}
.tree__l { display: block; white-space: pre; min-width: max-content; }
.tree__c { color: var(--muted-foreground); }
.tree__d { color: color-mix(in oklab, var(--chart-3) 72%, var(--foreground)); font-weight: 600; }
.tree__f { color: var(--foreground); }

.cols {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.col { min-width: 0; }
.col > :first-child { margin-top: 0; }
.col > :last-child { margin-bottom: 0; }

.steps { margin: 0; }
.steps .timeline__node {
  color: color-mix(in oklab, var(--primary) 78%, var(--foreground));
  background-color: color-mix(in oklab, var(--primary) 10%, var(--surface));
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
}

/* ================================================================
 * 7b. flow-инфографика (инлайновый SVG из сборщика)
 * ================================================================ */

.flow { margin: 0; }
.flow svg { display: block; width: 100%; height: auto; }
.flow svg.flow__narrow { display: none; }
.flow__narrow .fl-lbl { display: none; }
.flow--left svg.flow__wide,
.flow--left svg.flow__narrow {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
}
.flow--left .flow__cap { text-align: left; }
.flow__cap {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--muted-foreground);
}

/* узел-карточка: токены темы, радиус и тонированный кружок иконки */
.fl-node {
  --fl-tone: var(--muted-foreground);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.fl-node--info { --fl-tone: var(--info); }
.fl-node--success { --fl-tone: var(--success); }
.fl-node--warning { --fl-tone: var(--warning); }
.fl-node--danger { --fl-tone: var(--danger); }
.fl-node--primary { --fl-tone: var(--primary); }
.fl-node rect {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
  rx: var(--radius);
}
.fl-ico circle {
  fill: color-mix(in oklab, var(--fl-tone) 14%, transparent);
}
.fl-ico g {
  color: color-mix(in oklab, var(--fl-tone) 76%, var(--foreground));
}
.fl-ico g path {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fl-t {
  fill: var(--foreground);
  font-family: inherit;
  font-size: var(--fl-lbl-fs, 12.5px);
  font-weight: 600;
}
.fl-s {
  fill: var(--muted-foreground);
  font-family: inherit;
  font-size: var(--fl-sub-fs, 10.5px);
}

/* рёбра: прямой путь — info, данные — chart-2, обратный — пунктир muted */
.fl-edge {
  fill: none;
  stroke: color-mix(in oklab, var(--info) 72%, var(--foreground));
  stroke-width: 1.6;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.fl-edge--data {
  stroke: color-mix(in oklab, var(--chart-2) 80%, var(--foreground));
}
.fl-edge--back {
  stroke: var(--muted-foreground);
  stroke-dasharray: 6 5;
  stroke-dashoffset: 0;
  opacity: 0.85;
}
.fl-mk-f { fill: color-mix(in oklab, var(--info) 72%, var(--foreground)); }
.fl-mk-d { fill: color-mix(in oklab, var(--chart-2) 80%, var(--foreground)); }
.fl-mk-b { fill: var(--muted-foreground); }
.fl-lbl {
  fill: var(--muted-foreground);
  font-family: var(--mono);
  font-size: 9.5px;
  /* подпись шире зазора между карточками: halo цветом фона держит читаемость */
  paint-order: stroke;
  stroke: var(--background);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* бегущий пакет: короткий штрих по нормированной длине пути */
.fl-pkt {
  fill: none;
  stroke: color-mix(in oklab, var(--chart-2) 88%, var(--foreground));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.05 0.95;
  stroke-dashoffset: 0;
  opacity: 0;
}
.fl-pkt--data { stroke: color-mix(in oklab, var(--chart-2) 88%, var(--foreground)); }
.fl-pkt--back { stroke: color-mix(in oklab, var(--muted-foreground) 92%, var(--foreground)); }

/* бейджи-пилюли (cache) */
.fl-badge rect { stroke-width: 1; }
.fl-badge--warning rect {
  fill: color-mix(in oklab, var(--warning) 16%, transparent);
  stroke: color-mix(in oklab, var(--warning) 34%, transparent);
}
.fl-badge--warning text { fill: color-mix(in oklab, var(--warning) 80%, var(--foreground)); }
.fl-badge--warning g path { stroke: color-mix(in oklab, var(--warning) 80%, var(--foreground)); fill: none; stroke-width: 2; }
.fl-badge--info rect {
  fill: color-mix(in oklab, var(--info) 14%, transparent);
  stroke: color-mix(in oklab, var(--info) 32%, transparent);
}
.fl-badge--info text { fill: color-mix(in oklab, var(--info) 80%, var(--foreground)); }
.fl-badge--info g path { stroke: color-mix(in oklab, var(--info) 80%, var(--foreground)); fill: none; stroke-width: 2; }
.fl-badge text {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}

/* движение: только пока слайд активен */
@keyframes fl-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes fl-draw {
  from { stroke-dashoffset: var(--len); opacity: 0; }
  12% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes fl-fade {
  from { opacity: 0; }
  to { opacity: 0.85; }
}
@keyframes fl-pkt-on { to { opacity: 1; } }
@keyframes fl-run {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
.slide.is-active .flow .fl-node {
  animation: fl-in 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i) * 70ms);
}
.slide.is-active .flow .fl-edge {
  animation: fl-draw 360ms ease-out both;
  animation-delay: calc(180ms + var(--i) * 70ms);
}
.slide.is-active .flow .fl-edge--back {
  animation: fl-fade 420ms ease-out both;
  animation-delay: calc(320ms + var(--i) * 70ms);
}
.slide.is-active .flow .fl-pkt {
  animation: fl-pkt-on 1ms linear var(--pd, 1.4s) forwards,
    fl-run 3.4s linear var(--pd, 1.4s) infinite;
}
.slide.is-active .flow .fl-pkt--back {
  animation-direction: normal, reverse;
}

/* статика: обзор, лайтбокс, режим чтения, печать, reduced-motion */
.ov__clone .flow .fl-node,
.ov__clone .flow .fl-edge,
body.is-read .flow .fl-node,
body.is-read .flow .fl-edge {
  animation: none;
}
.ov__clone .flow .fl-edge,
body.is-read .flow .fl-edge {
  stroke-dashoffset: 0;
  opacity: 1;
}
.ov__clone .flow .fl-pkt,
body.is-read .flow .fl-pkt {
  display: none;
}

/* ================================================================
 * 8. лайтбокс
 * ================================================================ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  background-color: color-mix(in oklab, black 78%, transparent);
  backdrop-filter: blur(3px);
}
html.dark .lb { background-color: color-mix(in oklab, black 88%, transparent); }
.lb.is-open { display: flex; }
.lb__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  padding-inline: 0.75rem;
  color: oklch(96% 0 0);
  font-size: 0.8125rem;
}
.lb__bar .tbtn { color: oklch(88% 0 0); }
.lb__bar .tbtn:hover { background-color: color-mix(in oklab, white 14%, transparent); color: white; }
.lb__cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 0 3.5rem 1.5rem;
}
.lb__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 24px 60px -20px black;
  cursor: zoom-in;
}
.lb__stage img.is-zoom {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background-color: color-mix(in oklab, white 12%, transparent);
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}
.lb__nav:hover { background-color: color-mix(in oklab, white 24%, transparent); }
.lb__nav svg { width: 1.25rem; height: 1.25rem; }
.lb__nav--prev { left: 0.5rem; }
.lb__nav--next { right: 0.5rem; }
.lb__nav[hidden] { display: none; }

/* ================================================================
 * 8b. разбор команды: кнопка в терминале, модалка, details в чтении/печати
 * ================================================================ */

.term__explain { flex-shrink: 0; }
.term__explain svg { flex-shrink: 0; }

/* в слайдовом режиме разбор живёт в модалке, details скрыт */
.cmdx-details { display: none; }

body.is-read .term__explain { display: none; }
body.is-read .cmdx-details {
  display: block;
  margin: 0.5rem 0.75rem 0.75rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.5rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
body.is-read .cmdx-details summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--info) 75%, var(--foreground));
}

.cmdx {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
}
.cmdx.is-open { display: block; }
.cmdx__scrim {
  position: absolute;
  inset: 0;
  background-color: color-mix(in oklab, black 68%, transparent);
  backdrop-filter: blur(2px);
}
html.dark .cmdx__scrim {
  background-color: color-mix(in oklab, black 82%, transparent);
}
.cmdx__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(82vh, 52rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--surface-foreground);
  box-shadow: 0 24px 60px -24px color-mix(in oklab, black 60%, transparent),
    0 0 0 1px color-mix(in oklab, var(--foreground) 5%, transparent);
  animation: cmdx-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes cmdx-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.cmdx__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.cmdx__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdx__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.875rem 1.25rem 1.25rem;
}
.cmdx__lead {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  color: color-mix(in oklab, var(--foreground) 85%, var(--muted-foreground));
}
.cmdx__cmd {
  padding: 0.75rem 0;
  border-top: 1px dashed var(--border);
}
.cmdx__cmd:first-child { border-top: 0; padding-top: 0; }
.cmdx__text code {
  display: block;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--background);
  box-shadow: none;
  color: var(--foreground);
  font-family: var(--mono);
  font-size: 0.8125rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.cmdx__tokens { margin-top: 0.5rem; font-size: 0.8125rem; }
.cmdx__tokens td code {
  white-space: nowrap;
  background-color: color-mix(in oklab, var(--foreground) 7%, transparent);
}
.cmdx__body h4 {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.cmdx__body p { margin: 0 0 0.35rem; font-size: 0.875rem; }
.cmdx__body ul { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; }
.cmdx__body li { margin-bottom: 0.25rem; }

@media (max-width: 900px) {
  .term__explain span { display: none; }
  .term__explain { width: 1.75rem; padding-inline: 0; }
}

@media print {
  .cmdx, .term__explain { display: none !important; }
  .cmdx-details { display: block !important; }
}

/* ================================================================
 * 9. обзор (O)
 * ================================================================ */

.ov {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  background-color: color-mix(in oklab, var(--background) 94%, transparent);
  backdrop-filter: blur(6px);
}
.ov.is-open { display: flex; }
.ov__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.ov__title { font-size: 0.9375rem; font-weight: 600; }
.ov__hint { font-size: 0.75rem; color: var(--muted-foreground); }
.ov__spacer { flex: 1; }
.ov__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
}
.ov__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.875rem;
}
.ov__cell {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    background-color 0.15s ease-in-out;
}
.ov__cell:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--foreground) 45%, transparent);
}
.ov__cell.is-cur {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary),
    0 6px 18px -10px color-mix(in oklab, var(--primary) 60%, transparent);
}
.ov__vp {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  background-color: var(--background);
  box-shadow: inset 0 0 0 1px var(--deck-edge);
}
.ov__scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  transform: scale(var(--ovk, 0.2));
  transform-origin: top left;
  pointer-events: none;
  overflow: hidden;
}
.ov .slide { display: block; }
.ov__clone {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  padding: 2rem 3rem;
}
.ov__clone .slide__inner { min-height: 100%; max-width: 1120px; }
.ov__clone [data-anim] { animation: none !important; opacity: 1 !important; }
.ov__clone .tl.is-hidden { display: block; }
.ov__clone .term__caret { display: none; }
.ov__clone .slide__more, .ov__clone .slide__num { display: none; }
.ov__meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-inline: 0.25rem;
  min-width: 0;
}
.ov__n {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
.ov__t {
  min-width: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ================================================================
 * 10. режим чтения и печать
 * ================================================================ */

body.is-read { overflow: auto; height: auto; }
body.is-read .stage { overflow: visible; }
body.is-read .edge, body.is-read .slide__more { display: none; }
body.is-read .slide {
  position: relative;
  inset: auto;
  display: block;
  overflow: visible;
  min-height: 100dvh;
  border-bottom: 1px dashed var(--border);
  padding-block: 3rem;
}
body.is-read .slide__inner { min-height: 0; justify-content: flex-start; }
body.is-read .slide [data-anim] { animation: none; }
body.is-read .shot__stage img { max-height: none; }
body.is-read .term__body.is-long, body.is-read .code__body.is-long {
  max-height: none;
  overflow: visible;
}
body.is-read .cl.is-folded, body.is-read .tl.is-folded { display: block; }
body.is-read .code__fold, body.is-read .term__fold { display: none; }
body.is-read .topbar { position: sticky; top: 0; z-index: 20; }

@media print {
  html { font-size: 11pt; }
  body.deck { height: auto; overflow: visible; }
  .topbar, .edge, .ov, .lb, .slide__more, .slide__num, .term__acts, .ibtn { display: none !important; }
  .stage { overflow: visible; }
  .slide {
    position: relative;
    inset: auto;
    display: block;
    overflow: visible;
    padding: 0;
    break-after: page;
    page-break-after: always;
    min-height: 0;
  }
  .slide:last-of-type { break-after: auto; page-break-after: auto; }
  .slide__inner { min-height: 0; justify-content: flex-start; max-width: none; }
  .slide [data-anim] { animation: none !important; }
  .tl.is-hidden { display: block !important; }
  .term__body.is-long, .code__body.is-long { max-height: none; overflow: visible; }
  .cl.is-folded, .tl.is-folded { display: block !important; }
  .code__fold, .term__fold { display: none !important; }
  .flow .fl-pkt { display: none !important; }
  .flow .fl-node, .flow .fl-edge { animation: none !important; }
  .flow .fl-edge { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .term, .code, .shot, .callout, .tree, .flow { break-inside: avoid; page-break-inside: avoid; }
  .shot__stage img { max-height: 22rem; }
}

/* ================================================================
 * 11. обложка (index.html)
 * ================================================================ */

.cover {
  min-height: 100dvh;
  padding: clamp(1.5rem, 5vh, 4rem) clamp(1rem, 5vw, 3rem) 3rem;
}
.cover__inner {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.cover__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--primary) 55%, var(--muted-foreground));
}
.cover__title {
  margin: 0.25rem 0 0;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.cover__sub {
  margin: 0.5rem 0 0;
  max-width: 62ch;
  font-size: 1.0625rem;
  color: color-mix(in oklab, var(--foreground) 78%, var(--muted-foreground));
}
.cover__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.875rem;
}
.pcard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out,
    background-color 0.18s ease-in-out;
}
.pcard:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  box-shadow: 0 10px 26px -16px color-mix(in oklab, var(--foreground) 55%, transparent);
}
.pcard__top { display: flex; align-items: center; gap: 0.5rem; }
.pcard__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: calc(var(--radius) - 2px);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--primary) 80%, var(--foreground));
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}
.pcard__t {
  min-width: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard__d {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pcard__bar { height: 0.25rem; }
.cover__sec {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0.5rem 0 0;
}
.keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
}
.keys div { display: flex; align-items: baseline; gap: 0.5rem; }
.keys span { color: var(--muted-foreground); }
.cover__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.cover__spacer { flex: 1; }

/* ================================================================
 * 12. узкий экран
 * ================================================================ */

@media (max-width: 1024px) {
  .flow svg.flow__wide { display: none; }
  .flow svg.flow__narrow { display: block; }
}

@media (max-width: 900px) {
  .edge { display: none; }
  .topbar__slide { display: none; }
  .topbar__prog { display: none; }
  .slide { padding-inline: 1rem; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .shots2 { grid-template-columns: minmax(0, 1fr); }
  .slide--center .slide__title { font-size: 1.75rem; }
  .ov__grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}

@media (max-width: 620px) {
  .topbar__titles { display: none; }
  .tbtn--scheme span { display: none; }
}