:root {
    --page-safe-top-color: transparent;
    --page-safe-bottom-color: var(--page-safe-top-color);
    --page-safe-top-fill-depth: 18px;
    --page-safe-bottom-fill-depth: 28px;
}

body {
    position: relative;
    isolation: isolate;
}

body::before,
body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
    transform: translateZ(0);
}

body::before {
    top: 0;
    height: calc(env(safe-area-inset-top, 0px) + var(--page-safe-top-fill-depth));
    background: linear-gradient(180deg,
            var(--page-safe-top-color) 0%,
            var(--page-safe-top-color) 72%,
            transparent 100%);
}

body::after {
    bottom: 0;
    height: calc(env(safe-area-inset-bottom, 0px) + var(--browser-safe-bottom-offset, 0px) + var(--page-safe-bottom-fill-depth));
    background: linear-gradient(0deg,
            var(--page-safe-bottom-color) 0%,
            var(--page-safe-bottom-color) 74%,
            transparent 100%);
}

body > * {
    position: relative;
    z-index: 1;
}