.context-chat-page {
  min-width: 72rem;
  overflow-x: auto;
  background:
    radial-gradient(circle at 8% 18%, rgb(0 193 222 / 8%), transparent 24rem),
    radial-gradient(circle at 92% 72%, rgb(0 174 141 / 8%), transparent 28rem),
    #f4f6f9;
}

.context-chat-page .site-header {
  position: relative;
  z-index: 20;
}

.context-chat-page .content-footer__inner {
  display: flex;
}

.context-course {
  width: min(calc(100% - 2rem), 78rem);
  margin-inline: auto;
  padding-block: 2.5rem 4.5rem;
}

.context-course [hidden] {
  display: none !important;
}

.context-course textarea {
  font-family: inherit;
}

.context-stage {
  --world-sky: #dff7f5;
  --world-horizon: #bfeae3;
  position: relative;
  min-height: min(49rem, calc(100svh - var(--header-height) - 2rem));
  overflow: hidden;
  border: 1px solid rgb(39 52 112 / 12%);
  border-radius: 1.75rem;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 98%) 0 49%, rgb(255 255 255 / 24%) 70%),
    linear-gradient(160deg, var(--world-sky), var(--world-horizon));
  box-shadow: 0 30px 70px rgb(39 52 112 / 12%);
  isolation: isolate;
  transition: background 700ms ease;
}

