[html]
<style>
/* Общие стили */
details {
    margin-bottom: 20px;
}

summary {
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 5px;
}

.episode-filter {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.filter-options {
    flex: 1;
    background-color: #fafafa;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-options span {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.filter-options ul {
    list-style-type: none;
    padding: 0;
}

.filter-options li {
    margin-bottom: 5px;
}

.filter-options label {
    cursor: pointer;
    font-size: 0.9em;
}

.filter-options input {
    margin-right: 10px;
}

/* Хронология */
.episode-timeline {
    display: flex;
    gap: 20px;
}

.timeline-period {
    flex: 1;
    background-color: #fafafa;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-date {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
}

.episode-list {
    list-style-type: none;
    padding: 0;
}

.episode-item {
    margin-bottom: 10px;
}

.episode-item a {
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
}

.episode-item a:hover {
    text-decoration: underline;
}

/* Цвета и тени */
.episode-filter, .timeline-period {
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.past-events {
    background-color: #e9f7f7;
}

.current-events {
    background-color: #fef7e9;
}

/* Адаптивность */
@media (max-width: 768px) {
    .episode-filter, .episode-timeline {
        flex-direction: column;
    }
}

</style>
<details open="">
    <summary>Фильтр эпизодов и событий</summary>

    <div class="episode-filter" data-component="filter">
        <div class="filter-options">
            <span>Показать:</span>
            <ul>
                <li><label><input type="checkbox" name="plot" value="plot" data-filter="show"> Сюжетные события</label></li>
                <li><label><input type="checkbox" name="in-progress" value="in-progress" data-filter="show"> Эпизоды в процессе</label></li>
                <li><label><input type="checkbox" name="unfinished" value="unfinished" data-filter="show"> Недоигранные эпизоды</label></li>
                <li><label><input type="checkbox" name="completed" value="completed" data-filter="show"> Завершённые эпизоды</label></li>
                <li><label><input type="checkbox" name="group-a" value="group-a" data-filter="show"> События группировки "A"</label></li>
                <li><label><input type="checkbox" name="group-b" value="group-b" data-filter="show"> События группировки "B"</label></li>
            </ul>
        </div>

        <div class="filter-options exclude-options">
            <span>Скрыть:</span>
            <ul>
                <li><label><input type="checkbox" name="exclude-plot" value="exclude-plot" data-filter="hide"> Сюжетные события</label></li>
                <li><label><input type="checkbox" name="exclude-in-progress" value="exclude-in-progress" data-filter="hide"> Эпизоды в процессе</label></li>
                <li><label><input type="checkbox" name="exclude-unfinished" value="exclude-unfinished" data-filter="hide"> Недоигранные эпизоды</label></li>
                <li><label><input type="checkbox" name="exclude-completed" value="exclude-completed" data-filter="hide"> Завершённые эпизоды</label></li>
                <li><label><input type="checkbox" name="exclude-group-a" value="exclude-group-a" data-filter="hide"> События группировки "A"</label></li>
                <li><label><input type="checkbox" name="exclude-group-b" value="exclude-group-b" data-filter="hide"> События группировки "B"</label></li>
            </ul>
        </div>
    </div>
</details>

<div class="episode-timeline" data-component="timeline">
    <!-- Прошлые события -->
    <section class="timeline-period past-events">
        <h2 class="timeline-date">Июнь 2021</h2>
        <ul class="episode-list">
            <li class="episode-item group-a">
                <a href="ссылка">Дата</a>, Name & Name
                <p>Описание событий, связанных с A</p>
            </li>
            <li class="episode-item group-a">
                <a href="ссылка">Дата</a>, Name & Name
                <p>Описание событий, связанных с A</p>
            </li>
            <li class="episode-item unfinished">
                <a href="ссылка">Дата</a>, Name & Name
                <p>Описание событий, связанных с B</p>
            </li>
        </ul>

        <h2 class="timeline-date">Октябрь 2022</h2>
        <ul class="episode-list">
            <li class="episode-item completed">
                <a href="ссылка">Дата</a>, Name & Name
                <p>Описание событий, связанных с B</p>
            </li>
            <li class="episode-item in-progress">
                <a href="ссылка">Дата</a>, Name & Name
                <p>Описание событий, ни с чем не связанных</p>
            </li>
            <li class="episode-item plot">
                <a href="ссылка">Дата</a>, Name & Name
                <p>Описание событий, ни с чем не связанных</p>
            </li>
        </ul>
    </section>

    <!-- Текущие события -->
    <section class="timeline-period current-events">
        <h2 class="timeline-date">Январь 2023</h2>
        <ul class="episode-list">
            <li class="episode-item plot">
                <a href="ссылка">Дата</a>, Событие мира
                <p>Описание общего сюжетного события</p>
            </li>
            <li class="episode-item in-progress">
                <a href="ссылка">Дата</a>, Событие мира
                <p>Описание сюжетного события A</p>
            </li>
            <li class="episode-item completed">
                <a href="ссылка">Дата</a>, Name & Name
                <p>Описание событий, ни с чем не связанных</p>
            </li>
        </ul>

        <h2 class="timeline-date">Март 2023</h2>
        <ul class="episode-list">
            <li class="episode-item plot">
                <a href="ссылка">Дата</a>, Событие мира
                <p>Описание общего сюжетного события</p>
            </li>
            <li class="episode-item group-a">
                <a href="ссылка">Дата</a>, Событие мира
                <p>Описание сюжетного события A</p>
            </li>
            <li class="episode-item group-b">
                <a href="ссылка">Дата</a>, Name & Name
                <p>Описание событий, ни с чем не связанных</p>
            </li>
            <li class="episode-item group-b">
                <a href="ссылка">Дата</a>, Событие мира
                <p>Описание сюжетного события B</p>
            </li>
        </ul>
    </section>
</div>
[/html]