[html]
<div id="aud-monolith">
<style>
#aud-monolith {
  --grey:#756F73;
  --plum:#35152F;
  --berry:#963F59;
  --sand:#C8B9A5;
  --paper:#F0E9E2;
  --muted:#C8BEC2;
  --dark:#171317;
  background:var(--dark);
  color:var(--paper);
  border:1px solid var(--grey);
  max-width:1000px;
  margin:20px auto;
  font:16px/1.9 Arial,Helvetica,sans-serif;
  overflow:hidden;
}
#aud-monolith * {box-sizing:border-box}
#aud-monolith button {font:inherit;cursor:pointer}
#aud-monolith .head {
  text-align:center;
  padding:42px 22px 32px;
  background:
    radial-gradient(ellipse at 50% 0%,#963F5950,transparent 68%),
    linear-gradient(145deg,#35152F,#171317 80%);
  border-bottom:3px solid var(--berry);
}
#aud-monolith .sigil {
  color:var(--sand);
  font-size:23px;
  letter-spacing:10px;
}
#aud-monolith .eyebrow {
  color:var(--sand);
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:11px;
}
#aud-monolith h1 {
  color:var(--sand);
  font-size:clamp(30px,5vw,48px);
  line-height:1.2;
  letter-spacing:3px;
  font-weight:500;
  margin:15px 0;
}
#aud-monolith .intro {
  color:#D7C9CE;
  max-width:650px;
  margin:auto;
  font-size:15px;
  line-height:1.85;
}
#aud-monolith .now {
  display:inline-block;
  margin-top:22px;
  padding:7px 16px;
  border:1px solid var(--berry);
  color:var(--sand);
  font-size:12px;
  letter-spacing:2px;
}
#aud-monolith .slider {
  padding:26px;
}
#aud-monolith .topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:var(--sand);
  font-size:12px;
  letter-spacing:1px;
}
#aud-monolith .progress {
  height:4px;
  background:#756F7360;
  margin:17px 0 23px;
  overflow:hidden;
}
#aud-monolith .progress-fill {
  height:100%;
  width:16.6667%;
  background:var(--berry);
  transition:width .3s ease;
}
#aud-monolith .navigation {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  margin-bottom:26px;
}
#aud-monolith .step {
  padding:11px 3px;
  color:var(--muted);
  background:#211921;
  border:1px solid #756F7380;
  font-size:12px;
  transition:background .2s,border-color .2s;
}
#aud-monolith .step strong {
  display:block;
  color:var(--sand);
  font-size:17px;
  font-weight:500;
}
#aud-monolith .step.active {
  background:var(--berry);
  border-color:var(--sand);
  color:white;
}
#aud-monolith .step.active strong {color:white}
#aud-monolith .viewport {
  min-height:400px;
}
#aud-monolith .slide {display:none}
#aud-monolith .slide.active {
  display:block;
  animation:audEnter .3s ease;
}
#aud-monolith .era-tag {
  color:#D9A5B3;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:3px;
}
#aud-monolith .era-title {
  color:var(--sand);
  font-size:clamp(25px,4vw,35px);
  font-weight:500;
  line-height:1.3;
  margin:8px 0 9px;
}
#aud-monolith .era-date {
  color:#D9A5B3;
  font-size:12px;
  letter-spacing:.7px;
  padding-bottom:18px;
  border-bottom:1px solid #756F7370;
  margin-bottom:23px;
}
#aud-monolith p {
  font-size:16px;
  line-height:1.95;
  margin:0 0 19px;
  color:var(--paper);
}
#aud-monolith .highlight {
  margin:24px 0;
  padding:17px 20px;
  border-left:4px solid var(--berry);
  background:#963F591A;
}
#aud-monolith .highlight b {
  display:block;
  color:var(--sand);
  font-size:16px;
  margin-bottom:5px;
}
#aud-monolith .highlight p {
  margin:0;
  font-size:15px;
}
#aud-monolith .event-heading {
  margin:28px 0 14px;
  color:var(--sand);
  font-size:20px;
  font-weight:500;
}
#aud-monolith .events {
  border-left:1px solid var(--grey);
  margin:22px 0 25px 5px;
}
#aud-monolith .event {
  position:relative;
  padding:0 0 23px 22px;
}
#aud-monolith .event:last-child {padding-bottom:0}
#aud-monolith .event:before {
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--berry);
  border:2px solid var(--sand);
  left:-5px;
  top:8px;
}
#aud-monolith .event-date {
  color:var(--sand);
  font-size:11px;
  letter-spacing:.8px;
  margin-bottom:5px;
}
#aud-monolith .event-title {
  color:#D9A5B3;
  font-size:17px;
  font-weight:600;
  margin-bottom:5px;
}
#aud-monolith .event p {
  font-size:15px;
  line-height:1.85;
  margin:0;
}
#aud-monolith .controls {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #756F7370;
}
#aud-monolith .control {
  background:#211921;
  color:var(--sand);
  border:1px solid var(--grey);
  padding:10px 17px;
  font-size:13px;
}
#aud-monolith .control:hover:not(:disabled) {
  background:var(--berry);
  border-color:var(--sand);
  color:white;
}
#aud-monolith .control:disabled {
  opacity:.35;
  cursor:default;
}
#aud-monolith .counter {
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
#aud-monolith .footer {
  padding:19px 12px;
  text-align:center;
  color:var(--sand);
  background:#211921;
  border-top:1px solid var(--grey);
  font-size:10px;
  letter-spacing:3px;
}
@keyframes audEnter {
  from {opacity:0;transform:translateY(7px)}
  to {opacity:1;transform:translateY(0)}
}
@media(max-width:600px) {
  #aud-monolith .head {padding:32px 16px}
  #aud-monolith .slider {padding:17px 13px}
  #aud-monolith .navigation {gap:3px}
  #aud-monolith .step {font-size:10px;padding:9px 1px}
  #aud-monolith .step strong {font-size:15px}
  #aud-monolith p {font-size:15px;line-height:1.85}
  #aud-monolith .controls {gap:6px}
  #aud-monolith .control {padding:9px 10px;font-size:12px}
  #aud-monolith .viewport {min-height:0}
}
</style>

