#app {
  min-height: 100%;
  background: #f7cf4b;
  color: #241b12;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

button {
  box-sizing: border-box;
}

button::after { border: 0; }

/* Every illustrated sticker gets the same paper-cut white edge. */
.sticker-art {
  filter:
    drop-shadow(calc(min(100vw, 440px) * -3 / 750) calc(min(100vw, 440px) * -3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * 3 / 750) calc(min(100vw, 440px) * -3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * -3 / 750) calc(min(100vw, 440px) * 3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * 3 / 750) calc(min(100vw, 440px) * 3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * 6 / 750) calc(min(100vw, 440px) * 8 / 750) 0 rgba(37, 28, 19, .14)) !important;
}

.safe-top { height: env(safe-area-inset-top); }

.primary-button {
  height: calc(min(100vw, 440px) * 104 / 750);
  border-radius: calc(min(100vw, 440px) * 52 / 750);
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(min(100vw, 440px) * 4 / 750) solid #2a2119;
  color: #fffaf0;
  font-size: calc(min(100vw, 440px) * 30 / 750);
  font-weight: 700;
  letter-spacing: calc(min(100vw, 440px) * 2 / 750);
  background: #2a2119;
  box-shadow: 0 calc(min(100vw, 440px) * 12 / 750) 0 #fff1c2;
}

.primary-button[disabled] { opacity: 0.55; }

