[html]
<link
  href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Inter:wght@400;500;600&display=swap"
  rel="stylesheet"
/>

<article class="pp-card">
  <section class="pp-data">
    <div class="pp-header">
      <div class="pp-brand">
        <img src="https://forumstatic.ru/files/001c/73/bf/43531.png" />
        <span>OutcastDB</span>
      </div>
      <h1 class="pp-name">Llywelyn Rhys</h1>
    </div>

    <div class="pp-tabs">
      <input type="radio" id="tab-1" name="tabs" checked />
      <input type="radio" id="tab-2" name="tabs" />
      <input type="radio" id="tab-3" name="tabs" />
      <input type="radio" id="tab-4" name="tabs" />

      <nav class="pp-nav">
        <label for="tab-1">Профайл</label>
        <label for="tab-2">Биография</label>
        <label for="tab-3">Характер</label>
        <label for="tab-4">Способности</label>
      </nav>

      <div class="pp-panel" data-tab="1">
        <div class="pp-panel-content">
          <figure class="pp-portrait">
            <img
              src="https://forumupload.ru/uploads/001c/73/bf/23/881859.jpg"
              alt="Внешность персонажа"
            />
          </figure>

          <div class="pp-right">
            <div class="pp-facts">
              <div>
                <span class="key">Имя и фамилия</span><span class="bar"></span
                ><span class="val">Лливелин Риз</span>
              </div>
              <div>
                <span class="key">Профессия</span><span class="bar"></span
                ><span class="val">студент факультета <br>Странников, 4 курс</span>
              </div>
              <div>
                <span class="key">
                  <span class="key-main">Дата рождения</span><br />
                  <span class="key-sub">(возраст)</span>
                </span>
                <span class="bar"></span>
                <span class="val">17.04.160, 21 год</span>
              </div>
              <div>
                <span class="key">Организация</span><span class="bar"></span
                ><span class="val">Кампус «Исток»</span>
              </div>
              <div>
                <span class="key">Рост</span><span class="bar"></span
                ><span class="val">162 см</span>
              </div>
              <div>
                <span class="key">Класс силы</span><span class="bar"></span
                ><span class="val">Tm-III</span>
              </div>
              <div>
                <span class="key">Вес</span><span class="bar"></span
                ><span class="val">50 кг</span>
              </div>
            </div>

            <div class="pp-sections">
              <h2 class="pp-section-title">Внешность</h2>
              <div class="pp-section-box">
                <p>Глаза: серые. Волосы: рыжие. Небо: серый потолок.<br>
  Невысокий парень. Рост — примерно 162 сантиметра, вес — около пятидесяти килограммов. Движется легко, иногда кажется что немного торопливо, как будто ему вечно нужно куда-то бежать. Худой, жилистый. Мускулатура не отличается объемом, зато отлично читается под тонкой кожей, сплошь усыпанной веснушками.</p>
  <p>Лицо узкое, скулы чёткие, нос длинноватый, губы чуть обветренные, но не потрескавшиеся. Лицо обычное, но приятное, цепляет не яркостью, а живостью. Он не красавец, но и не тот, кого забудешь через минуту — остаётся в памяти, будто старый друг. Веснушки густо покрывают всё лицо, переходят на шею, плечи, спину — кожа у него вообще очень светлая. Бороды, ни даже лёгкого пушка не имеется — от бровей и вниз кожа абсолютно гладкая.</p>
  <p>Волосы рыжие, густые и непослушные. Обычно находятся где-то между "острижен под машинку" и "почти завязал в хвост", но до конца не доходит ни то, ни другое. Часто растрёпаны — расчёску он явно считает излишеством.</p>
  <p>Одевается просто и легко. Из-за постоянного перегрева ничего необычного увидеть его потеющим в одних шортах, в комнате напрочь выстуженной кондеями. Цвета — яркие. Шорты, майка, рюкзак — всё заметное. Чтобы если вдруг отрубится где-нибудь в канаве, его сразу нашли.</p>
              </div>

              <h2 class="pp-section-title">Дополнительно</h2>
              <div class="pp-section-box">
               <p>
  – Обожает вишню в любых вариантах.<br>
  – Грызет ногти.<br>
  – Предпочитает спать голышом, потому что жарко.<br>
  – Уверен, что нет проблемы, от которой нельзя было бы убежать.<br>
  – С девчонками у Ллива не очень складывается, им не очень нравится его скорость, потому больше общается с парнями, во всех смыслах.<br>
  – Благодаря родной матери и интернату, довольно свободен в интимном плане и открыт к экспериментам.