<header class="head">
  <div class="sigil">✧ ☽ ✧</div>
  <div class="eyebrow">Единая летопись мира</div>
  <h1>Ауденвилль</h1>
  <p class="intro">
    Шесть эпох истории. Древние королевства, войны,
    изгнанные драконы и магия, способная разорвать
    саму ткань мира.
  </p>
  <div class="now">2783 ГОД · ШЕСТАЯ ЭПОХА</div>
</header>

<main class="slider">
  <div class="topline">
    <span id="aud-current-name">ПЕРВАЯ ЭПОХА</span>
    <span id="aud-current-year">3000 ЛЕТ</span>
  </div>

  <div class="progress">
    <div class="progress-fill" id="aud-progress"></div>
  </div>

  <nav class="navigation" aria-label="Выбор эпохи">
    <button class="step active" data-index="0">
      <strong>I</strong>Создание
    </button>
    <button class="step" data-index="1">
      <strong>II</strong>Королевства
    </button>
    <button class="step" data-index="2">
      <strong>III</strong>Войны
    </button>
    <button class="step" data-index="3">
      <strong>IV</strong>Драконы
    </button>
    <button class="step" data-index="4">
      <strong>V</strong>Мир
    </button>
    <button class="step" data-index="5">
      <strong>VI</strong>Возвращение
    </button>
  </nav>

  <div class="viewport">

    <!-- I ЭПОХА -->
    <article class="slide active" data-slide="0">
      <div class="era-tag">Первая эпоха</div>
      <h2 class="era-title">Создание мира</h2>
      <div class="era-date">1–3000 годы · 3000 лет</div>

      <p>В начале не было ни королевств, ни границ, ни имён, которыми разумные существа могли бы называть окружающий мир. Существовали лишь бескрайние серые равнины и Звезда, освещавшая их своим светом.</p>

      <p>Согласно древним преданиям, однажды к Звезде вернулся Ангел, долго странствовавший по иным мирам. Он видел множество миров, каждый из которых был несовершенен, полон боли и страданий. Вернувшись домой, Ангел усомнился в том, стоит ли населять разумными существами собственное творение.</p>

      <p>Звезда утешила его и вернула надежду. Тогда Ангел принялся создавать горы и реки, леса и долины, наполняя безмолвные земли красотой и жизнью. Завершив работу, он открыл путь в новый мир и привёл туда первых эльфов.</p>

      <p>Так началась история Ауденвилля.</p>

      <p>Первые эльфы обнаружили, что над миром сияют два светила, Солнце и Сумар, а ночное небо украшают две луны, Лунь и Галура. Они связали небесные тела с Кассанэлем, богом Света, и начали развивать собственную культуру, магию и искусства.</p>

      <p>Эльфы построили прекрасный город из белого дерева на берегах широкой реки. Их цивилизация процветала, пока однажды они не встретили другой разумный народ, называвший себя людьми.</p>

      <p>Люди были смертны, уязвимы для болезней и уступали эльфам в магическом искусстве. Однако они быстро учились, стремились к знаниям и не боялись менять окружающий мир.</p>

      <p>Сосуществование двух народов раскололо эльфийское общество. Одни считали людей угрозой, другие видели в них будущих союзников. Спор завершился уходом части эльфов на восток. Другие рассеялись по миру, а оставшиеся отправились вместе с людьми на запад.</p>

      <div class="highlight">
        <b>Наследие эпохи</b>
        <p>Создание Ауденвилля, первые эльфийские города, религиозные традиции и великое разделение народов.</p>
      </div>
    </article>

    <!-- II ЭПОХА -->
    <article class="slide" data-slide="1">
      <div class="era-tag">Вторая эпоха</div>
      <h2 class="era-title">Великие королевства</h2>
      <div class="era-date">1–2000 годы · 2000 лет</div>

      <p>На западе переселившиеся эльфы и люди основали Кипсбург. Со временем эльфы изменились, утратили бессмертие и стали называть себя тайарами, или сумеречными эльфами.</p>

      <p>Они перенимали человеческие обычаи, совершенствовали ремёсла, развивали науки и военное искусство. Позднее тайары заключили договор с разумными гигантскими совами Кипских гор, получив возможность использовать их в качестве союзников и боевых спутников.</p>

      <p>На востоке последователи Аронидэла достигли полуострова, где с неба упал загадочный кристалл. На месте его падения образовалось озеро, наполненное первородной магией.</p>

      <p>Эльфийка Латиэра первой испила его воды. Сила её народа многократно возросла, а сама Латиэра и её сестра стали величайшими волшебницами своего времени.</p>

      <p>Вокруг магического озера вырос Бейлинил, впоследствии получивший название Бейлин. Его жители стали называть себя лейарами, или лунными эльфами.</p>

      <p>Под воздействием их магии менялась сама природа: деревья приобретали необычные оттенки, вода становилась прозрачной, а животные и растения обретали невиданные свойства. Бейлин превратился в одно из самых прекрасных и могущественных государств мира.</p>

      <p>Латиэра заняла королевский престол и стала символом непрерывности власти, магического величия и древнего наследия своего народа.</p>

      <p>В это же время на севере сестра королевы, Эйфейри, основала Белый Город, предназначенный стать оплотом знаний и древних наук.</p>

      <p>Пока государства развивались, портал, через который Ангел привёл в мир первых обитателей, продолжал пропускать новые народы. Ауденвилль становился всё разнообразнее, и вместе с новыми народами приходили новые верования, ремёсла и способы использования магии.</p>

      <div class="highlight">
        <b>Наследие эпохи</b>
        <p>Основание Кипсбурга и Бейлина, возвышение Латиэры, Белый Город и расцвет древних цивилизаций.</p>
      </div>
    </article>

    <!-- III ЭПОХА -->
    <article class="slide" data-slide="2">
      <div class="era-tag">Третья эпоха</div>
      <h2 class="era-title">Великие войны</h2>
      <div class="era-date">1–1500 годы · 1500 лет</div>

      <p>По мере роста Кипсбург и Бейлин начали расширять территории. Их интересы столкнулись в центральных землях, а поводом для открытого противостояния стали портовая Авитания и древние руины, наполненные первородной магией.</p>

      <p>Бейлин захватил Авитанию, положив начало Войне людей и эльфов. Казалось, что могущество лейаров позволит им подчинить весь мир. Однако дворфы, присоединившиеся к Кипсбургу, создали оружие и доспехи, способные противостоять магии, а их рунные зачарования помогли изменить ход войны.</p>

      <p>Когда обе армии готовились к решающему столкновению, появилась новая угроза: орки. Их численность быстро росла, поселения подвергались нападениям, а армии теряли людей и ресурсы.</p>

      <p>Противники заключили временное перемирие. Так Война людей и эльфов переросла в Первую Орочью войну.</p>

      <p>После разгрома орочьих поселений напряжение между Кипсбургом и Бейлином постепенно уменьшилось. Многие поняли, что степи могут стать местом для вольных народов и новых идей.</p>

      <div class="highlight">
        <b>Наследие эпохи</b>
        <p>Первая Орочья война, возвышение дворфийских мастеров, развитие механики и становление вольных степей.</p>
      </div>
    </article>

    <!-- IV ЭПОХА -->
    <article class="slide" data-slide="3">
      <div class="era-tag">Четвёртая эпоха</div>
      <h2 class="era-title">Пришествие драконов</h2>
      <div class="era-date">1–1000 годы · 1000 лет</div>

      <p>Четвёртая эпоха стала одной из самых страшных в истории Ауденвилля.</p>

      <p>Однажды ночное небо рассекла кроваво-красная молния. За ней последовал метеоритный дождь, а упавшие на землю валуны оказались не безжизненными камнями, но существами, прибывшими из другого мира.</p>

      <p>Так в Ауденвилль пришли драконы.</p>

      <p>Они бежали из погибающего мира, открыв путь через межмировой портал. Однако новый дом не стал для них убежищем. Драконы решили завоевать его, подчинить местные народы и установить собственную власть.</p>

      <p>Центральные земли были выжжены. Деревни и города разрушались, жители превращались в рабов, а магов заставляли создавать артефакты, позволяющие драконам принимать человеческий облик.</p>

      <p>Постепенно захватчики разделились на кланы. Борьба за власть ослабила их, но не избавила народы Ауденвилля от гнёта.</p>

      <p>Эйфейри, правительница Белого Города, организовала сопротивление. Она собрала двадцать три воина со всех уголков мира и разработала план, позволявший не уничтожить драконов, а изгнать их.</p>

      <p>После долгих приготовлений воинам удалось открыть врата Эйрина и запечатать драконов в пустынном измерении. Почти все участники похода погибли, оказавшись по ту сторону врат. Выжила лишь Эйфейри, которая вернулась в Белый Город и навсегда запечатала проход.</p>

      <p>Магия Белого Города исчезла. Его земли погрузились в вечную зиму, а центральные территории Ауденвилля превратились в степи, пустыни и каньоны.</p>

      <div class="highlight">
        <b>Наследие эпохи</b>
        <p>Изгнание драконов, создание Пустошей и запечатывание врат Эйрина.</p>
      </div>
    </article>

    <!-- V ЭПОХА -->
    <article class="slide" data-slide="4">
      <div class="era-tag">Пятая эпоха</div>
      <h2 class="era-title">Восстановление</h2>
      <div class="era-date">1–500 годы · 500 лет</div>

      <p>После изгнания драконов прошло много лет.</p>

      <p>Ауденвилль постепенно восстанавливался. Разрушенные города отстраивались заново, прежние торговые пути возвращались к жизни, а народы пытались залечить раны, оставленные войной. Но мир изменился навсегда: центральные земли больше не были прежним цветущим пространством, а многие древние знания оказались утрачены.</p>

      <p>В этот период изгнанные механики продолжали собираться в центральных степях. Они создавали мастерские, строили первые крупные производственные комплексы и искали способы защитить себя от преследований магических держав.</p>

      <p>Однако надежды на длительный мир не оправдались.</p>

      <p>Орки вернулись. На этот раз они представляли собой организованную военную силу, ведомую не только жаждой завоеваний, но и стремлением отомстить народам, которые прежде уничтожили их поселения.</p>

      <p>Началась Вторая Орочья война. Кипсбург и Бейлин вновь подняли армии. К борьбе присоединились жители степей и технические сообщества. Война затянулась на годы, истощая государства и вынуждая их тратить ресурсы на защиту собственных границ.</p>

      <p>В конце концов орки вновь потерпели поражение. Великие державы, понеся тяжёлые потери, заключили мирный договор. Открытая война уступила место дипломатии, скрытому соперничеству и борьбе за влияние.</p>

      <div class="highlight">
        <b>Наследие эпохи</b>
        <p>Вторая Орочья война, восстановление держав и предпосылки рождения независимой республики.</p>
      </div>
    </article>

    <!-- VI ЭПОХА -->
    <article class="slide" data-slide="5">
      <div class="era-tag">Шестая эпоха · Настоящее время</div>
      <h2 class="era-title">Возвращение древних сил</h2>
      <div class="era-date">1–2783 годы · Современная эпоха</div>

      <p>Шестая эпоха стала временем технического возрождения. Великие державы продолжали относиться к механикам с подозрением. Учёные, инженеры и изобретатели сталкивались с преследованиями, а их исследования объявлялись опасными для привычного порядка.</p>

      <p>Сто двадцать лет назад дворф Гордум и человек Демитрий подняли восстание против гонений. Они объединили вокруг себя механиков, учёных и всех тех, кто не желал больше жить под властью обществ, презиравших их занятия. Изгнанники покинули великие города и основали независимую республику Тех. Её столицей стал Техбургер.</p>

      <p>Новое государство быстро развивалось. Здесь совершенствовали паровые машины, строили мастерские, создавали новые виды оружия и исследовали природу мира без опоры на магию. Техбургер стал убежищем для отверженных: вампиров, оборотней, гоблинов, гномов, дворфов и тех, кто не мог найти место в традиционных обществах.</p>

      <h3 class="event-heading">Хронология Шестой эпохи</h3>

      <div class="events">
        <div class="event">
          <div class="event-date">2663 ГОД</div>
          <div class="event-title">Основание Техбургера</div>
          <p>Гордум и Демитрий создают независимую республику, ставшую убежищем для технических сообществ и изгнанников.</p>
        </div>

        <div class="event">
          <div class="event-date">2755 ГОД · 28 ЛЕТ НАЗАД</div>
          <div class="event-title">Первые эксперименты Дарриана</div>
          <p>Дарриан Нимрауг открывает портал в древний мир драконов. Несколько десятков существ вырываются из Пустошей и скрываются среди народов Ауденвилля.</p>
        </div>

        <div class="event">
          <div class="event-date">2758 ГОД · 25 ЛЕТ НАЗАД</div>
          <div class="event-title">Великий Разлом</div>
          <p>Новый эксперимент Дарриана приводит к катастрофе. Мир содрогается, а через континент проходит разлом, отмеченный тёмной силой. Его окрестности становятся источником чудовищ и неизвестных угроз.</p>
        </div>

        <div class="event">
          <div class="event-date">2758 ГОД</div>
          <div class="event-title">Алая молния и пробуждение драконов</div>
          <p>Безрассудный колдун открывает древние врата. Защитная магия ослабевает, драконы пробуждаются и разрушают город Хранителей, возвращая себе артефакты.</p>
        </div>

        <div class="event">
          <div class="event-date">2758 ГОД</div>
          <div class="event-title">Закрытие древних врат</div>
          <p>Дарриан Нимрауг и его друг Элиус Райденер закрывают проход между мирами. Однако часть драконов и Хранителей Эльхары остаётся в Ауденвилле.</p>
        </div>

        <div class="event">
          <div class="event-date">2758–2783 ГОДЫ</div>
          <div class="event-title">Орден Элриана</div>
          <p>Государства объединяются для борьбы с порождениями тьмы. Несколько Эльхаров вступают в Орден, а исследование Разлома и поиск сбежавших драконов становятся частью новой истории мира.</p>
        </div>
      </div>

      <div class="highlight">
        <b>Настоящее время · 2783 год</b>
        <p>Главные врата закрыты, но нестабильные разломы в Пустошах всё ещё могут пропускать беглецов. Драконы живут среди народов мира, Хранители Эльхары ищут своё место в новой реальности, а Орден Элриана продолжает борьбу с тёмной силой.</p>
      </div>
    </article>

  </div>

  <div class="controls">
    <button class="control" id="aud-back">← Назад</button>
    <span class="counter" id="aud-counter">Эпоха 1 из 6</span>
    <button class="control" id="aud-forward">Далее →</button>
  </div>
