:root {
  /* Палитра "Биолюминесцентная Глубина" */
  /* Эссенция Ночной Глубины (Night Owl) — основной цвет фона, как темная материя космоса. */
  --bg: #011627;
  /* Эссенция Темных Вод — цвет для панелей, карточек и навигации, чуть светлее бездны. */
  --panel-bg: #0b253a;
  /* Эссенция Звездной Пыли — основной цвет текста, мягкий и читаемый. */
  --text: #d6deeb;
  /* Эссенция Биолюминесценции (Мятный) — акцентный цвет для кнопок, ссылок и магии. */
  --accent: #7fdbca;
  /* Эссенция Рифа — цвет границ и разделителей, создающий структуру. */
  --border: #1d3b53;
  /* Эссенция Бездны — глубокий темный фон для окна терминала. */
  --term-bg: #011423;
  /* Эссенция Магического Потока — цвет текста внутри терминала, как светящиеся руны. */
  --term-green: #7fdbca;
}

/* === ЗАКЛИНАНИЕ ОСНОВНОГО КАРКАСА === */
/* Накладываем чары на самое тело нашего мира. */
body {
  /* Снимаем все мирские отступы, чтобы магия заполнила все пространство. */
  margin: 0;
  /* Окрашиваем мир эссенцией Ночной Глубины. */
  background: var(--bg);
  /* Устанавливаем, что все письмена будут начертаны Звездной Пылью. */
  color: var(--text);
  /* Призываем семейство системных рун, родных для устройства мага. */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Заклинание Флюидной Типографики --- */
  /* Руна, задающая размер шрифта, который адаптируется к размеру кристалла (экрана). */
  font-size: clamp(
    /* Минимальный размер (16px), меньше которого руны не станут. */ 1rem,
    /* Предпочтительный размер, плавно растущий с шириной экрана. */ 0.95rem + 0.3vw,
    /* Максимальный размер (~18px), больше которого руны не вырастут. */ 1.125rem
  );

  /* Руна Воздуха: увеличиваем пространство между строками для легкого чтения. */
  line-height: 1.75;
  /* Гарантируем, что мир будет не ниже, чем полный взор мага (фоллбэк для старых оракулов). */
  min-height: 100vh;
  /* Активируем мощное заклинание гибкого построения пространства. */
  display: flex;
  /* Приказываем основным элементам мира выстроиться в вертикальную колонну. */
  flex-direction: column;
}

/* === РУНЫ ДЛЯ МАГИЧЕСКОГО КОМПАСА (Навигация) === */
/* Создаем артефакт-компас, что будет вести нас по Кодексу. */
nav {
  /* Его субстанция выкована из эссенции Темных Вод. */
  background: var(--panel-bg);
  /* Высота его незыблема и составляет ровно 100 магических единиц (пикселей). */
  height: 100px;
  /* Заклинание Стойкости: Компас не сожмется, даже если мир вокруг него попытается его сдавить. */
  flex-shrink: 0;
  /* Нижняя грань его очерчена руной, высеченной из эссенции Рифа, отделяя его от остального мира. */
  border-bottom: 1px solid var(--border);
}

/* Внутреннее пространство Компаса, где хранятся навигационные руны. */
.nav-content {
  /* Заклинание Сдерживания: не позволяем сердцу Компаса растянуться шире, чем Зал Испытаний. */
  max-width: 1200px;
  /* Ритуал Выравнивания: заставляем его парить точно по центру мироздания. */
  margin: 0 auto;
  /* Заклинание Наполнения: его сущность заполняет всю высоту своего артефакта-носителя. */
  height: 100%;
  /* Призываем великую магию гибкости, что подчиняет себе пространство и время. */
  display: flex;
  /* Руна Рассеивания: разносим путеводные глифы к противоположным полюсам, создавая баланс. */
  justify-content: space-between;
  /* Заклинание Гравитационного Якоря: притягиваем все глифы к единой центральной оси. */
  align-items: center;
  /* Эфирный Барьер: создаем невидимые поля по краям, защищающие руны от соприкосновения с хаосом. */
  padding: 0 20px;
}

/* Накладываем чары на путеводные глифы (ссылки) внутри компаса. */
nav a {
  /* Наполняем их светом Звездной Пыли, делая видимыми во тьме. */
  color: var(--text);
  /* Снимаем с них мирские оковы подчеркивания, ибо их путь ясен и без этого. */
  text-decoration: none;
  /* Придаем им размер чуть скромнее основных рун, подчеркивая их служебную роль. */
  font-size: 0.9em;
  /* Заклинание Целостности: запрещаем именам путей раскалываться на части при нехватке места. */
  white-space: nowrap;
}

