.bludit-spoiler {
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.bludit-spoiler summary {
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    outline: none;
    list-style: none;
}

.bludit-spoiler summary::-webkit-details-marker {
    display: none;
}

.bludit-spoiler summary::marker {
    display: none;
}

.bludit-spoiler-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    border-top: 0px solid #ddd;
    padding: 0 10px;
    transition:
        grid-template-rows 0.5s ease,
        padding 0.5s ease,
        border-top-width 0.5s ease;
}

.bludit-spoiler[open] .bludit-spoiler-content {
    grid-template-rows: 1fr;
    padding: 10px;
    border-top-width: 1px;
}

/*
 * Chrome не знает, с каких значений начинать transition, когда элемент
 * впервые попадает под селектор [open] — и рисует конечное состояние
 * мгновенно. @starting-style явно задаёт стартовые значения,
 * от которых браузер должен анимировать.
 * Поддержка: Chrome 117+, Firefox 129+, Safari 17.5+
 */
@starting-style {
    .bludit-spoiler[open] .bludit-spoiler-content {
        grid-template-rows: 0fr;
        padding: 0 10px;
        border-top-width: 0px;
    }
}

.bludit-spoiler-content > div {
    overflow: hidden;
}