</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pp-panel" data-tab="2">
        <div class="pp-text">

<p>Некоторые дети появляются на свет с криком. Некоторые — с обморочным видом отца. Лливелин Риз появился, как и всё в его жизни, внезапно, со звуком «шлёп». Это вовсе не означает, что он родился в луже (хотя, честно говоря, это звучит символично), просто акушерка уронила мокрое полотенце, и с тех пор жизнь Ллива пошла наперекосяк — а может, просто по-своему.</p>

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

<p>До семи лет Лливелин был нормальным, насколько нормальным может быть ребёнок, выросший среди гидропонных установок, странных людей в халатах и музыкального компоста. Всё шло прекрасно — пока в один погожий весенний день он не ускорился, буквально, рванул с такой скоростью, что проломил дверь в оранжерею. Вскоре выяснилось: он быстрее молнии, быстрее слухов, быстрее любой бабушки с авоськой. Но при этом не мог замедлиться, пока не врежется в стену или в чувство стыда. Иногда — и в то, и в то.</p>

<p>Власти, как и положено, проявили сочувствие, и отправили мальчика в «Изгойник» — точнее, интернат в Изгойнике, где детей с необычностями либо учили контролировать себя, либо превращали в хрупкие версии взрослых с привычкой дрожать от звонка.<br>
Лливелин там не то чтобы страдал… просто чувствовал себя человеком, живущим на скорости 1.5x, окружённым другими на паузе. Он писал домой, а мама иногда отвечала. В интернате Лливелин не то чтобы вписывался со своим ритмом в общий распорядок, из-за чего чаще других получал по шее или отправлялся в изолятор.</p>

<p>Там же, в «Изгойнике», он познакомился с Адель — женщиной, чья строгость могла расплавить кованую табуретку, а сострадание пряталось под слоем цинизма толщиной в сантиметр. Именно она позже усыновила его, когда поняла, что иногда лучшая помощь — это дать кому-то безопасное место. Адель была неидеальной. Иногда пила. Иногда злилась. Но в отличие от большинства взрослых, никогда не прятала свою человеческость за методичкой.</p>

<p>А потом в 16 случилось то самое. Один неудачный день и один приступ социальной неловкости — и Лливелин расплавился прямо посреди школьного коридора, оставив после себя мокрое пятно, кучу пустой одежды и глубоко травмированного ботаника. Так он узнал про вторую способность — Неньютоновский Слизняк. Тело его могло превращаться в вязкую, упругую жижу, двигаться по вентиляции, липнуть к потолку и категорически отказываться превращаться обратно, если не собрать все части. Именно в этом виде он однажды застрял в трубе на пять часов, пока воспиталки не вызвали аварийку.</p>

<p>На 18-летие он понял: бежать — это хорошо, но иногда лучше знать, куда бежишь. Он поступил в Кампус, на факультет Странников — тех самых, кто выходит за город, куда нормальным людям соваться стрёмно: там меркурит, болотные твари и радиоактивные птицы, поющие песни группы «Руки вверх». Для этого нужны не просто бойцы, а гибкие, адаптивные, быстрые и желательно — восстанавливаемые. Лливелин подходил идеально.</p>
         

        </div>
      </div>

      <div class="pp-panel" data-tab="3">
        <div class="pp-text">
          <p>Лливелин — парень живой, как огонь в мусорном баке. То есть горит, пылает, прыгает — но иногда воняет и взрывается. В нём полно энергии, и она почти всегда ищет, куда бы ей деваться: в бег, в разговор, в спор, в драку, в побег, в безумную идею. Он делает, а потом думает. Иногда наоборот, но это скорее сбой в системе. Он не умеет сидеть на месте. Не то чтобы совсем — просто быстро теряет интерес. Любит быть в движении: если день прошёл в покое, в душе начинает зудеть тревожный сигнал — срочно нужен экшен.</p>

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

