/*
  NEW EDEN FIELD MANUAL // MAIN STYLESHEET
  =========================================

  Как работать с этим файлом:
  - Цвета и базовые размеры сайта меняются в :root.
  - Главная страница начинается в секции HOME / MAIN HUD.
  - Общие стили статей находятся в ARTICLE PAGES.
  - Для новой статьи обычно НЕ нужно писать новые стили.
  - Если нужна уникальная hero-картинка, добавь только новый класс вида:

      .my-guide-hero {
        background-image:
          linear-gradient(90deg, rgba(5,6,6,.76), rgba(5,6,6,.18)),
          url('../img/my-guide-cover.png');
      }

  В HTML затем используй:
      <section class="article-hero my-guide-hero">
*/

/* ==========================================================
   01 // DESIGN TOKENS
   Общая палитра, максимальная ширина и системные цвета.
   Меняя переменные здесь, можно быстро перекрасить весь сайт.
   ========================================================== */
:root {
  /* Основной тёмный фон страницы. */
  --bg: #090a09;          /* базовый чёрно-зелёный фон */
  --panel: rgba(12, 14, 13, 0.94); /* фон HUD-панелей */
  --panel-soft: rgba(15, 17, 16, 0.88);
  --line: #4c483d;        /* основная рамка панелей */
  --line-soft: #2a2d2a;
  --text: #b7b2a7;
  --bright: #e5dccb;
  --muted: #736e66;
  --amber: #d39a49;       /* основной янтарный акцент */
  --amber-soft: #8d6433;
  --green: #86d578;       /* ONLINE / безопасный статус */
  --red: #a64e3d;         /* WARNING / опасность */
  --cyan: #6fa1a3;        /* INTEL / информационные блоки */
  --max: 1600px;          /* максимальная ширина главной страницы */
}

/* ==========================================================
   02 // RESET + PAGE BACKGROUND
   Базовый box-sizing, фон, сетка и scanline-эффект.
   ========================================================== */
* { box-sizing: border-box; }
html { background: #060706; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: .02em;
  background:
    radial-gradient(circle at 78% 8%, rgba(171, 121, 58, .18), transparent 24rem),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    #070807;
  background-size: auto, 32px 32px, 32px 32px, auto;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px);
  z-index: 100;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ==========================================================
   03 // SHARED HUD COMPONENTS
   Общая оболочка сайта, рамки панелей и системные элементы.
   ========================================================== */
.shell {
  width: min(calc(100% - 24px), var(--max));
  margin: 12px auto;
  min-height: calc(100vh - 24px);
}

.panel-frame,
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(116, 86, 48, .06), rgba(0,0,0,.04)), var(--panel);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.012);
}

/* ==========================================================
   04 // HOME / MASTHEAD
   Верхняя панель главной: логотип, космический фон, status box.
   ========================================================== */
.masthead {
  position: relative;
  overflow: hidden;
  min-height: 146px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 300px 1fr 225px 120px;
  align-items: center;
  gap: 18px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.48) 38%, rgba(0,0,0,.22) 66%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.04)),
    url('../img/langisi.webp') center right / cover no-repeat,
    var(--panel);
}
.masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 86% 34%, rgba(255, 223, 177, .12), transparent 13rem);
}
.logo-block,
.quote,
.connection-box,
.top-nav { position: relative; z-index: 2; }

.eve-wordmark {
  font-size: 62px;
  line-height: .74;
  letter-spacing: .12em;
  color: #d7c3a6;
  font-weight: 700;
}
.manual-title,
.manual-sub,
.quote,
.connection-box,
.top-nav,
.panel-head,
.status-panel,
.rail-quote,
.version,
.feature-title,
.feature small,
.latest a,
.links a,
.pilot-note-body p,
.tickerbar,
.kicker,
.tagline,
.mascot-caption,
.disclaimer,
.article-top,
.article-copy h1,
.article-copy h2,
.intel-strip,
.warning,
.article-side,
.nav-panel a,
.status-line,
.breadcrumb {
  font-family: "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}
.manual-title {
  font-size: 21px;
  letter-spacing: .24em;
  margin-top: 14px;
  color: #cdbca7;
}
.manual-sub {
  margin-top: 16px;
  font-size: 9px;
  letter-spacing: .24em;
  color: #6f685f;
}
.quote {
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .13em;
  color: #82786d;
}
.quote span { color: #666057; }
.connection-box {
  align-self: start;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(8, 10, 9, .82);
  font-size: 10px;
  line-height: 1.7;
}
.connection-box b { color: var(--green); }
.top-nav {
  display: grid;
  gap: 6px;
  font-size: 10px;
  color: #918578;
}
.top-nav a:hover { color: var(--amber); }
.lamp {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
}
.green { background: var(--green); box-shadow: 0 0 8px rgba(134, 213, 120, .8); }

/* ==========================================================
   05 // HOME / FOUR-COLUMN HUD GRID
   4 колонки: navigation / mascot / content / latest articles.
   ========================================================== */
.main-grid {
  display: grid;
  grid-template-columns: 230px 430px minmax(500px, 1fr) 280px;
  gap: 0;
  margin-top: 14px;
  align-items: start;
}
.left-rail,
.right-rail {
  display: grid;
  gap: 12px;
}
.right-rail { margin-left: 14px; }

.panel-head {
  height: 42px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .15em;
  color: #bdb3a6;
  background: rgba(255,255,255,.012);
}
.nav-panel nav { display: grid; padding: 5px; }
.nav-panel a {
  padding: 11px 12px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,.03);
  color: #8f8880;
  font-size: 10px;
  letter-spacing: .09em;
}
.nav-panel a:hover,
.nav-panel a.active {
  background: rgba(211,154,73,.08);
  color: var(--bright);
  border-left-color: var(--amber);
}

.status-panel { padding-bottom: 10px; }
.status-line {
  padding: 12px;
  color: var(--green);
  font-size: 13px;
  letter-spacing: .13em;
}
.status-panel dl {
  margin: 0;
  padding: 0 12px;
  display: grid;
  gap: 8px;
  font-size: 10px;
  color: #787169;
}
.status-panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.status-panel dt,
.status-panel dd { margin: 0; }

.rail-quote {
  margin: 2px 14px 0;
  color: #766f67;
  font-size: 10px;
  line-height: 1.7;
}
.mascot-id-small {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  overflow: hidden;
}
.mascot-id-small img {
  width: 80px;
  height: 90px;
  object-fit: cover;
  object-position: 50% 16%;
  filter: saturate(.8) contrast(1.04) brightness(.78);
}
.mascot-id-small div {
  padding: 12px;
  font-size: 11px;
  line-height: 1.6;
}
.mascot-id-small span { color: var(--amber); }
.version {
  padding: 0 12px;
  color: #55524d;
  font-size: 9px;
}

/* ==========================================================
   06 // HOME / MASCOT 07
   Большой арт маскота. object-position регулирует кадрирование.
   ========================================================== */
.mascot-stage {
  position: relative;
  overflow: hidden;
  min-height: 840px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 54% 34%, rgba(177,123,60,.09), transparent 30rem),
    #090b0b;
}
.mascot-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.24), transparent 30%, transparent 76%, rgba(0,0,0,.34)),
    radial-gradient(circle at 50% 72%, rgba(0,0,0,.03), rgba(0,0,0,.46));
}
.mascot-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 47% 34%;
  filter: saturate(.88) contrast(1.06) brightness(.72) sepia(.08);
}
.mascot-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 58% 32%, rgba(230, 169, 81, .20), transparent 22rem);
  z-index: 3;
  mix-blend-mode: screen;
}
.mascot-caption {
  position: absolute;
  right: 12px;
  top: 28px;
  width: 175px;
  padding: 12px;
  z-index: 4;
  border: 1px solid var(--amber-soft);
  background: rgba(18,16,12,.92);
  box-shadow: -10px 10px 0 -9px var(--amber);
  font-size: 10px;
  line-height: 1.55;
}
.mascot-caption::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 46px;
  border-width: 7px 12px 7px 0;
  border-style: solid;
  border-color: transparent var(--amber-soft) transparent transparent;
}
.mascot-caption::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 47px;
  border-width: 6px 10px 6px 0;
  border-style: solid;
  border-color: transparent rgba(18,16,12,.92) transparent transparent;
}
.mascot-caption span {
  display: block;
  margin-bottom: 8px;
  color: #8d8377;
}
.mascot-caption b {
  font-weight: 400;
  color: #cec0ad;
}
.mascot-caption small {
  display: block;
  margin-top: 16px;
  color: #b89a6b;
}

