#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 { background: #f7cf4b; color: #251c13; }
button { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; line-height: 1.25; }
button::after { border: 0; }
.bored-scroll { width: 100%; height: 100vh; background: #f7cf4b; }
.bored-page { position: relative; min-height: 100vh; box-sizing: border-box; padding-right: calc(min(100vw, 440px) * 26 / 750); padding-bottom: calc(calc(min(100vw, 440px) * 70 / 750) + env(safe-area-inset-bottom)); padding-left: calc(min(100vw, 440px) * 26 / 750); overflow: hidden; }
.paper-grain { position: fixed; inset: 0; opacity: .2; pointer-events: none; background-image: radial-gradient(circle, rgba(37,28,19,.35) calc(min(100vw, 440px) * 1.4 / 750), transparent calc(min(100vw, 440px) * 1.8 / 750)); background-size: calc(min(100vw, 440px) * 18 / 750) calc(min(100vw, 440px) * 18 / 750); }
.bored-nav { position: fixed; z-index: 30; top: 0; left: 0; width: 100%; box-sizing: border-box; background: rgba(247,207,75,.96); }
.bored-nav-back { position: absolute; left: calc(min(100vw, 440px) * 8 / 750); bottom: 0; width: calc(min(100vw, 440px) * 88 / 750); min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.bored-nav-back text:first-child { font-size: calc(min(100vw, 440px) * 55 / 750); font-weight: 500; line-height: .8; }
.bored-nav-title { position: absolute; right: calc(min(100vw, 440px) * 150 / 750); bottom: 0; left: calc(min(100vw, 440px) * 150 / 750); text-align: center; font-size: calc(min(100vw, 440px) * 27 / 750); font-weight: 950; }
.scene { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: calc(min(100vw, 440px) * 28 / 750); }
.eyebrow, .section-kicker { padding: calc(min(100vw, 440px) * 9 / 750) calc(min(100vw, 440px) * 18 / 750); border: calc(min(100vw, 440px) * 3 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 9 / 750); background: #fff7df; box-shadow: calc(min(100vw, 440px) * 4 / 750) calc(min(100vw, 440px) * 5 / 750) 0 #251c13; font-size: calc(min(100vw, 440px) * 16 / 750); font-weight: 950; letter-spacing: calc(min(100vw, 440px) * 3 / 750); transform: rotate(-2deg); }
.page-title, .section-title { margin-top: calc(min(100vw, 440px) * 28 / 750); font-size: calc(min(100vw, 440px) * 39 / 750); font-weight: 950; line-height: 1.25; text-align: center; }
.module-grid { width: 100%; margin-top: calc(min(100vw, 440px) * 50 / 750); padding: 0 calc(min(100vw, 440px) * 18 / 750) calc(min(100vw, 440px) * 60 / 750); box-sizing: border-box; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 0; row-gap: calc(min(100vw, 440px) * 48 / 750); align-items: start; }
.module-card { position: relative; min-height: calc(min(100vw, 440px) * 300 / 750); overflow: hidden; border: calc(min(100vw, 440px) * 3 / 750) solid #4b3523; border-radius: calc(min(100vw, 440px) * 10 / 750); background: #fff1c7; box-shadow: calc(min(100vw, 440px) * 8 / 750) calc(min(100vw, 440px) * 10 / 750) 0 rgba(72, 49, 27, .72); text-align: left; transform-origin: 50% 50%; }
.module-card::before { content: ''; position: absolute; z-index: 4; top: calc(min(100vw, 440px) * -7 / 750); left: 50%; width: calc(min(100vw, 440px) * 92 / 750); height: calc(min(100vw, 440px) * 23 / 750); background: rgba(255, 247, 223, .72); box-shadow: 0 calc(min(100vw, 440px) * 1 / 750) 0 rgba(37, 28, 19, .16); transform: translateX(-50%) rotate(-2deg); pointer-events: none; }
.module-card--travel { grid-column: 1 / 12; min-height: calc(min(100vw, 440px) * 330 / 750); margin-left: calc(min(100vw, 440px) * 10 / 750); background: linear-gradient(145deg, #b9dfd8 0%, #a8d3d0 100%); transform: rotate(-1.2deg); }
.module-card--youth { grid-column: 3 / 13; margin-top: 0; margin-left: 0; background: linear-gradient(145deg, #f5c5b9 0%, #eeb0a5 100%); transform: rotate(1.4deg); }
.module-card--exercise { grid-column: 1 / 11; margin-top: 0; margin-right: 0; background: linear-gradient(145deg, #f7dda1 0%, #efc981 100%); transform: rotate(-1.6deg); }
.module-card:active { transform: rotate(0) translateY(calc(min(100vw, 440px) * 6 / 750)) scale(.98); box-shadow: calc(min(100vw, 440px) * 5 / 750) calc(min(100vw, 440px) * 6 / 750) 0 rgba(37, 28, 19, .9); }
.module-sticker { position: absolute; right: calc(min(100vw, 440px) * -5 / 750); bottom: calc(min(100vw, 440px) * 20 / 750); width: 68%; height: 78%; }
.module-card--travel .module-sticker { right: calc(min(100vw, 440px) * 5 / 750); width: 56%; height: 92%; }
.module-copy { position: absolute; z-index: 2; top: calc(min(100vw, 440px) * 25 / 750); left: calc(min(100vw, 440px) * 24 / 750); width: 55%; display: flex; flex-direction: column; gap: calc(min(100vw, 440px) * 12 / 750); }
.module-title { font-size: calc(min(100vw, 440px) * 31 / 750); font-weight: 950; }
.module-note { color: #604831; font-size: calc(min(100vw, 440px) * 20 / 750); font-weight: 800; line-height: 1.45; }
.module-arrow { position: absolute; z-index: 2; right: calc(min(100vw, 440px) * 20 / 750); top: calc(min(100vw, 440px) * 18 / 750); font-size: calc(min(100vw, 440px) * 32 / 750); font-weight: 950; }
.transport-grid { width: 100%; margin-top: calc(min(100vw, 440px) * 165 / 750); display: flex; flex-direction: column; align-items: center; gap: calc(min(100vw, 440px) * 48 / 750); }
.transport-card { width: 86%; min-height: calc(min(100vw, 440px) * 330 / 750); padding: calc(min(100vw, 440px) * 16 / 750) calc(min(100vw, 440px) * 18 / 750) calc(min(100vw, 440px) * 22 / 750); border: calc(min(100vw, 440px) * 4 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 28 / 750); background: #fff7df; box-shadow: calc(min(100vw, 440px) * 8 / 750) calc(min(100vw, 440px) * 9 / 750) 0 #251c13; display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-size: calc(min(100vw, 440px) * 25 / 750); font-weight: 950; transform-origin: center; }
.transport-card:first-child { align-self: center; transform: rotate(2deg); }
.transport-card:last-child { align-self: center; margin-top: calc(min(100vw, 440px) * 100 / 750); transform: rotate(-2deg); }
.transport-card:active { transform: translateY(calc(min(100vw, 440px) * 5 / 750)) rotate(0deg) scale(.98); box-shadow: calc(min(100vw, 440px) * 4 / 750) calc(min(100vw, 440px) * 5 / 750) 0 #251c13; }
.transport-card image { width: 100%; height: calc(min(100vw, 440px) * 245 / 750); }
.result-sticker { width: calc(min(100vw, 440px) * 650 / 750); height: calc(min(100vw, 440px) * 390 / 750); margin-top: calc(min(100vw, 440px) * -6 / 750); }
.result-stack { width: 100%; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 45%; }
.result-motion-out { pointer-events: none; animation: result-card-fly-out 300ms cubic-bezier(.55, .02, .8, .3) both; }
.result-motion-in { animation: result-card-fly-in 420ms cubic-bezier(.2, .85, .25, 1.15) both; }
@keyframes result-card-fly-out {
  from { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
  to { opacity: 0; transform: translateX(-118%) rotate(-10deg) scale(.92); }
}
@keyframes result-card-fly-in {
  from { opacity: 0; transform: translateX(92%) rotate(8deg) scale(.92); }
  to { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}
.result-sticker--exercise { height: calc(min(100vw, 440px) * 360 / 750); }
.strength-scene { width: 100%; padding-left: 0; padding-right: 0; align-items: stretch; }
.strength-checkin, .strength-done { width: calc(100% - calc(min(100vw, 440px) * 64 / 750)); min-height: calc(min(100vw, 440px) * 92 / 750); box-sizing: border-box; margin: calc(min(100vw, 440px) * 28 / 750) calc(min(100vw, 440px) * 32 / 750) 0; padding: 0 calc(min(100vw, 440px) * 28 / 750); border: calc(min(100vw, 440px) * 4 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 999 / 750); background: #cfe5b5; box-shadow: calc(min(100vw, 440px) * 7 / 750) calc(min(100vw, 440px) * 8 / 750) 0 #251c13; display: flex; align-items: center; justify-content: center; color: #251c13; font-size: calc(min(100vw, 440px) * 25 / 750); font-weight: 950; text-align: center; }
.strength-done { box-shadow: none; }
.strength-heading { margin: calc(min(100vw, 440px) * 54 / 750) calc(min(100vw, 440px) * 42 / 750) 0; display: flex; flex-direction: column; gap: calc(min(100vw, 440px) * 12 / 750); }
.strength-heading text:first-child { font-size: calc(min(100vw, 440px) * 38 / 750); font-weight: 950; line-height: 1.2; }
.strength-heading text:last-child { color: #6a4d31; font-size: calc(min(100vw, 440px) * 20 / 750); font-weight: 800; line-height: 1.5; }
.strength-carousel { position: relative; left: calc(min(100vw, 440px) * -24 / 750); width: calc(100% + calc(min(100vw, 440px) * 48 / 750)); height: calc(min(100vw, 440px) * 790 / 750); margin-top: calc(min(100vw, 440px) * 22 / 750); overflow: visible; }
.strength-slide { box-sizing: border-box; padding: calc(min(100vw, 440px) * 20 / 750) 0 calc(min(100vw, 440px) * 30 / 750); display: flex; align-items: stretch; justify-content: center; }
.strength-slide .strength-card { opacity: .42; transform: translateY(calc(min(100vw, 440px) * 44 / 750)) scale(.94, .86); transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 320ms ease; }
.strength-slide.is-before .strength-card { transform-origin: left center; }
.strength-slide.is-after .strength-card { transform-origin: right center; }
.strength-slide.is-active .strength-card { opacity: 1; transform: translateY(0) scale(1); transform-origin: center center; }
.strength-card { position: relative; width: 100%; min-height: calc(min(100vw, 440px) * 720 / 750); box-sizing: border-box; padding: calc(min(100vw, 440px) * 28 / 750) calc(min(100vw, 440px) * 28 / 750) calc(min(100vw, 440px) * 30 / 750); border: calc(min(100vw, 440px) * 4 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 30 / 750); background: #fff7df; box-shadow: 0 calc(min(100vw, 440px) * 10 / 750) 0 #251c13; filter: none; display: flex; flex-direction: column; align-items: stretch; white-space: normal; overflow: hidden; }
.strength-card:nth-child(3n + 2) { background: #e2f0e9; }
.strength-card:nth-child(3n) { background: #f7d5c8; }
.strength-sticker { width: 100%; height: calc(min(100vw, 440px) * 300 / 750); margin-top: calc(min(100vw, 440px) * 4 / 750); }
.strength-title { margin-top: calc(min(100vw, 440px) * 12 / 750); font-size: calc(min(100vw, 440px) * 35 / 750); font-weight: 950; line-height: 1.25; }
.strength-heading { width: calc(100% - calc(min(100vw, 440px) * 208 / 750)); margin-left: auto; margin-right: auto; align-items: flex-start; text-align: left; }
.strength-heading text { display: block; width: 100%; text-align: left; }
.strength-checkin,
.strength-done {
  position: fixed;
  z-index: 20;
  right: calc(min(100vw, 440px) * 40 / 750);
  bottom: calc(calc(min(100vw, 440px) * 32 / 750) + env(safe-area-inset-bottom));
  left: calc(min(100vw, 440px) * 40 / 750);
  width: auto;
  margin: 0;
  box-sizing: border-box;
}
.strength-done { background: #b8d8e3; color: #304c54; border-color: #7899a3; }
.strength-meta { margin-top: calc(min(100vw, 440px) * 16 / 750); display: flex; flex-wrap: wrap; gap: calc(min(100vw, 440px) * 10 / 750); }
.strength-meta text { padding: calc(min(100vw, 440px) * 8 / 750) calc(min(100vw, 440px) * 13 / 750); border: calc(min(100vw, 440px) * 2 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 999 / 750); background: rgba(255,255,255,.72); font-size: calc(min(100vw, 440px) * 18 / 750); font-weight: 900; }
.strength-steps { margin-top: calc(min(100vw, 440px) * 22 / 750); display: flex; flex-direction: column; gap: calc(min(100vw, 440px) * 13 / 750); }
.strength-step { display: grid; grid-template-columns: calc(min(100vw, 440px) * 38 / 750) 1fr; gap: calc(min(100vw, 440px) * 12 / 750); align-items: start; font-size: calc(min(100vw, 440px) * 21 / 750); font-weight: 800; line-height: 1.4; }
.strength-step text:first-child { width: calc(min(100vw, 440px) * 36 / 750); height: calc(min(100vw, 440px) * 36 / 750); border-radius: 50%; background: #b9dfd8; display: flex; align-items: center; justify-content: center; font-size: calc(min(100vw, 440px) * 17 / 750); font-weight: 950; }
.strength-care { margin-top: auto; padding-top: calc(min(100vw, 440px) * 22 / 750); border-top: calc(min(100vw, 440px) * 3 / 750) dashed rgba(37,28,19,.45); color: #6a4d31; font-size: calc(min(100vw, 440px) * 18 / 750); font-weight: 800; line-height: 1.45; }
.strength-swipe-hint { margin: calc(min(100vw, 440px) * 20 / 750) 0 calc(env(safe-area-inset-bottom) + calc(min(100vw, 440px) * 30 / 750)); color: #6a4d31; font-size: calc(min(100vw, 440px) * 19 / 750); font-weight: 900; text-align: center; }
.result-card { width: 100%; box-sizing: border-box; margin-top: calc(min(100vw, 440px) * -18 / 750); padding: calc(min(100vw, 440px) * 30 / 750); border: calc(min(100vw, 440px) * 4 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 30 / 750); background: #fff7df; box-shadow: calc(min(100vw, 440px) * 9 / 750) calc(min(100vw, 440px) * 10 / 750) 0 #251c13; display: flex; flex-direction: column; align-items: center; }
.result-kicker { font-size: calc(min(100vw, 440px) * 18 / 750); font-weight: 900; color: #77583a; letter-spacing: calc(min(100vw, 440px) * 2 / 750); }
.result-title { margin-top: calc(min(100vw, 440px) * 15 / 750); font-size: calc(min(100vw, 440px) * 36 / 750); font-weight: 950; line-height: 1.3; text-align: center; }
.result-address { margin-top: calc(min(100vw, 440px) * 13 / 750); color: #6d5136; font-size: calc(min(100vw, 440px) * 20 / 750); font-weight: 800; line-height: 1.5; text-align: center; }
.fact-row { margin-top: calc(min(100vw, 440px) * 20 / 750); display: flex; gap: calc(min(100vw, 440px) * 12 / 750); }
.fact-row text { padding: calc(min(100vw, 440px) * 8 / 750) calc(min(100vw, 440px) * 15 / 750); border: calc(min(100vw, 440px) * 3 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 999 / 750); background: #bfe4ee; font-size: calc(min(100vw, 440px) * 17 / 750); font-weight: 900; }
.fact-row text:last-child { background: #ffc8b8; }
.mission { width: 100%; box-sizing: border-box; margin-top: calc(min(100vw, 440px) * 24 / 750); padding: calc(min(100vw, 440px) * 22 / 750); border-radius: calc(min(100vw, 440px) * 20 / 750); background: #ffe69a; display: flex; flex-direction: column; gap: calc(min(100vw, 440px) * 10 / 750); font-size: calc(min(100vw, 440px) * 23 / 750); font-weight: 850; line-height: 1.5; }
.mission-label { font-size: calc(min(100vw, 440px) * 17 / 750); font-weight: 950; color: #765532; }
.return-cue { margin-top: calc(min(100vw, 440px) * 18 / 750); font-size: calc(min(100vw, 440px) * 20 / 750); font-weight: 850; }
.map-action { height: calc(min(100vw, 440px) * 82 / 750); margin-top: calc(min(100vw, 440px) * 22 / 750); padding: 0 calc(min(100vw, 440px) * 30 / 750); border: calc(min(100vw, 440px) * 3 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 999 / 750); background: #bfe4ee; display: flex; align-items: center; justify-content: center; text-align: center; font-size: calc(min(100vw, 440px) * 22 / 750); font-weight: 950; line-height: 1.2; }
.step-list { width: 100%; margin-top: calc(min(100vw, 440px) * 22 / 750); display: flex; flex-direction: column; gap: calc(min(100vw, 440px) * 12 / 750); }
.step-row { display: grid; grid-template-columns: calc(min(100vw, 440px) * 44 / 750) 1fr; gap: calc(min(100vw, 440px) * 12 / 750); align-items: center; font-size: calc(min(100vw, 440px) * 22 / 750); font-weight: 800; line-height: 1.45; }
.step-row text:first-child { width: calc(min(100vw, 440px) * 42 / 750); height: calc(min(100vw, 440px) * 42 / 750); border: calc(min(100vw, 440px) * 3 / 750) solid #251c13; border-radius: 50%; background: #bfe4ee; display: flex; align-items: center; justify-content: center; font-weight: 950; }
.care-note { margin-top: calc(min(100vw, 440px) * 23 / 750); padding-top: calc(min(100vw, 440px) * 18 / 750); border-top: calc(min(100vw, 440px) * 3 / 750) dashed #a27f52; font-size: calc(min(100vw, 440px) * 19 / 750); font-weight: 750; line-height: 1.5; }
.primary-action, .secondary-action { width: 100%; height: calc(min(100vw, 440px) * 92 / 750); margin-top: calc(min(100vw, 440px) * 27 / 750); padding: 0 calc(min(100vw, 440px) * 28 / 750); border: calc(min(100vw, 440px) * 4 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 999 / 750); display: flex; align-items: center; justify-content: center; text-align: center; font-size: calc(min(100vw, 440px) * 24 / 750); font-weight: 950; line-height: 1.2; }
.primary-action { margin-top: calc(min(100vw, 440px) * 87 / 750); background: #ef6b55; color: #fff; box-shadow: calc(min(100vw, 440px) * 7 / 750) calc(min(100vw, 440px) * 8 / 750) 0 #251c13; }
.recommendation-end { position: fixed; z-index: 8; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + calc(min(100vw, 440px) * 36 / 750)); color: #251c13; font-size: calc(min(100vw, 440px) * 30 / 750); font-weight: 950; line-height: 1.4; text-align: center; }
.secondary-action { margin-top: calc(min(100vw, 440px) * 38 / 750); background: #fff7df; }
.text-action { min-height: calc(min(100vw, 440px) * 88 / 750); margin-top: calc(min(100vw, 440px) * 26 / 750); padding: 0 calc(min(100vw, 440px) * 24 / 750); display: flex; align-items: center; justify-content: center; text-align: center; font-size: calc(min(100vw, 440px) * 21 / 750); font-weight: 900; line-height: 1.2; text-decoration: underline; }
.done-pill { width: 100%; box-sizing: border-box; margin-top: calc(min(100vw, 440px) * 27 / 750); padding: calc(min(100vw, 440px) * 25 / 750); border: calc(min(100vw, 440px) * 4 / 750) solid #251c13; border-radius: calc(min(100vw, 440px) * 999 / 750); background: #d8e9bd; text-align: center; font-size: calc(min(100vw, 440px) * 25 / 750); font-weight: 950; }
.local-note { margin-top: calc(min(100vw, 440px) * 17 / 750); color: #654b31; font-size: calc(min(100vw, 440px) * 18 / 750); font-weight: 800; }
button[disabled] { opacity: .48; }