/**
 * We Designerz — стили страницы-инструкции guides/github-pages.html.
 * Подключается только этой страницей: в общий styles.css не возвращать,
 * иначе ~1000 строк грузятся на каждой странице сайта ради одной.
 *
 * stylelint-disable no-descending-specificity — правила идут в порядке блоков
 * страницы (герой → содержание → шаги → финал), и это единственный способ
 * читать файл рядом с разметкой. Пары, на которые ругается правило, целятся в
 * разные элементы, каскад проверен в браузере.
 */
/* stylelint-disable no-descending-specificity */

.guide-page {
  overflow-x: clip;
}

.guide-page main {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--color-accent-violet) 5%, transparent), transparent 760px),
    var(--color-bg);
}

/* Герой — во всю ширину окна: глобальное правило `section { max-width:
   --container-max }` обрезало его вместе с подсветкой, и на экранах шире
   1200px справа был виден вертикальный срез градиента. Контент внутри
   держим в той же колонке, что и остальная страница. */
.guide-hero {
  position: relative;
  max-width: none;
  padding: 96px var(--page-gutter) var(--space-md);
  overflow: hidden;
}

.guide-hero > .guide-kicker,
.guide-hero > .guide-hero-grid,
.guide-hero > .guide-route {
  /* колонка героя = контейнер минус боковые отступы самой секции */
  max-width: calc(var(--container-max) - 2 * var(--page-gutter));
  margin-right: auto;
  margin-left: auto;
}

.guide-hero-glow {
  position: absolute;
  z-index: 0;
  top: -260px;
  right: -180px;
  width: 680px;
  height: 680px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, color-mix(in oklch, var(--color-accent-violet) 24%, transparent), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.guide-kicker,
.guide-section-kicker,
.guide-sidebar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.guide-kicker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-xs);
}

.guide-kicker span {
  color: var(--color-accent-violet);
  font-size: var(--text-lg);
}

.guide-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: var(--space-sm);
  align-items: end;
}

/* Герой гайда набран так же, как герои главной, витрины и «о нас»
   (`.hero h1`): дисплейный вес 800, тот же трекинг и интерлиньяж. Заголовки
   секций внутри гайда остаются легче — это длинный текст, а не витрина. */
.guide-hero-copy h1 {
  max-width: 760px;
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.guide-hero-lead {
  max-width: 680px;
  margin-top: var(--space-xs);
  color: var(--color-text-secondary);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.guide-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: 32px;
}

.guide-brief {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-bg-sunken) 88%, transparent);
  box-shadow: var(--shadow-lg), var(--glow-violet);
  overflow: hidden;
}

.guide-brief-chrome,
.guide-terminal-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.guide-brief-chrome > span:last-child,
.guide-terminal-chrome > span:last-child {
  margin-left: 6px;
}

.guide-chrome-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
}

.guide-chrome-dot-red {
  background: var(--color-error);
}

.guide-chrome-dot-yellow {
  background: var(--color-warning);
}

.guide-chrome-dot-green {
  background: var(--color-success);
}

.guide-brief-body {
  padding: var(--space-xs);
}

.guide-brief-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.guide-brief-status span,
.guide-live-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--color-success);
  box-shadow: 0 0 18px color-mix(in oklch, var(--color-success) 70%, transparent);
}

.guide-brief ul {
  display: grid;
  gap: 10px;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.guide-brief li {
  position: relative;
  padding-left: 20px;
}

.guide-brief li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent-blue);
  font-family: var(--font-mono);
}

.guide-brief-free {
  display: flex;
  gap: 10px;
  margin-top: var(--space-xs);
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

.guide-brief-free span {
  flex: 0 0 auto;
  color: var(--color-accent-warm);
}

.guide-route {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  padding: 18px var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--color-surface) 72%, transparent);
}

.guide-route a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.guide-route a:hover {
  color: var(--color-text-primary);
}

