/* Шаблон статьи. Стилизует стандартные классы .ai-dev-guide / .aid-*,
   поэтому HTML статьи можно вставлять как есть, без правок. */

.progress {
  position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 10; pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--mint) 0 8px, transparent 8px 10px);
}

.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr);
  max-width: 768px; margin: 0 auto; padding: 0 24px;
}
@media (min-width: 1180px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr);
    column-gap: 48px; max-width: 1400px;
  }
  .article-layout > .ai-dev-guide { grid-column: 2; grid-row: 1; }
  .article-layout > .after { grid-column: 2; grid-row: 2; }
}

/* ---------- Боковое оглавление ---------- */
.side-toc {
  grid-column: 1; grid-row: 1 / span 2; justify-self: end; width: 100%; max-width: 250px;
  display: none;
}
.side-toc nav {
  position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow: auto;
  font-family: var(--f-mono); font-size: 12px; line-height: 1.45; padding: 8px 0 24px;
  scrollbar-width: thin;
}
.side-toc .kicker { font-size: 13px; margin-bottom: 12px; }
.side-toc ol { list-style: none; margin: 0; padding: 0; }
.side-toc a {
  display: grid; grid-template-columns: 2.6ch 1fr; gap: 8px;
  padding: 5px 8px; color: var(--fg-3); text-decoration: none;
  border-left: var(--px) solid transparent;
}
.side-toc a:hover { background: none; color: var(--fg); }
.side-toc a.active { color: var(--mint); border-left-color: var(--mint); background: var(--bg-2); }
.side-toc a .n { color: var(--fg-3); }
.side-toc a.active .n { color: var(--mint); }

@media (min-width: 1180px) {
  .side-toc { display: block; }
  .ai-dev-guide .aid-toc { display: none; }
}

/* ---------- Статья ---------- */
.ai-dev-guide {
  --ink: var(--fg);
  min-width: 0; padding: 40px 0 24px;
  font-family: var(--f-text); font-size: 18px; line-height: 1.75; color: var(--fg);
  overflow-wrap: break-word;
}
.ai-dev-guide [id] { scroll-margin-top: 24px; }
.ai-dev-guide p { margin: 1em 0; }
.ai-dev-guide strong { font-weight: 600; color: var(--fg); }
.ai-dev-guide ul, .ai-dev-guide ol { padding-left: 1.3em; }
.ai-dev-guide li { margin: .45em 0; }
.ai-dev-guide ul > li::marker { content: "■  "; color: var(--mint); font-size: .6em; }

/* Шапка */
.ai-dev-guide .aid-hero { margin-bottom: 2.4em; }
.ai-dev-guide .aid-eyebrow {
  font-family: var(--f-mono); font-size: 13px; line-height: 1.5; color: var(--mint); margin: 0;
}
.ai-dev-guide .aid-eyebrow::before { content: "// "; color: var(--fg-3); }
.ai-dev-guide h1 {
  font-family: var(--f-head); font-weight: 700; font-size: clamp(2rem, 4.8vw, 2.75rem);
  line-height: 1.14; letter-spacing: -.03em; margin: .45em 0 .5em; color: var(--fg);
}
.ai-dev-guide .aid-lead { font-size: 1.22em; line-height: 1.55; color: var(--fg-2); margin: 0 0 1.2em; }
.ai-dev-guide .aid-meta {
  font-family: var(--f-mono); font-size: 13px; color: var(--fg-3); margin: 0;
  padding: 10px 0; border-top: 1px dashed var(--line-2); border-bottom: 1px dashed var(--line-2);
}

/* Заголовки */
.ai-dev-guide h2 {
  font-family: var(--f-head); font-weight: 700; font-size: 1.6em; line-height: 1.25;
  letter-spacing: -.02em; margin: 0 0 .9em; color: var(--fg);
}
.ai-dev-guide h3 {
  font-family: var(--f-text); font-weight: 600; letter-spacing: -.005em; font-size: 1.18em; line-height: 1.35;
  margin: 1.9em 0 .6em; color: var(--fg);
}
.ai-dev-guide h3::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 .55em .18em 0;
  background: var(--mint); vertical-align: middle;
}
.ai-dev-guide section {
  margin-top: 4em; padding-top: 2.4em;
  background: linear-gradient(90deg, var(--line-2) 50%, transparent 0) top / 6px var(--px) repeat-x;
}
.ai-dev-guide section > h2::before {
  content: "##"; display: block; font-family: var(--f-mono); font-weight: 400;
  font-size: 13px; letter-spacing: .1em; color: var(--mint); margin-bottom: .6em;
}

