[html]
<div class="npc-card-wrapper">

<style>

.npc-card-wrapper{
    all:initial;
    font-family:Arial, sans-serif;
    display:block;
}

.npc-card-wrapper *{
    box-sizing:border-box;
}

/* ОСНОВА */
.npc-card-wrapper .npc-card{
    width:780px;
    background:#212121;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.6);
    color:#CACACA;
    padding:18px;
}

/* ВЕРХНЯЯ ЧАСТЬ */
.npc-card-wrapper .npc-main{
    display:flex;
    gap:18px;
}

/* АВАТАР */
.npc-card-wrapper .npc-avatar-block{
    width:180px;
    flex-shrink:0;
    text-align:center;
}

.npc-card-wrapper .npc-avatar{
    width:180px;
    height:180px;
    border-radius:16px;
    overflow:hidden;
    background:#181818;
}

.npc-card-wrapper .npc-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* СТАТУС */
.npc-card-wrapper .npc-status{
    margin-top:10px;
    padding:7px;
    border-radius:10px;
    background:#181818;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.npc-card-wrapper .alive{
    color:#1C99C3;
    border:1px solid rgba(28,153,195,.35);
}

.npc-card-wrapper .dead{
    color:#ff4d6d;
    border:1px solid rgba(255,77,109,.25);
}

/* ИНФОРМАЦИЯ */
.npc-card-wrapper .npc-info{
    flex:1;
}

.npc-card-wrapper .npc-name{
    font-size:18px;
    letter-spacing:2px;
    color:#1C99C3;
    margin-bottom:10px;
    text-shadow:0 2px 10px rgba(0,0,0,.7);
}

.npc-card-wrapper .npc-subtitle{
    font-size:11px;
    color:#1C99C3;
    letter-spacing:1px;
    margin-bottom:12px;
}

/* ОПИСАНИЕ */
.npc-card-wrapper .npc-description{

    background:#181818;
    border-radius:14px;
    padding:12px;
    height:140px;
    overflow-y:auto;

    font-size:12px;
    line-height:1.5;
    color:#CACACA;

}

.npc-card-wrapper .npc-description::-webkit-scrollbar{
    width:6px;
}

.npc-card-wrapper .npc-description::-webkit-scrollbar-track{
    background:#111;
}

.npc-card-wrapper .npc-description::-webkit-scrollbar-thumb{
    background:#1C99C3;
    border-radius:10px;
}

/* ЭПИЗОДЫ */
.npc-card-wrapper .episodes{

    margin-top:16px;
    background:#181818;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.05);

}

.npc-card-wrapper summary{

    cursor:pointer;
    padding:12px;

    color:#1C99C3;

    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;

    list-style:none;

}

.npc-card-wrapper summary::-webkit-details-marker{
    display:none;
}

.npc-card-wrapper .episode-list{

    padding:0 12px 12px;

}

.npc-card-wrapper .episode{

    margin-top:8px;

    padding:10px;

    background:#222;

    border-radius:10px;

    border-left:3px solid #1C99C3;

}

.npc-card-wrapper .episode a{

    color:#CACACA;

    text-decoration:none;

    font-size:12px;

}

.npc-card-wrapper .episode a:hover{

    color:#1C99C3;

}

/* ФУТЕР */
.npc-card-wrapper .npc-footer{

    margin-top:15px;

    padding-top:12px;

    border-top:1px solid #2a2a2a;

    font-size:11px;

    color:#777;

}

</style>

<div class="npc-card">

<div class="npc-main">

<!-- АВАТАР -->
<div class="npc-avatar-block">

    <div class="npc-avatar">
        <img src="https://upforme.ru/uploads/001c/bb/3f/2/129413.png">
    </div>

    <div class="npc-status alive">
        ● ЖИВ
    </div>

</div>

<!-- ИНФОРМАЦИЯ -->
<div class="npc-info">

    <div class="npc-name">
       セージ // КИСКЕ УРАХАРА
    </div>

    <div class="npc-subtitle">
        Независимые | Владелец магазина
    </div>

    <div class="npc-description">

Высокий мужчина средних лет с расслабленной улыбкой и неизменной полосатой панамой, скрывающей внимательный взгляд серо-зелёных глаз. За внешней беспечностью и привычкой отшучиваться скрывается один из величайших умов Общества Душ, чьи изобретения и открытия навсегда изменили ход истории. Хитрый, предусмотрительный и крайне опасный противник, Урахара предпочитает действовать из тени, позволяя окружающим недооценивать себя до самого последнего момента.

    </div>

</div>

</div>

<!-- ЭПИЗОДЫ -->

<details class="episodes">

<summary>
☰ ЭПИЗОДЫ
</summary>

<div class="episode-list">

<div class="episode">
<a href="https://haters.mybb.ru/viewtopic.php?id=35">
Эпизод I — Эта камера пыток наш будущий дом
</a>
</div>

<div class="episode">
<a href="https://haters.mybb.ru/viewtopic.php?id=43">
Эпизод II — Змеиный мед, малиновый яд
</a>
</div>

</div>

</details>

</div>

</div>
[/html]