.guide-route a span,
.guide-route i {
  font-family: var(--font-mono);
  color: var(--color-accent-violet);
  font-style: normal;
}

.guide-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, var(--content-col));
  justify-content: center;
  gap: var(--space-sm);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter) var(--page-bottom);
}

.guide-sidebar {
  position: sticky;
  top: 108px;
  align-self: start;
  padding: 18px 0;
}

.guide-sidebar nav {
  display: grid;
  margin-top: 14px;
  border-left: 1px solid var(--color-border-strong);
}

.guide-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 16px;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  border-left: 2px solid transparent;
  transform: translateX(-1px);
}

.guide-sidebar nav a:hover {
  color: var(--color-text-primary);
  border-left-color: var(--color-accent-violet);
}

.guide-sidebar nav span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-violet);
}

.guide-content {
  min-width: 0;
}

.guide-content > section {
  max-width: none;
  scroll-margin-top: 112px;
}

/* Секции с обозначением слева. Раскладка одна для всех таких блоков:
   кикер — первой строкой во второй колонке, обозначение — на уровне первой
   строки заголовка, остальной контент под заголовком. Блок без обозначения
   становится одноколоночным, иначе кикер проваливается в узкую колонку. */
.guide-prepare,
.guide-problems,
.guide-russia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-xs);
  padding: var(--space-sm) 0 0;
}

.guide-prepare:has(.guide-section-marker),
.guide-problems:has(.guide-section-marker),
.guide-russia:has(.guide-section-marker) {
  grid-template-columns: 56px minmax(0, 1fr);
}

/* Обёртка без класса нужна только разметке — в сетке она мешает, поэтому
   раскрывается и её дети встают в колонку контента сами. */
.guide-prepare:has(.guide-section-marker) > div:not([class]),
.guide-problems:has(.guide-section-marker) > div:not([class]),
.guide-russia:has(.guide-section-marker) > div:not([class]) {
  display: contents;
}

/* Отступ под обозначение нужен только строке заголовка. Всё, что ниже, идёт
   во всю ширину — иначе колонка обозначения зря съедает место у таблиц,
   списков и картинок. */
.guide-prepare:has(.guide-section-marker) > *:not(.guide-section-marker),
.guide-problems:has(.guide-section-marker) > *:not(.guide-section-marker),
.guide-russia:has(.guide-section-marker) > *:not(.guide-section-marker),
.guide-prepare:has(.guide-section-marker) > div:not([class]) > *,
.guide-problems:has(.guide-section-marker) > div:not([class]) > *,
.guide-russia:has(.guide-section-marker) > div:not([class]) > * {
  grid-column: 1 / -1;
}

.guide-prepare:has(.guide-section-marker) > .guide-section-kicker,
.guide-problems:has(.guide-section-marker) > .guide-section-kicker,
.guide-russia:has(.guide-section-marker) > .guide-section-kicker,
.guide-prepare:has(.guide-section-marker) > div:not([class]) > .guide-section-kicker,
.guide-problems:has(.guide-section-marker) > div:not([class]) > .guide-section-kicker,
.guide-russia:has(.guide-section-marker) > div:not([class]) > .guide-section-kicker,
.guide-prepare:has(.guide-section-marker) > h2,
.guide-problems:has(.guide-section-marker) > h2,
.guide-russia:has(.guide-section-marker) > h2,
.guide-prepare:has(.guide-section-marker) > div:not([class]) > h2,
.guide-problems:has(.guide-section-marker) > div:not([class]) > h2,
.guide-russia:has(.guide-section-marker) > div:not([class]) > h2 {
  grid-column: 2;
}

.guide-section-marker {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-self: start;
  align-items: center;

  /* высота первой строки h2 — обозначение центрируется по ней */
  height: calc(var(--text-3xl) * var(--leading-tight));
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  background: var(--gradient-electric);
  -webkit-background-clip: text;
  background-clip: text;
}