/* Ссылки и сноски */
.ai-dev-guide a { color: inherit; }
.ai-dev-guide .aid-ref {
  font-family: var(--f-mono); font-size: .62em; vertical-align: super; line-height: 0;
  white-space: nowrap; margin-left: 2px;
}
.ai-dev-guide .aid-ref a { color: var(--cyan); text-decoration: none; padding: 0 1px; }
.ai-dev-guide .aid-ref a:hover { color: var(--mint-ink); }

/* Врезки */
.ai-dev-guide .aid-note, .ai-dev-guide .aid-takeaway, .ai-dev-guide .aid-warning {
  --c: var(--violet); --c-ink: #fff;
  position: relative; margin: 2em 0; padding: 1.35em 1.3em 1.1em;
  background: var(--bg-2); border: var(--px) solid var(--c); font-size: .95em; line-height: 1.7;
}
.ai-dev-guide .aid-note::before, .ai-dev-guide .aid-takeaway::before, .ai-dev-guide .aid-warning::before {
  position: absolute; top: -.8em; left: .9em; padding: 0 .5em;
  font-family: var(--f-pixel); font-size: 13px; line-height: 1.5; letter-spacing: .06em;
  color: var(--c-ink); background: var(--c);
}
.ai-dev-guide .aid-note::before { content: "note"; }
.ai-dev-guide .aid-takeaway { --c: var(--mint); --c-ink: var(--mint-ink); }
.ai-dev-guide .aid-takeaway::before { content: "key point"; }
.ai-dev-guide .aid-warning { --c: var(--warn); --c-ink: var(--bg); }
.ai-dev-guide .aid-warning::before { content: "warning"; }

.ai-dev-guide blockquote {
  margin: 1.4em 0; padding: .2em 1.2em; color: var(--fg-2);
  border-left: var(--px) solid var(--line-2);
}

/* Код */
.ai-dev-guide code {
  font-family: var(--f-mono); font-size: .84em; color: var(--cyan);
  background: var(--bg-2); padding: .1em .35em; overflow-wrap: anywhere;
}
.ai-dev-guide pre {
  position: relative; margin: 1.6em 0; padding: 1.1em 1.25em;
  background: var(--bg-code); color: var(--code-fg);
  border: 0; border-left: 3px solid var(--brand-blue);
  font-size: .82em; line-height: 1.7; overflow-x: auto; tab-size: 2;
}
.ai-dev-guide pre code { display: block; padding: 0; background: none; color: inherit;
  font-size: inherit; white-space: pre; overflow-wrap: normal; }
.ai-dev-guide pre.aid-prompt { border-left-color: var(--brand-mint); padding-top: 2.4em; }
.ai-dev-guide pre.aid-prompt code { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-dev-guide pre.aid-prompt::before {
  content: "prompt"; position: absolute; top: .7em; left: 1.4em;
  font-family: var(--f-pixel); font-size: 12px; color: var(--brand-mint); letter-spacing: .06em;
}
.ai-dev-guide pre[data-lang] { padding-top: 2.4em; }
.ai-dev-guide pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: .75em; left: 1.4em;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--brand-cyan); opacity: .75;
}
.copy-btn {
  position: absolute; top: .5em; right: .6em;
  font-family: var(--f-mono); font-size: 11px; line-height: 1; color: #B8C0DC;
  background: transparent; border: 1px solid #2A3A6E; padding: 5px 8px; cursor: pointer;
}
.copy-btn:hover { background: var(--brand-mint); border-color: var(--brand-mint); color: var(--brand-black); }
.copy-btn.done { color: var(--brand-mint); border-color: var(--brand-mint); }

