/* Atlas portfolio stylesheet orchestrator.
   Framework modules are canonical; homepage modules only compose the index UI. */
/* ==========================================================================
   FILE: 01-atlas-core.css
   ROLE: Ядро фреймворка. CSS-переменные, изоляция от Wix, геометрия
         системных блоков. Подключается ПЕРВЫМ в сборке.
   ПОРЯДОК В МОНОЛИТЕ: 1 из 7
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap');

/* ── СЕКЦИЯ A: RESET — предсказуемая геометрия компонентов ──────────────── */

.atlas-container,
.atlas-container *,
.atlas-container *::before,
.atlas-container *::after {
  box-sizing: border-box;
}

.atlas-container {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: #000000;
  width: 100%;
}

/* ── СЕКЦИЯ B: DESIGN TOKENS — Единый источник всех переменных ──────────── */
/* Все цвета, отступы и размеры шрифтов берутся ТОЛЬКО отсюда.              */
/* Добавление переменной: только в этот блок.                               */

:root {
  /* Цветовая схема */
  --atlas-bg:            rgb(230, 220, 210);
  --atlas-bg-alt:        rgba(0, 0, 0, 0.02);
  --atlas-ink:           #000000;
  --atlas-ink-muted:     rgba(0, 0, 0, 0.5);
  --atlas-ink-soft:      rgba(0, 0, 0, 0.85);
  --atlas-crit:          #8b0000;
  --atlas-warn:          #7a5200;
  --atlas-ok:            #1a4d1a;
  --atlas-border:        rgba(0, 0, 0, 0.15);
  --atlas-border-strong: rgba(0, 0, 0, 0.4);

  /* Отступы */
  --atlas-space-xs:      8px;
  --atlas-space-sm:      15px;
  --atlas-space-md:      25px;
  --atlas-space-xl:      60px;

  /* Шрифт */
  --atlas-font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* ── Типографическая шкала ──────────────────────────────────────────────
     Правило: менять размеры ТОЛЬКО здесь, не в компонентах.
     h1-h6 — иерархия заголовков документа
     body   — базовый текст абзацев
     code   — блоки кода, ячейки таблиц (td)
     table-th — заголовки колонок таблиц (th), чуть крупнее td
     meta   — паспорт, футер, подписи к медиа
     status — мелкие плашки, бейджи, UML-ромбы                            */
  --fs-h1:       28px;
  --fs-h2:       24px;
  --fs-h3:       20px;
  --fs-h4:       16px;
  --fs-h5:       14px;
  --fs-h6:       12.5px;
  --fs-body:     12.5px;
  --fs-code:     12px;
  --fs-table-th: 13px;
  --fs-meta:     10px;
  --fs-status:   9px;
}

/* ── СЕКЦИЯ C: СИСТЕМНЫЕ БЛОКИ — Общая геометрия контейнеров ───────────── */
/* Единая рамка, padding и псевдо-шапка для всех блочных компонентов.       */
/* Каждый компонент ПЕРЕОПРЕДЕЛЯЕТ content шапки в своём файле.             */

.atlas-container .comparison-matrix,
.atlas-container .atlas-callout,
.atlas-container .content-block .media-frame,
.atlas-container .content-block pre.atlas-code-block,
.atlas-container .content-block .atlas-math-block,
.atlas-container .content-block .atlas-table-frame {
  position: relative;
  background: transparent;
  border: 1px solid var(--atlas-border);
  margin: 24px 0;
  width: 100%;
  padding: 34px 16px 16px 16px; /* 34px top = 24px шапка + 10px зазор */
}

.atlas-container .comparison-matrix::before,
.atlas-container .atlas-callout::before,
.atlas-container .content-block .media-frame::before,
.atlas-container .content-block pre.atlas-code-block::before,
.atlas-container .content-block .atlas-math-block::before,
.atlas-container .content-block .atlas-table-frame::before {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  line-height: 24px;
  padding-left: 16px;
  font-size: 9px;
  font-weight: 700;
  color: var(--atlas-ink-muted);
  background: rgba(0, 0, 0, 0.015);
  border-bottom: 1px solid var(--atlas-border);
  letter-spacing: 0.05em;
  font-family: var(--atlas-font-mono);
}

/* ── СЕКЦИЯ D: CALLOUT МОДИФИКАТОРЫ — Семантические варианты ────────────── */
/* content для базового .atlas-callout::before задан в 06-atlas-callout.css */

.atlas-container .atlas-callout--important {
  border-left: 4px solid var(--atlas-crit);
}
.atlas-container .atlas-callout--important::before {
  content: "[ IMPORTANT // WARNING ]";
  color: var(--atlas-crit);
}

.atlas-container .atlas-callout--warning {
  border-left: 4px solid var(--atlas-warn);
}
.atlas-container .atlas-callout--warning::before {
  content: "[ WARNING // CAUTION ]";
  color: var(--atlas-warn);
}

.atlas-container .atlas-callout--success {
  border-left: 4px solid var(--atlas-ok);
}
.atlas-container .atlas-callout--success::before {
  content: "[ STATUS // SUCCESS ]";
  color: var(--atlas-ok);
}

/* ── PATCH v3.8.0: НОВЫЕ ТОКЕНЫ ──────────────────────────────────────────── */
/* Добавлены при рефакторинге 09-atlas-shader-panel.css                     */
/* Запрещено использовать --atlas-accent вместо --atlas-crit в контенте:    */
/*   --atlas-crit   = #8b0000  — ошибки, маркеры, акценты КОНТЕНТА         */
/*   --atlas-accent = #0000AA  — UI-элементы: кнопки, слайдеры, switches    */

:root {
  /* UI-акцент: Volkov Commander Blue */
  --atlas-accent:   #0000AA;
  --atlas-accent-h: #008181;   /* hover-состояние accent */

  /* Типографика: математические формулы (MathJax) */
  /* Display formulas use a readable 18px scale without overpowering text. */
  /* MathJax рендерит собственные элементы — переменная задаёт             */
  /* font-size контейнера .atlas-math-block для масштабирования            */
  --fs-math: 18px;

  /* Dither SVG-паттерн: 4×4px шахматка для теней и OFF-состояний         */
  --atlas-dither: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="2" height="2" x="0" y="0" fill="black"/><rect width="2" height="2" x="2" y="2" fill="black"/></svg>');
}

/* Применяем --fs-math к math-блоку */
.atlas-container .content-block .atlas-math-block {
  font-size: var(--fs-math);
}

/* ==========================================================================
   FILE: 02-atlas-typography.css
   ROLE: Типографика. Раздача базовых стилей h1-h6, p, ul/ol на теги
         внутри .atlas-container. Классы-компоненты (.atlas-h1, .atlas-body
         и т.д.). Контентные заголовки .content-block. Списки CAD-стиля.
   ЗАВИСИМОСТИ: 01-atlas-core.css (переменные --fs-*, --atlas-*)
   ПОРЯДОК В МОНОЛИТЕ: 2 из 7
   ========================================================================== */

/* ── СЕКЦИЯ A: ГЛОБАЛЬНАЯ РАЗДАЧА — Базовые теги внутри контейнера ──────── */
/* Единственный источник font-size для тегов. Компоненты НЕ дублируют это.  */

.atlas-container {
  font-family: var(--atlas-font-mono);
  color: var(--atlas-ink);
  font-size: var(--fs-body);
}

/* Заголовки по тегам */
.atlas-container h1, .atlas-container .atlas-h1 { font-size: var(--fs-h1); font-weight: 700; margin-bottom: 16px; }
.atlas-container h2, .atlas-container .atlas-h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: 14px; }
.atlas-container h3, .atlas-container .atlas-h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 12px; }
.atlas-container h4, .atlas-container .atlas-h4 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 10px; }
.atlas-container h5, .atlas-container .atlas-h5 { font-size: var(--fs-h5); font-weight: 700; margin-bottom: 8px; }
.atlas-container h6, .atlas-container .atlas-h6 { font-size: var(--fs-h6); font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }

/* Параграфы, списки */
.atlas-container p,
.atlas-container ul,
.atlas-container ol {
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Таблицы */
.atlas-container table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--atlas-font-mono);
  font-size: var(--fs-code);
}
.atlas-container table th { font-size: var(--fs-table-th); }
.atlas-container table td { font-size: var(--fs-code); }

/* Мета-уровень: паспорт, футер, подписи */
.atlas-container #site-passport,
.atlas-container #atlas-footer,
.atlas-container .media-caption {
  font-size: var(--fs-meta);
}

/* Плашки STATUS и UML-ромбы */
.atlas-container .atlas-callout::before,
.atlas-container .atlas-uml-diag__node--decision span {
  font-size: var(--fs-status);
}

/* ── СЕКЦИЯ B: УТИЛИТАРНЫЕ КЛАССЫ ТИПОГРАФИКИ ───────────────────────────── */
/* Используются напрямую в HTML (class="atlas-h1"), не через теги.          */

.atlas-container .atlas-h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--atlas-ink);
  margin: 0 0 var(--atlas-space-sm) 0;
  letter-spacing: -0.01em;
}

.atlas-container .atlas-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--atlas-ink);
  margin: 0 0 var(--atlas-space-xs) 0;
}

.atlas-container .atlas-body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--atlas-ink-soft);
  margin: 0 0 var(--atlas-space-sm) 0;
}

.atlas-container .atlas-meta {
  font-size: var(--fs-meta);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--atlas-ink-muted);
  letter-spacing: 0.05em;
}

.atlas-container .atlas-code-inline {
  font-size: var(--fs-code);
  color: var(--atlas-ink);
  background: var(--atlas-bg-alt);
  padding: 2px 4px;
  border: 1px solid var(--atlas-border);
}

/* Named runtime value inside prose or a comparison cell. */
.atlas-container .atlas-param {
  font-family: var(--atlas-font-mono);
  font-size: .92em;
  font-weight: 700;
  color: var(--atlas-ink);
}

/* ── СЕКЦИЯ C: КОНТЕНТНЫЙ БЛОК — Заголовки и разделители ───────────────── */
/* ВАЖНО: h2/h3/h4 внутри .content-block — это КОНТЕНТНЫЕ заголовки        */
/* (малые, с префиксами). Они НЕ конфликтуют с семантическими h2=24px      */
/* потому что применяются только глубоко внутри .content-block.            */
/* Если нужен семантический h2 в контенте — выноси его за .content-block.  */

.atlas-container .content-block {
  margin: 32px 0;
  counter-reset: l1-counter;
}

.atlas-container .content-block h2,
.atlas-container .content-block h3,
.atlas-container .content-block h4 {
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

/* H2: Главный раздел контента (13px с красным префиксом ») */
.atlas-container .content-block h2 {
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--atlas-ink);
}
.atlas-container .content-block h2::before {
  content: "» ";
  color: var(--atlas-ink-faint, var(--atlas-ink-muted));
  margin-right: 8px;
  font-weight: 400;
}

/* H3: Подраздел контента (12px с серым префиксом >) */
.atlas-container .content-block h3 {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--atlas-ink-soft);
  margin-top: 24px;
}
.atlas-container .content-block h3::before {
  content: "> ";
  color: var(--atlas-ink-muted);
  margin-right: 8px;
  font-weight: 400;
}

/* H4: Микро-заголовок (meta-size, с префиксом +) */
.atlas-container .content-block h4 {
  font-size: var(--fs-meta);
  letter-spacing: 0.05em;
  color: var(--atlas-ink-muted);
  margin-top: 16px;
}
.atlas-container .content-block h4::before {
  content: "+ ";
  color: var(--atlas-ink-muted);
  margin-right: 8px;
  font-weight: 400;
}

/* Параграф внутри контентного блока */
.atlas-container .content-block p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--atlas-ink-soft);
  margin: 0 0 16px 0;
  text-align: justify;
}

/* ── СЕКЦИЯ D: РАЗДЕЛИТЕЛИ СЕКЦИЙ ───────────────────────────────────────── */

/* Горизонтальный разделитель с нумерованным индексом (data-index="§ 02") */
.atlas-container .atlas-section-break {
  position: relative;
  display: block;
  height: 1px;
  background: var(--atlas-border);
  margin: 4rem 0;
}
.atlas-container .atlas-section-break::before {
  content: attr(data-index);
  position: absolute;
  top: -9px;
  left: 24px;
  background: var(--atlas-bg);
  padding: 0 0.6rem;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--atlas-ink-muted);
}

/* Финальный EOF-разделитель в конце статьи */
.atlas-container .atlas-eof-divider {
  display: flex;
  align-items: center;
  margin: 5.5rem 0 2rem 0;
  font-size: var(--fs-meta);
  color: var(--atlas-ink-muted);
  letter-spacing: 0.12em;
  width: 100%;
}
.atlas-container .atlas-eof-divider__line {
  flex: 1;
  border-bottom: 1px dashed var(--atlas-border);
}
.atlas-container .atlas-eof-divider__meta {
  padding: 0 1.2rem;
  font-weight: 700;
}

/* ── СЕКЦИЯ E: CAD-СПИСКИ — Двухуровневая система маркировки ─────────────── */
/* Уровень 1: сплошная вертикальная ось + маркер "+"                        */
/* Уровень 2: пунктирная ось + маркер "▪"                                   */

.atlas-container .content-block ul,
.atlas-container .content-block ol {
  list-style-type: none;
  padding: 0;
  margin: 0 0 16px 0;
}

/* Уровень 1 */
.atlas-container .content-block > ul,
.atlas-container .content-block > ol {
  margin-left: 24px;
  padding-left: 14px;
  border-left: 1px solid var(--atlas-border);
}

.atlas-container .content-block > ul > li,
.atlas-container .content-block > ol > li {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--atlas-ink-soft);
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}

.atlas-container .content-block > ul > li::before,
.atlas-container .content-block > ol > li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--atlas-ink-muted);
  font-weight: 700;
}

/* Уровень 2 */
.atlas-container .content-block ul ul,
.atlas-container .content-block ol ul,
.atlas-container .content-block ul ol,
.atlas-container .content-block ol ol {
  margin-left: 14px;
  margin-top: 8px;
  padding-left: 14px;
  border-left: 1px dashed var(--atlas-border);
}

.atlas-container .content-block ul ul > li,
.atlas-container .content-block ul ol > li {
  font-size: 12px;
  line-height: 1.6;
  color: var(--atlas-ink-soft);
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}

.atlas-container .content-block ul ul > li::before,
.atlas-container .content-block ul ol > li::before {
  content: "▪";
  position: absolute;
  left: 0;
  color: var(--atlas-ink-muted);
  font-size: 9px;
}

/* ==========================================================================
   FILE: 03-atlas-header.css
   ROLE: Паспорт документа (#site-passport) и системный футер (#atlas-footer).
         Сетка параметров, мета-строка, теги, навигационная матрица.
   ЗАВИСИМОСТИ: 01-atlas-core.css
   ПОРЯДОК В МОНОЛИТЕ: 3 из 7
   ========================================================================== */

/* ── СЕКЦИЯ A: PASSPORT — Инженерная шапка документа ────────────────────── */
/* Структура HTML:                                                           */
/*   #site-passport > .passport-bp                                          */
/*     > .passport-title-bar                                                */
/*     > .passport-main-title                                               */
/*     > .passport-grid > .passport-cell > .passport-cell-line[data-key]   */
/*     > .passport-meta > .passport-meta-item[data-meta]                   */
/*     > .passport-tags > .passport-tag                                     */