.guide-prepare h2,
.guide-problems h2,
.guide-russia h2,
.guide-terminal h2,
.guide-finish h2 {
  margin-top: 8px;
  font-size: var(--text-3xl);
  letter-spacing: -0.025em;
}

.guide-lead {
  margin-top: var(--space-2xs);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.guide-content p {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.guide-content code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--color-accent-blue);
}

/* Блок команд внутри текста: длинные curl и SQL прокручиваются внутри рамки,
   страница по горизонтали не едет. */
.guide-code {
  max-width: 100%;
  margin: var(--space-xs) 0 0;
  padding: var(--space-xs);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-bg) 80%, black);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.guide-code code {
  color: var(--color-text-secondary);
  font-size: inherit;
  white-space: pre;
}

/* Внутри пункта чек-листа блок уже не первый элемент — ему нужен свой отступ. */
.guide-actions .guide-code {
  margin-bottom: 4px;
}

.guide-file-tree {
  grid-column: 2;
  margin-top: 32px;
  padding: var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.guide-file-tree-title,
.guide-file-tree-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.guide-file-tree-title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.guide-file-tree-icon {
  color: var(--color-accent-violet);
}

.guide-file-tree-ok {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  color: var(--color-success);
  background: color-mix(in oklch, var(--color-success) 10%, transparent);
  font-size: var(--text-xs);
}

.guide-file-tree-row {
  padding-top: 14px;
  color: var(--color-text-primary);
}

.guide-file-tree-row > span {
  color: var(--color-text-tertiary);
}

.guide-file-tree-row em {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-style: normal;
}

.guide-glossary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}

.guide-term {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.guide-term > span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-violet);
}

.guide-term h3 {
  margin-top: 8px;
  font-size: var(--text-lg);
}

.guide-term p {
  margin-top: 8px;
  font-size: var(--text-sm);
}

.guide-step {
  padding: var(--section-gap) 0 0;
}

.guide-step-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0 var(--space-xs);
  align-items: start;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border-strong);
}

/* Та же логика, что у .guide-section-marker: кикер сверху, номер — на уровне
   первой строки заголовка. */
.guide-step-head > div:not([class]) {
  display: contents;
}

.guide-step-head > div:not([class]) > * {
  grid-column: 1 / -1;
}

.guide-step-head > div:not([class]) > .guide-section-kicker,
.guide-step-head > div:not([class]) > h2 {
  grid-column: 2;
}

.guide-step-num {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-self: start;
  align-items: center;
  height: calc(var(--text-3xl) * var(--leading-tight));
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  background: var(--gradient-electric);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient-flow 8s linear infinite;
}

.guide-step-head h2 {
  margin-top: 8px;
  font-size: var(--text-3xl);
  letter-spacing: -0.025em;
}

.guide-step-head p {
  max-width: 680px;
  margin-top: 10px;
  font-size: var(--text-lg);
}

.guide-step > p,
.guide-subtitle {
  margin-top: 32px;
}

.guide-subtitle {
  font-size: var(--text-2xl);
}

.guide-actions {
  display: grid;
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-actions;
}

.guide-actions li {
  position: relative;

  /* Пункт — элемент грида: без min-width:0 длинная команда внутри растягивает
     его и уводит всю страницу в горизонтальную прокрутку. */
  min-width: 0;
  min-height: 30px;
  padding-left: 44px;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  counter-increment: guide-actions;
}

