html body
{
    padding: 0;
    text-align: center;
    overflow-x: hidden;
}

/* Sign-in introduction spans both the form and alternative-method panels. */
@media only screen and (min-width: 1024px)
{
    .auth-scenes
    {
        display: grid;
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        grid-template-rows: auto auto;
        min-height: calc(100dvh - 50px - var(--sync-offset, 0px));
    }

    .auth-scenes > #scene1,
    .auth-scenes > #scene2,
    .auth-scenes > #scene3
    {
        position: relative;
        float: none;
        width: auto;
        min-width: 0;
        min-height: 0;
        box-sizing: border-box;
    }

    .auth-scenes > #scene1
    {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: stretch;
    }

    .auth-scenes > #scene2
    {
        grid-column: 2;
        grid-row: 1;
    }

    .auth-scenes > #scene3
    {
        grid-column: 2;
        grid-row: 2;
    }
}

    #scene1, #scene2, #scene3
    {
        position: absolute;
        width: 100%;
        min-height: 100%;
        text-align: center;
        transition: left 0.5s ease;
    }

        #scene1
        {
            top: 0;
            left: 0;
            padding: 50px 10px;
            background-color: var(--page-background-highlight);
            color: var(--body-color-highlight)
        }

            #scene1 p
            {
                margin: 0 auto;
                max-width: 550px;
            }

        #scene2,
        #scene3
        {
            top: 0;
            padding: 50px 10px;
            background-color: var(--page-background-normal);
        }



/* Compact controller scenes. Only the selected scene participates in layout. */
@media only screen and (max-width: 1023px)
{
    body[data-scene] #scene1,
    body[data-scene] #scene2,
    body[data-scene] #scene3
    {
        display: none;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: calc(100dvh - 60px);
        padding: 24px 16px;
        overflow-wrap: anywhere;
    }

    body[data-scene="1"] #scene1,
    body[data-scene="2"] #scene2,
    body[data-scene="3"] #scene3
    {
        display: block;
    }

    body[data-scene] .action-panel
    {
        box-sizing: border-box;
        max-width: 100%;
        min-height: 44px;
    }

    #scene2
    {

    }

    body[data-scene="1"] #scene1,
    body[data-scene="2"] #scene2,
    body[data-scene="3"] #scene3
    {
        left: 0;
    }

    body[data-scene="2"] #scene1
    {
        left: -100%;
    }

        body[data-scene="3"] #scene1
        {
            left: -200%;
        }

    body[data-scene="1"] #scene2
    {
        left: 100%;
    }

        body[data-scene="3"] #scene2
        {
            left: -100%;
        }

    body[data-scene="1"] #scene3
    {
        left: 200%;
    }

        body[data-scene="2"] #scene3
        {
            left: 100%;
        }

        ul#dock-top li[value="1"]::before
        {
            content: '\f05a';
        }

        ul#dock-top li[value="2"]::before
        {
            content: '\f15b';
        }

        ul#dock-top li[value="3"]::before
        {
            content: '\f6ff';
        }


        /* Both active and inactive tabs use the installed solid icon font. */
        ul#dock-top li[value="1"]::before,
        ul#dock-top li[value="2"]::before,
        ul#dock-top li[value="3"]::before
        {
            font: var(--fa-font-solid);
        }
}

/* Screens wider than 400 */
@media only screen and (min-width: 1024px)
{
    html body
    {
        /* background-color: var(--page-background-highlight); */
        background-color: var(--page-background-normal);
    }

    #scene1
    {
        position: relative;
        float: left;
        top: 0;
        left: 0;
        width: 45%;
        max-width: unset;
        overflow: hidden;
        display: inline-block;
    }

    #scene2
    {
        position: relative;
        padding: 100px 25px 50px 25px;
        width: 55%;
        min-height: 40%;
        background-color: var(--page-background-normal);
        display: inline-block;
    }

    #scene3
    {
        position: relative;
        padding: 50px 25px;
        width: 55%;
        min-height: unset;
        background-color: var(--page-background-normal);
        display: inline-block;
    }

}