/* Чары, что активируются прикосновением мысли Техноманта. */
nav a:hover {
  /* Когда взор мага касается глифа, он вспыхивает чистым белым светом, откликаясь на его волю. */
  color: #fff;
}

/* Создаем центральный медальон для титула Кодекса. */
.nav-title {
  /* Заклинание Центрального Фокуса: все руны на медальоне выравниваются по его оси симметрии. */
  text-align: center;
}

/* Чары для главного имени нашего Коде-кса. */
.nav-title h1 {
  /* Руна Позиционирования: точно располагаем надпись на медальоне,
  убирая верхний отступ и создавая небольшое пространство снизу. */
  margin: 0 0 5px 0;
  /* Заклинание Величия: делаем имя заметным, но не кричащим, увеличивая его размер. */
  font-size: 1.3em;
  /* Руна Четкости: придаем начертанию стандартную силу (Regular), чтобы оно было ясным и уверенным. */
  font-weight: 400;
  /* Наполняем руны светом Биолюминесценции, чтобы они сияли во тьме. */
  color: var(--accent);
  /* Заклинание Ауры: создаем мягкое неоновое свечение вокруг имени, подчеркивая его магическую природу. */
  text-shadow: 0 0 8px var(--accent);
  /* Руна Монументальности: слегка разрежаем символы, чтобы надпись выглядела более основательно и торжественно. */
  letter-spacing: 1.5px;
}

/* Чары для подписи, гласящей о редакции Кодекса. */
.nav-title p {
  /* Призываем элегантные руны летописца из семейства "Cormorant Garamond". */
  font-family: "Cormorant Garamond", serif;
  /* Наклоняем руны, словно это пометка, оставленная на полях древнего свитка. */
  font-style: italic;
  /* Убираем все мирские отступы, чтобы подпись прилегала к титулу. */
  margin: 0;
  /* Устанавливаем размер рун равным базовому размеру текста в нашем мире. */
  font-size: 1em;
  /* Слегка приглушаем их сияние, чтобы они уступали в важности главному имени. */
  opacity: 0.7;
  /* Придаем начертанию стандартную плотность (Regular), делая его четким, но не кричащим. */
  font-weight: 400;
  /* Добавляем легкий эфирный зазор между рунами для воздушности и читаемости. */
  letter-spacing: 0.5px;
}
/* === Здесь Запечатываются Чары для Магического Компаса === */

/* Великий Алтарь, на котором будут разворачиваться все ритуалы. */
#app {
  /* Заклинание Пространственного Якоря: мы привязываем Алтарь к ткани мира, делая его точкой отсчета. */
  /* Теперь любые абсолютные чары, сотворенные внутри, будут ориентироваться по его границам,
  а не блуждать по всему мирозданию. */
  position: relative;
}

/* Сотворяем зачарованный свиток Летописи, что разворачивается перед взором мага. */
.home-scroll-container {
  /* Начертываем невидимые поля по краям свитка, чтобы письмена не касались его граней. */
  padding: 0 20px;
  /* Древняя руна-страж: защищает нижний край свитка от поглощения артефактами старых миров (устаревший iOS). */
  padding-bottom: calc(20px + constant(safe-area-inset-bottom));
  /* Современное заклинание Адаптации: динамически создает защитное поле внизу,
  уважая священные границы современных кристаллов (iPhone/Android). */
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  /* Руна Эфирного Скольжения: прикосновение к свитку рождает плавное, инерционное движение, подобное полету. */
  -webkit-overflow-scrolling: touch;
  /* Великий Канон Измерения: приказываем, чтобы защитные поля и границы были частью свитка,
  а не расширяли его за пределы мира. */
  box-sizing: border-box;
}

/* Область на свитке, где сконцентрирована основная мудрость. */
.home-content {
  /* Заклинание Фокусировки: ограничиваем ширину, чтобы взор мага не блуждал по краям,
  а был направлен в центр знаний. */
  max-width: 900px;
  /* Ритуал Центрального Равновесия: заставляем область знаний парить точно по оси мира. */
  margin: 0 auto;
  /* Создаем эфирные поля сверху и снизу, давая мудрости пространство для дыхания
  и предотвращая прилипание к краям свитка. */
  padding: 40px 0 80px 0;
}