.guide-actions li::before {
  content: counter(guide-actions, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-accent-blue);
  background: var(--color-bg-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.guide-actions strong,
.guide-content p strong,
.guide-callout strong,
.guide-shot figcaption strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.guide-shot {
  margin-top: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.guide-shot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  min-height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.guide-shot-top span {
  color: var(--color-text-secondary);
}

.guide-shot-top b {
  color: var(--color-accent-warm);
  font-weight: 500;
  text-align: right;
}

.guide-shot img {
  width: 100%;
  height: auto;
  background: var(--color-bg-sunken);
}

.guide-shot figcaption {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.guide-shot-portrait,
.guide-shot-phone {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
}

.guide-shot-phone img {
  max-width: 375px;
  margin: 0 auto;
}

.guide-callout {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 32px;
  padding: 18px;
  border: 1px solid color-mix(in oklch, var(--color-accent-blue) 36%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-accent-blue) 7%, var(--color-surface));
  color: var(--color-text-secondary);
}

.guide-callout-warning {
  border-color: color-mix(in oklch, var(--color-warning) 42%, var(--color-border));
  background: color-mix(in oklch, var(--color-warning) 7%, var(--color-surface));
}

.guide-callout-glyph {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  color: var(--color-text-on-accent);
  background: var(--color-accent-blue);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
}

.guide-callout-warning .guide-callout-glyph {
  background: var(--color-warning);
}

.guide-field-list {
  display: grid;
  margin-top: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.guide-field-list > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-2xs);
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.guide-field-list > div:last-child {
  border-bottom: none;
}

.guide-field-list strong {
  color: var(--color-accent-violet);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.guide-field-list span {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.guide-url-pattern {
  margin-top: 32px;
  padding: var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
  box-shadow: var(--glow-blue);
}

.guide-url-pattern > span {
  display: block;
  margin-bottom: 10px;
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guide-url-pattern code {
  display: block;
  overflow-x: auto;
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  white-space: nowrap;
}

.guide-live-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding: var(--space-xs);
  border: 1px solid color-mix(in oklch, var(--color-success) 36%, var(--color-border));
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-success) 6%, var(--color-surface));
}

.guide-live-result > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
}

.guide-live-result h3 {
  margin-top: 6px;
  font-size: var(--text-xl);
}

.guide-live-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.guide-live-links .btn-primary,
.guide-live-links .btn-secondary {
  padding: 11px 18px;
  font-size: var(--text-sm);
}

.guide-problems {
  padding-top: var(--section-gap);
}

.guide-problem-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 18px;
  margin-top: 32px;
}

.guide-problem {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.guide-problem-index {
  color: var(--color-error);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
}

/* Крестик в шрифте рисуется заметно мельче цифр того же кегля. */
.guide-problem-cross {
  font-size: var(--text-3xl);
  line-height: 1;
}

.guide-problem h3 {
  font-size: var(--text-xl);
}

.guide-problem p {
  margin-top: 8px;
}

.guide-problem-compact {
  grid-template-columns: 48px minmax(0, 1fr);
}

.guide-terminal {
  padding: var(--section-gap) 0 0;
}

.guide-terminal-frame {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.guide-terminal-body {
  padding: 32px;
}

.guide-terminal-body pre {
  max-width: 100%;
  margin-top: var(--space-xs);
  padding: var(--space-xs);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-bg) 80%, black);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.guide-terminal-body pre span {
  color: var(--color-accent-blue);
}

.guide-command-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px var(--space-xs);
  margin-top: var(--space-xs);
}

.guide-command-list > div {
  display: flex;
  gap: 10px;
}

.guide-command-list dt {
  flex: 0 0 auto;
  color: var(--color-accent-violet);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.guide-command-list dd {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.guide-terminal-body > p {
  margin-top: var(--space-xs);
}

.guide-russia {
  padding-top: var(--section-gap);
}

.guide-russia > .guide-section-kicker,
.guide-russia > h2,
.guide-russia > .guide-lead,
.guide-russia > .guide-source-note {
  grid-column: 1 / -1;
}

.guide-source-note {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
}

.guide-finish {
  display: grid;

  /* три явных ряда (кикер, заголовок, текст) нужны кнопке: без них
     `grid-row: 1 / -1` схлопывается в один ряд и кнопка уезжает вверх */
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 0 var(--space-xs);
  align-items: start;
  margin-top: var(--section-gap);
  padding: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--color-accent-violet) 12%, transparent), transparent 62%),
    var(--color-surface);
  box-shadow: var(--shadow-lg), var(--glow-violet);
}

