/* Варіант «Матриця» для розділів новин, курсів, медіатеки і гайдів: 0/1 фон у верхній частині,
   прямокутні картки із золотим кутом, моноширинні заголовки. Шапка і підвал не змінюються. */
body.matrix-ui {
  --mx-mono: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace;
}

body.matrix-ui .center {
  position: relative;
  isolation: isolate;
}

/* Фон 0/1 лише у верхній смузі розділу, далі він згасає. */
body.matrix-ui .center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 100vw;
  height: 180px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120'%3E%3Cg font-family='monospace' font-size='13' fill='%23efe2c2'%3E%3Ctext x='0' y='16'%3E01 $ 1 0 S 8 # X 1 0 1 $ 0 8%3C/text%3E%3Ctext x='30' y='40'%3E1 0 X # 0 1 $ 1 8 S 0 1 # 1 0%3C/text%3E%3Ctext x='8' y='64'%3E# 1 0 0 $ X 1 1 8 0 $ 1 S 0 1%3C/text%3E%3Ctext x='44' y='88'%3E0 1 $ 8 1 # 0 X 1 0 0 1 $ 8 1 0%3C/text%3E%3Ctext x='12' y='112'%3E1 S 0 $ 1 0 1 # 8 X 0 1 1 $ 0 1%3C/text%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}

body.matrix-ui h1,
body.matrix-ui .cat-title,
body.matrix-ui .guide-title,
body.matrix-ui .tile h2 {
  font-family: var(--mx-mono);
  font-weight: 400;
  letter-spacing: -0.02em;
}

body.matrix-ui .kicker,
body.matrix-ui .day-head,
body.matrix-ui .day h3 {
  font-family: var(--mx-mono);
  letter-spacing: 0.02em;
}

/* Картки: прямі кути, тонка рамка і золота смуга зверху зліва. */
body.matrix-ui .tile {
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--line);
}

body.matrix-ui .tile::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 44px;
  height: 3px;
  background: var(--accent);
  z-index: 1;
}

/* Мітки і кнопки-фільтри зі строгими кутами, як у таблиці даних. */
body.matrix-ui .pill,
body.matrix-ui .mode-bar button,
body.matrix-ui .search-box input {
  border-radius: 4px;
}