:root {
    --bw0: #000;
    --bw1: #111;
    --bw8: #888;
    --bwf: #fff;
    --clr-t: transparent;

    --clr-1: #f93; --clr-1-mid: #963; --clr-1-dark: #630; --bgs-1: #9633;
    --clr-2: #9f3; --clr-2-mid: #693; --clr-2-dark: #360; --bgs-2: #6933;
    --clr-3: #3f9; --clr-3-mid: #396; --clr-3-dark: #063; --bgs-3: #3963;
    --clr-4: #39f; --clr-4-mid: #369; --clr-4-dark: #036; --bgs-4: #3693;
    --clr-5: #93f; --clr-5-mid: #639; --clr-5-dark: #306; --bgs-5: #6393;
    --clr-6: #f39; --clr-6-mid: #936; --clr-6-dark: #603; --bgs-6: #9363;

    --bs4-4: #39f4; --bs4-4: hsla(210, 100%, 60%, 0.267); 
    --bs4-4-mid: #3694; --bs4-4-mid: hsla(210, 50%, 40%, 0.267); 
    --bs4-4-mid: #06c4; --bs4-4-mid: #0066cc44; 
    --bs4-4-dark: #0364; --bs4-4-dark: hsla(210, 100%, 20%, 0.267);

    --bs4-1: #f934; --bs4-1-mid: #9634; --bs4-1-dark: #6304;
    --bs4-2: #9f34; --bs4-2-mid: #6934; --bs4-2-dark: #3604;
    --bs4-3: #3f94; --bs4-3-mid: #3964; --bs4-3-dark: #0634;
    --bs4-4: #39f4; --bs4-4-mid: #3694; --bs4-4-dark: #0364;
    --bs4-5: #93f4; --bs4-5-mid: #6394; --bs4-5-dark: #3064;
    --bs4-6: #f394; --bs4-6-mid: #9364; --bs4-6-dark: #6034;
    
    --h-045: hsla(045deg, 100%, 60%, 1);
    --h-135: hsla(135deg, 100%, 60%, 1);
    --h-225: hsla(225deg, 100%, 60%, 1);
    --h-315: hsla(315deg, 100%, 60%, 1);

    --hue-1: 30;
    --hue-2: 90;
    --hue-3: 150;
    --hue-4: 210;
    --hue-5: 270;
    --hue-6: 330;

}
/* *::before, *::after {
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
} */
.grid-h {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 2rem 0;
}
.bar-container-2,
.bar-container {
    position: relative;
    height: 324px; 
    width: 34px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: row;
    padding-bottom: 2px;
    margin: 0 3px;
    outline: 1px dashed #8888;
}
.bar {
    position: relative;
    min-height: 5px;
    width: 30px;
}
.bar-container:hover .bar {
    outline: 1px solid #fff;
    outline-offset: -1px;
}
.bar::after {
    content: attr(data-id);
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(50%);
}
.bar::before {
    content: attr(data-h);
    position: absolute;
    /* top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-320px) rotate(-90deg);
    transform: translateX(-50%) translateY(-330px) rotate(-60deg); */
    top: 0%; left: 50%;
    transform: translateX(-50%) translateY(-120%) rotate(0deg);
    color: hsla(210, 100%, 100%, .5);
}
.bar-container:hover .bar::before {
    color: hsla(210, 100%, 100%, 1);
}


.bar-2 {
    position: relative;
    min-height: 5px;
    width: 15px;
    width: 12px;
    margin: 0 2px;
}
.bar-container-2:hover .bar-2 {
    outline: 1px solid #fff;
    outline-offset: -1px;
}
.bar-container-2::after {
    content: attr(data-id);
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(50%);
}

