* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  transition: background 420ms ease;
  overflow-x: hidden;
}

body.slowmo {
  transition: filter 120ms;
  filter: none;
}

.app {
  min-height: 100%;
  padding:
    calc(var(--appPad) + env(safe-area-inset-top))
    calc(var(--appPad) + env(safe-area-inset-right))
    calc(var(--appPad) + env(safe-area-inset-bottom))
    calc(var(--appPad) + env(safe-area-inset-left));
  max-width: 620px;
  margin: 0 auto;
}