/* ==========================================================
   07 // HOME / KNOWLEDGE DATABASE
   Центральная панель и карточки разделов.
   ========================================================== */
.welcome {
  position: relative;
  overflow: hidden;
  min-height: 690px;
}
.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,5,6,.12), rgba(4,5,6,.78)),
    linear-gradient(90deg, rgba(4,5,6,.10), rgba(4,5,6,.62) 58%),
    url('../img/header-orbit.png') center center / cover no-repeat;
  opacity: .24;
}
.welcome-inner {
  position: relative;
  z-index: 2;
  padding: 30px 24px;
}
.kicker {
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--amber);
}
.welcome h1 {
  margin: 10px 0;
  color: #e8dfd0;
  font: 29px "Lucida Console", monospace;
  letter-spacing: .09em;
}
.tagline {
  margin-bottom: 28px;
  color: #8b8072;
  font-size: 9px;
  letter-spacing: .24em;
}
.welcome-inner > p:not(.kicker):not(.tagline) {
  max-width: 700px;
  color: #afa79b;
  line-height: 1.7;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}
.feature {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0d0c;
}
.feature:hover {
  border-color: var(--amber-soft);
  box-shadow: inset 0 0 20px rgba(211,154,73,.04);
}
.feature-thumb {
  position: relative;
  height: 130px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: #070908;
}
.feature-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.26));
}
.feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-title {
  padding: 10px 12px 5px;
  color: #d4cdc0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.feature-title b { color: var(--amber); }
.feature small {
  display: block;
  padding: 0 12px 12px;
  color: #757069;
  font-size: 9px;
}

/* ==========================================================
   08 // HOME / RIGHT RAIL
   Последние статьи, заметка пилота и внешние ссылки.
   ========================================================== */
.latest a,
.links a {
  display: grid;
  grid-template-columns: 54px 1fr;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: #928880;
  font-size: 10px;
}
.latest a:hover,
.links a:hover {
  color: #d8ccba;
  background: rgba(211,154,73,.05);
}
.latest time { color: #5d5952; }
.links a { grid-template-columns: 1fr; }

.pilot-note-body {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 12px;
}
.pilot-note-body img {
  width: 92px;
  height: 130px;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(.82) contrast(1.04) brightness(.76);
}
.pilot-note-body p {
  margin: 0;
  color: #968d81;
  font-size: 10px;
  line-height: 1.7;
}
.disclaimer {
  padding: 12px;
  color: #5f5c56;
  font-size: 9px;
  line-height: 1.5;
}

/* ==========================================================
   09 // HOME / TRANSMISSION TICKER
   Нижняя бегущая строка в духе Web 1.0 / EVE HUD.
   ========================================================== */
.tickerbar {
  display: grid;
  grid-template-columns: 150px 1fr 220px;
  height: 38px;
  margin-top: 14px;
  overflow: hidden;
}
.transmission,
.fly {
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: .14em;
}
.transmission { border-right: 1px solid var(--line); }
.fly {
  border-left: 1px solid var(--line);
  color: #a29a8c;
}
.ticker-window {
  overflow: hidden;
  white-space: nowrap;
}
.ticker-text {
  width: max-content;
  color: #a67b42;
  font: 10px/36px "Lucida Console", monospace;
  animation: ticker 30s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

/* ==========================================================
   10 // ARTICLE PAGES / BASE LAYOUT
   Общая разметка всех статей базы знаний.
   Новый материал лучше создавать из guides/_template.html.
   ========================================================== */
.article-body { padding: 18px; }
.article-shell { max-width: 1200px; margin: auto; }
.article-top {
  height: 42px;
  display: grid;
  grid-template-columns: 160px 1fr 90px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .1em;
}
.article-top b { color: var(--amber); text-align: right; }
.article-main { display: grid; grid-template-columns: 210px 1fr; }
.article-side {
  padding: 14px;
  border-right: 1px solid var(--line);
}
.article-side p {
  color: #706c65;
  font-size: 10px;
  line-height: 1.7;
}
.article-side nav { display: grid; }
.article-side nav a {
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 9px;
}
.article-copy {
  max-width: 900px;
  padding: 35px 45px 55px;
}
.article-copy h1 {
  margin: 8px 0;
  color: #e6ddce;
  font-size: 38px;
  letter-spacing: .06em;
}
.article-copy .lead {
  font-size: 17px;
  line-height: 1.7;
  color: #aaa49b;
}
.article-copy section {
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}
.article-copy h2 {
  color: #d0c5b6;
  font-size: 16px;
}
.article-copy p,
.article-copy li {
  line-height: 1.75;
}
.intel-strip,
.warning {
  margin: 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--cyan);
  background: rgba(111,161,163,.05);
  font-size: 11px;
  line-height: 1.6;
}
.warning {
  border-left-color: var(--red);
  background: rgba(166,78,61,.05);
}
.article-copy pre {
  padding: 14px;
  border: 1px solid var(--line-soft);
  background: #070908;
  color: #8eb28b;
  font: 11px/1.6 "Lucida Console", monospace;
}
/* D-Scan демонстрация радара, используемая в соответствующей статье. */
.scan-demo {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
}
.radar {
  position: relative;
  overflow: hidden;
  height: 220px;
  border: 1px solid var(--line-soft);
  background: radial-gradient(circle, #111817, #070807);
}
.radar::before,
.radar::after,
.radar i {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(143,161,157,.25);
  border-radius: 50%;
}
.radar::before { width: 75%; aspect-ratio: 1; }
.radar::after { width: 48%; aspect-ratio: 1; }
.radar i:nth-child(1) { width: 22%; aspect-ratio: 1; }
.radar i:nth-child(2) {
  width: 1px;
  height: 90%;
  border: 0;
  border-left: 1px solid rgba(143,161,157,.22);
  border-radius: 0;
}
.radar i:nth-child(3) {
  width: 90%;
  height: 1px;
  border: 0;
  border-top: 1px solid rgba(143,161,157,.22);
  border-radius: 0;
}
.radar b,
.radar em {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b83f33;
  box-shadow: 0 0 8px rgba(184,63,51,.7);
}
.radar b { left: 64%; top: 38%; }
.radar em { left: 40%; top: 61%; }

/* ==========================================================
   11 // RESPONSIVE LAYOUT
   Адаптация главной и статей под более узкие экраны.
   ========================================================== */
@media (max-width: 1450px) {
  .main-grid { grid-template-columns: 220px 340px minmax(480px, 1fr) 255px; }
  .masthead { grid-template-columns: 270px 1fr 210px 110px; }
  .mascot-caption { width: 150px; }
}

@media (max-width: 1120px) {
  .main-grid { grid-template-columns: 210px 280px 1fr; }
  .right-rail {
    grid-column: 1 / -1;
    margin-left: 0;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .masthead {
    grid-template-columns: 250px 1fr 220px;
  }
  .top-nav { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .mascot-stage { min-height: 760px; }
}

@media (max-width: 820px) {
  .shell { width: calc(100% - 10px); margin: 5px; }
  .masthead {
    min-height: 120px;
    grid-template-columns: 1fr 1fr;
    padding: 14px;
  }
  .quote { display: none; }
  .connection-box { margin-top: 0; }
  .main-grid { grid-template-columns: 1fr; }
  .left-rail { grid-template-columns: 1fr 1fr; }
  .content-column { order: 1; }
  .mascot-stage {
    order: 2;
    min-height: 620px;
    border: 1px solid var(--line);
  }
  .right-rail {
    order: 3;
    grid-template-columns: 1fr;
  }
  .tickerbar { grid-template-columns: 1fr; }
  .transmission,
  .fly { display: none; }
  .article-main { grid-template-columns: 1fr; }
  .article-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .article-copy { padding: 25px 20px; }
  .scan-demo { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .left-rail { grid-template-columns: 1fr; }
  .masthead { grid-template-columns: 1fr; }
  .connection-box { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .mascot-stage { min-height: 540px; }
  .mascot-hero-img { object-position: 50% 20%; }
  .mascot-caption {
    top: auto;
    right: 12px;
    bottom: 12px;
  }
  .article-top { grid-template-columns: 90px 1fr; }
  .article-top b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .ticker-text { animation: none; }
}

/* ==========================================================
   12 // HOME / EXTRA INTEL PANELS
   Быстрый словарь, текущая transmission и счётчики архива.
   ========================================================== */
.intel-deck {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  margin-top: 14px;
}
.intel-card,
.transmission-card,
.archive-strip { margin: 0; }
.intel-lines { padding: 8px 12px 12px; }
.intel-lines p {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font: 10px/1.5 "Lucida Console", monospace;
}
.intel-lines p:last-child { border-bottom: 0; }
.intel-lines b { color: var(--amber); font-weight: 400; }
.intel-lines span { color: #8f877d; }
.transmission-body {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 12px;
  align-items: center;
}
.transmission-body img {
  width: 110px;
  height: 150px;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(.82) brightness(.74) contrast(1.06);
}
.transmission-body p {
  margin: 0 0 16px;
  color: #a0988d;
  font: 11px/1.75 "Lucida Console", monospace;
}
.transmission-body a {
  color: var(--amber);
  font: 9px "Lucida Console", monospace;
}
.archive-strip { margin-top: 14px; }
.archive-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.archive-stats span {
  min-height: 74px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-right: 1px solid var(--line-soft);
  color: #777168;
  font: 9px "Lucida Console", monospace;
  text-align: center;
}
.archive-stats span:last-child { border-right: 0; }
.archive-stats b {
  display: block;
  color: var(--bright);
  font-size: 18px;
  font-weight: 400;
}

/* ==========================================================
   13 // ARTICLE PAGES / HERO + MEDIA
   Обложка статьи, внутренние изображения, HUD-таблицы и навигация.
   ========================================================== */
.article-hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-color: #070908;
  background-size: cover;
  background-position: center;
}
/* Уникальный фон обложки статьи D-Scan. */
.dscan-hero { background-image: linear-gradient(90deg, rgba(5,6,6,.74), rgba(5,6,6,.16)), url('../img/feature-radar.png'); }
/* Уникальный фон обложки статьи Overview. */
.overview-hero { background-image: linear-gradient(90deg, rgba(5,6,6,.76), rgba(5,6,6,.18)), url('../img/header-orbit.png'); }
/* Стандартная обложка для guides/_template.html. Можно оставить её или заменить своим классом. */
.template-hero { background-image: linear-gradient(90deg, rgba(5,6,6,.82), rgba(5,6,6,.22)), url('../img/header-orbit.png'); }
.article-hero-overlay {
  position: absolute;
  left: 34px;
  bottom: 30px;
  max-width: 620px;
}
.article-hero-code {
  color: var(--amber);
  font: 9px "Lucida Console", monospace;
  letter-spacing: .2em;
}
.article-hero h1 {
  margin: 8px 0 6px;
  color: var(--bright);
  font: 34px "Lucida Console", monospace;
  letter-spacing: .08em;
}
.article-hero p {
  margin: 0;
  color: #a79f94;
  font: 11px/1.6 "Lucida Console", monospace;
}
.side-note {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  color: #887b6d;
  font: 9px/1.6 "Lucida Console", monospace;
}
.article-media {
  margin: 22px 0;
  border: 1px solid var(--line-soft);
  background: #070908;
}
.article-media img {
  width: 100%;
  max-height: 390px;
  object-fit: cover;
}
.crop-station img { object-position: center 40%; }
.article-media figcaption {
  padding: 8px 10px;
  border-top: 1px solid var(--line-soft);
  color: #6d685f;
  font: 8px "Lucida Console", monospace;
  letter-spacing: .1em;
}
.hud-table {
  margin-top: 14px;
  border: 1px solid var(--line-soft);
}
.hud-table div {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-top: 1px solid var(--line-soft);
}
.hud-table div:first-child { border-top: 0; }
.hud-table b,
.hud-table span {
  padding: 9px 10px;
  font: 10px "Lucida Console", monospace;
}
.hud-table b {
  border-right: 1px solid var(--line-soft);
  color: var(--amber);
  font-weight: 400;
}
.hud-table span { color: #8f887e; }
.article-list { padding-left: 18px; }
.article-list li { margin: 8px 0; }
.article-list.ordered { padding-left: 22px; }
.article-nav-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--amber);
  font: 9px "Lucida Console", monospace;
}

/* ==========================================================
   14 // GUIDE AI PROFILE
   Отдельная страница профиля маскота 07.
   ========================================================== */
.guide-ai-page { background: #060706; }
.guide-ai-hero {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 430px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #0c0d0d, #11100d);
}
.guide-ai-hero > img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(.85) contrast(1.05) brightness(.76);
}
.guide-ai-hero-copy {
  padding: 66px 48px;
  align-self: center;
}
.guide-ai-hero-copy h1 {
  margin: 8px 0 18px;
  color: var(--bright);
  font: 42px "Lucida Console", monospace;
  letter-spacing: .09em;
}
.guide-ai-hero-copy > p:not(.kicker) {
  max-width: 680px;
  color: #a69d92;
  line-height: 1.75;
}
.guide-ai-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 26px;
  color: #7d746a;
  font: 9px "Lucida Console", monospace;
}
.guide-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding: 14px;
}
.ai-card { margin: 0; }
.ai-card > p,
.ai-card blockquote {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: #938b81;
  font: 10px/1.65 "Lucida Console", monospace;
}
.ai-card b { color: var(--amber); font-weight: 400; }
.ai-card blockquote { color: #aaa095; }
.ai-links { display: block; }
.ai-links a {
  display: block;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  color: #928980;
  font: 10px "Lucida Console", monospace;
}
.ai-links a:hover { color: var(--amber); background: rgba(211,154,73,.04); }

@media (max-width: 1120px) {
  .intel-deck { grid-template-columns: 1fr; }
  .archive-stats { grid-template-columns: repeat(2, 1fr); }
  .guide-ai-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .article-hero { height: 240px; }
  .guide-ai-hero { grid-template-columns: 1fr; }
  .guide-ai-hero > img { height: 420px; }
  .guide-ai-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .archive-stats { grid-template-columns: 1fr 1fr; }
  .transmission-body { grid-template-columns: 82px 1fr; }
  .transmission-body img { width: 82px; height: 118px; }
  .article-hero-overlay { left: 18px; bottom: 18px; right: 18px; }
  .article-hero h1 { font-size: 26px; }
  .hud-table div { grid-template-columns: 100px 1fr; }
  .guide-ai-hero-copy { padding: 32px 22px; }
  .guide-ai-hero-copy h1 { font-size: 30px; }
}

/* ==========================================================
   16 // CATEGORY PAGES / KNOWLEDGE NODES
   Страницы категорий: Core Mechanics, Wormholes, Fitting и т.д.
   Для нового раздела копируй categories/_template.html.
   ========================================================== */
.category-body {
  padding: 18px;
}

.category-shell {
  width: min(100%, 1380px);
  margin: 0 auto;
  overflow: hidden;
}

/* Верхняя системная строка категории. */
.category-top {
  min-height: 44px;
  display: grid;
  grid-template-columns: 180px 1fr 120px;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: #8e877d;
  background: rgba(7, 9, 8, .92);
  font: 10px "Lucida Console", "Courier New", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.category-top a:hover { color: var(--amber); }
.category-top b {
  color: var(--amber);
  text-align: right;
  font-weight: 400;
}

/* Большая обложка раздела. Отдельные классы ниже меняют только картинку. */
.category-hero {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: end;
  gap: 24px;
  padding: 44px;
  border-bottom: 1px solid var(--line);
  background-color: #080a09;
  background-size: cover;
  background-position: center;
}
.category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.48)),
    radial-gradient(circle at 72% 34%, rgba(211,154,73,.12), transparent 19rem);
}
.category-hero-copy,
.category-telemetry {
  position: relative;
  z-index: 2;
}
.category-hero-copy {
  max-width: 780px;
}
.category-code {
  margin: 0 0 8px;
  color: var(--amber);
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.category-hero h1 {
  margin: 0 0 16px;
  color: var(--bright);
  font: 42px/1.05 "Lucida Console", "Courier New", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.category-hero-copy > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #b3aa9e;
  font-size: 16px;
  line-height: 1.7;
}

/* Небольшой telemetry-блок справа в hero. */
.category-telemetry {
  display: grid;
  align-self: end;
  border: 1px solid rgba(211,154,73,.34);
  background: rgba(7,9,8,.82);
}
.category-telemetry span {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line-soft);
  color: #79736b;
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.category-telemetry span:last-child { border-bottom: 0; }
.category-telemetry b {
  color: #d9c5a8;
  font-weight: 400;
}

/* Фоны категорий. Добавляй аналогичные классы для новых разделов. */
.template-category-hero {
  background-image:
    linear-gradient(90deg, rgba(5,6,6,.86), rgba(5,6,6,.38)),
    url('../img/header-orbit.png');
}
.mechanics-category-hero {
  background-image:
    linear-gradient(90deg, rgba(5,6,6,.90) 0%, rgba(5,6,6,.48) 55%, rgba(5,6,6,.18) 100%),
    url('../img/feature-radar.png');
  background-position: center 46%;
}
.wormholes-category-hero {
  background-image:
    linear-gradient(90deg, rgba(5,6,6,.90) 0%, rgba(5,6,6,.45) 52%, rgba(5,6,6,.12) 100%),
    url('../img/wh-odis.webp');
  background-position: center;
}

.category-content {
  padding: 28px;
  background:
    linear-gradient(rgba(255,255,255,.008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.008) 1px, transparent 1px),
    rgba(8,10,9,.76);
  background-size: 32px 32px;
}

/* Вводный блок: краткое описание + рекомендуемый маршрут изучения. */
.category-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 34px;
}
.category-intro h2,
.category-section-head h2 {
  margin: 4px 0 10px;
  color: var(--bright);
  font: 22px "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}
.category-intro > div > p:last-child {
  max-width: 800px;
  margin-bottom: 0;
  color: #a9a198;
  line-height: 1.75;
}
.category-path {
  margin: 0;
}
.category-path ol {
  margin: 0;
  padding: 8px 12px 12px;
  list-style: none;
}
.category-path li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  color: #918b82;
  font: 10px/1.5 "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}
.category-path li:last-child { border-bottom: 0; }
.category-path li span { color: var(--amber); }

.category-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.category-section-head > span {
  padding-bottom: 12px;
  color: #6f6961;
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/*
  Карточки статей.
  .online — кликабельная опубликованная статья.
  .queued — запланированный материал без ссылки.
*/
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.guide-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid #4c4a41;
  background:
    linear-gradient(180deg, rgba(211,154,73,.025), transparent 70px),
    rgba(12,14,13,.90);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
a.guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--amber-soft);
  border-left-color: var(--amber);
  background-color: rgba(18,17,14,.94);
}
.guide-card.online { border-left-color: var(--green); }
.guide-card.queued { opacity: .68; }
.guide-card-top,
.guide-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #6e6962;
  font: 8px "Lucida Console", "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guide-card-top i {
  font-style: normal;
  color: var(--amber);
}
.guide-card.online .guide-card-top i { color: var(--green); }
.guide-card h3 {
  margin: 20px 0 9px;
  color: #d9d0c2;
  font: 17px/1.25 "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}
.guide-card p {
  flex: 1;
  margin: 0 0 18px;
  color: #999188;
  line-height: 1.65;
}
.guide-card-meta {
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}

/* Связанный материал / дополнительная подсказка внутри категории. */
.category-callout {
  margin-top: 20px;
}
.category-callout-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px;
}
.category-callout-body p {
  margin: 0;
  color: #989188;
  line-height: 1.65;
}
.category-callout-body a {
  color: var(--amber);
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.category-nav-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.category-nav-bottom a {
  color: #958c80;
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.category-nav-bottom a:hover { color: var(--amber); }

/* Адаптация сетки категорий. */
@media (max-width: 1050px) {
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-intro { grid-template-columns: 1fr 320px; }
}

@media (max-width: 760px) {
  .category-body { padding: 6px; }
  .category-top {
    grid-template-columns: 100px 1fr;
  }
  .category-top b { display: none; }
  .category-hero {
    min-height: 420px;
    grid-template-columns: 1fr;
    padding: 28px 20px;
  }
  .category-telemetry {
    width: min(100%, 340px);
  }
  .category-content { padding: 20px 14px; }
  .category-intro { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .category-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .category-section-head > span { padding-bottom: 10px; }
  .category-callout-body { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .category-hero h1 { font-size: 30px; }
  .category-nav-bottom { flex-direction: column; }
}

/* ==========================================================
   17 // 404 PAGE / SIGNAL LOST
   Отдельная страница ошибки для корневого файла 404.html.
   Она использует существующую палитру сайта, wormhole-фон и
   прозрачный арт маскота img/mascot-transparent.png.
   ========================================================== */
.error-body {
  min-height: 100vh;
  padding: 12px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 35%, rgba(85,109,135,.16), transparent 26rem),
    #050706;
}

.error-shell {
  width: min(1380px, 100%);
  min-height: calc(100vh - 24px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

/* Верхняя строка 404. */
.error-top {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.28)),
    url('../img/header-orbit.png') center 48% / cover no-repeat,
    var(--panel);
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.error-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #b8afa2;
}
.error-brand:hover { color: var(--bright); }
.error-brand-mark {
  color: #d7c3a6;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .14em;
}
.error-top-status { color: #8c877f; }
.error-top-code { color: var(--red); }

/*
  Центральная сцена. Фон специально затемнён, чтобы текст и
  маскот оставались читаемыми даже на ярком изображении.
*/
.error-scene {
  position: relative;
  isolation: isolate;
  min-height: 700px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
  align-items: stretch;
  background:
    linear-gradient(90deg, rgba(5,7,8,.96) 0%, rgba(5,7,8,.88) 46%, rgba(5,7,8,.42) 72%, rgba(5,7,8,.54) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.54)),
    url('../img/feature-wormhole.png') center / cover no-repeat;
}
.error-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 48%, rgba(112,150,178,.13), transparent 23rem),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,.28));
}

/* Тонкая техническая сетка, как overlay системного интерфейса. */
.error-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .34;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, #000 0 55%, transparent 85%);
}