/* Таблицы */
.ai-dev-guide .aid-table-wrap { margin: 1.8em 0; overflow-x: auto; border: 1px solid var(--line); }
.ai-dev-guide table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: .86em; line-height: 1.6; }
.ai-dev-guide caption {
  caption-side: top; text-align: left; padding: .8em 1em; font-family: var(--f-mono); font-size: 12.5px;
  color: var(--fg-2); background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.ai-dev-guide caption::before { content: "▦ "; color: var(--mint); }
.ai-dev-guide th {
  text-align: left; vertical-align: bottom; padding: .75em 1em;
  font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .04em;
  color: var(--mint); border-bottom: var(--px) solid var(--line-2);
}
.ai-dev-guide td { text-align: left; vertical-align: top; padding: .85em 1em; border-bottom: 1px dashed var(--line); }
.ai-dev-guide tr:last-child td { border-bottom: 0; }
.ai-dev-guide td:first-child { width: 24%; }

/* Оглавление внутри статьи (на узких экранах) */
.ai-dev-guide .aid-toc {
  margin: 3em 0; padding: 1.3em 1.4em; border: var(--px) solid var(--line-2); background: var(--bg-2);
}
.ai-dev-guide .aid-toc h2 { font-size: 1em; margin: 0 0 .8em; color: var(--mint); }
.ai-dev-guide .aid-nav-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2em;
  font-family: var(--f-mono); font-size: 13px; line-height: 1.5; }
.ai-dev-guide .aid-nav-list li { break-inside: avoid; margin: 0 0 .55em; }
.ai-dev-guide .aid-nav-list li::marker { content: none; }
.ai-dev-guide .aid-nav-list a { text-decoration: none; color: var(--fg-2); }
.ai-dev-guide .aid-nav-list a:hover { color: var(--mint-ink); }

/* Диаграммы */
.ai-dev-guide .aid-diagram {
  margin: 2em 0; padding: 1.3em; background: var(--bg-2); border: 1px solid var(--line);
  background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 12px 12px;
}
.ai-dev-guide .aid-flow { display: flex; align-items: stretch; gap: 6px; }
.ai-dev-guide .aid-step, .ai-dev-guide .aid-centerbox {
  flex: 1; min-width: 0; text-align: center; padding: .85em .4em;
  background: var(--bg); border: var(--px) solid var(--line-2);
  font-size: .8em; line-height: 1.4;
}
.ai-dev-guide .aid-step b {
  display: block; margin-bottom: .35em; font-family: var(--f-head); font-weight: 700;
  font-size: .9em; letter-spacing: -.03em; color: var(--mint); hyphens: auto;
}
.ai-dev-guide .aid-step span { display: block; color: var(--fg-2); font-size: .92em; }
.ai-dev-guide .aid-centerbox { font-size: .86em; }
.ai-dev-guide .aid-centerbox strong { font-family: var(--f-head); font-weight: 700; letter-spacing: -.02em; color: var(--mint); }
.ai-dev-guide .aid-arrow { display: flex; align-items: center; font-family: var(--f-mono); color: var(--mint); }
.ai-dev-guide .aid-arrow::before { content: "→"; }
.ai-dev-guide .aid-branch-arrow { text-align: center; font-family: var(--f-mono); color: var(--mint); line-height: 1; margin: .5em; }
.ai-dev-guide .aid-loop { text-align: center; font-family: var(--f-mono); font-size: 12.5px; color: var(--mint); margin: 1em 0 0; }
.ai-dev-guide .aid-loop::before { content: "↺ "; }
.ai-dev-guide figcaption { margin-top: 1em; font-size: .8em; line-height: 1.6; color: var(--fg-3); }
.ai-dev-guide .aid-grid { display: grid; gap: 10px; margin: 1.4em 0; }
.ai-dev-guide .aid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-dev-guide .aid-diagram .aid-grid { margin: .3em 0; }

.ai-dev-guide .aid-card { padding: 1em 1.1em; background: var(--bg-2); border: var(--px) solid var(--line-2); }
.ai-dev-guide .aid-card h3 { margin: 0 0 .5em; font-size: .98em; }
.ai-dev-guide .aid-card h3::before { display: none; }
.ai-dev-guide .aid-card p { margin: 0; font-size: .86em; line-height: 1.6; color: var(--fg-2); }