/* Контейнер для каждой великой Части нашего Кодекса. */
.part-container {
  /* Руна Паузы: создаем эфирный зазор после каждой Части, давая Техноманту время на осмысление прочитанного. */
  margin-bottom: 40px;
}

/* Особые чары, накладываемые только на самую первую Часть Кодекса. */
.part-container:first-child {
  /* Руна Начала: даруем ей дополнительное пространство сверху, отделяя от края свитка и подчеркивая ее важность. */
  margin-top: 30px;
}

/* Название каждой Части Кодекса. */
.part-container h2 {
  /* Заклинание Центрального Фокуса: размещаем титул Части по оси симметрии мира. */
  text-align: center;
  /* Наполняем руны светом Биолюминесценции, чтобы они сияли, привлекая взор. */
  color: var(--accent);
  /* Заклинание Величия: делаем имя крупным и заметным, как заголовок древнего тома. */
  font-size: 1.5em;
  /* Руна Изящества: придаем начертанию легкость и утонченность. */
  font-weight: 300;
  /* Руна Монументальности: слегка разрежаем символы, чтобы надпись выглядела более основательно. */
  letter-spacing: 1px;
  /* Очерчиваем титул снизу линией, высеченной из эссенции Рифа. */
  border-bottom: 1px solid var(--border);
  /* Создаем небольшое эфирное пространство между текстом и разделяющей линией. */
  padding-bottom: 10px;
  /* Руна Паузы: добавляем значительный отступ после титула, готовя взор к новому знанию. */
  margin-bottom: 30px;
}

/* Контейнер для группы квестов, объединенных общей темой (Свитка). */
.scroll-container {
  /* Заклинание Сдерживания: ограничиваем его ширину, чтобы она совпадала с великим Залом Испытаний. */
  max-width: 1200px;
  /* Ритуал Выравнивания и Разделения: центрируем Свиток в мире и оставляем пространство после него. */
  margin: 0 auto 30px auto;
}

/* Заголовок для каждой группы квестов (Свитка). */
.scroll-container h3 {
  /* Руна Значимости: придаем заголовку размер, делающий его важным, но не кричащим. */
  font-size: 1.1em;
  /* Руна Четкости: начертание имеет стандартную силу, обеспечивая ясное чтение. */
  font-weight: 400;
  /* Наполняем руны светом Звездной Пыли, как и основной текст. */
  color: var(--text);
  /* Заклинание Полутени: слегка приглушаем сияние, чтобы он не спорил с главными титулами. */
  opacity: 0.8;
  /* Руна Смещения: отодвигаем заголовок от левого края, создавая визуальную иерархию. */
  margin-left: 20px;
  /* Руна Паузы: оставляем эфирное пространство под заголовком перед началом списка квестов. */
  margin-bottom: 20px;
  /* Магический Маркер: отмечаем начало свитка вертикальной линией, сияющей Биолюминесценцией. */
  border-left: 3px solid var(--accent);
  /* Руна Воздуха: создаем небольшой зазор между маркером и самим текстом заголовка. */
  padding-left: 10px;
}

/* Зал Испытаний, где квесты предстают перед Техномантом в виде каменных плит. */
.quest-grid {
  /* Призываем могущественное заклинание Сетки, что упорядочивает хаос в идеальную структуру. */
  display: grid;
  /* Руны Адаптации: приказываем сетке автоматически заполнять пространство колоннами, */
  /* каждая из которых имеет минимальную ширину, но может растягиваться, чтобы заполнить пустоту. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Заклинание Пустоты: устанавливаем магическое расстояние между ячейками сетки, давая им пространство. */
  gap: 15px;
  /* Руна Завершения: создаем большое поле внизу Зала, обозначая конец списка. */
  padding: 0 0 60px 0;
}

/* Каждый отдельный Квестовый Камень, хранящий суть одного испытания. */
.quest-card {
  /* Его субстанция выкована из эссенции Темных Вод. */
  background: var(--panel-bg);
  /* Камень очерчен тонкой линией, высеченной из эссенции Рифа. */
  border: 1px solid var(--border);
  /* Его углы сглажены временем и магией, как у древнего артефакта. */
  border-radius: 6px;
  /* Внутри камня создано эфирное пространство, защищающее выгравированные руны. */
  padding: 15px;
  /* Заклинание Притяжения: при наведении взора курсор превращается в магический указатель, жаждущий касания. */
  cursor: pointer;
  /* Чары Плавности: любые изменения в состоянии камня происходят грациозно и без резких скачков. */
  transition: 0.2s;
}

