.floating-container {
    flex: 0 0 auto;
    display: flex;
    border-radius: 20px;
    align-self: flex-start;
    margin: auto;
}

/* The frosted panel is only for containers that float on the login background image. On the plain
   page background it is an unpadded slab that fights the surface underneath it, so the background
   is scoped to the image instead of set on every .floating-container. */
.background-image .floating-container {
    background: color-mix(in srgb, var(--surface-elevated-contrasting) 50%, transparent);
    backdrop-filter: blur(10px);
}

/* The brand logo is a fixed dark asset, and the photo behind this panel is the same in both color
   schemes, so this one frost stays fix-white rather than following the scheme. */
.background-image .split-layout-left-container {
    background: color-mix(in srgb, var(--utility-fix-white) 50%, transparent);
}