[html]<style>
.vtm-tabs-container {
  max-width: 850px;
  margin: 30px auto;
  font-family: 'Georgia', serif;
  color: #eaeaea;
  background-color: #041520;
  border: 1px solid #940808;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
}

.vtm-tabs-header {
  display: flex;
  background-color: #350404;
  border-bottom: 1px solid #9babb6;
}

.vtm-tab-btn {
  flex: 1;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  background-color: #041520;
  color: #9babb6;
  border: none;
  outline: none;
  font-weight: bold;
  letter-spacing: 1px;
  transition: background 0.3s, color 0.3s;
}

.vtm-tab-btn:hover {
  background-color: #400404;
  color: #9babb6;
}

.vtm-tab-btn.active {
  background-color: #400404;
  color: #9babb6;
}

.vtm-tab-content {
  display: none;
  padding: 25px 30px;
}

.vtm-tab-content.active {
  display: block;
}

.vtm-tab-content h2 {
  color: #9b524b;
  font-size: 22px;
  margin-bottom: 12px;
  border-bottom: 1px solid #444;
}

.vtm-tab-content p {
  margin: 10px 0;
  line-height: 1.6;
}
</style>

<div class="vtm-tabs-container">
  <div class="vtm-tabs-header">
    <button class="vtm-tab-btn active" onclick="showTab(0)">Общее</button>
    <button class="vtm-tab-btn" onclick="showTab(1)">Способности</button>
    <button class="vtm-tab-btn" onclick="showTab(2)">История</button>
  </div>

  <div class="vtm-tab-content active">
    <h2>Общие сведения</h2>
    <p><b>Имя и псевдонимы:</b> [полное имя и прозвища]</p>
    <p><b>Клан:</b> [Тремер, Цимисхи, Бруха и т.д.]</p>
    <p><b>Секта:</b> [Камарилья, Шабаш, Анархи, Независимый и пр.]</p>
    <p><b>Поколение:</b> [от 7 до 15]</p>
    <p><b>Возраст:</b> [реальный / с момента Объятия]</p>
    <p><b>Дата и место рождения:</b> [по желанию]</p>
    <p><b>Дата Объятия:</b> [примерно]</p>
    <p><b>Сир:</b> [имя и клан / неизвестен]</p>
    <p><b>Принадлежность:</b> [город, свита, стая, ковен и пр.]</p>
  </div>

  <div class="vtm-tab-content">
    <h2>Дисциплины и черты</h2>
    <p><b>Внешность:</b> [рост, телосложение, черты, одежда]</p>
    <p><b>Аура и первое впечатление:</b> [атмосфера, что чувствуют рядом]</p>
    <p><b>Черты характера:</b> [3–5 ключевых черт]</p>
    <p><b>Путь / мораль:</b> [Путь Человечности, Путь Ночи и пр.]</p>
    <p><b>Привычки и повадки:</b> [жесты, речь, странности]</p>
    <p><b>Дисциплины:</b> [основные и побочные, уровни, эффекты]</p>
    <p><b>Сила Воли:</b> [0–10, если используется]</p>
    <p><b>Кровавый резерв:</b> [если используется]</p>
    <p><b>Дополнения (Backgrounds):</b> [Контакты, Ресурсы, Влияние и т.п.]</p>
  </div>

  <div class="vtm-tab-content">
    <h2>История и связи</h2>
    <p><b>История персонажа:</b> [до и после Объятия, мотивация, ключевые события]</p>
    <p><b>Секреты и уязвимости:</b> [по желанию — можно вынести под спойлер]</p>
    <p><b>Отношения:</b> [близкие, враги, должники, цели]</p>
    <p><b>Примечания от игрока:</b> [пожелания к отыгрышу, связь, сюжет и пр.]</p>
  </div>
</div>

<script>
function showTab(index) {
  const tabs = document.querySelectorAll(".vtm-tab-btn");
  const contents = document.querySelectorAll(".vtm-tab-content");

  tabs.forEach((tab, i) => {
    tab.classList.toggle("active", i === index);
    contents[i].classList.toggle("active", i === index);
  });
}
</script>

[/html]