*{
    color-scheme: dark;
    accent-color: #0f0;
    color: inherit;
    scrollbar-width: thin;
    scrollbar-color: #0f0 transparent;
}
*:focus-visible{outline: 2px ridge #f90;}
:is(select,input:is([type=button],[type=text],[type=number])):focus-visible{outline-offset: 1px;}
*::selection{
    background-color: #f90;
    color: #000;
}

input:is([type=checkbox],[type=range],[type=button]):enabled{cursor: pointer;}
input:disabled{cursor: not-allowed;}

input[type=file]::file-selector-button{color: inherit;}
input[type=button],input[type=file]::file-selector-button{
    background-color: #333;
    border-color: #040;
    border-style: outset;
}
input[type=button]:enabled:focus,input[type=file]:enabled:focus::file-selector-button{border-color: #0a0;}
input[type=button]:enabled:hover,input[type=file]:enabled:hover:file-selector-button{border-color: #0d0;}
input[type=button]:enabled:active,input[type=file]:enabled:active::file-selector-button{
    background-color: #222;
    border-color: #0f0;
    border-style: inset;
}
input:is([type=button],[type=number],[type=text]):disabled,
input[type=file]:disabled::file-selector-button{
    background-color: #000;
    border-style: solid;
    color: #0a0;
}
input[type=button].red{background-color: #a00;}
input[type=button].red:enabled:active{background-color: #700;}
input[type=button].red:disabled{background-color: #500;}
input[type=button][aria-pressed=true]:enabled{border-style: inset;}
input[type=button][aria-pressed=false]:enabled{border-style: outset;}

/* ------------------------------ */

html{
    height: 100%;
    overflow: auto;
    scrollbar-width: auto;
}
body{
    background-color: #111;
    color: #0f0;
    box-sizing: border-box;
    margin: 0;
    width: max-content;
    height: max-content;
    min-width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-rows: min-content auto min-content;
    place-items: safe center;
}

header,
footer{
    background-color: #111;
    position: sticky;
    z-index: 20;
    width: 100%;
    max-width: 100vw;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding-inline: 10px;
    display: grid;
    place-items: safe center;
    overflow: auto;
}
header{
    top: 0;
    padding-top: 10px;
    max-height: calc(100vh - 90px);/*~ scroll when header is to large */
}
footer{
    bottom: 0;
    padding-bottom: 10px;
}
@media(max-height: 350px){/*~ don't stick header/footer when page is small */
    header{
        top: auto;
        max-height: max-content;
    }
    footer{bottom: auto;}
}

h1{margin-block: .5rem;}

fieldset{
    border: 2px groove #111;
    box-sizing: border-box;
    margin: 0;
}
fieldset[aria-expanded="true"]{margin-bottom: .5rem;}
fieldset[aria-expanded="false"]{
    border-inline: none;
    border-bottom: none;
    padding-bottom: .2rem;
}
fieldset[aria-expanded="false"]>*:not(legend){display: none !important;}
fieldset[aria-expanded="false"]>legend{margin-inline: 2px;}
fieldset>legend,
fieldset>legend>label{
    display: inline-flex;
    align-items: safe center;
    gap: .25rem;
}
fieldset[aria-expanded="true"]>legend>label>input:is(#options-expander,#rng-expander){background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230f0' viewBox='0 0 1 1'%3E%3Cpath d='M0 0H1L.5.866z'/%3E%3C/svg%3E");}
fieldset[aria-expanded="false"]>legend>label>input:is(#options-expander,#rng-expander){background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230f0' viewBox='0 0 1 1'%3E%3Cpath d='M0 0V1L.866.5z'/%3E%3C/svg%3E");}
fieldset>legend>label>input:is(#options-expander,#rng-expander){
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    border: none !important;
    width: 11px;
    height: 11px;
}

fieldset#options{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: max-content;
    max-width: 32rem;
}
fieldset#options>div{
    display: flex;
    gap: 4px;
    min-width: max-content;
}
fieldset#options>div:nth-of-type(1){justify-content: space-evenly;}
fieldset#options>div:nth-of-type(2){justify-content: space-around;}
fieldset#options>div:nth-of-type(3){justify-content: space-between;}
fieldset#options>fieldset{justify-content: stretch;}

fieldset#rng{
    display: grid;
    grid-template-columns: repeat(5,auto);
    grid-template-rows: repeat(3,auto);
    place-items: safe center;
    --tile-size: 5rem;
}
fieldset#rng>label{
    width: calc(var(--tile-size) * .866);
    height: var(--tile-size);
    contain: layout;
}
fieldset#rng>label:has(>input:focus-visible){
    z-index: 10;
    outline: 2px ridge #f90;
}
fieldset#rng>label:has(>input[data-type=A]){grid-area: 1/1/2/2;}
fieldset#rng>label:has(>input[data-type=B]){grid-area: 2/1/3/2;}
fieldset#rng>label:has(>input[data-type=C]){grid-area: 1/2/2/3;}
fieldset#rng>label:has(>input[data-type=H0]){grid-area: 1/3/2/4;}
fieldset#rng>label:has(>input[data-type=H1]){grid-area: 2/3/3/4;}
fieldset#rng>label:has(>input[data-type=H2]){grid-area: 3/3/4/4;}
fieldset#rng>label:has(>input[data-type=I]){grid-area: 1/4/2/5;}
fieldset#rng>label:has(>input[data-type=L]){grid-area: 1/5/2/6;}
fieldset#rng>label:has(>input[data-type=R]){grid-area: 2/5/3/6;}
fieldset#rng>label::before{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    scale: calc(var(--tile-size) / 104px);
}
fieldset#rng>label:has(>input:not(:checked))::before{filter: brightness(.3);}
fieldset#rng>label:has(>input[data-type=A])::before{content: url(tiles.svg#A);}
fieldset#rng>label:has(>input[data-type=B])::before{content: url(tiles.svg#B);}
fieldset#rng>label:has(>input[data-type=C])::before{content: url(tiles.svg#C);}
fieldset#rng>label:has(>input[data-type=H0])::before{content: url(tiles.svg#H0);}
fieldset#rng>label:has(>input[data-type=H1])::before{content: url(tiles.svg#H1);}
fieldset#rng>label:has(>input[data-type=H2])::before{content: url(tiles.svg#H2);}
fieldset#rng>label:has(>input[data-type=I])::before{content: url(tiles.svg#I);}
fieldset#rng>label:has(>input[data-type=L])::before{content: url(tiles.svg#L);}
fieldset#rng>label:has(>input[data-type=R])::before{content: url(tiles.svg#R);}
fieldset#rng>label>input{
    pointer-events: none;
    opacity: 0;
}

div#tiles{
    display: flex;
    flex-direction: column;
    align-items: safe center;
    width: max-content;
    height: max-content;
    padding: 2px;
    contain: layout;
}
div#tiles>div{display: flex;}
div#tiles>div:first-child{margin-top: 13.07735px;}
div#tiles>div:last-child{margin-bottom: 13.07735px;}
div#tiles>div:nth-child(even){margin-left: 43.8px;}
div#tiles>div:nth-child(odd){margin-right: 43.8px;}
div#tiles>div>div{
    --shadow-color: #0f0;
    pointer-events: none;
    width: 86.6px;
    height: 75px;
    contain: layout;
}
div#tiles>div>div:is(:hover,:focus){
    z-index: 10;
    outline: none;
    filter: drop-shadow(0px 0px 10px var(--shadow-color))
            drop-shadow(0px 0px 10px var(--shadow-color));
}
div#tiles>div>div.idle:focus:not(:hover){
    z-index: initial;
    --shadow-color: transparent;
}
div#tiles>div>div:not(.idle):focus:not(:hover){
    z-index: 5;
    --shadow-color: #0f0;
}
div#tiles>div>div:hover{--shadow-color: #f90;}
div#tiles>div>div:focus:hover{--shadow-color: #0a0;}
div#tiles>div>div::after{
    content: url(tiles.svg);
    pointer-events: fill;
    /* clip-path: path('M8.7 77V27L52 2L95.3 27V77L52 102Z'); */
    clip-path: path('M8.2 77.2887V26.7113L52 1.4226L95.8 26.7113V77.2887L52 102.5774Z');
    width: 104px;
    height: 104px;
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    rotate: calc(attr(data-turn deg, 0deg) * 60);
    transition: rotate 300ms ease-in-out;
}
div#tiles>div>div.untwist::after{transition: none;}
div#tiles>div>div[data-type=A]::after{content: url(tiles.svg#A);}
div#tiles>div>div[data-type=B]::after{content: url(tiles.svg#B);}
div#tiles>div>div[data-type=C]::after{content: url(tiles.svg#C);}
div#tiles>div>div[data-type=H0]::after{content: url(tiles.svg#H0);}
div#tiles>div>div[data-type=H1]::after{content: url(tiles.svg#H1);}
div#tiles>div>div[data-type=H2]::after{content: url(tiles.svg#H2);}
div#tiles>div>div[data-type=I]::after{content: url(tiles.svg#I);}
div#tiles>div>div[data-type=L]::after{content: url(tiles.svg#L);}
div#tiles>div>div[data-type=R]::after{content: url(tiles.svg#R);}

a#github{
    color: #0bf;
    font-size: .9rem;
    font-family: 'consolas', monospace;
    text-align: center;
    margin: .5rem;
}
a#github:visited{color: #4ac;}
a#github:hover{
    color: #0ef;
    text-shadow: 0px 0px 15px #00f,
                 0px 0px 15px #00f,
                 0px 0px 15px #00f;
}
a#github:active{color: #0bf;}

div#toast{
    --down: -2rem;
    --up: 1rem;
    pointer-events: none;
    position: fixed;
    z-index: 100;
    translate: -50% -100%;
    left: 50%;
    bottom: var(--down);
    scale: 0;
    padding: .2rem .7rem;
    font-size: large;
    white-space: nowrap;
    border: 1px outset #000;
    border-radius: 1rem;
    background-color: #333;
}
div#toast[data-state=f]{
    background-color: #a00;
    color: #ff0;
}
@media(max-height: 140px){
    div#toast{
        --down: -3rem;
        --up: -2rem;
    }
}