.atlas-container #site-passport .passport-bp {
  border: 2px solid var(--atlas-ink);
  padding: var(--atlas-space-sm);
  background: transparent;
  box-sizing: border-box;
  margin-bottom: var(--atlas-space-md);
  width: 100%;
}

/* Верхняя полоса: промпт системы + статус */
.atlas-container #site-passport .passport-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--atlas-ink);
  padding-bottom: 6px;
  margin-bottom: var(--atlas-space-sm);
  font-size: var(--fs-meta);
  color: var(--atlas-ink);
  white-space: nowrap;
}
.atlas-container #site-passport .passport-title-bar > * {
  min-width: 0;
}
.atlas-container #site-passport .passport-title-bar > :first-child {
  overflow-wrap: anywhere;
}
.atlas-container #site-passport .passport-title-bar b {
  font-weight: 700;
  color: var(--atlas-ink);
}

/* Главный заголовок */
.atlas-container #site-passport .passport-main-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--atlas-space-sm);
  line-height: 1.1;
  color: var(--atlas-ink);
}

/* Сетка параметров 2 колонки */
.atlas-container #site-passport .passport-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: var(--atlas-space-sm) 0;
  border-top: 1px dashed var(--atlas-border);
  box-sizing: border-box;
  width: 100%;
}

.atlas-container #site-passport .passport-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  box-sizing: border-box;
}

/* Строка параметра. Префикс генерируется через data-key */
.atlas-container #site-passport .passport-cell-line {
  display: block;
  font-size: var(--fs-code);
  line-height: 1.4;
  color: var(--atlas-ink-soft);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.atlas-container #site-passport .passport-cell-line::before {
  font-weight: 700;
  color: var(--atlas-ink-muted);
  text-transform: uppercase;
  margin-right: 8px;
  display: inline-block;
}
.atlas-container #site-passport .passport-cell-line[data-key="project"]::before { content: "PROJECT:"; }
.atlas-container #site-passport .passport-cell-line[data-key="module"]::before  { content: "MODULE:"; }
.atlas-container #site-passport .passport-cell-line[data-key="version"]::before { content: "VERSION:"; }
.atlas-container #site-passport .passport-cell-line[data-key="log_id"]::before  { content: "LOG_ID:"; }

/* Мета-строка (AUTH, CREATED, MODIFIED, READ_TIME) */
.atlas-container #site-passport .passport-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: var(--atlas-space-sm);
  padding-top: var(--atlas-space-xs);
  border-top: 1px solid var(--atlas-border);
}
.atlas-container #site-passport .passport-meta-item {
  font-size: var(--fs-meta);
  color: var(--atlas-ink-soft);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.atlas-container #site-passport .passport-meta-item:not(:last-child)::after {
  content: "//";
  margin-left: 16px;
  color: var(--atlas-border-strong);
  font-weight: 300;
}
.atlas-container #site-passport .passport-meta-item::before {
  font-weight: 700;
  color: var(--atlas-ink-muted);
  margin-right: 6px;
  text-transform: uppercase;
}
.atlas-container #site-passport .passport-meta-item[data-meta="auth"]::before     { content: "AUTH:"; }
.atlas-container #site-passport .passport-meta-item[data-meta="created"]::before  { content: "CREATED:"; }
.atlas-container #site-passport .passport-meta-item[data-meta="modified"]::before { content: "MODIFIED:"; }
.atlas-container #site-passport .passport-meta-item[data-meta="read"]::before     { content: "READ_TIME:"; }

/* Теги */
.atlas-container #site-passport .passport-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.atlas-container #site-passport .passport-tag {
  font-size: var(--fs-status);
  font-weight: 700;
  color: var(--atlas-accent);
  text-decoration: none;
  border: 1px solid var(--atlas-border);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.02);
  transition: all 0.15s ease;
}
.atlas-container #site-passport .passport-tag:hover {
  background: var(--atlas-ink);
  color: var(--atlas-bg);
  border-color: var(--atlas-ink);
}

/* ── СЕКЦИЯ B: FOOTER — Системный подвал ────────────────────────────────── */
/* Структура HTML:                                                           */
/*   #atlas-footer > .atlas-footer-wrapper                                  */
/*     > .atlas-footer-block__support-header                                */
/*     > .atlas-footer-block__support-content                               */
/*       > .atlas-footer-block__support-text                                */
/*       > .atlas-footer-block__support-links > .atlas-blueprint-link       */
/*     > .atlas-footer-block__matrix-zone (3 колонки)                       */
/*       > .atlas-footer-block__matrix-column                               */
/*         > .atlas-footer-block__column-label                              */
/*         > .atlas-footer-block__column-items > .atlas-blueprint-link      */

.atlas-container #atlas-footer {
  margin-top: var(--atlas-space-xl);
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--atlas-border);
  padding: 16px;
  position: relative;
}

.atlas-container #atlas-footer .atlas-footer-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--atlas-space-md);
  width: 100%;
}

/* Верхняя статусная линия */
.atlas-container #atlas-footer .atlas-footer-block__support-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--atlas-ink);
  border-bottom: 1px solid var(--atlas-ink);
  padding-bottom: 6px;
  white-space: nowrap;
}
.atlas-container #atlas-footer .atlas-footer-block__kaomoji {
  color: var(--atlas-ink-muted);
}

/* Средняя зона: текст + ссылки поддержки */
.atlas-container #atlas-footer .atlas-footer-block__support-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: var(--atlas-space-sm);
  border-bottom: 1px dashed var(--atlas-border);
}
.atlas-container #atlas-footer .atlas-footer-block__support-text {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--atlas-ink-soft);
  max-width: 60%;
}
.atlas-container #atlas-footer .atlas-footer-block__support-links {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.atlas-container #atlas-footer .atlas-footer-block__support-divider {
  font-size: var(--fs-code);
  color: var(--atlas-border-strong);
}

/* Нижняя матрица навигации: строго 3 колонки */
.atlas-container #atlas-footer .atlas-footer-block__matrix-zone {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}
.atlas-container #atlas-footer .atlas-footer-block__matrix-column {
  display: flex;
  flex-direction: column;
  background: transparent;
}
.atlas-container #atlas-footer .atlas-footer-block__column-label {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--atlas-ink-muted);
  margin-bottom: var(--atlas-space-sm);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--atlas-border);
  padding-bottom: 4px;
  white-space: nowrap;
}
.atlas-container #atlas-footer .atlas-footer-block__column-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.atlas-container #atlas-footer .atlas-blueprint-link {
  font-size: var(--fs-code);
  color: var(--atlas-ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-block;
  white-space: nowrap;
}
.atlas-container #atlas-footer .atlas-blueprint-link:hover {
  color: var(--atlas-accent);
}

/* ── СЕКЦИЯ C: АДАПТИВНОСТЬ ──────────────────────────────────────────────── */
/* Порог 550px: узкие десктопные колонки блога (600-750px) не триггерят     */
/* мобильную верстку и не ломают сетку паспорта 2×2.                       */

@media (max-width: 550px) {
  .atlas-container #site-passport .passport-title-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    white-space: normal;
  }
  .atlas-container #site-passport .passport-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .atlas-container #site-passport .passport-meta {
    flex-wrap: wrap;
    gap: 10px;
  }
  .atlas-container #atlas-footer .atlas-footer-block__support-content {
    flex-direction: column;
    gap: 16px;
  }
  .atlas-container #atlas-footer .atlas-footer-block__support-text {
    max-width: 100%;
  }
  .atlas-container #atlas-footer .atlas-footer-block__matrix-zone {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   FILE: 04-atlas-code.css
   ROLE: Блоки кода (pre.atlas-code-block) и математики (.atlas-math-block).
         Подсветка синтаксиса Prism.js (low-contrast палитра).
         Smart-coupling: математика вплотную сливается с кодом.
   ЗАВИСИМОСТИ: 01-atlas-core.css (системная геометрия блоков)
   ПОРЯДОК В МОНОЛИТЕ: 4 из 7
   ========================================================================== */

/* ── СЕКЦИЯ A: УНИКАЛЬНЫЕ ШАПКИ И ГРАНИЦЫ ───────────────────────────────── */
/* Геометрия (border, padding, position) задана в 01-atlas-core.css.        */
/* Здесь — только то, что отличает code и math от других блоков.            */

/* Красная левая полоса — фирменный идентификатор кодового блока */
.atlas-container .content-block pre.atlas-code-block {
  border-left: 3px solid var(--atlas-ink-muted);
  overflow-x: auto;
}

/* Математика: пунктирная рамка вместо сплошной */
.atlas-container .content-block .atlas-math-block {
  border-style: dashed;
  overflow-x: auto;
}

/* Тексты псевдо-шапок */
.atlas-container .content-block pre.atlas-code-block::before {
  content: "[ CODE_LISTING // TRANSPILED_ALGORITHM ]";
}
.atlas-container .content-block pre.atlas-code-block[data-language]::before {
  content: "[ CODE_LISTING // " attr(data-language) " ]";
}
.atlas-container .content-block .atlas-math-block::before {
  content: "[ MATH_MODEL // МАТЕМАТИЧЕСКИЙ АППАРАТ ]";
}

/* ── СЕКЦИЯ B: СТАБИЛИЗАЦИЯ ШРИФТОВ ─────────────────────────────────────── */
/* Защита от системных шрифтов Wix и text-shadow Prism тем.                */

.atlas-container .content-block pre.atlas-code-block,
.atlas-container .content-block pre.atlas-code-block code {
  font-size: var(--fs-code);
  line-height: 1.6;
  color: var(--atlas-ink-soft);
  background: transparent;
  text-shadow: none;
}

.atlas-container .content-block .atlas-math-block {
  font-size: var(--fs-math);
  line-height: 1.35;
  color: var(--atlas-ink-soft);
}

.atlas-container .content-block .atlas-math-block mjx-container[display="true"] {
  margin-block: 12px;
}

/* ── СЕКЦИЯ C: SMART COUPLING — Бесшовное слияние math + code ────────────── */
/* Когда .atlas-math-block стоит ПРЯМО перед pre.atlas-code-block,         */
/* нижняя граница math убирается и верхняя граница code становится          */
/* пунктирной — блоки визуально сливаются в одну единицу.                  */

.atlas-container .content-block .atlas-math-block:has(+ pre.atlas-code-block) {
  margin-bottom: 0;
  border-bottom: none;
}
.atlas-container .content-block .atlas-math-block + pre.atlas-code-block {
  margin-top: 0;
  border-top: 1px dashed var(--atlas-border);
}

/* ── СЕКЦИЯ D: PRISM.JS — Low-contrast синтаксис ────────────────────────── */
/* Палитра адаптирована под монохромную тему Atlas.                         */
/* Все фоны токенов обнуляются (Prism темы добавляют цветные подложки).    */

.atlas-container .content-block pre.atlas-code-block code .token {
  background: transparent;
  text-shadow: none;
}

.atlas-container .content-block pre.atlas-code-block code .token.comment    { color: var(--atlas-ink-muted); font-style: italic; }
.atlas-container .content-block pre.atlas-code-block code .token.punctuation { color: rgba(0, 0, 0, 0.4); }
.atlas-container .content-block pre.atlas-code-block code .token.number,
.atlas-container .content-block pre.atlas-code-block code .token.boolean    { color: var(--atlas-warn); }
.atlas-container .content-block pre.atlas-code-block code .token.string,
.atlas-container .content-block pre.atlas-code-block code .token.char       { color: var(--atlas-ok); }
.atlas-container .content-block pre.atlas-code-block code .token.keyword    { color: var(--atlas-accent); font-weight: 700; }
.atlas-container .content-block pre.atlas-code-block code .token.class-name,
.atlas-container .content-block pre.atlas-code-block code .token.builtin    { color: #6b3f00; font-weight: 700; }
.atlas-container .content-block pre.atlas-code-block code .token.function   { color: #008181; font-weight: 700; }
.atlas-container .content-block pre.atlas-code-block code .token.operator   { color: var(--atlas-crit); }
.atlas-container .content-block pre.atlas-code-block code .token.property,
.atlas-container .content-block pre.atlas-code-block code .token.constant   { color: #5c2d91; }

/* ── СЕКЦИЯ E: OVERFLOW FIX — Код внутри составных компонентов ──────────── */
/* Проблема: pre.atlas-code-block внутри .comparison-matrix и              */
/* .atlas-table-frame имеет overflow:auto на РОДИТЕЛЕ, но сам pre          */
/* получает белое пространство без переноса — текст уходит за границу.     */
/*                                                                          */
/* Решение: явный overflow-x:auto + max-width:100% на pre в любом          */
/* контексте, плюс word-break для длинных идентификаторов в таблицах.      */

/* pre внутри comparison-matrix — код в ячейках сравнения */
.atlas-container .comparison-matrix pre.atlas-code-block {
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  /* Сброс margin который core задаёт системным блокам */
  margin: 8px 0;
  /* Шапка ::before не нужна внутри comparison-cell — убираем */
  padding-top: 12px;
}
.atlas-container .comparison-matrix pre.atlas-code-block::before {
  display: none;
}

/* pre внутри atlas-table-frame (ячейки таблиц td/th) */
.atlas-container .content-block .atlas-table-frame pre.atlas-code-block,
.atlas-container .content-block .atlas-table-frame td pre,
.atlas-container .content-block .atlas-table-frame th pre {
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 4px 0;
  padding: 6px 8px;
  border-left: 2px solid var(--atlas-ink-muted);
  font-size: var(--fs-code);
  line-height: 1.5;
}
.atlas-container .content-block .atlas-table-frame pre.atlas-code-block::before {
  display: none;
}

/* atlas-code-inline в ячейках таблиц — предотвращаем растягивание столбца */
.atlas-container .content-block .atlas-table-frame td .atlas-code-inline,
.atlas-container .content-block .atlas-table-frame th .atlas-code-inline {
  display: inline;
  word-break: break-all;
  white-space: normal;
}

/* Глобальный фикс: код внутри любого .comp-col не разрывает layout */
.atlas-container .comp-col pre,
.atlas-container .comp-col code,
.atlas-container .comp-col .atlas-code-block {
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre;          /* сохраняем форматирование */
  word-break: normal;        /* не ломаем внутри слов */
}

/* Таблицы: длинные слова в td/th переносятся, не разрывают таблицу */
.atlas-container .content-block .atlas-table-frame td,
.atlas-container .content-block .atlas-table-frame th {
  word-break: break-word;    /* перенос по словам если не помещается */
  overflow-wrap: break-word; /* fallback для старых браузеров */
  min-width: 0;              /* позволяет flex/grid ужать ячейку */
}

/* Горизонтальный скролл на самом table-frame если таблица шире контейнера */
.atlas-container .content-block .atlas-table-frame {
  overflow-x: auto;
}

/* ==========================================================================
   FILE: 05-atlas-tables.css
   ROLE: Таблицы данных (.atlas-table-frame) и UML-диаграммы (.atlas-uml-diag).
         Два стиля таблиц: прозрачный (default) и с чёрной шапкой (--solid).
   ЗАВИСИМОСТИ: 01-atlas-core.css (системная геометрия .atlas-table-frame)
   ПОРЯДОК В МОНОЛИТЕ: 5 из 7
   ========================================================================== */

/* ── СЕКЦИЯ A: ТАБЛИЦА — Дефолтный прозрачный стиль ────────────────────── */
/* Геометрия и рамка .atlas-table-frame задана в 01-atlas-core.css.        */
/* Здесь: шапка, внутренняя таблица, зебра.                                */

/* Псевдо-шапка по умолчанию */
.atlas-container .content-block .atlas-table-frame::before {
  content: "[ DATA_TABLE // ДАННЫЕ И СПЕЦИФИКАЦИИ ]";
}

/* Внутренняя таблица */
.atlas-container .content-block .atlas-table-frame .atlas-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-code);
  line-height: 1.5;
  color: var(--atlas-ink-soft);
}

.atlas-container .content-block .atlas-table-frame .atlas-table thead th {
  text-align: left;
  padding: 10px;
  font-weight: 700;
  color: var(--atlas-ink);
  border-bottom: 2px solid var(--atlas-border-strong);
}
.atlas-container .content-block .atlas-table-frame .atlas-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--atlas-border);
}

