.app-shell {
    position: relative;
    isolation: isolate;
}

.app-shell__ambient,
.app-shell__grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    transform: translateZ(0);
}

.app-shell__ambient {
    z-index: 0;
    background: var(--shell-ambient-layer);
    opacity: var(--shell-ambient-opacity, 1);
}

.app-shell__grid {
    z-index: 0;
    background-image: var(--shell-grid-layer);
    background-size: var(--shell-grid-size, 64px 64px);
    opacity: var(--shell-grid-opacity, 0.03);
    mask-image: radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.app-shell__content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-shell--app {
    --shell-ambient-layer: var(--app-ambient-layer);
    --shell-grid-layer: var(--app-grid-layer);
    --shell-grid-opacity: var(--app-grid-opacity);
}

.app-shell--marketing {
    --shell-ambient-layer: var(--landing-ambient-layer);
    --shell-grid-layer: var(--landing-grid-layer);
    --shell-grid-opacity: var(--landing-grid-opacity);
}