/* Чеклист */
.ai-dev-guide .aid-checklist { list-style: none; padding: 0; counter-reset: chk; }
.ai-dev-guide .aid-checklist li {
  counter-increment: chk; position: relative; padding: .7em 0 .7em 3.2em; margin: 0;
  border-bottom: 1px dashed var(--line);
}
.ai-dev-guide .aid-checklist li::before {
  content: "[" counter(chk, decimal-leading-zero) "]"; position: absolute; left: 0; top: .82em;
  font-family: var(--f-mono); font-size: .78em; color: var(--mint);
}

/* Источники */
.ai-dev-guide .aid-small { font-size: .84em; color: var(--fg-3); }
.ai-dev-guide .aid-reference-list { list-style: none; padding: 0; counter-reset: ref; font-size: .86em; line-height: 1.6; }
.ai-dev-guide .aid-reference-list li { counter-increment: ref; position: relative; padding-left: 3.2em; margin: .9em 0; }
.ai-dev-guide .aid-reference-list li::before {
  content: "[" counter(ref) "]"; position: absolute; left: 0; font-family: var(--f-mono); font-size: .9em; color: var(--mint);
}
.ai-dev-guide .aid-reference-list li:target { background: var(--bg-2); outline: var(--px) solid var(--mint); outline-offset: 6px; }
.ai-dev-guide .aid-source-desc { color: var(--fg-3); }
.ai-dev-guide .aid-backref { text-decoration: none; color: var(--fg-3); }
.ai-dev-guide .aid-footer { display: none; }

/* После статьи */
.after { padding: 12px 0 0; }
.author {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  padding: 20px; border: var(--px) solid var(--line-2); background: var(--bg-2);
}
.author img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 20%; display: block; border: var(--px) solid var(--blue); }
.author .who { font-family: var(--f-pixel); font-size: 20px; line-height: 1.2; }
.author .what { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 4px 0 8px; }
.author .links { font-family: var(--f-mono); font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; }
.after-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 28px; font-family: var(--f-mono); font-size: 13px; }
.after-nav a { text-decoration: none; color: var(--fg-2); }

@media (max-width: 680px) {
  .article-layout { padding: 0 18px; }
  .ai-dev-guide { font-size: 16.5px; padding-top: 20px; }
  .ai-dev-guide h1 { font-size: 1.85rem; }
  .author { grid-template-columns: 1fr; }
  .ai-dev-guide h2 { font-size: 1.55em; }
  .ai-dev-guide section { margin-top: 3em; padding-top: 1.8em; }
  .ai-dev-guide .aid-nav-list { columns: 1; }
  .ai-dev-guide .aid-flow { flex-direction: column; gap: 4px; }
  .ai-dev-guide .aid-arrow { justify-content: center; line-height: 1.1; }
  .ai-dev-guide .aid-arrow::before { content: "↓"; }
  .ai-dev-guide .aid-step { font-size: .9em; }
  .ai-dev-guide .aid-three { grid-template-columns: 1fr; }
  .ai-dev-guide pre { font-size: .8em; padding: 1em; margin-left: -18px; margin-right: -18px; border-left-width: 3px; border-right: 0; }
  .ai-dev-guide pre.aid-prompt, .ai-dev-guide pre[data-lang] { padding-top: 2.4em; }
  .ai-dev-guide .aid-diagram { padding: 1em; }
  .ai-dev-guide .aid-note, .ai-dev-guide .aid-takeaway, .ai-dev-guide .aid-warning { padding: 1.3em 1em 1em; }
  .topbar .crumbs .slug { display: none; }
}

@media print {
  .topbar, .progress, .side-toc, .after, .site-footer, .copy-btn { display: none !important; }
  :root { --bg: #fff; --bg-2: #fff; --fg: #111; --fg-2: #333; --fg-3: #555; --mint: #077A45; --line: #ccc; --line-2: #999; --bg-code: #f4f4f4; --code-fg: #111; }
  .article-layout { display: block; padding: 0; }
  .ai-dev-guide { font-size: 10.5pt; line-height: 1.5; }
  .ai-dev-guide pre, .ai-dev-guide .aid-diagram, .ai-dev-guide tr { break-inside: avoid; }
  .ai-dev-guide h2, .ai-dev-guide h3 { break-after: avoid; }
}