/* Зебра: чётные строки получают лёгкий фон */
.atlas-container .content-block .atlas-table-frame .atlas-table tbody tr:nth-child(even) {
  background: var(--atlas-bg-alt);
}

/* ── СЕКЦИЯ B: ТАБЛИЦА — Модификатор --solid (чёрная инженерная шапка) ─── */
/* Отличия от дефолта:                                                      */
/*   1. Псевдо-шапка core скрыта, заголовок вставляется в HTML             */
/*   2. .atlas-table-header-solid растягивается от края до края            */
/*   ИСПРАВЛЕНИЕ: margin рассчитан от реального padding-top = 34px         */
/*   (не 16px как в оригинале)                                              */

.atlas-container .content-block .atlas-table-frame--solid {
  padding-top: 0; /* Убираем зазор: шапка HTML занимает его сама */
}
.atlas-container .content-block .atlas-table-frame--solid::before {
  display: none; /* Псевдо-шапка core не нужна — есть HTML-элемент */
}

/* HTML-элемент заголовка: <div class="atlas-table-header-solid">TITLE</div> */
.atlas-container .content-block .atlas-table-header-solid {
  display: block;
  background: var(--atlas-ink);
  color: var(--atlas-bg);
  padding: 6px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Растягиваем вплотную к рамке блока (padding у .atlas-table-frame = 16px по бокам) */
  margin: 0 -16px 16px -16px;
  border-bottom: 1px solid var(--atlas-ink);
}

/* Для --solid таблица получает собственную видимую рамку */
.atlas-container .content-block .atlas-table-frame--solid .atlas-table {
  border: 1px solid var(--atlas-border);
}

/* ── СЕКЦИЯ C: UML-ДИАГРАММЫ — Изолированный namespace ─────────────────── */
/* ВАЖНО: все правила обёрнуты в .atlas-container для изоляции от Wix.     */
/* CSS-переменные ссылаются на --atlas-* из 01-atlas-core.css.             */
/* Жёстко заданные цвета в оригинале заменены на переменные.               */

/* Корневой элемент диаграммы */
.atlas-container .atlas-uml-diag {
  font-family: var(--atlas-font-mono);
  width: 100%;
  box-sizing: border-box;
}

/* Виджет-обёртка */
.atlas-container .atlas-uml-diag__widget {
  border: 2px solid var(--atlas-ink);
  background: var(--atlas-bg);
}
.atlas-container .atlas-uml-diag__header {
  background: var(--atlas-ink);
  color: var(--atlas-bg);
  padding: 4px 10px;
  font-size: 10px;
  text-transform: uppercase;
}

/* Зоны (Scope) */
.atlas-container .atlas-uml-diag__scope {
  border: 1px dashed var(--atlas-ink);
  padding: 10px;
  margin-bottom: 15px;
}
.atlas-container .atlas-uml-diag__scope-label {
  font-size: 8px;
  color: var(--atlas-ink-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
}

/* Узлы — базовый прямоугольник */
.atlas-container .atlas-uml-diag__node {
  border: 1px solid var(--atlas-ink);
  background: var(--atlas-bg);
  min-width: 120px;
  display: flex;
  flex-direction: column;
}
.atlas-container .atlas-uml-diag__node--dashed {
  border-style: dashed;
}
.atlas-container .atlas-uml-diag__node-title {
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid var(--atlas-ink);
  text-align: center;
}
.atlas-container .atlas-uml-diag__node-body {
  padding: 6px 10px;
  font-size: 9px;
  line-height: 1.4;
  text-align: left;
}

/* Логика: Decision — инженерный ромб (rotate 45deg + фиксированный размер) */
.atlas-container .atlas-uml-diag__node--decision {
  transform: rotate(45deg);
  width: 64px;
  height: 64px;
  min-width: 64px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 1px solid var(--atlas-ink);
  background: var(--atlas-bg);
}
.atlas-container .atlas-uml-diag__node--decision span {
  transform: rotate(-45deg);
  display: block;
  font-size: var(--fs-status);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

/* Стрелки: горизонтальная линия + треугольный наконечник */
.atlas-container .atlas-uml-diag__arrow-wrapper {
  display: flex;
  align-items: center;
  margin: 0 -2px;
}
.atlas-container .atlas-uml-diag__arrow-line {
  flex: 1;
  height: 1px;
  background: var(--atlas-ink-muted);
}
.atlas-container .atlas-uml-diag__arrow-head {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--atlas-ink-muted);
}

/* Легенда */
.atlas-container .atlas-uml-diag__legend {
  border-top: 1px solid var(--atlas-ink);
  padding: 8px;
  font-size: 9px;
  display: flex;
  gap: 15px;
  color: var(--atlas-ink-muted);
}

/* ── Explanatory geometry / cross-section schematic ───────────────────── */
.atlas-container .atlas-schematic {
  margin: var(--atlas-space-md) 0;
  border: 1px solid var(--atlas-border);
  background: var(--atlas-bg-alt);
}
.atlas-container .atlas-schematic__header {
  padding: 7px 12px;
  border-bottom: 1px solid var(--atlas-border);
  color: var(--atlas-ink-muted);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: .06em;
}
.atlas-container .atlas-schematic__canvas {
  display: flex;
  justify-content: center;
  padding: var(--atlas-space-md);
  border-bottom: 1px dashed var(--atlas-border);
}
.atlas-container .atlas-schematic__canvas svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}
.atlas-container .atlas-schematic__primary { stroke: var(--atlas-ink); }
.atlas-container .atlas-schematic__secondary { stroke: var(--atlas-ink-muted); stroke-dasharray: 3 2; }
.atlas-container .atlas-schematic__critical { stroke: var(--atlas-crit); }
.atlas-container .atlas-schematic__leader { stroke: var(--atlas-ink-muted); }
.atlas-container .atlas-schematic__label { fill: var(--atlas-ink); font: 700 6px var(--atlas-font-mono); }
.atlas-container .atlas-schematic__label--critical { fill: var(--atlas-crit); }
.atlas-container .atlas-schematic__legend {
  display: grid;
  gap: 8px;
  padding: var(--atlas-space-sm);
}
.atlas-container .atlas-schematic__legend > div {
  padding-left: 12px;
  border-left: 2px solid var(--atlas-ink);
}
.atlas-container .atlas-schematic__legend > .is-critical { border-left-color: var(--atlas-crit); }
.atlas-container .atlas-schematic__legend b {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-code);
  text-transform: uppercase;
}
.atlas-container .atlas-schematic__legend span {
  color: var(--atlas-ink-soft);
  font-size: var(--fs-body);
  line-height: 1.45;
}
.atlas-container .atlas-schematic__note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: var(--atlas-space-sm);
  border-top: 1px solid var(--atlas-border);
  color: var(--atlas-ink-soft);
  font-size: var(--fs-code);
  line-height: 1.5;
}
.atlas-container .atlas-schematic__note b {
  padding: 2px 6px;
  background: var(--atlas-ink);
  color: var(--atlas-bg);
  font-size: var(--fs-status);
}
@media (max-width: 640px) {
  .atlas-container .atlas-schematic__note { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FILE: 06-atlas-callout.css
   ROLE: Информационные блоки (.atlas-callout) и матрица сравнения
         (.comparison-matrix). Семантические варианты через модификаторы.
   ЗАВИСИМОСТИ: 01-atlas-core.css (геометрия и модификаторы --important/
                --warning/--success уже там)
   ПОРЯДОК В МОНОЛИТЕ: 6 из 7
   ========================================================================== */

/* ── СЕКЦИЯ A: CALLOUT — Базовый и NOTE-вариант ─────────────────────────── */
/* Геометрия (border, padding, position, ::before position/height/size)    */
/* задана в 01-atlas-core.css через общий список системных блоков.         */
/* Здесь: фон, дефолтный content шапки, вариант --note и --quote.          */

/* Фон — нейтральный alt, не чистый белый */
.atlas-container .atlas-callout {
  background: var(--atlas-bg-alt);
}

/* Дефолтная шапка (переопределяет заглушку core.css если там была) */
.atlas-container .atlas-callout::before {
  content: "[ INFO // DOCUMENTATION ]";
}

/* NOTE: нейтральная системная заметка */
.atlas-container .atlas-callout--note::before {
  content: "[ SYSTEM_NOTE ]";
}

/* QUOTE: цитата с левой полосой */
.atlas-container .atlas-callout--quote {
  border-left: 4px solid var(--atlas-ink-muted);
}
.atlas-container .atlas-callout--quote::before {
  content: "[ REFERENCE_POINT ]";
}

/* Keep semantic headers more specific than the base callout header above. */
.atlas-container .atlas-callout.atlas-callout--important::before {
  content: "[ IMPORTANT // WARNING ]";
  color: var(--atlas-crit);
}
.atlas-container .atlas-callout.atlas-callout--warning::before {
  content: "[ WARNING // CAUTION ]";
  color: var(--atlas-warn);
}
.atlas-container .atlas-callout.atlas-callout--success::before {
  content: "[ STATUS // SUCCESS ]";
  color: var(--atlas-ok);
}

/* Параграф внутри callout — изолированный сброс отступов */
.atlas-container .atlas-callout p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--atlas-ink-soft);
}

/* ── СЕКЦИЯ B: COMPARISON MATRIX — Двухколоночное сравнение ─────────────── */
/* Геометрия (border, position, padding-top под шапку) задана здесь,       */
/* а не в core, потому что .comparison-matrix имеет display:grid           */
/* и нестандартные отступы отличные от остальных системных блоков.          */
/*                                                                           */
/* ИСПРАВЛЕНИЕ: padding-top унифицирован с core (34px) вместо 24px.        */
/* Если нужно вернуть 24px — убрать блок из core и задать здесь явно.      */

.atlas-container .comparison-matrix {
  margin: 24px;
  max-width: calc(100% - 48px);
  border: 1px solid var(--atlas-border);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 34px; /* Синхронизировано с core: 24px шапка + 10px зазор */
  box-sizing: border-box;
  background: transparent;
}

/* Псевдо-шапка матрицы */
.atlas-container .comparison-matrix::before {
  content: "[ COMPARISON // DATA_MATRIX ]";
}

/* Колонки */
.atlas-container .comp-col {
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.atlas-container .comp-col:first-child {
  border-right: 1px dashed var(--atlas-border);
}

/* Заголовок колонки */
.atlas-container .comp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--atlas-ink);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

/* Тело колонки */
.atlas-container .comp-body {
  font-size: var(--fs-code);
  line-height: 1.5;
  color: var(--atlas-ink-soft);
}

/* ── OVERFLOW FIX (v3.8.1) — comparison-matrix scroll ───────────────────── */
/* .comparison-matrix — display:grid 1fr 1fr.                               */
/* Если содержимое ячейки (pre, длинная строка) шире 1fr,                  */
/* grid не ужимает её ниже min-content без явного min-width: 0.             */

.atlas-container .comparison-matrix {
  overflow-x: auto;    /* если вся матрица не помещается — скролл */
}

.atlas-container .comp-col {
  min-width: 0;        /* критично: разрешает grid ужать колонку */
  overflow: hidden;    /* контент не вылезает за границу ячейки */
}

/* pre внутри comp-col: скролл по коду, не разрыв layout */
.atlas-container .comp-col pre,
.atlas-container .comp-col pre.atlas-code-block {
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  /* Шапку ::before внутри comparison скрываем — дублирует comp-label */
  padding-top: 12px;
}
.atlas-container .comp-col pre.atlas-code-block::before {
  display: none;
}

/* Длинные слова в .comp-body (имена функций, URLs) */
.atlas-container .comp-body {
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

/* ==========================================================================
   FILE: 07-atlas-media.css
   ROLE: Медиа-контейнеры (.media-frame) и галерейная сетка (.gallery-grid).
         Поддержка img, video, iframe (16:9 авто-пропорции для YouTube/Vimeo).
         Галерея автоматически активируется когда .gallery-grid
         является прямым потомком .media-frame.
   ЗАВИСИМОСТИ: 01-atlas-core.css (геометрия .media-frame)
   ПОРЯДОК В МОНОЛИТЕ: 7 из 7 (последний)
   ========================================================================== */

/* ── СЕКЦИЯ A: MEDIA FRAME — Инженерный визуальный контейнер ────────────── */
/* Геометрия (border, padding, ::before) задана в 01-atlas-core.css.        */

.atlas-container .content-block .media-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Псевдо-шапка: одиночный медиа-ассет */
.atlas-container .content-block .media-frame::before {
  content: "[ MEDIA_ASSET // VISUAL_DATA ]";
}

/* Когда внутри .media-frame находится .gallery-grid — шапка переключается */
.atlas-container .content-block .media-frame:has(.gallery-grid)::before {
  content: "[ GALLERY // IMAGE_SEQUENCE ]";
}

/* Одиночные медиа-элементы (не в галерее) */
.atlas-container .content-block .media-frame > img,
.atlas-container .content-block .media-frame > video,
.atlas-container .content-block .media-frame > iframe {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--atlas-border);
  margin: 0 auto;
}

/* iframe (YouTube, Vimeo): авто-пропорция 16:9 */
.atlas-container .content-block .media-frame > iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Подпись — всегда по всей ширине, ниже контента */
.atlas-container .content-block .media-caption {
  font-family: var(--atlas-font-mono);
  font-size: var(--fs-status);
  color: var(--atlas-ink-muted);
  margin-top: 12px;
  text-align: center;
  width: 100%;
  align-self: center;
}

/* Live WebGL / shader / interactive document embedded as evidence. */
.atlas-container .content-block .atlas-interactive-frame {
  margin: var(--atlas-space-md) 0;
  border: 1px solid var(--atlas-border);
  background: var(--atlas-bg-alt);
}
.atlas-container .content-block .atlas-interactive-frame::before {
  content: "[ INTERACTIVE // LIVE_PREVIEW ]";
  display: block;
  min-height: 24px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--atlas-border);
  color: var(--atlas-ink-muted);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: .06em;
  box-sizing: border-box;
}
.atlas-container .content-block .atlas-interactive-frame iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
}
.atlas-container .content-block .atlas-interactive-frame__fallback {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 24px;
  background: #171513;
  color: rgba(255,255,255,.62);
  font-size: var(--fs-code);
  text-align: center;
}

/* ── СЕКЦИЯ B: GALLERY GRID — Адаптивная сетка внутри media-frame ────────── */
/* Используется ВНУТРИ .media-frame для галерей.                             */
/* Auto-fit: 1 фото = full width, 2 = 2 col, 3+ = 2–3 col авто.            */
/* Отдельное использование за пределами .media-frame тоже поддерживается.  */

