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

    .menu {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-auto-flow: column;
        justify-content: start;
        justify-items: start;
        position: relative;
        z-index: 10;

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

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

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

        & > .logo {
            inline-size: 3em;
            block-size: 3em;
            padding: .75em;
            margin-block-end: -1em;
            background-color: inherit;
            color: inherit;
            border-radius: .25em;

            & > svg {
                inline-size: 100%;
                block-size: 100%;
            }
        }

        & .right {
            display: grid;
            align-content: center;
        }
    }
}