/* Та же раскладка, что у секций с обозначением: кикер сверху, глиф — по центру
   первой строки заголовка, текст ниже. Обёртка раскрывается в сетку карточки. */
.guide-finish-copy {
  display: contents;
}

.guide-finish-copy > * {
  grid-column: 2;
}

.guide-finish-glyph {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-self: start;
  align-items: center;
  height: calc(var(--text-3xl) * var(--leading-tight));
  margin-top: 8px;
  color: transparent;
  background: var(--gradient-electric);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: var(--text-4xl);
  line-height: 1;
}

.guide-finish-copy p {
  max-width: 560px;
  margin-top: 10px;
}

.guide-finish > .btn-primary {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
  max-width: 220px;
  text-align: center;
}

/* Справочные таблицы (docs/22, B1). Широкая таблица скроллится внутри своей
   рамки — горизонтального скролла у страницы быть не должно. */
.guide-table-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.guide-table-wrap:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Ширины колонок задаём явно: без этого браузер раздаёт место по длине слов,
   и колонки с абзацами получаются уже, чем колонки с одним словом. */
.guide-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);
}

.guide-table-methods th:nth-child(1) { width: 21%; }
.guide-table-methods th:nth-child(2) { width: 12%; }
.guide-table-methods th:nth-child(3) { width: 11%; }
.guide-table-methods th:nth-child(4) { width: 30%; }
.guide-table-methods th:nth-child(5) { width: 26%; }

.guide-table-tools th:nth-child(1) { width: 20%; }
.guide-table-tools th:nth-child(2) { width: 13%; }
.guide-table-tools th:nth-child(3) { width: 13%; }
.guide-table-tools th:nth-child(4) { width: 54%; }

/* Ячейка обязана удерживать содержимое в своих границах. При `table-layout:
   fixed` любое `white-space: nowrap` или длинное слово вылезает поверх соседней
   колонки — поэтому переносим всегда и рвём слово, если иначе не влезает.
   `nowrap` внутри этих таблиц не заводить. */
.guide-table th,
.guide-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.guide-table thead th {
  background: var(--color-bg-sunken);
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guide-table tbody th {
  color: var(--color-text-primary);
  font-weight: 600;
}

.guide-table tbody td {
  color: var(--color-text-secondary);
}

.guide-table tbody tr:last-child th,
.guide-table tbody tr:last-child td {
  border-bottom: none;
}

.guide-table tbody tr:hover {
  background: var(--color-surface-hover);
}

.guide-risk {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.guide-risk-low {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-success);
}

.guide-risk-mid {
  background: color-mix(in srgb, var(--color-warning) 18%, transparent);
  color: var(--color-warning);
}

.guide-risk-high {
  background: color-mix(in srgb, var(--color-error) 18%, transparent);
  color: var(--color-error);
}

/* --- Блоки разбора проекта (guides/kak-sdelat-igru-s-ii.html) --------------
   Появились вместе с гайдом-разбором: цифры проекта, разбор промпта по частям,
   схема цикла и интерактивная врезка про вратаря. Классы общие, а не
   «для одной страницы»: следующий разбор из блока B3 переиспользует их. */

.guide-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-xs);
}

.guide-stat-row > div {
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}

.guide-stat-row b {
  display: block;
  background: var(--gradient-electric);
  background-clip: text;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: transparent;
}

.guide-stat-row span {
  display: block;
  margin-top: 6px;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

/* Разбор промпта: слева ярлык части, в середине сама формулировка,
   справа — зачем она нужна. */
.guide-anatomy {
  margin-top: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.guide-anatomy-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.guide-anatomy-row:last-child {
  border-bottom: none;
}

.guide-anatomy-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-violet);
}