.atlas-container .content-block .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  width: 100%;
}

/* Изображения внутри сетки: заполняют ячейку, сохраняют пропорции */
.atlas-container .content-block .gallery-grid img {
  display: block;
  width: 100%;
  height: 180px;           /* Фиксированная высота — все ячейки одного роста */
  object-fit: contain;     /* Показываем изображение целиком без обрезки */
  background: #111;
  border: 1px solid var(--atlas-border);
}

/* Когда .gallery-grid — прямой потомок .media-frame: убираем лишние отступы */
.atlas-container .content-block .media-frame > .gallery-grid {
  margin: 0;
}

/* Модификатор: высокие превью (портреты, иллюстрации) */
.atlas-container .content-block .gallery-grid--tall img {
  height: 260px;
}

/* Модификатор: маленькие миниатюры (спрайты, иконки, текстуры) */
.atlas-container .content-block .gallery-grid--thumb img {
  height: 100px;
}

/* Модификатор: принудительно 3 колонки независимо от ширины */
.atlas-container .content-block .gallery-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* Модификатор: принудительно 2 колонки */
.atlas-container .content-block .gallery-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* ── СЕКЦИЯ C: АДАПТИВНОСТЬ ──────────────────────────────────────────────── */

@media (max-width: 550px) {
  .atlas-container .content-block .gallery-grid,
  .atlas-container .content-block .gallery-grid--3col,
  .atlas-container .content-block .gallery-grid--2col {
    grid-template-columns: 1fr;
  }
  .atlas-container .content-block .gallery-grid img {
    height: 200px;
  }
}

/* ==========================================================================
   FILE: 08-atlas-interactive.css
   ROLE: Кнопки (.atlas-btn + модификаторы) и блок референсов (.atlas-refs).
         Кнопки вдохновлены эстетикой Volkov/Norton Commander:
         синяя заливка #0000AA, dithering-оверлей на hover, угловые рамки.
   ЗАВИСИМОСТИ: 01-atlas-core.css (переменные --atlas-*)
   ПОРЯДОК В МОНОЛИТЕ: 8 из 8 (последний)
   ========================================================================== */

/* ── СЕКЦИЯ A: КНОПКИ — База ─────────────────────────────────────────────── */
/* Volkov Commander palette: #0000AA fill, white text, dithering on hover.  */
/* Dithering реализован через CSS gradient pattern (4px шахматная сетка).  */
/* Семантика: используй .atlas-btn как <button> или <a class="atlas-btn">   */

.atlas-container .atlas-btn {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  position: relative;
  display: inline-block;
  font-family: var(--atlas-font-mono);
  font-size: var(--fs-code);        /* 12px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border: none;
  cursor: pointer;
  color: #ffffff;
  background-color: var(--atlas-accent);
  text-decoration: none;
  white-space: nowrap;
  overflow: visible;
  outline: none;
  transition: background-color 0.1s;
  user-select: none;
  vertical-align: middle;
}

.atlas-container .atlas-btn:hover { background-color: var(--atlas-accent-hi); }

.atlas-container .atlas-btn:active {
  background-color: var(--atlas-accent-border);
  transform: translateY(1px);
}

/* Dither shadow wrapper. Keep the pattern behind the button face. */
.atlas-container .atlas-btn-shadow {
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin: 0 4px 4px 0;
}
.atlas-container .atlas-btn-shadow::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px -4px -4px 4px;
  background: var(--atlas-dither);
  background-size: 4px 4px;
  /* Paint only the exposed bottom/right strips, never behind the text area.
     This also stays safe when a disabled face has reduced opacity. */
  clip-path: polygon(calc(100% - 4px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 4px), calc(100% - 4px) calc(100% - 4px));
  pointer-events: none;
}
.atlas-container .atlas-btn-shadow > .atlas-btn {
  position: relative;
  z-index: 1;
  transition: transform .05s linear, background-color .1s;
}
.atlas-container .atlas-btn-shadow > .atlas-btn:active { transform: translate(4px, 4px); }

/* Quiet navigation action: visible in the layout without competing with content. */
.atlas-container .atlas-btn--quiet {
  border: 1px solid var(--atlas-ink);
  background: var(--atlas-bg-raised);
  color: var(--atlas-ink);
  font-size: var(--fs-meta);
  text-transform: none;
  letter-spacing: .02em;
}
.atlas-container .atlas-btn--quiet:hover,
.atlas-container .atlas-btn--quiet:focus-visible {
  background: #008181;
  color: #fff;
  outline: 1px solid var(--atlas-ink);
  outline-offset: -3px;
}

/* ── СЕКЦИЯ B: КНОПКИ — Семантические модификаторы ──────────────────────── */

/* Активное/выбранное состояние (например: выбранный таб, текущий фильтр) */
.atlas-container .atlas-btn--active {
  background-color: #00008B;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.25);
}

/* Деструктивное действие (удаление, сброс) */
.atlas-container .atlas-btn--danger {
  background-color: var(--atlas-crit);
}
.atlas-container .atlas-btn--danger:active {
  background-color: #6a0000;
}

/* Подтверждение, успех */
.atlas-container .atlas-btn--ok {
  background-color: var(--atlas-ok);
}
.atlas-container .atlas-btn--ok:active {
  background-color: #123912;
}

/* Ghost: прозрачный фон, рамка, бордовый текст — для вторичных действий */
.atlas-container .atlas-btn--ghost {
  border-radius: 0;
  background: transparent;
  color: var(--atlas-accent);
  border: 1px solid var(--atlas-border);
}
.atlas-container .atlas-btn--ghost::after {
  display: none; /* Dithering не нужен для ghost */
}
.atlas-container .atlas-btn--ghost:hover {
  background: var(--atlas-bg-alt);
}
.atlas-container .atlas-btn--ghost:active {
  transform: translateY(1px);
}

/* ── СЕКЦИЯ C: КНОПКИ — Структурный модификатор --bracket ───────────────── */
/* Текстовые кнопки-ссылки в стиле [ACTION]. Без заливки, скобки через CSS. */
/* HTML: <button class="atlas-btn atlas-btn--bracket">Read More</button>     */

.atlas-container .atlas-btn--bracket {
  border-radius: 0;
  background: transparent;
  color: var(--atlas-ink);
  border: none;
  padding: 4px 8px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* Скобки генерируются через ::before и перезаписывают dithering ::after */
.atlas-container .atlas-btn--bracket::before {
  content: '[';
  margin-right: 3px;
  color: var(--atlas-ink-muted);
  font-weight: 400;
}
.atlas-container .atlas-btn--bracket::after {
  content: ']';
  /* Переопределяем dithering-стили из базовой кнопки */
  position: static;
  background-image: none;
  background-size: auto;
  background-position: 0 0;
  pointer-events: auto;
  opacity: 1;
  transition: none;
  margin-left: 3px;
  color: var(--atlas-ink-muted);
  font-weight: 400;
  inset: auto;
}

.atlas-container .atlas-btn--bracket:hover {
  color: var(--atlas-accent);
}
.atlas-container .atlas-btn--bracket:hover::before,
.atlas-container .atlas-btn--bracket:hover::after {
  color: var(--atlas-accent);
}
.atlas-container .atlas-btn--bracket:active {
  transform: translateY(1px);
}

/* ── СЕКЦИЯ D: КНОПКИ — Размерный модификатор ───────────────────────────── */

/* Малый: для строк таблиц, мета-зон */
.atlas-container .atlas-btn--sm {
  font-size: var(--fs-status);     /* 9px */
  padding: 3px 10px;
  letter-spacing: 0.08em;
}

/* ── СЕКЦИЯ E: ГРУППА КНОПОК ─────────────────────────────────────────────── */
/* HTML: <div class="atlas-btn-group"><button class="atlas-btn">A</button>... */

.atlas-container .atlas-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Разделитель между кнопками в группе */
.atlas-container .atlas-btn-group .atlas-btn + .atlas-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── СЕКЦИЯ F: REFERENCE BLOCK ───────────────────────────────────────────── */
/* Блок библиографических ссылок и источников в конце статьи.               */
/* Структура:                                                                */
/*   .atlas-refs                                                             */
/*     > ul.atlas-ref-list                                                  */
/*       > li.atlas-ref-item                                                */
/*           .atlas-ref-num   — порядковый номер [01]                       */
/*           .atlas-ref-body                                                */
/*             .atlas-ref-tag — тип: [PAPER] [DOCS] [CODE] [VIDEO]         */
/*             .atlas-ref-author — авторы                                   */
/*             .atlas-ref-title — название (опционально)                    */
/*             a.atlas-ref-link — URL с автопрефиксом →                     */

/* Геометрия блока — в стиле системных блоков, но без core-списка */
.atlas-container .content-block .atlas-refs {
  position: relative;
  border: 1px solid var(--atlas-border);
  padding: 34px 16px 16px 16px;
  margin: 24px 0;
  width: 100%;
}

.atlas-container .content-block .atlas-refs::before {
  content: "[ REFERENCES // ИСТОЧНИКИ ]";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  line-height: 24px;
  padding-left: 16px;
  font-size: var(--fs-status);
  font-weight: 700;
  color: var(--atlas-ink-muted);
  background: rgba(0, 0, 0, 0.015);
  border-bottom: 1px solid var(--atlas-border);
  letter-spacing: 0.05em;
  font-family: var(--atlas-font-mono);
}

/* Список */
.atlas-container .content-block .atlas-ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Строка: номер + тело */
.atlas-container .content-block .atlas-ref-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0;
  align-items: baseline;
  font-size: var(--fs-code);
  line-height: 1.55;
  color: var(--atlas-ink-soft);
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--atlas-border);
}
.atlas-container .content-block .atlas-ref-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Номер */
.atlas-container .content-block .atlas-ref-num {
  font-size: var(--fs-status);
  font-weight: 700;
  color: var(--atlas-accent);
  letter-spacing: 0.04em;
  padding-top: 2px;
}

/* Тело */
.atlas-container .content-block .atlas-ref-body {
  font-size: var(--fs-code);
}

/* Тег типа источника: [PAPER] [DOCS] [CODE] [VIDEO] [TALK] */
.atlas-container .content-block .atlas-ref-tag {
  display: inline-block;
  font-size: var(--fs-status);
  font-weight: 700;
  color: var(--atlas-ink-muted);
  border: 1px solid var(--atlas-border);
  padding: 0 5px;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

/* Авторы */
.atlas-container .content-block .atlas-ref-author {
  color: var(--atlas-ink-muted);
  font-size: var(--fs-code);
}

/* URL-ссылка с автопрефиксом → */
.atlas-container .content-block .atlas-ref-link {
  display: inline-block;
  margin-top: 3px;
  font-size: var(--fs-meta);
  color: var(--atlas-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 0, 0, 0.25);
  transition: border-color 0.15s;
}
.atlas-container .content-block .atlas-ref-link::before {
  content: '→ ';
  font-weight: 700;
}
.atlas-container .content-block .atlas-ref-link:hover {
  border-bottom-color: var(--atlas-accent);
}

/* ==========================================================================
   FILE: 09-atlas-shader-panel.css
   ROLE: Интерактивная панель управления параметрами шейдера (.atlas-shader-panel).
         Стиль: Volkov/Norton Commander — DOS-терминал, пиксельная эстетика.
         Используется внутри постов рядом с интерактивными WebGL/iframe блоками.

   НОВАЯ ПЕРЕМЕННАЯ: --atlas-accent (#0000AA) — UI-акцент (кнопки, слайдеры,
         переключатели). НЕ путать с --atlas-crit (#8b0000) — это семантика
         ошибок, предупреждений и маркеров в контенте.

   ЗАВИСИМОСТИ: 01-atlas-core.css (--atlas-*, --fs-*, --atlas-font-mono)
   ПОРЯДОК В МОНОЛИТЕ: 9 из 9
   ========================================================================== */

/* ── СЕКЦИЯ A: НОВЫЕ ТОКЕНЫ — Добавить в 01-atlas-core.css :root ─────────
   --atlas-accent:   #0000AA   Volkov Commander blue — UI кнопки, слайдеры
   --atlas-accent-h: #008181   Hover-состояние accent
   Компонент не переопределяет общие типографические токены документа.     */

:root {
  --atlas-accent:   #0000AA;
  --atlas-accent-h: #008181;
  /* Dither-паттерн: 4×4px шахматка, чёрная — для теней и OFF-состояний */
  --atlas-dither: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="2" height="2" x="0" y="0" fill="black"/><rect width="2" height="2" x="2" y="2" fill="black"/></svg>');
}

/* ── СЕКЦИЯ B: ПАНЕЛЬ — Контейнер и тень ─────────────────────────────────
   .atlas-shader-panel — корневой элемент панели.
   Тень: 8px solid black — строгий пиксельный сдвиг, без blur, без radius.
   HTML: <div class="atlas-shader-panel"> ... </div>                       */

.atlas-container .atlas-shader-panel {
  font-family: var(--atlas-font-mono);
  font-size: var(--fs-body);
  color: var(--atlas-ink-soft);
  width: 100%;
  position: relative;
  box-sizing: border-box;

  background: var(--atlas-bg);
  border: 2px solid var(--atlas-ink);
  /* Пиксельная тень: смещение 8px вправо + 8px вниз, без blur */
  box-shadow: 8px 8px 0 0 var(--atlas-ink);
  /* Компенсируем тень — иначе правый и нижний край обрезается */
  margin-bottom: 12px;
  margin-right: 8px;
}

/* ── СЕКЦИЯ C: ШАПКА ПАНЕЛИ ─────────────────────────────────────────────── */

.atlas-container .atlas-shader-panel__header {
  background: var(--atlas-ink);
  color: var(--atlas-bg);
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--atlas-ink);
}

.atlas-container .atlas-shader-panel__title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--atlas-bg);
}

/* Статус: мигающий квадратный диод + метка ACTIVE/IDLE */
.atlas-container .atlas-shader-panel__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-status);
  font-weight: 700;
  color: var(--atlas-bg);
  letter-spacing: 0.1em;
  opacity: 0.85;
}

/* Диод: строгий квадрат, никаких border-radius */
.atlas-container .atlas-shader-panel__led {
  width: 7px;
  height: 7px;
  background: var(--atlas-bg);
  border-radius: 0;
  flex-shrink: 0;
  animation: atlas-led-pulse 2s infinite steps(2, end);
}

@keyframes atlas-led-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── СЕКЦИЯ D: ТЕЛО ПАНЕЛИ ───────────────────────────────────────────────── */

.atlas-container .atlas-shader-panel__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Блок параметров внутри панели */
.atlas-container .atlas-shader-panel__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Заголовок блока параметров */
.atlas-container .atlas-shader-panel__block-title {
  font-size: var(--fs-status);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--atlas-ink-muted);
  border-bottom: 1px solid var(--atlas-border);
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.atlas-container .atlas-shader-panel__block-hint {
  font-weight: 400;
  color: var(--atlas-ink-muted);
  font-size: var(--fs-status);
  letter-spacing: 0.04em;
}

/* ── СЕКЦИЯ E: УПРАВЛЯЮЩАЯ СЕТКА (3 колонки: prefix | label | control) ─── */

.atlas-container .atlas-sp-grid {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  column-gap: 8px;
  row-gap: 10px;
  align-items: center;
}

