nav {
    margin: auto;
    display: block;
}

img {
    display: block;
    margin: auto;
    width: 310px;
}

nav span {
    font: 1.2rem 'Orotund', serif;
    margin: 0;
}

@media only screen and (min-width: 321px) {
    nav span {
        font-size: 1.4rem;
    }
}
@media only screen and (min-width: 410px) {
    nav span {
        font-size: 1.8rem;
    }
}

@media only screen and (min-width: 820px) {
    nav span {
        font: 2.8rem 'Orotund', serif;
        letter-spacing: 0.1rem;
    }
}

nav [style*=--index] {
    --segment-arc-rad: calc((180 / var(--segment-count)) * 1deg);
    --radius: calc((var(--segment-chord-len) / sin(var(--segment-arc-rad))) * -1ch);
    display: inline-block;
    position: absolute;
    top: 64%;
    left: 50%;
    transform:
        translate(-50%, 50%)
        rotate(calc(
            var(--segment-arc-rad) * var(--index) - var(--segment-count) * var(--segment-chord-len) * 2.48deg
        ))
        translateY(var(--radius));
}

/* pts  */
canvas {
    margin: auto;
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    canvas {
        display: block;
    }
}