.template-diagram {
    margin: calc(var(--heading-margin) - 0.5lh) 0 calc(var(--heading-margin) - 1.6rem + 8px) 0;

    & > .blurb {
        grid-column: center-start 1 / center-end 2;
        padding-right: 1.6rem;
    }

    & > ol {
        /* Variables overridden by the template */
        --grid-columns: repeat(5, 1fr);
        --grid-rows: repeat(5, 1fr);

        /* NOTE: Looks kind of narrow compared to the rest of the page.
           Maybe there's something we could do to make it look less awkward? */
        grid-column: center-start 3 / center-end 6;
        justify-self: center;

        display: grid;
        grid-template-columns: var(--grid-columns);
        grid-template-rows: var(--grid-rows);

        & > li {
            /* Variables overridden by the template */
            --grid-x: 2;
            --grid-y: 2;

            grid-column: var(--grid-x);
            grid-row: var(--grid-y);

            text-align: center;

            --step-color: magenta;
            &.color-red {
                --step-color: var(--p-foreground-red);
            }
            &.color-green {
                --step-color: var(--p-foreground-green);
            }
            &.color-blue {
                --step-color: var(--p-foreground-blue);
            }

            &.step {
                padding: 2.4rem 1.6rem;
                margin: 1.6rem 1.6rem;
                height: fit-content;
                min-height: calc(3lh + 1.6rem);
                align-self: center;

                --step-border-color: color-mix(
                    in oklab,
                    var(--background-color),
                    var(--step-color) 66%
                );

                border: 4px solid var(--step-border-color);
                border-radius: 1.2rem;
                box-shadow:
                    0.5px 0.5px var(--step-border-color),
                    1px 1px var(--step-border-color),
                    1.5px 1.5px var(--step-border-color),
                    2px 2px var(--step-border-color),
                    2.5px 2.5px var(--step-border-color),
                    3px 3px var(--step-border-color),
                    3.5px 3.5px var(--step-border-color),
                    4px 4px var(--step-border-color),
                    4.5px 4.5px var(--step-border-color),
                    5px 5px var(--step-border-color),
                    5.5px 5.5px var(--step-border-color),
                    6px 6px var(--step-border-color),
                    6.5px 6.5px var(--step-border-color),
                    7px 7px var(--step-border-color),
                    7.5px 7.5px var(--step-border-color),
                    8px 8px var(--step-border-color);

                display: flex;
                flex-direction: column;
                justify-content: center;

                position: relative;

                & h3 {
                    position: absolute;
                    left: -0.2ch;
                    top: -0.5lh;

                    padding: 0 1.6rem;
                    margin-left: -1.6rem;

                    background-color: var(--background-color);
                    box-shadow:
                        0px 4px var(--step-color),
                        4px 8px var(--background-color);

                    font-size: 150%;
                    font-weight: 800;
                }
            }

            --path-color: color-mix(in oklab, var(--background-color), var(--step-color) 66%);
            --path-label-color: color-mix(in oklab, var(--background-color), var(--step-color) 90%);
            --path-thickness: 0.4rem;
            --path-roundness: 1.6rem;
            --path-half-thickness: calc(var(--path-thickness) / 2);
            --path-counter-thickness: calc(var(--path-thickness) / -2);

            &.path-ew,
            &.path-sn,
            &.path-wn,
            &.path-es {
                display: grid;
                grid-template-rows: 1fr 1fr;
                grid-template-columns: 1fr 1fr;

                color: var(--path-label-color);
                font-weight: 600;
                font-size: 92.5%;

                &::before {
                    content: "";
                    display: block;
                }

                & p {
                    padding: 0.25lh;
                }
            }

            &.path-ew {
                & p {
                    grid-row: 2;
                    grid-column: 1 / -1;
                }

                &::before {
                    grid-column: 1 / -1;
                    border-bottom: var(--path-thickness) solid var(--path-color);
                    margin-bottom: var(--path-counter-thickness);
                }
            }

            &.path-sn {
                &::before {
                    grid-row: 1 / -1;
                    border-right: var(--path-thickness) solid var(--path-color);
                    margin-right: var(--path-counter-thickness);
                }
            }

            &.path-wn {
                & p {
                    grid-column: 1;
                    grid-row: 1;
                    align-self: end;
                }

                &::before {
                    grid-column: 1;
                    grid-row: 1;
                    border-right: var(--path-thickness) solid var(--path-color);
                    border-bottom: var(--path-thickness) solid var(--path-color);
                    border-bottom-right-radius: var(--path-roundness);
                    margin-right: var(--path-counter-thickness);
                    margin-bottom: var(--path-counter-thickness);
                }
            }

            &.path-es {
                & p {
                    grid-column: 2;
                    grid-row: 2;
                }

                &::before {
                    grid-column: 2;
                    grid-row: 2;
                    border-top: var(--path-thickness) solid var(--path-color);
                    border-left: var(--path-thickness) solid var(--path-color);
                    border-top-left-radius: var(--path-roundness);
                    margin-top: var(--path-counter-thickness);
                    margin-left: var(--path-counter-thickness);
                }
            }

            --arrowhead-scale: 6;

            --arrowhead-e: path("M 0 0 L 2 1 L 0 2 Z");
            --arrowhead-s: path("M 0 0 L 1 2 L 2 0 Z");
            --arrowhead-w: path("M 2 0 L 0 1 L 2 2 Z");
            --arrowhead-n: path("M 0 2 L 1 0 L 2 2 Z");

            &.arrowhead-e,
            &.arrowhead-w,
            &.arrowhead-s,
            &.narrow-arrowhead,
            & .loop-line {
                position: relative;

                &::after {
                    content: "";

                    display: block;
                    width: 2px;
                    height: 2px;

                    background-color: var(--path-color);
                }
            }

            &.arrowhead-e::after {
                grid-row: 2;
                grid-column: 2;
                justify-self: end;
                transform: translateY(-50%) scale(var(--arrowhead-scale));
                clip-path: var(--arrowhead-e);
            }

            &.arrowhead-w::after {
                transform: translateY(-50%) scale(var(--arrowhead-scale));
                clip-path: var(--arrowhead-w);
            }

            &.arrowhead-s::after {
                grid-row: 2;
                align-self: end;
                transform: translateX(-50%) scale(var(--arrowhead-scale));
                clip-path: var(--arrowhead-s);
            }

            &.narrow-arrowhead::after {
                display: none;
            }

            &.arrow-loop-down-up {
                display: grid;
                grid-template-rows: 1;
                grid-template-columns: 1fr 1fr 1fr;
            }

            & .loop-line {
                border-right: var(--path-thickness) solid var(--path-color);
                margin-right: var(--path-counter-thickness);

                &::after {
                    position: absolute;
                    right: 0;
                }

                &.loop-line-left::after {
                    transform: translateX(var(--path-half-thickness)) translateX(50%)
                        scale(var(--arrowhead-scale));
                    clip-path: var(--arrowhead-s);
                    bottom: 0;
                }

                &.loop-line-right::after {
                    transform: translateX(var(--path-half-thickness)) translateX(50%)
                        scale(var(--arrowhead-scale));
                    clip-path: var(--arrowhead-n);
                    top: 0;
                }
            }
        }
    }

    @media (max-width: 1200px) {
        & > .blurb {
            grid-column: center-start 1 / center-end 6;
            padding-right: unset;
            padding-bottom: 3.2rem;
        }

        & > ol {
            grid-column: center-start 1 / center-end 6;
            max-width: 100ch;
        }
    }

    @media (max-width: 800px) {
        & > ol {
            max-width: 40ch;

            display: flex;
            flex-direction: column;

            & > li {
                &.path-ew,
                &.path-sn,
                &.path-wn,
                &.path-es {
                    /* Reset to one row */
                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: 1fr;

                    min-height: 3.2rem;

                    &::before {
                        border: none;
                        border-radius: 0;

                        grid-column: 1;
                        grid-row: 1;

                        border-right: var(--path-thickness) solid var(--path-color);
                        margin-right: var(--path-counter-thickness);
                    }

                    & p {
                        grid-column: 1;
                        grid-row: 1;

                        text-align: right;
                        padding: 0.5ch 1ch;
                    }
                }

                &.arrow-loop-down-up {
                    min-height: 3.2rem;
                }

                &.narrow-optional {
                    display: none;
                }

                &.arrowhead-e::after,
                &.arrowhead-w::after,
                &.arrowhead-s::after,
                &.narrow-arrowhead::after {
                    display: block;
                    grid-column: 1;
                    grid-row: 1;
                    align-self: end;
                    justify-self: end;
                    /* position: absolute; */
                    /* left: 50%; */
                    /* bottom: -0.1rem; */
                    transform: translateY(0.1rem) translateX(50%) scale(var(--arrowhead-scale));
                    clip-path: var(--arrowhead-s);
                }
            }
        }
    }
}