.icon-blade::after {
    content: '調整中' !important;
    line-height: 3.2em; color: black;
    z-index: 9;
    filter: saturate(0) brightness(12) brightness(.8) !important;
}
nav div {
    justify-self: end;
    align-self: center;

    &:first-of-type {grid-area: 1/4;}
    &:last-of-type {grid-area: 2/4;}
    button,label:not(.toggle) {
        background: var(--theme); color: black;
        border-radius: 8em;
        padding: 0 .5em; margin-left: .5em;
        font-size: .9em;
        display: inline-block; line-height: 1.3rem;
    }
}
nav .LED label:nth-child(even) {margin-right: 1em;}
main {
    margin-bottom: 8em;
    user-select: none; -webkit-user-select: none;

    div {
        max-width: 1200px; margin: auto;

        &:has(button) {
            font-size: 1.5em; color: var(--theme); text-align: right;
            padding: 0 .5rem; margin-top: 1em;
    
            button {margin-left: .25em;}
            main:not(:has(canvas[width])) & button {display: none;}
        }
        &:has(canvas) {
            overflow-x: scroll; 
            font-size: calc(var(--f)*min(5vw,30px));
    
            canvas {
                width: 20em;
                margin: auto;
                &:not([width]) {display: none;}
            }
        }
    }
}
main ol {
    text-align: left;
    padding: 0 .5rem !important; margin: auto !important;
    max-width: 30em;

    li {
        margin-top: 1.5em;
        display: flex; align-items: center; flex-wrap: wrap;

        span {width: 100%; text-align: center; font-size: .9em;}
        &.loading {pointer-events: none;}
        &.inactive {pointer-events: none; filter: brightness(.5) saturate(0);}
        &:not(.loading) span {display: none;}
        &::after {width: 100%; text-align: center;}
        &:not(.inactive) :is(label,button) {cursor: pointer; color: var(--theme);}

        >:is(fieldset,label) {
            &::before {color: var(--theme); content: ' ';}
            &::after  {color: var(--theme); content: ' ';}
        }    
    }
    fieldset {
        display: flex; gap: 1em; justify-content: center;
        text-align: center; 
        width: 100%;
        margin-top: .5em;
    
        #step-3 & {line-height: 4em;}
        #step-5 & {align-items: end;}
        label {
            position: relative;
            color: var(--theme);

            #step-3 & {
                display: flex; flex-direction: column;
                min-width: 3em; height: 3.5em;
            }
            img {
                width: 3em; height: 2em; 
                margin-top: .5em;
            }
            div {white-space: nowrap;}
            div img:nth-child(2) {margin-left: .5em;}
            &::after {
                position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
                width: 3em; height: 3em;
                z-index: -1;
            }
        }
    }
    button {
        margin: 0 1em;
        li>&:first-child {margin-left: 0;}
    }
    textarea {
        width: 100%; height: 2em;
        margin: .25em 0;
    }
    textarea[hidden]+small {display: none;}
}
aside {
    position: fixed !important; bottom: 0;
    display: flex; gap: .5em; 
    width: 100%;
    background: var(--overlay1);
    font-size: .9em;
    padding: .5em 0;
    transition: transform .5s;

    &:not(.active) {transform: translateY(100%) !important;}
    &#controls {
        padding-bottom: 1em;
        justify-content: center; align-items: end;

        continuous-knob::before {font-size: .9em;}
        i {color: var(--theme);}
    }
    &#correct {
        overflow-x: scroll;
        align-items: center;

        label {
            filter: none !important;

            &:has(:checked) {border-bottom : .15em solid var(--theme);}
            &:first-child {
                align-self: center; 
                margin-left: .5em;

                &::before {content: '🚫'; font-size: 2em;}
            }
        }
        canvas {
            height: 5em; 
            cursor: pointer;
        }
        label:has(.flipped),img {display: none;}
    }
}