:root {
  color-scheme: light;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  background: #f4f1e9;
  color: #11110f;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f4f1e9;
}

body {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
}

body.is-idle {
  cursor: none;
}

#deck,
.slide {
  position: fixed;
  inset: 0;
}

.slide {
  display: grid;
  place-items: center;
  padding: max(7vw, 48px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(0.2, 0.75, 0.2, 1),
    visibility 0s linear 320ms;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

h1 {
  width: min(1180px, 100%);
  margin: 0;
  font-size: clamp(42px, 6.6vw, 112px);
  font-weight: 760;
  line-height: 1.17;
  letter-spacing: -0.055em;
  text-align: center;
  text-wrap: balance;
}

h1.compact {
  font-size: clamp(42px, 4.8vw, 78px);
}

em {
  color: #f05a28;
  font-style: normal;
}

@media (max-width: 640px) {
  .slide {
    padding: 32px 24px;
  }

  h1 {
    font-size: clamp(38px, 11.5vw, 64px);
    line-height: 1.2;
    letter-spacing: -0.045em;
  }

  h1.compact {
    font-size: clamp(34px, 9vw, 52px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: none;
  }
}