[html]<style>
.cr-wrapper {background-color:#1e1b1e; background: url(https://forumstatic.ru/files/001c/cc/89/61851.jpg) center; border:1px solid rgba(105,82,103,0.3);border-radius:6px;padding:25px;max-width:750px;height:750px;margin:0 auto;font-family:'Arial','Helvetica',sans-serif;color:#e5dec9;box-shadow:0 8px 24px rgba(0,0,0,0.4);line-height:1.5;font-size:14px;box-sizing:border-box;display:flex;flex-direction:column;}
.cr-header {display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #695267;padding-bottom:10px;margin-bottom:20px;flex-shrink:0;}
.cr-title {font-family:'Impact',sans-serif;font-size:26px;text-transform:uppercase;letter-spacing:2px;color:#e5dec9;}
.cr-nav {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;justify-content:space-between;flex-shrink:0;}
.cr-btn {flex:1 1 30%;text-align:center;font-family:monospace;font-size:11px;font-weight:bold;color:#e5dec9;background-color:rgba(105,82,103,0.15);padding:8px 4px;border:1px solid rgba(105,82,103,0.4);border-radius:4px;text-transform:uppercase;box-sizing:border-box;cursor:pointer;user-select:none;transition:all 0.2s ease;}
.cr-btn:hover {background-color:rgba(105,82,103,0.35);}
.cr-toggle {display:none;}
.cr-section {display:none;margin-bottom:25px;overflow-y:auto;flex-grow:1;padding-right:5px;animation:crFadeIn 0.3s ease forwards;}
.cr-section::-webkit-scrollbar {width:6px;}
.cr-section::-webkit-scrollbar-track {background:rgba(105,82,103,0.05);border-radius:4px;}
.cr-section::-webkit-scrollbar-thumb {background:rgba(105,82,103,0.4);border-radius:4px;}
.cr-section::-webkit-scrollbar-thumb:hover {background:rgba(105,82,103,0.6);}
#toggle-01:checked ~ #faction-01,#toggle-02:checked ~ #faction-02,#toggle-03:checked ~ #faction-03 {display:block;}
#toggle-01:checked ~ .cr-nav label[for="toggle-01"],#toggle-02:checked ~ .cr-nav label[for="toggle-02"],#toggle-03:checked ~ .cr-nav label[for="toggle-03"] {background-color:rgba(105,82,103,0.5);border-color:#695267;color:#fff;}
.cr-sec-title {font-weight:bold;font-family:monospace;font-size:14px;color:#695267;margin-bottom:10px;letter-spacing:1px;border-bottom:1px dashed rgba(105,82,103,0.3);padding-bottom:4px;text-transform:uppercase;}
.cr-list {display:flex;flex-direction:column;gap:6px;}
.cr-row {display:flex;justify-content:space-between;align-items:center;background-color:rgba(105,82,103,0.04);padding:6px 12px;border:1px solid rgba(105,82,103,0.15);border-radius:4px;}
.cr-badge {font-size:11px;font-family:monospace;color:#e5dec9;background-color:rgba(105,82,103,0.2);padding:2px 6px;border-radius:3px;border:1px solid rgba(105,82,103,0.4);text-transform:lowercase;}
@keyframes crFadeIn {from {opacity:0;transform:translateY(-3px);} to {opacity:1;transform:translateY(0);}}
</style>

<div class="cr-wrapper">
<input type="radio" name="faction-group" id="toggle-01" class="cr-toggle">
<input type="radio" name="faction-group" id="toggle-02" class="cr-toggle">
<input type="radio" name="faction-group" id="toggle-03" class="cr-toggle">

<div class="cr-header">
<div class="cr-title">// ЗАНЯТЫЕ ВНЕШНОСТИ</div>
</div>

<div class="cr-nav">
<label for="toggle-01" class="cr-btn">A — I</label>
<label for="toggle-02" class="cr-btn">J — R</label>
<label for="toggle-03" class="cr-btn">S — Z</label>
</div>

<div id="faction-01" class="cr-section">
<div class="cr-sec-title">A, B, C</div>
<div class="cr-list">
<div class="cr-row">
<div>ФАНДОМ — имя внешности</div>
<div class="cr-badge">имя персонажа</div>
</div>
</div>
<div class="cr-sec-title" style="margin-top:20px;">D, E, F</div>
<div class="cr-list">
<div class="cr-row">
<div>ФАНДОМ — имя внешности</div>
<div class="cr-badge">имя персонажа</div>
</div>
</div>
<div class="cr-sec-title" style="margin-top:20px;">G, H, I</div>
<div class="cr-list">
<div class="cr-row">
<div>ФАНДОМ — имя внешности</div>
<div class="cr-badge">имя персонажа</div>
</div>
</div>
</div>

<div id="faction-02" class="cr-section">
<div class="cr-sec-title">J, K, L</div>
<div class="cr-list">
<div class="cr-row">
<div>ФАНДОМ — имя внешности</div>
<div class="cr-badge">имя персонажа</div>
</div>
</div>
<div class="cr-sec-title" style="margin-top:20px;">M, N, O</div>
<div class="cr-list">
<div class="cr-row">
<div>ФАНДОМ — имя внешности</div>
<div class="cr-badge">имя персонажа</div>
</div>
</div>
<div class="cr-sec-title" style="margin-top:20px;">P, Q, R</div>
<div class="cr-list">
<div class="cr-row">
<div>ФАНДОМ — имя внешности</div>
<div class="cr-badge">имя персонажа</div>
</div>
</div>
</div>

<div id="faction-03" class="cr-section">
<div class="cr-sec-title">S, T, U</div>
<div class="cr-list">
<div class="cr-row">
<div>ФАНДОМ — имя внешности</div>
<div class="cr-badge">имя персонажа</div>
</div>
</div>
<div class="cr-sec-title" style="margin-top:20px;">V, W, X</div>
<div class="cr-list">
<div class="cr-row">
<div>ФАНДОМ — имя внешности</div>
<div class="cr-badge">имя персонажа</div>
</div>
</div>
<div class="cr-sec-title" style="margin-top:20px;">Y, Z</div>
<div class="cr-list">
<div class="cr-row">
<div>ФАНДОМ — имя внешности</div>
<div class="cr-badge">имя персонажа</div>
</div>
</div>
</div>
</div>
[/html]