.guide-anatomy-text {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.guide-anatomy-text b {
  color: var(--color-text-primary);
}

.guide-anatomy-note {
  padding-left: 18px;
  border-left: 2px solid var(--color-border-strong);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

/* Бейджи «кто принял решение» — та же механика, что у .guide-risk. */
.guide-who {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.guide-who-human {
  background: color-mix(in srgb, var(--color-accent-warm) 18%, transparent);
  color: var(--color-accent-warm);
}

.guide-who-ai {
  background: color-mix(in srgb, var(--color-accent-blue) 18%, transparent);
  color: var(--color-accent-blue);
}

.guide-diagram {
  margin: var(--space-sm) 0 0;
}

.guide-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
}

.guide-diagram-node rect {
  fill: var(--color-bg-elevated);
  stroke: var(--color-border-strong);
  stroke-width: 1;
}

.guide-diagram-num {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--color-accent-violet);
}

.guide-diagram-label {
  font-family: var(--font-display, inherit);
  font-size: 16px;
  font-weight: 600;
  fill: var(--color-text-primary);
}

.guide-diagram-center {
  font-family: var(--font-mono);
  font-size: 14px;
  text-anchor: middle;
  fill: var(--color-text-tertiary);
}

.guide-diagram figcaption {
  margin-top: 12px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

/* Интерактивная врезка: два варианта одной логики на одном холсте. */
.keeper-demo {
  margin-top: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  overflow: hidden;
}

.keeper-demo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}

.keeper-demo-modes {
  display: flex;
  gap: 8px;
}

.keeper-demo-btn {
  padding: 8px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease);
}

.keeper-demo-btn:hover {
  border-color: var(--color-accent-violet);
  color: var(--color-text-primary);
}

.keeper-demo-btn.is-active {
  border-color: var(--color-accent-violet);
  background: color-mix(in srgb, var(--color-accent-violet) 18%, transparent);
  color: var(--color-text-primary);
}

.keeper-demo-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.keeper-demo-score b {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  white-space: nowrap;
  color: var(--color-text-primary);
}

.keeper-demo-score i {
  font-style: normal;
  color: var(--color-text-secondary);
}

.keeper-demo canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-bg-sunken);
}

