:root {
  --c-primary: #78A848;
  --c-light:   #90C048;
  --c-light2:  #A8C048;
  --c-deep:    #48A860;
  --c-deep2:   #60A860;
  --c-warm:    #F0D878;
  --c-warm2:   #F0D890;
  --c-bg:      #489F6A;
  --c-bg2:     #F0D8C0;
  --bg-grad:   linear-gradient(to bottom, #489F6A 0%, #8DB447 100%);
  --bg-mottle:
    radial-gradient(circle at 12% 78%, rgba(95,153,81,.30), transparent 5%),
    radial-gradient(circle at 67% 88%, rgba(95,153,81,.24), transparent 6%),
    radial-gradient(circle at 35% 72%, rgba(95,153,81,.27), transparent 4%),
    radial-gradient(circle at 88% 83%, rgba(95,153,81,.22), transparent 5%),
    radial-gradient(circle at 8% 92%, rgba(95,153,81,.32), transparent 5%),
    radial-gradient(circle at 50% 80%, rgba(95,153,81,.25), transparent 4%),
    radial-gradient(circle at 25% 95%, rgba(95,153,81,.28), transparent 6%),
    radial-gradient(circle at 75% 70%, rgba(95,153,81,.20), transparent 4%),
    radial-gradient(circle at 42% 90%, rgba(95,153,81,.24), transparent 5%),
    radial-gradient(circle at 93% 94%, rgba(95,153,81,.27), transparent 4%);
  --font-sans: "Source Han Sans CN", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: calc(100vw / 7.5); }   /* 750 设计稿下 1rem = 100px */
body {
  font-family: var(--font-sans);
  background: var(--bg-grad);
  color: var(--c-deep);
}
#app { width: 100%; max-width: 750px; margin: 0 auto; min-height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.screen { display: none; position: relative; width: 100%; flex: 0 0 auto; aspect-ratio: 750 / 1334; min-height: 100vh; overflow: auto; }
.screen.active { display: block; }