[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

.plot-wrap{
  width:900px;
  margin:0 auto;
  font-family:'Manrope', sans-serif;
  color:#111;
  overflow:visible;
}

.plot-main{
  display:flex;
  align-items:flex-start;
  position:relative;
}

.plot-content{
  width:670px;
  flex:0 0 670px;
  padding:0 10px 0 0;
  box-sizing:border-box;
  position:relative;
  z-index:2;
}

.plot-hero{
  height:92px;
  min-height:92px;
  padding:0 0 0 270px;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
}

.plot-caps{
  text-transform:uppercase !important;
}

.plot-logo{
  font-family:'Dela Gothic One', sans-serif;
  font-size:110px;
  color:#2f2f2f;
  letter-spacing:2px;
  text-transform:uppercase;
  transform:translateY(-8px);
  white-space:nowrap;
  user-select:none;
  opacity:.9;
}

.plot-panel-wrap{
  margin-top:6px;
  padding-left:6px;
}

.plot-panel-title,
.plot-block-title,
.plot-head{
  display:block;
  width:192px;
  background:#111111;
  color:#9bcb01;
  text-decoration:none;
  text-align:left;
  font-family:'Dela Gothic One', sans-serif;
  line-height:1.1;
  box-sizing:border-box;
  text-transform:lowercase;
  letter-spacing:.1px;
  padding:7px 8px;
}

.plot-panel-title{
    width: auto !important;
    text-align: right;
  font-size:10px;
  margin:0 0 8px auto;
}

.plot-box{
  width:calc(100% + 95px);
  background:#efefef;
  border:1px solid #2a2a2a;
  padding:12px 12px 12px 0;
  box-sizing:border-box;
  position:relative;
    text-transform: lowercase;
  margin-right:-95px;
  z-index:3;
}

.plot-scroll{
  max-height:690px;
  overflow-y:auto;
  overflow-x:visible;
  padding-right:4px;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:#4a4a4a transparent;
}

.plot-scroll::-webkit-scrollbar{
  width:4px;
}

.plot-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.plot-scroll::-webkit-scrollbar-thumb{
  background:#4a4a4a;
  border:none;
  border-radius:0;
}

.plot-scroll::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}

