:root {
  --max-width: 540px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-bottom: calc(96px + var(--safe-bottom));
}

.hero {
  display: block;
  width: 100%;
  height: auto;
}

.bottom-float {
  position: fixed;
  left: 50%;
  bottom: calc(0px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(var(--max-width), 100%);
  display: block;
  z-index: 999;
  text-decoration: none;
}

.bottom-float__img {
  display: block;
  width: 100%;
  height: auto;
}