.grid-v {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    outline: 1px solid #fff2;
    /* outline-offset: 2px; */
    margin: .125rem;
    padding: .5rem .5rem .125rem .25rem;
}
.row-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
/* .row-container:hover {outline: 1px dashed #8888;} */
.row, .rod, .roe {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: row;

    /* font-size: 32px; */
    position: relative;
    margin-top: -.567em;
    /* margin-top: -.134em; */
}
.row:nth-of-type(2n) {transform:translateX(.25em);}
/* .row:nth-of-type(2n) {transform:translateX(.5em);} */


[class*="node"] {
    position: relative;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;

    min-height: 2em; min-width: 2em;
    /* min-height: 1em; min-width: 1em; */
    font-size: 18px;
    margin: 2px;

    /* height: 1em; width: 1em;
    line-height: 1em;
    margin: 0 -.25em; */
}
/* .row, .rod, .roe {--y-clr: var(--i);}
.hex, .node {
--x-clr: var(--i);
--yx-clr: calc(var(--y-clr) + var(--x-clr));
--clr: hsla(var(--yx-clr), 100%, 50%, .25);
} */
.hex {
height: 1em; width: 1em;
line-height: 1em;
margin: 0 -.25em;
border-radius: 50%;
background-color: var(--clr);
box-shadow: inset 0 0 2px 1px #39f;
}
[class*="node"] {
    transition: 
    box-shadow 100ms ease-in-out,
    transform 100ms ease-in-out,
    background-color 100ms ease-in-out;
    /* outline: 1px solid #fff2; */
    /* outline-offset: 2px; */
}


/* [class*="node"]:hover {
    outline: 1px solid #fff;
    outline-offset: 2px;
} */
/* [class*="node"]::before,
[class*="node"]::after {
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 100%; width: 100%;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
} */
/* [class*="node"]::before {content: attr(data-val);} */
/* [class*="node"]::after {
    content: attr(data-id);
    background: #0d0d0d;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}
[class*="node"]:hover::after {opacity: 1;} */

/* [data-row="4"] {outline: 1px solid #39f;}
[data-col="7"] {outline: 1px solid #39f;} */
/* [data-row="4"][data-col="7"] {outline: 1px solid #39f;} */
/* [data-row="7"][data-col="7"] {outline: 1px solid #39f;} */

label {
    max-width: 8rem;
    margin: .5rem .25rem;
}
.grid-update-btn {
    min-width: 6rem;
    margin: .125rem;
    padding: .25rem .5rem;

    max-width: 8rem;
    margin: .5rem .25rem;

    background-color: transparent;
    border-radius: 2rem;
    border: none;
    
    color: #fff;
    text-shadow: 2px 2px 2px #1119;
    cursor: pointer;
    user-select: none;
    transition: box-shadow 200ms ease-in-out;
}
.grid-update-btn:hover {
    outline: 1px solid #fffc; outline-offset: 2px; 
}

.grid-update-btn {
    --clr-left: var(--clr-4);
    --clr-dark-left: var(--clr-4-dark);
    --clr-right: var(--clr-1);
    --clr-dark-right: var(--clr-1-dark);

    --fill-bgi: linear-gradient(-30deg, var(--clr-4), var(--clr-1));
    --ghost-bgi: linear-gradient(120deg, var(--bs4-4), var(--bs4-1));
    --glow-shadow: 
    0px 0px 4px 2px var(--clr),
    inset 1px 1px 0px 0px var(--clr),
    inset -1px -1px 0px 0px var(--clr-dark);
    --glow-shadow: 
    -1px -1px 3px 0px var(--clr-left),
    inset 1px 1px 0px 0px var(--clr-left),
    1px 1px 3px 0px var(--clr-right),
    inset -1px -1px 0px 0px var(--clr-dark-right);
}
#style--fill:checked ~ main .grid-update-btn {background-image: var(--fill-bgi);}
#style--ghost:checked ~ main .grid-update-btn {background-image: var(--ghost-bgi);}
#style--ghost:checked ~ main .grid-update-btn,
#style--glow:checked ~ main .grid-update-btn {box-shadow: var(--glow-shadow);}