/* Префикс: val_ / bool_ / col_ */
.atlas-container .atlas-sp-prefix {
  font-size: var(--fs-status);
  color: var(--atlas-ink-muted);
  text-align: right;
  white-space: nowrap;
}

/* Имя параметра */
.atlas-container .atlas-sp-label {
  font-size: var(--fs-code);
  font-weight: 700;
  color: var(--atlas-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Числовое значение (выводится через JS) */
.atlas-container .atlas-sp-value {
  font-size: var(--fs-code);
  font-weight: 700;
  color: var(--atlas-accent);
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Слайдер занимает всю строку — grid-column: 1/-1 */
.atlas-container .atlas-sp-row-full {
  grid-column: 1 / -1;
}

/* ── СЕКЦИЯ F: СЛАЙДЕР — Инженерная шкала без стандартных контролов ─────── */

.atlas-container .atlas-sp-slider-wrap {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
}

/* Центральная ось прибора */
.atlas-container .atlas-sp-slider-wrap::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--atlas-ink);
  z-index: 0;
}

/* Засечки измерительной шкалы: повторяющийся градиент */
.atlas-container .atlas-sp-slider-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 7px;
  margin-top: -3px;
  background: repeating-linear-gradient(
    90deg,
    var(--atlas-ink) 0,
    var(--atlas-ink) 1px,
    transparent 1px,
    transparent 10%
  );
  z-index: 0;
  opacity: 0.2;
}

.atlas-container .atlas-sp-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 100%;
  width: 100%;
  outline: none;
  cursor: ew-resize;
  position: relative;
  z-index: 1;
}

/* Маркер-ползунок: строгий прямоугольник, цвет --atlas-accent */
.atlas-container .atlas-sp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 18px;
  background: var(--atlas-accent);
  border: 1px solid var(--atlas-ink);
  border-radius: 0;
  box-shadow: none;
  cursor: ew-resize;
  transition: transform 0.1s;
}
.atlas-container .atlas-sp-slider::-moz-range-thumb {
  width: 6px;
  height: 18px;
  background: var(--atlas-accent);
  border: 1px solid var(--atlas-ink);
  border-radius: 0;
  box-shadow: none;
  cursor: ew-resize;
  transition: transform 0.1s;
}
.atlas-container .atlas-sp-slider::-webkit-slider-thumb:hover { transform: scaleY(1.25); }
.atlas-container .atlas-sp-slider::-moz-range-thumb:hover     { transform: scaleY(1.25); }

/* ── СЕКЦИЯ G: ПЕРЕКЛЮЧАТЕЛЬ BOOLEAN ────────────────────────────────────── */

/* Обёртка: скрытый input + видимый switch-статус */
.atlas-container .atlas-sp-switch {
  position: relative;
  width: 56px;
  height: 20px;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
}

.atlas-container .atlas-sp-switch input {
  opacity: 0;
  width: 0; height: 0;
  position: absolute;
}

/* OFF-состояние: dither-паттерн = "выключено", текст OFF */
.atlas-container .atlas-sp-switch__track {
  position: absolute;
  inset: 0;
  border: 1px solid var(--atlas-ink);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-status);
  font-weight: 700;
  letter-spacing: 0.06em;

  /* Dither-фон = выключено */
  background: var(--atlas-dither) repeat;
  background-size: 4px 4px;
  background-color: var(--atlas-bg);
}
.atlas-container .atlas-sp-switch__track::after {
  content: 'OFF';
  color: var(--atlas-ink-muted);
  background: var(--atlas-bg);
  padding: 0 3px;
  position: relative;
  z-index: 1;
}

/* ON-состояние: сплошной accent, текст ON */
.atlas-container .atlas-sp-switch input:checked + .atlas-sp-switch__track {
  background: var(--atlas-accent);
  background-image: none;
}
.atlas-container .atlas-sp-switch input:checked + .atlas-sp-switch__track::after {
  content: 'ON';
  color: #ffffff;
  background: transparent;
}

/* ── СЕКЦИЯ H: КНОПКИ ПАНЕЛИ — dither-тень под блоком ───────────────────── */
/* Архитектура: .atlas-sp-btn-wrap — позиционирует dither-тень.             */
/* .atlas-sp-btn — сама кнопка, смещена translate(-4px,-4px) над тенью.    */
/* :active — кнопка опускается на 0,0 — эффект физического нажатия.        */

.atlas-container .atlas-sp-actions {
  display: flex;
  gap: 16px;
  padding-top: 4px;
}

/* Обёртка — содержит dither-тень позади кнопки */
.atlas-container .atlas-sp-btn-wrap {
  flex: 1;
  position: relative;
  display: inline-block;
  /* КРИТИЧНО: overflow никогда не hidden — тень должна вылезать за блок */
}

/* Тень = ::after на обёртке, z-index: 0 — строго ПОД кнопкой.
   Архитектура: тень и кнопка в одном stacking context,
   z-index решает порядок без конфликта с background родителя.     */
.atlas-container .atlas-sp-btn-wrap::after {
  content: '';
  position: absolute;
  /* Смещение тени: 4px вправо + 4px вниз от позиции кнопки */
  top: 4px; left: 4px;
  right: -4px; bottom: -4px;
  /* Dither-паттерн: 4×4px шахматка */
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.75) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,.75) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,.75) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.75) 75%);
  background-size: 4px 4px;
  background-position: 0 0, 0 2px, 2px -2px, -2px 0;
  z-index: 0;   /* ПОД кнопкой */
  pointer-events: none;
}

/* Сама кнопка — z-index: 1, всегда поверх тени */
.atlas-container .atlas-sp-btn {
  width: 100%;
  position: relative;
  z-index: 1;   /* НАД ::after тенью */
  background: var(--atlas-bg);
  border: 1px solid var(--atlas-ink);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  color: var(--atlas-ink);
  font-family: var(--atlas-font-mono);
  font-size: var(--fs-code);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Кнопка смещена вверх-влево — тень выглядывает снизу-справа */
  transform: translate(-4px, -4px);
  transition: transform 0.05s linear;
  white-space: nowrap;
}

/* Нажатие: кнопка "проваливается" на тень */
.atlas-container .atlas-sp-btn:active {
  transform: translate(0, 0);
}

/* Модификатор: синяя акцентная кнопка (EXECUTE, PRIMARY) */
.atlas-container .atlas-sp-btn--accent {
  background: var(--atlas-accent);
  color: #ffffff;
  border-color: var(--atlas-ink);
}
.atlas-container .atlas-sp-btn--accent:hover {
  background: var(--atlas-accent-h);
}

/* Модификатор: деструктивная (FLUSH, RESET) — сохраняет светлый фон */
.atlas-container .atlas-sp-btn--reset {
  color: var(--atlas-ink-soft);
}
.atlas-container .atlas-sp-btn--reset:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Иконка-символ внутри кнопки */
.atlas-container .atlas-sp-btn__icon {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

/* ── СЕКЦИЯ I: ФУТЕР ПАНЕЛИ ──────────────────────────────────────────────── */

.atlas-container .atlas-shader-panel__footer {
  border-top: 2px solid var(--atlas-ink);
  background: rgba(0, 0, 0, 0.03);
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-status);
}

.atlas-container .atlas-shader-panel__footer-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.atlas-container .atlas-shader-panel__footer-col--right {
  text-align: right;
}

.atlas-container .atlas-sp-meta-line {
  color: var(--atlas-ink-soft);
  font-weight: 700;
}

.atlas-container .atlas-sp-meta-key {
  color: var(--atlas-ink-muted);
  font-weight: 400;
  margin-right: 4px;
}

/* ==========================================================================
   FILE: 10-atlas-toc.css
   ROLE: Содержание поста (.atlas-toc) с якорной навигацией по H2/H3/H4.
         Автоматически генерируется JS (см. ниже) или пишется вручную.
         Стилистически идентичен .atlas-refs — те же рамки, псевдо-шапка,
         пунктирные разделители, — но клик ведёт на секцию, а не на URL.

   JS-АВТОГЕНЕРАЦИЯ:
     Вставь <div id="atlas-toc"></div> в начало поста.
     Подключи скрипт atlas-toc.js — он найдёт все h2/h3/h4 внутри
     .content-block, назначит им id и заполнит #atlas-toc.

   ЗАВИСИМОСТИ: 01-atlas-core.css
   ПОРЯДОК В МОНОЛИТЕ: 10 из 10
   ========================================================================== */

/* ── СЕКЦИЯ A: КОНТЕЙНЕР ─────────────────────────────────────────────────── */

.atlas-container .content-block .atlas-toc {
  position: relative;
  border: 1px solid var(--atlas-border);
  padding: 34px 0 8px 0;   /* top = 24px шапка + 10px зазор; sides = 0 (у items своих) */
  margin: 24px 0;
  width: 100%;
}

/* Псевдо-шапка — идентична системным блокам */
.atlas-container .content-block .atlas-toc::before {
  content: "[ TABLE_OF_CONTENTS // NAVIGATION ]";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  line-height: 24px;
  padding-left: 16px;
  font-size: var(--fs-status);
  font-weight: 700;
  color: var(--atlas-ink-muted);
  background: rgba(0, 0, 0, 0.015);
  border-bottom: 1px solid var(--atlas-border);
  letter-spacing: 0.06em;
  font-family: var(--atlas-font-mono);
}

/* ── СЕКЦИЯ B: СПИСОК ЭЛЕМЕНТОВ ──────────────────────────────────────────── */

.atlas-container .content-block .atlas-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Каждый элемент = 3-колоночная сетка: номер | заголовок | точки */
.atlas-container .content-block .atlas-toc__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  border-bottom: 1px dashed var(--atlas-border);
  transition: background 0.1s;
}
.atlas-container .content-block .atlas-toc__item:last-child {
  border-bottom: none;
}
.atlas-container .content-block .atlas-toc__item:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Ссылка растягивается на весь элемент через display:contents */
.atlas-container .content-block .atlas-toc__item a {
  display: contents;
  text-decoration: none;
  color: inherit;
}

/* Hover: номер и заголовок краснеют */
.atlas-container .content-block .atlas-toc__item:hover .atlas-toc__num,
.atlas-container .content-block .atlas-toc__item:hover .atlas-toc__title {
  color: var(--atlas-accent);
}

/* ── СЕКЦИЯ C: ЯЧЕЙКИ ────────────────────────────────────────────────────── */

/* Номер секции: [01] / [—] / [·] */
.atlas-container .content-block .atlas-toc__num {
  font-size: var(--fs-status);
  font-weight: 700;
  color: var(--atlas-ink-muted);
  padding: 7px 0 7px 16px;
  letter-spacing: 0.04em;
  align-self: center;
  transition: color 0.1s;
}

/* Строка заголовка + точки через flex */
.atlas-container .content-block .atlas-toc__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px 7px 8px;
  overflow: hidden;
}

/* Заголовок */
.atlas-container .content-block .atlas-toc__title {
  font-size: var(--fs-code);
  font-weight: 700;
  color: var(--atlas-ink);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.1s;
}

/* Точки-заполнитель между заголовком и краем */
.atlas-container .content-block .atlas-toc__dots {
  flex: 1;
  border-bottom: 1px dotted var(--atlas-border);
  min-width: 12px;
  height: 0;
  align-self: center;
  margin-bottom: 2px;
}

/* ── СЕКЦИЯ D: УРОВНИ ВЛОЖЕННОСТИ ────────────────────────────────────────── */

/* H2: основной раздел — без отступа, жирный */
.atlas-container .content-block .atlas-toc__item--h2 .atlas-toc__title {
  font-size: var(--fs-code);
  font-weight: 700;
}

/* H3: подраздел — отступ 20px, обычный вес, приглушённый */
.atlas-container .content-block .atlas-toc__item--h3 .atlas-toc__title {
  font-size: 11px;
  font-weight: 400;
  color: var(--atlas-ink-soft);
  padding-left: 14px;
}
.atlas-container .content-block .atlas-toc__item--h3 .atlas-toc__num {
  color: rgba(0, 0, 0, 0.2);
}

/* H4: микро-заголовок — двойной отступ, мелкий, совсем приглушённый */
.atlas-container .content-block .atlas-toc__item--h4 .atlas-toc__title {
  font-size: 10px;
  font-weight: 400;
  color: var(--atlas-ink-muted);
  padding-left: 28px;
}
.atlas-container .content-block .atlas-toc__item--h4 .atlas-toc__num {
  color: rgba(0, 0, 0, 0.15);
}

/* Optional analytics consent. Loaded independently so cached page CSS cannot hide it. */
.atlas-consent,
.atlas-consent * {
  box-sizing: border-box;
}