<p>Не любит, когда им командуют, но способен признавать чужой авторитет.<br>
С друзьями прост. Быстро сходится, быстро открывается, быстро защищает, если надо. Готов драться, если друга обидели, даже не выяснив, что случилось. А потом уже разберётся. Или не разберётся. Главное, чтобы друг не пострадал.</p>

<p>Из привычек — вечно что-то вертит в руках. Провода, ручки, гаечки, какой-нибудь сломанный брелок.<br>
Одевается, как попало, но ярко: то чтобы видно было, если он где-то застрянет. Из еды любит всё, что быстро готовится и много. Жрёт, как саранча после поста, особенно если много бегал. А бегает он всегда.</p>

<p>Хобби — разбирать, бегать, чинить, спорить и таскать всякую странную хрень, которую "можно будет потом куда-нибудь приспособить".</p>

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

        </div>
      </div>

      <div class="pp-panel" data-tab="4">
        <div class="pp-text">
        <h3><b>Своё время</b></h3>

<p>Лливелин живет в своём, уникальном ритме. Примерно с пяти лет для него весь мир невероятно замедлился, а он для всего мира — невероятно ускорился. Парень движется гораздо быстрее среднего человека. Пока он не научился немного контролировать себя, это доставляло большие проблемы. Сейчас Ллив обычно сосредоточен и удерживает себя примерно в рамках человеческих скоростей, так что может даже общаться с окружающими и не выходить из себя, пока ждёт ответа. При желании может "сосредоточиться в другую сторону" и наоборот ускориться даже по своим меркам. Ускорение влияет на все аспекты жизни Лливелина: метаболизм, движение, речь, реакция — так что это даёт как плюсы, так и минусы.</p>

<p><strong>Плюсы:</strong><br>
– Ускоренный метаболизм: все вещества из организма рыжего выводятся со скоростью света. Напиться дольше чем на 5–10 минут не получится, но и отравиться тоже (по факту — один процесс).<br>
– Ллив очень быстрый: если надо кого-то куда-то послать — лучший кандидат. Да и все остальные дела делает быстрее.<br>
– Скорость реакции: Лливелин Хрен Попадёшь. Попасть по рыжему засранцу и правда сложно. От той же пули, скорее всего, будет тяжело увернуться, но вот в обычной драке — да.</p>

<p><strong>Минусы:</strong><br>
– Ускоренный метаболизм (обратная сторона): даже полезные вещества выводятся слишком быстро. Лливелин ест в 3–4 раза больше обычного человека — всё превращается в калории, которые сжигаются в бесконечной топке его тощей тушки.<br>
– Перегрев: ускоренный метаболизм = ускоренное сжигание калорий. Температура тела у него обычно 38–39 градусов. Ллив к этому привык и чувствует себя нормально, но человек, не в курсе, может "обжечься". Он потеет как проклятый, почти всё время чувствует себя перегретым. Интенсивная пробежка может легко привести к тепловому удару.<br>
– Ллив очень быстрый… во всех остальных аспектах тоже: кто самый быстрый скорострел в Изгойнике, кто производит в два раза больше рваных кед, кто регулярно отрывает дверные ручки?<br>
– Сбитый график сна: обычно Лливелин бодрствует 3–4 часа, после чего становится сонным и рассеянным, нужно подремать хотя бы час. Обычные человеческие сутки он не выдерживает — за стандартные 16 часов бодрствования просто вырубается.</p>

<hr>
<h3><b>Неньютоновский Слизняк</b></h3>