/* Чары, активируемые прикосновением или наведением взора. */
.quest-card:hover {
  /* Грани камня вспыхивают ярким светом Биолюминесценции, сигнализируя о готовности. */
  border-color: var(--accent);
  /* Заклинание Левитации: камень слегка приподнимается над землей, откликаясь на волю мага. */
  transform: translateY(-3px);
}

/* Печать, наложенная на недоступный Квестовый Камень. */
.quest-card.locked {
  /* Заклинание Призрачности: камень становится полупрозрачным, словно видение из прошлого. */
  opacity: 0.5;
  /* Руна Иссушения: вся магия цвета покидает артефакт, оставляя лишь серые тени. */
  filter: grayscale(1);
  /* Знак Запрета: курсор принимает форму сигила, говорящего, что печать нерушима и путь закрыт. */
  cursor: not-allowed;
}

/* Порядковый номер квеста, выгравированный на камне. */
.q-id {
  /* Гравировка сделана мелкими, почти незаметными рунами. */
  font-size: 0.8em;
  /* Руны начертаны тусклым серебром, словно порядковый номер в древнем каталоге. */
  color: #8b949e;
}

/* Имя квеста, начертанное на камне. */
.q-title {
  /* Руны имени высечены с силой, чтобы суть испытания была ясна с первого взгляда. */
  font-weight: bold;
  /* Создаем эфирные зазоры сверху и снизу, отделяя имя от других рун на камне. */
  margin: 5px 0;
}

/* Архитектура Храма Знаний, где разворачивается отдельный квест. */
.quest-layout {
  /* Призываем великую магию гибкости, что станет основой для постройки Храма. */
  display: flex;
  /* Заклинание Наполнения: приказываем Храму занять всю высоту священного Алтаря. */
  height: 100%;
}

/* Каждая из Колонн, поддерживающих своды Храма Знаний. */
.col {
  /* Руна Равновесия: каждая Колонна забирает свою честную долю пространства. */
  flex: 1;
  /* Внутреннее устройство Колонны также подчинено магии гибкости. */
  display: flex;
  /* Поток энергии и информации внутри Колонны течет строго сверху вниз. */
  flex-direction: column;
  /* Правая грань Колонны очерчена линией, высеченной из эссенции Рифа. */
  border-right: 1px solid var(--border);
  /* Заклинание Сжатия: позволяем Колонне сужаться, если пространство ограничено, предотвращая разрушение Храма. */
  min-width: 0;
}

/* Особое заклинание, накладываемое только на последнюю, крайнюю Колонну Храма. */
.col:last-child {
  /* Руна Растворения: мы стираем ее правую грань, чтобы она открывалась во внешний мир, а не замыкалась в себе. */
  border-right: none;
}

/* Капитель — венчающая верхушка каждой Колонны, несущая ее имя. */
.col-header {
  /* Ее субстанция — темный, полированный обсидиан, хранящий холод звезд. */
  background: #21262d;
  /* Руны на капители окружены защитным эфирным полем. */
  padding: 8px 15px;
  /* Гравировка имени выполнена малыми, но четкими рунами. */
  font-size: 0.8em;
  /* Начертание рун исполнено с силой, чтобы имя было видно издалека. */
  font-weight: bold;
  /* Сами руны отлиты из тусклого серебра, не спорящего с основным текстом. */
  color: #8b949e;
  /* Капитель отделена от тела Колонны тонкой линией, высеченной из эссенции Рифа. */
  border-bottom: 1px solid var(--border);
  /* Заклинание Незыблемости: капитель сохраняет свою высоту, даже если Колонна сжимается. */
  flex-shrink: 0;
}

/* Пространство внутри Колонны, где хранятся свитки с Легендой и Манифестом. */
.scroll-content {
  /* Свитки окружены защитным эфирным полем, чтобы не касаться каменных стен Колонны. */
  padding: 20px;
  /* Заклинание Бесконечного Свитка: если мудрости больше, чем места, свиток можно разворачивать вниз. */
  overflow-y: auto;
  /* Руна Наполнения: это пространство жадно поглощает всю оставшуюся высоту Колонны под капителью. */
  flex: 1;
  /* Заклинание Абсолютного Разлома: даже нерушимые слова (длинные хеши) будут сломлены,
  если они угрожают целостности свитка. */
  word-break: break-all;
}