.atlas-consent {
  position: fixed;
  z-index: 1000;
  right: 18px;
  bottom: 18px;
  width: min(560px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  padding: 16px;
  border: 1px solid #000;
  background: rgb(238, 231, 223);
  color: #000;
  box-shadow: 6px 6px 0 #000;
  font: 11px/1.5 'JetBrains Mono', 'Courier New', monospace;
  transition: opacity 0.12s linear, transform 0.12s linear;
}

.atlas-consent[data-closing='true'] {
  opacity: 0;
  transform: translateY(4px);
}

.atlas-consent__copy strong {
  display: block;
  margin-bottom: 5px;
  color: #0000aa;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.atlas-consent__copy p {
  margin: 0 0 6px;
}

.atlas-consent__copy a {
  color: rgba(0, 0, 0, 0.62);
  font-size: 9px;
  text-decoration: none;
}

.atlas-consent__copy a:hover,
.atlas-consent__copy a:focus-visible {
  color: #008181;
  text-decoration: underline;
}

.atlas-consent__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.atlas-consent__actions button,
.analytics-reset {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #000;
  border-radius: 0;
  background: rgb(238, 231, 223);
  color: #000;
  cursor: pointer;
  font: 10px/1.2 'JetBrains Mono', 'Courier New', monospace;
  text-align: left;
}

.atlas-consent__actions button:first-child {
  background: #0000aa;
  color: #fff;
}

.atlas-consent__actions button:hover,
.atlas-consent__actions button:focus-visible,
.analytics-reset:hover,
.analytics-reset:focus-visible {
  outline: 2px solid #008181;
  outline-offset: 2px;
}

.privacy-page {
  min-height: 100vh;
  margin: 0;
  padding: 32px 16px;
  background: rgb(230, 220, 210);
  color: #000;
  font: 12px/1.7 'JetBrains Mono', 'Courier New', monospace;
}

.privacy-document {
  width: min(780px, 100%);
  margin: 0 auto;
  padding: 32px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: rgba(238, 231, 223, 0.72);
}

.privacy-document h1 {
  margin: 0 0 24px;
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1.1;
}

.privacy-document h2 {
  margin: 32px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  font-size: 14px;
}

.privacy-document a {
  color: #0000aa;
}

.privacy-path,
.privacy-revision {
  color: rgba(0, 0, 0, 0.55);
  font-size: 10px;
}

@media (max-width: 620px) {
  .atlas-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .atlas-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .privacy-document {
    padding: 22px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-consent {
    transition: none;
  }
}

:root{--paper:var(--atlas-bg);--paper2:#eee7df;--ink:var(--atlas-ink);--muted:var(--atlas-ink-muted);--red:var(--atlas-crit);--green:var(--atlas-ok);--line:var(--atlas-border);--line2:var(--atlas-border-strong);--mono:var(--atlas-font-mono);--serif:Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background-color:var(--paper);background-image:none;font:12px/1.6 var(--mono)}a{color:inherit}.skip{position:fixed;top:6px;left:6px;z-index:20;transform:translateY(-140%);padding:6px 9px;background:var(--ink);color:var(--paper)}.skip:focus{transform:none}.shellbar{position:sticky;top:0;z-index:10;height:48px;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line2);background:rgba(230,220,210,.96);backdrop-filter:blur(8px);font-size:10px}.shell-id{text-decoration:none}.shell-id b{color:var(--red)}.shell-id span{color:var(--muted)}.shell-id i{font-style:normal;animation:blink 1s steps(2,jump-none) infinite}@keyframes blink{50%{opacity:0}}.shellbar nav{height:100%;display:flex}.shellbar nav a{height:100%;padding:16px 15px 0;text-decoration:none;text-transform:uppercase;border-inline:1px solid transparent}.shellbar nav a:hover,.shellbar nav a:focus-visible,.shellbar nav a.active{color:var(--red);border-color:var(--line);background:rgba(17,17,17,.025)}.shell-status{justify-self:end;color:var(--muted)}.shell-status>span:first-child{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--green)}.shell-status .clock{margin-left:6px;color:var(--ink)}.workspace{width:min(1440px,calc(100vw - 32px));margin:0 auto;display:grid;grid-template-columns:210px minmax(520px,820px) 190px;gap:38px;align-items:start}.rail,.meta-rail{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:auto;margin-top:34px;color:var(--muted);font-size:10px}.rail-title,.meta-block>p{margin:0 0 13px;padding-bottom:7px;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line2)}.rail ol{list-style:none;margin:0;padding:0}.rail li a{display:grid;grid-template-columns:30px 1fr;padding:5px 0;text-decoration:none}.rail li a:hover{color:var(--red)}.rail li span{color:var(--red)}.tree{margin:26px 0;padding:12px;border:1px solid var(--line);background:rgba(238,231,223,.4);line-height:1.8}.tree p{margin:0}.rail-links{display:flex;flex-wrap:wrap;gap:5px 9px}.rail-links a:hover{color:var(--red)}main{min-width:0;border-inline:1px solid var(--line);background:rgba(230,220,210,.42)}.doc-head{padding:34px 36px 42px;border-bottom:1px solid var(--line2)}.breadcrumb{color:var(--muted);font-size:10px}.doc-flags{margin:24px 0 35px;display:flex;gap:6px}.doc-flags span{padding:3px 6px;border:1px solid var(--line);font-size:9px;color:var(--muted)}h1{margin:0;font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.04em;font-weight:600}.abstract{max-width:650px;margin:25px 0 28px;font:20px/1.4 var(--serif)}.command{padding:10px 12px;border:1px solid var(--line2);background:rgba(17,17,17,.035);font-size:10px}.command span{color:var(--red);font-weight:700}.command b{font-weight:400;animation:blink 1s steps(2,jump-none) infinite}.doc-section{padding:38px 36px 48px;border-bottom:1px solid var(--line2);scroll-margin-top:48px}.section-label{min-height:34px;margin:0 0 26px;display:grid;grid-template-columns:45px 1fr auto;align-items:baseline;border-bottom:1px solid var(--line2)}.section-label>span{color:var(--red);font-weight:700}.section-label h2{margin:0;font-size:13px;line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.section-label em{font-size:8px;font-style:normal;color:var(--muted)}.log-table{border-top:1px solid var(--line)}.log-table>a{min-height:54px;padding:9px 7px;display:grid;grid-template-columns:62px 78px minmax(220px,1fr) 140px 15px;gap:10px;align-items:center;border-bottom:1px solid var(--line);text-decoration:none}.log-table>a:hover{background:var(--ink);color:var(--paper2)}.log-table time,.kind,.tags{font-size:9px;color:var(--muted)}.log-table strong{font-size:11px;font-weight:500}.log-table i{font-style:normal;color:var(--red)}.section-foot{margin:12px 0 0;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.section-foot a{color:var(--ink)}.section-foot a:hover{color:var(--red)}.prose{max-width:670px;margin:0 0 26px;font:18px/1.45 var(--serif)}.prose p:first-child{margin-top:0}.project-index{border-top:1px solid var(--line2)}.project-index>a{padding:14px 8px;display:grid;grid-template-columns:62px 1.2fr .8fr 48px;gap:10px;border-bottom:1px solid var(--line);text-decoration:none}.project-index>a:hover{background:rgba(17,17,17,.045)}.project-index strong{font-size:12px}.project-index>a>span:not(.project-id){color:var(--muted);font-size:9px}.project-id{color:var(--red);font-size:9px}.project-index small{grid-column:2/4;color:var(--muted);font:15px/1.35 var(--serif)}.project-index i{grid-column:4;grid-row:1/3;align-self:center;font-style:normal;font-size:8px;color:var(--green)}.definition-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2);border-left:1px solid var(--line2)}.definition-grid article{min-height:180px;padding:18px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}.definition-grid h3{margin:0 0 25px;font-size:11px;color:var(--red)}.definition-grid p{min-height:60px;margin:0 0 18px;color:var(--muted);font-size:10px}.definition-grid code{font:9px var(--mono);background:rgba(17,17,17,.055);padding:4px 6px}.definition-grid code a{text-decoration:none}.definition-grid code a:hover,.definition-grid code a:focus-visible{color:var(--red)}.gumroad-shelf__viewport{border:1px solid var(--line);padding:9px}.gumroad-shelf__slide{display:block;text-decoration:none;color:inherit}.gumroad-shelf__slide[hidden]{display:none}.gumroad-shelf__slide img{display:block;width:100%;height:96px;margin-bottom:8px;border:1px solid var(--line);background:#171827;object-fit:cover}.gumroad-shelf__slide strong{display:block;min-height:2.6em;margin-bottom:5px;font-size:10px;line-height:1.3;color:var(--ink)}.gumroad-shelf__slide span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:4.5em;margin-bottom:8px;color:var(--muted);line-height:1.5}.gumroad-shelf__slide em{display:flex;justify-content:space-between;font-style:normal;padding-top:7px;border-top:1px dashed var(--line)}.gumroad-shelf__slide b{font-weight:700}.gumroad-shelf__slide i{font-style:normal;color:var(--green)}.gumroad-shelf__slide:hover strong,.gumroad-shelf__slide:focus-visible strong{color:var(--red)}.gumroad-shelf__nav{display:flex;align-items:center;justify-content:space-between;margin-top:7px}.gumroad-shelf__nav button{padding:3px 8px;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;cursor:pointer}.gumroad-shelf__nav button:hover,.gumroad-shelf__nav button:focus-visible{color:var(--red);border-color:var(--red)}.gumroad-shelf__nav output{color:var(--muted)}.about-layout{display:grid;grid-template-columns:1fr 230px;gap:36px}.about-layout .prose{margin:0}.about-layout dl{margin:0;border-top:1px solid var(--line2)}.about-layout dl div{padding:7px 0;display:grid;grid-template-columns:80px 1fr;border-bottom:1px solid var(--line)}.about-layout dt{color:var(--muted);font-size:9px}.about-layout dd{margin:0;font-size:9px}.ok{color:var(--green)}.meta-block{margin-bottom:28px}.meta-block dl{display:grid;grid-template-columns:1fr 1fr;margin:0}.meta-block dt,.meta-block dd{margin:0;padding:4px 0;border-bottom:1px dotted var(--line)}.meta-block dd{text-align:right;color:var(--ink)}.meta-block ul{list-style:none;padding:0;margin:0}.meta-block li{padding:3px 0}.meta-block li:before{content:"├─ ";color:var(--red)}.meta-block li:last-child:before{content:"└─ "}.tag-cloud{display:flex;flex-wrap:wrap;gap:5px}.tag-cloud span{padding:2px 4px;border:1px solid var(--line)}.checksum{margin-top:50px;padding-top:10px;border-top:1px solid var(--line);font-size:8px;color:rgba(17,17,17,.35)}footer{width:min(1440px,calc(100vw - 32px));min-height:55px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--line2);font-size:8px;color:var(--muted)}footer a{justify-self:end}@media(max-width:1100px){.workspace{grid-template-columns:180px minmax(500px,1fr)}.meta-rail{display:none}}@media(max-width:760px){.shellbar{height:auto;min-height:48px;padding:10px 14px;grid-template-columns:1fr auto}.shell-status{display:none}.shellbar nav{grid-column:1/-1;margin-top:8px;border-top:1px solid var(--line);width:100%}.shellbar nav a{padding:8px 12px;height:auto}.shellbar nav a:first-child{padding-left:0}.workspace{width:calc(100vw - 24px);display:block}.rail{position:static;max-height:none;margin:18px 0}.rail ol{display:flex;flex-wrap:wrap;gap:5px 16px}.rail li a{display:block}.rail li span,.tree{display:none}.rail-links{position:absolute;top:13px;right:14px}.rail-links a{font-size:0}.rail-links a:before{font-size:9px}.rail-links a:nth-child(1):before{content:"[GH]"}.rail-links a:nth-child(2):before{content:"[IN]"}.rail-links a:nth-child(3):before{content:"[@]"}main{border:1px solid var(--line)}.doc-head,.doc-section{padding:25px 18px 32px}.doc-flags{margin:18px 0 26px}.abstract{font-size:18px}.section-label{grid-template-columns:40px 1fr}.section-label em{display:none}.log-table>a{grid-template-columns:54px 65px 1fr 12px}.log-table .tags{grid-column:3}.project-index>a{grid-template-columns:55px 1fr 42px}.project-index>a>span:not(.project-id){grid-column:2}.project-index small{grid-column:2;font-size:14px}.project-index i{grid-column:3;grid-row:1/4}.definition-grid{grid-template-columns:1fr}.definition-grid article{min-height:155px}.about-layout{grid-template-columns:1fr}.prose{font-size:17px}footer{width:calc(100vw - 24px);grid-template-columns:1fr auto}footer span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shell-id i,.command b,.atlas-shader-panel__led{animation:none}}

/* ATLAS COMMANDER — functional navigation and dither controls */
:root{--vc:var(--atlas-accent);--vc-hi:var(--atlas-accent-h);--vc-yellow:#ffff55;--dither:var(--atlas-dither)}
body{padding-bottom:38px}
.vc-button{position:relative;isolation:isolate}
.vc-button::after{content:"";position:absolute;z-index:-1;left:4px;top:4px;width:100%;height:100%;background:var(--dither);pointer-events:none}
.shellbar nav{gap:7px;align-items:center}
.shellbar nav a{height:auto;padding:6px 10px;color:#fff;background:var(--vc);border:1px solid #000066;text-decoration:none;text-transform:uppercase}
.shellbar nav a:hover,.shellbar nav a:focus-visible,.shellbar nav a.active{color:#fff;background:var(--vc-hi);border-color:#000066;outline:1px solid var(--paper2);outline-offset:-3px}
.shellbar nav kbd{color:var(--vc-yellow);font:inherit}
.shell-status{text-decoration:none}.shell-status:hover{color:var(--vc)}
.command{padding:7px 10px;display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center}
.command label span{color:var(--red);font-weight:700}
.command input{min-width:0;padding:3px 6px;border:0;border-bottom:1px solid var(--line);outline:0;background:transparent;color:var(--ink);font:10px var(--mono)}
.command input:focus{border-color:var(--vc);background:var(--paper2)}
.command kbd{padding:1px 5px;border:1px solid var(--line);color:var(--muted);font:9px var(--mono)}
.command output{min-width:68px;text-align:right;color:var(--muted);font-size:9px}
.meta-block li a{text-decoration:none}.meta-block li a:hover{color:var(--vc);text-decoration:underline}
.tag-cloud a{padding:2px 4px;border:1px solid var(--line);text-decoration:none}
.tag-cloud a:hover,.tag-cloud a:focus-visible{color:#fff;background:var(--vc);border-color:var(--vc)}
dialog{width:min(480px,calc(100vw - 32px));padding:0;border:1px solid #000;background:var(--paper2);color:var(--ink);box-shadow:8px 8px 0 transparent;font:11px/1.5 var(--mono)}
dialog::backdrop{background-color:rgba(0,0,0,.42);background-image:var(--dither);background-size:4px 4px}
.dialog-title{padding:7px 9px;display:flex;justify-content:space-between;background:var(--vc);color:#fff}
.dialog-title button{border:0;background:transparent;color:var(--vc-yellow);font:700 16px/1 var(--mono);cursor:pointer}
dialog dl{margin:16px;border-top:1px solid var(--line2)}
dialog dl div{display:grid;grid-template-columns:55px 1fr;border-bottom:1px solid var(--line)}
dialog dt,dialog dd{margin:0;padding:6px}dialog dt{color:var(--red);font-weight:700}
.dialog-ok{float:right;margin:0 16px 16px;padding:6px 14px;border:1px solid #000066;background:var(--vc);color:#fff;font:10px var(--mono);cursor:pointer}
.dialog-ok kbd{color:var(--vc-yellow);font:inherit}
@media(max-width:760px){body{padding-bottom:42px}.shellbar nav{gap:5px;overflow-x:auto;padding-bottom:5px}.shellbar nav a{padding:5px 7px;white-space:nowrap}.shellbar nav kbd{display:inline}.command{grid-template-columns:auto 1fr auto}.command output{grid-column:2;text-align:left}.command>kbd{grid-column:3;grid-row:1}}

/* HR-readable media index — flat color only */
body::before{content:"";position:fixed;z-index:-1;inset:0;background:var(--dither);background-size:4px 4px;opacity:.04;pointer-events:none}
main{background:rgba(238,231,223,.95)}
.log-table>a{min-height:78px;grid-template-columns:88px 62px 78px minmax(190px,1fr) 126px 15px}
.log-table>a>img{width:80px;height:56px;object-fit:cover;border:1px solid var(--line2);background:var(--paper)}
.project-index>a{min-height:88px;grid-template-columns:96px 62px 1.2fr .8fr 48px;align-items:start}
.project-index>a>img{grid-column:1;grid-row:1/3;width:88px;height:62px;object-fit:cover;border:1px solid var(--line2);background:var(--paper)}
.project-index>a>.project-id{grid-column:2}
.project-index>a>strong{grid-column:3}
.project-index>a>span:not(.project-id){grid-column:4}
.project-index>a>small{grid-column:3/5}
.project-index>a>i{grid-column:5;grid-row:1/3}
@media(max-width:760px){
  main{background:rgba(238,231,223,.97)}
  .log-table>a{grid-template-columns:72px 54px 1fr 12px;min-height:82px}
  .log-table>a>img{grid-column:1;grid-row:1/3;width:66px;height:52px}
  .log-table>a>time{grid-column:2}.log-table>a>.kind{grid-column:2}.log-table>a>strong{grid-column:3;grid-row:1}.log-table>a>.tags{grid-column:3;grid-row:2}.log-table>a>i{grid-column:4;grid-row:1/3}
  .project-index>a{grid-template-columns:76px 55px 1fr 42px}
  .project-index>a>img{grid-column:1;grid-row:1/4;width:68px;height:58px}
  .project-index>a>.project-id{grid-column:2}.project-index>a>strong{grid-column:3}.project-index>a>span:not(.project-id){grid-column:3}.project-index>a>small{grid-column:2/4}.project-index>a>i{grid-column:4;grid-row:1/4}
}




.vfx-intro{max-width:680px;margin:0 0 24px;color:var(--muted);font-size:10px;line-height:1.7}
.vfx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vfx-loop{min-width:0;margin:0;border:1px solid var(--line2);background:rgba(230,220,210,.92)}
.vfx-loop[hidden]{display:none}
.vfx-loop video{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#111;cursor:pointer}
.vfx-loop:hover,.vfx-loop:focus-within{border-color:var(--red)}
.vfx-loop figcaption{min-height:58px;padding:8px 9px;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;border-top:1px solid var(--line);font-size:8px}
.vfx-loop figcaption span{color:var(--red);font-weight:700}
.vfx-loop figcaption strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:600}
.vfx-loop figcaption small{grid-column:1/-1;color:var(--muted);font-size:8px}
.vfx-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-top:10px;border-top:1px dotted var(--line2)}
.vfx-count{color:var(--muted);font-size:8px;text-transform:uppercase}
.vfx-action{display:inline-block;position:relative;margin:4px 4px 0 0;background:var(--dither);background-size:4px 4px}
.vfx-more{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:164px;padding:8px 12px;border:1px solid var(--ink);background:var(--paper2);color:var(--ink);font:700 10px/1.2 var(--mono);cursor:pointer;transform:translate(-4px,-4px);transition:transform .05s linear}
.vfx-more:hover,.vfx-more:focus-visible{background:var(--atlas-accent);color:var(--paper);outline:1px solid var(--ink);outline-offset:-3px}
.vfx-more:active{transform:translate(0,0)}
.vfx-more kbd{color:var(--red);font:inherit;font-weight:700}.vfx-more:hover kbd,.vfx-more:focus-visible kbd{color:var(--vc-yellow)}
@media(max-width:760px){.vfx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.vfx-grid{grid-template-columns:1fr}.vfx-loop figcaption{min-height:52px}}
@media(prefers-reduced-motion:reduce){.vfx-loop video{cursor:zoom-in}}

/* Revision — dotted paper, simplified commander, professional profile */
:root{--dots:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><circle cx="1" cy="1" r=".7" fill="black" fill-opacity=".12"/></svg>')}
body{background-color:var(--paper);background-image:var(--dots);background-size:8px 8px}
body::before{display:none}
main{background:rgba(238,231,223,.95)}
.shellbar nav{position:relative;isolation:isolate;height:30px;padding:2px;display:flex;gap:0;align-items:stretch;border:1px solid #000066;background:var(--vc)}
.shellbar nav::after{content:"";position:absolute;z-index:-1;left:4px;top:4px;width:100%;height:100%;background:var(--dither);pointer-events:none}
.shellbar nav a{height:auto;padding:5px 13px;border:0;border-right:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;line-height:1;text-transform:uppercase}
.shellbar nav a:last-child{border-right:0}
.shellbar nav a span{color:var(--vc-yellow);font-weight:700}
.shellbar nav a:hover,.shellbar nav a:focus-visible{border-color:rgba(255,255,255,.22);background:var(--vc-hi);color:#fff;outline:0}
.shellbar nav a.active{border-color:rgba(255,255,255,.22);background:var(--paper2);color:var(--vc);outline:0}
.shellbar nav a.active span{color:var(--red)}
.function-bar .vc-button::after{display:none}
h1 span{font-size:.58em;letter-spacing:.01em;color:var(--red);text-transform:uppercase}
.mission{max-width:670px;margin:0 0 24px;padding:12px 14px;border-left:3px solid var(--red);background:rgba(17,17,17,.025);font-size:11px;line-height:1.65}
.profile-facts{margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2);border-left:1px solid var(--line2)}
.profile-facts div{padding:9px 11px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.profile-facts dt{margin-bottom:5px;color:var(--muted);font-size:8px}
.profile-facts dd{margin:0;font-size:9px}.profile-facts dd span{color:var(--green)}
.about-layout{grid-template-columns:minmax(0,1fr) 245px}.about-layout .prose{max-width:none}.about-layout .prose p{margin:0 0 18px}
.about-layout dl div{grid-template-columns:92px 1fr}
@media(max-width:760px){
  .shellbar nav{height:29px;padding:2px;overflow:visible}
  .shellbar nav a{padding:6px 8px;font-size:9px}
  .profile-facts{grid-template-columns:1fr}
  h1 span{font-size:.5em}
}


/* Revision — quiet text navigation and engine-agnostic statement */
.shellbar nav{position:static;isolation:auto;height:auto;padding:0;display:flex;gap:0;align-items:center;border:0;background:transparent}
.shellbar nav::after{display:none}
.shellbar nav a{height:auto;padding:4px 9px;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--muted);line-height:1;text-transform:uppercase;letter-spacing:.04em}
.shellbar nav a:last-child{border-right:0}
.shellbar nav a:hover,.shellbar nav a:focus-visible{border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);outline:0}
.shellbar nav a.active{border:0;border-bottom:1px solid var(--red);background:transparent;color:var(--red);outline:0}
.nav-divider{color:var(--line2);font-size:9px}
.scope-line{margin:22px 0 15px;color:var(--red);font-size:9px;font-weight:700;letter-spacing:.09em}
.doc-head .abstract{margin-top:0}
.mission{margin-bottom:16px;background:transparent}
.site-purpose{max-width:670px;margin:0 0 24px;padding:9px 0;border-top:1px dotted var(--line2);border-bottom:1px dotted var(--line2);color:var(--muted);font-size:9px;line-height:1.65}
.site-purpose strong{color:var(--ink)}
@media(max-width:760px){
  .shellbar nav{height:auto;padding:4px 0;overflow:visible}
  .shellbar nav a{padding:5px 6px;font-size:9px}
  .nav-divider{display:inline}
  .scope-line{line-height:1.5}
}


/* Revision — larger records, mono typography, media and resource indexes */
.abstract,.prose,.project-index small{font-family:var(--mono)}
.abstract{max-width:670px;font-size:13px;line-height:1.75;letter-spacing:-.01em}
.prose{font-size:11px;line-height:1.75}
.project-index small{font-size:10px;line-height:1.55}
.shellbar nav a{padding-inline:7px;font-size:9px}
.log-table>a{min-height:106px;grid-template-columns:146px 54px 66px minmax(170px,1fr) 98px 15px}
.log-table>a>img{width:136px;height:82px}
.log-table>a:hover,.log-table>a:focus-visible{background:var(--paper2);color:var(--ink);outline:0;box-shadow:inset 3px 0 0 var(--red)}
.project-index>a{min-height:116px;grid-template-columns:150px 58px 1.15fr .85fr 44px;align-items:start}
.project-index>a>img{width:140px;height:88px}
.media-record{margin:0 0 28px;display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(190px,.9fr);border:1px solid var(--line2);background:rgba(17,17,17,.025)}
.media-record video{display:block;width:100%;aspect-ratio:16/9;background:#111;object-fit:cover}
.media-record figcaption{padding:13px 15px;display:flex;flex-direction:column;justify-content:center;gap:9px;border-left:1px solid var(--line2)}
.media-record figcaption span{color:var(--red);font-size:8px;font-weight:700}
.media-record figcaption strong{font-size:10px;line-height:1.55}
.media-record figcaption small{color:var(--muted);font-size:8px}
.section-intro{max-width:650px;margin:0 0 22px;color:var(--muted);font-size:10px;line-height:1.7}
.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2);border-left:1px solid var(--line2)}
.resource-grid>a{min-width:0;padding:10px;display:flex;flex-direction:column;gap:7px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);text-decoration:none}
.resource-grid>a:hover,.resource-grid>a:focus-visible{background:rgba(17,17,17,.05);outline:0}
.resource-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.resource-grid span{margin-top:3px;color:var(--red);font-size:8px;font-weight:700}
.resource-grid strong{font-size:10px;line-height:1.45}
.resource-grid small{color:var(--muted);font-size:9px;line-height:1.55}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:36px}
.contact-layout p{margin:0 0 14px;color:var(--muted);font-size:10px;line-height:1.7}
.contact-layout .contact-lead{color:var(--ink);font-size:11px}
.contact-layout dl{margin:0;border-top:0}
.contact-layout dl div{padding:7px 0;display:grid;grid-template-columns:72px 1fr;border-bottom:1px solid var(--line)}
.contact-layout dt{color:var(--muted);font-size:8px}
.contact-layout dd{margin:0;font-size:9px;text-align:right}
.contact-layout a:hover{color:var(--red)}
.about-layout a:hover,.about-layout a:focus-visible,.contact-layout a:focus-visible{color:var(--red);outline:0}
.about-layout dl{border-top:0}
.function-bar{grid-template-columns:repeat(8,minmax(72px,1fr))}
@media(max-width:760px){
  .shellbar nav{overflow-x:auto;white-space:nowrap}
  .abstract{font-size:12px;line-height:1.7}
  .prose{font-size:10px}
  .log-table>a{grid-template-columns:100px 48px minmax(0,1fr) 12px;min-height:100px}
  .log-table>a>img{width:92px;height:66px}
  .project-index>a{grid-template-columns:104px 50px minmax(0,1fr) 38px;min-height:108px}
  .project-index>a>img{width:96px;height:70px}
  .project-index>a>small{font-size:9px}
  .media-record{grid-template-columns:1fr}
  .media-record figcaption{border-left:0;border-top:1px solid var(--line2)}
  .resource-grid{grid-template-columns:1fr}
  .resource-grid>a{display:grid;grid-template-columns:112px 1fr;grid-template-rows:auto auto 1fr;column-gap:12px}
  .resource-grid img{grid-row:1/4;width:112px;height:84px}
  .contact-layout{grid-template-columns:1fr;gap:20px}
}

/* Image-led scanning blocks. The notebook prototype used labelled placeholders;
   this implementation keeps that rhythm but always presents the real work. */
.highlight-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

/* Dedicated browser-tools record: inspect the output, then open the utility. */
.home-online-tools .browser-tool-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border:1px solid var(--atlas-border-strong);background:var(--atlas-bg-raised)}
.browser-tool-preview{min-width:0;margin:0;border-right:1px solid var(--atlas-border)}
.browser-tool-bar{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--atlas-ink);color:var(--atlas-bg-raised);font-size:var(--fs-status);letter-spacing:.04em}
.browser-tool-preview img{display:block;width:100%;height:auto;object-fit:contain}
.browser-tool-preview figcaption{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid var(--atlas-border);font-size:var(--fs-status);color:var(--atlas-ink-soft)}
.browser-tool-copy{padding:22px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.browser-tool-state{margin:0 0 12px;color:var(--atlas-ok);font-size:var(--fs-status);letter-spacing:.06em}
.browser-tool-copy h3{margin:0 0 12px;font:700 var(--fs-h4)/1.35 var(--atlas-font-mono)}
.browser-tool-copy>p:not(.browser-tool-state){margin:0 0 16px;font-size:var(--fs-meta);line-height:1.75;color:var(--atlas-ink-soft)}
.browser-tool-steps{margin:0 0 22px;padding:0;list-style:none;width:100%}
.browser-tool-steps li{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--atlas-border);font-size:var(--fs-meta)}
.browser-tool-steps b{color:var(--atlas-accent);font-size:var(--fs-status)}
.browser-tool-copy .section-action{margin-top:auto}
.browser-tool-copy .section-action>a{display:flex;gap:22px;padding:10px 12px;border:1px solid var(--atlas-ink);background:var(--atlas-bg-raised);color:var(--atlas-ink);font-size:var(--fs-meta);text-decoration:none}
.browser-tool-copy .section-action>a:hover{background:var(--atlas-accent-hi);color:var(--atlas-bg-raised)}
.browser-tool-copy .section-action>a:focus-visible{outline:2px solid var(--atlas-accent);outline-offset:3px}
.browser-tool-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0 16px;border:1px solid var(--atlas-border)}
.browser-tool-facts span{padding:8px;text-align:center;font-size:var(--fs-status);color:var(--atlas-ink-soft)}
.browser-tool-facts span+span{border-left:1px solid var(--atlas-border)}
@media(max-width:1000px){.home-online-tools .browser-tool-feature{grid-template-columns:1fr}.browser-tool-preview{border-right:0;border-bottom:1px solid var(--atlas-border)}.browser-tool-preview img{max-height:280px}.browser-tool-copy{padding:22px}}
@media(max-width:480px){.browser-tool-copy{padding:16px}.browser-tool-bar{flex-wrap:wrap}.browser-tool-facts span{font-size:8px;line-height:1.5;padding:8px 4px}.browser-tool-preview figcaption{font-size:8px}}
.highlight-strip.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.highlight-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--atlas-bg-sunken);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.highlight-card:hover,
.highlight-card:focus-visible { border-color: var(--red); background: var(--atlas-accent-soft); outline: 0; }
.highlight-card:focus-visible { box-shadow: 0 0 0 1px var(--red); }
.highlight-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--line); }
.highlight-card .highlight-meta { display: grid; gap: 3px; padding: 7px 8px 8px; }
.highlight-card .highlight-kind { color: var(--atlas-ink-faint); font-size: 8px; }
.highlight-card strong { font-size: 10px; line-height: 1.35; }
.highlight-card small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.highlight-card > .card-cover { display: block; color: inherit; text-decoration: none; }
.highlight-card > .card-cover img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--line); }
.highlight-card .card-actions { display: flex; gap: 8px; padding: 0 8px 8px; }
.highlight-card .card-actions a { color: var(--red); font-size: 8px; font-weight: 700; text-decoration: none; }
.highlight-card .card-actions a:hover { text-decoration: underline; }
.section-split { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; color: var(--atlas-ink-faint); font-size: 9px; }
.section-split a,
.section-foot a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 7px 11px;
  border: 1px solid var(--ink);
  background: var(--paper2);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transform: translate(-4px, -4px);
  transition: transform .05s linear, background .12s ease;
}
.section-action { display: inline-block; position: relative; margin: 4px 4px 0 0; background: var(--dither); background-size: 4px 4px; }
.section-split a:hover,
.section-split a:focus-visible,
.section-foot a:hover,
.section-foot a:focus-visible { background: var(--atlas-accent); color: var(--paper); outline: 1px solid var(--ink); outline-offset: -3px; }
.section-split a:active,
.section-foot a:active { transform: translate(0, 0); }

