body {
    padding: 0;
    margin: 0;
    display: flex;
    height: 100vh;
    user-select: none;
    & > div:first-of-type {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
            text-align: center;
            transform: rotate(calc(-360deg / var(--count) * var(--value)));
            --radius: calc((var(--count) - 1) * 10px);
            li {
                place-self: center;
                transform-origin: center top;
                position: fixed;
                text-align: center;
                transform: rotate(calc(360deg / var(--count) * var(--i))) translateY(calc(-2*(var(--radius))));
                max-width: calc(var(--radius) * 6 / var(--count));
            }
        }
    }
    & > div:last-of-type {
        form {
            height: 100%;
            textarea {
                height: 100%;
            }
        }
    }
}

.starting {
    animation: spin 400ms ease-in;
}

.spinning {
    animation: spin 400ms linear infinite;
}

.stopping {
    animation: spin 400ms ease-out;
}

@keyframes spin {
    from {
        transform: rotate(calc(360deg / var(--count) * var(--i)))
    }
    to {
        transform: rotate(calc(360deg / var(--count) * var(--i) + 360deg))
    }
}