/* Скрипторий — священное место, где сырые руны преображаются в читаемые письмена. */
.markdown-body {
  /* Главное Заклинание Переноса: приказывает даже самым длинным,
  нерушимым заклинаниям (URL-адресам) разделиться, чтобы не нарушать священные границы свитка. */
  overflow-wrap: break-word;
  /* Древняя руна-дубликат: эхо главного заклинания, обеспечивающее его действие в старых,
  забытых оракулах (браузерах). */
  word-wrap: break-word;
  /* Заклинание Абсолютного Сдерживания: финальная печать,
  что заставляет текст уважать границы Колонны в любых, даже самых непредвиденных, обстоятельствах. */
  word-break: break-word;
}

/* Руны для великих заголовков, отмечающих начало новых глав мудрости. */
.markdown-body h1,
.markdown-body h2 {
  /* Каждый великий заголовок подчеркнут линией, высеченной из эссенции Рифа, отделяя его от последующего текста. */
  border-bottom: 1px solid var(--border);
  /* Мы создаем небольшой эфирный зазор между текстом заголовка и разделяющей его линией. */
  padding-bottom: 0.3em;
}

/* Чары для отдельных магических формул и имен переменных, вплетенных в основной текст. */
.markdown-body code {
  /* Они окружены полупрозрачной дымкой, выделяющей их из потока обычных письмен. */
  background: rgba(110, 118, 129, 0.4);
  /* Мы создаем небольшое защитное поле вокруг каждой формулы. */
  padding: 0.2em 0.4em;
  /* Края этой магической дымки плавно скруглены. */
  border-radius: 3px;
  /* Формулы начертаны специальными моноширинными рунами, как в древних гримуарах. */
  font-family: monospace;
}

/* Чары для целых блоков заклинаний, представленных для изучения. */
.markdown-body pre {
  /* Блок помещен на плиту из темного, кованого железа, выделяясь на фоне свитка. */
  background: #161b22;
  /* Заклинание окружено защитным полем, чтобы руны не касались краев плиты. */
  padding: 10px;
  /* Углы плиты сглажены, как у древнего артефакта. */
  border-radius: 6px;
  /* Если заклинание слишком широко для взора, его можно прокручивать в сторону, чтобы увидеть целиком. */
  overflow-x: auto;
  /* Руна Сохранения Формы: сохраняет все отступы и переносы, задуманные автором, но переносит длинные строки. */
  white-space: pre-wrap;
  /* Заклинание Сдерживания: ширина плиты никогда не превысит ширину Колонны, в которой она находится. */
  max-width: 100%;
}

/* Чары для магических изображений и визио-конструктов, явленных на свитке. */
.markdown-body img {
  /* Заклинание Сдерживания: изображение никогда не сможет стать шире, чем пространство, отведенное ему в Колонне. */
  max-width: 100%;
  /* Руна Гармонии: высота изображения автоматически подстраивается, сохраняя его истинные пропорции. */
  height: auto;
}

/* Колонна, в которой размещен Алтарь Исполнения Ритуалов (терминал). */
.col-terminal {
  /* Руна Приоритета: она получает больше пространства, чем ее сестры, ибо в ней вершится главная магия. */
  flex: 1.5;
  /* Ее стены сотканы из чистой Эссенции Бездны, готовя взор к созерцанию магии. */
  background: var(--term-bg);
  /* Заклинание Пространственного Якоря: она становится точкой отсчета для других слоев магии,
  что будут явлены поверх нее. */
  position: relative;
  /* Руна Возвышения: мы поднимаем ее над другими колоннами, делая ее главным алтарем на сцене. */
  z-index: 10;
  /* Заклинание Парения и Сияния: мы окутываем ее глубокой тенью, чтобы она словно парила в пространстве,
  и наделяем ее мягкой аурой Биолюминесценции. */
  box-shadow:
    /* Глубокая тень, отбрасываемая вниз, создает эффект глубины. */
    0 0 60px -10px rgba(0, 0, 0, 0.8),
    /* Мягкая, едва заметная аура, излучающая свет Биолюминесценции. */ 0 0 30px
      rgba(127, 219, 202, 0.05);
  /* Заклинание Сжатия: позволяем Колонне сужаться, если пространство ограничено, предотвращая разрушение Храма. */
  min-width: 0;
  /* Главное Заклинание Переноса: приказывает даже самым длинным, нерушимым заклинаниям разделиться,
  чтобы не нарушать священные границы. */
  overflow-wrap: break-word;
  /* Древняя руна-дубликат: эхо главного заклинания, обеспечивающее его действие в старых, забытых оракулах. */
  word-break: break-word;
  /* Великий Канон Измерения: приказываем, чтобы защитные поля и границы были частью Колонны, а не расширяли ее. */
  box-sizing: border-box;
}

