/* Навигатор разделов: пилюля под шапкой с текущей главой. Общий для
   витрины (/product/..., /for/...) и главной - разметка showcase/_path.html,
   данные showcase/path.py, поведение js/vt-path.js. Отступ сверху - высота
   шапки сайта (--site-hdr, css/site-chrome.css). */
.vt-path .vt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vt-path, .vt-path *, .vt-path *::before, .vt-path *::after { box-sizing: border-box; }
.vt-path ol { list-style: none; margin: 0; padding: 0; }
.vt-path li { margin: 0; }
.vt-path a { text-decoration: none; }
.vt-path button { font-family: inherit; margin: 0; }
.vt-path svg { display: block; }

/* ---------- навигатор пути (showcase/_path.html, showcase/path.py) ----------
   Без JS - строка ссылок под первым экраном. С JS - пилюля по центру под
   шапкой: появляется, когда читатель дошел до первой главы, и уезжает
   вверх после последней. Матовая дорожка, белый бегунок на текущей главе,
   пройденное подкрашено. Обе плашки ставит initPath по активной ссылке:
   --x и --w - бегунок, --f0 и --f - заливка. Вес текста во всех
   состояниях один - строка не прыгает. Цифра шага человека розовая, как
   кикер его главы.
   Краски - переменные --p-*: день здесь, ночь (Студия) - .vt-path--night.
   data-ink у раздела, списка или дорожки перекрашивает номер и заливку
   под кикер раздела.
   Когда пилюля не помещается в окно (и всегда до 900 px), скрипт ставит
   is-compact: вместо пилюли кнопка «02 Тема» со списком всех глав. */
.vt-path {
  position: relative; z-index: 40; padding: 14px 0;
  --p-track: rgba(246, 244, 252, .84);
  --p-edge: rgba(255, 255, 255, .7);
  --p-ring: rgba(23, 19, 59, .07);
  --p-shadow: 0 14px 34px -18px rgba(23, 19, 59, .38), 0 2px 6px -3px rgba(23, 19, 59, .10);
  --p-thumb: #FFFFFF;
  --p-thumb-shadow: 0 0 0 .5px rgba(23, 19, 59, .10), 0 1px 2px rgba(23, 19, 59, .10), 0 4px 12px -4px rgba(23, 19, 59, .18);
  --p-fill: linear-gradient(90deg, rgba(79, 70, 229, .08), rgba(124, 58, 237, .13));
  --p-t: rgba(28, 25, 23, .62);
  --p-t-done: rgba(28, 25, 23, .72);
  --p-t-on: #1C1917;
  --p-n: rgba(28, 25, 23, .4);
  --p-ink: #4F46E5;
  --p-you: #D6268D;
  --p-hover: rgba(255, 255, 255, .55);
  --p-line: rgba(23, 19, 59, .12);
  --p-dash: rgba(79, 70, 229, .16);
  --p-menu: rgba(255, 255, 255, .95);
  --p-row-on: rgba(79, 70, 229, .07);
}
.vt-path [data-ink="indigo"], .vt-path [data-ink="lilac"] { --p-ink: #4F46E5; --p-fill: linear-gradient(90deg, rgba(79, 70, 229, .08), rgba(124, 58, 237, .13)); }
.vt-path [data-ink="apricot"] { --p-ink: #B8650F; --p-fill: linear-gradient(90deg, rgba(246, 160, 77, .10), rgba(246, 160, 77, .17)); }
.vt-path [data-ink="pink"] { --p-ink: #D6268D; --p-fill: linear-gradient(90deg, rgba(255, 72, 176, .07), rgba(255, 72, 176, .12)); }
.vt-path--night {
  --p-track: rgba(29, 22, 64, .8);
  --p-edge: rgba(255, 255, 255, .09);
  --p-ring: rgba(0, 0, 0, .32);
  --p-shadow: 0 16px 36px -18px rgba(0, 0, 0, .75), 0 2px 6px -3px rgba(0, 0, 0, .4);
  --p-thumb: rgba(255, 255, 255, .13);
  --p-thumb-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 .5px rgba(255, 255, 255, .12), 0 4px 14px -4px rgba(0, 0, 0, .55);
  --p-fill: linear-gradient(90deg, rgba(139, 124, 246, .10), rgba(167, 139, 250, .18));
  --p-t: rgba(244, 241, 255, .6);
  --p-t-done: rgba(244, 241, 255, .76);
  --p-t-on: #FFFFFF;
  --p-n: rgba(244, 241, 255, .36);
  --p-ink: #B7ABFF;
  --p-you: #FF94D2;
  --p-hover: rgba(255, 255, 255, .06);
  --p-line: rgba(255, 255, 255, .14);
  --p-dash: rgba(255, 255, 255, .16);
  --p-menu: rgba(29, 22, 64, .94);
  --p-row-on: rgba(255, 255, 255, .08);
}
.vt-path--night [data-ink="indigo"], .vt-path--night [data-ink="lilac"] { --p-ink: #B7ABFF; --p-fill: linear-gradient(90deg, rgba(139, 124, 246, .10), rgba(167, 139, 250, .18)); }
.vt-path--night [data-ink="apricot"] { --p-ink: #FFBE85; --p-fill: linear-gradient(90deg, rgba(246, 160, 77, .08), rgba(246, 160, 77, .15)); }
.vt-path--night [data-ink="pink"] { --p-ink: #FF94D2; --p-fill: linear-gradient(90deg, rgba(255, 72, 176, .08), rgba(255, 72, 176, .15)); }

.vt-path__pill, .vt-path__m {
  background: var(--p-track);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--p-edge), 0 0 0 1px var(--p-ring), var(--p-shadow);
}
/* по краям воздуха больше, чем сверху и снизу: бегунок крайней главы не
   упирается в скругление дорожки */
.vt-path__pill { position: relative; margin: 0 auto; width: max-content; max-width: calc(100vw - 24px); display: flex; align-items: center; padding: 4px 8px; border-radius: 999px; }
.vt-path__track { position: relative; display: block; height: 36px; }
.vt-path__list { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; height: 36px; }
.vt-path__list a, .vt-path__sec {
  display: inline-flex; align-items: baseline; gap: 7px; height: 36px; padding: 0 13px 0 12px; border-radius: 999px;
  font: 500 13.5px/36px var(--vt-font, var(--site-font)); letter-spacing: -.005em; color: var(--p-t);
  text-decoration: none; white-space: nowrap; transition: color .3s ease, background-color .3s ease;
}
.vt-path__n { font: 600 11px/36px var(--vt-font, var(--site-font)); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--p-n); transition: color .3s ease; }
.vt-path__n:empty { display: none; }
.vt-path__list a.is-done { color: var(--p-t-done); }
.vt-path__list a:hover, .vt-path__sec:hover { color: var(--p-t-on); background: var(--p-hover); }
.vt-path__list a.is-active { color: var(--p-t-on); background: none; }
.vt-path__list a.is-done .vt-path__n, .vt-path__list a.is-active .vt-path__n { color: var(--p-ink); }
.vt-path a.is-you .vt-path__n, .vt-path__m.is-you .vt-path__n { color: var(--p-you); }
.vt-path a:focus-visible, .vt-path__m:focus-visible { border-radius: 999px; outline-offset: 1px; }
.vt-path__sep { flex: none; width: 1px; height: 16px; margin: 0 6px; background: var(--p-line); }
.vt-path__fill, .vt-path__thumb { position: absolute; top: 0; left: 0; height: 36px; border-radius: 999px; pointer-events: none; opacity: 0; }
.vt-path__fill { left: var(--f0, 0px); width: var(--f, 0px); background: var(--p-fill); }
.vt-path__thumb { width: var(--w, 0px); transform: translateX(var(--x, 0px)); background: var(--p-thumb); box-shadow: var(--p-thumb-shadow); }
.vt-path.is-placed .vt-path__fill, .vt-path.is-placed .vt-path__thumb { opacity: 1; }
.vt-path.is-placed.is-idle .vt-path__fill, .vt-path.is-placed.is-idle .vt-path__thumb { opacity: 0; }
.vt-path.is-ready .vt-path__fill { transition: left .5s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)), width .5s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)), opacity .25s ease; }
.vt-path.is-ready .vt-path__thumb { transition: transform .5s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)), width .5s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)), opacity .25s ease; }
.vt-path.is-ready.is-jump .vt-path__fill, .vt-path.is-ready.is-jump .vt-path__thumb { transition: opacity .25s ease; }

