first commit

2026-04-18 16:58:50 +03:00
commit 8fc3243687
28 changed files with 7777 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,6 @@
+node_modules
+dist
+.astro
+.git
+.gitignore
+npm-debug.log*
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+.astro/
+dist/
+.DS_Store
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+FROM node:22-alpine AS build
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+FROM nginx:1.27-alpine AS runtime
+
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD wget -qO- http://127.0.0.1/ > /dev/null || exit 1
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@@ -0,0 +1,107 @@
+# Astral Archive Wiki (Astro + Starlight)
+
+Готовый шаблон wiki-сайта для Minecraft-сервера с акцентом на:
+
+- простое редактирование через Markdown (`.md`);
+- чистую структуру разделов;
+- атмосферный pastel fantasy-tech стиль;
+- удобную навигацию (sidebar, верхние быстрые ссылки, оглавление, поиск).
+
+## Запуск
+
+```bash
+npm install
+npm run dev
+```
+
+Продакшн-сборка:
+
+```bash
+npm run build
+npm run preview
+```
+
+## Запуск в Docker
+
+Собрать и запустить контейнер:
+
+```bash
+docker compose up -d --build
+```
+
+Проверка в браузере:
+
+`http://127.0.0.1:4321`
+
+Остановить:
+
+```bash
+docker compose down
+```
+
+Логи:
+
+```bash
+docker compose logs -f
+```
+
+## Публичная ссылка через Cloudflare Tunnel
+
+Если нет публичного IP и проброса портов:
+
+```bash
+cloudflared tunnel --url http://127.0.0.1:4321 --protocol http2 --edge-ip-version 4
+```
+
+Используй ссылку `https://*.trycloudflare.com` из вывода команды.
+
+## Где редактировать контент
+
+Все страницы хранятся в:
+
+`src/content/docs/`
+
+Каждая страница имеет frontmatter:
+
+```yaml
+---
+title: Название страницы
+description: Короткое описание
+---
+```
+
+## Как добавить новую страницу
+
+1. Создай новый `.md`-файл в `src/content/docs/`.
+2. Добавь `title` и `description` в frontmatter.
+3. Напиши контент Markdown.
+4. Добавь пункт меню в `astro.config.mjs` -> `sidebar`.
+
+Шаблон для копирования: `src/content/docs/templates/new-page-template.md`.
+
+## Как редактировать меню
+
+Навигация задается в `astro.config.mjs`:
+
+- `sidebar` — боковое меню;
+- `components.Header` — верхняя панель с быстрыми ссылками;
+- `editLink.baseUrl` — ссылка "Редактировать страницу".
+
+## Полезные Markdown-блоки Starlight
+
+```md
+:::note
+:::
+
+:::tip
+:::
+
+:::caution
+:::
+
+:::danger
+:::
+```
+
+Также поддерживаются списки, таблицы, цитаты, code-блоки и `<details>`.
+
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -0,0 +1,81 @@
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+export default defineConfig({
+  site: 'https://wiki.example.com',
+  vite: {
+    server: {
+      // Quick Tunnel генерирует новый поддомен при каждом запуске.
+      // Разрешаем любые хосты, чтобы не ловить блокировку Host header.
+      allowedHosts: true
+    },
+    preview: {
+      allowedHosts: true
+    }
+  },
+  integrations: [
+    starlight({
+      title: 'Astral Archive',
+      description:
+        'Премиальный wiki-портал Minecraft-сервера: лор, механики, экономика и гайды.',
+      locales: {
+        root: {
+          label: 'Русский',
+          lang: 'ru'
+        }
+      },
+      tagline: 'Нереалистичный архив игрового мира',
+      customCss: ['/src/styles/wiki-egames.css'],
+      lastUpdated: true,
+      editLink: {
+        // Замени URL на свой репозиторий, чтобы кнопка "Редактировать" вела в нужное место.
+        baseUrl: 'https://github.com/your-org/astral-archive/edit/main/'
+      },
+      social: [
+        { icon: 'discord', label: 'Discord', href: 'https://discord.gg/example' },
+        { icon: 'github', label: 'GitHub', href: 'https://github.com/your-org/astral-archive' }
+      ],
+      components: {
+        Header: './src/components/WikiHeader.astro',
+        EditLink: './src/components/WikiEditLink.astro'
+      },
+      sidebar: [
+        {
+          label: 'Обзор мира',
+          items: [
+            { label: 'Главная', link: '/' },
+            { label: 'О сервере', link: '/about-server/' },
+            { label: 'Начало игры', link: '/getting-started/' }
+          ]
+        },
+        {
+          label: 'Игровые системы',
+          items: [
+            { label: 'Гайды', link: '/guides/' },
+            { label: 'Механики', link: '/mechanics/' },
+            { label: 'Профессии / классы / расы', link: '/professions/' },
+            { label: 'Экономика', link: '/economy/' },
+            { label: 'Предметы и ресурсы', link: '/items-resources/' }
+          ]
+        },
+        {
+          label: 'Сервер и сообщество',
+          items: [
+            { label: 'Донат / привилегии', link: '/donate/' },
+            { label: 'FAQ', link: '/faq/' },
+            { label: 'Правила', link: '/rules/' },
+            { label: 'Команда проекта', link: '/team/' },
+            { label: 'Контакты / ссылки', link: '/contacts/' }
+          ]
+        },
+        {
+          label: 'Для редакторов',
+          items: [
+            { label: 'Как редактировать wiki', link: '/editing/' },
+            { label: 'Шаблон новой страницы', link: '/templates/new-page-template/' }
+          ]
+        }
+      ]
+    })
+  ]
+});
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,11 @@
+name: astral-wiki
+
+services:
+  wiki:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: astral-wiki
+    ports:
+      - "4321:80"
+    restart: unless-stopped
--- a/nginx/default.conf
+++ b/nginx/default.conf
@@ -0,0 +1,11 @@
+server {
+  listen 80;
+  server_name _;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /404.html;
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "server-wiki",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/starlight": "^0.38.3",
+    "astro": "^6.1.7"
+  }
+}
--- a/src/components/WikiEditLink.astro
+++ b/src/components/WikiEditLink.astro
@@ -0,0 +1,38 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+
+const { editUrl } = Astro.locals.starlightRoute;
+---
+
+{
+  editUrl && (
+    <a href={editUrl} class="wiki-edit-link sl-flex print:hidden" target="_blank" rel="noopener noreferrer">
+      <Icon name="pencil" size="1.05em" />
+      Редактировать страницу
+    </a>
+  )
+}
+
+<style>
+  @layer starlight.core {
+    .wiki-edit-link {
+      gap: 0.45rem;
+      align-items: center;
+      text-decoration: none;
+      color: var(--sl-color-gray-2);
+      font-weight: 600;
+      font-size: 0.92rem;
+      border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
+      border-radius: 0.18rem;
+      padding: 0.4rem 0.8rem;
+      background: color-mix(in srgb, var(--sl-color-bg-nav) 90%, transparent);
+      transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
+    }
+
+    .wiki-edit-link:hover {
+      color: var(--sl-color-white);
+      border-color: color-mix(in srgb, var(--sl-color-accent) 45%, transparent);
+      background: color-mix(in srgb, var(--sl-color-accent-low) 74%, transparent);
+    }
+  }
+</style>
--- a/src/components/WikiHeader.astro
+++ b/src/components/WikiHeader.astro
@@ -0,0 +1,140 @@
+---
+import config from 'virtual:starlight/user-config';
+
+import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
+import Search from 'virtual:starlight/components/Search';
+import SiteTitle from 'virtual:starlight/components/SiteTitle';
+import SocialIcons from 'virtual:starlight/components/SocialIcons';
+import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
+
+const shouldRenderSearch =
+  config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
+
+const topLinks = [
+  { label: 'Старт', href: '/getting-started/' },
+  { label: 'Гайды', href: '/guides/' },
+  { label: 'Механики', href: '/mechanics/' },
+  { label: 'FAQ', href: '/faq/' },
+  { label: 'Правила', href: '/rules/' }
+];
+---
+
+<div class="header wiki-header">
+  <div class="title-wrapper sl-flex">
+    <SiteTitle />
+    <nav class="wiki-top-nav" aria-label="Быстрая навигация">
+      {
+        topLinks.map((link) => (
+          <a href={link.href} class="wiki-top-nav__link">
+            {link.label}
+          </a>
+        ))
+      }
+    </nav>
+  </div>
+
+  <div class="sl-flex print:hidden">
+    {shouldRenderSearch && <Search />}
+  </div>
+
+  <div class="sl-hidden md:sl-flex print:hidden right-group">
+    <div class="sl-flex social-icons">
+      <SocialIcons />
+    </div>
+    <ThemeSelect />
+    <LanguageSelect />
+  </div>
+</div>
+
+<style>
+  @layer starlight.core {
+    .wiki-header {
+      display: flex;
+      gap: var(--sl-nav-gap);
+      justify-content: space-between;
+      align-items: center;
+      height: 100%;
+    }
+
+    .title-wrapper {
+      overflow: clip;
+      padding: 0.25rem;
+      margin: -0.25rem;
+      min-width: 0;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .wiki-top-nav {
+      display: none;
+      gap: 0.45rem;
+      align-items: center;
+    }
+
+    .wiki-top-nav__link {
+      border: 1px solid transparent;
+      border-radius: 0.18rem;
+      padding: 0.36rem 0.74rem;
+      text-decoration: none;
+      color: var(--sl-color-gray-2);
+      font-size: 0.82rem;
+      font-family: 'Sora', sans-serif;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+      transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
+    }
+
+    .wiki-top-nav__link:hover {
+      border-color: color-mix(in srgb, var(--sl-color-accent) 28%, transparent);
+      background: color-mix(in srgb, var(--sl-color-accent-low) 65%, transparent);
+      color: var(--sl-color-white);
+    }
+
+    .right-group,
+    .social-icons {
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .social-icons::after {
+      content: '';
+      height: 2rem;
+      border-inline-end: 1px solid var(--sl-color-gray-5);
+    }
+
+    @media (min-width: 64rem) {
+      .wiki-top-nav {
+        display: inline-flex;
+      }
+    }
+
+    @media (min-width: 50rem) {
+      :global(:root[data-has-sidebar]) {
+        --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+      }
+
+      :global(:root:not([data-has-toc])) {
+        --__toc-width: 0rem;
+      }
+
+      .wiki-header {
+        --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+        --__main-column-fr: calc(
+          (
+              100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
+                (2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
+                var(--sl-content-width)
+            ) / 2
+        );
+        display: grid;
+        grid-template-columns: minmax(
+            calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
+            auto
+          )
+          1fr auto;
+        align-content: center;
+      }
+    }
+  }
+</style>
+
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() })
+};
--- a/src/content/docs/about-server.md
+++ b/src/content/docs/about-server.md
@@ -0,0 +1,37 @@
+---
+title: "О сервере"
+description: "Концепция мира, формат сервера и основные принципы атмосферы."
+---
+
+## Концепция
+
+Сервер построен вокруг идеи «архива реальностей»: каждая локация выглядит как отдельный фрагмент мира со своей физикой и историей.
+
+### Формат
+
+- Java Edition
+- Выживание с RPG-элементами
+- Упор на исследование и кооператив
+
+## Лор в двух словах
+
+После Раскола Неба мир разделился на слои. Игроки находят обломки карт, восстанавливают порталы и открывают утраченные ремёсла.
+
+:::caution
+Некоторые сюжетные зоны открываются только после выполнения цепочки квестов.
+:::
+
+## Техническая база
+
+| Параметр | Значение |
+| --- | --- |
+| Версия | Актуальная стабильная сборка сервера |
+| Режимы | PvE, ивентовый PvP |
+| Экономика | Игроки + аукцион + контракты |
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/mechanics/">Механики</a> · <a href="/team/">Команда проекта</a>
+</div>
+
+
--- a/src/content/docs/contacts.md
+++ b/src/content/docs/contacts.md
@@ -0,0 +1,32 @@
+---
+title: "Контакты / ссылки"
+description: "Каналы связи, соцсети, поддержка и полезные внешние ресурсы."
+---
+
+## Официальные ссылки
+
+- Discord: `https://discord.gg/example`
+- GitHub wiki: `https://github.com/your-org/astral-archive`
+- Почта поддержки: `support@example.com`
+
+## Когда писать в поддержку
+
+1. Потеря предметов из-за серверного сбоя.
+2. Баги квестов и непроходимые этапы.
+3. Вопросы по платежам и привилегиям.
+
+## Шаблон тикета
+
+```text
+Ник: <ваш ник>
+Время: <дата и время>
+Проблема: <краткое описание>
+Шаги воспроизведения: <что вы делали>
+```
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/faq/">FAQ</a> · <a href="/team/">Команда проекта</a>
+</div>
+
+
--- a/src/content/docs/donate.md
+++ b/src/content/docs/donate.md
@@ -0,0 +1,33 @@
+---
+title: "Донат / привилегии"
+description: "Добровольная поддержка сервера, наборы и прозрачные правила привилегий."
+---
+
+## Принципы
+
+- Донат не должен ломать баланс мира.
+- Боевые преимущества ограничены и прозрачны.
+- Все пакеты имеют чёткое описание.
+
+## Уровни поддержки
+
+| Уровень | Что входит |
+| --- | --- |
+| Traveler | Косметика + расширенный /home |
+| Patron | Больше слотов хранилища + титул |
+| Curator | Эксклюзивные визуальные эффекты |
+
+## Политика возвратов
+
+Возвраты рассматриваются через тикет-систему в течение 7 дней после покупки.
+
+:::note
+Покупка привилегий - способ поддержать развитие сервера, а не обязательное условие комфортной игры.
+:::
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/rules/">Правила</a> · <a href="/contacts/">Контакты / ссылки</a>
+</div>
+
+
--- a/src/content/docs/economy.md
+++ b/src/content/docs/economy.md
@@ -0,0 +1,38 @@
+---
+title: "Экономика"
+description: "Валюты, рынки, аукцион, контракты и рекомендации по торговле."
+---
+
+## Валюты
+
+- `Aurum` - базовая торговая валюта.
+- `Echo` - редкая валютная единица для реликвий.
+
+## Как работает рынок
+
+### Аукцион
+
+Игроки выставляют предметы на открытый рынок.
+
+### Контракты
+
+Сделки между игроками с фиксированными условиями.
+
+## Мини-стратегия для старта
+
+| Шаг | Действие | Ожидаемый эффект |
+| --- | --- | --- |
+| 1 | Продавать излишки еды | Быстрый стартовый капитал |
+| 2 | Копить железо и редстоун | Стабильный спрос |
+| 3 | Вкладываться в алхимию | Высокая маржа |
+
+:::caution
+Не держи все активы в одном виде ресурса: цены цикличны.
+:::
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/items-resources/">Предметы и ресурсы</a> · <a href="/donate/">Донат / привилегии</a>
+</div>
+
+
--- a/src/content/docs/editing.md
+++ b/src/content/docs/editing.md
@@ -0,0 +1,64 @@
+---
+title: "Как редактировать wiki"
+description: "Простая инструкция по добавлению и изменению страниц в Markdown."
+---
+
+## Быстрый принцип
+
+Каждая статья - отдельный `.md`-файл в `src/content/docs/`.
+
+## Минимальный frontmatter
+
+```yaml
+---
+title: "Название страницы"
+description: "Короткое описание страницы"
+---
+```
+
+## Как добавить новую страницу
+
+1. Создай файл в `src/content/docs/`, например `new-biome.md`.
+2. Добавь frontmatter (`title`, `description`).
+3. Напиши контент в Markdown (заголовки, списки, таблицы, код).
+4. Добавь ссылку в `sidebar` в `astro.config.mjs`.
+
+## Полезные блоки Starlight
+
+```md
+:::note
+Заметка
+:::
+
+:::tip
+Подсказка
+:::
+
+:::caution
+Предупреждение
+:::
+
+:::danger
+Опасность
+:::
+```
+
+## Пример spoiler/details
+
+```md
+<details>
+  <summary>Показать секрет</summary>
+  Здесь скрытый текст.
+</details>
+```
+
+## Где редактируется меню
+
+Меню и порядок разделов настраиваются в `astro.config.mjs` -> `starlight({ sidebar: [...] })`.
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/templates/new-page-template/">Шаблон новой страницы</a>
+</div>
+
+
--- a/src/content/docs/faq.md
+++ b/src/content/docs/faq.md
@@ -0,0 +1,40 @@
+---
+title: "FAQ"
+description: "Ответы на частые вопросы игроков о запуске, прогрессе и аккаунте."
+---
+
+## Основные вопросы
+
+<details>
+  <summary>Как попасть на сервер?</summary>
+  Добавь адрес сервера в клиент Minecraft Java Edition и пройди короткое интро на спавне.
+</details>
+
+<details>
+  <summary>Можно ли играть одному?</summary>
+  Да. Большая часть контента доступна соло, но рейды и разломы удобнее проходить группой.
+</details>
+
+<details>
+  <summary>Что делать, если потерял вещи?</summary>
+  Проверь лог смертей и открой тикет в Discord с точным временем события.
+</details>
+
+## Технические вопросы
+
+### Минимальные рекомендации
+
+- 8 ГБ RAM на ПК
+- Java 21+
+- Стабильный интернет
+
+:::tip
+Перед обращением в поддержку приложи скриншот ошибки и список модов.
+:::
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/getting-started/">Начало игры</a> · <a href="/contacts/">Контакты / ссылки</a>
+</div>
+
+
--- a/src/content/docs/getting-started.md
+++ b/src/content/docs/getting-started.md
@@ -0,0 +1,51 @@
+---
+title: "Начало игры"
+description: "Пошаговый старт для нового игрока: от входа до первого безопасного убежища."
+---
+
+## Первый вход
+
+1. Зайди на сервер и пройди приветственный интро-квест.
+2. Получи стартовый набор у архивариуса на спавне.
+3. Выбери направление: эксплоринг, фермерство или ремесло.
+
+:::tip
+Не трать стартовые кристаллы сразу. Они пригодятся для первого портала.
+:::
+
+## Первые 30 минут
+
+### Шаг 1: базовые ресурсы
+
+Собери древесину, камень и минимум 16 единиц пищи.
+
+### Шаг 2: безопасная точка
+
+Отойди от спавна на 300-500 блоков и поставь временную базу.
+
+### Шаг 3: связь с рынком
+
+Открой аукцион и проверь текущие цены на еду и железо.
+
+## Полезные команды
+
+<div class="command-block">
+  /spawn
+  /home set
+  /home
+  /rtp
+  /ah
+</div>
+
+## Частые ошибки новичков
+
+- Строить базу в аномальной зоне без якоря.
+- Продавать редкие руды до изучения их крафтов.
+- Игнорировать дневные серверные задания.
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/guides/">Гайды</a> · <a href="/economy/">Экономика</a> · <a href="/faq/">FAQ</a>
+</div>
+
+
--- a/src/content/docs/guides.md
+++ b/src/content/docs/guides.md
@@ -0,0 +1,50 @@
+---
+title: "Гайды"
+description: "Практические сценарии: выживание, прогресс, босс-раны и командная игра."
+---
+
+## Навигатор по гайдам
+
+<div class="lore-grid">
+  <article class="lore-card">
+    <h3>Соло-старт</h3>
+    <p>Как стабильно развиться одному игроку за первые два вечера.</p>
+  </article>
+  <article class="lore-card">
+    <h3>Гильдейский старт</h3>
+    <p>Роли в группе, распределение ресурсов и ротация задач.</p>
+  </article>
+  <article class="lore-card">
+    <h3>Босс-раны</h3>
+    <p>Минимальный набор, тактики и контроль рисков на арене.</p>
+  </article>
+</div>
+
+## Пример структурированного гайда
+
+### Подготовка
+
+- 32+ еды
+- Броня не ниже железной
+- 2 тотема или 3 зелья лечения
+
+### Выполнение
+
+1. Активируй обелиск.
+2. Удерживай центральную платформу 3 волны.
+3. Сфокусируй урон по призывателю на 4-й фазе.
+
+### Завершение
+
+Разбери добычу по ролям: танк, саппорт, дамагер.
+
+:::danger
+Не заходи в событие с поломанной бронёй: штраф на урон и критический риск потери лута.
+:::
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/mechanics/">Механики</a> · <a href="/professions/">Профессии / классы / расы</a>
+</div>
+
+
--- a/src/content/docs/index.md
+++ b/src/content/docs/index.md
@@ -0,0 +1,70 @@
+---
+title: "Astral Archive"
+description: "Атмосферная wiki Minecraft-сервера с лором, механиками, гайдами и правилами."
+hero:
+  tagline: Премиальный архив нереального мира
+  actions:
+    - text: Начать игру
+      link: /getting-started/
+      icon: right-arrow
+      variant: primary
+    - text: Читать правила
+      link: /rules/
+      variant: minimal
+---
+
+## Что это за вики
+
+Этот портал описывает мир сервера как единый архив знаний: от старта и экономики до лора, профессий и редких ресурсов.
+
+:::note
+Все страницы редактируются через обычные `.md`-файлы с YAML frontmatter.
+:::
+
+## Ключевые разделы
+
+<div class="lore-grid">
+  <article class="lore-card">
+    <h3>Начало игры</h3>
+    <p>Первые шаги, набор выживания, безопасная маршрутизация по миру.</p>
+    <a href="/getting-started/">Открыть раздел</a>
+  </article>
+
+  <article class="lore-card">
+    <h3>Механики</h3>
+    <p>Мана, реликвии, экспедиции, погодные аномалии и серверные события.</p>
+    <a href="/mechanics/">Изучить механики</a>
+  </article>
+
+  <article class="lore-card">
+    <h3>Экономика</h3>
+    <p>Торги, налоги, курсы валют, рыночные циклы и ремесленные цепочки.</p>
+    <a href="/economy/">Перейти к экономике</a>
+  </article>
+</div>
+
+## Почему сервер особенный
+
+- Нелинейный лор: экспедиции меняют доступ к зонам.
+- Мягкая RPG-система без перегруза интерфейса.
+- Экономика с живым спросом, а не фиксированным NPC-магазином.
+- Еженедельные мировые события с редкими наградами.
+
+:::tip
+Если не знаешь, с чего начать, открой [Начало игры](/getting-started/) и выполни первые три шага из чеклиста.
+:::
+
+## Преимущества для игроков
+
+| Особенность | Что даёт игроку |
+| --- | --- |
+| Порталы эпох | Быстрый доступ к биомам и данжам |
+| Гильдейская система | Совместные бонусы, квесты, рейтинги |
+| Артефакты | Уникальные эффекты для PvE и PvP |
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/about-server/">О сервере</a> · <a href="/guides/">Гайды</a> · <a href="/faq/">FAQ</a>
+</div>
+
+
--- a/src/content/docs/items-resources.md
+++ b/src/content/docs/items-resources.md
@@ -0,0 +1,42 @@
+---
+title: "Предметы и ресурсы"
+description: "Каталог ключевых материалов, редких артефактов и их применение."
+---
+
+## Базовые ресурсы
+
+- Древесина
+- Камень
+- Железо
+- Кварц
+
+## Редкие материалы
+
+### Пыль кометы
+
+Используется для усиления портальных якорей.
+
+### Лунный обсидиан
+
+Нужен для защитных печатей и высокоуровневых рецептов.
+
+## Пример блока внимания
+
+:::danger
+Артефакты с меткой «Связанный» нельзя передавать или продавать.
+:::
+
+## Таблица предметов
+
+| Предмет | Где найти | Для чего нужен |
+| --- | --- | --- |
+| Пыль кометы | Небесный дождь | Ритуалы усиления |
+| Лунный обсидиан | Глубинные разломы | Структуры защиты |
+| Эхо-кристалл | Рейдовые боссы | Улучшение реликвий |
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/mechanics/">Механики</a> · <a href="/guides/">Гайды</a>
+</div>
+
+
--- a/src/content/docs/mechanics.md
+++ b/src/content/docs/mechanics.md
@@ -0,0 +1,41 @@
+---
+title: "Механики"
+description: "Основные игровые системы: энергия, климат, аномалии и мировые события."
+---
+
+## Энергия эфира
+
+Эфир усиливает способности и влияет на доступ к скрытым зонам.
+
+| Уровень эфира | Эффект |
+| --- | --- |
+| 0-20 | Базовые действия |
+| 21-60 | Бонус к добыче и скорости |
+| 61+ | Открываются артефактные узлы |
+
+### Как повышать эфир
+
+- Выполнять ежедневные контракты.
+- Закрывать аномалии в группе.
+- Исследовать архивные башни.
+
+## Мировые события
+
+### Разломы
+
+Появляются раз в несколько часов и требуют командной обороны.
+
+### Небесный дождь
+
+Даёт редкие ингредиенты, но привлекает элитных мобов.
+
+:::note
+`h2` и `h3` автоматически попадают в оглавление страницы справа.
+:::
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/items-resources/">Предметы и ресурсы</a> · <a href="/rules/">Правила</a>
+</div>
+
+
--- a/src/content/docs/professions.md
+++ b/src/content/docs/professions.md
@@ -0,0 +1,42 @@
+---
+title: "Профессии / классы / расы"
+description: "Гибкая RPG-система: роли, бонусы, ограничения и синергия в группе."
+---
+
+## Расы
+
+- Астралы: бонус к мане и исследованию.
+- Форджеры: ускоренный крафт и переработка руд.
+- Вейлборны: скрытность и мобильность.
+
+## Классы
+
+### Страж
+
+Высокая выживаемость и контроль зоны.
+
+### Проводник
+
+Баффы команды и лечение в бою.
+
+### Пилигрим
+
+Урон по одиночным целям и ускорение перемещения.
+
+## Профессии
+
+1. Алхимик
+2. Инженер
+3. Хранитель ферм
+4. Архивариус-торговец
+
+:::tip
+Лучше выбрать профессию, которая дополняет класс, а не дублирует его сильные стороны.
+:::
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/economy/">Экономика</a> · <a href="/guides/">Гайды</a>
+</div>
+
+
--- a/src/content/docs/rules.md
+++ b/src/content/docs/rules.md
@@ -0,0 +1,35 @@
+---
+title: "Правила"
+description: "Основные правила сервера, принципы поведения и санкции."
+---
+
+## Базовые правила
+
+1. Уважай других игроков и их постройки.
+2. Не используй читы, дюпы и сторонние эксплойты.
+3. Не нарушай атмосферу сервера токсичным поведением.
+
+## Ограничения
+
+- Запрещены лаг-машины.
+- Запрещён гриферский контент.
+- Запрещены обходы автоматических проверок.
+
+:::caution
+Незнание правил не освобождает от ответственности.
+:::
+
+## Санкции
+
+| Нарушение | Мера |
+| --- | --- |
+| Токсичное общение | Мут/временный бан |
+| Использование читов | Перманентный бан |
+| Вред инфраструктуре | Бан + откат ущерба |
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/faq/">FAQ</a> · <a href="/contacts/">Контакты / ссылки</a>
+</div>
+
+
--- a/src/content/docs/team.md
+++ b/src/content/docs/team.md
@@ -0,0 +1,34 @@
+---
+title: "Команда проекта"
+description: "Кто развивает сервер: роли, ответственность и зоны поддержки."
+---
+
+## Состав команды
+
+| Роль | Зона ответственности |
+| --- | --- |
+| Lead Admin | Архитектура мира и баланс |
+| Content Designer | Квесты, лор, события |
+| Tech Admin | Стабильность, плагины, бэкапы |
+| Community Manager | Коммуникация с игроками |
+
+## Как мы работаем
+
+### Принцип 1
+
+Решения по балансу принимаются на основе статистики, а не эмоций.
+
+### Принцип 2
+
+Критические правки публикуются с changelog.
+
+## Как присоединиться
+
+Следи за открытыми ролями в Discord и оставляй заявку с примерами работ.
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/contacts/">Контакты / ссылки</a> · <a href="/about-server/">О сервере</a>
+</div>
+
+
--- a/src/content/docs/templates/new-page-template.md
+++ b/src/content/docs/templates/new-page-template.md
@@ -0,0 +1,48 @@
+---
+title: "Шаблон новой страницы"
+description: "Готовый шаблон Markdown-страницы для быстрого добавления новых материалов."
+---
+
+## Копируй и используй
+
+```md
+---
+title: "Название раздела"
+description: "Краткое описание страницы"
+---
+
+## Введение
+
+Коротко опиши, что на странице.
+
+## Основной раздел
+
+### Подраздел
+
+- Пункт 1
+- Пункт 2
+
+:::tip
+Добавляй подсказки через стандартные блоки Starlight.
+:::
+
+## Таблица
+
+| Колонка | Значение |
+| --- | --- |
+| Пример | Текст |
+
+<div class="see-also">
+  <p>Смотри также</p>
+  <a href="/getting-started/">Начало игры</a>
+</div>
+```
+
+## Рекомендации по структуре
+
+- Один файл = одна тема.
+- Пиши короткие абзацы.
+- Используй `h2` и `h3`, чтобы оглавление было полезным.
+- Добавляй блок «Смотри также» в конце страницы.
+
+
--- a/src/styles/wiki-egames.css
+++ b/src/styles/wiki-egames.css
@@ -0,0 +1,442 @@
+@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;600&display=swap');
+
+:root {
+  --wiki-purple-1: #4e6ea8;
+  --wiki-purple-2: #5f86c8;
+  --wiki-purple-3: #739de0;
+  --wiki-blue-1: #3f7bcc;
+  --wiki-blue-2: #4aa7d9;
+  --wiki-white: #ffffff;
+
+  --wiki-bg: #f3f6fb;
+  --wiki-bg-soft: #eaf0f9;
+  --wiki-card: #ffffff;
+  --wiki-text: #1f2735;
+  --wiki-text-soft: #5a6577;
+  --wiki-border: #c9d4e3;
+
+  --sl-font: 'IBM Plex Sans', sans-serif;
+  --sl-font-system: 'IBM Plex Sans', sans-serif;
+  --sl-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --sl-color-white: #1e2738;
+  --sl-color-gray-1: #2f3a4d;
+  --sl-color-gray-2: #4c5a72;
+  --sl-color-gray-3: #6a7a92;
+  --sl-color-gray-4: #8d9bb2;
+  --sl-color-gray-5: #d1dbe8;
+  --sl-color-gray-6: #e4ebf4;
+  --sl-color-gray-7: #ffffff;
+  --sl-color-black: #ffffff;
+
+  --sl-color-accent-low: color-mix(in srgb, var(--wiki-blue-2) 16%, #ffffff);
+  --sl-color-accent: color-mix(in srgb, var(--wiki-blue-2) 64%, #456ca8);
+  --sl-color-accent-high: #244b86;
+
+  --sl-color-blue-low: color-mix(in srgb, var(--wiki-blue-2) 18%, #ffffff);
+  --sl-color-blue: #5f9ce2;
+  --sl-color-blue-high: #204d86;
+
+  --sl-color-purple-low: color-mix(in srgb, var(--wiki-purple-2) 14%, #ffffff);
+  --sl-color-purple: #7b9cd0;
+  --sl-color-purple-high: #274d84;
+
+  --sl-color-orange-low: #fff0e2;
+  --sl-color-orange: #eea467;
+  --sl-color-orange-high: #8c3f12;
+
+  --sl-color-red-low: #ffe8ed;
+  --sl-color-red: #f28ca3;
+  --sl-color-red-high: #8d2d45;
+
+  --sl-color-text-accent: #2e5a99;
+  --sl-color-text-invert: #ffffff;
+  --sl-color-bg: var(--wiki-bg);
+  --sl-color-bg-nav: color-mix(in srgb, #f8fbff 90%, #e8eff9);
+  --sl-color-bg-sidebar: color-mix(in srgb, #f5f9ff 90%, #e5edf8);
+  --sl-color-bg-inline-code: #edf3fb;
+  --sl-color-hairline-light: #dbe5f2;
+  --sl-color-hairline: var(--wiki-border);
+  --sl-color-hairline-shade: #ccd7e7;
+  --sl-color-backdrop-overlay: hsl(219 28% 22% / 0.24);
+
+  --sl-shadow-sm: 0 4px 10px hsl(218 33% 35% / 0.1);
+  --sl-shadow-md: 0 10px 22px hsl(218 34% 30% / 0.12);
+  --sl-shadow-lg: 0 16px 32px hsl(218 34% 28% / 0.16);
+}
+
+:root[data-theme='dark'] {
+  --wiki-bg: #090d14;
+  --wiki-bg-soft: #0d121a;
+  --wiki-card: #131a24;
+  --wiki-text: #eef2fb;
+  --wiki-text-soft: #a7b1c7;
+  --wiki-border: #283240;
+  --sl-color-white: #eff3fc;
+  --sl-color-gray-1: #d7deee;
+  --sl-color-gray-2: #a8b4ce;
+  --sl-color-gray-3: #8591ab;
+  --sl-color-gray-4: #657089;
+  --sl-color-gray-5: #2a3347;
+  --sl-color-gray-6: #1b2232;
+  --sl-color-gray-7: #151b28;
+  --sl-color-black: #0a0e16;
+  --sl-color-accent-low: color-mix(in srgb, var(--wiki-blue-2) 14%, #1a2230);
+  --sl-color-accent: color-mix(in srgb, var(--wiki-blue-2) 65%, #7ea2d6);
+  --sl-color-accent-high: #d5e7ff;
+  --sl-color-blue-low: color-mix(in srgb, var(--wiki-blue-2) 17%, #172739);
+  --sl-color-blue: #7ab9f7;
+  --sl-color-blue-high: #c6e0ff;
+  --sl-color-purple-low: color-mix(in srgb, var(--wiki-purple-2) 16%, #223149);
+  --sl-color-purple: #9db8e6;
+  --sl-color-purple-high: #d8e8ff;
+  --sl-color-orange-low: #3f2a23;
+  --sl-color-orange: #ffbc89;
+  --sl-color-orange-high: #ffd3b3;
+  --sl-color-red-low: #412231;
+  --sl-color-red: #ff9eb4;
+  --sl-color-red-high: #ffd0db;
+  --sl-color-text-accent: #c8dcfb;
+  --sl-color-text-invert: #101420;
+  --sl-color-bg-nav: color-mix(in srgb, #101721 96%, #192433);
+  --sl-color-bg-sidebar: color-mix(in srgb, #101721 95%, #182534);
+  --sl-color-bg-inline-code: #182232;
+  --sl-color-hairline-light: #2c364a;
+  --sl-color-hairline-shade: #242c3e;
+  --sl-color-backdrop-overlay: hsl(240 30% 5% / 0.62);
+  --sl-shadow-sm: 0 8px 14px hsl(222 30% 3% / 0.26);
+  --sl-shadow-md: 0 14px 24px hsl(222 34% 3% / 0.34);
+  --sl-shadow-lg: 0 20px 34px hsl(222 38% 3% / 0.44);
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  color: var(--wiki-text);
+  line-height: 1.66;
+  background:
+    radial-gradient(circle at 12% -18%, color-mix(in srgb, var(--wiki-blue-2) 8%, transparent), transparent 36%),
+    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--wiki-purple-2) 6%, transparent), transparent 38%),
+    linear-gradient(180deg, var(--wiki-bg), var(--wiki-bg-soft));
+  background-attachment: fixed;
+}
+
+.site-title {
+  font-family: 'Sora', sans-serif;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.header {
+  backdrop-filter: blur(12px);
+  background: color-mix(in srgb, var(--sl-color-bg-nav) 94%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--sl-color-hairline) 92%, transparent);
+}
+
+.sidebar-pane {
+  background:
+    radial-gradient(circle at 8% -4%, color-mix(in srgb, var(--wiki-purple-2) 7%, transparent), transparent 38%),
+    var(--sl-color-bg-sidebar);
+}
+
+.sidebar-content a {
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 50%, transparent);
+  border-radius: 0.2rem;
+  transition: border-color 170ms ease, background 170ms ease, color 170ms ease;
+}
+
+.sidebar-content a:hover {
+  border-color: color-mix(in srgb, var(--sl-color-accent) 34%, transparent);
+  background: color-mix(in srgb, var(--sl-color-accent-low) 70%, transparent);
+}
+
+.sidebar-content :is(a[aria-current='page'], a[aria-current='page']:hover) {
+  border-color: color-mix(in srgb, var(--sl-color-accent) 52%, transparent);
+  background: linear-gradient(
+    130deg,
+    color-mix(in srgb, var(--wiki-purple-3) 14%, transparent),
+    color-mix(in srgb, var(--wiki-blue-2) 12%, transparent)
+  );
+  color: var(--sl-color-white);
+}
+
+.content-panel > .sl-container {
+  border-radius: 0.2rem;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 100%, transparent);
+  background: color-mix(in srgb, var(--wiki-card) 97%, transparent);
+  box-shadow: var(--sl-shadow-sm);
+  max-width: min(100%, 76rem);
+  margin-inline: auto;
+  padding: 1.2rem 1.35rem;
+}
+
+/* Выравниваем первый заголовок страницы: одинаковый воздух сверху и снизу. */
+.content-panel:first-of-type > .sl-container {
+  padding-top: 1.28rem;
+  padding-bottom: 1.28rem;
+}
+
+.content-panel:first-of-type h1 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 1.16;
+}
+
+.hero {
+  border-radius: 0.2rem;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 94%, transparent);
+  background:
+    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--wiki-purple-3) 10%, transparent), transparent 55%),
+    radial-gradient(circle at 95% 10%, color-mix(in srgb, var(--wiki-blue-2) 10%, transparent), transparent 53%),
+    color-mix(in srgb, var(--wiki-card) 98%, transparent);
+}
+
+.hero .stack {
+  text-align: center;
+  align-items: center;
+}
+
+.hero .copy {
+  align-items: center;
+}
+
+.hero .actions {
+  justify-content: center;
+}
+
+.hero .tagline {
+  color: var(--wiki-text-soft);
+}
+
+.hero .sl-link-button {
+  border-radius: 0.18rem;
+  transition: transform 170ms ease, box-shadow 170ms ease;
+}
+
+.hero .sl-link-button:hover {
+  transform: translateY(-1px);
+}
+
+.sl-markdown-content h1,
+.sl-markdown-content h2,
+.sl-markdown-content h3 {
+  font-family: 'Sora', sans-serif;
+  letter-spacing: 0.005em;
+  line-height: 1.24;
+  color: var(--sl-color-white);
+}
+
+.sl-markdown-content h1 {
+  margin-top: 0;
+  margin-bottom: 0.8rem;
+}
+
+.sl-markdown-content h2 {
+  margin-top: 2rem;
+  margin-bottom: 0.72rem;
+  padding-bottom: 0.35rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--sl-color-hairline) 85%, transparent);
+}
+
+.sl-markdown-content h3 {
+  margin-top: 1.35rem;
+  margin-bottom: 0.5rem;
+}
+
+.sl-markdown-content p,
+.sl-markdown-content li {
+  color: var(--wiki-text);
+}
+
+.sl-markdown-content p {
+  margin-block: 0.7rem;
+}
+
+.sl-markdown-content ul,
+.sl-markdown-content ol {
+  margin-block: 0.75rem 1rem;
+  padding-inline-start: 1.3rem;
+}
+
+.sl-markdown-content li + li {
+  margin-top: 0.28rem;
+}
+
+.sl-markdown-content a {
+  text-underline-offset: 0.18em;
+  text-decoration-thickness: 0.07em;
+}
+
+.sl-markdown-content code {
+  border-radius: 0.16rem;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 78%, transparent);
+  background: var(--sl-color-bg-inline-code);
+}
+
+.expressive-code,
+pre {
+  border-radius: 0.2rem;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 86%, transparent);
+}
+
+.pagination-links a {
+  border-radius: 0.18rem;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
+  background: color-mix(in srgb, var(--sl-color-bg-nav) 90%, transparent);
+  transition: border-color 170ms ease, background 170ms ease;
+}
+
+.pagination-links a:hover {
+  border-color: color-mix(in srgb, var(--sl-color-accent) 40%, transparent);
+  background: color-mix(in srgb, var(--sl-color-accent-low) 70%, transparent);
+}
+
+starlight-toc nav {
+  border-radius: 0.18rem;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
+  background: color-mix(in srgb, var(--wiki-card) 92%, transparent);
+  padding: 0.82rem 0.9rem;
+}
+
+starlight-toc h2 {
+  margin: 0 0 0.58rem;
+  font-size: 1.02rem;
+  line-height: 1.3;
+}
+
+starlight-toc ul {
+  margin: 0;
+  padding: 0;
+}
+
+starlight-toc li {
+  margin: 0;
+}
+
+starlight-toc ul ul {
+  margin-top: 0.18rem;
+  padding-left: 0.72rem;
+}
+
+starlight-toc a {
+  display: block;
+  padding: 0.16rem 0;
+  line-height: 1.38;
+}
+
+.starlight-aside {
+  border-radius: 0.2rem;
+  border-inline-start-width: 0.26rem;
+}
+
+.sl-markdown-content table {
+  border-radius: 0.16rem;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.9rem 0 1.15rem;
+}
+
+.sl-markdown-content th,
+.sl-markdown-content td {
+  padding: 0.76rem 0.95rem;
+  line-height: 1.5;
+}
+
+.sl-markdown-content :is(th:first-child, td:first-child) {
+  padding-inline-start: 0.95rem;
+}
+
+.sl-markdown-content :is(th:last-child, td:last-child) {
+  padding-inline-end: 0.95rem;
+}
+
+.sl-markdown-content details {
+  border-radius: 0.16rem;
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 86%, transparent);
+  background: color-mix(in srgb, var(--wiki-card) 93%, transparent);
+  padding: 0.72rem 0.82rem;
+}
+
+.sl-markdown-content details summary {
+  font-weight: 700;
+}
+
+.lore-grid {
+  display: grid;
+  gap: 1.05rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  margin: 1.05rem 0 1.25rem;
+}
+
+.lore-card {
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
+  border-radius: 0.2rem;
+  padding: 1rem 1.02rem;
+  background:
+    linear-gradient(
+      140deg,
+      color-mix(in srgb, var(--wiki-purple-3) 7%, transparent),
+      color-mix(in srgb, var(--wiki-blue-2) 7%, transparent)
+    ),
+    color-mix(in srgb, var(--wiki-card) 94%, transparent);
+  transition: transform 170ms ease, border-color 170ms ease;
+}
+
+.lore-card:hover {
+  transform: translateY(-2px);
+  border-color: color-mix(in srgb, var(--sl-color-accent) 42%, transparent);
+}
+
+.lore-card h3 {
+  margin-top: 0;
+  margin-bottom: 0.45rem;
+}
+
+.command-block {
+  border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 88%, transparent);
+  border-radius: 0.16rem;
+  padding: 0.78rem 0.88rem;
+  background: color-mix(in srgb, var(--wiki-card) 92%, transparent);
+  font-family: var(--sl-font-mono);
+}
+
+.see-also {
+  margin-top: 1.2rem;
+  padding: 0.82rem 0.95rem;
+  border-radius: 0.16rem;
+  border: 1px dashed color-mix(in srgb, var(--sl-color-accent) 36%, transparent);
+  background: color-mix(in srgb, var(--sl-color-accent-low) 72%, transparent);
+}
+
+.see-also p {
+  margin: 0 0 0.45rem;
+  font-weight: 700;
+}
+
+@media (min-width: 50rem) {
+  .hero {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    padding-block: clamp(2rem, calc(1.2rem + 4vmin), 4.8rem);
+    text-align: center;
+  }
+
+  .hero > img,
+  .hero > .hero-html {
+    order: 0;
+    width: min(70%, 18rem);
+  }
+}
+
+@media (max-width: 50rem) {
+  .content-panel > .sl-container {
+    border-radius: 0.16rem;
+    padding: 1rem 0.92rem;
+  }
+}