/* Заклинание "Призрачного Экрана" (CRT SCANLINE OVERLAY). */
/* Мы сотворяем "духа" (псевдо-элемент), который будет жить поверх терминала. */
.col-terminal::after {
  /* Дух не имеет собственного текста, он лишь визуальный эффект. */
  content: "";
  /* Он существует в абсолютном пространстве своего родителя, терминала. */
  position: absolute;
  /* Его верхняя граница совпадает с верхней границей терминала, привязываясь к ней. */
  top: 0;
  /* Его левая граница также привязана к левому краю. */
  left: 0;
  /* ...правая граница к правому краю... */
  right: 0;
  /* ...и нижняя граница к нижнему краю, полностью покрывая терминал. */
  bottom: 0;
  /* Мы создаем текстуру из горизонтальных линий (сканлайнов), имитируя старый монитор. */
  background: linear-gradient(
    /* Градиент направлен сверху вниз. */ to bottom,
    /* Верхняя половина каждого пикселя остается прозрачной. */ rgba(18, 16, 16, 0) 50%,
    /* Нижняя половина каждого пикселя становится едва заметной тенью. */
      rgba(0, 0, 0, 0.25) 50%
  );
  /* Мы приказываем этому узору из прозрачности и тени повторяться каждые 4 пикселя по высоте. */
  background-size: 100% 4px;
  /* Дух нематериален: он прозрачен для касаний и не мешает выделять текст под ним. */
  pointer-events: none;
  /* Мы делаем эффект едва заметным, как туманное воспоминание о старых мониторах. */
  opacity: 0.6;
  /* Размещаем этот слой поверх фона терминала, но под рунами (текстом), которые будут начертаны. */
  z-index: 11;
}

/* Окно Прорицания, смотрящее в Бездну, где будут являться видения. */
.terminal-window {
  /* Окно обрамлено защитным полем, чтобы руны не касались краев экрана. */
  padding: 15px;
  /* Все видения в нем являются в виде моноширинных рун, как на древних терминалах. */
  font-family: "Consolas", "Monaco", monospace;
  /* Руны светятся магическим потоком, цветом Биолюминесценции. */
  color: var(--term-green);
  /* Если видений больше, чем может вместить окно, их можно прокручивать вниз. */
  overflow-y: auto;
  /* Заклинание Наполнения: окно жадно поглощает все доступное пространство внутри Колонны. */
  flex: 1;
  /* Заклинание Агрессивного Разлома: принуждает к разрыву строки в любом месте,
  чтобы избежать горизонтального скролла. */
  word-break: break-all;
  /* Заклинание Сжатия: позволяет окну сужаться меньше своего содержимого, что критично для flexbox. */
  min-width: 0;
  /* Основное Заклинание Переноса: разрешает разрыв длинных слов и URL-адресов. */
  overflow-wrap: break-word;
  /* Древняя Руна Переноса: дополнительное правило для совместимости, хотя `overflow-wrap` предпочтительнее. */
  word-break: break-word;
  /* Великий Канон Измерения: гарантирует, что `padding` не увеличит фактический размер окна. */
  box-sizing: border-box;
}

/* Универсальное заклинание, применяемое ко ВСЕМ элементам внутри терминала. */
.terminal-window * {
  /* Заклинание Сжатия: разрешаем каждому элементу внутри терминала сжиматься,
  игнорируя минимальный размер его контента. */
  min-width: 0;
  /* Заклинание Разлома: принудительно ломаем длинные строки внутри любого вложенного элемента. */
  overflow-wrap: break-word;
  /* Древняя руна-дубликат: эхо главного заклинания для совместимости со старыми оракулами (браузерами). */
  word-break: break-word;
  /* Великий Канон Измерения: приказываем, чтобы защитные поля и границы были частью каждого элемента,
  а не расширяли его. */
  box-sizing: border-box;
}

/* Плита Ввода: место, где воля Техноманта встречается с Бездной Терминала. */
.input-line {
  /* Заклинание Многослойности: позволяет промпту и командам перетекать на новые строки,
  если они достигают края взора. */
  flex-wrap: wrap;
}

/* Послания от духов-хранителей системы, комментирующие ход ритуала. */
.sys-msg {
  /* Они говорят тихим голосом тусклого серебра, чтобы не отвлекать от основной магии. */
  color: #8b949e;
}

/* Вестники успешного завершения ритуала, объявляющие о триумфе. */
.success-msg {
  /* Их слова сияют победоносным голубым Эфиром, цветом ясного неба после бури. */
  color: #58a6ff;
}