/* Styles for the nodes. */
/* [class*="node"] {
    --val: 0;
    --vhue: calc(var(--val) * 360);
    --valp: calc(var(--val) * 1);
    --vhclr: hsla(var(--vhue), 100%, 60%, var(--valp));
    --vhclr-dark: hsla(var(--vhue), 100%, 20%, var(--valp));

    --valp-shw: calc(var(--val) * .5);
    --vhclr-shw: hsla(var(--vhue), 100%, 60%, var(--valp-shw));
    --vhclr-shw-dark: hsla(var(--vhue), 100%, 20%, var(--valp-shw));
    
    transition: 
    box-shadow 100ms ease-in-out,
    background-color 100ms ease-in-out;
} */
/* [class*="node"] {
    transition: 
    box-shadow 50ms ease-in-out,
    background-color 50ms ease-in-out;
} */
#style--fill:checked ~ main [class*="node"] {
    --val: 0;
    /* --vhue: calc(var(--val) * 360); */
    /* --vsz: calc(var(--val) * .7 + .7); */
    --vsz: calc(var(--val) * .5 + .7);
    --vty: calc(var(--val) * -15px);
    --vhue: calc(var(--val) * 36);
    --valp: calc(var(--val) * 1);
    --vhclr: hsla(var(--vhue), 100%, 60%, var(--valp));
    /* --valp-shw: calc(var(--val) * .5);
    --vhclr-shw: hsla(var(--vhue), 100%, 60%, var(--valp-shw)); */

    background-color: var(--vhclr);
    /* background-color: hsla(calc(var(--val) * 360), 100%, 60%, .5); */
    /* background-image: linear-gradient(-30deg, var(--vhclr-dark), var(--vhclr)); */
    /* box-shadow: inset 0 0 2px 1px var(--vhclr-dark); */
}
/* #style--ghost:checked ~ main [class*="node"] {background-color: var(--vhclr-shw);}
#style--ghost:checked ~ main [class*="node"],
#style--glow:checked ~ main [class*="node"] {
    box-shadow: 
    0px 0px 4px 2px var(--vhclr),
    inset 0px 0px 0px 1px var(--vhclr);
} */



/* spaced out vs compact */
[for="style-spacing--overlap"] {
    --sz: 1em;
    --fsz: 18px;
    --margin: 0 -.25em;
    --margin-add: -.25em;
    --trX: .75em;
}
[for="style-spacing--spaced"] {
    --sz: 2em;
    --fsz: 16px;
    --margin: 0 2px;
    --margin-add: 2px;
    --trX: 1.125em;
}

[class*="node"] {
    --sz: 1em;
    --fsz: 18px;
    --margin: 0 -.25em;
    /* --margin: 0 0em; */
    --margin-add: -.25em;
    /* --margin-add: 0em; */
    --trX: .75em;

    font-size: var(--fsz); 
    margin: var(--margin); 
    min-height: var(--sz); 
    min-width: var(--sz);
    line-height: var(--sz);
    color: transparent;

    /* transform: scale(var(--vsz)); */
    transform: translateY(var(--vty));
    transform: translateY(var(--vty)) scale(var(--vsz));

    /* box-shadow: 
    0px 0px 4px 2px var(--vhclr),
    inset 0px 0px 0px 1px var(--vhclr);
    box-shadow: 
    0px 0px 4px 2px var(--vhclr-shw),
    inset 0px 0px 0px 1px var(--vhclr-shw); */
}
.node-in-btn:nth-of-type(1) {--tDist: calc(var(--trX) * -1);}
.node-in-btn:nth-of-type(2) {--tDist: calc(var(--trX) * 1);}
.node-in-btn {
    font-size: var(--fsz)!important;
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /* --tDist: calc(var(--trX) * 1); */
    margin: var(--margin)!important;
    /* transform: translateX(calc(var(--tDist) - 1em - var(--margin-add))) translateY(calc(-1em - var(--margin-add))); */
    transform: translateX(calc(var(--tDist) - 1em - var(--margin-add))) translateY(-50%);
    z-index: -1;
}




/* #style-spacing--overlap:checked ~ main [class*="node"] {font-size: 18px; margin: -4px;} */
/* #style-spacing--overlap:checked ~ main [class*="node"] {font-size: 18px; margin: -4px; min-height: 1em; min-width: 1em; color: transparent;} */
/* #style-spacing--overlap:checked ~ main [class*="node"] {font-size: 18px; margin: -2px; min-height: 1em; min-width: 1em; color: transparent;}
#style-spacing--spaced:checked ~ main [class*="node"] {font-size: 16px; margin: 2px; min-height: 2em; min-width: 2em;} */



label::before,
label::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -2;
}
#style-spacing--overlap:checked ~ main label[for="style-spacing--overlap"]::before,
#style-spacing--spaced:checked ~ main label[for="style-spacing--spaced"]::before {
    height: 1.25rem; width: 1.25rem;
    border-radius: .125rem;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    box-shadow: 
    6px 6px 0 0px #fc0,
    -6px -6px 0 0px #fc0;
}
#style-spacing--overlap:checked ~ main label[for="style-spacing--overlap"]::after,
#style-spacing--spaced:checked ~ main label[for="style-spacing--spaced"]::after{
    height: 125%; width: 115%;
    background: hsla(210, 0%, 5%, 100%);
    border-radius: .5rem;
    box-shadow: 
    0 6px 0 -4px #fc0,
    0 -6px 0 -4px #fc0;
}