.chapter-modal.is-playing {
  padding: 8px 10px;
}
.chapter-modal.is-playing .modal-head {
  margin-bottom: 4px;
}
.chapter-modal.is-playing .modal-intro {
  display: none;
}
.chapter-modal.is-playing .chapter-energy {
  display: none;
}
.chapter-energy {
  display: flex;
  align-items: center;
  justify-content: center;
  --xhs-row-gap:12px;
  --xhs-column-gap:12px;
  grid-gap: 12px;
  gap: 12px;
  flex: none;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 2px solid #bca3be;
  border-radius: 22px;
  background: linear-gradient(#fffbed, #ede2f2);
  box-shadow: inset 0 2px #fff, 0 3px #bca3be;
  text-align: center;
}
.chapter-energy > div {
  display: grid;
  justify-items: center;
  --xhs-row-gap:4px;
  --xhs-column-gap:4px;
  grid-gap: 4px;
  gap: 4px;
}
.chapter-energy-count,
.chapter-reserve,
.chapter-energy-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  --xhs-row-gap:5px;
  --xhs-column-gap:5px;
  grid-gap: 5px;
  gap: 5px;
}
.chapter-energy-count {
  font-size: 16px;
}
.chapter-energy small {
  font-size: 10px;
  color: #6e5879;
}
.chapter-reserve {
  font-size: 12px;
  font-weight: 900;
}
.chapter-energy .game-action {
  display: flex;
  align-items: center;
  --xhs-row-gap:3px;
  --xhs-column-gap:3px;
  grid-gap: 3px;
  gap: 3px;
  padding: 5px 9px;
  font-size: 12px;
}
.chapter-energy .game-action img {
  --xhs-width:24px;
  width: 24px;
  --xhs-height:24px;
  height: 24px;
  object-fit: contain;
}
.chapter-energy-cost {
  font-size: 12px;
  font-weight: 900;
  color: #72566e;
}
@media (max-width: 360px) {
  .chapter-energy {
    --xhs-row-gap:7px;
    --xhs-column-gap:7px;
    grid-gap: 7px;
    gap: 7px;
    padding: 8px;
  }
  .chapter-energy-count {
    font-size: 14px;
  }
  .chapter-reserve {
    font-size: 11px;
  }
  .chapter-energy small {
    font-size: 9px;
  }
}
.chapter-modal.is-playing #chapterClose {
  display: none;
}
.chapter-modal.is-playing .modal-head {
  position: relative;
  min-height: 44px;
  padding-left: 52px;
  padding-right: 10px;
  justify-content: center;
  text-align: center;
}
.chapter-modal .chapter-pause-button {
  position: absolute;
  left: 0;
  top: 0;
  --xhs-width:44px;
  width: 44px;
  --xhs-height:44px;
  height: 44px;
  padding: 0;
  border-radius: 16px;
}
.pause-icon {
  display: block;
  position: relative;
  --xhs-width:17px;
  width: 17px;
  --xhs-height:19px;
  height: 19px;
  margin: auto;
}
.pause-icon:before,
.pause-icon:after {
  content: "";
  position: absolute;
  top: 0;
  --xhs-width:6px;
  width: 6px;
  --xhs-height:19px;
  height: 19px;
  border-radius: 3px;
  background: #76516e;
  box-shadow: 0 1px #fff;
}
.pause-icon:before {
  left: 0;
}
.pause-icon:after {
  right: 0;
}
.chapter-pause {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  padding: 24px;
  background: rgba(73, 56, 72, .533);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.chapter-pause-card {
  --xhs-width:var(--xhs-local-5);
  width: var(--xhs-local-5);
  width: min(100%, 280px);
  padding: 30px 25px;
  display: grid;
  --xhs-row-gap:16px;
  --xhs-column-gap:16px;
  grid-gap: 16px;
  gap: 16px;
  text-align: center;
}
.chapter-pause-card h3 {
  margin: 0 0 5px;
  font-size: 24px;
}
.chapter-pause-card button {
  min-height: 48px;
  border-radius: 20px;
  font-size: 16px;
}
.chapter-scene.paused * {
  animation-play-state: paused !important;
  transition: none !important;
}
.chapter-group button.locked {
  opacity: .62;
}
.chapter-briefing {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  padding: 19px;
  background: rgba(72, 58, 80, .533);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.chapter-briefing-card {
  position: relative;
  --xhs-width:100%;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow: auto;
  padding: 22px 18px 18px;
  border: 3px solid #b093a6;
  border-radius: 22px;
  background: #fff8ed;
  box-shadow: 0 8px 0 rgba(111, 82, 99, .47), 0 15px 35px rgba(60, 43, 67, .333);
  text-align: center;
}
.chapter-briefing-card > .close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
}
.chapter-briefing-card > small {
  font-size: 11px;
  letter-spacing: .15em;
  color: #97727b;
}
.chapter-briefing-card > h3 {
  margin: 6px 0;
  font-size: 24px;
  color: #73566f;
}
.chapter-briefing-card > p {
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0 12px;
}
.chapter-star-rewards {
  display: grid;
  --xhs-row-gap:8px;
  --xhs-column-gap:8px;
  grid-gap: 8px;
  gap: 8px;
}
.chapter-star-reward {
  display: flex;
  align-items: center;
  --xhs-width:100%;
  width: 100%;
  --xhs-row-gap:13px;
  --xhs-column-gap:13px;
  grid-gap: 13px;
  gap: 13px;
  padding: 12px;
  border: 2px solid #e1ccce;
  border-radius: 13px;
  background: #fffdf8;
  text-align: left;
}
.chapter-star-reward.current {
  border-color: #d2a36d;
  background: #fff0d7;
  box-shadow: 0 0 0 2px rgba(237, 206, 157, .267);
}
.chapter-star-reward:disabled {
  opacity: .6;
  cursor: default;
}
.chapter-star-reward > strong {
  --xhs-width:70px;
  width: 70px;
  flex: none;
  color: #dca45d;
  font-size: 21px;
  letter-spacing: 1px;
}
.chapter-star-reward > span {
  font-size: 13px;
  line-height: 1.65;
  color: #6e546b;
  font-weight: 700;
}
.chapter-star-reward small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #806d7c;
}
.chapter-briefing-card > .chapter-reward-note {
  font-size: 10px;
  line-height: 1.7;
  color: #957f8a;
  margin: 12px 0;
}
.chapter-begin {
  --xhs-width:100%;
  width: 100%;
  min-height: 43px;
  border: 2px solid #a88f9d;
  border-radius: 12px;
  background: #e6edda;
  color: #536d56;
  font-weight: 900;
}
.chapter-begin:disabled {
  background: #e9e1e5;
  color: #9f919c;
  cursor: default;
}
.chapter-play {
  --xhs-row-gap:5px;
  --xhs-column-gap:5px;
  grid-gap: 5px;
  gap: 5px;
  overflow: visible;
  align-items: center;
}
.chapter-scene {
  position: relative;
  flex: none;
  --xhs-width:var(--xhs-local-6);
  width: var(--xhs-local-6);
  width: min(100%, calc(56.28dvh - 68px), 402px);
  --xhs-aspect-ratio:941/1672;
  aspect-ratio: 941/1672;
  overflow: hidden;
  border-radius: 15px;
  background: #f3e6de;
  isolation: isolate;
}
.chapter-background,
.chapter-counter-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  pointer-events: none;
}
.chapter-background {
  z-index: 0;
}
.chapter-status {
  --xhs-width:100%;
  width: 100%;
  display: grid;
  --xhs-row-gap:2px;
  --xhs-column-gap:2px;
  grid-gap: 2px;
  gap: 2px;
  text-align: center;
}
.chapter-status .chapter-goal {
  padding: 4px;
  border: 1px solid #d8c0b3;
  border-radius: 8px;
  background: rgba(255, 249, 237, .933);
  font-size: 10px;
}
.chapter-scene .chapter-customers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}
.chapter-scene .challenge-customer,
.delivery-guests .challenge-customer {
  position: absolute;
  left: var(--guest-x);
  top: 18%;
  --xhs-width:var(--guest-width,28%);
  width: var(--guest-width,28%);
  --xhs-height:31%;
  height: 31%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
  background: none;
  display: block;
  overflow: visible;
  pointer-events: auto;
}
:is(.chapter-scene, .delivery-guests) .challenge-customer {
  position: absolute;
  left: var(--guest-x);
  top: 18%;
  --xhs-width:var(--guest-width,28%);
  width: var(--guest-width,28%);
  --xhs-height:31%;
  height: 31%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
  background: none;
  display: block;
  overflow: visible;
  pointer-events: auto;
}
.chapter-scene .challenge-customer.selected,
.delivery-guests .challenge-customer.selected {
  background: none;
}
:is(.chapter-scene, .delivery-guests) .challenge-customer.selected {
  background: none;
}
.chapter-scene .challenge-guest,
.delivery-guests .challenge-guest {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  inset: auto 0 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px #715a6c55);
  animation: chapter-guest-enter .6s ease-out both;
}
:is(.chapter-scene, .delivery-guests) .challenge-guest {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  inset: auto 0 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px #715a6c55);
  animation: chapter-guest-enter .6s ease-out both;
}
.chapter-scene .challenge-customer.selected .challenge-guest,
.delivery-guests .challenge-customer.selected .challenge-guest {
  filter: drop-shadow(0 0 5px #fff5a3);
}
:is(.chapter-scene, .delivery-guests) .challenge-customer.selected .challenge-guest {
  filter: drop-shadow(0 0 5px #fff5a3);
}
.chapter-scene .challenge-customer.serving .challenge-guest,
.delivery-guests .challenge-customer.serving .challenge-guest {
  animation: chapter-guest-leave .75s ease-in forwards;
}
:is(.chapter-scene, .delivery-guests) .challenge-customer.serving .challenge-guest {
  animation: chapter-guest-leave .75s ease-in forwards;
}
.chapter-order {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 82%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --xhs-row-gap:3px;
  --xhs-column-gap:3px;
  grid-gap: 3px;
  gap: 3px;
  padding: 4px 3px 10px;
  border: 2px solid #b294a8;
  border-radius: 13px;
  background: #fffaf2;
  box-shadow: 0 2px 0 #c6abbd;
}
.chapter-order:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 46%;
  --xhs-width:8px;
  width: 8px;
  --xhs-height:8px;
  height: 8px;
  background: #fffaf2;
  border-right: 2px solid #b294a8;
  border-bottom: 2px solid #b294a8;
  --xhs-transform:rotate(45deg);
  transform: rotate(45deg);
}
.chapter-order-items {
  display: grid;
  grid-template-columns: repeat(var(--order-count), minmax(0, 1fr));
  --xhs-width:100%;
  width: 100%;
  --xhs-row-gap:3px;
  --xhs-column-gap:3px;
  grid-gap: 3px;
  gap: 3px;
}
.chapter-order-item {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  --xhs-row-gap:2px;
  --xhs-column-gap:2px;
  grid-gap: 2px;
  gap: 2px;
}
.chapter-scene .chapter-order .challenge-drink,
.delivery-guests .chapter-order .challenge-drink {
  --xhs-width:34px;
  width: 34px;
  max-width: 100%;
  --xhs-height:42px;
  height: 42px;
  object-fit: contain;
}
:is(.chapter-scene, .delivery-guests) .chapter-order .challenge-drink {
  --xhs-width:34px;
  width: 34px;
  max-width: 100%;
  --xhs-height:42px;
  height: 42px;
  object-fit: contain;
}
.chapter-scene .chapter-order b,
.delivery-guests .chapter-order b {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
:is(.chapter-scene, .delivery-guests) .chapter-order b {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
.chapter-order-item em {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  --xhs-width:19px;
  width: 19px;
  --xhs-height:19px;
  height: 19px;
  border-radius: 50%;
  background: #6e9e73;
  color: #fff;
  font: 900 14px/19px sans-serif;
  text-align: center;
}
.chapter-order-item.received em {
  display: block;
}
.chapter-order-item.received > img,
.chapter-order-item.received > b {
  opacity: .45;
}
.chapter-scene .chapter-order .chapter-patience,
.delivery-guests .chapter-order .chapter-patience {
  left: 6%;
  bottom: 2px;
  --xhs-height:5px;
  height: 5px;
  border-radius: 4px;
  max-width: 88%;
  background: #86bc93;
  transition: width .25s linear, background .2s;
}
:is(.chapter-scene, .delivery-guests) .chapter-order .chapter-patience {
  left: 6%;
  bottom: 2px;
  --xhs-height:5px;
  height: 5px;
  border-radius: 4px;
  max-width: 88%;
  background: #86bc93;
  transition: width .25s linear, background .2s;
}
.chapter-scene .chapter-order .chapter-patience.orange,
.delivery-guests .chapter-order .chapter-patience.orange {
  background: #e5a246;
}
:is(.chapter-scene, .delivery-guests) .chapter-order .chapter-patience.orange {
  background: #e5a246;
}
.chapter-scene .chapter-order .chapter-patience.red,
.delivery-guests .chapter-order .chapter-patience.red {
  background: #d96565;
}
:is(.chapter-scene, .delivery-guests) .chapter-order .chapter-patience.red {
  background: #d96565;
}
.chapter-scene .chapter-counter-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}
.chapter-counter-layer button {
  pointer-events: auto;
  touch-action: manipulation;
}
.chapter-scene .chapter-machines,
.chapter-scene .chapter-ingredients {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  pointer-events: none;
}
.chapter-scene .chapter-machine {
  position: absolute;
  z-index: 2;
  left: var(--machine-x);
  top: 33.4%;
  --xhs-width:34.5%;
  width: 34.5%;
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  transform-origin: center bottom;
  transition: transform .12s ease;
}
.chapter-scene .chapter-machine {
  --xhs-height:22.65%;
  height: 22.65%;
}
.chapter-machine > img {
  display: block;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}
.chapter-machine.pressed > img {
  --xhs-transform:scale(1.13,.76);
  transform: scale(1.13, .76);
}
.chapter-machine > img {
  transform-origin: center bottom;
  transition: transform .1s ease-out;
}
.chapter-scene:not(.is-finished) .chapter-machine.brewing:not(.pressed) > img {
  animation: machine-brew-rattle .3s steps(2, end) infinite;
}
@keyframes machine-brew-rattle {
  0%, 100% {
    --xhs-transform:translateX(-.4px) rotate(-.35deg);
    transform: translateX(-.4px) rotate(-.35deg);
    filter: drop-shadow(-.4px 0 #865f4955);
  }
  50% {
    --xhs-transform:translateX(.4px) rotate(.35deg);
    transform: translateX(.4px) rotate(.35deg);
    filter: drop-shadow(.4px 0 #865f4955);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-scene .chapter-machine.brewing > img {
    animation: none !important;
  }
  .chapter-machine > img {
    transition: none;
  }
}
.chapter-scene .chapter-machine:disabled {
  opacity: 1;
}
.chapter-machine.locked > img {
  visibility: hidden;
}
.chapter-machine.locked {
  pointer-events: none;
}
.chapter-progress {
  position: absolute;
  left: 50%;
  bottom: 2%;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
  min-width: 22px;
  padding: 2px;
  border: 1px solid #c3a697;
  border-radius: 7px;
  background: #fff0bd;
  color: #695469;
  font-size: 9px !important;
  text-align: center;
  pointer-events: none;
}
.chapter-steam {
  position: absolute;
  left: 33%;
  top: -10%;
  --xhs-width:42%;
  width: 42%;
  --xhs-height:22%;
  height: 22%;
  pointer-events: none;
}
.chapter-steam i {
  position: absolute;
  bottom: 0;
  --xhs-width:22%;
  width: 22%;
  --xhs-height:65%;
  height: 65%;
  border-left: 3px solid #fffdf2;
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(1px 1px 2px #8d758b);
}
.chapter-steam i {
  border-left-width: 2px;
  filter: blur(.35px) drop-shadow(1px 1px 1px #8d758b55);
}
.chapter-cup.has-tea:not(.leaving):before {
  content: "";
  position: absolute;
  z-index: 6;
  left: 25%;
  top: 28%;
  --xhs-width:50%;
  width: 50%;
  --xhs-height:42%;
  height: 42%;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 22% 75%,
      #fff4daba 0 2px,
      transparent 3px),
    radial-gradient(
      circle at 70% 50%,
      #fff4daaa 0 1px,
      transparent 2px),
    radial-gradient(
      circle at 42% 25%,
      #fff4daaa 0 1.5px,
      transparent 2.5px);
  animation: tea-bubbles .65s ease-out both;
}
.chapter-cup.has-tea.capping:before {
  top: 8%;
  right: -12%;
  bottom: 12%;
  left: -12%;
  top: 8%;
  right: -12%;
  bottom: 12%;
  left: -12%;
  --xhs-width:auto;
  width: auto;
  --xhs-height:auto;
  height: auto;
  background:
    radial-gradient(
      ellipse,
      #ffedb566,
      transparent 65%);
  animation: tea-finish .5s ease-out both;
}
.chapter-scene.paused *,
.chapter-scene.paused *:before,
.chapter-scene.paused *:after {
  animation-play-state: paused !important;
}
@keyframes tea-bubbles {
  from {
    opacity: 0;
    --xhs-translate:0 8px;
    translate: 0 8px;
  }
  30% {
    opacity: 1;
  }
  to {
    opacity: 0;
    --xhs-translate:0 -10px;
    translate: 0 -10px;
  }
}
@supports not (translate:0px) {
  @keyframes tea-bubbles {
    from {
      opacity: 0;
      --xhs-translate:0 8px;
      translate: 0 8px;
      transform: translate(0, 8px) rotate(var(--xhs-rotate,0deg)) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    30% {
      opacity: 1;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(var(--xhs-rotate,0deg)) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
    to {
      opacity: 0;
      --xhs-translate:0 -10px;
      translate: 0 -10px;
      transform: translate(0, -10px) rotate(var(--xhs-rotate,0deg)) scale(1, 1) var(--xhs-transform,translate(0px,0px));
    }
  }
}
@keyframes tea-finish {
  from {
    opacity: 0;
    --xhs-scale:.7;
    scale: .7;
  }
  45% {
    opacity: 1;
    --xhs-scale:1.1;
    scale: 1.1;
  }
  to {
    opacity: 0;
    --xhs-scale:1.3;
    scale: 1.3;
  }
}
@supports not (translate:0px) {
  @keyframes tea-finish {
    from {
      opacity: 0;
      --xhs-scale:.7;
      scale: .7;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(var(--xhs-rotate,0deg)) scale(.7, .7) var(--xhs-transform,translate(0px,0px));
    }
    45% {
      opacity: 1;
      --xhs-scale:1.1;
      scale: 1.1;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(var(--xhs-rotate,0deg)) scale(1.1, 1.1) var(--xhs-transform,translate(0px,0px));
    }
    to {
      opacity: 0;
      --xhs-scale:1.3;
      scale: 1.3;
      transform: translate(var(--xhs-translate-x,0px), var(--xhs-translate-y,0px)) rotate(var(--xhs-rotate,0deg)) scale(1.3, 1.3) var(--xhs-transform,translate(0px,0px));
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-steam i,
  .chapter-cup:before {
    animation: none !important;
    opacity: 0 !important;
  }
}
.chapter-steam i:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}
.chapter-steam i:nth-child(2) {
  left: 40%;
  animation-delay: .45s;
}
.chapter-steam i:nth-child(3) {
  left: 70%;
  animation-delay: .9s;
}
.brewing .chapter-steam i {
  animation-name: chapter-steam;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
.chapter-stock-flag {
  z-index: 6;
  white-space: nowrap;
  min-width: 30px;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 2px rgba(121, 87, 92, .208);
  pointer-events: auto;
}
.chapter-stock-flag:after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  bottom: -5px;
  border: 4px solid transparent;
  border-top-color: #c3a697;
  border-bottom: 0;
}
.chapter-machine .chapter-stock-flag {
  top: 28%;
  bottom: auto;
  padding: 3px 5px;
}
.chapter-bin .chapter-progress.chapter-stock-flag {
  top: -12px;
  bottom: auto;
  padding: 2px 5px;
}
.chapter-modal.is-playing .chapter-scene {
  --xhs-width:var(--xhs-local-7);
  width: var(--xhs-local-7);
  width: min(100%, calc((100dvh - var(--safe-area-inset-top,env(safe-area-inset-top,0px)) - var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) - 146px)*.5628), 402px);
}
.chapter-bin.brewing > img {
  animation: pearl-boil .4s ease-in-out infinite alternate;
}
.chapter-bin .chapter-steam {
  top: -70%;
  --xhs-height:90%;
  height: 90%;
  left: 18%;
  --xhs-width:60%;
  width: 60%;
  z-index: 5;
}
@keyframes pearl-boil {
  from {
    --xhs-transform:translateY(0) rotate(-1deg);
    transform: translateY(0) rotate(-1deg);
  }
  to {
    --xhs-transform:translateY(-2px) rotate(1deg);
    transform: translateY(-2px) rotate(1deg);
    filter: brightness(1.13);
  }
}
.chapter-scene .chapter-bin {
  position: absolute;
  z-index: 3;
  left: var(--bin-x);
  top: var(--bin-y);
  --xhs-width:29.7%;
  width: 29.7%;
  --xhs-height:6.7%;
  height: 6.7%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
}
.chapter-bin > img {
  position: absolute;
  left: 0;
  top: -30%;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:160%;
  height: 160%;
  pointer-events: none;
}
.chapter-bin.locked > img {
  display: none;
}
.chapter-scene .chapter-bin:disabled {
  opacity: 1;
}
.chapter-bin.added > img {
  filter: brightness(.9);
}
.chapter-bin .chapter-progress {
  bottom: -3%;
}
.chapter-scene .chapter-bin.cream {
  left: 78.6%;
  top: 78.6%;
  --xhs-width:23.4%;
  width: 23.4%;
  --xhs-height:13.2%;
  height: 13.2%;
}
.chapter-bin.cream > img {
  top: 0;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
}
.chapter-scene .chapter-cup {
  position: absolute;
  z-index: 5;
  top: calc(88.8% - var(--xhs-local-8));
  top: calc(88.8% - max(13.06%, 60.06px));
  left: calc(14.45% - var(--xhs-local-9));
  left: calc(14.45% - max(8.5%, 22px));
  --xhs-width:var(--xhs-local-10);
  width: var(--xhs-local-10);
  width: max(17%, 44px);
  --xhs-aspect-ratio:2/3;
  aspect-ratio: 2/3;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-select: none;
}
.chapter-scene .chapter-cup-secondary {
  left: calc(40.4% - var(--xhs-local-9));
  left: calc(40.4% - max(8.5%, 22px));
}
.chapter-scene .chapter-cup-third {
  left: calc(66.35% - var(--xhs-local-9));
  left: calc(66.35% - max(8.5%, 22px));
}
.chapter-cup.is-active:after {
  content: "";
  position: absolute;
  z-index: 7;
  left: 10%;
  right: 10%;
  bottom: 1%;
  --xhs-height:12%;
  height: 12%;
  border: 3px solid #fff4ba;
  border-radius: 50%;
  background: rgba(255, 212, 106, .533);
  box-shadow:
    0 0 0 3px #ba7098,
    0 0 12px 6px rgba(255, 227, 148, .867),
    inset 0 0 6px #fffbe8;
  pointer-events: none;
}
.chapter-scene .chapter-cup.dragging {
  z-index: 7;
  --xhs-transform:translate(var(--drag-x,0px),var(--drag-y,0px));
  transform: translate(var(--drag-x,0px), var(--drag-y,0px));
  cursor: grabbing;
  filter: drop-shadow(0 5px 5px #71536a77);
}
.chapter-discard-zone {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  --xhs-height:calc(48px + var(--safe-area-inset-bottom,0px));
  height: calc(48px + var(--safe-area-inset-bottom,0px));
  height: calc(48px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  min-height: 48px;
  padding-bottom: var(--safe-area-inset-bottom,0px);
  padding-bottom: var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  --xhs-row-gap:8px;
  --xhs-column-gap:8px;
  grid-gap: 8px;
  gap: 8px;
  border: 2px dashed #c47b72;
  border-radius: 11px;
  background: rgba(255, 240, 223, .93);
  color: #9e5654;
  box-shadow: 0 0 16px rgba(255, 211, 166, .667);
  pointer-events: none;
  transition: background .12s, box-shadow .12s;
}
.chapter-discard-zone > span {
  font-size: 24px;
  line-height: 1;
}
.chapter-discard-zone > b {
  font-size: 12px;
}
.chapter-discard-zone.is-over {
  border-style: solid;
  background: #ffdfc4;
  color: #80443f;
  box-shadow: 0 0 0 3px rgba(255, 212, 154, .6), 0 0 22px #ffbc75;
}
.chapter-scene.is-dragging .chapter-cup-label {
  visibility: hidden;
}
.chapter-scene .chapter-cup:disabled {
  opacity: 1;
  background: none;
}
.cup-visual > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  pointer-events: none;
}
.cup-interior {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  clip-path: polygon(20% 22%, 80% 22%, 72% 86%, 67% 90%, 33% 90%, 28% 86%);
  pointer-events: none;
}
.cup-liquid-body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  clip-path: inset(var(--milk-line,91%) 0 0 0);
  transition: clip-path .25s linear;
  opacity: 0;
}
.cup-liquid-surface {
  position: absolute;
  left: 50%;
  top: var(--milk-line,91%);
  --xhs-width:var(--milk-width,41%);
  width: var(--milk-width,41%);
  --xhs-height:5%;
  height: 5%;
  --xhs-transform:translate(-50%,-50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #ffe9c6;
  background: #d9a770 var(--xhs-image-281) center 25% / 150% 800%;
  opacity: 0;
  transition: top .25s linear, width .25s linear;
}
.pouring .cup-liquid-body,
.pouring .cup-liquid-surface,
.has-tea .cup-liquid-body,
.has-tea .cup-liquid-surface {
  opacity: 1;
}
.cup-pour-stream {
  position: absolute;
  left: 48.5%;
  top: 0;
  --xhs-width:3%;
  width: 3%;
  --xhs-height:var(--milk-line,91%);
  height: var(--milk-line,91%);
  border-radius: 99px;
  background:
    linear-gradient(
      90deg,
      #bb8251,
      #f8d3a0 45%,
      #c68a56);
  opacity: 0;
  pointer-events: none;
}
.pouring .cup-pour-stream {
  opacity: .9;
  animation: cup-pour .4s linear infinite;
}
.chapter-cup .cup-model {
  opacity: 0;
  object-fit: contain;
  transition: opacity .25s;
}
.chapter-cup.modeled .cup-model {
  opacity: 1;
}
.chapter-cup.modeled .cup-shell,
.chapter-cup.modeled .cup-interior {
  opacity: 0;
}
.chapter-cup.capping {
  animation: cup-ready .5s ease-out both;
}
.chapter-cup.leaving {
  animation: chapter-deliver .75s ease-in forwards;
}
.cup-toppings {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  clip-path: polygon(22% 26%, 78% 26%, 70% 85%, 66% 89%, 34% 89%, 30% 85%);
  pointer-events: none;
}
.cup-stars {
  position: absolute;
  top: -12%;
  right: -15%;
  bottom: -12%;
  left: -15%;
  top: -12%;
  right: -15%;
  bottom: -12%;
  left: -15%;
  pointer-events: none;
}
.cup-stars i {
  position: absolute;
  opacity: 0;
  color: #fff7bd;
  font: normal 21px/1 sans-serif;
  text-shadow: 0 0 5px #f8a9d0, 0 0 10px #ffd779;
}
.cup-stars i:nth-child(1) {
  left: 7%;
  top: 30%;
  --dx:-22px;
  --dy:-30px;
}
.cup-stars i:nth-child(2) {
  right: 0;
  top: 8%;
  --dx:19px;
  --dy:-27px;
}
.cup-stars i:nth-child(3) {
  left: 44%;
  top: -8%;
  --dx:5px;
  --dy:-36px;
}
.cup-stars i:nth-child(4) {
  left: 13%;
  top: 68%;
  --dx:-21px;
  --dy:-16px;
}
.cup-stars i:nth-child(5) {
  right: 6%;
  top: 61%;
  --dx:22px;
  --dy:-12px;
}
.leaving .cup-stars i {
  animation: chapter-spark .6s ease-out both;
}
.chapter-cup-label {
  position: absolute;
  left: 31%;
  top: 92%;
  --xhs-width:45%;
  width: 45%;
  font-size: 9px;
  color: #785b63;
  line-height: 1.4;
  text-align: center;
}
.chapter-status .chapter-combo {
  font-size: 9px;
  color: #8c5b68;
}
.chapter-result p {
  margin: 0 0 10px;
}
.chapter-result button {
  min-height: 44px;
  padding: 6px 18px;
  border-radius: 16px;
}
.chapter-scene .chapter-result {
  position: absolute;
  z-index: 10;
  left: 8%;
  right: 8%;
  top: 22%;
  box-shadow: 0 0 0 100vmax rgba(57, 45, 66, .42);
  text-align: center;
}
@media (max-height: 650px) {
  .chapter-scene .chapter-order b,
  .delivery-guests .chapter-order b {
    font-size: 10px;
  }
  :is(.chapter-scene, .delivery-guests) .chapter-order b {
    font-size: 10px;
  }
  .chapter-scene .chapter-order .challenge-drink,
  .delivery-guests .chapter-order .challenge-drink {
    --xhs-height:36px;
    height: 36px;
    --xhs-width:30px;
    width: 30px;
  }
  :is(.chapter-scene, .delivery-guests) .chapter-order .challenge-drink {
    --xhs-height:36px;
    height: 36px;
    --xhs-width:30px;
    width: 30px;
  }
  .chapter-order {
    --xhs-row-gap:2px;
    --xhs-column-gap:2px;
    grid-gap: 2px;
    gap: 2px;
    padding-top: 3px;
  }
}
@keyframes chapter-steam {
  0% {
    opacity: 0;
    --xhs-transform:translateY(7px) scale(.7);
    transform: translateY(7px) scale(.7);
  }
  25% {
    opacity: .9;
  }
  100% {
    opacity: 0;
    --xhs-transform:translateY(-32px) scale(1.35);
    transform: translateY(-32px) scale(1.35);
  }
}
@keyframes cup-add {
  from {
    --xhs-transform:translateY(-16%);
    transform: translateY(-16%);
    opacity: 0;
  }
  70% {
    --xhs-transform:translateY(2%);
    transform: translateY(2%);
    opacity: 1;
  }
  to {
    --xhs-transform:translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes cup-pour {
  50% {
    --xhs-transform:scaleX(.75);
    transform: scaleX(.75);
    opacity: .7;
  }
}
@keyframes cup-ready {
  50% {
    --xhs-transform:translateY(-3%) scale(1.04);
    transform: translateY(-3%) scale(1.04);
    filter: drop-shadow(0 0 4px #ffe29c);
  }
}
@keyframes chapter-deliver {
  0% {
    --xhs-transform:translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  100% {
    --xhs-transform:translateY(-38%) scale(.78);
    transform: translateY(-38%) scale(.78);
    opacity: 0;
  }
}
@keyframes chapter-spark {
  0% {
    opacity: 0;
    --xhs-transform:scale(.4);
    transform: scale(.4);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    --xhs-transform:translate(var(--dx),var(--dy)) scale(1.4) rotate(40deg);
    transform: translate(var(--dx), var(--dy)) scale(1.4) rotate(40deg);
  }
}
@keyframes chapter-guest-enter {
  from {
    --xhs-transform:translateY(-16%);
    transform: translateY(-16%);
    opacity: 0;
  }
  to {
    --xhs-transform:translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes chapter-guest-leave {
  to {
    --xhs-transform:translateY(-16%);
    transform: translateY(-16%);
    opacity: 0;
  }
}
.chapter-tools {
  position: absolute;
  z-index: 22;
  right: calc(10px + var(--safe-area-inset-right,0px));
  right: calc(10px + var(--safe-area-inset-right,env(safe-area-inset-right,0px)));
  top: calc(8px + var(--safe-area-inset-top,0px));
  top: calc(8px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  display: flex;
  --xhs-row-gap:4px;
  --xhs-column-gap:4px;
  grid-gap: 4px;
  gap: 4px;
  --xhs-width:100px;
  width: 100px;
  --xhs-height:48px;
  height: 48px;
}
.chapter-tools > button {
  display: flex;
  align-items: center;
  justify-content: center;
  --xhs-width:48px;
  width: 48px;
  min-width: 44px;
  min-height: 44px;
  padding: 1px;
  border: 1px solid #d8b8c3;
  border-radius: 16px;
  background: linear-gradient(#fff9ef, #f6e6eb);
  box-shadow: inset 0 2px #fff, 0 2px #c4a4b4;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-select: none;
}
.chapter-tools > button > img {
  --xhs-width:40px;
  width: 40px;
  --xhs-height:40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 1px #b491a944);
}
.chapter-tools > button:disabled {
  opacity: .5;
}
.chapter-tools > button.dragging > img {
  opacity: .25;
}
.chapter-modal.is-playing.xhs-has-1 .modal-head {
  padding-right: 112px;
  min-height: 60px;
}
.chapter-modal.is-playing:has(.chapter-scene.has-tools) .modal-head {
  padding-right: 112px;
  min-height: 60px;
}
.chapter-modal.is-playing.xhs-has-1 .modal-head h2 {
  font-size: var(--xhs-math-4);
  font-size: clamp(13px, 3.5vw, 16px);
  line-height: 1.3;
}
.chapter-modal.is-playing:has(.chapter-scene.has-tools) .modal-head h2 {
  font-size: var(--xhs-math-4);
  font-size: clamp(13px, 3.5vw, 16px);
  line-height: 1.3;
}
.wand-drag-ghost {
  position: fixed;
  z-index: 40;
  --xhs-width:70px;
  width: 70px;
  --xhs-height:70px;
  height: 70px;
  --xhs-transform:translate(-50%,-50%) rotate(-12deg);
  transform: translate(-50%, -50%) rotate(-12deg);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 8px #ffe5ae);
}
.chapter-scene .wand-target .challenge-guest {
  filter: drop-shadow(0 0 7px #e6baff) drop-shadow(0 0 3px #fff5bc);
}
.customer-hearts {
  position: absolute;
  z-index: 5;
  left: -8%;
  right: -8%;
  top: 12%;
  --xhs-height:45%;
  height: 45%;
  pointer-events: none;
}
.customer-hearts > i {
  position: absolute;
  left: auto;
  bottom: auto;
  --xhs-width:25%;
  width: 25%;
  --xhs-height:auto;
  height: auto;
  --xhs-aspect-ratio:1;
  aspect-ratio: 1;
  border: 1px solid #e9b8c5;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 23%,
      #fff 0,
      #fff 5%,
      rgba(255, 255, 255, .533) 9%,
      rgba(253, 225, 237, .533) 45%,
      rgba(241, 182, 210, .667));
  box-shadow: inset -2px -2px 4px rgba(207, 148, 180, .333), 0 0 8px rgba(255, 255, 255, .067);
  opacity: 0;
  animation: customer-heart-float 1.35s ease-out both;
}
.customer-hearts > i:after {
  content: "";
  position: absolute;
  top: 25%;
  right: 25%;
  bottom: 25%;
  left: 25%;
  top: 25%;
  right: 25%;
  bottom: 25%;
  left: 25%;
  background:
    linear-gradient(
      135deg,
      #ffb6cb,
      #e77fa8);
  clip-path: polygon(50% 95%, 3% 48%, 0 25%, 14% 7%, 35% 5%, 50% 22%, 65% 5%, 86% 7%, 100% 25%, 97% 48%);
}
.customer-hearts > i:nth-child(1) {
  left: 7%;
  top: 50%;
  --heart-x:-10px;
}
.customer-hearts > i:nth-child(2) {
  left: 39%;
  top: 15%;
  animation-delay: .15s;
  --heart-x:4px;
}
.customer-hearts > i:nth-child(3) {
  right: 1%;
  top: 43%;
  animation-delay: .3s;
  --heart-x:12px;
}
.customer-hearts > i:nth-child(4) {
  left: 24%;
  top: 30%;
  animation-delay: .5s;
  --heart-x:-4px;
}
.mood-restored .chapter-patience {
  box-shadow: 0 0 6px #9cdbac;
  transition: width .35s ease-out !important;
}
@keyframes customer-heart-float {
  0% {
    opacity: 0;
    --xhs-transform:translateY(8px) scale(.4);
    transform: translateY(8px) scale(.4);
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    --xhs-transform:translate(var(--heart-x),-44px) scale(1.12);
    transform: translate(var(--heart-x), -44px) scale(1.12);
  }
}
.chapter-effects {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
}
.magic-served .chapter-order {
  opacity: 0;
  transition: opacity .2s;
}
.magic-departure {
  position: absolute;
  left: var(--guest-x);
  top: 18%;
  --xhs-width:var(--guest-width,28%);
  width: var(--guest-width,28%);
  --xhs-height:31%;
  height: 31%;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
}
.magic-takeaway {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  --xhs-height:80%;
  height: 80%;
  --xhs-transform:translateX(var(--walk-x,0px));
  transform: translateX(var(--walk-x,0px));
  opacity: var(--walk-opacity,1);
  transition: transform .25s linear, opacity .25s linear;
}
.chapter-teaching-group .chapter-levels {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.chapter-teaching-group .chapter-levels > button {
  min-height: 86px;
}
.chapter-teaching-group .chapter-levels > button small {
  margin: 4px 0;
  color: #72566e;
  font-size: 11px;
}
.chapter-lesson {
  font-size: 11px;
  line-height: 1.4;
  color: #72566e;
}
.chapter-scene.is-guided *,
.chapter-scene.is-finished * {
  animation-play-state: paused !important;
  transition: none !important;
}
.chapter-tutorial-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  overflow: hidden;
  touch-action: manipulation;
}
.chapter-tutorial-overlay > svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  pointer-events: none;
}
.chapter-tutorial-note {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 15%;
  padding: 15px 12px;
  border: 2px solid #eacb96;
  border-radius: 18px;
  background: #fff7e8;
  color: #654b64;
  text-align: center;
  box-shadow: 0 4px 0 rgba(185, 152, 119, .6);
  pointer-events: none;
}
.chapter-tutorial-note b {
  display: block;
  font-size: 15px;
  line-height: 1.5;
}
.chapter-tutorial-note small {
  display: block;
  margin-top: 7px;
  color: #8c717b;
  font-size: 10px;
}
.chapter-tutorial-overlay .chapter-tutorial-target {
  position: absolute;
  left: var(--guide-x);
  top: var(--guide-y);
  --xhs-width:var(--guide-size);
  width: var(--guide-size);
  --xhs-height:var(--guide-size);
  height: var(--guide-size);
  --xhs-transform:translate(-50%,-50%);
  transform: translate(-50%, -50%);
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  touch-action: manipulation;
}
.chapter-tutorial-target:focus {
  outline: 3px solid #fff1b9;
  outline-offset: 3px;
}
.chapter-tutorial-target:focus-visible {
  outline: 3px solid #fff1b9;
  outline-offset: 3px;
}
.chapter-tutorial-hand {
  position: absolute;
  left: var(--guide-x);
  top: calc(var(--guide-y) + 10px);
  --xhs-width:56px;
  width: 56px;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 3px #33263b66);
  pointer-events: none;
  animation: tutorial-tap 1s ease-in-out infinite;
}
@keyframes tutorial-tap {
  0%, 100% {
    --xhs-transform:translate(-50%,9px) rotate(-7deg);
    transform: translate(-50%, 9px) rotate(-7deg);
  }
  50% {
    --xhs-transform:translate(-50%,-5px) rotate(-7deg);
    transform: translate(-50%, -5px) rotate(-7deg);
  }
}
.chapter-modal .chapter-pause-button {
  z-index: 31;
}
.chapter-modal .chapter-pause {
  z-index: 35;
}
.chapter-modal .chapter-result {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 26;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  padding: 12px;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: rgba(48, 37, 57, .733);
  box-shadow: none;
  text-align: center;
}
.chapter-result-card {
  position: relative;
  --xhs-width:var(--xhs-local-11);
  width: var(--xhs-local-11);
  width: min(92%, 350px, 66dvh);
  --xhs-aspect-ratio:1122/1402;
  aspect-ratio: 1122/1402;
  animation: chapter-result-pop .3s ease-out both;
}
.chapter-result-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  pointer-events: none;
}
.chapter-result-content {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 24%;
  bottom: 34%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  --xhs-row-gap:7px;
  --xhs-column-gap:7px;
  grid-gap: 7px;
  gap: 7px;
  color: #72516a;
}
.chapter-result-content h3 {
  margin: 0;
  font-size: var(--xhs-math-5);
  font-size: clamp(21px, 6vw, 29px);
  color: #925e44;
  text-shadow: 0 2px #fff;
}
.chapter-result-stars {
  display: flex;
  --xhs-row-gap:4px;
  --xhs-column-gap:4px;
  grid-gap: 4px;
  gap: 4px;
  justify-content: center;
}
.chapter-result-stars img {
  --xhs-width:32px;
  width: 32px;
  --xhs-height:32px;
  height: 32px;
  object-fit: contain;
}
.chapter-result-content p {
  margin: 0;
  white-space: pre-line;
  font-size: 12px;
  line-height: 1.65;
  font-weight: 800;
}
.chapter-result-content small {
  font-size: 10px;
  line-height: 1.3;
  color: #9b6269;
}
.chapter-result-content small:empty {
  display: none;
}
.chapter-result-rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  --xhs-row-gap:5px;
  --xhs-column-gap:5px;
  grid-gap: 5px;
  gap: 5px;
  --xhs-width:100%;
  width: 100%;
  margin: 0;
}
.chapter-result-rewards dt {
  font-size: 11px;
  color: #8b6a77;
}
.chapter-result-rewards dd {
  display: flex;
  align-items: center;
  justify-content: center;
  --xhs-row-gap:2px;
  --xhs-column-gap:2px;
  grid-gap: 2px;
  gap: 2px;
  margin: 3px 0 0;
  font-size: 15px;
  color: #70536c;
}
.chapter-result-rewards img {
  --xhs-width:20px;
  width: 20px;
  --xhs-height:20px;
  height: 20px;
  object-fit: contain;
}
.chapter-result-card > button {
  position: absolute;
  top: 76%;
  --xhs-transform:translateY(-50%);
  transform: translateY(-50%);
  --xhs-width:33.5%;
  width: 33.5%;
  --xhs-height:11.5%;
  height: 11.5%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: none;
  font-size: var(--xhs-math-6);
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 900;
  touch-action: manipulation;
  text-shadow: 0 1px #fff9;
}
.chapter-result-card > .chapter-result-retry {
  left: 16.5%;
  color: #763f52;
}
.chapter-result-card > .chapter-result-continue {
  right: 16%;
  color: #365d3c;
}
.chapter-result-card > button:active {
  --xhs-transform:translateY(calc(-50% + 3px));
  transform: translateY(calc(-50% + 3px));
}
.chapter-result-card > button:focus {
  outline: 3px solid #74526e;
  outline-offset: 2px;
}
.chapter-result-card > button:focus-visible {
  outline: 3px solid #74526e;
  outline-offset: 2px;
}
.chapter-result-card > button:disabled {
  color: #926e80;
  opacity: .55;
}
@keyframes chapter-result-pop {
  from {
    --xhs-transform:scale(.8);
    transform: scale(.8);
    opacity: 0;
  }
  to {
    --xhs-transform:scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@media (max-height: 650px) {
  .chapter-result-content {
    --xhs-row-gap:4px;
    --xhs-column-gap:4px;
    grid-gap: 4px;
    gap: 4px;
  }
  .chapter-result-content p {
    font-size: 11px;
    line-height: 1.5;
  }
  .chapter-result-stars img {
    --xhs-width:26px;
    width: 26px;
    --xhs-height:26px;
    height: 26px;
  }
  .chapter-result-rewards dd {
    font-size: 13px;
  }
  .chapter-result-rewards img {
    --xhs-width:17px;
    width: 17px;
    --xhs-height:17px;
    height: 17px;
  }
  .chapter-tutorial-note {
    top: 14%;
    padding: 10px;
  }
  .chapter-tutorial-note b {
    font-size: 13px;
  }
  .chapter-tutorial-hand {
    --xhs-width:47px;
    width: 47px;
  }
}
.onboarding-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 85;
  pointer-events: none;
  overflow: hidden;
}
.onboarding-overlay > svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
}
.onboarding-overlay .onboarding-target {
  position: absolute;
  left: var(--guide-x);
  top: var(--guide-y);
  --xhs-width:var(--guide-size);
  width: var(--guide-size);
  --xhs-height:var(--guide-size);
  height: var(--guide-size);
  --xhs-transform:translate(-50%,-50%);
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: none;
  box-shadow: none;
  pointer-events: auto;
  touch-action: manipulation;
}
.onboarding-overlay .chapter-tutorial-note {
  top: 12%;
  font-size: 13px;
}
.onboarding-overlay .chapter-tutorial-hand {
  --xhs-width:48px;
  width: 48px;
}
.onboarding-overlay.is-drag-guide .chapter-tutorial-hand {
  animation: onboarding-drag 1.6s ease-in-out infinite;
}
@keyframes onboarding-drag {
  0%, 20%, 100% {
    --xhs-transform:translate(-50%,8px);
    transform: translate(-50%, 8px);
  }
  70%, 85% {
    --xhs-transform:translate(calc(-50% + var(--hand-dx)),calc(8px + var(--hand-dy)));
    transform: translate(calc(-50% + var(--hand-dx)), calc(8px + var(--hand-dy)));
  }
}
.phone.is-onboarding .scene-world * {
  animation-play-state: paused !important;
}
.gift-reveal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  background: rgba(48, 37, 57, .85);
  text-align: center;
}
.gift-reveal-content {
  position: relative;
  isolation: isolate;
  --xhs-width:var(--xhs-local-12);
  width: var(--xhs-local-12);
  width: min(78%, 265px);
  display: flex;
  align-items: center;
  flex-direction: column;
  --xhs-row-gap:12px;
  --xhs-column-gap:12px;
  grid-gap: 12px;
  gap: 12px;
  color: #fff0d8;
  animation: gift-reveal-pop .5s ease-out both;
}
.gift-reveal-content h2 {
  margin: 0;
  font-size: 25px;
  text-shadow: 0 2px 3px #57323d;
}
.gift-reveal-content small {
  font-size: 11px;
  line-height: 1.4;
}
.gift-reveal-content > b {
  font-size: 17px;
  line-height: 1.5;
  text-shadow: 0 2px 2px #563142;
}
.gift-reveal-art {
  position: relative;
  --xhs-width:140px;
  width: 140px;
  --xhs-height:140px;
  height: 140px;
  filter: drop-shadow(0 7px 7px #46304380);
}
.gift-reveal-art > img {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
}
.gift-reveal-art .decor-thumb {
  position: relative;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  display: block;
}
.gift-reveal-content > .game-action {
  min-width: 140px;
  margin-top: 6px;
}
.gift-reveal-glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 48%;
  --xhs-width:280px;
  width: 280px;
  --xhs-height:280px;
  height: 280px;
  --xhs-transform:translate(-50%,-50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #fff3cbcc 0%,
      #ffe2a577 25%,
      #f4bd5944 48%,
      transparent 70%);
  animation: gift-halo .7s ease-out both;
}
.gift-reveal-glow:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      #ffedc333 0deg 10deg,
      transparent 10deg 30deg);
  -webkit-mask-image:
    radial-gradient(
      circle,
      transparent 12%,
      #000 35%,
      transparent 72%);
  mask-image:
    radial-gradient(
      circle,
      transparent 12%,
      #000 35%,
      transparent 72%);
}
@keyframes gift-reveal-pop {
  0% {
    --xhs-transform:scale(.25);
    transform: scale(.25);
    opacity: 0;
  }
  75% {
    --xhs-transform:scale(1.06);
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    --xhs-transform:scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes gift-halo {
  from {
    opacity: 0;
    --xhs-transform:translate(-50%,-50%) scale(.15);
    transform: translate(-50%, -50%) scale(.15);
  }
  to {
    opacity: 1;
    --xhs-transform:translate(-50%,-50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}
.research-reward .reward-card.game-card {
  border: 0;
  border-image: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  max-width: 310px;
}
.research-reward .reward-card h2,
.research-reward .reward-card > b,
.research-reward .reward-card small {
  color: #fff0d8;
  text-shadow: 0 2px 3px #583648;
}
.research-reward .reward-badge {
  animation: gift-reveal-pop .5s ease-out both;
}
@media (max-height: 650px) {
  .gift-reveal-content {
    --xhs-row-gap:9px;
    --xhs-column-gap:9px;
    grid-gap: 9px;
    gap: 9px;
  }
  .gift-reveal-art {
    --xhs-width:110px;
    width: 110px;
    --xhs-height:110px;
    height: 110px;
  }
  .gift-reveal-content h2 {
    font-size: 22px;
  }
  .gift-reveal-content > b {
    font-size: 15px;
  }
  .gift-reveal-glow {
    --xhs-width:240px;
    width: 240px;
    --xhs-height:240px;
    height: 240px;
  }
}
.chapter-scene .chapter-order .chapter-happy-zone,
.delivery-guests .chapter-order .chapter-happy-zone {
  position: absolute;
  left: 74.44%;
  --xhs-width:19.56%;
  width: 19.56%;
  bottom: 2px;
  --xhs-height:5px;
  height: 5px;
  border-left: 2px solid #75455e;
  background: rgba(231, 158, 174, .4);
  pointer-events: none;
}
:is(.chapter-scene, .delivery-guests) .chapter-order .chapter-happy-zone {
  position: absolute;
  left: 74.44%;
  --xhs-width:19.56%;
  width: 19.56%;
  bottom: 2px;
  --xhs-height:5px;
  height: 5px;
  border-left: 2px solid #75455e;
  background: rgba(231, 158, 174, .4);
  pointer-events: none;
}
.chapter-happy-badge {
  position: absolute;
  right: -3px;
  top: -12px;
  padding: 1px 5px;
  border: 1px solid #ca9b9c;
  border-radius: 9px;
  background: #fff3e5;
  color: #8d4660;
  font-size: 10px;
  font-style: normal;
  line-height: 1.5;
  white-space: nowrap;
}
.chapter-modal .chapter-result.has-coach {
  display: flex;
  flex-direction: column;
  justify-content: center;
  --xhs-row-gap:6px;
  --xhs-column-gap:6px;
  grid-gap: 6px;
  gap: 6px;
  overflow: auto;
}
.chapter-result.has-coach .chapter-result-card {
  flex: none;
  --xhs-width:var(--xhs-local-13);
  width: var(--xhs-local-13);
  width: min(92%, 330px, 55dvh);
}
.chapter-result-coach {
  flex: none;
  --xhs-width:var(--xhs-local-14);
  width: var(--xhs-local-14);
  width: min(92%, 330px);
  padding: 10px 13px;
  border: 2px solid #d9bba0;
  border-radius: 17px;
  background: #fff8e9;
  color: #72516a;
  box-shadow: 0 3px 0 rgba(137, 99, 74, .2);
  font-size: 12px;
}
.chapter-result-coach p {
  margin: 0 0 6px;
  line-height: 1.5;
}
.chapter-result-coach p:empty,
.chapter-result-coach small:empty {
  display: none;
}
.chapter-result-coach button {
  display: block;
  --xhs-width:100%;
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  margin: 5px 0;
  border: 1px solid #9bae84;
  border-radius: 13px;
  background: #e5efd4;
  color: #3e653e;
  font-size: 13px;
}
.chapter-result-coach small {
  display: block;
  font-size: 11px;
  line-height: 1.4;
}
@media (max-height: 650px) {
  .chapter-result.has-coach .chapter-result-content {
    --xhs-row-gap:3px;
    --xhs-column-gap:3px;
    grid-gap: 3px;
    gap: 3px;
  }
  .chapter-result.has-coach .chapter-result-stars img {
    --xhs-width:22px;
    width: 22px;
    --xhs-height:22px;
    height: 22px;
  }
  .chapter-result.has-coach .chapter-result-content h3 {
    font-size: 20px;
  }
  .chapter-result.has-coach .chapter-result-rewards dd {
    font-size: 12px;
  }
  .chapter-result-coach {
    padding: 7px 10px;
  }
}
@media (max-height: 450px) {
  .chapter-modal .chapter-result.has-coach {
    justify-content: flex-start;
  }
  .chapter-result.has-coach .chapter-result-card {
    --xhs-width:260px;
    width: 260px;
    max-width: 92%;
  }
}
.angry-served .challenge-guest {
  visibility: hidden;
}
.angry-served .chapter-order {
  opacity: 0;
  transition: opacity .2s;
}
.angry-walker {
  filter: drop-shadow(0 3px 2px #715a6c55);
}
.anger-mark {
  position: absolute;
  right: 2%;
  top: 12%;
  --xhs-width:25%;
  width: 25%;
  overflow: visible;
  filter: drop-shadow(0 2px 0 #fff3da);
}
.anger-mark path {
  fill: none;
  stroke: #c45f62;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.angry-departure.is-walking .anger-mark {
  opacity: .75;
}
.chapter-progress.is-progress,
.chapter-bin .chapter-progress.chapter-stock-flag.is-progress {
  --xhs-width:62%;
  width: 62%;
  --xhs-height:10px;
  height: 10px;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  border-radius: 8px;
  background: #fff2d9;
  box-shadow: 0 2px 3px rgba(113, 83, 106, .2);
  overflow: hidden;
}
.chapter-progress.is-progress:before {
  content: "";
  display: block;
  --xhs-width:var(--xhs-local-15);
  width: var(--xhs-local-15);
  width: clamp(0%, var(--prep-progress,0%), 100%);
  --xhs-height:100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(#b5d795, #83b27f);
  transition: width .25s linear;
}
@media (prefers-reduced-motion: reduce) {
  .angry-departure .magic-takeaway {
    transition: none;
  }
}
.angry-departure {
  top: 18%;
  clip-path: inset(-100% -400% 40.78% -400%);
}
.chapter-scene .chapter-machine {
  --xhs-width:25%;
  width: 25%;
  --xhs-height:22.65%;
  height: 22.65%;
}
.chapter-scene .chapter-machine,
.chapter-scene .cream-machine {
  --xhs-container-type:inline-size;
  container-type: inline-size;
}
.tea-machine-name {
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 100%;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
  --xhs-width:max-content;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 3px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 16px;
  color: #674c3e;
  background: #fff2d9;
  border: 1px solid #c9ac8d;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 7;
  box-shadow: 0 2px 3px rgba(99, 67, 52, .14);
}
.chapter-machine[data-machine="0"] .tea-machine-name {
  color: #713c37;
  background: #f6ddd3;
  border-color: #cba197;
}
.chapter-machine[data-machine="1"] .tea-machine-name {
  color: #425936;
  background: #e6efce;
  border-color: #abbc8e;
}
.chapter-machine[data-machine="2"] .tea-machine-name {
  color: #695027;
  background: #f6e7c5;
  border-color: #c7ae7f;
}
.chapter-scene .tea-machine-name {
  bottom: var(--xhs-local-16);
  bottom: min(100%, 110cqw);
}
.chapter-scene .chapter-machine .chapter-stock-flag {
  top: auto;
  bottom: var(--xhs-local-17);
  bottom: min(65%, 71.5cqw, calc(100% - 28px));
}
.chapter-scene .cream-machine .chapter-progress {
  top: auto;
  bottom: var(--xhs-local-17);
  bottom: min(65%, 71.5cqw, calc(100% - 28px));
  white-space: nowrap;
}
.chapter-scene .chapter-bin.cream.cream-machine {
  left: 0;
  top: 33.4%;
  --xhs-width:25%;
  width: 25%;
  --xhs-height:22.65%;
  height: 22.65%;
  z-index: 3;
}
.chapter-milk {
  position: absolute;
  pointer-events: auto;
  right: 1%;
  top: 77%;
  --xhs-width:21%;
  width: 21%;
  --xhs-height:15%;
  height: 15%;
  padding: 0;
  border: 0;
  background: none;
  touch-action: manipulation;
}
.chapter-milk img {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
}
.chapter-milk b {
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  border-radius: 9px;
  background: #fff5df;
  color: #785b63;
  font-size: 11px;
}
.has-liquid .cup-liquid-body,
.has-liquid .cup-liquid-surface {
  opacity: 1;
}
.chapter-cup[data-liquid=green] .cup-liquid-body {
  filter: hue-rotate(42deg) saturate(.6) brightness(1.28);
}
.chapter-cup[data-liquid=oolong] .cup-liquid-body {
  filter: brightness(.56) saturate(1.2);
}
.chapter-cup[data-liquid=milk] .cup-liquid-body {
  filter: saturate(0) brightness(1.6);
}
.chapter-cup[data-liquid=green] .cup-liquid-surface,
.chapter-cup[data-liquid=green] .cup-pour-stream {
  background: #c8dca1;
}
.chapter-cup[data-liquid=oolong] .cup-liquid-surface,
.chapter-cup[data-liquid=oolong] .cup-pour-stream {
  background: #70482c;
}
.chapter-cup[data-liquid=milk] .cup-liquid-surface,
.chapter-cup[data-liquid=milk] .cup-pour-stream {
  background: #fff8e7;
}
.chapter-combo-pop {
  position: absolute;
  z-index: 7;
  left: 5%;
  right: 5%;
  top: 2%;
  text-align: center;
  font-family: "Xiaoman Rounded", sans-serif;
  font-weight: 900;
  font-size: var(--xhs-math-7);
  font-size: clamp(22px, 7vw, 34px);
  line-height: 1.3;
  pointer-events: none;
  color: #fff6d8;
  -webkit-text-stroke: 2px #b77687;
  text-shadow:
    0 -2px 0 white,
    0 3px 0 #f1b4c3,
    0 5px 2px #785b6344;
}
.chapter-combo-pop[data-phase="3"] {
  -webkit-text-stroke-color: #a580bd;
}
.chapter-combo-pop[data-phase="4"] {
  -webkit-text-stroke-color: #759d8b;
}
.chapter-combo-pop[data-phase="5"] {
  -webkit-text-stroke-color: #b58b47;
}
.chapter-combo-pop.show {
  animation: combo-balloon .85s ease-out both;
}
@keyframes combo-balloon {
  0% {
    opacity: 0;
    --xhs-transform:scale(.5) translateY(8px);
    transform: scale(.5) translateY(8px);
  }
  20% {
    opacity: 1;
    --xhs-transform:scale(1.12);
    transform: scale(1.12);
  }
  38% {
    --xhs-transform:scale(.96);
    transform: scale(.96);
  }
  55%, 75% {
    opacity: 1;
    --xhs-transform:scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    --xhs-transform:scale(.94) translateY(-8px);
    transform: scale(.94) translateY(-8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-combo-pop.show {
    animation: combo-balloon .1s linear both;
  }
}
.chapter-bin.cream-machine.locked > img {
  display: block;
  opacity: .45;
}
.chapter-combo-pop {
  color: transparent;
  background:
    linear-gradient(
      #fffef7 0,
      #fffef7 18%,
      rgba(255, 249, 232, .2) 22%,
      rgba(255, 249, 232, .2) 72%,
      rgba(255, 246, 218, .6) 90%);
  background-clip: text;
  -webkit-background-clip: text;
}
.chapter-combo-pop {
  text-shadow: none;
  -webkit-text-stroke-width: 1.5px;
  filter: drop-shadow(0 -1px 0 #fffdf2) drop-shadow(0 2px 0 #f1b4c3) drop-shadow(0 3px 1px #785b6344);
}
.chapter-counter-art {
  clip-path: inset(36.36% 0 0);
}
.chapter-cup {
  --liquid:#aa471eaa;
  --liquid-light:#efaa4477;
}
.chapter-cup[data-liquid=green] {
  --liquid:#9da32e99;
  --liquid-light:#dfe88766;
}
.chapter-cup[data-liquid=oolong] {
  --liquid:#75401eb5;
  --liquid-light:#bd843477;
}
.chapter-cup[data-liquid=milk] {
  --liquid:#f2e4cc;
  --liquid-light:#fbf3e3;
}
.chapter-cup[data-liquid=black-milk] {
  --liquid:#bc8755;
  --liquid-light:#e7c39b;
}
.chapter-cup[data-liquid=green-milk] {
  --liquid:#bacb91;
  --liquid-light:#e2eac9;
}
.chapter-cup[data-liquid=oolong-milk] {
  --liquid:#815638;
  --liquid-light:#bc9573;
}
.chapter-cup .cup-interior {
  z-index: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
.chapter-cup .cup-liquid-body {
  filter: none;
  background:
    linear-gradient(
      90deg,
      var(--liquid),
      var(--liquid-light) 35%,
      var(--liquid) 90%);
}
.chapter-cup .cup-liquid-surface {
  background: var(--liquid-light);
  border-color: var(--liquid);
  box-shadow: inset 0 1px rgba(255, 255, 255, .6);
}
.chapter-cup.has-liquid .cup-liquid-body,
.chapter-cup.has-liquid .cup-liquid-surface {
  opacity: 1;
}
.chapter-cup[data-pour=black] .cup-pour-stream {
  background: rgba(173, 85, 29, .6);
}
.chapter-cup[data-pour=green] .cup-pour-stream {
  background: rgba(180, 187, 70, .6);
}
.chapter-cup[data-pour=oolong] .cup-pour-stream {
  background: rgba(137, 80, 42, .667);
}
.chapter-cup[data-pour=milk] .cup-pour-stream {
  background: #f7ecd8;
}
.machine-reservation {
  display: none;
}
.chapter-machine.locked .machine-reservation {
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 3%;
  --xhs-height:26%;
  height: 26%;
  border: 2px dashed #bf927c;
  border-radius: 50%;
  background: rgba(255, 232, 194, .55);
  color: #886557;
  font-size: 10px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .6);
}
.machine-reservation small {
  font-size: 9px;
}
.chapter-machine.locked .tea-machine-name {
  display: none;
}
.angry-portrait {
  position: absolute;
  left: 0;
  top: 50%;
  --xhs-width:100%;
  width: 100%;
  --xhs-aspect-ratio:3/4;
  aspect-ratio: 3/4;
  --xhs-transform:translateY(-56.25%);
  transform: translateY(-56.25%);
}
.angry-walker {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 400% 100%;
  transform-origin: center;
}
.chapter-scene .cream-machine > img {
  object-position: center bottom;
}
#chapterModal.is-playing {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  --xhs-width:var(--xhs-math-8);
  width: var(--xhs-math-8);
  width: min(100vw, 560px);
  --xhs-height:100vh;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
}
#chapterModal.is-playing:before,
#chapterModal.is-playing:after {
  display: none;
}
#chapterModal.is-playing #chapterPlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: 0;
  padding: 0;
}
#chapterModal.is-playing #chapterScene {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  --xhs-aspect-ratio:auto;
  aspect-ratio: auto;
  border-radius: 0;
}
#chapterModal.is-playing .modal-head {
  position: absolute;
  z-index: 24;
  top: calc(3px + var(--safe-area-inset-top,0px));
  top: calc(3px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  left: 4px;
  right: auto;
  padding: 0 !important;
  min-height: 0 !important;
  margin: 0;
  display: block;
  pointer-events: none;
}
#chapterModal.is-playing .modal-head > div {
  margin-left: 37px;
  padding: 4px 6px;
  border: 1px solid #d2b691;
  border-radius: 9px;
  background: rgba(255, 246, 232, .92);
  box-shadow: 0 2px 0 rgba(186, 152, 116, .333);
}
#chapterModal.is-playing #chapterTitle {
  font-size: 11px !important;
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
}
#chapterModal.is-playing #chapterLabel {
  display: none;
}
#chapterModal.is-playing #chapterPauseButton {
  position: absolute;
  left: 0;
  top: 0;
  --xhs-width:32px;
  width: 32px;
  --xhs-height:32px;
  height: 32px;
  min-height: 32px;
  border-radius: 10px;
  pointer-events: auto;
}
#chapterModal.is-playing .chapter-status {
  position: absolute;
  z-index: 23;
  left: 41px;
  top: calc(31px + var(--safe-area-inset-top,0px));
  top: calc(31px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  --xhs-width:auto;
  width: auto;
  max-width: calc(100% - 95px);
  --xhs-row-gap:2px;
  --xhs-column-gap:2px;
  grid-gap: 2px;
  gap: 2px;
}
#chapterModal.is-playing .chapter-status .chapter-goal {
  font-size: 11px;
  border-radius: 9px;
  padding: 3px 7px;
  background: rgba(255, 246, 232, .92);
}
#chapterModal.is-playing #chapterCombo {
  display: none;
}
#chapterModal.is-playing #chapterTools {
  top: calc(3px + var(--safe-area-inset-top,0px));
  top: calc(3px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  right: 3px;
  --xhs-width:40px;
  width: 40px;
  --xhs-height:auto;
  height: auto;
  flex-direction: column;
  --xhs-row-gap:3px;
  --xhs-column-gap:3px;
  grid-gap: 3px;
  gap: 3px;
}
#chapterModal.is-playing #chapterTools > button {
  --xhs-width:38px;
  width: 38px;
  --xhs-height:38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 12px;
  padding: 2px;
}
#chapterModal.is-playing #chapterTools > button > img {
  --xhs-width:32px;
  width: 32px;
  --xhs-height:32px;
  height: 32px;
}
#chapterModal.is-playing .chapter-combo-pop {
  top: 9%;
  left: 20%;
  right: 15%;
  font-size: 25px;
}
#chapterModal.is-playing .chapter-cup-label {
  display: none;
}
.challenge-customer.delivery-target .chapter-order {
  filter: drop-shadow(0 0 5px #ffe6a5);
  outline: 2px solid #f4c772;
  outline-offset: 2px;
}
.challenge-customer.delivery-target .challenge-guest {
  filter: drop-shadow(0 0 5px #fff4be);
}
.chapter-cup[data-liquid=milk] .cup-liquid-body {
  filter: none;
}
.chapter-result-back {
  position: absolute;
  z-index: 2;
  top: calc(12px + var(--safe-area-inset-top,0px));
  top: calc(12px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  left: 12px;
  min-height: 44px;
  padding: 8px 15px;
  border: 2px solid #b99a83;
  border-radius: 14px;
  background: #fff2da;
  color: #78566b;
  font-weight: 800;
  box-shadow: 0 3px rgba(169, 135, 112, .333);
}
.chapter-scene:not(.is-finished) .chapter-cup.is-active:not(.dragging):not(.capping):not(.leaving) > .cup-visual {
  animation: cup-selected-float 1.8s ease-in-out infinite;
}
@keyframes cup-selected-float {
  0%, 100% {
    --xhs-transform:translateY(-8%);
    transform: translateY(-8%);
  }
  50% {
    --xhs-transform:translateY(-14%);
    transform: translateY(-14%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-scene:not(.is-finished) .chapter-cup.is-active:not(.dragging):not(.capping):not(.leaving) > .cup-visual {
    animation: none;
    --xhs-transform:translateY(-8%);
    transform: translateY(-8%);
  }
}
.cup-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.chapter-cup.pouring > .cup-visual {
  animation: none !important;
  --xhs-transform:var(--pour-lift,none);
  transform: var(--pour-lift,none);
}
.chapter-cup .cup-interior {
  clip-path: polygon(16.7% 0, 83.1% 0, 83.1% 14%, 68.9% 84.3%, 64% 87.7%, 36% 87.7%, 30.8% 84.6%, 16.7% 14%);
}
.cup-toppings {
  clip-path: polygon(24% 20%, 76% 20%, 73% 44%, 67% 84%, 64% 88%, 36% 88%, 33% 84%, 27% 44%);
}
.chapter-cup .cup-liquid-body {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, .04),
      rgba(255, 255, 255, .2) 35%,
      rgba(0, 0, 0, .04) 90%);
  background-color: var(--liquid);
}
.chapter-cup.pouring .cup-liquid-body {
  animation: cup-liquid-fill var(--pour-duration) cubic-bezier(.25, .1, .35, 1) both;
}
@keyframes cup-liquid-fill {
  0%, 18% {
    clip-path: inset(var(--pour-from-line) 0 0);
    background-color: var(--pour-from-color);
  }
  100% {
    clip-path: inset(var(--milk-line) 0 0);
    background-color: var(--liquid);
  }
}
.chapter-cup.pouring .cup-liquid-surface {
  animation: cup-surface-rise var(--pour-duration) cubic-bezier(.25, .1, .35, 1) both;
}
@keyframes cup-surface-rise {
  0%, 18% {
    top: var(--pour-from-line);
    --xhs-width:30%;
    width: 30%;
    background-color: var(--pour-from-color);
    --xhs-transform:translate(-50%,-50%) scaleY(.65);
    transform: translate(-50%, -50%) scaleY(.65);
  }
  40% {
    --xhs-transform:translate(-50%,-50%) scaleY(1.25) rotate(-2deg);
    transform: translate(-50%, -50%) scaleY(1.25) rotate(-2deg);
  }
  65% {
    --xhs-transform:translate(-50%,-50%) scaleY(.9) rotate(1deg);
    transform: translate(-50%, -50%) scaleY(.9) rotate(1deg);
  }
  100% {
    top: var(--milk-line);
    --xhs-width:var(--milk-width);
    width: var(--milk-width);
    background-color: var(--liquid-light);
    --xhs-transform:translate(-50%,-50%);
    transform: translate(-50%, -50%);
  }
}
.chapter-cup .cup-pour-stream {
  top: 20%;
  left: 48%;
  --xhs-width:4%;
  width: 4%;
  --xhs-height:var(--xhs-local-18);
  height: var(--xhs-local-18);
  height: max(2%, calc(var(--milk-line) - 20%));
  border-radius: 45%;
  z-index: 2;
  transform-origin: center top;
  box-shadow: inset 1px 0 rgba(255, 255, 255, .467);
  clip-path: polygon(22% 0, 76% 0, 65% 32%, 84% 66%, 100% 100%, 0 100%, 18% 70%, 36% 35%);
}
.chapter-cup.pouring .cup-pour-stream {
  animation: cup-stream-flow var(--pour-duration) cubic-bezier(.25, .1, .35, 1) both;
}
@keyframes cup-stream-flow {
  0% {
    --xhs-height:calc(var(--pour-from-line) - 20%);
    height: calc(var(--pour-from-line) - 20%);
    --xhs-transform:scaleY(0);
    transform: scaleY(0);
    opacity: 0;
  }
  18% {
    --xhs-height:calc(var(--pour-from-line) - 20%);
    height: calc(var(--pour-from-line) - 20%);
    --xhs-transform:scaleY(1);
    transform: scaleY(1);
    opacity: .85;
  }
  75% {
    opacity: .9;
  }
  100% {
    --xhs-height:var(--xhs-local-18);
    height: var(--xhs-local-18);
    height: max(2%, calc(var(--milk-line) - 20%));
    --xhs-transform:scaleX(.2);
    transform: scaleX(.2);
    opacity: 0;
  }
}
.cup-liquid-surface:after {
  content: "";
  position: absolute;
  top: -25%;
  right: 16%;
  bottom: -25%;
  left: 16%;
  top: -25%;
  right: 16%;
  bottom: -25%;
  left: 16%;
  border: 1px solid #fff4cb99;
  border-radius: 50%;
  opacity: 0;
}
.pouring .cup-liquid-surface:after {
  animation: cup-liquid-ripple var(--pour-duration) ease-out both;
}
@keyframes cup-liquid-ripple {
  10% {
    --xhs-transform:scale(.2);
    transform: scale(.2);
    opacity: 0;
  }
  35% {
    opacity: .8;
  }
  100% {
    --xhs-transform:scale(1.4,.75);
    transform: scale(1.4, .75);
    opacity: 0;
  }
}
.serving-pour-effect {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  pointer-events: none;
  animation: serving-pour-fade var(--pour-duration) linear both;
}
.serving-pour-effect svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  overflow: visible;
}
.serving-pour-effect path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: serving-pour-flow var(--pour-duration) ease-out both;
}
.serving-pour-effect .pour-highlight {
  opacity: .5;
}
@keyframes serving-pour-flow {
  0% {
    stroke-dashoffset: 1;
  }
  25%, 75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1;
  }
}
@keyframes serving-pour-fade {
  0% {
    opacity: 0;
  }
  12%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.pour-jug {
  position: absolute;
  object-fit: contain;
  transform-origin: 18% 45%;
  animation: serving-jug-tip var(--pour-duration) ease-in-out both;
  filter: drop-shadow(0 2px 1px #79524244);
}
@keyframes serving-jug-tip {
  0% {
    --xhs-transform:translate(12px,-4px) rotate(0deg);
    transform: translate(12px, -4px) rotate(0deg);
    opacity: 0;
  }
  25%, 65% {
    --xhs-transform:translate(0) rotate(-32deg);
    transform: translate(0) rotate(-32deg);
    opacity: 1;
  }
  100% {
    --xhs-transform:translate(12px,-4px) rotate(0deg);
    transform: translate(12px, -4px) rotate(0deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .serving-pour-effect {
    display: none;
  }
  .chapter-cup.pouring .cup-liquid-body,
  .chapter-cup.pouring .cup-liquid-surface,
  .cup-ingredient,
  .pouring .cup-liquid-surface:after {
    animation: none;
  }
  .chapter-cup.pouring .cup-pour-stream {
    display: none;
  }
}
.cup-ingredient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.cup-piece {
  position: absolute;
  transform-origin: 50% 85%;
  transition: left .2s ease-out, top .2s ease-out;
  transition-delay: var(--settle-delay,0ms);
}
.cup-piece > img {
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: fill;
  display: block;
  --xhs-transform:rotate(var(--piece-turn,0deg)) scaleY(var(--piece-squish,1));
  transform: rotate(var(--piece-turn,0deg)) scaleY(var(--piece-squish,1));
  transform-origin: 50% 85%;
  filter: drop-shadow(0 .5px .35px #4b292522);
}
.chapter-cup .cup-toppings {
  z-index: 3;
  clip-path: none;
}
.chapter-cup .cup-toppings:not(:empty):before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 600;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 28%,
      #fff7df35 34%,
      transparent 43%,
      transparent 65%,
      #fff6df26 70%,
      transparent 75%);
}
.chapter-cup.has-liquid .cup-toppings:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 500;
  pointer-events: none;
  background-color: var(--liquid);
  opacity: .19;
  clip-path: inset(var(--milk-line) 0 0);
}
.chapter-cup.pouring .cup-toppings:after {
  animation: cup-liquid-fill var(--pour-duration) cubic-bezier(.25, .1, .35, 1) both;
}
.chapter-cup[data-pour=milk].pouring .cup-liquid-body:after {
  content: "";
  position: absolute;
  top: 20%;
  right: 20%;
  bottom: 5%;
  left: 20%;
  top: 20%;
  right: 20%;
  bottom: 5%;
  left: 20%;
  background:
    radial-gradient(
      ellipse at 50% 15%,
      #fff9eaaa,
      transparent 65%);
  transform-origin: 50% 0;
  animation: cup-milk-bloom var(--pour-duration) ease-out both;
}
@keyframes cup-milk-bloom {
  0%, 18% {
    --xhs-transform:scale(.12,.1);
    transform: scale(.12, .1);
    opacity: 0;
  }
  35% {
    opacity: .85;
  }
  75% {
    --xhs-transform:scale(.8,1);
    transform: scale(.8, 1);
    opacity: .55;
  }
  100% {
    --xhs-transform:scale(1.25,1);
    transform: scale(1.25, 1);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cup-piece {
    transition: none;
  }
  .chapter-cup.pouring .cup-toppings:after,
  .chapter-cup[data-pour=milk].pouring .cup-liquid-body:after {
    animation: none;
  }
  .chapter-cup[data-pour=milk].pouring .cup-liquid-body:after {
    display: none;
  }
}
html[data-build=beta] #chapterModal.is-playing:not(.is-delivery) .chapter-counter-layer {
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  inset: auto auto 0 50%;
  --xhs-width:var(--xhs-local-19);
  width: var(--xhs-local-19);
  width: min(100%, calc((100dvh - 80px) * 941 / 1070));
  --xhs-height:auto;
  height: auto;
  --xhs-aspect-ratio:941/1672;
  aspect-ratio: 941/1672;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
}
html[data-build=beta] #chapterModal.is-playing:not(.is-delivery) .chapter-background {
  object-fit: cover;
}
.onboarding-overlay {
  z-index: 21000;
  pointer-events: auto;
}
.onboarding-overlay .chapter-tutorial-note {
  box-sizing: border-box;
  --xhs-width:calc(100% - 32px);
  width: calc(100% - 32px);
  max-width: 340px;
  left: 50%;
  --xhs-transform:translateX(-50%);
  transform: translateX(-50%);
  padding: 14px 16px 14px 70px;
  border: 2px solid #caaa83;
  border-radius: 24px;
  background: #fff8ec;
  color: #624d48;
  box-shadow: 0 5px 0 rgba(91, 58, 64, .14);
  pointer-events: auto;
}
.onboarding-panda {
  position: absolute;
  left: 8px;
  bottom: 12px;
  --xhs-width:56px;
  width: 56px;
  --xhs-height:72px;
  height: 72px;
  object-fit: contain;
}
.onboarding-overlay .chapter-tutorial-note b {
  display: block;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
}
.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  --xhs-row-gap:8px;
  --xhs-column-gap:8px;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 10px;
}
.onboarding-actions button {
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid #bc9677;
  border-radius: 18px;
  background: #f9dfa8;
  color: #624d48;
  font: inherit;
}
.onboarding-skip {
  position: absolute;
  right: 12px;
  top: var(--xhs-local-20);
  top: max(8px, var(--safe-area-inset-top,env(safe-area-inset-top,0px)));
  z-index: 21001;
  border: 1px solid #caaa83;
  border-radius: 16px;
  padding: 7px 10px;
  background: #fff8ec;
  color: #624d48;
  font-size: 12px;
  min-height: 34px;
}
.onboarding-overlay .chapter-tutorial-hand {
  pointer-events: none;
}
.onboarding-overlay.is-reading .chapter-tutorial-hand,
.onboarding-overlay.is-reading .onboarding-target {
  display: none;
}
.onboarding-overlay #onboardingRing {
  animation: onboarding-breathe 1.5s ease-in-out infinite;
}
.onboarding-overlay.is-reading #onboardingRing {
  display: none;
}
button.material-unlock {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.chapter-tutorial-overlay.is-serving-guide {
  pointer-events: none;
}
.chapter-tutorial-overlay.is-serving-guide .chapter-tutorial-target {
  pointer-events: auto;
}
@keyframes onboarding-breathe {
  50% {
    stroke-opacity: .5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-overlay #onboardingRing {
    animation: none;
  }
}
.chapter-scene .guest-departure-body,
.delivery-guests .guest-departure-body {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  inset: auto 0 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:80%;
  height: 80%;
  animation: chapter-guest-leave .75s ease-in .5s forwards;
  pointer-events: none;
}
:is(.chapter-scene, .delivery-guests) .guest-departure-body {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  inset: auto 0 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:80%;
  height: 80%;
  animation: chapter-guest-leave .75s ease-in .5s forwards;
  pointer-events: none;
}
.chapter-scene .guest-departure-body > .challenge-guest,
.delivery-guests .guest-departure-body > .challenge-guest {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  animation: none;
}
:is(.chapter-scene, .delivery-guests) .guest-departure-body > .challenge-guest {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  animation: none;
}
.guest-rainbow {
  position: absolute;
  left: 28%;
  bottom: 101%;
  --xhs-width:44%;
  width: 44%;
  --xhs-aspect-ratio:180/112;
  aspect-ratio: 180/112;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px #fff4cf);
}
.guest-rainbow svg {
  display: block;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
}
.chapter-scene .chapter-order .order-drink {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  inset: auto;
  display: block;
  flex: none;
  --xhs-width:34px;
  width: 34px;
  --xhs-height:42px;
  height: 42px;
  --xhs-aspect-ratio:auto;
  aspect-ratio: auto;
  margin: 0;
  --xhs-transform:none;
  transform: none;
  min-height: 0;
  --milk-line:21%;
  --milk-width:61%;
  pointer-events: none;
}
.chapter-cup.modeled .cup-toppings {
  visibility: hidden;
}
@media (max-height: 650px) {
  .chapter-scene .chapter-order .order-drink {
    --xhs-width:30px;
    width: 30px;
    --xhs-height:36px;
    height: 36px;
  }
}
.chapter-scene .chapter-order .order-modeled,
.delivery-guests .chapter-order .order-modeled {
  position: relative;
}
:is(.chapter-scene, .delivery-guests) .chapter-order .order-modeled {
  position: relative;
}
.chapter-scene .chapter-order .order-modeled > img,
.delivery-guests .chapter-order .order-modeled > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
:is(.chapter-scene, .delivery-guests) .chapter-order .order-modeled > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  --xhs-width:100%;
  width: 100%;
  --xhs-height:100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.chapter-scene .chapter-order .order-model-top,
.delivery-guests .chapter-order .order-model-top {
  clip-path: inset(0 0 75% 0);
}
:is(.chapter-scene, .delivery-guests) .chapter-order .order-model-top {
  clip-path: inset(0 0 75% 0);
}