:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --app-shell-width: 498px;
}

html {
    background: var(--color-white);
}

body {
    background: var(--color-white);
    color: var(--color-neutral-800);
    font-family: var(--font-family-base);
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.app-shell {
    width: var(--app-shell-width);
    max-width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    overflow: hidden;
    position: relative;
}

.app-shell .offcanvas {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 100%) !important;
    transition: transform 0.35s ease-in-out !important;
    will-change: transform;
    width: var(--app-shell-width) !important;
    max-width: 100% !important;
    bottom: 0 !important;
}

.app-shell .offcanvas.show,
.app-shell .offcanvas.showing {
    transform: translate(-50%, 0) !important;
}

.app-shell .offcanvas.hiding {
    transform: translate(-50%, 100%) !important;
}

/* Align backdrop with the app shell */
.app-shell .offcanvas-backdrop {
    left: 50% !important;
    right: auto !important;
    width: var(--app-shell-width) !important;
    max-width: 100% !important;
    transform: translateX(-50%) !important;
}

.app-shell .modal,
.app-shell ~ .modal-backdrop {
    width: var(--app-shell-width);
    max-width: 100% !important;
    left: 50%;
    transform: translateX(-50%);
}