%%

    shell.environment.globals.update(vars(__builtins__))

%%
<style>
#corners {
    --weight: 0.5rem;
    --theta: 90deg;
    --inc: 20;
    --bg-color: white;
    --fg-color: black;
    display: flex;
    flex-direction: column;
    max-height: 800px;
    overflow-y: auto;
    background: var(--bg-color);
    tr{
        background: unset;
        padding: 0;
        td {
            &:nth-of-type(odd) {
                transform: scale(calc(5 * mod(var(--x), var(--inc)) / var(--inc)));
            }
        }
        &:nth-of-type(odd) {
            transform: translateX(5em);
        }
        display: flex;
        position: relative;
        flex-direction: row;
    }
    td {
        height: 2rem; 
        width: 2rem;
        display: block;
        border: calc(var(--weight)/2) rgba(0%, 0%, 0%, .5) solid;
        border-radius: 2rem;
    }
}
</style>
<table id=corners>
    {% for row in range(1000) -%}
    <tr style="--x: {{row}};">
        {% for col in range(10) -%}
        <td style="--y: {{col}};"></td>
        {%- endfor %}
    </tr>
    {%- endfor %}
</table>