/* Compact working-log rows used for Recent notes. */
.record-list { border: 1px solid var(--line); }
.record-list > a {
  display: grid;
  grid-template-columns: 72px 86px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--atlas-ink-soft);
  text-decoration: none;
}
.record-list > a:last-child { border-bottom: 0; }
.record-list > a:hover,
.record-list > a:focus-visible { background: var(--atlas-accent-soft); color: var(--ink); outline: 0; }
.record-list > a:hover .record-arrow,
.record-list > a:focus-visible .record-arrow { color: var(--red); opacity: 1; }
.record-list .record-date,
.record-list .record-kind,
.record-list .record-tags { font-size: 9px; }
.record-list .record-date { color: var(--atlas-ink-faint); }
.record-list .record-kind { color: var(--atlas-ink-muted); }
.record-list .record-main { display: grid; gap: 2px; min-width: 0; }
.record-list .record-main strong { font-size: 12px; font-weight: 600; }
.record-list .record-tags { color: var(--atlas-ink-faint); }
.record-list .record-arrow { color: var(--atlas-ink-ghost); font-size: 12px; }
.record-list.project-records > a { grid-template-columns: 72px minmax(0, 1fr) 60px auto; }
.record-list .record-summary { color: var(--atlas-ink-muted); font-size: 10px; line-height: 1.45; }
.record-list .record-state { color: var(--atlas-ink-muted); font-size: 9px; text-align: right; }
.cv-action { display: inline-block; position: relative; margin: 4px 4px 0 0; background: var(--dither); background-size: 4px 4px; }
.cv-action a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--ink); background: var(--atlas-accent); color: var(--paper); font-size: 9px; font-weight: 700; text-decoration: none; transform: translate(-4px, -4px); }
.cv-action a:hover, .cv-action a:focus-visible { background: var(--atlas-accent-hi); color: #fff; outline: 1px solid var(--ink); outline-offset: -3px; }
.cv-action a:active { transform: translate(0, 0); }
main .about-layout dl,
main .contact-layout dl { border-top: 0; }
main .about-layout dl div { display: block; padding: 8px 0; }
main .about-layout dt { margin: 0 0 4px; }
main .about-layout dd { text-align: left; }
@media (max-width: 760px) {
  .record-list > a { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 7px; padding: 6px 8px; }
  .record-list.project-records > a { grid-template-columns: 58px minmax(0, 1fr) auto; }
  .record-list .record-kind { display: none; }
  .record-list .record-state { display: none; }
}
@media (max-width: 760px) {
  .highlight-strip { grid-template-columns: 1fr 1fr; gap: 6px; }
  .highlight-strip.cols-3 { grid-template-columns: 1fr; }
}

/* Homepage overview: compact document hierarchy, not a marketing hero. */
.skip {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
}

.skip:focus {
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  padding: 6px 9px;
  transform: none;
}

.doc-head { padding-bottom: 18px; }
.doc-flags { margin: 10px 0 10px; }

.wire-block {
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.wire-wrap { width: 170px; height: 170px; display: block; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.wire-wrap:focus-visible { outline: 2px solid var(--atlas-accent); outline-offset: 2px; }
#wireCanvas { width: 170px; height: 170px; display: block; cursor: pointer; }
.wire-meta {
  display: flex;
  gap: 10px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--atlas-ink-faint);
}
.wire-meta #shapeName { color: var(--ink); font-weight: 500; }

.hero-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 20px;
}
.hero-text { min-width: 0; }

.doc-head h1 {
  max-width: 720px;
  margin: 0 0 4px;
  font-size: 26px;
  letter-spacing: -.02em;
}
.doc-head h1 .title-name {
  display: block;
  color: var(--ink);
  font-size: 1em;
  letter-spacing: -.04em;
  text-transform: none;
}
.doc-head h1 .title-role {
  display: block;
  margin-top: 0;
  color: var(--atlas-ink-soft);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.scope-line { margin: 0 0 6px; color: var(--atlas-ink-muted); font-size: 9px; }
.tagline-mark { margin: 0 0 10px; color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.doc-head .abstract { max-width: 58ch; margin: 0 0 10px; color: var(--atlas-ink-soft); font: 13px/1.5 var(--mono); }

.hero-cta {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--atlas-border);
  background: transparent;
  color: var(--atlas-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero-cta:hover, .hero-cta:focus-visible { background: var(--atlas-bg-alt); }
.hero-cta:active { transform: translateY(1px); }

.profile-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 14px;
}
.profile-row .hero-cta { flex: 0 0 auto; display: flex; align-items: center; }

.profile-facts {
  display: flex;
  flex: 1 1 320px;
  flex-wrap: wrap;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--atlas-bg-panel);
}
.profile-facts div {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 12px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.profile-facts div:nth-last-child(-n + 2) { border-bottom: 0; }
.profile-facts div:nth-child(2n) { border-right: 0; }
.profile-facts dt { margin: 0; color: var(--atlas-ink-faint); font-size: 9px; white-space: nowrap; }
.profile-facts dd { margin: 0; font-size: 10px; white-space: nowrap; }

.hero-video {
  margin: 0;
  border: 1px solid var(--line2);
  background: var(--atlas-bg-sunken);
}
.hero-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #1a1816;
}

@media (min-width: 761px) {
  .profile-facts div:nth-child(n) { border-bottom: 0; }
  .profile-facts div:not(:last-child) { border-right: 1px solid var(--line); }
  .profile-facts div:nth-child(2n) { border-right: 1px solid var(--line); }
  .profile-facts div:last-child { border-right: 0; }
  .hero-row { grid-template-columns: 1fr 1.15fr; gap: 22px; }
}

@media (max-width: 760px) {
  .doc-head h1 .title-role { font-size: 10px; }
  .profile-facts div { flex-basis: 100%; border-right: 0; }
  .profile-facts div:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .profile-facts div:last-child { border-bottom: 0; }
}

/* Shared visual system adapted from the notebook prototype.
   Kept flat: no gradients, decorative actors, or placeholder media. */
:root {
  --atlas-bg: #e6dcd2;
  --atlas-bg-raised: #eee7df;
  --atlas-bg-sunken: #ddd4c8;
  --atlas-bg-panel: rgba(238, 231, 223, .55);
  --atlas-ink: #0a0a0a;
  --atlas-ink-muted: rgba(10, 10, 10, .55);
  --atlas-ink-faint: rgba(10, 10, 10, .38);
  --atlas-ink-ghost: rgba(10, 10, 10, .20);
  --atlas-ink-soft: #1c1c1c;
  --atlas-accent: #0000aa;
  --atlas-accent-hi: #008181;
  --atlas-accent-soft: rgba(0, 0, 170, .08);
  --atlas-accent-border: #000066;
  --atlas-crit: #8b0000;
  --red: var(--atlas-accent);
  --atlas-warn: #8a5b14;
  --atlas-ok: #1a4d1a;
  --atlas-border: rgba(10, 10, 10, .12);
  --atlas-border-strong: rgba(10, 10, 10, .28);
  --atlas-space-xs: 4px;
  --atlas-space-sm: 8px;
  --atlas-space-compact: 12px;
  --atlas-space-lg: 16px;
  --atlas-space-md: 22px;
  --atlas-space-section: 22px;
  --atlas-space-block: 32px;
  --atlas-space-xl: 56px;
  --fs-h1: 26px;
  --fs-h2: 22px;
  --fs-h3: 17px;
  --fs-h4: 14px;
  --fs-h5: 12px;
  --fs-h6: 11px;
  --fs-body: 12px;
  --fs-code: 11px;
  --fs-table-th: 12px;
  --fs-meta: 9px;
  --fs-status: 8px;
}

:focus-visible { outline: 2px solid var(--atlas-accent); outline-offset: 2px; }

/* Structural rhythm shared by the notebook, indexes, and project records. */
body { font: 12px/1.5 var(--atlas-font-mono); }
body { background-size: 14px 14px; }
.shellbar {
  height: 40px;
  padding-inline: 18px;
  border-bottom-color: var(--atlas-border-strong);
  background: rgba(230, 220, 210, .97);
  font-size: 10px;
}
/* Header uses sparse command labels, not a row of large button controls. */
.shell-id b { color: var(--atlas-ink); }
.shellbar nav {
  position: static;
  isolation: auto;
  height: auto;
  padding: 0;
  gap: 0;
  border: 0;
  background: transparent;
}
.shellbar nav::after { display: none; }
.shellbar nav a,
.shellbar nav a.active {
  height: auto;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--atlas-ink-soft);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  outline: 0;
}
.shellbar nav a:hover,
.shellbar nav a:focus-visible,
.shellbar nav a.active {
  border: 0;
  background: var(--atlas-accent-soft);
  color: var(--atlas-accent);
  outline: 0;
}
.shellbar .nav-divider { color: var(--atlas-ink-ghost); font-size: 9px; }
.rail-links { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--atlas-border); }
.rail-links a { text-decoration: none; }
.tree { margin-block: 18px; padding: 8px 10px; line-height: 1.65; }
main { background: var(--atlas-bg-raised); box-shadow: none; }
.doc-head { padding: 22px 22px 18px; }
.doc-section { padding: 18px 22px 22px; }
.section-label { min-height: 26px; margin-bottom: 10px; }
.section-label h2 { font-size: 14px; }
.section-label em { font-size: 8px; }
.section-label > span { color: var(--atlas-ink-faint); }
.command { padding: 7px 10px; }

