/**
 * -------------------------------------------------------------------------
 *
 * The main styles for your IDE site.
 *
 * -------------------------------------------------------------------------
 *
 * @package    MimimiFramework
 * @subpackage Examples / IDE skeleton
 * @license    GPL-2.0
 *             https://opensource.org/license/gpl-2-0/
 * @copyright  2022 MiMiMi Community
 *             https://mimimi.software/
 *
 * -------------------------------------------------------------------------
 */

    :root {
        --screenSizeX:   100;
        --screenSizeY:   40;

        --displayHeight: 100vh;
        --displayWidth:  100vw;

        --fontByHeight:  calc( var(--displayHeight) / var(--screenSizeY) );
        --fontByWidth:   calc( var(--displayWidth)  / var(--screenSizeX) );

        --fontOptimal:   min( var(--fontByHeight), var(--fontByWidth) );
        --fontSize:      max( var(--fontOptimal) , 16px               );

        font-size: var(--fontSize);

        /**
         * -----------------------------------------------------------------
         *
         * Predefined colors.
         *
         * -----------------------------------------------------------------
         */

        --displayBackground:       #eceff1;
        --displayBorderColor:      #cfd8dc;
        --displayBorderColorLight: #cfd8dcCC;
        --displayColor:            #13191c;
        --displayColorLight:       #13191c88;
    }

    body {
        --screenWidth:  calc( 1rem * var(--screenSizeX) );
        --screenMargin: calc( 1rem * 2                  );

        /**
         * -----------------------------------------------------------------
         *
         * Predefined colors.
         *
         * -----------------------------------------------------------------
         */

        --screenBackground:            #fff;
        --screenBorder:                var(--displayBorderColor) 0 0 0 0.5rem;
        --screenColor:                 var(--displayColor);

        --menuBackground:              var(--displayBackground);
        --menuBorder:                  var(--displayBorderColorLight) 0 -1px 1px inset;
        --menuColor:                   var(--screenColor);
        --menuColorAlternative:        #f57f17;
        --menuItemBorder:              var(--displayBorderColorLight) -1px 0 0;

        --menuHoverBackground:         #2196f3;
        --menuHoverColor:              #e3f2fd;

            --submenuBackground:       var(--displayBackground);
            --submenuBorderColor:      var(--displayBorderColor);
            --submenuBorder:           var(--submenuBorderColor) 0 0 0 0.5rem,
                                       var(--displayColorLight) 0.66rem 0.66rem 0 0.33rem;
            --submenuColor:            var(--screenColor);
            --submenuItemBorder:       var(--displayBorderColorLight) 0 -1px 0;
            --submenuShortcutBorder:   var(--displayBorderColorLight) 1px 0 0;

            --submenuHoverBackground:  var(--menuHoverBackground);
            --submenuHoverColor:       var(--menuHoverColor);

        --toolbarBackground:           var(--displayBackground);
        --toolbarBorder:               var(--displayBorderColorLight) 0 -1px 1px inset;
        --toolbarColor:                var(--screenColor);
        --toolbarItemBorder:           var(--displayBorderColorLight) -1px 0 0;

            --toolbarHintBackground:   var(--toolbarBackground);
            --toolbarHintBorder:       var(--displayBorderColor) 0 0 0 1px;
            --toolbarHintColor:        var(--toolbarColor);

            --toolbarHoverBackground:  var(--menuHoverBackground);
            --toolbarHoverColor:       var(--menuHoverColor);

        --widgetsBackground:           var(--displayBackground);
        --widgetsShadow:               var(--displayBorderColorLight) 0 -1px 1px inset;
        --widgetsBorderTop:            none;
        --widgetsBorderRight:          none;
        --widgetsBorderBottom:         none;
        --widgetsBorderLeft:           none;
        --widgetsColor:                var(--screenColor);

        --editorBackground:            var(--screenBackground);
        --editorShadow:                var(--displayBackground) 0 1.5rem 0 inset,
                                       var(--displayBorderColor) 0 2rem 0 inset;
        --editorBorderTop:             none;
        --editorBorderRight:           none;
        --editorBorderBottom:          none;
        --editorBorderLeft:            none;
        --editorColor:                 var(--screenColor);

            --tabBackground:           var(--displayBackground);
            --tabShadow:               none;
            --tabBorderTop:            none;
            --tabBorderRight:          var(--displayBorderColor) 1px solid;
            --tabBorderBottom:         none;
            --tabBorderLeft:           none;
            --tabColor:                var(--screenColor);

            --tabModifiedBackground:   var(--displayColorLight);
            --tabModifiedColor:        var(--displayBackground);

            --tabHoverBackground:      var(--menuHoverBackground);
            --tabHoverShadow:          none;
            --tabHoverBorderTop:       none;
            --tabHoverBorderRight:     var(--menuHoverBackground) 1px solid;
            --tabHoverBorderBottom:    none;
            --tabHoverBorderLeft:      none;
            --tabHoverColor:           var(--menuHoverColor);

            --tabActiveBackground:     var(--displayBackground);
            --tabActiveShadow:         none;
            --tabActiveBorderTop:      none;
            --tabActiveBorderRight:    var(--menuColorAlternative) 1px solid;
            --tabActiveBorderBottom:   none;
            --tabActiveBorderLeft:     none;
            --tabActiveColor:          var(--menuColorAlternative);

            --textBackground:          var(--editorBackground);
            --textShadow:              none;
            --textBorderTop:           var(--displayBorderColor) 0.5rem solid;
            --textBorderRight:         none;
            --textBorderBottom:        none;
            --textBorderLeft:          none;
            --textColor:               var(--screenColor);

        --modalBackground:             var(--screenBackground);
        --modalBorder:                 var(--displayBorderColor) 0 0 0 0.5rem,
                                       var(--displayColorLight) 0.66rem 0.66rem 0 0.33rem;
        --modalColor:                  var(--screenColor);

            --buttonBackground:        var(--displayBorderColor);
            --buttonBorder:            none;
            --buttonColor:             var(--screenColor);

            --buttonHoverBackground:   var(--menuHoverBackground);
            --buttonHoverColor:        var(--menuHoverColor);

            --anchorColor:             var(--menuHoverBackground);
            --hrColor:                 var(--displayBorderColor);

            --codeBackground:          var(--menuColorAlternative);
            --codeColor:               var(--screenBackground);

            --errorBackground:         #e53935;
            --errorBorder:             none;
            --errorColor:              #ffebee;

            --successBackground:       #43a047;
            --successBorder:           none;
            --successColor:            #e8f5e9;

            --summaryColor:            var(--menuColorAlternative);
            --summaryHoverColor:       var(--menuHoverBackground);

            --inputBackground:         var(--screenBackground);
            --inputBorder:             var(--displayBorderColor) 0 0 0 0.25rem inset;
            --inputColor:              var(--screenColor);
            --inputFocusBackground:    var(--inputBackground);
            --inputFocusBorder:        var(--displayColorLight) 0 0 0 0.25rem inset;
            --inputFocusColor:         var(--inputColor);

            --labelInfoColor:          #90a4ae;

            --dropzoneBackground:      var(--screenBackground);
            --dropzoneBorder:          var(--displayBorderColor) 0.25rem dashed;
            --dropzoneColor:           var(--labelInfoColor);
            --dropzoneFocusBackground: var(--dropzoneBackground);
            --dropzoneFocusBorder:     var(--menuHoverBackground) 0.25rem dashed;
            --dropzoneFocusColor:      var(--menuHoverBackground);

        --statusbarBackground:         var(--displayBackground);
        --statusbarBorder:             var(--displayBorderColorLight) 0 1px 1px inset;
        --statusbarColor:              var(--screenColor);
        --statusbarItemBorder:         var(--displayBorderColorLight) -1px 0 0;
    }

    body.loading { }

    /**
     * ---------------------------------------------------------------------
     *
     * Reset styles.
     *
     * ---------------------------------------------------------------------
     */

    * {
        background: transparent;
        border: none;
        box-shadow: none;
        box-sizing: border-box;
        border-radius: 0;
        color: inherit;
        outline: none;
        cursor: default;
        font-family: inherit;
        font-size: inherit;
        font-style: normal;
        font-weight: normal;
        line-height: 1.5;
        text-align: left;
        text-decoration: none;
        text-shadow: none;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        vertical-align: middle;
        position: relative;
    }

    a,
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    input[type="image"] {
        cursor: pointer;
    }

    :root > *:not(body),
    head,
        meta,
        link,
        style,
        script,
    slot,
    template,
    embed,
    .hidden,
    [hidden] {
        display: none !important;
    }

    /**
     * ---------------------------------------------------------------------
     *
     * The web document.
     *
     * ---------------------------------------------------------------------
     */

    html {
        background: var(--displayBackground);
        color: var(--displayColor);
        display: block;
        font-family: monospace;
        height: 100vh;
        width: 100vw;
    }
    html.home-page  { }
    html.memo-page  { }
    html.error-page { }

        body {
            display: block;
            height: 100%;
            width: 100%;
        }

            .screen {
                background: var(--screenBackground);
                box-shadow: var(--screenBorder);
                color: var(--screenColor);
                display: grid;
                         grid-template-columns: 1fr;
                         grid-template-rows: 1fr
                                             min-content
                                             min-content
                                             min-content;
                height: calc( 100%               - var(--screenMargin) - var(--screenMargin) );
                width:  calc( var(--screenWidth) - var(--screenMargin) - var(--screenMargin) );
                max-width: calc( 100vw - var(--screenMargin) - var(--screenMargin) );
                margin-top: var(--screenMargin);
            }

                /**
                 * ---------------------------------------------------------
                 *
                 * The topmenu area.
                 *
                 * ---------------------------------------------------------
                 */

                .menu {
                    background: var(--menuBackground);
                    box-shadow: var(--menuBorder);
                    color: var(--menuColor);
                    display: block;
                             grid-row-end: -6;
                    height: 2rem;
                    width: 100%;
                    margin-bottom: 1px;
                    overflow: visible;
                    z-index: 2;
                }

                    .menu .items {
                        display: none;
                        overflow: visible;
                        position: absolute;
                    }
                    .menu .items .items .items {
                        margin-top: -1.33rem;
                        left: calc( 100% - 1rem );
                        z-index: 1;
                    }
                    .menu > .items {
                        display: block;
                        position: relative;
                    }
                    .menu .link:hover        + .items,
                    .menu .link:active       + .items,
                    .menu .link:focus        + .items,
                    .menu .link:focus-within + .items,
                    .menu                      .items:hover,
                    .menu                      .items:active,
                    .menu                      .items:focus,
                    .menu                      .items:focus-within {
                        display: block;
                    }
                    .menu .link:hover        + .items,
                    .menu .link:active       + .items,
                    .menu .link:focus        + .items,
                    .menu .link:focus-within + .items,
                    .menu .link              + .items:hover,
                    .menu .link              + .items:active,
                    .menu .link              + .items:focus,
                    .menu .link              + .items:focus-within {
                        background: var(--submenuBackground);
                        box-shadow: var(--submenuBorder);
                        color: var(--submenuColor);
                        max-width: 95vw;
                        margin-left: 0.5rem;
                    }

                        .menu .item {
                            display: block;
                            overflow: visible;
                        }
                        .menu > .items > .item {
                            float: left;
                        }

                            .menu .link,
                            .menu .link > * {
                                cursor: pointer;
                            }
                            .menu .link[disabled],
                            .menu .link[disabled] * {
                                cursor: default;
                                pointer-events: none;
                                user-select: none;
                            }
                                .menu .link[disabled] > .icon,
                                .menu .link[disabled] > svg,
                                .menu .link[disabled] > .name {
                                    opacity: 0.33;
                                }
                            .menu .link {
                                box-shadow: var(--submenuItemBorder);
                                display: block;
                                height: 2rem;
                                width: 100%;
                                margin: 0;
                                padding: 0 0.5rem;
                                white-space: nowrap;
                            }
                            .menu .items .items .link[data-key] {
                                padding-right: 4rem;
                            }
                            .menu .items .items .link:not(:last-child) {
                                padding-right: 2rem;
                            }
                            .menu .items .items .link[data-key]:not(:last-child) {
                                padding-right: 6rem;
                            }
                            .menu .items .items .link[data-key]::before {
                                box-shadow: var(--submenuShortcutBorder);
                                content: 'Alt+' attr(data-key);
                                text-transform: uppercase;
                                display: block;
                                font-size: 66%;
                                line-height: 2rem;
                                height: 2rem;
                                width: 3.5rem;
                                padding-right: 0.5rem;
                                text-align: right;
                                position: absolute;
                                top: 0;
                                right: 0;
                            }
                            .menu .items .items .link[data-key][disabled]::before {
                                opacity: 0.33;
                            }
                            .menu .items .items .link[data-key]:not(:last-child)::before {
                                right: 2rem;
                            }
                            .menu .items .items .link:not(:last-child)::after {
                                box-shadow: var(--submenuShortcutBorder);
                                content: '>';
                                display: block;
                                line-height: 2rem;
                                height: 2rem;
                                width: 1.5rem;
                                text-align: center;
                                position: absolute;
                                top: 0;
                                right: 0;
                            }
                            .menu .items .items .link[disabled]::after {
                                opacity: 0.33;
                            }
                            .menu > .items > .item > .link {
                                box-shadow: var(--menuItemBorder);
                            }
                            .menu > .items > .item > .link:hover,
                            .menu > .items > .item > .link:active,
                            .menu > .items > .item > .link:focus {
                                background: var(--menuHoverBackground);
                                color: var(--menuHoverColor);
                            }
                            .menu .link:hover,
                            .menu .link:active,
                            .menu .link:focus {
                                background: var(--submenuHoverBackground);
                                color: var(--submenuHoverColor);
                            }

                                .menu .icon,
                                .menu svg {
                                    display: inline-block;
                                    height: 1.5rem;
                                    width: 1.5rem;
                                    margin: 0.25rem;
                                }
                                .menu > .items > .item > .link svg {
                                    fill: var(--menuColor);
                                }
                                .menu svg {
                                    fill: var(--submenuColor);
                                }
                                .menu > .items > .item > .link:hover  > svg,
                                .menu > .items > .item > .link:active > svg,
                                .menu > .items > .item > .link:focus  > svg {
                                    fill: var(--menuHoverColor);
                                }
                                .menu .link:hover  > svg,
                                .menu .link:active > svg,
                                .menu .link:focus  > svg {
                                    fill: var(--submenuHoverColor);
                                }

                                .menu .name {
                                    display: inline-block;
                                    line-height: 2rem;
                                    white-space: nowrap;
                                }
                                .menu .icon + .name,
                                .menu svg   + .name {
                                    margin-left: 0.25rem;
                                }

                /**
                 * ---------------------------------------------------------
                 *
                 * The toolbar area.
                 *
                 * ---------------------------------------------------------
                 */
 
                .toolbar {
                    background: var(--toolbarBackground);
                    box-shadow: var(--toolbarBorder);
                    display: block;
                             grid-row-end: 1;
                    min-height: 0.5rem;
                    width: 100%;
                    margin-bottom: 1px;
                    overflow: visible;
                    z-index: 1;
                }
                .toolbar:empty {
                    min-height: auto !important;
                    height: 0 !important;
                    margin-bottom: 0 !important;
                    overflow: hidden !important;
                }

                    .toolbar .items {
                        display: inline;
                        overflow: visible;
                        vertical-align: top;
                    }

                        .toolbar .item {
                            display: inline-block;
                            overflow: visible;
                            vertical-align: top;
                        }
                        .toolbar .item:first-child {
                            box-shadow: var(--toolbarItemBorder);
                        }

                            .toolbar .link,
                            .toolbar .link > * {
                                cursor: pointer;
                            }
                            .toolbar .link {
                                display: inline-block;
                                height: 2rem;
                                width: 2rem;
                                overflow: visible;
                            }
                            .toolbar .link[disabled],
                            .toolbar .link[disabled] * {
                                cursor: default;
                                pointer-events: none;
                                user-select: none;
                            }
                                .toolbar .link[disabled] > .icon,
                                .toolbar .link[disabled] > svg,
                                .toolbar .link[disabled] > .name {
                                    opacity: 0.33;
                                }
                            .toolbar .link:hover,
                            .toolbar .link:active,
                            .toolbar .link:focus {
                                background: var(--toolbarHoverBackground);
                                color: var(--toolbarHoverColor);
                            }

                                .toolbar .icon,
                                .toolbar svg {
                                    display: block;
                                    height: 1.25rem;
                                    width: 1.25rem;
                                    margin: 0.375rem;
                                }
                                    .toolbar svg {
                                        fill: var(--toolbarColor);
                                    }
                                    .toolbar .link:hover  > svg,
                                    .toolbar .link:active > svg,
                                    .toolbar .link:focus  > svg {
                                        fill: var(--toolbarHoverColor);
                                    }

                                .toolbar .name,
                                .toolbar .link[data-key]::before {
                                    background: var(--toolbarHintBackground);
                                    box-shadow: var(--toolbarHintBorder);
                                    color: var(--toolbarHintColor);
                                    display: none;
                                    font-size: 66%;
                                    max-width: 95vw;
                                    white-space: nowrap;
                                    padding: 0.25em 0.66em;
                                    position: absolute;
                                    bottom: -2rem;
                                    left: 50%;
                                }

                                .toolbar .link[data-key]::before {
                                    content: 'Alt+' attr(data-key);
                                    font-size: 60%;
                                    text-transform: uppercase;
                                    bottom: -3.5rem;
                                }

                                .toolbar .link:hover  > .name,
                                .toolbar .link:active > .name,
                                .toolbar .link:focus  > .name,
                                .toolbar .link[data-key]:hover::before,
                                .toolbar .link[data-key]:active::before,
                                .toolbar .link[data-key]:focus::before {
                                    display: block;
                                }

                /**
                 * ---------------------------------------------------------
                 *
                 * The module's content area.
                 *
                 * ---------------------------------------------------------
                 */

                .workspace {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-rows: min-content 1fr;
                    width: 100%;
                    height: 100%;
                    overflow: visible;
                    z-index: 1;
                }

                    /**
                     * -----------------------------------------------------
                     *
                     * The widgets area.
                     *
                     * -----------------------------------------------------
                     */

                    .widgets {
                        background:    var(--widgetsBackground);
                        border-top:    var(--widgetsBorderTop);
                        border-right:  var(--widgetsBorderRight);
                        border-bottom: var(--widgetsBorderBottom);
                        border-left:   var(--widgetsBorderLeft);
                        box-shadow:    var(--widgetsShadow);
                        color:         var(--widgetsColor);
                        display: block;
                        width: 100%;
                        margin-bottom: 1px;
                        text-align: center;
                        vertical-align: top;
                    }
                    .widgets:empty {
                        min-height: auto !important;
                        height: 0 !important;
                        margin-bottom: 0 !important;
                        overflow: hidden !important;
                    }

                        .widgets .item {
                            display: inline-block;
                            padding: 0.5rem;
                            text-align: center;
                        }
                        .widgets .item.trash { }

                            .widgets .icon {
                                fill: var(--widgetsColor);
                                display: inline-block;
                                height: 2rem;
                                width: 2rem;
                            }

                            .widgets .name {
                                display: block;
                                font-size: 80%;
                                margin-top: 0.25rem;
                                text-align: center;
                            }

                    /**
                     * -----------------------------------------------------
                     *
                     * The files editor area.
                     *
                     * -----------------------------------------------------
                     */

                    .editor {
                        background:    var(--editorBackground);
                        border-top:    var(--editorBorderTop);
                        border-right:  var(--editorBorderRight);
                        border-bottom: var(--editorBorderBottom);
                        border-left:   var(--editorBorderLeft);
                        box-shadow:    var(--editorShadow);
                        color:         var(--editorColor);
                        display: block;
                        width: 100%;
                    }

                        .editor > input[type="radio"] {
                            display: block;
                            height: 1px;
                            width: 1px;
                            overflow: hidden;
                            clip: rect(1px, 1px, 1px, 1px);
                            opacity: 0.01;
                            position: fixed !important;
                            top: -100px;
                            left: -100px;
                        }

                        .editor > .tab {
                            background:    var(--tabBackground);
                            border-radius: 0 0 1rem 0;
                            border-top:    var(--tabBorderTop);
                            border-right:  var(--tabBorderRight);
                            border-bottom: var(--tabBorderBottom);
                            border-left:   var(--tabBorderLeft);
                            box-shadow:    var(--tabShadow);
                            color:         var(--tabColor);
                            cursor: grab;
                            display: block;
                            float: left;
                            font-size: 75%;
                            line-height: 1.5rem;
                            height: 1.5rem;
                            margin: 0;
                            padding: 0 0.75rem 0 0.5rem;
                            white-space: nowrap;
                        }

                        .editor > .tab.modified::after {
                            background:    var(--tabModifiedBackground);
                            border-radius: 0.2rem;
                            color:         var(--tabModifiedColor);
                            content: '*';
                            display: block;
                            line-height: 1rem;
                            float: right;
                            margin-left: 0.25rem;
                            padding: 0 0.2rem;
                        }

                        .editor >               .tab:hover,
                        .editor >               .tab:active,
                        .editor > input:focus + .tab {
                            background:    var(--tabHoverBackground);
                            border-top:    var(--tabHoverBorderTop);
                            border-right:  var(--tabHoverBorderRight);
                            border-bottom: var(--tabHoverBorderBottom);
                            border-left:   var(--tabHoverBorderLeft);
                            box-shadow:    var(--tabHoverShadow);
                            color:         var(--tabHoverColor);
                        }

                        .editor > input:checked + .tab {
                            background:    var(--tabActiveBackground);
                            border-top:    var(--tabActiveBorderTop);
                            border-right:  var(--tabActiveBorderRight);
                            border-bottom: var(--tabActiveBorderBottom);
                            border-left:   var(--tabActiveBorderLeft);
                            box-shadow:    var(--tabActiveShadow);
                            color:         var(--tabActiveColor);
                            cursor: default;
                        }

                        .editor > textarea {
                            padding: 0.25rem;
                            resize: none;
                            overflow: auto;
                            white-space: nowrap;
                        }

                        .editor > textarea,
                        .editor .image,
                        .editor .audio,
                        .editor .video,
                        .editor .font,
                        .editor .other {
                            background:    var(--textBackground);
                            border-top:    var(--textBorderTop);
                            border-right:  var(--textBorderRight);
                            border-bottom: var(--textBorderBottom);
                            border-left:   var(--textBorderLeft);
                            box-shadow:    var(--textShadow);
                            color:         var(--textColor);
                        }
                        .editor > textarea,
                        .editor .file,
                        .editor .image,
                        .editor .audio,
                        .editor .video,
                        .editor .font,
                        .editor .other {
                            display: none;
                            height: calc(100% - 1.5rem);
                            width: 100%;
                            position: absolute;
                            top: 1.5rem;
                            left: 0;
                            z-index: 1;
                        }
                        .editor > textarea {
                            padding: 0.5rem;
                            resize: none;
                            overflow: auto;
                        }

                            .editor .file textarea {
                                background:    var(--textBackground);
                                border-top:    var(--textBorderTop);
                                border-right:  var(--textBorderRight);
                                border-bottom: var(--textBorderBottom);
                                border-left:   var(--textBorderLeft);
                                box-shadow:    var(--textShadow);
                                color:         var(--textColor);
                                display: block;
                                height: 100%;
                                width: 100%;
                                padding: 0.5rem;
                                resize: none;
                                overflow: auto;
                            }

                        .editor > input:checked + .tab + textarea,
                        .editor > input:checked + .tab + .file,
                        .editor > input:checked + .tab + .image,
                        .editor > input:checked + .tab + .audio,
                        .editor > input:checked + .tab + .video,
                        .editor > input:checked + .tab + .font,
                        .editor > input:checked + .tab + .other {
                            display: block;
                        }

                            .editor .image img,
                            .editor .audio audio,
                            .editor .video video,
                            .editor .font  span,
                            .editor .other span {
                                display: block;
                                max-height: calc(100% - 1rem);
                                max-width: calc(100% - 1rem);
                                text-align: center;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }

                        .editor .success {
                            max-width: 90%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            z-index: 1;
                        }

                        .editor .buttons {
                            position: absolute;
                            right: 1rem;
                            bottom: 0.5rem;
                            z-index: 1;
                            opacity: 0.25;
                        }

                        .editor .modified + textarea + .buttons,
                        .editor .modified + .file .buttons,
                        .editor .buttons:hover,
                        .editor .buttons:active,
                        .editor .buttons:focus-within {
                            opacity: 1;
                        }

                    /**
                     * -----------------------------------------------------
                     *
                     * The input form or message window.
                     *
                     * -----------------------------------------------------
                     */

                    .modal {
                        background: var(--modalBackground);
                        box-shadow: var(--modalBorder);
                        color: var(--modalColor);
                        display: block;
                        font-size: 1.25rem;
                        max-width: calc( 100% - 2rem - 2rem );
                        padding: 1.5rem;
                        overflow: visible;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        z-index: 3;
                    }
                    .modal + .modal {
                        z-index: 2;
                    }
                    .modal.notification {
                        width: 33%;
                    }

                    .modal.full {
                        height: calc( 100% - 2rem - 2rem );
                        width: 100%;
                    }

                        .modal iframe {
                            display: block;
                            height: calc( 100% + 1.5rem + 1.5rem );
                            width: calc( 100% + 1.5rem + 1.5rem );
                            max-width: none;
                            margin: -1.5rem 0 0 -1.5rem;
                            z-index: 2 !important;
                        }

                    .modal.outside {
                        background: transparent;
                        box-shadow: none;
                    }
                    .modal.outside::before {
                        background: repeating-linear-gradient( -45deg, transparent, transparent 0.33rem, rgba(0, 0, 0, 0.125) 0.33rem, rgba(0, 0, 0, 0.125) 0.66rem ),
                                    repeating-linear-gradient(  45deg, transparent, transparent 0.33rem, rgba(0, 0, 0, 0.125) 0.33rem, rgba(0, 0, 0, 0.125) 0.66rem );
                        content: '';
                        display: block;
                        height: 200vh;
                        width: 200vw;
                        max-width: none;
                        position: fixed;
                        top: -100vh;
                        left: -100vw;
                    }
                    .modal.outside::after {
                        background: var(--modalBackground);
                        box-shadow: var(--modalBorder);
                        content: '';
                        display: block;
                        height: 100%;
                        width: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                    .modal.outside > * {
                        z-index: 1;
                    }

                        .error {
                            background: var(--errorBackground);
                            box-shadow: var(--errorBorder);
                            color: var(--errorColor);
                            display: block;
                            padding: 0.66rem;
                        }
                        .error:empty {
                            display: none !important;
                        }

                        .success {
                            background: var(--successBackground);
                            box-shadow: var(--successBorder);
                            color: var(--successColor);
                            display: block;
                            padding: 0.66rem;
                        }
                        .success:empty {
                            display: none !important;
                        }

                        details {
                            display: block;
                        }
                        details[open] + fieldset,
                        details[open] + form,
                        .error:not(:empty) + details {
                            display: none;
                        }
                        .error:not(:empty) + details + form {
                            display: block;
                        }
                        details + form > h1:first-child {
                            margin-top: 1rem;
                        }
                        form > .error:first-child:empty   + h1,
                        form > .success:first-child:empty + h1,
                        form > .error:first-child:empty   + .success:empty + h1,
                        form > .success:first-child:empty + .error:empty   + h1 {
                            margin-top: 0;
                        }

                            summary {
                                color: var(--summaryColor);
                            }
                            summary:hover,
                            summary:active,
                            summary:focus {
                                color: var(--summaryHoverColor);
                            }
                            summary,
                            summary * {
                                cursor: pointer;
                            }

                                summary span,
                                [open] > summary span + span {
                                    display: inline-block;
                                }
                                summary span ~ span,
                                [open] > summary span:first-child {
                                    display: none;
                                }

                        label {
                            display: block;
                            margin-top: 1rem;
                        }

                            label input[type="text"],
                            label input[type="email"],
                            label input[type="password"],
                            label input[type="url"],
                            label input[type="color"],
                            label input[type="number"],
                            label input[type="range"],
                            label input[type="file"],
                            label select,
                            label textarea {
                                background: var(--inputBackground);
                                box-shadow: var(--inputBorder);
                                color: var(--inputColor);
                                display: block;
                                width: 100%;
                                padding: 0.5rem 1rem;
                            }
                            textarea {
                                min-height: 6rem;
                                resize: vertical;
                            }
                            label input[type="text"]:focus,
                            label input[type="email"]:focus,
                            label input[type="password"]:focus,
                            label input[type="url"]:focus,
                            label input[type="color"]:focus,
                            label input[type="number"]:focus,
                            label input[type="range"]:focus,
                            label input[type="file"]:focus,
                            label select:focus,
                            label textarea:focus {
                                background: var(--inputFocusBackground);
                                box-shadow: var(--inputFocusBorder);
                                color: var(--inputFocusColor);
                            }

                            label small ~ small {
                                color: var(--labelInfoColor);
                                display: block;
                                font-size: 75%;
                                margin-top: 0.5em;
                            }

                            .dropzone {
                                background: var(--dropzoneBackground);
                                border: var(--dropzoneBorder);
                                color: var(--dropzoneColor);
                                cursor: grab;
                                display: block;
                                height: 8rem;
                                width: 100%;
                            }
                            label:focus-within .dropzone,
                            .dropzone:hover,
                            .dropzone:active {
                                background: var(--dropzoneFocusBackground);
                                border: var(--dropzoneFocusBorder);
                                color: var(--dropzoneFocusColor);
                            }
                            .dropzone + input[type="file"] {
                                display: block;
                                height: 1px;
                                width: 1px;
                                overflow: hidden;
                                clip: rect(1px, 1px, 1px, 1px);
                                opacity: 0.01;
                                position: fixed !important;
                                top: -100px;
                                left: -100px;
                            }

                                .dropzone > span {
                                    cursor: inherit;
                                    display: block;
                                    width: 100%;
                                    padding: 0 1rem;
                                    text-align: center;
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                }

                                    .dropzone > span .count {
                                        cursor: inherit;
                                        display: block;
                                        font-size: 75%;
                                        text-align: inherit;
                                    }

                        .buttons {
                            display: block;
                            text-align: center;
                        }

                            .btn.outside {
                                color: transparent;
                                cursor: default;
                                display: block;
                                height: 200vh;
                                width: 200vw;
                                max-width: none;
                                position: fixed;
                                top: -100vh;
                                left: -100vw;
                                z-index: 1;
                            }
                            .btn:not(.outside) {
                                background: var(--buttonBackground);
                                box-shadow: var(--buttonBorder);
                                color: var(--buttonColor);
                                cursor: pointer;
                                display: inline-block;
                                margin: 1rem 0.5rem 0;
                                padding: 0.5rem 1rem;
                                text-align: center;
                            }
                            .outside ~ .btn {
                                z-index: 2;
                            }
                            .btn:not(.outside):hover,
                            .btn:not(.outside):active,
                            .btn:not(.outside):focus {
                                background: var(--buttonHoverBackground);
                                color: var(--buttonHoverColor);
                            }

                        /**
                         * -------------------------------------------------
                         *
                         * Typography.
                         *
                         * -------------------------------------------------
                         */

                        h1,
                        h2,
                        h3,
                        h4,
                        h5,
                        h6 {
                            display: block;
                            font-size: 140%;
                        }

                        p {
                            display: block;
                        }

                        hr {
                            background: var(--hrColor);
                            display: block;
                            height: 0.25rem;
                            width: 100%;
                        }

                        h1:not(:first-child),
                        h2:not(:first-child),
                        h3:not(:first-child),
                        h4:not(:first-child),
                        h5:not(:first-child),
                        h6:not(:first-child),
                        p:not(:first-child),
                        hr:not(:first-child) {
                            margin-top: 1rem;
                        }

                            small {
                                font-size: 80%;
                            }

                            i,
                            em {
                                font-style: italic;
                            }

                            b,
                            strong {
                                font-weight: bold;
                            }

                            u {
                                text-decoration: underline;
                            }

                            p a {
                                color: var(--anchorColor);
                                text-decoration: underline;
                            }

                            code {
                                background: var(--codeBackground);
                                color:      var(--codeColor);
                                border-radius: 0.25em;
                                display: inline-block;
                                font-size: 80%;
                                padding: 0 0.66em;
                            }

                /**
                 * ---------------------------------------------------------
                 *
                 * The statusbar area.
                 *
                 * ---------------------------------------------------------
                 */

                .statusbar {
                    background: var(--statusbarBackground);
                    box-shadow: var(--statusbarBorder);
                    color: var(--statusbarColor);
                    display: block;
                    width: 100%;
                    margin-top: 1px;
                    white-space: nowrap;
                }

                    .statusbar > div {
                        box-shadow: var(--statusbarItemBorder);
                        display: block;
                        float: right;
                        font-size: 66%;
                        line-height: 1.25rem;
                        height: 1.25rem;
                        min-width: 3rem;
                        padding: 0 0.5rem;
                    }

                    .statusbar > .msg {
                        float: none;
                    }
