/* Display updates: document layout, responsive layout. */
.display-updates {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-12);
    justify-content: center;
    margin: var(--space-48) 0 var(--space-24);
    text-align: center;
}

/* Display updates: default placement and spacing. */
.display-updates :where(span) {
    overflow-wrap: break-word;
}

/* Live celebration: default placement and spacing. */
.live-celebration {
    animation: none;
    display: block;
    margin: var(--space-24) 0;
    padding: var(--space-20);
    position: static;
    text-align: center;
}

/* Live celebration: default placement and spacing. */
.live-celebration[hidden] {
    display: none;
}

/* Live celebration: default placement and spacing. */
.live-celebration :where(h2) {
    margin: 0 0 var(--space-16);
}

/* Updates paused: default placement and spacing. */
.updates-paused *,
.updates-paused *::before,
.updates-paused *::after {
    animation: none;
    transition: none;
}

/* Live wrap: default placement and spacing. */
:where(body:has(.live-wrap)) {
    overflow-y: auto;
}

/* Live wrap: default placement and spacing. */
.live-wrap {
    height: auto;
    min-height: 100vh;
}

/* Responsive layout: arrange the view at this viewport. */
@media (min-width: 768px) {
    /* Display updates: default placement and spacing. */
    .display-updates {
        flex-direction: revert;
        margin: 0 var(--space-48) var(--space-24);
        text-align: revert;
    }

}