.error-copy {
  align-self: center;
  max-width: 730px;
  padding: 58px 28px 58px 54px;
  position: relative;
  z-index: 3;
}
.error-eyebrow {
  margin: 0 0 10px;
  color: var(--red);
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.error-number {
  margin: 0;
  color: rgba(225,216,201,.10);
  font: 700 clamp(92px, 13vw, 180px)/.72 "Arial Narrow", Arial, sans-serif;
  letter-spacing: -.05em;
  text-shadow: 0 0 28px rgba(166,78,61,.06);
  user-select: none;
}
.error-copy h1 {
  margin: -4px 0 16px;
  color: var(--bright);
  font: 32px "Lucida Console", "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.error-lead {
  max-width: 660px;
  margin: 0;
  color: #aaa39a;
  font-size: 15px;
  line-height: 1.75;
}

/* Диагностический блок ROUTE / ARCHIVE / REQUEST. */
.error-diagnostic {
  max-width: 650px;
  margin-top: 28px;
  border: 1px solid var(--line-soft);
  background: rgba(7,9,9,.62);
}
.error-diagnostic > div {
  min-height: 34px;
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  font: 9px "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}
.error-diagnostic > div:last-child { border-bottom: 0; }
.error-diagnostic span,
.error-diagnostic b { padding: 8px 10px; }
.error-diagnostic span {
  border-right: 1px solid var(--line-soft);
  color: #66635e;
}
.error-diagnostic b {
  color: #aaa49b;
  font-weight: 400;
}
.error-diagnostic .ok { color: var(--green); }
.error-diagnostic .bad { color: var(--red); }

/* Кнопки возврата в известные разделы базы знаний. */
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.error-button {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.018);
  color: #9e978d;
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .05em;
}
.error-button:hover {
  color: var(--bright);
  border-color: var(--amber-soft);
  background: rgba(211,154,73,.06);
}
.error-button.primary {
  color: #dbc7a8;
  border-color: var(--amber-soft);
  box-shadow: inset 3px 0 0 var(--amber);
}

/* Маленький системный лог под кнопками. */
.error-log {
  max-width: 650px;
  margin-top: 24px;
  padding: 11px 13px;
  display: grid;
  gap: 5px;
  border-left: 2px solid #3d4849;
  background: rgba(4,6,6,.55);
  color: #71817d;
  font: 9px/1.45 "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}

/*
  Маскот на прозрачном фоне. object-fit: contain сохраняет
  фигуру целиком и не обрезает уши, хвост или броню.
*/
.error-mascot {
  position: relative;
  min-height: 700px;
  z-index: 2;
  align-self: end;
}
.error-mascot > img {
  position: absolute;
  right: -28px;
  bottom: -18px;
  width: min(650px, 118%);
  max-height: 96%;
  object-fit: contain;
  object-position: bottom right;
  filter: saturate(.82) contrast(1.04) brightness(.78) drop-shadow(-22px 20px 24px rgba(0,0,0,.52));
}
.error-message {
  position: absolute;
  top: 54px;
  left: 8px;
  width: 210px;
  padding: 13px;
  border: 1px solid var(--amber-soft);
  background: rgba(14,13,10,.90);
  box-shadow: -10px 10px 0 -9px var(--amber);
  font: 9px/1.6 "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}
.error-message span { color: var(--amber); }
.error-message p {
  margin: 10px 0;
  color: #c7bbab;
}
.error-message small {
  color: #766f65;
  font-size: 8px;
}

.error-footer {
  min-height: 38px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  color: #777169;
  font: 8px "Lucida Console", "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.error-footer a { color: var(--amber); }
.error-footer a:hover { color: var(--bright); }

/* 404 // адаптация под планшеты и телефоны. */
@media (max-width: 900px) {
  .error-scene {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .error-copy {
    max-width: none;
    padding: 44px 24px 24px;
  }
  .error-mascot {
    min-height: 470px;
  }
  .error-mascot > img {
    right: -16px;
    width: min(620px, 82vw);
  }
  .error-message {
    top: 30px;
    left: 24px;
  }
}

@media (max-width: 620px) {
  .error-body { padding: 5px; }
  .error-shell { min-height: calc(100vh - 10px); gap: 6px; }
  .error-top {
    grid-template-columns: 1fr auto;
    min-height: 48px;
  }
  .error-top-status { display: none; }
  .error-brand { gap: 8px; font-size: 8px; }
  .error-brand-mark { font-size: 20px; }
  .error-copy { padding: 32px 16px 18px; }
  .error-copy h1 { font-size: 25px; }
  .error-lead { font-size: 14px; }
  .error-diagnostic > div { grid-template-columns: 135px 1fr; }
  .error-actions { display: grid; }
  .error-button { text-align: center; }
  .error-mascot { min-height: 390px; }
  .error-mascot > img {
    right: -52px;
    width: min(540px, 110vw);
  }
  .error-message {
    top: 16px;
    left: 16px;
    width: 185px;
  }
  .error-footer {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  .error-footer span:nth-child(2) { display: none; }
}

/* ==========================================================
   18 // WORMHOLE CONNECTION MATRIX
   Страница guides/wormhole-types.html.
   Матрица сделана широкой и прокручиваемой, а tooltip вынесен
   в fixed-слой, чтобы его не обрезал overflow таблицы.
   ========================================================== */

/* Делаем справочную статью шире обычной статьи. */
.wormhole-reference-shell {
  max-width: 1580px;
}

/* Обложка статьи про типы червоточин. */
.wormhole-table-hero {
  background-image:
          linear-gradient(90deg, rgba(5,6,6,.82), rgba(5,6,6,.20)),
          url('../img/wormhole-looks/c4-h.webp');
  background-position: center 48%;
}

/* Основная колонка этой статьи может занимать всю доступную ширину. */
.article-copy-wide {
  max-width: none;
  min-width: 0;
}

/* Ссылки внутри обычного текста статьи. */
.inline-link {
  color: var(--amber);
  border-bottom: 1px dotted rgba(211,154,73,.45);
}
.inline-link:hover {
  color: var(--bright);
  border-bottom-color: var(--amber);
}

.wh-matrix-section {
  overflow: visible;
}

/* Небольшая строка-инструкция над таблицей. */
.wh-matrix-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  margin: 12px 0 8px;
  color: #716b63;
  font: 8px "Lucida Console", "Courier New", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.wh-help-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(211,154,73,.55);
}

/*
  Горизонтальный scroll-контейнер.
  На desktop таблица помещается на широком экране, на mobile её
  можно двигать пальцем, не ломая ширину всей страницы.
*/
.wh-matrix-wrap {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  background: #080a09;
  scrollbar-color: var(--amber-soft) #080a09;
  scrollbar-width: thin;
}
.wh-matrix-wrap:focus {
  outline: 1px solid var(--amber-soft);
  outline-offset: 2px;
}

.wh-matrix {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: #969087;
  font: 9px "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}
.wh-matrix th,
.wh-matrix td {
  min-width: 68px;
  height: 46px;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(10,12,11,.96);
}
.wh-matrix tr:last-child th,
.wh-matrix tr:last-child td {
  border-bottom: 0;
}
.wh-matrix th:last-child,
.wh-matrix td:last-child {
  border-right: 0;
}

/* Верхние заголовки остаются видны при вертикальном скролле страницы. */
.wh-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 42px;
  color: #958a7d;
  background: #111310;
  letter-spacing: .08em;
}

/* Первый столбец также закреплён при горизонтальной прокрутке. */
.wh-matrix .wh-origin,
.wh-matrix .wh-corner {
  position: sticky;
  left: 0;
  z-index: 5;
  min-width: 84px;
  color: #c0b4a4;
  background: #111310;
  box-shadow: 1px 0 0 var(--line);
}
.wh-matrix .wh-corner {
  z-index: 7;
  color: var(--amber);
  font-size: 8px;
}

/* Заголовки разных областей слегка отличаются по тону. */
.wh-dest-c1,.wh-dest-c2,.wh-dest-c3,.wh-dest-c4,.wh-dest-c5,.wh-dest-c6 {
  color: #a8a096 !important;
}
.wh-dest-hs { color: #77a989 !important; }
.wh-dest-ls { color: #b89752 !important; }
.wh-dest-ns { color: #a9685e !important; }
.wh-dest-thera,.wh-dest-c13 { color: #729ca7 !important; }

/* Пустые ячейки визуально уходят на задний план. */
.wh-empty {
  color: #343832;
  background: rgba(7,9,8,.78) !important;
}

/* Если в одной паре пространств бывает два типа, показываем их столбиком. */
.wh-multi {
  min-width: 78px !important;
}
.wh-multi .wh-code + .wh-code {
  margin-top: 3px;
}

/* Сам wormhole-код. Это обычная ссылка на карточку типа в Anoik.is. */
.wh-code {
  display: inline-block;
  min-width: 46px;
  padding: 5px 6px;
  border: 1px solid #34372f;
  color: #c8bdad;
  background: rgba(255,255,255,.018);
  line-height: 1;
  letter-spacing: .06em;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.wh-code:hover,
.wh-code:focus-visible {
  outline: 0;
  color: #f0ddba;
  border-color: var(--amber-soft);
  background: rgba(211,154,73,.10);
  box-shadow: inset 2px 0 0 var(--amber), 0 0 14px rgba(211,154,73,.06);
}

/* Подпись под таблицей для мобильной версии. */
.wh-mobile-note {
  margin-top: 8px;
  color: #615d57;
  font: 8px/1.5 "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}

/*
  Всплывающая карточка массы.
  Она позиционируется js/wormhole-table.js относительно hovered-кода.
*/
.wh-floating-tooltip {
  position: fixed;
  z-index: 999;
  width: 238px;
  padding: 10px 11px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  border: 1px solid var(--amber-soft);
  background: rgba(10,11,9,.98);
  box-shadow: 0 12px 32px rgba(0,0,0,.48), inset 2px 0 0 var(--amber);
  color: var(--text);
  font: 9px/1.45 "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
  transition: opacity .10s ease, transform .10s ease, visibility .10s ease;
}
.wh-floating-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.wh-tip-code {
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--amber);
  font-size: 12px;
  letter-spacing: .14em;
}
.wh-tip-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px;
  padding: 2px 0;
}
.wh-tip-row span { color: #68645e; }
.wh-tip-row b {
  color: #d9d0c2;
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .wormhole-reference-shell { max-width: none; }
  .wh-matrix th,
  .wh-matrix td {
    min-width: 64px;
    height: 44px;
  }
  .wh-matrix .wh-origin,
  .wh-matrix .wh-corner {
    min-width: 74px;
  }
}

@media (max-width: 540px) {
  .wh-floating-tooltip {
    width: min(238px, calc(100vw - 20px));
  }
}
/* ==========================================================
   19 // WORMHOLE APPEARANCE REFERENCE
   Стили для статьи с визуальным сравнением wormholes C1–C6.
   ========================================================== */

/* Hero-обложка новой статьи. */
.wh-appearance-hero {
  background-image:
          linear-gradient(90deg, rgba(5,6,6,.84), rgba(5,6,6,.26)),
          url('../img/wormhole-looks/c1-h.webp');
}

/* Основная сравнительная матрица: строка = класс, столбцы = H/L. */
.wh-appearance-matrix {
  display: grid;
  grid-template-columns: 96px 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.wh-appearance-head,
.wh-class-cell,
.wh-look-card {
  border: 1px solid var(--line);
  background: #0b0d0c;
}
.wh-appearance-head {
  padding: 12px;
  color: #9f9383;
  font: 10px "Lucida Console", "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}
.wh-appearance-head.class-label,
.wh-class-cell {
  display: grid;
  place-items: center;
}
.wh-class-cell {
  min-height: 170px;
  color: var(--amber);
  font: 16px "Lucida Console", "Courier New", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(211,154,73,.08), rgba(0,0,0,.02)), #0b0d0c;
}
.wh-look-card {
  margin: 0;
  overflow: hidden;
}
.wh-look-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #050605;
}
.wh-look-card figcaption {
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
}
.wh-look-card figcaption b,
.wh-gallery-card figcaption b {
  color: #d8cdbd;
  font: 12px "Lucida Console", "Courier New", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.wh-look-card figcaption span,
.wh-gallery-card figcaption span {
  color: #7b746b;
  font: 10px/1.55 "Lucida Console", "Courier New", monospace;
  text-transform: uppercase;
}

/* Панель фильтров для второй галереи. */
.wh-filter-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin: 16px 0 18px;
}
.wh-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.wh-filter-group > span {
  min-width: 72px;
  color: #7a736a;
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wh-filter-btn {
  padding: 7px 10px;
  border: 1px solid var(--line);
  color: #90877c;
  background: #0c0e0d;
  font: 10px "Lucida Console", "Courier New", monospace;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
}
.wh-filter-btn:hover,
.wh-filter-btn:focus-visible,
.wh-filter-btn.active {
  outline: 0;
  border-color: var(--amber-soft);
  color: #ead7b3;
  background: rgba(211,154,73,.09);
  box-shadow: inset 2px 0 0 var(--amber);
}

/* Фильтруемая галерея всех кадров. */
.wh-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.wh-gallery-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0d0c;
}
.wh-gallery-card[hidden] {
  display: none !important;
}
.wh-gallery-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #050605;
}
.wh-gallery-card figcaption {
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
}

@media (max-width: 1080px) {
  .wh-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .wh-appearance-matrix {
    grid-template-columns: 1fr;
  }
  .wh-appearance-head.class-label {
    display: none;
  }
  .wh-appearance-head {
    text-align: left;
  }
  .wh-class-cell {
    min-height: auto;
    padding: 10px 12px;
    place-items: start;
  }
}

@media (max-width: 620px) {
  .wh-gallery-grid {
    grid-template-columns: 1fr;
  }
  .wh-filter-group > span {
    min-width: 100%;
  }
}

/* ==========================================================
   20 // WORMHOLE APPEARANCE // INTERACTIVE COMPARISON
   Дополнительные элементы: мнемоника, H/L view mode и lightbox.
   ========================================================== */

/* Короткая памятка C1–C6. Это визуальный ориентир, а не точный идентификатор. */
.wh-memory-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.wh-memory-table > div {
  position: relative;
  min-height: 102px;
  padding: 13px 13px 12px 48px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(135deg, rgba(211,154,73,.045), rgba(255,255,255,.01)), #0a0c0b;
}
.wh-memory-table b {
  position: absolute;
  left: 12px;
  top: 13px;
  color: var(--amber);
  font: 12px "Lucida Console", "Courier New", monospace;
  letter-spacing: .08em;
}
.wh-memory-table span,
.wh-memory-table small {
  display: block;
  text-transform: uppercase;
  font-family: "Lucida Console", "Courier New", monospace;
}
.wh-memory-table span {
  color: #d4c9b9;
  font-size: 10px;
  line-height: 1.45;
}
.wh-memory-table small {
  margin-top: 7px;
  color: #716c64;
  font-size: 8px;
  line-height: 1.5;
}

/* Переключатель раскладки сравнительной матрицы. */
.wh-compare-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 15px 0 12px;
  padding: 9px 10px;
}
.wh-compare-toolbar > span {
  margin-right: 4px;
  color: #777169;
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wh-view-btn {
  padding: 7px 10px;
  border: 1px solid var(--line);
  color: #8f877c;
  background: #0c0e0d;
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
}
.wh-view-btn:hover,
.wh-view-btn:focus-visible,
.wh-view-btn.active {
  outline: 0;
  border-color: var(--amber-soft);
  color: #ead7b3;
  background: rgba(211,154,73,.09);
  box-shadow: inset 2px 0 0 var(--amber);
}

/* H ONLY / L ONLY сжимают сетку до двух колонок: CLASS + изображение. */
.wh-appearance-matrix[data-view="high"],
.wh-appearance-matrix[data-view="low"] {
  grid-template-columns: 96px minmax(0, 1fr);
}
.wh-appearance-matrix[data-view="high"] .wh-head-low,
.wh-appearance-matrix[data-view="high"] .wh-low,
.wh-appearance-matrix[data-view="low"] .wh-head-high,
.wh-appearance-matrix[data-view="low"] .wh-high {
  display: none;
}

/* Все изображения, которые можно открыть крупно. */
.wh-lightbox-trigger {
  cursor: zoom-in;
}
.wh-lightbox-trigger:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: -3px;
}

/* Запрещаем прокрутку документа, пока lightbox открыт. */
body.lightbox-open {
  overflow: hidden;
}

/* Полноэкранный lightbox. */
.wh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .13s ease, visibility .13s ease;
}
.wh-lightbox[hidden] {
  display: none;
}
.wh-lightbox.open {
  opacity: 1;
  visibility: visible;
}
.wh-lightbox-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(2,3,3,.88);
  cursor: zoom-out;
}
.wh-lightbox-window {
  position: relative;
  z-index: 2;
  width: min(1420px, 94vw);
  max-height: 94vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(8,10,9,.985);
  box-shadow: 0 22px 70px rgba(0,0,0,.72);
}
.wh-lightbox-top,
.wh-lightbox-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  padding: 8px 12px;
  color: #887f74;
  font: 9px "Lucida Console", "Courier New", monospace;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.wh-lightbox-top {
  border-bottom: 1px solid var(--line);
}
.wh-lightbox-bottom {
  border-top: 1px solid var(--line);
}
.wh-lightbox-bottom #wh-lightbox-caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wh-lightbox-bottom #wh-lightbox-counter {
  flex: 0 0 auto;
  color: var(--amber);
}
.wh-lightbox-close {
  padding: 5px 8px;
  border: 1px solid var(--line);
  color: #b5aa9a;
  background: #0c0e0d;
  font: 10px "Lucida Console", "Courier New", monospace;
  cursor: pointer;
}
.wh-lightbox-close:hover,
.wh-lightbox-close:focus-visible {
  outline: 0;
  color: #f0ddba;
  border-color: var(--amber-soft);
}
.wh-lightbox-stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
          linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
          #050706;
  background-size: 28px 28px;
}
.wh-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 82px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.wh-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 72px;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  color: #c8bca9;
  background: rgba(8,10,9,.78);
  font: 30px/1 "Lucida Console", "Courier New", monospace;
  cursor: pointer;
}
.wh-lightbox-nav.prev { left: 12px; }
.wh-lightbox-nav.next { right: 12px; }
.wh-lightbox-nav:hover,
.wh-lightbox-nav:focus-visible {
  outline: 0;
  color: #f0ddba;
  border-color: var(--amber-soft);
  background: rgba(27,22,15,.92);
}

@media (max-width: 900px) {
  .wh-memory-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  /* В single-view матрица всё равно остаётся линейной на телефоне. */
  .wh-appearance-matrix[data-view="high"],
  .wh-appearance-matrix[data-view="low"] {
    grid-template-columns: 1fr;
  }
  .wh-lightbox {
    padding: 8px;
  }
  .wh-lightbox-window {
    width: 100%;
    max-height: 96vh;
  }
  .wh-lightbox-stage img {
    max-height: calc(96vh - 88px);
  }
  .wh-lightbox-nav {
    width: 36px;
    height: 60px;
  }
}

@media (max-width: 560px) {
  .wh-memory-table {
    grid-template-columns: 1fr;
  }
  .wh-compare-toolbar > span {
    width: 100%;
  }
  .wh-lightbox-bottom #wh-lightbox-caption {
    max-width: 70vw;
  }
}

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