Нужно ещё кучу всего

[html]
<style>
.tablet {
background-image: url(https://forumupload.ru/uploads/001b/ce/b4/4/104993.png);
width: 700px;
height: 920px;
margin-left: 20px;
}

/* Строка имени */
.stim {
width: 578px;
border: 1px;
border-color: #000;
background-color: #959D9F;
font-family: Oswald;
text-align: center;
position: absolute;
margin-top: 40px;
margin-left: 55px;
text-transform: uppercase;
}

.tabbed > input {
display: none;
}
.tabbed > label {
width: 100px;
margin-top: 110px;
margin-left: 43px;
margin-bottom: -90px;
display: block;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-family: Oswald;
text-size: 20px;
text-transform: uppercase;
}

.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}

/* Оформление */

/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
background: transparent;
color: #191970;
height: 30px;
}

/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
background: #A02223 !important;
color: azure !important;
}

/* Оформление поля с контентом */
.tabs-body {
background: transparent;
color: #000;
}

/* Даем имена переключателям и полю с контентом */

/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}

/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}

.tabs-body {
width: auto;
position: relative;
}

.tabs-body > div {
position: absolute;
top: 0;
left: 0;
line-height: 1.4em;
opacity: 0;
width: auto;
height: 726px;
padding: 10px;
z-index: 0;
margin-top: 110px;
margin-right: 55px;
text-align: justify;
overflow: auto;
}

/* Переключатели */

/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,

/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
transform: translateY(0px);
transform: translateX(0%);
opacity: 1;
z-index: 1;
}

input[id^=nav] ~ .tabs-body > div[class^=body] {
}
</style>