<p>Изгой способен превращать своё тело в желеобразную липкую массу. Только тело — никакие носимые предметы, оружие, драгоценности в жижу не превращаются.<br>
  Выглядит как прозрачный ком зеленоватой (по желанию — вишнёвой) слизи примерно того же веса, что и изначальное тело. В этом состоянии изменённый сохраняет относительное сознание, может принять какую-то конкретную форму, которая легко деформируется, плывёт и меняется. В таком состоянии Ллив почти не видит, что происходит вокруг, зато слышит, осязает и даже ощущает на вкус. Ком слизи может перемещаться самостоятельно — перекатываясь или отращивая ложноножки и цепляясь за окружающие объекты, перетекая в новое место. Ком слизи может быть разделён на части, сам или с посторонней помощью, при этом какого-либо вреда это не наносит. Лливелин при этом ощущает, где находятся его части, и стремится объединиться в единое целое. Причём чем дольше разъединены части слизевого кома, тем сильнее они стремятся друг к другу. В проведённом эксперименте, по прошествии восьми часов, слизь «просочилась» сквозь стальную пластину. При длительном разъединении сознание изгнанника затухает, и остаётся только стремление к объединению всех частей.</p>

  <p>Ком слизи является неньютоновской жижей — промежуточным веществом между текучей субстанцией и твёрдым телом. Жижа приобретает твёрдость в зависимости от силы и скорости прилагаемого к ней воздействия. Если Лливелин налит в стакан и его медленно перевернуть — он медленно вытечет, если захочет. Если стакан перевернуть резко, жижа останется внутри, затвердев на дне. Соответственно, при резком ударе, выстреле или пинке скорее сломается нога/рука того, кто наносит удар, чем пострадает жижа.</p>

  <p>Превращение в жижу занимает некоторое время — достаточно небольшое, учитывая первую способность. Обратный процесс более сложен: Лливелин не может начать возврат к человеческому образу, пока не собраны все части его жиже-тела. Даже с учётом ускорения, обратная «сборка» может занять от пяти до пятнадцати минут. Лливелин «собирается» не по умолчанию, а по памяти, к некоему запомненному образу — потому те же повреждения, полученные перед разборкой-сборкой, могут быть не воспроизведены в итоге.<br>
  Пребывание в жиже-форме довольно энергозатратно, и уже через несколько часов изгою нужно будет хорошо отожраться и отоспаться. Если по какой-то причине Лливелин остаётся в жиже-форме дольше трёх часов, то по истечении этого срока он автоматически вернётся к человеческому облику и провалится в сон, чтобы восстановить силы. Пребывание, например вынужденное — из-за отсутствия части — больше трёх–четырёх часов в жиже-форме также завершится автоматически, как только это станет возможным. Скорее всего, Лливелину потребуется посторонняя помощь, чтобы восстановить силы.</p>

        </div>
      </div>
    </div>
    <!-- /tabs -->
  </section>
</article>

<style>
:root{
  --bg:#0d1517;
  --g1:#0e1a1d;
  --g2:#223235;
  --stroke:#1a3235;

  --text:#e9e6e0;
  --sub :#c8c3b8;
  --text-dim:#959187;

  --color1:#c5bdaa;
  --color1-light:#d9d4c9;
  --color1-dark :#a8a190;
}

.pp-text b,
.pp-text strong{
  color:var(--accent);
  font-weight:600;
  padding:0 .15em;
  background:rgba(197,189,170,.10);
  border-radius:2px;
}

.pp-card{
  max-width:960px;
  margin:2rem auto;
  padding:2.4rem;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  border:1px solid var(--stroke);
  box-shadow:0 0 22px #000b,inset 0 0 32px #001416;
  height:620px;
  overflow:hidden;
}

.pp-data{
  height:100%;
  overflow-y:auto;
  padding-right:0.4rem;
}
.pp-data::-webkit-scrollbar{
  width:4px;
}
.pp-data::-webkit-scrollbar-thumb{
  background:var(--text-dim);
  border-radius:4px;
}

.pp-tabs{font:normal 100% "Inter";}
.pp-tabs input{display:none;}