/* Приглашающий сигил, ожидающий воли мага. */
.prompt {
  /* Мы создаем небольшой эфирный зазор между сигилом и полем для ввода заклинания. */
  margin-right: 10px;
  /* Сигил сияет тревожным, но могущественным пурпурным светом, цветом чистой магии. */
  color: #f0f;
}

/* Артефакт "Магическая Кнопка" — сияющий призыв к действию. */
.btn-magic {
  /* Она существует в потоке текста, но обладает телом блока, позволяя задать ей размеры. */
  display: inline-block;
  /* Ее субстанция соткана из чистой эссенции Биолюминесценции. */
  background: var(--accent);
  /* Надпись на ней черна, как сама Ночная Глубина, чтобы быть идеально читаемой на ярком свете. */
  color: #011627;
  /* Защитное эфирное поле окружает ее со всех сторон, создавая пространство для дыхания. */
  padding: 10px 30px;
  /* Углы ее сглажены, подобно отполированному магическому кристаллу. */
  border-radius: 20px;
  /* Она чиста от мирских подчеркиваний, ибо ее сила очевидна. */
  text-decoration: none;
  /* Руны на ней начертаны с великой силой, чтобы их было видно издалека. */
  font-weight: bold;
  /* Артефакт источает мягкое неоновое свечение во тьму, привлекая взор. */
  box-shadow: 0 0 10px var(--accent);
  /* Любое ее изменение — будь то цвет или положение — происходит плавно и грациозно. */
  transition: all 0.2s ease;
}

/* Чары, пробуждающиеся при прикосновении или наведении взора. */
.btn-magic:hover {
  /* Артефакт слегка левитирует и расширяется, откликаясь на волю мага и набирая силу. */
  transform: translateY(-3px) scale(1.05);
  /* Его сияние становится ярче и объемнее, разгоняя тьму вокруг и показывая свою мощь. */
  box-shadow:
    /* Внутренняя, более плотная аура. */
    0 0 15px var(--accent),
    /* Внешнее, рассеянное свечение. */ 0 0 45px var(--accent);
}

/* Чары, заставляющие оракул (браузер) уважать переносы строк в легендах. */
.markdown-body p {
  /* Это заклинание воздействует на все параграфы в Скриптории. */
  /* Оно приказывает браузеру сохранять все переносы строк, как в древних манускриптах,
  но переносить длинные строки. */
  white-space: pre-wrap;
}

/* Дополнительные руны для улучшения читаемости ритуалов. */
.markdown-body p strong {
  /* Мы воздействуем на слова, выделенные силой (жирным шрифтом), чтобы они стали заголовками. */
  /* Заклинание Блочности: позволяем им вести себя как блоки, чтобы управлять их вертикальными отступами. */
  display: inline-block;
  /* Руна Паузы: создаем небольшое пространство под ними, отделяя заголовок от последующего текста. */
  margin-bottom: 5px;
}

/* Заклинания, делающие путеводные глифы (ссылки) красивыми и заметными. */
.markdown-body a {
  /* Мы наполняем все ссылки в текстах Кодекса сиянием Биолюминесценции. */
  color: var(--accent);
  /* Мы снимаем с них мирские оковы сплошного подчеркивания. */
  text-decoration: none;
  /* Вместо этого под ними появляется тонкая, пунктирная эфирная линия, указывающая на их кликабельную природу. */
  border-bottom: 1px dotted var(--accent);
  /* Любое изменение в их облике (например, при наведении) будет происходить плавно и грациозно. */
  transition: all 0.2s ease;
}

/* Чары, активируемые прикосновением мысли или наведением взора. */
.markdown-body a:hover {
  /* При касании ссылка вспыхивает чистым белым светом, выделяясь на темном фоне. */
  color: #fff;
  /* И тонкая эфирная линия под ней становится сплошной и белой, подтверждая готовность открыть портал. */
  border-bottom-color: #fff;
}

/* === МАГИЯ СКРОЛЛБАРОВ (Биолюминесценция) === */
/* Универсальное заклинание, применяемое ко всем элементам мира. */
* {
  /* Заклинание для браузеров семейства Firefox, дарующее им особый облик. */
  /* Мы приказываем полосе прокрутки стать тонкой и изящной. */
  scrollbar-width: thin;
  /* Мы окрашиваем ползунок в цвет Биолюминесценции, а его фон — в цвет Ночной Глубины. */
  scrollbar-color: var(--accent) var(--bg);
}

