html{
    *{padding:0}
    >body{
        @media(scripting:none){.scripting{display:none}}
        @media(prefers-color-scheme:light){--background-color:#ffffffff;--color:#000000ff}
        @media(prefers-color-scheme:dark){--background-color:#000000ff;--color:#ffffffff}
        *{margin:0;font-family:monospace;box-sizing:border-box;overflow-wrap:anywhere}
        svg{vertical-align:bottom}
        section{margin-left:.5rem}
        pre{white-space:pre-wrap}
        a{
            &:hover,&:active{color:#00ff00ff}
            text-decoration:none
        }
        >header{
            ~*:not(script){display:inline-block}
            +*~*{vertical-align:top}
            >label{
                svg:first-of-type{height:2rem;opacity:.5}
                >:first-child{display:none}
                &:first-of-type{
                    &~label{margin-left:.5rem;transition:opacity 1s,visibility 1s}
                    &:has(>input[type=checkbox]:first-of-type:checked)~label{opacity:1;visibility:visible}
                    &:not(:has(>input[type=checkbox]:first-of-type:checked))~label{opacity:0;visibility:hidden}
                    &+label>input[type=checkbox]:first-of-type{
                        body:has(&:checked){
                            input,textarea,select{background-color:var(--color);color:var(--background-color)}
                            background-color:var(--color);color:var(--background-color)
                        }
                        body:not(:has(&:checked)){
                            input,textarea,select{background-color:var(--background-color);color:var(--color)}
                            background-color:var(--background-color);color:var(--color)
                        }
                    }
                }
            }
            margin-bottom:.5rem;top:.5rem;position:sticky;width:fit-content
        }
        margin:.5rem
    }
    scroll-padding-top:3rem
}