.spoiler {
    --spoiler-cover-opacity: 1;

    display: inline;
    padding: 0.06em 0.32em;

    color: inherit;
    background:
        color-mix(
            in srgb,
            currentColor calc(var(--spoiler-cover-opacity) * 100%),
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            currentColor calc(var(--spoiler-cover-opacity) * 100%),
            transparent
        );

    border-radius: 0.1em;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    cursor: pointer;
    user-select: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.spoiler__content {
    visibility: hidden;
}

.spoiler.is-revealed {
    padding: 0;

    background: transparent;
    border-color: transparent;

    cursor: text;
    user-select: text;
}

.spoiler.is-revealed .spoiler__content {
    visibility: visible;
}

.spoiler:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.spoiler-click-hint {
    position: fixed;
    z-index: 10000;

    max-width: min(280px, calc(100vw - 24px));
    padding: 7px 11px;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 4px;

    color: #ffffff;
    background: rgba(0, 0, 0, 0.88);

    font-family: "Asta Sans", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;

    pointer-events: none;
    mix-blend-mode: normal;

    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px));

    transition: opacity 0.12s ease;
}

.spoiler-click-hint.is-visible {
    opacity: 1;
}