.layout {
    display: grid;
    grid: auto minmax(0, 1fr) / 100%;
    inline-size: 100%;
    block-size: 100%;
    overflow: clip;
    background-color: var(--surface-300);

    .menu {
        view-transition-name: menu;
        display: grid;
        grid: 100% / auto minmax(0, 1fr) auto;
        grid-auto-flow: column;
        justify-content: start;
        place-items: center start;
        position: relative;
        z-index: 10;

        gap: .5em;
        padding-inline: 1em;
        block-size: calc(env(titlebar-area-height, 3em) + .5px);
        inline-size: env(titlebar-area-width, 100%);
        -webkit-app-region: drag;

        background-color: var(--surface-300);
        color: var(--text-1);

        & > * {
            -webkit-app-region: no-drag;
        }

        & > .logo {
            aspect-ratio: 1;
            block-size: 100%;
            padding: var(--padding-m);

            & > picture {
                display: contents;

                & > img {
                    block-size: 100%;
                }
            }
        }

        & .right {
            display: grid;
            grid-auto-flow: column;
            align-content: center;

            & .themeMenu {
                display: contents;

                & > button {
                    display: flex;
                    justify-content: center;
                    padding: var(--padding-m);
                    border: none;
                    border-radius: var(--radii-m);
                    background-color: transparent;

                    &:hover {
                        background-color: var(--surface-500);
                    }
                }

                & > dialog {
                    inset-inline-end: anchor(right);
                    inset-block-start: anchor(bottom);

                    padding: var(--padding-m);
                    border: none;
                    border-radius: var(--radii-m);
                    border-top-right-radius: 0;
                    background-color: var(--surface-600);
                    box-shadow: var(--shadow-3);
                }

                &:has(:popover-open) > button {
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                    background-color: var(--surface-600);
                }
            }
        }
    }

    & > section {
        display: grid;
        grid: 100% / 100%;
        inline-size: 100%;
        block-size: 100%;
        overflow: clip;
        view-transition-name: content;
    }
}

.error {
    display: grid;
    place-content: center;

    background: repeating-linear-gradient(-45deg,
            color(from var(--fail) xyz x y z / .05),
            color(from var(--fail) xyz x y z / .05) 10px,
            color(from var(--fail) xyz x y z / .25) 10px,
            color(from var(--fail) xyz x y z / .25) 12px,
            color(from var(--fail) xyz x y z / .05) 12px);
    color: var(--text-2);
    border: 1px solid var(--fail);
    border-radius: var(--radii-m);

    margin: var(--padding-l);
}

@keyframes slide-left {
    from {
        translate: 0% 0;
    }

    to {
        translate: -100% 0;
    }
}

@keyframes slide-right {
    from {
        translate: 100% 0;
    }

    to {
        translate: 0% 0;
    }
}

/* ::view-transition-old(menu),
::view-transition-new(menu) {
    z-index: 1;
} */

::view-transition-old(content) {
    animation-name: slide-left;
}

::view-transition-new(content) {
    animation-name: slide-right;
}