.bar, .bar-2 {
    --hue: 210;
    --clr: hsla(var(--hue), 100%, 60%, 1);
    --clr-dark: hsla(var(--hue), 100%, 20%, 1);
    --bs4: hsla(var(--hue), 100%, 60%, .3);
    --bs4-dark: hsla(var(--hue), 100%, 20%, .3);
    /* background-image: linear-gradient(-30deg, var(--bs4-dark), var(--bs4));
    box-shadow: 
    0px 0px 4px 2px var(--clr),
    inset 1px 1px 0px 0px var(--clr),
    inset -1px -1px 0px 0px var(--clr-dark); */
}


.bar-2::before {
    content: attr(data-h);
    position: absolute;
    top: 0%; left: 50%;
    transform: translateX(-50%) translateY(-150%) rotate(-60deg);
    transform: translateX(-50%) translateY(-150%) rotate(-90deg);
    color: hsla(var(--hue), 100%, 60%, .5);
    font-size: 10px;
    transition: 
    transform 100ms ease-in-out,
    font-size 100ms ease-in-out;
}
.bar-container-2:hover .bar-2::before {
    font-size: 14px;
    transform: translateX(-50%) translateY(-150%) rotate(-60deg);
    transform: translateX(-50%) translateY(-150%) rotate(0deg);
    transform: translateX(-50%) translateY(var(--tY)) rotate(0deg);
    transform: translateX(-50%) translateY(-150%) rotate(-60deg);
    color: hsla(var(--hue), 100%, 60%, 1);
}


.mid-line {
    --clr-a: var(--clr-6);
    --clr-b: var(--clr-3);
    /* --clr-a: #fffa;
    --clr-b: #fffa; */
    --clr-a: var(--clr-5);
    --clr-b: var(--clr-5);
    position: absolute;
    bottom: 2px; left: 50%;
    transform: translateX(-50%);
    height: 300px; 
    background-image: 
    linear-gradient(180deg, var(--clr-t) 50px, var(--clr-b) 50px, var(--clr-t) 51px ),
    linear-gradient(180deg, var(--clr-t) 150px, var(--clr-a) 150px, var(--clr-t) 151px ),
    linear-gradient(180deg, var(--clr-t) 250px, var(--clr-b) 250px, var(--clr-t) 251px );
    /* z-index: 5; */
}

[data-h="1"] {--h: 1;}
[data-h="2"] {--h: 2;}
[data-h="3"] {--h: 3;}
[data-h="4"] {--h: 4;}
[data-h="5"] {--h: 5;}
[data-h="6"] {--h: 6;}
[data-h="7"] {--h: 7;}
[data-h="8"] {--h: 8;}
[data-h="9"] {--h: 9;}
[data-h="10"] {--h: 10;}
[data-h] {height: calc(var(--h) * 30px);}