/* Grok's tighter data-record language, applied to existing real-content cards. */
.log-table > a { min-height: 60px; padding-block: 8px; }
.project-index > a { min-height: 70px; padding-block: 8px; }
.definition-grid article { min-height: 140px; padding: 10px 14px 14px; }
.definition-grid h3 { margin-bottom: 6px; }
.definition-grid p { min-height: 0; margin-bottom: 8px; }
.meta-block { margin-bottom: 18px; }

/* Commander color tokens are consumed by the canonical notebook layout. */
:root { --vc: #0a0a0a; --vc-hi: #161616; --vc-yellow: #ffff55; }

@media (max-width: 760px) {
  .shellbar { min-height: 40px; padding: 8px 12px; }
  .doc-head, .doc-section { padding: 18px 14px 24px; }
  .section-label { margin-bottom: 14px; }
  .shellbar nav a, .shellbar nav a.active { padding: 5px 8px; }
}

/* Canonical Atlas page geometry.
   Indexes, project records, and long-form articles share this one shell. */
:root {
  --notebook-shell-width: 1360px;
  --notebook-page-edge: 36px;
  --notebook-rail-width: 188px;
  --notebook-meta-width: 176px;
  --notebook-column-gap: 28px;
  --notebook-shell-top: 18px;
  --notebook-shell-bottom: 48px;
  --notebook-record-inset: 28px;
}

/* Keep section headings below the sticky navigation on direct fragment visits. */
html { scroll-padding-top: 48px; }
@media(max-width:760px){
  html { scroll-padding-top: 104px; }
}

/* Seven public destinations remain visible instead of overflowing small screens. */
@media(max-width:1000px){
  .shellbar .shell-status,.article-shellbar .article-shellbar__status{display:none}
}
@media(max-width:760px){
  .shellbar,.article-shellbar{
    height:auto;
    grid-template-columns:minmax(0,1fr);
    row-gap:6px;
  }
  .shellbar nav,.article-shellbar nav{
    grid-column:1;
    min-width:0;
    width:100%;
    height:auto;
    flex-wrap:wrap;
    row-gap:4px;
    margin-top:0;
    overflow:visible;
  }
}

.workspace,
.article-workspace {
  width: min(var(--notebook-shell-width), calc(100vw - var(--notebook-page-edge)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--notebook-rail-width) minmax(0, 1fr) var(--notebook-meta-width);
  gap: var(--notebook-column-gap);
  align-items: start;
  padding: var(--notebook-shell-top) 0 var(--notebook-shell-bottom);
}

.rail,
.article-rail,
.meta-rail,
.article-meta {
  position: sticky;
  top: 52px;
  max-height: calc(100vh - 72px);
  margin-top: 2px;
  overflow: auto;
  color: var(--atlas-ink-muted);
  font: 10px/1.5 var(--atlas-font-mono);
}

.rail ol,
.article-global-nav,
.article-outline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail li a,
.article-global-nav a,
.article-outline li a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  padding: 4px 0;
  color: inherit;
  text-decoration: none;
}

.rail li a:hover,
.rail li a:focus-visible,
.rail li a.active,
.article-global-nav a:hover,
.article-global-nav a:focus-visible,
.article-global-nav a.active,
.article-outline li a:hover,
.article-outline li a:focus-visible,
.article-outline li a.active {
  color: var(--atlas-accent);
  background: var(--atlas-accent-soft);
  box-shadow: inset 2px 0 0 var(--atlas-accent);
  outline: 0;
}

.rail li a span,
.article-global-nav a span,
.article-outline li a span {
  color: var(--atlas-accent);
}

.rail li a b,
.article-global-nav a b,
.article-outline li a b {
  min-width: 0;
  font-weight: 400;
}

.rail li a.active span { font-weight: 700; }
.rail-title,
.meta-block > p,
.article-rail-title,
.article-meta-block > p {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line2, rgba(10, 10, 10, .28));
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.article-rail-context-title,
.project-context-title { margin-top: 22px; }

/* One navigation language for home, indexes, projects, and long-form records. */
.rail,
.article-rail { scrollbar-width: thin; }

.rail ol,
.article-global-nav,
.article-outline { margin-bottom: 16px; }

.rail li a,
.article-global-nav a,
.article-outline li a {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px;
  margin-left: -8px;
  padding: 4px 6px;
  border-left: 2px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--atlas-ink-muted);
  line-height: 1.35;
}

.rail li a:hover,
.rail li a:focus-visible,
.article-global-nav a:hover,
.article-global-nav a:focus-visible,
.article-outline li a:hover,
.article-outline li a:focus-visible {
  border-left-color: var(--atlas-accent-hi);
  background: rgba(0, 129, 129, .06);
  color: var(--atlas-accent-hi);
  box-shadow: none;
  outline: 0;
}

.rail li a.active,
.article-global-nav a.active,
.article-outline li a.active {
  border-left-color: var(--atlas-accent);
  background: var(--atlas-accent-soft);
  color: var(--atlas-accent);
  box-shadow: none;
}

.rail li a span,
.article-global-nav a span,
.article-outline li a span {
  color: var(--atlas-ink-faint);
  font-variant-numeric: tabular-nums;
}

.rail li a.active span,
.article-global-nav a.active span,
.article-outline li a.active span { color: var(--atlas-accent); }

/* Context changes the commands, never the footer-command visual system. */
body > .function-bar {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  height: 32px;
  padding: 3px 10px;
  display: grid;
  gap: 5px;
  border-top: 0;
  background: #0a0a0a;
  color: #fff;
}

body > .function-bar .vc-button {
  min-width: 0;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border: 0;
  background: #161616;
  color: #ddd;
  font: 9px/1.4 var(--atlas-font-mono);
  text-decoration: none;
  cursor: pointer;
}

body > .function-bar .vc-button::after { display: none; }
body > .function-bar .vc-button:hover,
body > .function-bar .vc-button:focus-visible {
  border: 0;
  background: var(--atlas-accent);
  color: #fff;
  outline: 0;
}

body > .function-bar kbd {
  min-width: 25px;
  color: #888;
  font: inherit;
  font-weight: 700;
}

body > .function-bar .vc-button:hover kbd,
body > .function-bar .vc-button:focus-visible kbd { color: #ffff55; }

@media (max-width: 1100px) {
  .workspace,
  .article-workspace {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 18px;
  }

  .meta-rail,
  .article-meta { display: none; }
}

@media (max-width: 760px) {
  .workspace,
  .article-workspace {
    width: calc(100vw - 20px);
    display: block;
    padding-top: 10px;
  }

  .rail,
  .article-rail {
    position: static;
    max-height: none;
    margin: 0 0 12px;
  }

  .rail ol,
  .article-global-nav,
  .article-outline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .rail li a,
  .article-global-nav a,
  .article-outline li a {
    display: block;
    padding-inline: 0;
    box-shadow: none;
  }

  body > .function-bar {
    height: 38px;
    padding: 5px 8px;
    display: flex;
    overflow-x: auto;
  }

  body > .function-bar .vc-button { flex: 0 0 auto; }
  body > .function-bar .vc-button span { display: none; }

  .rail li a span,
  .article-global-nav a span,
  .article-outline li a span {
    display: inline;
    margin-right: 4px;
  }
}

.seo-heading{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}