:root {
    --delay_secs: .2s;
    --transition_secs: .6s;
}

svg {
    --bg: black;
    --fg_highlight: white;
    background-color: var(--bg);
    display: block;
    fill: var(--bg);
    font-family: 'Alef';
    font-weight: bold;
    letter-spacing: initial;
    margin-inline: auto;
    max-height: min(100vh, 1080px);
    stroke-width: .5;
    --thick: .8;
}

#ABMH {
    --fg: #64ff64;
}

#ADWS {
    --fg: #ff6464;
}

@media (hover: hover) {
    svg:not(.blink):not([data-selected]) :is(
        svg:has(.m21 circle:hover) :is(.m21, .n21),
        svg:has(.m20 circle:hover) :is(.m20, .n20),
        svg:has(.m19 circle:hover) :is(.m19, .n19),
        svg:has(.m18 circle:hover) :is(.m18, .n18),
        svg:has(.m17 circle:hover) :is(.m17, .n17),
        svg:has(.m16 circle:hover) :is(.m16, .n16),
        svg:has(.m15 circle:hover) :is(.m15, .n15),
        svg:has(.m14 circle:hover) :is(.m14, .n14),
        svg:has(.m13 circle:hover) :is(.m13, .n13),
        svg:has(.m12 circle:hover) :is(.m12, .n12),
        svg:has(.m11 circle:hover) :is(.m11, .n11),
        svg:has(.m10 circle:hover) :is(.m10, .n10),
        svg:has(.m9 circle:hover) :is(.m9, .n9),
        svg:has(.m8 circle:hover) :is(.m8, .n8),
        svg:has(.m7 circle:hover) :is(.m7, .n7),
        svg:has(.m6 circle:hover) :is(.m6, .n6),
        svg:has(.m5 circle:hover) :is(.m5, .n5),
        svg:has(.m4 circle:hover) :is(.m4, .n4),
        svg:has(.m3 circle:hover) :is(.m3, .n3),
        svg:has(.m2 circle:hover) :is(.m2, .n2),
        svg:has(.m1 circle:hover) :is(.m1, .n1),
        svg:has(.m0 circle:hover) :is(.m0, .n0)) {
        filter: drop-shadow(0 0 1px var(--fg));
        fill: var(--fg_highlight);
        stroke-width: var(--thick);
    }
}

@media (hover: none) {
    svg:not(.blink) :is(
        [data-selected=m21] :is(.m21, .n21),
        [data-selected=m20] :is(.m20, .n20),
        [data-selected=m19] :is(.m19, .n19),
        [data-selected=m18] :is(.m18, .n18),
        [data-selected=m17] :is(.m17, .n17),
        [data-selected=m16] :is(.m16, .n16),
        [data-selected=m15] :is(.m15, .n15),
        [data-selected=m14] :is(.m14, .n14),
        [data-selected=m13] :is(.m13, .n13),
        [data-selected=m12] :is(.m12, .n12),
        [data-selected=m11] :is(.m11, .n11),
        [data-selected=m10] :is(.m10, .n10),
        [data-selected=m9] :is(.m9, .n9),
        [data-selected=m8] :is(.m8, .n8),
        [data-selected=m7] :is(.m7, .n7),
        [data-selected=m6] :is(.m6, .n6),
        [data-selected=m5] :is(.m5, .n5),
        [data-selected=m4] :is(.m4, .n4),
        [data-selected=m3] :is(.m3, .n3),
        [data-selected=m2] :is(.m2, .n2),
        [data-selected=m1] :is(.m1, .n1),
        [data-selected=m0] :is(.m0, .n0)) {
        filter: drop-shadow(0 0 1px var(--fg));
        fill: var(--fg_highlight);
        stroke-width: var(--thick);
    }
}

svg:not(.blink) :is(
    [data-selected=m21] :is(.m21, .n21),
    [data-selected=m20] :is(.m20, .n20),
    [data-selected=m19] :is(.m19, .n19),
    [data-selected=m18] :is(.m18, .n18),
    [data-selected=m17] :is(.m17, .n17),
    [data-selected=m16] :is(.m16, .n16),
    [data-selected=m15] :is(.m15, .n15),
    [data-selected=m14] :is(.m14, .n14),
    [data-selected=m13] :is(.m13, .n13),
    [data-selected=m12] :is(.m12, .n12),
    [data-selected=m11] :is(.m11, .n11),
    [data-selected=m10] :is(.m10, .n10),
    [data-selected=m9] :is(.m9, .n9),
    [data-selected=m8] :is(.m8, .n8),
    [data-selected=m7] :is(.m7, .n7),
    [data-selected=m6] :is(.m6, .n6),
    [data-selected=m5] :is(.m5, .n5),
    [data-selected=m4] :is(.m4, .n4),
    [data-selected=m3] :is(.m3, .n3),
    [data-selected=m2] :is(.m2, .n2),
    [data-selected=m1] :is(.m1, .n1),
    [data-selected=m0] :is(.m0, .n0)) {
        filter: drop-shadow(0 0 1px var(--fg));
        fill: var(--fg_highlight);
        stroke-width: var(--thick);
}

.blink {
    --delay_secs: 0s;
    --transition_secs: 0s;
}

.keyboard {
    cursor: none;
}

circle {
    fill: var(--fg);
    r: 2.2px;
}

.m0 circle {
    r: 3.56px;
}

g {
    transition: all var(--transition_secs) calc(var(--delay_secs) * 3);
}

line {
    stroke: var(--fg);
}

.m0 {
    transition-delay: 0s;
}

.m1, .m2, .m3 {
    transition-delay: var(--delay_secs);
}

.m4, .m5, .m6, .m7, .m8, .m9 {
    transition-delay: calc(var(--delay_secs) * 2);
}

.snark {
    transition: cursor .5s allow-discrete;
}

text {
    dominant-baseline: middle;
    font-size: 3.5px;
    font-weight: bold;
    pointer-events: none;
    text-anchor: middle;
    -webkit-user-select: none;
    user-select: none;
}

.m0 text {
    font-size: 5.66px;
}

@media (max-width: 480px) {
    svg {
        margin-inline: var(--anti_margin);
    }
}