:root {
    --sg-unit: 32px;
    --sg-gap: 8px;
    --sg-border: 16px;
}

.steno-graphic {
    position: absolute;
    top: 64px;
    left: 64px;
    display: grid;
    gap: var(--sg-gap);
    grid-template-rows:
        calc(var(--sg-unit) * 2)
        repeat(3, calc(var(--sg-unit) * 4));
    grid-template-columns:
        repeat(2, calc(var(--sg-unit) * 3))
        calc(var(--sg-unit) - var(--sg-gap))
        calc(var(--sg-unit) * 2)
        calc(var(--sg-unit) - var(--sg-gap))
        calc(var(--sg-unit) * 2)
        calc(var(--sg-unit) - var(--sg-gap))
        var(--sg-unit)
        calc(var(--sg-unit) - var(--sg-gap))
        calc(var(--sg-unit) * 2)
        calc(var(--sg-unit) - var(--sg-gap))
        calc(var(--sg-unit) * 2)
        calc(var(--sg-unit) - var(--sg-gap))
        repeat(3, calc(var(--sg-unit) * 3));
    grid-template-areas:
        "k0  k0  k0  k0  k0  k0  k0  k0  k0  k0  k0  k0  k0  k0  k0  k0 "
        "k1  k2  k4  k4  k6  k6  k10 k10 k10 k13 k13 k15 k15 k17 k19 k21"
        "k1  k3  k5  k5  k7  k7  k10 k10 k10 k14 k14 k16 k16 k18 k20 k22"
        ".   .   .   k8  k8  k9  k9  .   k11 k11 k12 k12 .   .   .   .  ";
    z-index: -1;
}

.steno-graphic::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, transparent, var(--bg));
}

.sg-key {
    box-sizing: border-box;
    border: var(--sg-border) solid var(--light-2);
}

.sg-key.lower {
    border-bottom-left-radius: calc(var(--sg-unit) * 1.5);
    border-bottom-right-radius: calc(var(--sg-unit) * 1.5);
}