.body {
    /* height: calc(100dvh - 70px - 2rem); */
    aspect-ratio: 100 / 56;
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}
.stage {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card {
    position: absolute;
    display: none;
    container-type: inline-size;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 300ms ease, opacity 200ms ease, box-shadow 200ms ease;
    cursor: default;
    user-select: none;
    opacity: 1;
}
.card:not(.active) {
    transform: translate(-50%, -50%) scale(0.9) translateY(6px);
    opacity: 0;
    filter: grayscale(0.03);
}
.card.active {
    z-index: 200;
    transform: translate(-50%, -50%) scale(1.02);
    display: flex;
    opacity: 1;
}