input[type="radio"] {display: none;}
label {
    --clr-left: var(--clr-4);
    --clr-dark-left: var(--clr-4-dark);
    --clr-right: var(--clr-1);
    --clr-dark-right: var(--clr-1-dark);
    position: relative;
    /* min-height: 6rem; */
    min-width: 6rem;
    margin: .125rem;
    padding: .25rem .5rem;
    border-radius: .125rem;
    color: #fff;
    text-shadow: 2px 2px 2px #1119;
    cursor: pointer;
    user-select: none;

    /* background-image: linear-gradient(120deg, var(--bs4-4-dark), var(--bs4-1-dark)); */
}
label:hover { outline: 1px solid #fffc; outline-offset: 2px; }
[for="style--fill"] {background-image: linear-gradient(120deg, var(--clr-4) 50%, var(--clr-1) 50%);}
[for="style--ghost"] {background-image: linear-gradient(120deg, var(--bs4-4), var(--bs4-1));}
[for="style--ghost"],
[for="style--glow"] {
    box-shadow: 
    -1px -1px 3px 0px var(--clr-left),
    inset 1px 1px 0px 0px var(--clr-left),
    /* inset -1px -1px 0px 0px var(--clr-dark-left), */
    1px 1px 3px 0px var(--clr-right),
    /* inset -1px -1px 0px 0px var(--clr-right), */
    inset -1px -1px 0px 0px var(--clr-dark-right);
}

:where(#style--fill:checked, #style--ghost:checked, #style--glow:checked) ~ main label::before,
:where(#style--fill:checked, #style--ghost:checked, #style--glow:checked) ~ main label::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
}
#style--fill:checked ~ main label[for="style--fill"]::before,
#style--ghost:checked ~ main label[for="style--ghost"]::before,
#style--glow:checked ~ main label[for="style--glow"]::before {
    height: 2rem; width: 2rem;
    height: 1rem; width: 1rem;
    height: 1.25rem; width: 1.25rem;
    color: #fc0;
    border-radius: .125rem;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    box-shadow: 
    6px 6px 0 0px #fc0,
    -6px -6px 0 0px #fc0;
}
#style--fill:checked ~ main label[for="style--fill"]::after,
#style--ghost:checked ~ main label[for="style--ghost"]::after,
#style--glow:checked ~ main label[for="style--glow"]::after {
    height: 150%; width: 110%;
    border-radius: .5rem;
    background: #000;
    box-shadow: 
    inset 0 6px 0 -4px #fc0,
    inset 0 -6px 0 -4px #fc0;

    background: hsla(210, 0%, 5%, 100%);
    height: 125%; width: 115%;
    box-shadow: 
    0 6px 0 -4px #fc0,
    0 -6px 0 -4px #fc0;
}

/* #style--fill:checked ~ main [for="style--fill"] {background-image: linear-gradient(120deg, var(--clr-4) 50%, var(--clr-1) 50%);}
#style--ghost:checked ~ main [for="style--ghost"] {background-image: linear-gradient(120deg, var(--clr-4) 50%, var(--clr-1) 50%);}
#style--glow:checked ~ main [for="style--glow"] {background-image: linear-gradient(120deg, var(--clr-4) 50%, var(--clr-1) 50%);} */

.bar,
.bar-2:nth-of-type(1) {--hue: var(--hue-4);}
.bar-2:nth-of-type(2) {--hue: var(--hue-1);}
.bar, .bar-2 {
    --hue: 210;
    --clr: hsla(var(--hue), 100%, 60%, 1);
    --clr-dark: hsla(var(--hue), 100%, 20%, 1);
    --bs4: hsla(var(--hue), 100%, 60%, .3);
    --bs4-dark: hsla(var(--hue), 100%, 20%, .3);
}

#style--fill:checked ~ main .bar,
#style--fill:checked ~ main .bar-2:nth-of-type(1) {background-image: linear-gradient(-30deg, var(--clr-dark), var(--clr));}
#style--fill:checked ~ main .bar-2:nth-of-type(2) {background-image: linear-gradient(-30deg, var(--clr-dark), var(--clr));}

#style--glow:checked ~ main .bar,
#style--glow:checked ~ main .bar-2,
#style--ghost:checked ~ main .bar,
#style--ghost:checked ~ main .bar-2 {
    box-shadow: 
    0px 0px 4px 2px var(--clr),
    inset 1px 1px 0px 0px var(--clr),
    inset -1px -1px 0px 0px var(--clr-dark);
}
#style--ghost:checked ~ main .bar,
#style--ghost:checked ~ main .bar-2:nth-of-type(1) {background-image: linear-gradient(-30deg, var(--bs4-dark), var(--bs4));}
#style--ghost:checked ~ main .bar-2:nth-of-type(2) {background-image: linear-gradient(-30deg, var(--bs4-dark), var(--bs4));}
#style--ghost:checked ~ main .bar-container:hover .bar,
#style--ghost:checked ~ main .bar-container-2:hover .bar-2:nth-of-type(1) {background-image: linear-gradient(-30deg, var(--clr-dark), var(--clr));}
#style--ghost:checked ~ main .bar-container-2:hover .bar-2:nth-of-type(2) {background-image: linear-gradient(-30deg, var(--clr-dark), var(--clr));}