/* разделы (Студия): слева разделы - текущий в краске своего кикера,
   справа инструменты текущего раздела. Списки всех разделов лежат в одной
   клетке, виден один; ширину клетки под него ставит скрипт (--tw), и
   пилюля плавно меняет ширину при переходе в следующий раздел */
.vt-path__secs { display: flex; align-items: center; gap: 2px; }
.vt-path__sec { align-items: center; padding: 0 13px 0 11px; }
.vt-path__sec::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; transition: opacity .3s ease; }
.vt-path__sec.is-on { color: var(--p-ink); }
.vt-path__sec.is-on::before { opacity: 1; }
.vt-path__div { flex: none; width: 1px; height: 20px; margin: 0 8px; background: var(--p-line); }
.vt-js .vt-path--sections .vt-path__track { width: var(--tw, auto); }
.vt-js .vt-path--sections.is-ready .vt-path__track { transition: width .45s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)); }
.vt-js .vt-path--sections .vt-path__list { position: absolute; top: 0; left: 0; width: max-content; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.vt-js .vt-path--sections .vt-path__list.is-on { opacity: 1; visibility: visible; transition: opacity .3s ease .12s; }

.vt-path__m, .vt-path__menu { display: none; }
html:not(.vt-js) .vt-path__pill { overflow-x: auto; scrollbar-width: none; }
html:not(.vt-js) .vt-path__track { display: flex; gap: 2px; }
.vt-js .vt-path { position: fixed; left: 0; right: 0; top: calc(var(--site-hdr, 64px) + 10px); padding: 0; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s ease, transform .4s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)), visibility 0s linear .4s; }
.vt-js .vt-path.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .4s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)); }
.vt-js .vt-path.is-shown .vt-path__pill, .vt-js .vt-path.is-shown .vt-path__m, .vt-js .vt-path.is-shown .vt-path__menu { pointer-events: auto; }
/* Пилюля не заслоняет страницу (владелец 27.09.2026: «иначе она весь обзор
   закрывает»): пока на нее не навели, она полупрозрачная - и стекло, и
   надписи. Наведение, фокус с клавиатуры и открытый список на телефоне -
   в полную силу. */