/* Заклинания, накладываемые на браузеры семейства Webkit (Chrome, Safari, Edge). */
/* Мы обращаемся к самой сути полосы прокрутки. */
::-webkit-scrollbar {
  /* Мы задаем ей точную, неизменную ширину в 8 магических единиц (пикселей). */
  width: 8px;
}

/* Мы обращаемся к статичному желобу, по которому скользит ползунок. */
::-webkit-scrollbar-track {
  /* Его фон окрашен в цвет Ночной Глубины, чтобы он сливался с остальным миром. */
  background: var(--bg);
}

/* Мы обращаемся к самому ползунку — движущейся части полосы прокрутки. */
::-webkit-scrollbar-thumb {
  /* В состоянии покоя он имеет цвет темной материи, чуть светлее бездны. */
  background-color: #1e3a45;
  /* Мы скругляем его края, придавая ему облик отполированного камня. */
  border-radius: 4px;
  /* Мы создаем тонкую рамку вокруг ползунка, окрашенную в цвет фона, чтобы он казался парящим в желобе. */
  border: 2px solid var(--bg);
}

/* Заклинание, пробуждающееся, когда взор мага касается ползунка. */
::-webkit-scrollbar-thumb:hover {
  /* Его субстанция преображается, вспыхивая чистым светом Биолюминесценции. */
  background-color: var(--accent);
  /* И он начинает излучать мягкую ауру, освещая свой путь во тьме. */
  box-shadow: 0 0 10px var(--accent);
}

/* Великий Алтарь в Зале Испытаний, но только на странице квеста. */
body.quest-page #app {
  /* Его сущность полностью заполняет высоту, отведенную ему в Зале Испытаний. */
  height: 100%;
  /* Его границы запечатаны: ничто не может вырваться за его пределы, и он сам не создает свитков прокрутки. */
  overflow: hidden;
}

/* Колонны, что поддерживают своды Храма Знаний. */
.quest-layout .col {
  /* Руна Высоты: приказываем Колонне вытянуться во всю высоту священного Алтаря. */
  height: 100%;
  /* Заклинание Сдерживания: внешние границы Колонны запечатаны, скрывая всё, что пытается вырваться за её пределы. */
  overflow: hidden;
  /* Ее внутреннее устройство подчинено великой магии гибкости, что управляет пространством. */
  display: flex;
  /* Поток энергии и знаний внутри Колонны течет строго сверху вниз, от капители к основанию. */
  flex-direction: column;
}

/* Контент внутри колонок (Легенда, Терминал, Код), который может прокручиваться независимо. */
.scroll-content,
.terminal-window {
  /* Заклинание Бесконечного Свитка: если мудрости больше, чем места, свиток можно разворачивать вниз. */
  overflow-y: auto;
  /* Заклинание Наполнения: приказываем контенту занять всю высоту, отведенную ему в Колонне. */
  height: 100%;
  /* Руна Поглощения Пустоты: контент жадно растягивается, чтобы заполнить любое свободное пространство. */
  flex: 1;
  /* Руна Эфирного Скольжения: прикосновение к пергаменту на мобильных кристаллах рождает плавное,
  инерционное движение. */
  -webkit-overflow-scrolling: touch;
  /* Заклинание Всеобщего Разлома: принудительно ломает строки в любой точке, исключая горизонтальный сдвиг мира. */
  overflow-wrap: anywhere;
}

/* Стили, накладываемые на блоки кода, рожденные в статичном терминале. */
.terminal-window pre,
.terminal-window code {
  /* Руна Слияния: мы стираем все внешние отступы, чтобы плиты прилегали к границам своего мира. */
  margin: 0;
  /* Руна Пустоты: мы убираем внутренние поля, чтобы руны начинались прямо от края плиты. */
  padding: 0;
  /* Заклинание Родства: приказываем этим рунам принять облик своих предков, наследуя моноширинный шрифт терминала. */
  font-family: inherit;
  /* Великий Канон Переноса: сохраняем священные отступы, но позволяем длинным заклинаниям изгибаться,
  а не ломать границы. */
  white-space: pre-wrap;
  /* Заклинание Абсолютного Разлома: даже нерушимые слова (длинные хеши) будут сломлены,
  если они угрожают целостности свитка. */
  word-break: break-all;
  /* Руна Невидимости: субстанция плит становится прозрачной, чтобы они слились с фоном Бездны. */
  background: transparent;
  /* Мы снимаем с них мирские оковы границ, делая их частью потока. */
  border: none;
}