.ghost-button {
  height: calc(min(100vw, 440px) * 88 / 750);
  border-radius: calc(min(100vw, 440px) * 44 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #2a2119;
  background: #fff8e7;
  color: #2a2119;
  font-size: calc(min(100vw, 440px) * 28 / 750);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared one-shot sheen for card surfaces. */
.quick-shine {
  position: relative;
  overflow: hidden;
}

.quick-shine::after {
  content: '';
  position: absolute;
  z-index: 30;
  top: -20%;
  bottom: -20%;
  left: -45%;
  width: 36%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translate3d(-180%, 0, 0) skewX(-14deg);
  animation: quick-card-shine 680ms 100ms ease-out both;
}

@keyframes quick-card-shine {
  0% { opacity: 0; transform: translate3d(-180%, 0, 0) skewX(-14deg); }
  24% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(520%, 0, 0) skewX(-14deg); }
}

#app {
  min-height: 100%;
  background: #f7cf4b;
  color: #251c13;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

button::after { border: 0; }

.draw-navigation {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  box-sizing: border-box;
  background: #f7cf4b;
  border-bottom: calc(min(100vw, 440px) * 2 / 750) solid rgba(37, 28, 19, .1);
}

.draw-navigation-bar {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.draw-navigation-back {
  position: absolute;
  left: calc(min(100vw, 440px) * 8 / 750);
  width: calc(min(100vw, 440px) * 88 / 750);
  height: calc(min(100vw, 440px) * 68 / 750);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(min(100vw, 440px) * 34 / 750);
  background: transparent;
  color: #251c13;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.draw-navigation-back:active { background: rgba(37, 28, 19, .08); }
.draw-navigation-arrow { margin-top: calc(min(100vw, 440px) * -5 / 750); font-size: calc(min(100vw, 440px) * 55 / 750); font-weight: 400; line-height: 1; }
.draw-navigation-title { max-width: calc(min(100vw, 440px) * 300 / 750); font-size: calc(min(100vw, 440px) * 25 / 750); font-weight: 850; line-height: 1; text-align: center; }
.draw-navigation-spacer { width: 100%; flex: none; }

.draw-scroll {
  height: 100vh;
  background: #f7cf4b;
}

.draw-page {
  position: relative;
  min-height: 100vh;
  padding: calc(min(100vw, 440px) * 34 / 750) calc(min(100vw, 440px) * 34 / 750) calc(calc(min(100vw, 440px) * 58 / 750) + env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: hidden;
  background: #f7cf4b;
}

.paper-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(rgba(37, 28, 19, .55) calc(min(100vw, 440px) * 1.3 / 750), transparent calc(min(100vw, 440px) * 1.3 / 750));
  background-size: calc(min(100vw, 440px) * 18 / 750) calc(min(100vw, 440px) * 18 / 750);
}

.decor {
  position: absolute;
  z-index: 0;
  color: #251c13;
  font-weight: 950;
  pointer-events: none;
}

.decor-a { top: calc(min(100vw, 440px) * 96 / 750); right: calc(min(100vw, 440px) * 42 / 750); font-size: calc(min(100vw, 440px) * 46 / 750); transform: rotate(10deg); }
.decor-b { top: calc(min(100vw, 440px) * 306 / 750); left: calc(min(100vw, 440px) * 21 / 750); font-size: calc(min(100vw, 440px) * 52 / 750); transform: rotate(-12deg); opacity: .55; }
.decor-c { top: calc(min(100vw, 440px) * 510 / 750); right: calc(min(100vw, 440px) * 18 / 750); font-size: calc(min(100vw, 440px) * 48 / 750); transform: rotate(-28deg); opacity: .52; }

.draw-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(min(100vw, 440px) * 682 / 750);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(min(100vw, 440px) * 72 / 750);
  box-sizing: border-box;
}

.eyebrow {
  padding: calc(min(100vw, 440px) * 7 / 750) calc(min(100vw, 440px) * 17 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 9 / 750);
  background: #fff8e6;
  box-shadow: calc(min(100vw, 440px) * 4 / 750) calc(min(100vw, 440px) * 5 / 750) 0 #251c13;
  font-size: calc(min(100vw, 440px) * 17 / 750);
  font-weight: 950;
  letter-spacing: calc(min(100vw, 440px) * 3 / 750);
  transform: rotate(-2deg);
}

.draw-title {
  margin-top: calc(min(100vw, 440px) * 24 / 750);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(min(100vw, 440px) * 44 / 750);
  font-weight: 950;
  line-height: 1.14;
  letter-spacing: calc(min(100vw, 440px) * -1 / 750);
}

.draw-rule {
  margin-top: calc(min(100vw, 440px) * 14 / 750);
  color: rgba(37, 28, 19, .66);
  font-size: calc(min(100vw, 440px) * 18 / 750);
  font-weight: 850;
  letter-spacing: calc(min(100vw, 440px) * 2 / 750);
}

.sticker-art { display: block; }

.ritual-state {
  width: 100%;
  margin-top: calc(min(100vw, 440px) * 31 / 750);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mind-prompt {
  width: 100%;
  padding: calc(min(100vw, 440px) * 22 / 750) calc(min(100vw, 440px) * 25 / 750);
  box-sizing: border-box;
  border: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 18 / 750);
  background: #fff8e6;
  box-shadow: calc(min(100vw, 440px) * 7 / 750) calc(min(100vw, 440px) * 8 / 750) 0 #251c13;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(min(100vw, 440px) * 24 / 750);
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  transform: rotate(-.5deg);
}

.oracle-stage {
  position: relative;
  width: 100%;
  height: calc(min(100vw, 440px) * 420 / 750);
  margin-top: calc(min(100vw, 440px) * 8 / 750);
}

.ritual-sticker {
  position: absolute;
  left: 50%;
  top: calc(min(100vw, 440px) * 15 / 750);
  width: calc(min(100vw, 440px) * 350 / 750);
  height: calc(min(100vw, 440px) * 374 / 750);
  transform: translateX(-50%);
  transform-origin: 50% 82%;
  filter: drop-shadow(calc(min(100vw, 440px) * 6 / 750) calc(min(100vw, 440px) * 8 / 750) 0 rgba(37, 28, 19, .13));
}

.oracle-stage.ready .ritual-sticker { animation: tube-float 2.8s ease-in-out infinite; }
.oracle-stage.shaking .ritual-sticker,
.oracle-stage.is-holding .ritual-sticker { animation: active-shake .16s ease-in-out infinite alternate; }

.motion-lines text {
  position: absolute;
  z-index: 3;
  top: calc(min(100vw, 440px) * 130 / 750);
  color: #ef6b55;
  font-size: calc(min(100vw, 440px) * 58 / 750);
  font-weight: 950;
  opacity: 0;
}

.motion-lines text:first-child { left: calc(min(100vw, 440px) * 57 / 750); }
.motion-lines text:last-child { right: calc(min(100vw, 440px) * 47 / 750); transform: rotate(180deg); }
.oracle-stage.shaking .motion-lines text { animation: line-pulse .36s ease-out infinite alternate; }
.oracle-stage.shaking .motion-lines text:last-child { animation-delay: -.18s; }

.state-title {
  margin-top: calc(min(100vw, 440px) * 4 / 750);
  font-size: calc(min(100vw, 440px) * 31 / 750);
  font-weight: 950;
  text-align: center;
}

.state-copy {
  max-width: calc(min(100vw, 440px) * 590 / 750);
  margin-top: calc(min(100vw, 440px) * 10 / 750);
  font-size: calc(min(100vw, 440px) * 21 / 750);
  font-weight: 680;
  line-height: 1.5;
  text-align: center;
  opacity: .64;
}

.tap-fallback-note {
  margin-top: calc(min(100vw, 440px) * 14 / 750);
  color: #8f432f;
  font-size: calc(min(100vw, 440px) * 19 / 750);
  font-weight: 850;
  text-align: center;
}

.shake-progress {
  width: 100%;
  margin-top: calc(min(100vw, 440px) * 26 / 750);
}

.progress-track {
  position: relative;
  width: 100%;
  height: calc(min(100vw, 440px) * 30 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 18 / 750);
  background: #fff7df;
  box-shadow: calc(min(100vw, 440px) * 4 / 750) calc(min(100vw, 440px) * 5 / 750) 0 rgba(37, 28, 19, .22);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: calc(min(100vw, 440px) * 14 / 750);
  background: repeating-linear-gradient(135deg, #ef6b55 0, #ef6b55 calc(min(100vw, 440px) * 18 / 750), #f7cf4b calc(min(100vw, 440px) * 18 / 750), #f7cf4b calc(min(100vw, 440px) * 36 / 750));
  transition: width .1s linear;
}

.progress-meta {
  margin-top: calc(min(100vw, 440px) * 10 / 750);
  display: flex;
  justify-content: space-between;
  font-size: calc(min(100vw, 440px) * 19 / 750);
  font-weight: 850;
}

.sensor-note { margin-top: calc(min(100vw, 440px) * 17 / 750); color: #8f432f; font-size: calc(min(100vw, 440px) * 18 / 750); font-weight: 800; text-align: center; }

.prepare-error {
  width: 100%;
  margin-top: calc(min(100vw, 440px) * 22 / 750);
  padding: calc(min(100vw, 440px) * 18 / 750) calc(min(100vw, 440px) * 20 / 750);
  box-sizing: border-box;
  border: calc(min(100vw, 440px) * 3 / 750) dashed #a64735;
  border-radius: calc(min(100vw, 440px) * 14 / 750);
  background: rgba(255, 248, 230, .8);
  color: #a64735;
  font-size: calc(min(100vw, 440px) * 19 / 750);
  font-weight: 850;
  text-align: center;
}

.prepare-error button {
  width: calc(min(100vw, 440px) * 250 / 750);
  height: calc(min(100vw, 440px) * 68 / 750);
  margin-top: calc(min(100vw, 440px) * 14 / 750);
  border-radius: calc(min(100vw, 440px) * 34 / 750);
  background: #251c13;
  color: #fff8e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(min(100vw, 440px) * 20 / 750);
  font-weight: 900;
  line-height: 1;
}

.flying-state {
  position: relative;
  width: 100%;
  min-height: calc(min(100vw, 440px) * 720 / 750);
  margin-top: calc(min(100vw, 440px) * 20 / 750);
  padding-bottom: calc(min(100vw, 440px) * 45 / 750);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.flying-tube {
  position: absolute;
  left: 50%;
  bottom: calc(min(100vw, 440px) * 112 / 750);
  width: calc(min(100vw, 440px) * 360 / 750);
  height: calc(min(100vw, 440px) * 385 / 750);
  transform: translateX(-50%) rotate(-2deg);
  animation: tube-kick .18s ease-in-out 4 alternate;
}

.flying-stick {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(min(100vw, 440px) * 310 / 750);
  width: calc(min(100vw, 440px) * 62 / 750);
  height: calc(min(100vw, 440px) * 330 / 750);
  border: calc(min(100vw, 440px) * 4 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 24 / 750) calc(min(100vw, 440px) * 24 / 750) calc(min(100vw, 440px) * 10 / 750) calc(min(100vw, 440px) * 10 / 750);
  background: #ef6b55;
  box-shadow: calc(min(100vw, 440px) * 8 / 750) calc(min(100vw, 440px) * 9 / 750) 0 rgba(37, 28, 19, .24);
  transform-origin: 50% 100%;
  animation: one-stick-flies .85s cubic-bezier(.18, .78, .28, 1) both;
}

.flying-stick-label {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  width: 100%;
  color: #fff8e6;
  font-size: calc(min(100vw, 440px) * 22 / 750);
  font-weight: 950;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(min(100vw, 440px) * 9 / 750);
  transform: translateY(-50%);
}

.result-state {
  width: 100%;
  margin-top: calc(min(100vw, 440px) * 34 / 750);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(min(100vw, 440px) * 14 / 750);
}

.result-divider > text {
  width: calc(min(100vw, 440px) * 52 / 750);
  height: calc(min(100vw, 440px) * 52 / 750);
  flex: none;
  border: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  border-radius: 50%;
  background: #251c13;
  color: #f7cf4b;
  font-size: calc(min(100vw, 440px) * 18 / 750);
  font-weight: 950;
  line-height: calc(min(100vw, 440px) * 52 / 750);
  text-align: center;
}

.result-divider view { display: flex; flex-direction: column; }
.result-divider view text:first-child { font-size: calc(min(100vw, 440px) * 25 / 750); font-weight: 950; line-height: 1.15; }
.result-divider view text:last-child { margin-top: calc(min(100vw, 440px) * 3 / 750); font-size: calc(min(100vw, 440px) * 16 / 750); font-weight: 760; opacity: .52; }

.fortune-paper {
  position: relative;
  width: 100%;
  margin-top: calc(min(100vw, 440px) * 17 / 750);
  padding: calc(min(100vw, 440px) * 54 / 750) calc(min(100vw, 440px) * 38 / 750) calc(min(100vw, 440px) * 46 / 750);
  box-sizing: border-box;
  border: calc(min(100vw, 440px) * 4 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 20 / 750) calc(min(100vw, 440px) * 24 / 750) calc(min(100vw, 440px) * 18 / 750) calc(min(100vw, 440px) * 23 / 750);
  background: #fff8e6;
  box-shadow: calc(min(100vw, 440px) * 10 / 750) calc(min(100vw, 440px) * 12 / 750) 0 #251c13;
  overflow: visible;
  transform-origin: 50% 0;
  animation: paper-unfold .75s cubic-bezier(.18, .72, .25, 1) both;
}

.paper-tape {
  position: absolute;
  left: 50%;
  top: calc(min(100vw, 440px) * -19 / 750);
  width: calc(min(100vw, 440px) * 154 / 750);
  height: calc(min(100vw, 440px) * 40 / 750);
  background: rgba(98, 183, 216, .78);
  transform: translateX(-50%) rotate(-2deg);
}

.fortune-meta {
  display: flex;
  justify-content: space-between;
  color: #8e5829;
  font-size: calc(min(100vw, 440px) * 19 / 750);
  font-weight: 900;
  letter-spacing: calc(min(100vw, 440px) * 2 / 750);
}

.fortune-tendency {
  padding: calc(min(100vw, 440px) * 5 / 750) calc(min(100vw, 440px) * 10 / 750);
  border: calc(min(100vw, 440px) * 2 / 750) solid #8e5829;
  border-radius: calc(min(100vw, 440px) * 16 / 750);
  background: #f7cf4b;
  color: #251c13;
  letter-spacing: 0;
}

.fortune-title {
  display: block;
  margin-top: calc(min(100vw, 440px) * 22 / 750);
  font-size: calc(min(100vw, 440px) * 43 / 750);
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
}

.fortune-verse {
  display: block;
  margin-top: calc(min(100vw, 440px) * 24 / 750);
  color: #8f3f2e;
  font-size: calc(min(100vw, 440px) * 27 / 750);
  font-weight: 850;
  line-height: 1.72;
  text-align: center;
  white-space: pre-line;
}

.fortune-seal {
  position: absolute;
  right: calc(min(100vw, 440px) * 22 / 750);
  bottom: calc(min(100vw, 440px) * 20 / 750);
  width: calc(min(100vw, 440px) * 52 / 750);
  height: calc(min(100vw, 440px) * 52 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #ef6b55;
  color: #ef6b55;
  font-size: calc(min(100vw, 440px) * 24 / 750);
  font-weight: 950;
  line-height: calc(min(100vw, 440px) * 52 / 750);
  text-align: center;
  transform: rotate(8deg);
}

.reveal-caption {
  margin-top: calc(min(100vw, 440px) * 28 / 750);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(min(100vw, 440px) * 5 / 750);
  font-size: calc(min(100vw, 440px) * 20 / 750);
  font-weight: 900;
}

.reveal-caption text:last-child { font-size: calc(min(100vw, 440px) * 17 / 750); opacity: .52; }

.cat-invite {
  width: 100%;
  margin-top: calc(min(100vw, 440px) * 20 / 750);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: cat-invite-arrives .55s ease-out both;
}

.resumed-note {
  margin-bottom: calc(min(100vw, 440px) * 8 / 750);
  padding: calc(min(100vw, 440px) * 10 / 750) calc(min(100vw, 440px) * 18 / 750);
  border: calc(min(100vw, 440px) * 2 / 750) dashed rgba(37, 28, 19, .42);
  border-radius: calc(min(100vw, 440px) * 999 / 750);
  background: rgba(255, 248, 230, .72);
  color: #6f3f25;
  font-size: calc(min(100vw, 440px) * 18 / 750);
  font-weight: 850;
  text-align: center;
}

.cat-invite-stage {
  position: relative;
  width: 100%;
  min-height: calc(min(100vw, 440px) * 420 / 750);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cat-pet-trigger {
  position: relative;
  width: calc(min(100vw, 440px) * 510 / 750);
  height: calc(min(100vw, 440px) * 367 / 750);
  border-radius: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 90ms ease, filter 90ms ease;
}

.oracle-cat-sticker {
  position: relative;
  z-index: 2;
  width: calc(min(100vw, 440px) * 470 / 750);
  height: calc(min(100vw, 440px) * 367 / 750);
  filter: drop-shadow(calc(min(100vw, 440px) * 7 / 750) calc(min(100vw, 440px) * 8 / 750) 0 rgba(37, 28, 19, .13));
  animation: cat-listens 3.2s ease-in-out infinite;
}

.cat-pet-trigger--pressed {
  transform: translateY(calc(min(100vw, 440px) * 5 / 750)) scale(.965);
  filter: brightness(1.04);
}

.cat-pet-trigger--pressed .oracle-cat-sticker {
  animation-play-state: paused;
}

.cat-pet-spark {
  position: absolute;
  z-index: 3;
  color: #ef6b55;
  font-weight: 950;
  pointer-events: none;
  animation: pet-spark 1.6s ease-in-out infinite;
}

.cat-pet-spark--left {
  left: calc(min(100vw, 440px) * 30 / 750);
  top: calc(min(100vw, 440px) * 132 / 750);
  font-size: calc(min(100vw, 440px) * 35 / 750);
}

.cat-pet-spark--right {
  right: calc(min(100vw, 440px) * 28 / 750);
  top: calc(min(100vw, 440px) * 88 / 750);
  color: #8f5829;
  font-size: calc(min(100vw, 440px) * 30 / 750);
  animation-delay: -.72s;
}

.cat-pet-hint {
  position: relative;
  z-index: 3;
  margin-top: calc(min(100vw, 440px) * -14 / 750);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(min(100vw, 440px) * 11 / 750);
  color: #6f3f25;
  font-size: calc(min(100vw, 440px) * 21 / 750);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  animation: pet-hint 1.8s ease-in-out infinite;
}

.cat-pet-hand {
  padding: calc(min(100vw, 440px) * 5 / 750) calc(min(100vw, 440px) * 11 / 750);
  border: calc(min(100vw, 440px) * 2 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 999 / 750);
  background: #fff8e6;
  color: #8f3f2e;
  font-size: calc(min(100vw, 440px) * 16 / 750);
  letter-spacing: calc(min(100vw, 440px) * 1 / 750);
}

.another-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  line-height: 1;
}

.another-button {
  width: calc(min(100vw, 440px) * 330 / 750);
  height: calc(min(100vw, 440px) * 78 / 750);
  margin-top: calc(min(100vw, 440px) * 22 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 39 / 750);
  background: #fff8e6;
  color: #251c13;
  box-shadow: calc(min(100vw, 440px) * 5 / 750) calc(min(100vw, 440px) * 6 / 750) 0 #251c13;
  font-size: calc(min(100vw, 440px) * 22 / 750);
}

.draw-note {
  position: absolute;
  right: calc(min(100vw, 440px) * 34 / 750);
  bottom: calc(calc(min(100vw, 440px) * 24 / 750) + env(safe-area-inset-bottom));
  left: calc(min(100vw, 440px) * 34 / 750);
  color: rgba(37, 28, 19, .52);
  font-size: calc(min(100vw, 440px) * 18 / 750);
  font-weight: 760;
  letter-spacing: calc(min(100vw, 440px) * 1 / 750);
  text-align: center;
}

@keyframes tube-float {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50% { transform: translateX(-50%) translateY(calc(min(100vw, 440px) * -9 / 750)) rotate(2deg); }
}

@keyframes active-shake {
  from { transform: translateX(calc(-50% - calc(min(100vw, 440px) * 11 / 750))) translateY(calc(min(100vw, 440px) * 2 / 750)) rotate(-7deg); }
  to { transform: translateX(calc(-50% + calc(min(100vw, 440px) * 11 / 750))) translateY(calc(min(100vw, 440px) * -2 / 750)) rotate(7deg); }
}

@keyframes line-pulse {
  from { opacity: .22; transform: translateX(calc(min(100vw, 440px) * 7 / 750)) scale(.82); }
  to { opacity: 1; transform: translateX(calc(min(100vw, 440px) * -7 / 750)) scale(1.08); }
}

@keyframes tube-kick {
  from { transform: translateX(-50%) rotate(-5deg); }
  to { transform: translateX(-50%) rotate(5deg); }
}

@keyframes one-stick-flies {
  0% { opacity: 0; transform: translateX(-50%) translateY(calc(min(100vw, 440px) * 160 / 750)) rotate(-10deg) scale(.55); }
  34% { opacity: 1; }
  72% { transform: translateX(-50%) translateY(calc(min(100vw, 440px) * -65 / 750)) rotate(7deg) scale(1.03); }
  100% { opacity: 1; transform: translateX(-50%) translateY(calc(min(100vw, 440px) * -35 / 750)) rotate(2deg) scale(1); }
}

@keyframes paper-unfold {
  0% { opacity: 0; transform: scaleY(.08) rotate(-1deg); }
  62% { opacity: 1; transform: scaleY(1.04) rotate(.5deg); }
  100% { opacity: 1; transform: scaleY(1) rotate(-.3deg); }
}

@keyframes cat-invite-arrives {
  from { opacity: 0; transform: translateY(calc(min(100vw, 440px) * 24 / 750)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cat-listens {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(calc(min(100vw, 440px) * -6 / 750)) rotate(1deg); }
}

@keyframes pet-spark {
  0%, 100% { opacity: .34; transform: translateY(calc(min(100vw, 440px) * 5 / 750)) scale(.84) rotate(-10deg); }
  50% { opacity: 1; transform: translateY(calc(min(100vw, 440px) * -4 / 750)) scale(1.08) rotate(7deg); }
}

@keyframes pet-hint {
  0%, 100% { opacity: .68; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(calc(min(100vw, 440px) * -3 / 750)); }
}