.pp-nav{display:flex;}
.pp-nav label{
  flex:1;
  position:relative;
  font:600 .9rem/2 "Inter",sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:.3rem 1.4rem;
  margin-left:-10px;
  cursor:pointer;

  background:#0d1b1e;
  border:1px solid var(--color1);
  color:var(--sub);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,12px 100%);
  transition:.2s;
}
.pp-nav label:first-child{
  margin-left:0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,0 100%);
}
.pp-nav label:last-child{
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%);
}
.pp-nav label:not(:first-child)::before{
  content:"";
  position:absolute;
  left:-1px;top:0;
  width:2px;height:100%;
  background:var(--color1);
  transform:skewX(20deg);
}
.pp-nav label:hover{
  background:var(--color1-dark);
  color:#fff;
}
#tab-1:checked~.pp-nav label[for="tab-1"],
#tab-2:checked~.pp-nav label[for="tab-2"],
#tab-3:checked~.pp-nav label[for="tab-3"],
#tab-4:checked~.pp-nav label[for="tab-4"]{
  background:var(--color1);
  color:#0d1b1e;
  border-color:var(--color1-light);
  padding:.6rem 1.4rem;
  margin-top:-3px;
  z-index:2;
}

.pp-panel{
  display:none;
  animation:fade .25s ease;
  padding:1.1rem 20px;
  color:var(--sub);
}
@keyframes fade{from{opacity:0;transform:translateY(4px);}}

#tab-1:checked~.pp-panel[data-tab="1"],
#tab-2:checked~.pp-panel[data-tab="2"],
#tab-3:checked~.pp-panel[data-tab="3"],
#tab-4:checked~.pp-panel[data-tab="4"]{display:block;}

.pp-panel-content{display:flex;gap:2rem;align-items:flex-start;}

.pp-portrait{
  flex:0 0 220px;margin:0;
  position:relative;
  filter:drop-shadow(0 0 12px #000a);
  border:2px solid var(--color1);
}
.pp-portrait img{width:100%;display:block;border-radius:6px;filter:grayscale(.5);}
.pp-portrait::after{
  content:"";position:absolute;inset:0;
  background:rgba(197,189,170,.35);
  mix-blend-mode:multiply;
}

.pp-right{flex:1;display:flex;flex-direction:column;gap:1.5rem;}

.pp-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  font-size:.95rem;
}
.pp-facts div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;}
.pp-facts .key{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  justify-self:end;
  text-transform:uppercase;font-weight:600;font-size:.85rem;line-height:.5;
  color:var(--text);
  padding-right:.4rem;white-space:nowrap;
}
.key-sub{font-size:.75rem;color:var(--sub);text-transform:none;}
.pp-facts .bar{width:4px;height:1.2em;background:var(--color1);border-radius:1px;}
.pp-facts .val{justify-self:start;font-size:.95rem;color:var(--sub);white-space:nowrap;padding-left:.4rem;}

.pp-section-title{
  margin:2rem 0 .6rem;
  font:600 1rem/1 "Inter",sans-serif;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--text);
}
.pp-section-box{
  padding:1rem 1.2rem;
  background:rgba(255,255,255,.02);
  border-left:4px solid var(--color1);
  box-shadow:inset 0 0 0 1px #123135;
  font-size:.95rem;line-height:1.6;
  color:var(--sub);text-align:justify;
}

.pp-text{font-size:1rem;line-height:1.7;text-align:justify;color:var(--sub);}
.pp-text ul{margin:0 0 1.4rem 1.2rem;padding-left:1rem;list-style:disc;color:var(--sub);}
.pp-text p{margin:0 0 1rem;}

.pp-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1.4rem;
}
.pp-name{
  font:600 2rem/1 "Cinzel",serif;text-transform:uppercase;
  letter-spacing:.05em;color:var(--sub);margin:0 2rem;
}
.pp-brand{
  display:flex;align-items:center;gap:.6rem;
  font:600 .9rem "Inter",sans-serif;color:var(--color1);
}
.pp-brand img{height:50px;width:auto;filter:brightness(1.2);opacity:.9;}
</style>
[/html]
[hideprofile]

Отредактировано Llywelyn Rhys (2025-04-30 22:19:28)