</main>

<footer class="footer">
  AUDENVILLE · CHRONICLES OF SIX ERAS
</footer>

<script>
(function () {
  var root = document.getElementById("aud-monolith");
  if (!root) return;

  var slides = Array.from(root.querySelectorAll(".slide"));
  var steps = Array.from(root.querySelectorAll(".step"));
  var progress = root.querySelector("#aud-progress");
  var name = root.querySelector("#aud-current-name");
  var year = root.querySelector("#aud-current-year");
  var counter = root.querySelector("#aud-counter");
  var back = root.querySelector("#aud-back");
  var forward = root.querySelector("#aud-forward");
  var current = 0;

  var labels = [
    ["ПЕРВАЯ ЭПОХА", "3000 ЛЕТ"],
    ["ВТОРАЯ ЭПОХА", "2000 ЛЕТ"],
    ["ТРЕТЬЯ ЭПОХА", "1500 ЛЕТ"],
    ["ЧЕТВЁРТАЯ ЭПОХА", "1000 ЛЕТ"],
    ["ПЯТАЯ ЭПОХА", "500 ЛЕТ"],
    ["ШЕСТАЯ ЭПОХА", "2783 ГОД · СЕЙЧАС"]
  ];

  function show(index) {
    current = Math.max(0, Math.min(slides.length - 1, index));

    slides.forEach(function (slide, i) {
      slide.classList.toggle("active", i === current);
    });

    steps.forEach(function (step, i) {
      step.classList.toggle("active", i === current);
      step.setAttribute("aria-pressed", i === current ? "true" : "false");
    });

    name.textContent = labels[current][0];
    year.textContent = labels[current][1];
    counter.textContent = "Эпоха " + (current + 1) + " из " + slides.length;
    progress.style.width = ((current + 1) / slides.length * 100) + "%";

    back.disabled = current === 0;
    forward.disabled = current === slides.length - 1;
  }

  steps.forEach(function (step) {
    step.addEventListener("click", function () {
      show(Number(step.getAttribute("data-index")));
    });
  });

  back.addEventListener("click", function () {
    show(current - 1);
  });

  forward.addEventListener("click", function () {
    show(current + 1);
  });

  show(0);
})();
</script>
</div>
[/html]