.plot-block{
  margin:0 0 16px;
  padding:0 0 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.plot-block:last-child{
  margin-bottom:0;
  border-bottom:none;
}

.plot-block-title{
  width:auto;
  display:inline-block;
  font-size:10px;
  margin:0 0 10px 0;
  margin-left:-1px;
}

.plot-block-inner{
  padding-left:12px;
}

.plot-sub{
  font-family:'Dela Gothic One', sans-serif;
  font-size:13px;
  line-height:1.35;
  color:#111;
  text-transform:lowercase;
  margin:0 0 8px;
  letter-spacing:.15px;
  font-weight:400;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.plot-a{
  font-family:'Manrope', sans-serif;
  font-size:11px;
  line-height:1.5;
  color:#3f3f3f;
  font-weight:600;
}

.plot-a + .plot-a{
  margin-top:8px;
}

.plot-a b{
  font-weight:800;
  color:#111;
}

.plot-list{
  margin:8px 0 0;
  padding:0;
  list-style:none;
}

.plot-list li{
  position:relative;
  padding-left:16px;
  margin:0 0 8px;
  font-size:11px;
  line-height:1.45;
  color:#3f3f3f;
}

.plot-list li:before{
  content:"✶";
  position:absolute;
  left:0;
  top:0;
  color:#4f4f4f;
  font-size:11px;
}

.plot-side{
  width:230px;
  flex:0 0 230px;
  min-height:560px;
  background:
    linear-gradient(rgba(55,55,55,.78), rgba(55,55,55,.78)),
    linear-gradient(rgba(215,215,215,.18), rgba(215,215,215,.18)),
    url('https://i.pinimg.com/1200x/88/f8/7e/88f87ea498e2699cc83f137290d3c426.jpg') center center / cover no-repeat;
  padding:14px 0 12px;
  box-sizing:border-box;
  text-align:left;
  position:relative;
  z-index:1;
}

.plot-head{
  font-size:15px;
  color:#ffffff;
  margin:0 0 8px 0;
}

.plot-note{
  width:192px;
  margin:0 0 10px 10px;
  color:#fff;
  font-size:9px;
  line-height:1.25;
  font-weight:700;
  text-align:left;
}

.plot-dots{
  position:absolute;
  right:115px;
  bottom:80px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.plot-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#9bcb01;
  display:block;
}
</style>

<div class="plot-wrap">
  <div class="plot-main">

    <div class="plot-content">
      <div class="plot-hero">
        <div class="plot-logo">PLOT</div>
      </div>

      <div class="plot-panel-wrap">
        <div class="plot-panel-title">как всё было начиналось</div>

        <div class="plot-box">
          <div class="plot-scroll">

            <div class="plot-block">
              <div class="plot-block-title">1999 год, июль</div>
              <div class="plot-block-inner">
                <div class="plot-sub">первый разрыв над Южно-китайским морем</div>
                <div class="plot-a">Мир пребывает в слепом неведении перед предстоящим кошмаром. Население побережья и островов наблюдает в небе красное свечение и «разрыв», похожий на застывшую молнию. Он появился так же быстро, как исчез. Учёные называют произошедшее «природной аномалией».</div>
                <div class="plot-a">Жизнь людей в том районе меняется: учащаются случаи убийств и самоубийств, рождаются дети с отклонениями, пациенты всё чаще обращаются к специалистам с жалобами на головную боль, общее недомогание и эмоциональную нестабильность. Некоторые утверждают, что слышат «голос Бога» или «голос Дьявола». Демоны делают первые попытки установления контакта.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2000 год, январь</div>
              <div class="plot-block-inner">
                <div class="plot-sub">сеть разрывов над крупными городами мира</div>
                <div class="plot-a">Москва, Токио, Нью-Йорк, Каир, Сеул, Шанхай, Пекин, Стамбул, Лондон, Тегеран — в десяти крупных городах мира одновременно появляются разрывы. Феномен неизвестной «природной аномалии» повторяется.</div>
                <div class="plot-a">Последствия обретают новый характер: поступают жалобы на странное поведение животных, помехи в линиях электропередач и поломки техники. Обострённое чувство тревоги особенно сказывается на детях и беременных женщинах — они жалуются на ночные кошмары, странные голоса, силуэты, незнакомцев на детских площадках и «монстров под кроватью».</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2000 год, март</div>
              <div class="plot-block-inner">
                <div class="plot-sub">катастрофа в Токио, теракт первого контрактника</div>
                <div class="plot-a">В понедельник, 13 марта, в центре Токио прозвучали первые взрывы. Буквально за несколько минут часть города обратилась в руины. Пока правительства стран строили догадки об атаке недружественных государств и начале Третьей мировой войны, уничтожение протекло планомерно, создавая хаос и панику. Каждый последующий удар становился мощнее предыдущего.</div>
                <div class="plot-a">Мир не только столкнулся с угрозой демонов лицом к лицу, но и получил первое свидетельство об их природе от никому неизвестной учёной — доктора Сато Каори.</div>
                <div class="plot-a">Когда пыль улеглась, больше половины Токио было разрушено. Военные нашли виновника теракта — студента местного университета. Они обнаружили юношу посреди обломков, из всех отверстий на его лице струилась кровь. Террорист успел сказать только одну фразу: <b>«Теперь она не будет голодной»</b>, после чего взорвался прямо на глазах силовиков.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2000 год, март—май</div>
              <div class="plot-block-inner">
                <div class="plot-sub">новый ужасный мир</div>
                <div class="plot-a">Из разных стран мира поступают сообщения о людях, которые приобрели «сверхчеловеческие возможности», заключив соглашение с «потусторонней силой». Мировые религии бьют тревогу и твердят о конце света, фиксируются мутации у животных и растений, исчезновения людей.</div>
                <div class="plot-a">Демоны обозначают своё присутствие и выходят на прямой контакт с человеком. Тех, кто заключил с ними договор, называют <b>контрактниками</b>. Под крылом <span class="plot-caps">OOН</span> начинает формироваться специальное подразделение по борьбе с демонической угрозой.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2000 год, 11 сентября</div>
              <div class="plot-block-inner">
                <div class="plot-sub">трагедия с башнями-близнецами</div>
                <div class="plot-a">Последующее расследование доказывает, что некоторые террористы имели контракты с демонами. Запускается программа по изучению феномена контрактов, а в <span class="plot-caps">СМИ</span> появляется термин <b>«демонический терроризм»</b>.</div>
                <div class="plot-a">Произошедшее сеет религиозные разногласия. Общество сходит с ума, называя демонов «истинным злом», а контрактников — предвестниками Апокалипсиса.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2000—2007 годы</div>
              <div class="plot-block-inner">
                <div class="plot-sub">человечество встаёт с колен</div>
                <div class="plot-a">За семь лет человечество предпринимает немало шагов, чтобы прийти к пониманию: в наш мир из брешей в реальности проникли потусторонние сущности. Глобальных катастроф не происходит, но инциденты с контрактниками становятся регулярными.</div>
                <ul class="plot-list">
                  <li>в 2003 году <span class="plot-caps">ООН</span> официально утверждает <b>Международный отдел охотников на демонов</b>;</li>
                  <li>в отношении контрактников вводится ряд законов и ограничений;</li>
                  <li>люди начинают использовать в борьбе с демонами их же силы и возможности;</li>
                  <li>в 2004 году учреждается <b>Научно-исследовательский институт экспериментальной демонологии</b>.</li>
                </ul>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2008 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">финансовый кризис</div>
                <div class="plot-a">Менеджеры крупнейших банков заключают контракты с демонами разного класса и получают в обмен способности для игры на бирже, что приводит к ипотечному кризису и краху финансовой системы.</div>
                <div class="plot-a">Позже становится известно, что демоны требовали от своих контрактников регулярные жертвоприношения. В мировой огласке событие получило название <b>«Банки крови»</b>. Финансовый надзор ужесточается, а в банках появляются «отделы демонического комплаенса».</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2011 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">революции в арабском мире</div>
                <div class="plot-a">Лидеры протестов в открытую используют силу своих контрактов для ведения войн, а люди с демоническими силами напрямую вмешиваются в бои.</div>
                <div class="plot-a"><span class="plot-caps">ООН</span> реформируют во <b>Всемирный совет безопасности</b> с правом вмешиваться в дела стран при демонической угрозе. Совет вводит официальный запрет на военное использование аномальных способностей.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2012 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">дети «райского сада»</div>
                <div class="plot-a"><span class="plot-caps">НИИЭД </span> под покровительством <span class="plot-caps">ВСБ</span> объявляет об открытии проекта <b>«Эдем»</b>. Исследования показывают: начиная с 2000 года, на свет появляются дети, более чувствительные к энергии демонов. Они видят, чувствуют и слышат их без приборов, а также теоретически обладают большей устойчивостью и предрасположенностью к заключению контрактов.</div>
                <div class="plot-a">При базах <span class="plot-caps">МООД</span> открываются кадетские корпуса, где мальчиков и девочек с десяти лет учат сражению с демонами. Общество делится на два лагеря: одни считают это варварством, другие — вкладом в светлое будущее.</div>
                <div class="plot-a">Многие дети, рождённые в период с 2000 по 2015 год, стали участниками проекта. Некоторые стали надеждой мира и лучшими охотниками своего поколения, но большая часть погибла, не дожив до совершеннолетия. В народе таких детей прозвали <b>«Антихристами»</b>.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2013 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">«за нами следят»</div>
                <div class="plot-a">В обществе крепнет заговор о мировой слежке с использованием контрактов и демонических сил. Начинается кризис доверия к технологиям, появляются сообщества, пропагандирующие «чистую связь» и переход на аналоговые средства коммуникации.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2014—2015 годы</div>
              <div class="plot-block-inner">
                <div class="plot-sub">чудовища среди нас</div>
                <div class="plot-a">Появляются первые известия об одержимых — людях на грани смерти, которые предпочли разделить свои тела с демонами посредством вселения. Международный отдел охотников запускает программу <b>«Экзорцист»</b>: опасные одержимые уничтожаются, а разумные — строго контролируются.</div>
                <div class="plot-a">Охотники приобретают серьёзный вес на мировой арене, а общество и религия оценивают их влияние по-разному.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2015 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">миграционный кризис</div>
                <div class="plot-a">Среди массового притока беженцев в Европу всё чаще обнаруживаются люди с контрактами и одержимостью. Некоторые пересекают границы незамеченными. Хотя крупных трагедий не случилось, в обществе укрепляется ксенофобия по отношению к таким людям.</div>
                <div class="plot-a">Люди с аномальными возможностями подвергаются принудительной и повсеместной фиксации своего статуса в документах.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2016 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">рост теории о «демоническом популизме»</div>
                <div class="plot-a">Массовые протесты вспыхивают из-за подозрений в сторону политиков, которых общество уличает в связи с демонами. Всемирный совет безопасности вмешивается: все люди у власти проходят регулярные проверки, а в парламентах появляются сотрудники <span class="plot-caps">МООД</span>.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2018 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">«зелёный бунт»</div>
                <div class="plot-a">Экоактивисты начинают заключать контракты с демонами и решаются на одержимость, чтобы использовать потусторонние силы для защиты окружающей среды. Всё идёт не по плану: над многими начинает преобладать демоническое начало и наваждение.</div>
                <div class="plot-a">Некоторые контрактники и особенно одержимые начинают считать человечество «болезнью земли». Происходят массовые беспорядки и «зелёные теракты», направленные на уничтожение фабрик и заводов. Всемирный совет безопасности организует экологический трибунал.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2020 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">пандемия коронавируса</div>
                <div class="plot-a">Люди называют вирус «демонической инфекцией», религия пророчит миру приход Чумы. Растёт всплеск оккультизма: общество ищет защиту в талисманах, амулетах, молитвах и ритуалах.</div>
                <div class="plot-a">Учёные тайно используют в разработках вакцины кровь одержимых и возможности носителей контрактов.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2022 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">дети нового времени</div>
                <div class="plot-a">В обществе встаёт серьёзный вопрос о детях, чьи родители были одержимыми или имели действующий контракт на момент зачатия. Исследования показывают, что некоторые представители подрастающего поколения действительно изменились: они стали психологически устойчивее перед энергией и влиянием демонов.</div>
                <div class="plot-a">Позитивные тенденции быстро сменяются страхом: у женщин начинают проявляться осложнения в процессе беременности, дети нередко рождаются мёртвыми или не приспособленными к жизни с врождёнными мутациями.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2025 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">цифровой демон</div>
                <div class="plot-a">Стремительное развитие искусственного интеллекта и технологий порождает новые страхи человечества. Начинают появляться демоны нового класса. Самым известным среди них становится <b>Цифровой демон</b>, который навязывает людям контракты в сети в обмен на свои возможности.</div>
                <div class="plot-a">Интерес к технологиям одновременно падает и растёт. Всемирный совет безопасности формирует международное киберподразделение для контроля демонического влияния в интернете, а также появляются демонические хакеры.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2027 год, лето</div>
              <div class="plot-block-inner">
                <div class="plot-sub">глобальная засуха</div>
                <div class="plot-a">В засушливых регионах мира учащаются случаи заключения контрактов с демонами, связанными с водой. Вокруг них возникают культы, происходят жертвоприношения — ситуация приобретает серьёзный религиозный характер.</div>
                <div class="plot-a">На арену выходит будущий «спаситель человечества» — <b>Маркус Дайрвулф</b>, участник проекта «Эдем» и охотник Североамериканского штаба. Маркус уничтожает причину засухи — демона, официально причисленного к классу Архангелов. Никто из отряда, посланного в пустыню Гоби, не возвращается. Маркус оказывается единственным выжившим и, по заверениям <span class="plot-caps">МООД</span>, заключает с ослабленным демоном контракт.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2027 год, 9 ноября</div>
              <div class="plot-block-inner">
                <div class="plot-sub">падение сингапура</div>
                <div class="plot-a">Мир ещё не успевает оправиться от последствий засухи, но сталкивается с новой угрозой — демон Цунами уничтожает Сингапур, в котором базировался первый известный штаб охотников <span class="plot-caps">МООД</span>. Миллионы разрушенных жизней, тысячи смертей охотников, мобилизованных в точку катастрофы.</div>
                <div class="plot-a">Кто-то пытается спасти и эвакуировать население, кто-то отчаянно бьётся, стараясь остановить демона <span class="plot-caps">S</span>-класса. Сокрушительный удар по Цунами наносит всё тот же Маркус Дайрвулф — с его появлением битва заканчивается спустя несколько минут. Никто так и не понимает, каким образом ему это удалось и почему Маркус выходит из этого побоища без единой царапины.</div>
              </div>
            </div>

            <div class="plot-block">
              <div class="plot-block-title">2030 год</div>
              <div class="plot-block-inner">
                <div class="plot-sub">мир после падения сингапура</div>
                <div class="plot-a">После падения Сингапура проходит три года. Восточноазиатский штаб переносят в Гонконг, а <span class="plot-caps">МООД</span>  лишается огромного числа лучших и опытных охотников. Теперь пришло время давать отпор демонам молодому поколению и неокрепшим бойцам.</div>
                <div class="plot-a">Стихийные мемориалы в разных частях света стоят до сих пор — люди молятся за упокой погибших и молят у Бога спасти их от бед. И пока одни сжимают в руках Библию, другие покрепче стискивают оружие и заключают новые контракты.</div>
                <div class="plot-a">Давно забытые вопросы вновь оказываются на повестке дня: кто такие демоны? Зачем они пришли в наш мир? Может, мы все давно мертвы и отбываем наказание в Аду? Есть ли конец у этого кошмарного сна? <b>У этого мира ещё есть шанс. Станьте его новой надеждой — или разрушьте до основания.</b></div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="plot-side">
      <div class="plot-head">сюжетная сводка</div>
      <div class="plot-note">
        от первого разрыва до 2030 года.
      </div>

      <div class="plot-note">
        мир уже давно треснул по швам. вопрос только в том, хочешь ли ты его спасти... или добить?
      </div>

      <div class="plot-dots">
        <span class="plot-dot"></span>
        <span class="plot-dot"></span>
        <span class="plot-dot"></span>
        <span class="plot-dot"></span>
        <span class="plot-dot"></span>
        <span class="plot-dot"></span>
      </div>
    </div>

  </div>
</div>
[/html][hideprofile]