<style>
.tabbed {
display: grid;
grid-template: /* навигация слева и поле */
"nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-5 tabs-body tabs-body tabs-body tabs-body" 1fr
/* Коллонки */
/ 1fr 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>

<div class="tablet">
<div class="stim"><td> Клара Ясперсен <br> Уровень доступа: В </div>

<div class="tabbed">


<input type="radio" name="tabs-body" id="nav-left-1" checked>
<label for="nav-left-1">Личные данные</label>

<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Внешность</label>

<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Способность</label>

<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Характеристика</label>
<input type="radio" name="tabs-body" id="nav-left-5">
<label for="nav-left-5">Биография</label>
<div class="tabs-body">

<div class="body-left-1">
<center><img src="https://forumupload.ru/uploads/001b/fb/3e/130/t623999.jpg"></center>
Karin Sauer – F&H2 <br>
Пол: женский<br>
Дата рождения: 19.12.2084.<br>
Возраст: 39 лет<br>
Рост и вес: 173 сантиметра, 75 килограммов<br>
<br>

Семейное положение: Разведена<br>
Должность/Статус: Преподаватель физики<br>
Ник в чате академии: Prawnsaver<br>
<br>
Отличительные признаки
<br>
Цвет глаз: Серые<br>
Цвет волос: Светло-русые<br>
Татуировки/Шрамы/Пирсинг/Пигментация: Никаких, даже уши не проколоты
</div>

<div class="body-left-2">
Чуть выше среднего и чуть крупнее среднего. На самом деле, довольно заурядная внешность: не слишком привлекательная, но и не настолько отталкивающая, чтобы обратить на это внимание. Из тех, чьё лицо имеет свойство само собой быстро выветриваться из памяти.
<br><br>
Светлый оттенок кожи, длинные русые волосы, рано начавшие седеть, глаза светло-серые, взгляд неприятный – всё время будто бы смотрит сквозь тебя, и если не знать, в чем дело, это может нервировать. Глубокие морщины на лбу и в уголках глаз не оставляют сомнений насчет возраста.
<br><br>
Одежду предпочитает очень закрытую, из множества слоёв и с минимальным количеством открытых участков кожи. По возможности даже в теплое время года.

<div class="body-left-3">
► Мысленный эксперимент<br><br>
Применение: Активная способность
<br><br>
Описание способности: Может с удивительной точностью, во всех подробностях, представить себе плюс-минус любой объект или ситуацию. Настолько точно, что в состоянии моделировать в голове любой сложности процесс, от падения камня до работы ядреного реактора или циклов экономического развития в целой стране.
<br><br>
И происходить в такой симуляции всё будет именно так, как должно в действительности. Камень весом один килограмм падает с абсолютно точной скоростью свободного падения для камня весом в один килограмм, ядро реактора кипятит воду ровно так, как это бы происходило в этих условиях на самом деле. Лопасть генератора сломается именно там, где сломается её реальный прототип.
<br><br>
Результаты таких симуляций неоднократно подтверждались реальными экспериментами – вплоть до износа средств измерения. Изучив чертеж устройства, Клара экономит Академии кучу времени и денег на прототипировании новых разработок, когда испытывает их, не сходя с дивана, в своей голове.
<br><br>
Ограничения: Требуется серьёзная подготовка. Клара не может моделировать то, что не может представить, или что-то, устройство чего ей неизвестно. В отдельных случаях можно немного досочинить самой, но тогда результат не будет соответствовать действительности, а какой в таком случае от него толк.
<br><br>
Кроме того, не всегда хватает квалификации интерпретировать результат: если даже Клара говорит, что мост по такому проекту развалится через неделю, двигатель такой конструкции при запуске взрывается, или что такой состав лекарства не лечит рак, то не всегда может с ходу сказать, почему.<br>

</div>

<div class="body-left-4">
Всё, что может быть уничтожено истиной, должно быть уничтожено.
<br><br>
Довольно сложная в общении для большинства людей. Очень прямолинейная, честная и, как она сама считает, простая, она не боится говорить людям правду в глаза, и ей всё равно, что об этом подумают. Не боится высказывать, что у неё на уме, и брать на себя ответственность, даже когда об этом не просят.
<br><br>
Одинаково требовательная к себе и к другим, она не отрицает право человека на ошибку, но считает, что почти каждая ошибка – от обыкновенной лени, нежелания заранее подготовиться там, где это было возможно. Для неё владение ситуацией – это форма уважения, именно оно, а не поддельная вежливость и заученные хорошие манеры. А людей она старается уважать и хочет, чтобы остальные уважали друг друга.
<br><br>
Всё, что ей говорят, воспринимает одинаково, будь то хорошие новости или плохие. Для неё важно другое – факты это или чьё-то оценочное суждение. Потому что к первым можно относиться как угодно, это ничего не изменит. А второе – ещё не хватало принимать во внимание. Её самое нелюбимое слово – «мнение».
<br><br>
Не смотря на кажущуюся чёрствость, ничто человеческое ей не чуждо, находит время для юмора и в целом при более близком знакомстве проявляет себя как интересный, добрый и надежный человек. Другое дело, что это не так очевидно на первый взгляд. Не всем хватает ума и эмпатии понять, что вечно понурое, «каменное» лицо у неё просто из-за того, что с детства не выработалось нужных привычек, а намеков она, очевидно, не понимает.
</div>

<div class="body-left-5">
С самого детства маленькая Клара часто слышала от старших родственников комплименты в духе «Хорошо, что ты у нас умная», и страшно этому радовалась. Когда стала старше, начала понимать, что тут имелось в виду, но к тому моменту это уже было совсем не важно.
<br><br>
Имелось в виду «а то рожей, честно говоря, не вышла».
<br><br>
Но этого Клара не знала. С детства была слабовидящей, в тестах с таблицами не могла разглядеть не то что первой строки – максимум могла более-менее уверенно сказать, где находится сама таблица. Очки не помогали, врачи разводили руками, в итоге пришли к выводу, что с глазами всё в порядке, проблема где-то глубже.
<br><br>
Но ничего, привыкла. Неплохо училась в школе (было трудно, но очень старалась), была в нормальных отношениях со сверстниками, хотя не то чтобы с кем-то близко дружила. Занималась музыкой, без особого энтузиазма, но вроде получалось, делала определенные успехи даже. В свободное время много читала – детская литература наскучила очень быстро, больше нравилась классика приключений. Избежала низкокачественной подростковой литературы – в оформлении, которое ей было бы комфортно читать, такое просто не издавали.
<br><br>
Если это важно, забросила музыку, когда стала совсем самую малость старше. Достаточно, чтобы сказать родителям, что имеет право заниматься тем, чем сама хочет, а не тем, чем хотела и в свое время не имела возможности мать.
<br><br>
Да, Клара действительно была не по годам умным ребенком.
<br><br>
Возможно, именно поэтому, когда оказалось, что Клара не только в этом смысле особенная, обошлось без скандалов и криков. Где-то в глубине она всегда знала, что именно что-то такое она должна совершить на земле, и до родителей эту мысль донесла легко, сама, даже без общения с человеком из правительства.
<br><br>
В интернате, куда, кстати, угодила в двенадцать лет, привычкам своим не изменила – звёзд с неба не хватала, но очень старалась, ну и о магии дружбы не забывала. Уже тогда приблизительно наметилась будущая судьба в академии Цюриха – тогда ещё не Академии с заглавной буквы.
<br><br>
Глубоко теоретическая наука, то, что прикладным станет явно не в этом столетии, была очевидным вариантом – что-то, для чего достаточно одних только живого ума и фантазии, так было во все времена. Но тут у нас первый человек, который может с теми же средствами заниматься чем-то, что будем служить людям уже сейчас. Для плодотворной исследовательской работы ей не была нужна даже лаборатория – хватит и просто удобного тихого места, и чтобы не отвлекал никто.
<br><br>
Плодотворно работала в лаборатории, даже некоторое время ей руководила, но недолго – быстро поняла, что руководить людьми есть кому, а вот тех, кто может по-настоящему собрать в голове самолёт, несколько меньше. Не то чтобы работать с людьми не нравилось, просто быстро поняла, что не там её место.
<br><br>
Плюс-минус из тех же соображений успела рано выйти замуж, а через год быстро и спокойно развестись. Семейное счастье и домашний очаг – тоже не для неё, как оказалось.
<br><br>
Но в полной мере будущее определил день разрушения академии. Чудом уцелела и даже почти не пострадала – но на долгих трое суток осталась одна под обломками здания, без возможности выбраться, без возможности шевельнуться, хоть что-то сделать. Только ждать, пока кто-нибудь поможет (а кто-то обязательно должен, героев всегда спасают), вдыхать пыль и думать. Очень долго и очень мрачно думать.
<br><br>
И именно тогда, под грудой обломков, на грани обморока от усталости, жажды и отсутствия свежего воздуха, в полной мере поняла, что именно должна совершить на земле. Что будущее человечества отнюдь не радужное, но есть и хорошие новости – будут другие сверхлюди и новые академии. И не ей, не кому-то из современников, а им, будущим поколениям, предстоит изменить к лучшему мир.
<br><br>
Именно поэтому она сама обратилась за работой в последнюю уцелевшую Академию, именно поэтому приняла решение взять на себя роль преподавателя, в которой вообще-то до тех пор никогда себя не видела. И именно поэтому никому не делает поблажек и на экзаменах валит, как комбайн: всё ради будущего человечества.
<br><br>
Секретная информация: Что конкретно Клара увидела в своей мысленной модели мира, и к чему, по её предположению, всё приведёт – не расскажет никому и никогда.
</div>

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