.keeper-demo-note {
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

@media (width <= 1080px) {
  .guide-layout {
    grid-template-columns: minmax(0, var(--content-col));
  }

  .guide-sidebar {
    display: none;
  }
}

@media (width <= 820px) {
  .guide-hero {
    padding-top: var(--space-md);
  }

  .guide-hero-grid {
    grid-template-columns: 1fr;
  }

  .guide-brief {
    max-width: 560px;
  }

  .guide-route {
    justify-content: flex-start;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    scrollbar-width: none;
  }

  .guide-route::-webkit-scrollbar {
    display: none;
  }

  .guide-route a,
  .guide-route i {
    flex: 0 0 auto;
  }

  .guide-live-result,
  .guide-finish {
    align-items: start;
  }

  .guide-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Заметка «зачем эта часть промпта» уходит под саму формулировку: в три
     колонки на планшете от неё остаётся столбик по одному слову. */
  .guide-anatomy-row {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px 16px;
  }

  .guide-anatomy-note {
    grid-column: 2;
    padding-left: 14px;
  }

  .guide-live-result {
    flex-direction: column;
  }

  .guide-live-links {
    justify-content: flex-start;
  }

  .guide-finish {
    grid-template-columns: 48px minmax(0, 1fr);

    /* ряды больше не фиксируем: кнопка уходит из своей колонки в общий поток и
       ей нужен собственный ряд под текстом */
    grid-template-rows: none;
  }

  /* grid-row: 1 / -1 из базового правила растягивал кнопку на все ряды колонки
     контента — она вставала выше кикера и заголовка. В одну колонку кнопка
     должна просто идти последней, после текста. */
  .guide-finish > .btn-primary {
    grid-column: 2;
    grid-row: auto;
    place-self: start start;
    margin-top: var(--space-xs);
  }
}

@media (width <= 600px) {
  .guide-hero {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  .guide-hero-lead {
    font-size: var(--text-lg);
  }

  .guide-hero-actions,
  .guide-live-links {
    flex-direction: column;
  }

  .guide-hero-actions .btn-primary,
  .guide-hero-actions .btn-secondary,
  .guide-live-links .btn-primary,
  .guide-live-links .btn-secondary {
    width: 100%;
  }

  .guide-layout {
    padding-bottom: var(--space-md);
  }

  .guide-prepare:has(.guide-section-marker),
  .guide-problems:has(.guide-section-marker),
  .guide-russia:has(.guide-section-marker) {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0 14px;
  }

  .guide-file-tree {
    grid-column: 1 / -1;
  }

  .guide-file-tree-title,
  .guide-file-tree-row {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .guide-file-tree-ok,
  .guide-file-tree-row em {
    grid-column: 2;
  }

  .guide-glossary {
    grid-template-columns: 1fr;
  }

  .guide-step-head {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
  }

  .guide-step > p,
  .guide-subtitle,
  .guide-actions,
  .guide-shot,
  .guide-callout,
  .guide-field-list,
  .guide-url-pattern {
    margin-top: var(--space-xs);
  }

  .guide-shot {
    border-radius: var(--radius-md);
  }

  .guide-shot-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .guide-shot-top b {
    text-align: left;
  }

  .guide-callout {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 16px;
  }

  .guide-callout-glyph {
    width: 32px;
    height: 32px;
  }

  .guide-field-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .guide-url-pattern {
    padding: 18px;
  }

  .guide-url-pattern code {
    font-size: var(--text-sm);
  }

  .guide-problem {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
  }

  .guide-terminal-body {
    padding: var(--space-xs) 18px;
  }

  .guide-terminal-body pre {
    margin-right: -18px;
    margin-left: -18px;
    border-right: none;
    border-left: none;
    border-radius: 0;
  }

  .guide-command-list {
    grid-template-columns: 1fr;
  }

  .guide-table th,
  .guide-table td {
    padding: 12px 14px;
  }

  .guide-stat-row {
    grid-template-columns: 1fr;
  }

  .guide-anatomy-row {
    grid-template-columns: 1fr;
    padding: 16px 18px;
  }

  .guide-anatomy-note {
    grid-column: 1;
  }

  .keeper-demo-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-diagram svg {
    padding: 10px;
  }

  .guide-finish {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs) 0;
    padding: var(--space-xs);
  }

  /* В одну колонку глиф встаёт над кикером обычным порядком. */
  .guide-finish-copy > *,
  .guide-finish-glyph,
  .guide-finish > .btn-primary {
    grid-column: 1;
    grid-row: auto;
  }

  .guide-finish-glyph {
    min-height: 0;
    margin-top: 0;
  }

  .guide-finish > .btn-primary {
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-step-num {
    animation: none;
  }
}

/* --- Хаб гайдов (guides.html) ---------------------------------------------
   Отдельная страница-список: тот же герой, что у самих гайдов, и карточки
   вместо боковой навигации. Живёт здесь, а не в styles.css, потому что делит
   с гайдами и герой, и финальный блок. */
.guides-hub-head {
  max-width: calc(var(--container-max) - 2 * var(--page-gutter));
  margin: 0 auto;
}

.guides-hub-head h1 {
  max-width: 760px;
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.guides-hub {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter) var(--page-bottom);
}

.guides-list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guides-card {
  position: relative;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.guides-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.guides-card-kicker {
  color: var(--color-accent-violet);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guides-card h2 {
  margin-top: 14px;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

/* Ссылка растягивается на карточку: кликается вся плашка, но в поток
   табуляции попадает один заголовок, а не три пустых обёртки. */
.guides-card h2 a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.guides-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.guides-card h2 a:hover {
  color: var(--color-accent-blue);
}

.guides-card p {
  margin-top: 14px;
  max-width: 70ch;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.guides-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.guides-card-meta span {
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

@media (width <= 600px) {
  .guides-card {
    padding: 24px 20px;
  }
}