.context-stage::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image:
    linear-gradient(rgb(39 52 112 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(39 52 112 / 3%) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: linear-gradient(to right, transparent, black 28%, black 72%, transparent);
  content: "";
  pointer-events: none;
}

.context-stage[data-world-mode="swimming"] {
  --world-sky: #e7f9fb;
  --world-horizon: #bfeaf1;
}

.context-stage[data-world-mode="painting"] {
  --world-sky: #f5fbf4;
  --world-horizon: #dcefdc;
}

.context-stage[data-world-mode="cold"] {
  --world-sky: #edf8f8;
  --world-horizon: #dceceb;
}

.context-stage[data-world-mode="hot"] {
  --world-sky: #fff8e7;
  --world-horizon: #e5efce;
}

.context-stage[data-world-mode="waiting"],
.context-stage[data-world-mode="tuesday"] {
  --world-sky: #e9f8f4;
  --world-horizon: #caeae1;
}

.context-world {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 45%;
  overflow: hidden;
  pointer-events: none;
}

.context-world__star {
  position: absolute;
  z-index: 1;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 0 1rem rgb(255 255 255 / 90%);
  animation: world-star-float 5s ease-in-out infinite;
}

.context-world__star--one { top: 17%; right: 12%; }
.context-world__star--two { top: 28%; left: 9%; animation-delay: -1.7s; }
.context-world__star--three { top: 12%; left: 76%; width: 0.3rem; height: 0.3rem; animation-delay: -3.2s; }

@keyframes world-star-float {
  50% { opacity: 0.45; transform: translateY(-0.65rem) scale(0.78); }
}

.context-world__hill {
  position: absolute;
  z-index: 0;
  right: -12%;
  bottom: -9%;
  left: -12%;
  height: 30%;
  border-radius: 54% 48% 0 0;
  background: linear-gradient(155deg, #b9e5da, #84d1c1);
  transition: background 650ms ease, transform 650ms ease;
}

.context-world__hill--back {
  right: -5%;
  bottom: 12%;
  left: 34%;
  height: 23%;
  opacity: 0.55;
  background: linear-gradient(155deg, #d9eee7, #b8ddd1);
  transform: rotate(2deg);
}

.context-world[data-mode="swimming"] .context-world__hill {
  background: linear-gradient(155deg, #a5e3e8, #69cad5);
}

.context-world[data-mode="painting"] .context-world__hill {
  background: linear-gradient(155deg, #c6e8d2, #91cfad);
}

.context-world[data-mode="cold"] .context-world__hill {
  background: linear-gradient(155deg, #f8ffff, #d8eceb);
}

.context-world[data-mode="hot"] .context-world__hill {
  background: linear-gradient(155deg, #d7e8ba, #a8d3a2);
}

.activity-scene {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 500ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.context-world[data-mode="tennis"] .activity-scene--tennis,
.context-world[data-mode="swimming"] .activity-scene--swimming,
.context-world[data-mode="painting"] .activity-scene--painting,
.context-world[data-mode="cold"] .activity-scene--cold,
.context-world[data-mode="hot"] .activity-scene--hot,
.context-world[data-mode="waiting"] .activity-scene--waiting,
.context-world[data-mode="tuesday"] .activity-scene--waiting {
  opacity: 1;
  transform: scale(1);
}

.context-world.is-shifting .activity-scene {
  animation: activity-scene-arrive 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes activity-scene-arrive {
  from { opacity: 0; transform: translateY(1rem) scale(0.98); }
}

.tennis-court {
  position: absolute;
  right: -6%;
  bottom: 2%;
  left: -6%;
  height: 38%;
  border: 2px solid rgb(255 255 255 / 48%);
  border-radius: 58% 52% 0 0;
  box-shadow: inset 0 0 0 4rem rgb(255 255 255 / 4%);
  transform: perspective(28rem) rotateX(58deg);
}

.tennis-court::before,
.tennis-court::after {
  position: absolute;
  background: rgb(255 255 255 / 48%);
  content: "";
}

.tennis-court::before { top: 48%; right: 0; left: 0; height: 2px; }
.tennis-court::after { top: 0; bottom: 0; left: 50%; width: 2px; }

.tennis-racket {
  position: absolute;
  right: 13%;
  bottom: 18%;
  width: 7.4rem;
  height: 9.4rem;
  border: 0.42rem solid var(--color-primary);
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, transparent 0 0.55rem, rgb(39 52 112 / 13%) 0.57rem 0.63rem);
  filter: drop-shadow(0 0.8rem 0.6rem rgb(39 52 112 / 12%));
  transform: rotate(21deg);
}

.tennis-racket::after {
  position: absolute;
  top: 8.35rem;
  left: 2.93rem;
  width: 0.72rem;
  height: 4rem;
  border-radius: 999px;
  background: var(--color-orange);
  content: "";
}

.tennis-ball {
  position: absolute;
  top: 27%;
  left: 10%;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid rgb(39 52 112 / 24%);
  border-radius: 50%;
  background: #d8ef79;
  box-shadow: 0 0.55rem 0.8rem rgb(39 52 112 / 12%);
}

.context-world[data-mode="tennis"][data-revealed="true"] .tennis-ball {
  animation: tennis-ball-arc 2.8s ease-in-out infinite;
}

@keyframes tennis-ball-arc {
  0%, 100% { transform: translate(0, 7rem) rotate(0); }
  50% { transform: translate(17vw, -1.5rem) rotate(180deg); }
}

.swim-wave {
  position: absolute;
  right: -12%;
  bottom: 2%;
  left: -12%;
  height: 18%;
  border-radius: 52% 48% 0 0;
  background: rgb(0 193 222 / 16%);
}

.swim-wave--back { bottom: 13%; transform: rotate(-2deg); }
.swim-wave--front { background: rgb(0 193 222 / 20%); transform: rotate(2deg); }

.context-world[data-mode="swimming"] .swim-wave--back {
  animation: swim-wave 4s ease-in-out infinite alternate;
}

.context-world[data-mode="swimming"] .swim-wave--front {
  animation: swim-wave 5s ease-in-out -1.5s infinite alternate-reverse;
}

@keyframes swim-wave {
  to { transform: translateX(4%) rotate(1deg) scaleY(1.08); }
}

.swim-goggles {
  position: absolute;
  right: 12%;
  bottom: 22%;
  width: 9.4rem;
  height: 3.7rem;
  border-top: 0.32rem solid var(--color-primary);
  border-radius: 50%;
  filter: drop-shadow(0 0.7rem 0.6rem rgb(39 52 112 / 12%));
}

.swim-goggles::before,
.swim-goggles::after {
  position: absolute;
  top: 0.45rem;
  width: 3.55rem;
  height: 2.55rem;
  border: 0.3rem solid var(--color-primary);
  border-radius: 50%;
  background: rgb(255 255 255 / 62%);
  content: "";
}

.swim-goggles::before { left: 0.35rem; }
.swim-goggles::after { right: 0.35rem; }

.swim-bubble {
  position: absolute;
  bottom: 12%;
  border: 2px solid rgb(255 255 255 / 76%);
  border-radius: 50%;
  opacity: 0;
}

.swim-bubble--one { right: 16%; width: 1rem; height: 1rem; }
.swim-bubble--two { right: 10%; width: 1.6rem; height: 1.6rem; animation-delay: -1.2s !important; }
.swim-bubble--three { left: 10%; width: 0.8rem; height: 0.8rem; animation-delay: -2.3s !important; }

.context-world[data-mode="swimming"][data-revealed="true"] .swim-bubble {
  animation: swim-bubble-rise 3.6s ease-in infinite;
}

@keyframes swim-bubble-rise {
  0% { opacity: 0; transform: translateY(2rem) scale(0.7); }
  25% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-12rem) scale(1.15); }
}

.paint-swash {
  position: absolute;
  height: 2.3rem;
  border-radius: 999px;
  opacity: 0.28;
  transform: rotate(-9deg) scaleX(0);
  transform-origin: left center;
}

.paint-swash--one { top: 24%; left: -2%; width: 28%; background: var(--color-cyan); }
.paint-swash--two { right: -3%; bottom: 31%; width: 25%; background: var(--color-orange); transform-origin: right center; }

.context-world[data-mode="painting"] .paint-swash {
  animation: paint-swash 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.context-world[data-mode="painting"] .paint-swash--two { animation-delay: 160ms; }

@keyframes paint-swash {
  to { transform: rotate(-9deg) scaleX(1); }
}

.paint-palette {
  position: absolute;
  right: 12%;
  bottom: 18%;
  width: 9.5rem;
  height: 7.2rem;
  border: 3px solid var(--color-primary);
  border-radius: 62% 48% 58% 42%;
  background:
    radial-gradient(circle at 28% 32%, var(--color-orange) 0 0.42rem, transparent 0.46rem),
    radial-gradient(circle at 52% 25%, var(--color-cyan) 0 0.42rem, transparent 0.46rem),
    radial-gradient(circle at 72% 46%, var(--color-green) 0 0.42rem, transparent 0.46rem),
    #fff7e7;
  filter: drop-shadow(0 0.8rem 0.6rem rgb(39 52 112 / 12%));
  transform: rotate(-8deg);
}

.paint-brush {
  position: absolute;
  right: 19%;
  bottom: 19%;
  width: 0.78rem;
  height: 11rem;
  border: 2px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-orange);
  transform: rotate(34deg);
  transform-origin: bottom center;
}

.context-world[data-mode="painting"][data-revealed="true"] .paint-brush {
  animation: paint-brush 1.8s ease-in-out infinite alternate;
}

@keyframes paint-brush {
  to { transform: rotate(22deg) translateY(-0.5rem); }
}

.snowflake {
  position: absolute;
  top: -2rem;
  color: white;
  font-size: 1.5rem;
  text-shadow: 0 0 0.7rem white;
}

.snowflake--one { left: 8%; }
.snowflake--two { left: 25%; font-size: 0.9rem; animation-delay: -1.7s !important; }
.snowflake--three { right: 18%; animation-delay: -3.1s !important; }
.snowflake--four { right: 5%; font-size: 1rem; animation-delay: -4.2s !important; }

.context-world[data-mode="cold"] .snowflake {
  animation: snowfall 5.4s linear infinite;
}

@keyframes snowfall {
  to { transform: translate(3rem, 54rem) rotate(180deg); }
}

.winter-mitten {
  position: absolute;
  right: 14%;
  bottom: 19%;
  width: 7rem;
  height: 8rem;
  border: 3px solid var(--color-primary);
  border-radius: 2.6rem 2.6rem 1.2rem 1.2rem;
  background: #8fcfca;
  filter: drop-shadow(0 0.8rem 0.6rem rgb(39 52 112 / 12%));
  transform: rotate(12deg);
}

.winter-mitten::after {
  position: absolute;
  top: 2.3rem;
  left: -1.45rem;
  width: 2.5rem;
  height: 2.1rem;
  border: 3px solid var(--color-primary);
  border-radius: 60% 25% 55% 40%;
  background: inherit;
  content: "";
}

.summer-sun {
  position: absolute;
  top: 10%;
  right: 12%;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  background: #ffcc70;
  box-shadow: 0 0 0 1.2rem rgb(255 181 72 / 13%), 0 0 5rem rgb(255 181 72 / 34%);
}

.context-world[data-mode="hot"] .summer-sun {
  animation: summer-sun 2.4s ease-in-out infinite;
}

@keyframes summer-sun {
  50% { box-shadow: 0 0 0 1.7rem rgb(255 181 72 / 10%), 0 0 6rem rgb(255 181 72 / 42%); transform: scale(1.04); }
}

.summer-hat {
  position: absolute;
  right: 12%;
  bottom: 18%;
  width: 10rem;
  height: 2.8rem;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  background: #fff0b8;
  filter: drop-shadow(0 0.8rem 0.6rem rgb(39 52 112 / 12%));
}

.summer-hat::before {
  position: absolute;
  right: 1.6rem;
  bottom: 0.7rem;
  left: 1.6rem;
  height: 3.8rem;
  border: 3px solid var(--color-primary);
  border-radius: 3rem 3rem 0.6rem 0.6rem;
  background: #ffdc82;
  content: "";
}

.context-calendar {
  position: absolute;
  right: 14%;
  bottom: 20%;
  display: grid;
  width: 8rem;
  height: 8rem;
  border: 3px solid var(--color-primary);
  border-radius: 1.2rem;
  place-items: center;
  background: rgb(255 255 255 / 72%);
  color: var(--color-green);
  font-size: 2.5rem;
  font-weight: 600;
  box-shadow: 0 0.8rem 1.2rem rgb(39 52 112 / 10%);
}

.context-dot {
  position: absolute;
  right: 9%;
  bottom: 31%;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.45;
}

.context-dot--two { right: 7%; bottom: 34%; }
.context-dot--three { right: 5%; bottom: 37%; }

.context-world[data-mode="waiting"] .context-dot,
.context-world[data-mode="tuesday"] .context-dot {
  animation: context-dot-pulse 1.4s ease-in-out infinite;
}

.context-dot--two { animation-delay: 160ms !important; }
.context-dot--three { animation-delay: 320ms !important; }

@keyframes context-dot-pulse {
  50% { opacity: 1; transform: translateY(-0.35rem); }
}

.context-mascot {
  position: absolute;
  z-index: 4;
  right: 1.5%;
  bottom: 4%;
  width: 26rem;
  aspect-ratio: 1;
  pointer-events: none;
}

.panda-state {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 1rem 0.75rem rgb(39 52 112 / 18%));
  transform-origin: 50% 76%;
  transition: opacity 320ms ease, transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.context-mascot::before,
.context-mascot::after {
  position: absolute;
  z-index: 3;
  display: block;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.context-world[data-mode="tennis"] .panda-state--tennis,
.context-world[data-mode="swimming"] .panda-state--swimming,
.context-world[data-mode="painting"] .panda-state--painting,
.context-world[data-mode="cold"] .panda-state--cold,
.context-world[data-mode="hot"] .panda-state--hot,
.context-world[data-mode="waiting"] .panda-state--thinking,
.context-world[data-mode="tuesday"] .panda-state--thinking {
  opacity: 1;
}

.context-world[data-mode="tennis"] .panda-state--tennis,
.context-world[data-mode="painting"] .panda-state--painting,
.context-world[data-mode="hot"] .panda-state--hot {
  animation: panda-character-idle 2.8s ease-in-out infinite;
}

.context-world[data-mode="tennis"][data-revealed="true"] .panda-state--tennis {
  animation: panda-tennis-action 1.25s ease-in-out infinite;
}

.context-world[data-mode="swimming"] .panda-state--swimming {
  animation: panda-swim-action 2s ease-in-out infinite;
}

.context-world[data-mode="painting"][data-revealed="true"] .panda-state--painting {
  animation: panda-paint-action 1.35s ease-in-out infinite;
}

.context-world[data-mode="cold"] .panda-state--cold {
  animation: panda-cold-action 0.48s ease-in-out infinite;
}

.context-world[data-mode="hot"][data-revealed="true"] .panda-state--hot {
  animation: panda-hot-action 0.95s ease-in-out infinite;
}

.context-world[data-mode="waiting"] .panda-state--thinking,
.context-world[data-mode="tuesday"] .panda-state--thinking {
  animation: panda-think-action 2.1s ease-in-out infinite;
}

@keyframes gear-keyword-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(233 104 82 / 0%); transform: translateY(0); }
  45% { box-shadow: 0 0 0 0.38rem rgb(233 104 82 / 18%); transform: translateY(-0.09rem); }
}

.context-stage[data-world-revealed="true"] .context-step:not([hidden]) .reply-keyword:nth-of-type(1) {
  animation: reply-keyword-arrive 420ms ease-out both, gear-keyword-pulse 680ms ease 500ms both;
}

.context-stage[data-world-revealed="true"] .context-step:not([hidden]) .reply-keyword:nth-of-type(2) {
  animation: reply-keyword-arrive 420ms ease-out both, gear-keyword-pulse 680ms ease 1.39s both;
}

.context-stage[data-world-revealed="true"] .context-step:not([hidden]) .reply-keyword:nth-of-type(3) {
  animation: reply-keyword-arrive 420ms ease-out both, gear-keyword-pulse 680ms ease 2.28s both;
}

.context-world[data-mode="tennis"][data-revealed="true"] .context-mascot::before {
  top: 19%;
  right: 5%;
  width: 38%;
  height: 43%;
  border-top: 0.3rem solid rgb(233 104 82 / 70%);
  border-right: 0.2rem solid rgb(233 104 82 / 34%);
  border-radius: 50%;
  opacity: 1;
  animation: tennis-swoosh 1.25s ease-in-out infinite;
}

.context-world[data-mode="swimming"] .context-mascot::before {
  bottom: 17%;
  left: 4%;
  width: 74%;
  height: 1.2rem;
  border-top: 0.24rem solid rgb(0 193 222 / 58%);
  border-radius: 50%;
  box-shadow: 0 0.72rem 0 -0.1rem rgb(0 174 141 / 34%);
  opacity: 1;
  animation: swim-wake 1.7s ease-in-out infinite;
}

.context-world[data-mode="painting"][data-revealed="true"] .context-mascot::before {
  top: 7%;
  left: 4%;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 1rem 0.8rem 0 -0.08rem var(--color-cyan), 2rem 0.12rem 0 -0.14rem #ffb548;
  opacity: 1;
  animation: paint-drops 1.35s ease-out infinite;
}

.context-world[data-mode="cold"] .context-mascot::after {
  top: 22%;
  left: 12%;
  width: 3.2rem;
  height: 1.45rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(255 255 255 / 84%) 0 25%, rgb(255 255 255 / 38%) 50%, transparent 72%);
  opacity: 1;
  animation: cold-breath 1.8s ease-out infinite;
}

.context-world[data-mode="hot"][data-revealed="true"] .context-mascot::before {
  top: 30%;
  right: -2%;
  width: 4.7rem;
  height: 1.45rem;
  border-top: 0.18rem solid rgb(233 104 82 / 52%);
  border-bottom: 0.18rem solid rgb(233 104 82 / 34%);
  border-radius: 50%;
  opacity: 1;
  animation: fan-breeze 0.95s ease-in-out infinite;
}

.context-world[data-mode="waiting"] .context-mascot::after,
.context-world[data-mode="tuesday"] .context-mascot::after {
  top: 8%;
  right: 25%;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: #fff7c9;
  box-shadow: 1.05rem 0.6rem 0 -0.08rem white, -0.7rem 1.15rem 0 -0.12rem var(--color-cyan);
  opacity: 1;
  animation: thinking-sparkle 1.8s ease-in-out infinite;
}

.context-world[data-mode="tennis"][data-revealed="true"] .context-mascot::before,
.context-world[data-mode="swimming"][data-revealed="true"] .context-mascot::before,
.context-world[data-mode="painting"][data-revealed="true"] .context-mascot::before,
.context-world[data-mode="hot"][data-revealed="true"] .context-mascot::before,
.context-world[data-mode="cold"][data-revealed="true"] .context-mascot::after {
  opacity: 0;
  animation: none;
}

@keyframes panda-character-idle {
  50% { transform: translateY(-0.28rem) rotate(-0.7deg); }
}

@keyframes panda-tennis-action {
  0%, 100% { transform: translate(-0.45rem, 0.08rem) rotate(-1.8deg) scale(0.99); }
  48% { transform: translate(0.65rem, -0.5rem) rotate(2.4deg) scale(1.025); }
}

@keyframes panda-swim-action {
  0%, 100% { transform: translate(0.65rem, 0.18rem) rotate(1.6deg); }
  50% { transform: translate(-0.95rem, -0.5rem) rotate(-2deg); }
}

@keyframes panda-paint-action {
  0%, 100% { transform: translate(0.25rem, 0.08rem) rotate(1.4deg) scale(0.995); }
  50% { transform: translate(-0.35rem, -0.52rem) rotate(-2.4deg) scale(1.025); }
}

@keyframes panda-cold-action {
  0%, 100% { transform: translateX(-0.12rem) rotate(-0.35deg); }
  50% { transform: translateX(0.12rem) rotate(0.35deg); }
}

@keyframes panda-hot-action {
  0%, 100% { transform: translateX(-0.22rem) rotate(-0.8deg); }
  50% { transform: translate(0.38rem, -0.28rem) rotate(1.4deg); }
}

@keyframes panda-think-action {
  0%, 100% { transform: translateY(0.12rem) rotate(-1.2deg); }
  50% { transform: translateY(-0.48rem) rotate(2.2deg); }
}

@keyframes tennis-swoosh {
  0%, 100% { opacity: 0.18; transform: rotate(-28deg) scale(0.82); }
  48% { opacity: 0.85; transform: rotate(8deg) scale(1.05); }
}

@keyframes swim-wake {
  0%, 100% { opacity: 0.25; transform: translateX(0.75rem) scaleX(0.75); }
  50% { opacity: 0.85; transform: translateX(-0.85rem) scaleX(1.05); }
}

@keyframes paint-drops {
  0% { opacity: 0; transform: translate(1.2rem, 1rem) scale(0.5); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: translate(-0.75rem, -1.4rem) scale(1.05); }
}

@keyframes cold-breath {
  0% { opacity: 0; transform: translate(0.8rem, 0.2rem) scale(0.55); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-1.25rem, -0.7rem) scale(1.25); }
}

@keyframes fan-breeze {
  0%, 100% { opacity: 0.18; transform: translateX(-0.35rem) scaleX(0.72); }
  50% { opacity: 0.8; transform: translateX(0.75rem) scaleX(1.08); }
}

@keyframes thinking-sparkle {
  0%, 100% { opacity: 0.22; transform: scale(0.72) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(45deg); }
}

.context-journey {
  position: absolute;
  z-index: 8;
  top: 1.5rem;
  left: 3rem;
  width: min(25rem, calc(54% - 3rem));
}

.context-journey ol {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  list-style: none;
}

.context-journey ol::before {
  position: absolute;
  top: 0.86rem;
  right: 1.25rem;
  left: 1.25rem;
  z-index: -1;
  height: 2px;
  background: rgb(39 52 112 / 14%);
  content: "";
}

.context-journey li {
  display: grid;
  justify-items: center;
  min-width: 0;
  color: rgb(39 52 112 / 43%);
}

.context-journey button {
  display: grid;
  min-width: 3.2rem;
  padding: 0;
  border: 0;
  justify-items: center;
  gap: 0.2rem;
  background: transparent;
  color: inherit;
  cursor: default;
}

.context-journey button:disabled {
  opacity: 1;
}

.context-journey button span {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid rgb(39 52 112 / 18%);
  border-radius: 50%;
  background: white;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
}

.context-journey button em {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-journey li.is-active,
.context-journey li.is-complete {
  color: var(--color-primary);
}

.context-journey li.is-active button span {
  border-color: var(--color-green);
  background: var(--color-green);
  color: white;
  box-shadow: 0 0 0 6px rgb(0 174 141 / 12%);
}

.context-journey li.is-complete button span {
  border-color: var(--color-green);
  background: var(--surface-green);
  color: #006b56;
}

.context-journey li.is-available:not(.is-active) button {
  cursor: pointer;
}

.context-journey li.is-available:not(.is-active) button:hover span {
  border-color: var(--color-green);
  transform: translateY(-0.08rem);
}

.context-step {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(43rem, 57%);
  margin: 0;
  padding: 6.2rem 0 2.8rem 3rem;
  align-items: stretch;
  gap: 1.15rem;
}

.context-step:not([hidden]) {
  animation: context-step-enter 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes context-step-enter {
  from {
    opacity: 0;
    transform: translateY(0.7rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.context-step__heading {
  grid-column: 1 / -1;
  max-width: 43rem;
  margin: 0 0 0.65rem;
  text-align: left;
}

.context-step > .context-action-row,
.context-step > .prediction-panel,
.context-step > .context-takeaway,
.context-step > .feedback-line,
.context-step > .explore-controls,
.context-step > .weather-options {
  grid-column: 1 / -1;
}

.context-kicker {
  margin: 0 0 0.45rem;
  color: #00735d;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: none;
}

.context-step h1,
.context-step h2 {
  margin: 0;
  color: var(--color-primary);
  font-size: 2.65rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

html[lang="en"] .context-step[data-context-step="0"] .context-step__heading {
  width: 50rem;
  max-width: none;
}

html[lang="en"] .context-step[data-context-step="0"] h1 {
  font-size: 2rem;
  white-space: nowrap;
}

.context-step__lede {
  margin: 0.65rem 0 0;
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.5;
  text-align: left;
}

.chat-window {
  overflow: hidden;
  border: 1px solid rgb(39 52 112 / 14%);
  border-radius: 1.15rem;
  background: white;
  box-shadow: 0 18px 44px rgb(39 52 112 / 10%);
}

.chat-window--intro {
  width: min(39rem, 100%);
  transition: width 320ms ease;
}

.chat-window--intro .chat-transcript {
  min-height: 11rem;
  transition: min-height 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chat-window--intro.is-expanded .chat-transcript {
  min-height: 18.5rem;
}

.chat-window__bar {
  display: flex;
  min-height: 3.65rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.chat-window__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-primary);
  font-weight: 700;
}

.chat-window__logo,
.chat-avatar {
  display: grid;
  flex: 0 0 auto;
  border-radius: 0.55rem;
  place-items: center;
  background: var(--color-primary);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
}

.chat-window__logo {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

.chat-transcript {
  min-height: 18.5rem;
  padding: 1.75rem 2rem;
}

.chat-message {
  display: flex;
  margin-bottom: 1.25rem;
  align-items: flex-start;
  gap: 0.7rem;
}

.chat-message:last-child {
  margin-bottom: 0;
}

.chat-message--user {
  justify-content: flex-end;
}

.chat-avatar {
  width: 1.65rem;
  height: 1.65rem;
  margin-top: 0;
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-primary);
}

.chat-message__content {
  min-width: 0;
  max-width: min(85%, 36rem);
}

.chat-message--user .chat-message__content {
  position: relative;
  display: block;
  max-width: min(96%, 36rem);
}

.chat-bubble {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
}

.chat-message--user .chat-bubble {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  padding: 0.65rem 1rem;
  border-radius: 1rem 1rem 0.3rem 1rem;
  background: var(--color-primary);
  color: white;
}

.chat-message--ai .chat-bubble {
  min-height: 1.65rem;
  padding-top: 0.06rem;
}

.inline-context-picker {
  position: relative;
  z-index: 8;
  display: inline-block;
}

.inline-context-word {
  display: inline-flex;
  margin: -0.08rem 0.05rem;
  padding: 0.1rem 0.38rem;
  border: 1px solid rgb(255 255 255 / 66%);
  border-radius: 0.42rem;
  align-items: center;
  background: #bdeadd;
  box-shadow: 0 0 0 0.2rem rgb(0 174 141 / 10%);
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  animation: context-word-invite 1.8s ease-in-out infinite;
}

.inline-context-word:hover,
.inline-context-word:focus-visible,
.inline-context-word[aria-expanded="true"] {
  background: #8ddfd0;
  box-shadow: 0 0 0 0.3rem rgb(0 174 141 / 18%);
  outline: 0;
}

.inline-context-word.is-changed {
  animation: context-word-changed 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

[data-open-guided-edit]:not([aria-expanded="true"]):not(.is-changed) {
  animation: guided-context-bounce 1.45s cubic-bezier(0.35, 0.1, 0.25, 1) infinite;
}

.inline-context-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.58rem);
  left: 50%;
  display: flex;
  width: max-content;
  padding: 0.38rem;
  border: 1px solid rgb(0 174 141 / 30%);
  border-radius: 0.72rem;
  gap: 0.35rem;
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 0.8rem 2rem rgb(39 52 112 / 18%);
  transform: translateX(-50%);
  animation: context-options-open 220ms ease-out both;
}

.inline-context-options::before {
  position: absolute;
  top: -0.34rem;
  left: calc(50% - 0.35rem);
  width: 0.7rem;
  height: 0.7rem;
  border-top: 1px solid rgb(0 174 141 / 30%);
  border-left: 1px solid rgb(0 174 141 / 30%);
  background: white;
  content: "";
  transform: rotate(45deg);
}

.inline-context-options button {
  position: relative;
  z-index: 1;
  min-height: 2.2rem;
  padding: 0.38rem 0.72rem;
  border: 1px solid rgb(39 52 112 / 18%);
  border-radius: 0.52rem;
  background: white;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}

.inline-context-options button:hover,
.inline-context-options button:focus-visible {
  border-color: var(--color-cyan);
  background: #eaf9fc;
  outline: 0;
}

.inline-context-options button[aria-pressed="true"] {
  border-color: var(--color-green);
  background: var(--surface-green);
  box-shadow: inset 0 0 0 1px var(--color-green);
  color: #006b56;
}

.inline-context-options--wide {
  display: grid;
  width: min(19rem, calc(100vw - 3rem));
  grid-template-columns: 1fr;
}

.inline-context-options--wide button {
  width: 100%;
  text-align: left;
}

[data-guided-after].is-replaying,
.chat-message.is-replaying {
  animation: guided-message-enter 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes context-word-invite {
  50% { box-shadow: 0 0 0 0.34rem rgb(0 174 141 / 16%); transform: translateY(-0.04rem); }
}

@keyframes guided-context-bounce {
  0%, 58%, 100% { box-shadow: 0 0 0 0.2rem rgb(0 174 141 / 10%); transform: translateY(0); }
  68% { box-shadow: 0 0 0 0.34rem rgb(0 174 141 / 18%); transform: translateY(-0.34rem); }
  77% { transform: translateY(0.08rem); }
  86% { transform: translateY(-0.12rem); }
}

@keyframes context-word-changed {
  0% { background: white; box-shadow: 0 0 0 0 rgb(0 193 222 / 0%); transform: scale(0.92); }
  55% { background: #8ddfd0; box-shadow: 0 0 0 0.55rem rgb(0 174 141 / 18%); transform: scale(1.08); }
  100% { background: #bdeadd; box-shadow: 0 0 0 0.2rem rgb(0 174 141 / 10%); transform: scale(1); }
}

@keyframes context-options-open {
  from { opacity: 0; transform: translate(-50%, -0.35rem) scale(0.96); }
}

@keyframes guided-message-enter {
  from { opacity: 0; transform: translateY(0.55rem); }
}

.chat-composer {
  padding: 0.85rem 1.5rem 1rem;
  border-top: 1px solid var(--color-border);
}

.chat-composer__box {
  display: flex;
  padding: 0.72rem;
  border: 1px solid #cfd4e1;
  border-radius: 0.9rem;
  align-items: flex-end;
  gap: 0.75rem;
  background: white;
}

.chat-composer__field {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-composer textarea {
  display: block;
  width: 100%;
  min-height: 1.9rem;
  margin: 0;
  padding: 0.1rem 0;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}

.chat-send__hint {
  flex: 0 0 auto;
  align-self: center;
  color: #00735d;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  animation: send-hint-nudge 1.5s ease-in-out infinite;
}

.chat-send__hint::after {
  margin-left: 0.25rem;
  content: "→";
}

[data-send-first] {
  animation: send-button-pulse 1.8s ease-in-out infinite;
}

@keyframes send-hint-nudge {
  50% { transform: translateX(0.22rem); }
}

@keyframes send-button-pulse {
  50% { box-shadow: 0 0 0 0.42rem rgb(0 174 141 / 14%); transform: translateY(-0.06rem); }
}

.chat-send,
.context-action {
  border: 0;
  background: var(--color-primary);
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.chat-send {
  display: grid;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.7rem;
  place-items: center;
  font-size: 1.15rem;
}

.chat-send:disabled,
.context-action:disabled {
  opacity: 0.42;
  cursor: default;
}

.chat-typing {
  display: inline-flex;
  min-height: 1.8rem;
  padding: 0.45rem 0;
  align-items: center;
  gap: 0.3rem;
}

.chat-typing i {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--color-muted);
  animation: chat-bounce 850ms ease-in-out infinite;
}

.chat-typing i:nth-child(2) {
  animation-delay: 110ms;
}

.chat-typing i:nth-child(3) {
  animation-delay: 220ms;
}

@keyframes chat-bounce {
  50% { transform: translateY(-0.28rem); opacity: 0.45; }
}

.context-action-row {
  display: flex;
  margin-top: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.context-action {
  min-height: 3rem;
  padding: 0.72rem 1.2rem;
  border-radius: 999px;
}

.context-action--secondary {
  border: 1px solid rgb(39 52 112 / 28%);
  background: white;
  color: var(--color-primary);
}

.edit-panel,
.prediction-panel,
.concept-panel,
.answer-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.8rem;
  background: var(--surface-neutral);
}

.edit-panel p,
.prediction-panel p,
.concept-panel p,
.answer-panel p {
  margin: 0;
}

.edit-options,
.check-options,
.weather-options {
  display: flex;
  margin-top: 0.8rem;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.edit-option,
.check-option,
.weather-option {
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgb(39 52 112 / 22%);
  border-radius: 0.65rem;
  background: white;
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 600;
  text-align: left;
}

.edit-option[aria-pressed="true"],
.weather-option[aria-pressed="true"] {
  border-color: var(--color-orange);
  box-shadow: inset 0 0 0 1px var(--color-orange);
  background: var(--surface-orange);
}

.check-option {
  border-color: rgb(0 174 141 / 24%);
  background: #f1fbf8;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.check-option:hover,
.check-option:focus-visible {
  border-color: var(--color-cyan);
  background: #eaf9fc;
  outline: 0;
  transform: translateY(-0.06rem);
}

.check-option.is-correct {
  border-color: var(--color-green);
  background: var(--color-green);
  box-shadow: 0 0 0 0.22rem rgb(0 174 141 / 14%);
  color: white;
}

.check-option.is-wrong {
  border-color: var(--color-orange);
  background: var(--surface-orange);
  color: #8f3828;
}

.weather-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edit-sentence {
  margin-top: 0.75rem !important;
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: 600;
}

.edit-sentence mark {
  padding: 0.05rem 0.18rem;
  border-radius: 0.2rem;
  background: var(--surface-orange);
  color: #9b3f2c;
}

.reply-keyword {
  display: inline;
  padding: 0.04rem 0.2rem;
  border-radius: 0.25rem;
  background: #e8f3aa;
  color: var(--color-primary);
  font-weight: 700;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: reply-keyword-arrive 420ms ease-out both;
}

.reply-keyword--swimming {
  background: #c9eff5;
  color: #176678;
}

.reply-keyword--painting {
  background: #ffe2d7;
  color: #93402f;
}

.reply-keyword--cold {
  background: #dcefed;
  color: #215c68;
}

.reply-keyword--hot {
  background: #ffedbd;
  color: #8b5520;
}

.reply-keyword--tuesday {
  background: #ece9f9;
  color: var(--color-primary);
}

@keyframes reply-keyword-arrive {
  from { background-color: transparent; box-shadow: 0 0 0 0 rgb(0 174 141 / 0%); }
  to { box-shadow: 0 0 0 0.12rem rgb(0 174 141 / 8%); }
}

.feedback-line {
  min-height: 1.6rem;
  margin: 0.75rem 0 0;
  color: #9b3f2c;
  font-size: var(--text-sm);
  font-weight: 600;
}

.feedback-line.is-success {
  color: #00735d;
}

.context-takeaway {
  width: min(39rem, 100%);
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--color-green);
  border-radius: 0 0.75rem 0.75rem 0;
  background: rgb(230 248 243 / 88%);
  color: var(--color-ink);
  animation: context-takeaway-enter 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.context-takeaway p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.context-takeaway .context-takeaway__title {
  margin-bottom: 0.3rem;
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: 700;
}

.context-takeaway__title strong {
  padding: 0.06rem 0.28rem;
  border-radius: 0.28rem;
  background: #bdeadd;
  color: #006b56;
  box-shadow: 0 0 0 0.16rem rgb(0 174 141 / 10%);
}

@keyframes context-takeaway-enter {
  from { opacity: 0; transform: translateY(0.45rem); }
  to { opacity: 1; transform: translateY(0); }
}

.explore-controls {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(39 52 112 / 12%);
  border-radius: 0.85rem;
  background: rgb(255 255 255 / 74%);
}

.explore-controls p {
  margin: 0;
  color: var(--color-primary);
  font-weight: 600;
}

.conversation-extension {
  width: min(41rem, 100%);
}

.conversation-extension .chat-transcript {
  height: 22rem;
  min-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-color: rgb(39 52 112 / 24%) transparent;
  scrollbar-width: thin;
}

.conversation-extension .chat-message {
  margin-bottom: 0.9rem;
}

.followup-composer {
  background: rgb(248 250 253 / 96%);
}

.context-anchor {
  margin: 0 0.05rem;
  padding: 0.08rem 0.32rem;
  border-radius: 0.34rem;
  background: #bfeaf1;
  color: #166477;
}

.context-anchor.is-context-linked,
.reply-keyword.is-context-linked {
  animation: context-link-pulse 820ms ease 2 both;
}

@keyframes context-link-pulse {
  50% {
    background: #8ddfd0;
    box-shadow: 0 0 0 0.32rem rgb(0 174 141 / 14%);
    transform: translateY(-0.04rem);
  }
}

.continuation-takeaway {
  width: min(41rem, 100%);
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--color-green);
  border-radius: 0 0.8rem 0.8rem 0;
  background: rgb(230 248 243 / 92%);
  animation: context-takeaway-enter 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.continuation-takeaway p {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.continuation-takeaway p + p {
  margin-top: 0.22rem;
}

.continuation-takeaway strong {
  color: #006b56;
}

.continuation-takeaway mark {
  padding: 0.04rem 0.24rem;
  border-radius: 0.28rem;
  background: #bdeadd;
  color: #006b56;
  font-weight: 700;
}

.context-sources {
  width: min(100%, 63rem);
  margin: 1.1rem auto 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.context-sources summary {
  width: fit-content;
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
}

.context-sources div {
  margin-top: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.7rem;
  background: rgb(255 255 255 / 75%);
}

.context-sources p,
.context-sources ul {
  margin: 0;
}

.context-sources ul {
  margin-top: 0.45rem;
  padding-left: 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing i,
  .context-step:not([hidden]),
  .context-takeaway,
  .continuation-takeaway,
  .context-world__star,
  .context-world.is-shifting .activity-scene,
  .context-world .tennis-ball,
  .context-world .swim-wave,
  .context-world .swim-bubble,
  .context-world .paint-swash,
  .context-world .paint-brush,
  .context-world .snowflake,
  .context-world .summer-sun,
  .context-world .context-dot,
  .chat-send__hint,
  [data-send-first],
  .inline-context-word,
  .inline-context-word.is-changed,
  .inline-context-options,
  [data-guided-after].is-replaying,
  .chat-message.is-replaying,
  .context-mascot,
  .context-mascot::before,
  .context-mascot::after,
  .panda-state,
  .reply-keyword,
  .context-anchor.is-context-linked,
  .reply-keyword.is-context-linked {
    animation: none;
  }
}