.vt-js .vt-path.is-shown .vt-path__pill, .vt-js .vt-path.is-shown .vt-path__m { opacity: .5; transition: opacity .25s ease; }
.vt-js .vt-path.is-shown .vt-path__pill:hover, .vt-js .vt-path.is-shown .vt-path__pill:focus-within,
.vt-js .vt-path.is-shown .vt-path__m:hover, .vt-js .vt-path.is-shown .vt-path__m:focus-visible,
.vt-js .vt-path.is-shown .vt-path__m[aria-expanded="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vt-js .vt-path.is-shown .vt-path__pill, .vt-js .vt-path.is-shown .vt-path__m { transition: none; }
}

/* компактно: кнопка «02 Тема» с черточками глав (текущая - длинная) и
   список всех глав. Ширина постоянная: кнопка не дышит от «Вы» к
   «Публикации»; у Студии шире - в кнопке имя инструмента */
.vt-js .vt-path.is-compact .vt-path__pill { display: none; }
.vt-js .vt-path.is-compact .vt-path__m {
  display: flex; align-items: center; gap: 14px; margin: 0 auto; width: 272px; max-width: calc(100vw - 24px); height: 44px; padding: 0 14px 0 18px;
  border: 0; border-radius: 999px; font: 600 14px/1 var(--vt-font, var(--site-font)); color: var(--p-t-on); cursor: pointer;
}
.vt-js .vt-path--sections.is-compact .vt-path__m, .vt-js .vt-path--sections.is-compact .vt-path__menu { width: 300px; }
.vt-path__mt { display: inline-flex; align-items: baseline; gap: 8px; margin-right: auto; white-space: nowrap; }
.vt-path__m .vt-path__n { font-size: 11.5px; line-height: 1; color: var(--p-ink); }
.vt-path__dash, .vt-path__dash > span { display: inline-flex; align-items: center; gap: 3px; }
.vt-path--sections .vt-path__dash > span:not(.is-on) { display: none; }
.vt-path__dash i { width: 6px; height: 4px; border-radius: 2px; background: var(--p-dash); transition: width .4s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)), background-color .3s ease, opacity .3s ease; }
.vt-path__dash i.is-on { background: var(--p-ink); opacity: .5; }
.vt-path__dash i.is-cur { width: 16px; background: var(--p-ink); }
.vt-path__m svg { width: 16px; height: 16px; flex: none; color: var(--p-t); transition: transform .3s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)); }
.vt-path__m[aria-expanded="true"] svg { transform: rotate(180deg); }
.vt-js .vt-path.is-compact .vt-path__menu {
  display: grid; gap: 2px; width: 272px; max-width: calc(100vw - 24px); max-height: calc(100svh - var(--site-hdr, 64px) - 84px); overflow-y: auto; overscroll-behavior: contain;
  margin: 8px auto 0; padding: 6px; border-radius: 20px;
  background: var(--p-menu); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--p-edge), 0 0 0 1px var(--p-ring), 0 24px 56px -28px rgba(23, 19, 59, .45), 0 4px 12px -6px rgba(23, 19, 59, .10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .3s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)), visibility 0s linear .3s;
}
.vt-js .vt-path.is-compact .vt-path__menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .3s var(--vt-ease-in, cubic-bezier(.3, 0, 0, 1)); }
.vt-path__menu a { position: relative; display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 14px; font: 500 15px/44px var(--vt-font, var(--site-font)); color: var(--p-t-done); text-decoration: none; }
.vt-path__menu .vt-path__n { flex: none; width: 18px; font-size: 11.5px; line-height: 44px; }
.vt-path__menu .vt-path__n:empty { display: inline-block; }
.vt-path__menu a.is-done .vt-path__n, .vt-path__menu a.is-active .vt-path__n { color: var(--p-ink); }
.vt-path__menu a.is-you .vt-path__n { color: var(--p-you); }
.vt-path__menu a.is-active { color: var(--p-t-on); font-weight: 600; background: var(--p-row-on); }
.vt-path__menu a.is-sep { margin-top: 9px; }
.vt-path__menu a.is-sep::before { content: ""; position: absolute; left: 14px; right: 14px; top: -6px; height: 1px; background: var(--p-line); }
.vt-path__menu .vt-path__mh { min-height: 32px; margin-top: 8px; font: 600 11px/32px var(--vt-font, var(--site-font)); letter-spacing: .08em; text-transform: uppercase; color: var(--p-ink); }
.vt-path__menu .vt-path__mh:first-child { margin-top: 0; }
.vt-path__menu a.vt-path__mh.is-active { font-weight: 600; }