:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #ddd7cd;
  color: #202522;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #ddd7cd;
}

button {
  font: inherit;
}

.app-shell {
  position: relative;
  width: min(100vw, 430px);
  height: min(100vh, 900px);
  min-height: 680px;
  overflow: hidden;
  background: #f8f4ed;
  box-shadow: 0 18px 60px rgb(36 39 36 / 16%);
}

.screen {
  width: 100%;
  height: 100%;
}

.entry-home,
.foundation-home,
.video-library,
.video-player-screen {
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: #f8f4ed;
}

.entry-header,
.library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.entry-home {
  position: relative;
}

.entry-header {
  padding-right: 62px;
}

.entry-utilities {
  position: absolute;
  z-index: 3;
  top: max(22px, env(safe-area-inset-top));
  right: 18px;
  width: 62px;
  display: grid;
  gap: 7px;
}

.entry-utility {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #656c67;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.entry-utility .icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #d5ccc0;
  border-radius: 50%;
  background: #fffdf9;
  box-shadow: 0 4px 12px rgb(52 55 52 / 9%);
  font-size: 19px;
}

.entry-share-button {
  color: #d05f4d;
}

.entry-guide-button {
  color: #1f5f58;
  font-size: 17px !important;
  font-weight: 850;
}

.entry-intro,
.library-intro { margin-top: 78px; }

.entry-home .entry-intro { margin-top: 108px; }

.entry-home .home-brand { gap: 13px; }

.entry-home .home-brand img {
  width: 86px;
  height: 86px;
  border-width: 3px;
  object-position: 50% 28%;
  box-shadow: 0 5px 16px rgb(58 49 41 / 18%);
}

.entry-home .home-brand span { font-size: 14px; }
.entry-home .home-brand strong { font-size: 19px; }
.entry-intro p,
.library-intro p { margin: 0 0 10px; color: #cf4f39; font-size: 13px; font-weight: 800; }
.entry-intro > p {
  color: #b94735;
  font-family: "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}

.entry-intro > p span {
  margin-left: 3px;
  color: #1f5f58;
  font-size: 18px;
}
.entry-intro h1,
.library-intro h1 { margin: 0; font-size: 38px; line-height: 1.18; letter-spacing: 0; }

.entry-paths { margin-top: 42px; display: grid; gap: 14px; }
.path-card {
  width: 100%; min-height: 138px; padding: 20px; display: grid;
  grid-template-columns: 42px 1fr 24px; align-items: center; gap: 12px;
  border: 1px solid #d4cbc0; border-radius: 8px; color: #252b27; text-align: left; cursor: pointer;
}
.foundation-path { background: #edf5ef; }
.trial-path { background: #fff2e7; }
.path-number { align-self: start; color: #cf4f39; font-size: 12px; font-weight: 850; }
.path-copy { display: grid; gap: 9px; }
.path-copy strong { font-size: 22px; line-height: 1.2; }
.path-copy small { color: #636a65; font-size: 14px; line-height: 1.55; }
.path-arrow { font-size: 23px; }

.path-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: #8a8e8a;
  font-size: 12px;
}

.path-divider::before,
.path-divider::after {
  content: "";
  height: 1px;
  background: #d7cfc4;
}

.path-invitation {
  margin: 0;
  color: #303632;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.library-header > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.library-header div span,
.library-count { color: #747a76; font-size: 12px; }
.library-header div strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.chapter-list,
.lesson-list { margin-top: 38px; display: grid; gap: 10px; }
.chapter-row,
.lesson-row { width: 100%; border: 1px solid #d6cec2; border-radius: 8px; background: #fffdf9; color: #282e2a; text-align: left; cursor: pointer; }
.chapter-row { min-height: 88px; padding: 14px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; }
.chapter-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #1f5f58; color: #fff; font-size: 13px; font-weight: 800; }
.chapter-copy { display: grid; gap: 4px; }
.chapter-copy strong { font-size: 18px; }
.chapter-copy small { color: #747a76; font-size: 12px; line-height: 1.4; }
.chapter-meta { color: #747a76; font-size: 12px; white-space: nowrap; }
.chapter-meta b { margin-left: 4px; color: #37403b; font-size: 17px; }

.lesson-list { margin-top: 32px; padding-bottom: 12px; }
.lesson-row { min-height: 64px; padding: 12px 15px; display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 10px; }
.lesson-row span { color: #cf4f39; font-size: 12px; font-weight: 800; }
.lesson-row strong { font-size: 15px; line-height: 1.35; }
.lesson-row b { color: #1f5f58; font-size: 13px; text-align: center; }

.video-player-screen { display: grid; grid-template-rows: 44px auto auto 1fr; gap: 12px; align-content: start; }
.video-header { grid-template-columns: 38px 1fr auto; }
.video-heading { min-width: 0; display: grid; gap: 2px; }
.video-heading span { color: #747a76; font-size: 11px; }
.video-heading strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.video-position { color: #747a76; font-size: 12px; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #161918; }
.video-frame video { width: 100%; height: 100%; display: block; }
.video-copy { align-self: start; min-height: 0; }
.video-copy > p { margin: 0 0 5px; color: #cf4f39; font-size: 11px; font-weight: 800; }
.video-copy h1 { margin: 0; font-size: 18px; line-height: 1.35; letter-spacing: 0; }
.video-copy span { display: block; margin-top: 7px; color: #666d68; font-size: 12px; line-height: 1.45; }
.video-follow-note { margin-top: 11px; padding-top: 10px; border-top: 1px solid #ded7cc; color: #4f5d55; font-size: 13px; line-height: 1.5; }
.video-follow-note p { margin: 0; }
.video-follow-refrain { display: grid; gap: 0; margin: 9px 0; color: #1f5f58; font-size: 14px; line-height: 1.5; }
.video-follow-refrain strong { font-weight: 750; }
.video-follow-note .video-follow-advanced { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e8e1d8; color: #666d68; font-size: 13px; }
.video-nav { display: grid; grid-template-columns: 1fr 1.5fr; align-self: end; gap: 10px; }
.video-nav button { min-height: 50px; }
.video-nav button:disabled { opacity: 0.45; cursor: default; }

@media (max-height: 760px) {
  .video-player-screen { padding-top: 14px; padding-bottom: 14px; gap: 8px; }
  .video-frame { max-height: 175px; aspect-ratio: auto; }
  .video-nav button { min-height: 44px; }
}

.hidden {
  display: none !important;
}

.utility-modal {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  align-items: end;
}

.utility-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(28 32 29 / 54%);
  cursor: pointer;
}

.utility-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: calc(100% - 34px);
  padding: 22px 20px max(22px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: 8px 8px 0 0;
  background: #f8f4ed;
  box-shadow: 0 -16px 45px rgb(26 30 27 / 22%);
}

.utility-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.utility-panel-header span {
  display: block;
  margin-bottom: 5px;
  color: #cf5945;
  font-size: 11px;
  font-weight: 800;
}

.utility-panel-header h2 {
  margin: 0;
  color: #252b27;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: 0;
}

.utility-close-button {
  flex: 0 0 auto;
  border: 1px solid #d6cdc1;
  border-radius: 50%;
  background: #fffdf9;
  font-size: 25px;
  line-height: 1;
}

.share-poster-preview {
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin: 18px auto 0;
  display: block;
  border: 1px solid #ded4c8;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 8px 22px rgb(45 44 40 / 12%);
}

.share-save-note {
  margin: 13px auto 0;
  max-width: 340px;
  color: #69706b;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.utility-panel-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.utility-download-button {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.utility-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: #68706b;
  font-size: 11px;
  text-align: center;
}

.guide-intro,
.guide-advice {
  margin-top: 18px;
  padding: 16px;
  border-left: 4px solid #d6614d;
  background: #fffaf4;
}

.guide-intro strong,
.guide-advice strong {
  color: #26312c;
  font-size: 16px;
}

.guide-intro p,
.guide-advice p {
  margin: 7px 0 0;
  color: #58615c;
  font-size: 13px;
  line-height: 1.7;
}

.guide-list {
  margin-top: 8px;
}

.guide-list article {
  padding: 15px 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  border-bottom: 1px solid #e0d8ce;
}

.guide-list article > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7f0eb;
  color: #1f5f58;
  font-size: 20px;
  font-weight: 800;
}

.guide-list article:nth-child(3) > span,
.guide-list article:nth-child(4) > span {
  background: #fff0e9;
  color: #c95642;
}

.guide-list strong {
  color: #2e3531;
  font-size: 15px;
}

.guide-list p {
  margin: 5px 0 0;
  color: #626a65;
  font-size: 12px;
  line-height: 1.65;
}

.guide-advice {
  margin-top: 12px;
  border-left-color: #1f5f58;
  background: #eef5f1;
}

.onboarding {
  position: relative;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: #f7f1e7;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.brand-mark {
  position: absolute;
  z-index: 2;
  top: 26px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #343a36;
  font-size: 14px;
  font-weight: 750;
}

.music-toggle {
  position: relative;
  font-size: 20px;
}

.music-toggle.muted {
  color: #8f918d;
}

.music-toggle.muted::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  top: 18px;
  left: 8px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-42deg);
}

.brand-mark img {
  width: 72px;
  height: 72px;
  border: 2px solid #fffdf9;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  box-shadow: 0 3px 12px rgb(58 49 41 / 15%);
}

.slides-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slides {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 360ms ease;
  pointer-events: auto;
}

.slide {
  min-width: 100%;
  padding: 100px 8px 116px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.slide-kicker {
  margin: 0 0 18px;
  color: #cf4f39;
  font-size: 14px;
  font-weight: 750;
}

.slide h1 {
  max-width: 350px;
  margin: 0;
  font-size: clamp(34px, 10vw, 48px);
  line-height: 1.14;
  letter-spacing: 0;
}

.slide p {
  max-width: 340px;
  margin: 24px 0 0;
  color: #5b615d;
  font-size: 18px;
  line-height: 1.7;
}

.chunk-demo {
  width: 100%;
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chunk-demo span {
  padding: 12px 14px;
  border: 1px solid #c9c0b4;
  border-radius: 7px;
  background: #fffdf9;
  font-weight: 700;
}

.start-button {
  width: 100%;
  min-height: 54px;
  margin-top: 36px;
  border: 0;
  border-radius: 7px;
  background: #1f5f58;
  color: white;
  font-weight: 750;
  cursor: pointer;
}

.slide-footer {
  position: absolute;
  right: 24px;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 24px;
}

.dots {
  display: flex;
  gap: 7px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9c2b8;
}

.dot.active {
  width: 22px;
  border-radius: 7px;
  background: #1f5f58;
}

.swipe-hint {
  margin: 0;
  color: #797d79;
  font-size: 13px;
}

.slide-footer-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.slide-navigation {
  display: grid;
  gap: 14px;
  flex: 0 0 auto;
  padding-bottom: 12px;
}

.intro-skip {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 7px;
  max-width: min(62%, 226px);
  text-align: right;
}

.intro-skip span {
  color: #797d79;
  font-size: 11px;
  line-height: 1.5;
}

.intro-skip button {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #c7bcb0;
  border-radius: 50%;
  background: #fffaf3;
  color: #5c635d;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.course-home {
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: #f8f4ed;
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.home-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.home-brand img {
  width: 48px;
  height: 48px;
  border: 2px solid #fffdf9;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 35%;
  box-shadow: 0 3px 12px rgb(58 49 41 / 15%);
}

.home-brand div {
  display: grid;
  gap: 2px;
}

.home-brand span {
  color: #6c716d;
  font-size: 12px;
}

.home-brand strong {
  font-size: 16px;
}

.home-summary {
  margin-top: 64px;
}

.home-summary p {
  margin: 0 0 10px;
  color: #cf4f39;
  font-size: 13px;
  font-weight: 750;
}

.home-summary h1 {
  margin: 0;
  max-width: 330px;
  font-size: 34px;
  line-height: 1.18;
  letter-spacing: 0;
}

.home-summary .course-home-guide {
  margin: 12px 0 0;
  color: #5b5b58;
  font-weight: 500;
  line-height: 1.5;
}

.home-progress-track {
  height: 8px;
  margin: 28px 0 20px;
  overflow: hidden;
  border-radius: 8px;
  background: #ded7cc;
}

.home-progress-track div {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #e85f45;
  transition: width 300ms ease;
}

.course-home .primary-button {
  width: 100%;
}

.course-group {
  margin-top: 42px;
}

.course-group-heading {
  margin-bottom: 12px;
}

.course-group-heading span {
  color: #cf4f39;
  font-size: 12px;
  font-weight: 800;
}

.course-group-heading h2 {
  margin: 3px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}

.course-divider {
  height: 1px;
  margin: 34px 0 0;
  background: #d6cec2;
}

.unit-list {
  display: grid;
  gap: 10px;
}

.unit-row {
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #d6cec2;
  border-radius: 8px;
  background: #fffdf9;
  color: #282e2a;
  text-align: left;
  cursor: pointer;
}

.unit-row.completed {
  border-color: #9db9aa;
  background: #f5faf6;
}

.unit-row:disabled {
  cursor: default;
  opacity: 0.58;
}

.unit-number {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eee7dc;
  color: #4f5752;
  font-weight: 800;
}

.unit-row.completed .unit-number {
  background: #1f5f58;
  color: #fff;
}

.unit-copy {
  display: grid;
  gap: 3px;
}

.unit-copy strong {
  font-size: 17px;
}

.unit-copy small,
.unit-state {
  color: #747a76;
  font-size: 12px;
}

.unit-state {
  white-space: nowrap;
}

.creativity-entry {
  width: 100%;
  min-height: 76px;
  margin-top: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #d8b76e;
  border-radius: 8px;
  background: #fff9e9;
  color: #282e2a;
  text-align: left;
  cursor: pointer;
}

.creativity-entry:disabled {
  border-color: #d6cec2;
  background: #f3eee6;
  cursor: default;
  opacity: 0.62;
}

.creativity-entry.completed {
  border-color: #9db9aa;
  background: #f5faf6;
}

.creativity-entry-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e6b84f;
  color: #fff;
  font-size: 20px;
}

.creativity-entry.completed .creativity-entry-icon {
  background: #1f5f58;
}

.creativity-entry-copy {
  display: grid;
  gap: 3px;
}

.creativity-entry-copy strong {
  font-size: 17px;
}

.creativity-entry-copy small {
  color: #747a76;
  font-size: 12px;
}

.notebook-entry {
  width: 100%;
  min-height: 54px;
  margin-top: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #b7cbc2;
  border-radius: 8px;
  background: #f0f7f2;
  color: #264e49;
  text-align: left;
  cursor: pointer;
}
.notebook-entry > span { font-size: 25px; line-height: 1; }
.notebook-entry strong { font-size: 15px; }
.notebook-entry small { margin-left: auto; color: #617973; font-size: 11px; white-space: nowrap; }
.notebook-entry:disabled { border-color: #d8d3ca; background: #f4f0e9; color: #7a7d77; cursor: default; }
.notebook-entry:disabled small { color: #898b86; }

.notebook-screen {
  padding: max(20px, env(safe-area-inset-top)) 22px max(32px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: #f8f4ed;
}
.notebook-header { display: flex; align-items: center; gap: 14px; color: #b9503b; font-size: 13px; font-weight: 700; }
.notebook-screen h1 { margin: 28px 0 22px; font-size: 27px; line-height: 1.25; }
.notebook-content { display: grid; gap: 14px; }
.notebook-dialogue { padding: 16px; border: 1px solid #d8d5ca; border-radius: 8px; background: #fffdf9; }
.notebook-dialogue h2 { margin: 0 0 14px; color: #a74837; font-size: 14px; line-height: 1.4; }
.notebook-turn { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 8px; }
.notebook-turn + .notebook-turn { margin-top: 17px; }
.notebook-speaker { color: #55847a; font-size: 12px; font-weight: 800; line-height: 1.6; }
.notebook-spanish { margin: 0; color: #263b39; font-size: 16px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.notebook-chinese { margin: 5px 0 0; color: #666e69; font-size: 13px; line-height: 1.55; }
.notebook-extensions { margin-top: 16px; padding-top: 24px; border-top: 1px solid #cec8bb; }
.notebook-extensions > h2 { margin: 0 0 20px; color: #a74837; font-size: 21px; }
.notebook-example { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid #e8e2d7; }
.notebook-chunks { display: flex; flex-wrap: wrap; gap: 7px 10px; margin: 0; color: #263b39; font-size: 16px; line-height: 1.55; }
.notebook-chunks span { padding: 3px 8px; border: 1px solid #dce3da; border-radius: 8px; background: #f5f8f2; }
.notebook-example .notebook-chinese { margin-top: 8px; }
.notebook-closing-note { margin-top: 28px; padding: 20px 18px; border-radius: 12px; background: #f2eee4; color: #58635d; }
.notebook-closing-note h3 { margin: 0 0 16px; color: #37675c; font-size: 17px; line-height: 1.7; }
.notebook-closing-note p { margin: 0 0 14px; font-size: 14px; line-height: 1.85; }
.notebook-closing-note p:last-child { margin-bottom: 0; }
.round-two-group { background: linear-gradient(155deg, #fffaf0, #eef6ef); border: 1px solid #d9dfd2; border-radius: 18px; padding: 20px; }
.round-two-description { margin: -4px 0 16px; color: #68766f; font-size: 13px; line-height: 1.7; }
.round-two-entry { background: #fffdf7; }
.round-two-scene { position: relative; width: 100%; height: 100%; min-height: 250px; overflow: hidden; background: linear-gradient(#dceff1 0 62%, #e6dfcf 62%); }
.round-two-visual { position: absolute; inset: 12% 8% 13%; display: grid; place-items: center; }
.round-two-emoji { font-size: clamp(76px, 22vw, 128px); filter: drop-shadow(0 8px 10px #29463a22); }
.round-two-card { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); min-width: 72%; max-width: 90%; padding: 10px 14px; border-radius: 12px; background: #fffef5eF; box-shadow: 0 5px 16px #29463a22; text-align: center; color: #35544b; font-size: 13px; font-weight: 700; }
.round-two-block { display: inline-block; margin-top: 7px; padding: 5px 12px; border: 1px solid #b9cec1; border-radius: 10px; background: #edf5ec; color: #2f6655; font-size: 18px; }
.round-two-question-mark { position: absolute; top: 12%; right: 13%; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #43806d; font-size: 26px; font-weight: 900; box-shadow: 0 5px 14px #29463a20; }
.round-two-answer-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-size: clamp(125px, 36vw, 195px); font-weight: 300; line-height: 1; text-shadow: 0 3px 0 #fff, 0 0 12px #fff; }
.round-two-answer-mark.no { color: #d74d45; }
.round-two-answer-mark.yes { color: #3f9b6c; }
.round-three-group { background: #f4f8f3; border: 1px solid #cedbd2; border-radius: 18px; padding: 20px; }
.round-three-entry { background: #fff; border-color: #b9cec1; }
.round-three-entry .creativity-entry-icon { color: #397463; }
.round-three-scene { position: relative; width: 100%; height: 100%; min-height: 270px; overflow: hidden; background: #dcebee; }
.round-three-scene::before { content: ""; position: absolute; inset: 62% 0 0; background: #e6dfcf; }
.round-three-scene.restaurant::before,
.round-three-scene.cafe::before { background: #d9bfa1; }
.round-three-scene.office::before,
.round-three-scene.meeting::before { background: #c9d2cf; }
.round-three-scene.street::before,
.round-three-scene.bus::before { background: #c7c9bd; }
.round-three-setting { position: absolute; left: 7%; top: 9%; width: 86%; height: 59%; border-radius: 10px; background: #f7f7f0; box-shadow: inset 0 -7px 0 #0000000a, 0 8px 20px #29463a12; }
.round-three-scene.office .round-three-setting { background: #e8efed; }
.round-three-scene.pharmacy .round-three-setting { background: #f3f7f4; }
.round-three-scene.restaurant .round-three-setting,
.round-three-scene.cafe .round-three-setting { background: #fff2df; }
.round-three-scene.street .round-three-setting,
.round-three-scene.bus .round-three-setting { background: linear-gradient(#dceff1 0 60%, #b9c5b0 60%); }
.round-three-scene.home .round-three-setting { background: #f6eadc; }
.round-three-scene.meeting .round-three-setting { background: #e4ecea; }
.round-three-environment { position: absolute; left: 11%; top: 13%; font-size: clamp(64px, 19vw, 104px); line-height: 1; filter: saturate(.86) drop-shadow(0 7px 8px #29463a22); }
.round-three-person { position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%); font-size: clamp(66px, 19vw, 104px); line-height: 1; filter: drop-shadow(0 8px 8px #29463a22); z-index: 2; }
.round-three-items { position: absolute; inset: 10% 6% 15%; z-index: 3; }
.round-three-item { position: absolute; display: grid; place-items: center; min-width: 58px; min-height: 58px; padding: 6px; border: 3px solid transparent; border-radius: 16px; background: #ffffffc7; font-size: clamp(32px, 10vw, 52px); line-height: 1; opacity: .48; filter: saturate(.58); transform: scale(.88); transition: opacity .18s ease, transform .18s ease, border-color .18s ease, filter .18s ease; }
.round-three-item:nth-child(1) { right: 2%; top: 2%; }
.round-three-item:nth-child(2) { right: 0; bottom: 5%; }
.round-three-item:nth-child(3) { left: 0; bottom: 1%; }
.round-three-item:nth-child(4) { left: 2%; top: 3%; }
.round-three-item.active { opacity: 1; filter: saturate(1); transform: scale(1.08); border-color: #fff; box-shadow: 0 0 0 3px #4f8b76, 0 8px 18px #29463a2b; }
.round-three-item.seen { opacity: .78; filter: saturate(.82); transform: scale(.96); }
.round-three-composite { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.round-three-composite.sugar-free > span { font-size: .9em; }
.round-three-composite.sugar-free > b { display: grid; place-items: center; width: 30px; height: 30px; border: 4px solid #e2473f; border-radius: 50%; color: #373f3b; background: #fff; font-size: 15px; font-style: normal; line-height: 1; }
.round-three-water-bottle { position: relative; display: flex; align-items: center; justify-content: center; width: 29px; height: 52px; border: 3px solid #4a91bc; border-radius: 7px 7px 10px 10px; background: linear-gradient(to bottom, #f8fdff 0 25%, #bfe8f7 25% 100%); box-shadow: inset 0 0 0 2px #ffffff99; }
.round-three-water-bottle i { position: absolute; top: -8px; width: 15px; height: 8px; border-radius: 3px 3px 0 0; background: #3d83ae; }
.round-three-water-bottle b { color: #176a98; font-size: 7px; font-weight: 900; letter-spacing: 0; transform: rotate(-90deg); }
.round-three-reservation { position: relative; display: block; width: 54px; height: 48px; border: 3px solid #547267; border-radius: 7px; background: linear-gradient(#233e52 0 43%, #fff 43%); box-shadow: inset 0 5px 0 #fff; }
.round-three-reservation::before { content: ""; position: absolute; left: 8px; top: -7px; width: 5px; height: 12px; border-radius: 4px; background: #547267; box-shadow: 27px 0 #547267; }
.round-three-reservation b { position: absolute; left: 5px; top: 4px; font-size: 15px; }
.round-three-reservation i { position: absolute; left: 15px; bottom: 1px; font-size: 22px; font-style: normal; }
.round-three-reservation em { position: absolute; right: -5px; bottom: -6px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #3d8b66; color: #fff; font-size: 13px; font-style: normal; font-weight: 900; }
.round-three-composite.liked-place { gap: 2px; }
.round-three-composite.liked-place strong { color: #dc4451; font-size: 29px; line-height: 1; }
.mini-table { position: relative; display: inline-block; width: 43px; height: 38px; }
.mini-table i { position: absolute; left: 4px; top: 7px; width: 35px; height: 9px; border-radius: 4px; background: #98653f; box-shadow: 0 3px #6d482d; }
.mini-table i::before, .mini-table i::after { content: ""; position: absolute; top: 9px; width: 5px; height: 22px; border-radius: 0 0 3px 3px; background: #6d482d; }
.mini-table i::before { left: 5px; }
.mini-table i::after { right: 5px; }
.mini-table b::before, .mini-table b::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 18px; border: 3px solid #527269; border-top: 0; border-radius: 0 0 4px 4px; }
.mini-table b::before { left: -1px; }
.mini-table b::after { right: -1px; }
.round-three-phone { position: absolute; left: 5%; top: 6%; z-index: 6; display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; background: #fff; color: #377664; font-size: 21px; box-shadow: 0 5px 14px #29463a26; }
.round-three-phone::after { content: ")))"; font-size: 12px; font-weight: 900; letter-spacing: 0; }
.round-three-counter { position: absolute; right: 5%; top: 6%; z-index: 6; padding: 6px 9px; border-radius: 999px; background: #fff; color: #47645c; font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px #29463a1c; }
.round-three-card { position: absolute; left: 50%; bottom: 5%; z-index: 7; transform: translateX(-50%); width: min(88%, 330px); padding: 9px 13px; border-radius: 10px; background: #fffef5f2; box-shadow: 0 5px 16px #29463a22; text-align: center; color: #35544b; font-size: 13px; font-weight: 750; line-height: 1.45; }
.round-three-blocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.round-three-blocks span { padding: 4px 8px; border: 1px solid #bad0c2; border-radius: 8px; background: #edf5ec; color: #2f6655; font-size: 14px; }
.round-three-block-connector { align-self: center; color: #587168; font-size: 15px; font-weight: 900; }
.round-three-scene.day-complete .round-three-setting { display: grid; place-items: center; font-size: 92px; background: #edf5ec; }
.round-three-scene.day-complete .round-three-person,
.round-three-scene.day-complete .round-three-environment,
.round-three-scene.day-complete .round-three-items { display: none; }

.text-button {
  width: 100%;
  min-height: 44px;
  margin-top: 18px;
  border: 0;
  background: transparent;
  color: #5f6661;
  font-weight: 700;
  cursor: pointer;
}

.practice {
  padding: max(18px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: 40px minmax(290px, 46%) auto 38px auto 24px;
  gap: 12px;
  background: #f8f4ed;
}

.practice.lesson-page {
  grid-template-rows: 40px minmax(220px, 36%) auto 20px auto 18px;
}

.practice-header {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  gap: 12px;
  align-items: center;
}

.practice-tool {
  position: relative;
  display: grid;
  place-items: center;
}

.practice-hint {
  position: absolute;
  top: 43px;
  z-index: 4;
  width: max-content;
  max-width: 116px;
  padding: 6px 9px;
  border: 1px solid #e6d5c7;
  border-radius: 7px;
  background: #fffaf3;
  box-shadow: 0 5px 14px rgb(66 49 36 / 10%);
  color: #59615b;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.practice-hint::before {
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  border-top: 1px solid #e6d5c7;
  border-left: 1px solid #e6d5c7;
  background: #fffaf3;
  content: "";
  transform: rotate(45deg);
}

.practice-hint.visible {
  opacity: 1;
  transform: translateY(0);
}

.practice-tool-back .practice-hint {
  left: -4px;
}

.practice-tool-back .practice-hint::before {
  left: 14px;
}

.practice-tool-sound .practice-hint {
  right: -4px;
}

.practice-tool-sound .practice-hint::before {
  right: 14px;
}

.icon-button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #38403b;
  font-size: 24px;
  cursor: pointer;
}

.progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: #ded7cc;
}

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #e85f45;
  transition: width 300ms ease;
}

.scene {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  border-radius: 8px;
  background: #b8d8d2;
}

.lesson-page .scene {
  min-height: 220px;
}

.scene-sky {
  position: absolute;
  inset: 0 0 44% 0;
  background: #b8d8d2;
}

.scene-floor {
  position: absolute;
  inset: 56% 0 0 0;
  background: #e8d5b9;
}

.scene-window {
  position: absolute;
  top: 34px;
  right: 26px;
  width: 90px;
  height: 112px;
  border: 9px solid #fff9ef;
  background: #8fc1cd;
  box-shadow: inset 0 0 0 2px #759ca4;
}

.scene-window::before,
.scene-window::after {
  content: "";
  position: absolute;
  background: #fff9ef;
}

.scene-window::before {
  top: 45px;
  right: 0;
  left: 0;
  height: 7px;
}

.scene-window::after {
  top: 0;
  bottom: 0;
  left: 35px;
  width: 7px;
}

.cafe-floor {
  background: #ead9bd;
}

.desire-person {
  position: absolute;
  bottom: 24px;
  left: 50%;
  width: 108px;
  height: 132px;
  transform: translateX(-50%);
  border-radius: 54px 54px 18px 18px;
  background: #e85f45;
}

.desire-person i {
  position: absolute;
  top: -72px;
  left: 20px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #c99068;
}

.thought-bubble,
.flavor-bubble,
.breakfast-bubble,
.answer-thought {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 36px;
  background: #fffdf8;
  box-shadow: 0 8px 22px rgb(42 50 46 / 14%);
}

.thought-bubble::after,
.flavor-bubble::after,
.breakfast-bubble::after,
.answer-thought::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  background: #fffdf8;
}

.desire-bubble {
  top: 24px;
  left: 50%;
  width: 194px;
  height: 88px;
  transform: translateX(-50%);
}

.desire-bubble::after {
  bottom: -11px;
  left: 46px;
}

.desire-bubble span {
  font-size: 34px;
}

.ice-cream {
  position: absolute;
  z-index: 4;
  top: 54px;
  left: 50%;
  width: 108px;
  height: 108px;
  transform: translateX(-50%);
  border-radius: 54px 54px 44px 44px;
  background: #f4e1b4;
  box-shadow: inset -14px -12px 0 rgb(132 90 55 / 10%), 0 10px 22px rgb(42 50 46 / 15%);
}

.ice-cream.strawberry {
  background: #d94f61;
  box-shadow: inset -14px -12px 0 rgb(112 35 45 / 18%), 0 10px 22px rgb(42 50 46 / 15%);
}

.ice-cream i {
  position: absolute;
  top: 90px;
  left: 29px;
  width: 50px;
  height: 104px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: repeating-linear-gradient(55deg, #cf9b57 0 5px, #e9bd78 5px 12px);
}

.ice-cream b {
  position: absolute;
  top: 24px;
  left: 38px;
  width: 12px;
  height: 7px;
  border-radius: 50%;
  background: rgb(255 255 255 / 55%);
}

.dessert-person {
  right: auto;
  bottom: 18px;
  left: 18px;
  transform: scale(0.82);
  transform-origin: bottom left;
}

.flavor-bubble {
  top: 22px;
  right: 18px;
  width: 184px;
  height: 74px;
}

.flavor-bubble::after {
  bottom: -10px;
  left: 34px;
}

.flavor-bubble span,
.breakfast-bubble span,
.answer-thought span {
  font-size: 30px;
}

.flavor-bubble strong,
.breakfast-bubble strong {
  color: #e85f45;
  font-size: 32px;
}

.answer-thought {
  top: 24px;
  right: 20px;
  width: 126px;
  height: 72px;
}

.answer-thought::after {
  right: 24px;
  bottom: -10px;
}

.breakfast-wall {
  position: absolute;
  inset: 0 0 43%;
  background: #c9ded6;
}

.breakfast-floor {
  position: absolute;
  inset: 57% 0 0;
  background: #e5cfae;
}

.breakfast-clock {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 28px;
  width: 68px;
  height: 68px;
  border: 7px solid #fffdf8;
  border-radius: 50%;
  background: #f7edda;
  box-shadow: 0 6px 14px rgb(42 50 46 / 14%);
}

.breakfast-clock::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #39423e;
}

.breakfast-clock i,
.breakfast-clock b {
  position: absolute;
  z-index: 2;
  bottom: 50%;
  left: calc(50% - 2px);
  width: 4px;
  border-radius: 4px;
  background: #39423e;
  transform-origin: bottom center;
}

.breakfast-clock i {
  height: 21px;
  transform: rotate(0deg);
}

.breakfast-clock b {
  height: 16px;
  transform: rotate(240deg);
}

.breakfast-clock span {
  position: absolute;
  right: 8px;
  bottom: 5px;
  color: #cf4f39;
  font-size: 11px;
  font-weight: 900;
}

.breakfast-table {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 52px;
  width: 220px;
  height: 24px;
  border-radius: 8px;
  background: #a9714d;
}

.breakfast-table::before,
.breakfast-table::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 18px;
  height: 76px;
  background: #81553b;
}

.breakfast-table::before {
  left: 22px;
}

.breakfast-table::after {
  right: 22px;
}

.fruit-plate {
  position: absolute;
  z-index: 4;
  right: 48px;
  bottom: 78px;
  width: 166px;
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  border-radius: 0 0 50% 50%;
  background: #fffdf8;
  box-shadow: 0 7px 12px rgb(42 50 46 / 13%);
}

.fruit-plate span {
  margin-bottom: 20px;
  font-size: 36px;
}

.breakfast-person {
  right: auto;
  bottom: 22px;
  left: 14px;
  transform: scale(0.76);
  transform-origin: bottom left;
}

.breakfast-bubble {
  top: 20px;
  left: 20px;
  width: 190px;
  height: 76px;
}

.breakfast-bubble::after {
  bottom: -10px;
  left: 32px;
}

.breakfast-choice {
  top: 20px;
  right: 18px;
  width: 158px;
}

.prefer-sky {
  background: #c8ddd7;
}

.preference-choice {
  position: absolute;
  inset: 44px 28px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.preference-choice > div {
  position: relative;
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border: 5px solid #fffdf8;
  border-radius: 16px;
  background: rgb(255 253 248 / 70%);
  opacity: 0.62;
}

.preference-choice > div.preferred {
  border-color: #e5b341;
  background: #fff8dd;
  opacity: 1;
  box-shadow: 0 9px 20px rgb(54 50 42 / 14%);
}

.preference-choice span {
  font-size: 48px;
}

.preference-choice > strong {
  color: #cf4f39;
  font-size: 42px;
}

.preference-choice b {
  position: absolute;
  right: -8px;
  bottom: -10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e85f45;
  color: #fff;
}

.juice-glass {
  position: absolute;
  z-index: 4;
  top: 46px;
  left: 50%;
  width: 112px;
  height: 178px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 8px solid #fffdf8;
  border-top-width: 4px;
  border-radius: 8px 8px 30px 30px;
  background: #f3d28a;
  box-shadow: 0 10px 22px rgb(42 50 46 / 15%);
}

.juice-glass.orange {
  background: #efa23c;
}

.juice-glass i {
  position: absolute;
  top: -42px;
  right: 16px;
  width: 7px;
  height: 94px;
  transform: rotate(12deg);
  border-radius: 6px;
  background: #3b7d73;
}

.juice-glass span {
  position: absolute;
  right: 18px;
  bottom: 18px;
  font-size: 38px;
}

.drink-person {
  right: auto;
  bottom: 20px;
  left: 18px;
  transform: scale(0.8);
  transform-origin: bottom left;
}

.drink-question-bubble,
.offer-bubble {
  position: absolute;
  z-index: 6;
  top: 24px;
  right: 24px;
  width: 130px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 34px;
  background: #fffdf8;
  box-shadow: 0 8px 22px rgb(42 50 46 / 14%);
}

.drink-question-bubble::after,
.offer-bubble::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 28px;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  background: #fffdf8;
}

.drink-question-bubble span,
.offer-bubble span {
  font-size: 42px;
}

.drink-question-bubble strong,
.offer-bubble strong {
  color: #e85f45;
  font-size: 32px;
}

.drink-answer-choice,
.food-preference {
  position: absolute;
  inset: 64px 24px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.drink-answer-choice span,
.food-preference > div {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fffdf8;
  font-size: 50px;
  box-shadow: 0 8px 18px rgb(42 50 46 / 13%);
}

.drink-answer-choice .rejected,
.not-wanted {
  position: relative;
  filter: grayscale(0.7);
  opacity: 0.58;
}

.drink-answer-choice .rejected::after,
.not-wanted::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 7px;
  border-radius: 7px;
  background: #cf4f39;
  transform: rotate(-42deg);
}

.drink-answer-choice strong,
.food-preference > strong {
  color: #cf4f39;
  font-size: 36px;
}

.preference-creative {
  background: #e7ddd0;
}

.food-preference .wanted {
  position: relative;
  display: flex;
  width: 132px;
  gap: 0;
  font-size: 38px;
  border: 4px solid #e5b341;
}

.food-preference .wanted b {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e85f45;
  color: #fff;
  font-size: 15px;
}

.tutorial-scene {
  padding: 18px;
}

.preference-map {
  position: relative;
  width: 100%;
  height: 100%;
}

.pref-orbit {
  position: absolute;
  padding: 7px 9px;
  border: 1px solid #c9c0b4;
  border-radius: 7px;
  background: #fffdf9;
  color: #1f5f58;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.p1 { top: 8px; left: 8px; }
.p2 { top: 8px; right: 8px; }
.p3 { top: 68px; left: 0; }
.p4 { top: 70px; right: 0; }
.p5 { bottom: 68px; left: 0; }
.p6 { right: 0; bottom: 68px; }
.p7 { bottom: 8px; left: 8px; }
.p8 { right: 26px; bottom: 8px; }

.preference-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translate(-50%, -50%);
}

.preference-core strong,
.four-core span {
  padding: 13px 12px;
  border: 1px solid #dfac3d;
  border-radius: 7px;
  background: #f4ca68;
  color: #40351e;
  font-size: 16px;
  text-align: center;
}

.four-core {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.four-core span:nth-child(-n + 2) {
  border-color: #9db9aa;
  background: #dcebe3;
  color: #1f5f58;
}

.flavor-pair {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.flavor-pair > div {
  width: 110px;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.flavor-pair span {
  font-size: 64px;
}

.flavor-pair .pistachio-icon,
.flavor-pair .cherry-icon {
  display: block;
  line-height: 1;
}

.flavor-pair .pistachio-icon {
  position: relative;
  width: 64px;
  height: 64px;
}

.pistachio-icon i,
.pistachio-icon b {
  position: absolute;
  display: block;
  width: 28px;
  height: 44px;
  border: 3px solid #6f8d42;
  border-radius: 56% 44% 52% 48%;
  background: #b9ce72;
  transform: rotate(-27deg);
}

.pistachio-icon i {
  top: 9px;
  left: 8px;
}

.pistachio-icon b {
  top: 10px;
  right: 7px;
  transform: rotate(27deg);
}

.flavor-pair b {
  color: #5c625e;
  font-size: 13px;
}

.flavor-pair > strong,
.flavor-pair > i {
  color: #cf4f39;
  font-size: 32px;
  font-style: normal;
}

.known-blocks,
.unknown-cloud {
  max-width: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.known-blocks span,
.unknown-cloud span {
  padding: 12px 14px;
  border-radius: 7px;
  background: #fffdf9;
  color: #1f5f58;
  font-weight: 800;
  box-shadow: 0 6px 14px rgb(49 53 50 / 10%);
}

.unknown-cloud span {
  color: #777d79;
  border: 1px dashed #aaa39a;
  box-shadow: none;
}

.unknown-cloud strong {
  width: 100%;
  color: #cf4f39;
  font-size: 40px;
  text-align: center;
}

.dictionary-scene,
.learning-cycle,
.lookup-steps,
.chunk-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dictionary-scene div {
  width: 78px;
  height: 100px;
  display: grid;
  place-items: center;
  border: 6px solid #1f5f58;
  border-radius: 5px 16px 16px 5px;
  background: #fffdf9;
  color: #1f5f58;
  font-weight: 900;
}

.dictionary-scene span,
.learning-cycle span,
.lookup-steps span,
.chunk-chain span {
  min-width: 58px;
  padding: 12px 8px;
  border-radius: 50%;
  background: #fffdf9;
  color: #1f5f58;
  font-weight: 800;
  text-align: center;
}

.dictionary-scene i,
.learning-cycle i {
  color: #cf4f39;
  font-size: 22px;
  font-style: normal;
}

.learning-cycle {
  position: relative;
}

.learning-cycle b {
  position: absolute;
  top: 66px;
  color: #e5a92f;
  font-size: 52px;
}

.lookup-steps i,
.chunk-chain i {
  width: 30px;
  height: 4px;
  background: #e5a92f;
}

.idea-tree {
  position: relative;
  width: 290px;
  height: 170px;
}

.idea-tree strong {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 14px 18px;
  transform: translateX(-50%);
  border-radius: 7px;
  background: #1f5f58;
  color: #fff;
}

.idea-tree i {
  position: absolute;
  top: 58px;
  left: 50%;
  width: 4px;
  height: 74px;
  background: #cf4f39;
}

.idea-tree i::before,
.idea-tree i::after {
  content: "";
  position: absolute;
  top: 0;
  width: 90px;
  height: 4px;
  background: #cf4f39;
}

.idea-tree i::before { right: 0; transform: rotate(-28deg); transform-origin: right; }
.idea-tree i::after { left: 0; transform: rotate(28deg); transform-origin: left; }

.idea-tree span {
  position: absolute;
  top: 12px;
  padding: 12px;
  border-radius: 7px;
  background: #fffdf9;
  color: #1f5f58;
  font-weight: 800;
}

.idea-tree span:nth-of-type(1) { left: 0; }
.idea-tree span:nth-of-type(2) { right: 0; }

.goodbye-translation {
  position: relative;
  width: 290px;
  height: 180px;
}

.goodbye-translation span,
.goodbye-translation strong {
  position: absolute;
  padding: 14px 18px;
  border-radius: 7px;
}

.goodbye-translation span {
  top: 12px;
  background: #fffdf9;
  color: #1f5f58;
}

.goodbye-translation span:first-child { left: 16px; }
.goodbye-translation span:nth-child(2) { right: 16px; }

.goodbye-translation strong {
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f5f58;
  color: #fff;
  font-size: 24px;
}

.goodbye-translation i {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%) rotate(-7deg);
  color: rgb(105 110 106 / 38%);
  font-style: normal;
  text-decoration: line-through;
}

.pocket {
  position: absolute;
  z-index: 3;
  bottom: -32px;
  left: 50%;
  width: 220px;
  height: 128px;
  transform: translateX(-50%);
  border: 9px solid #f9f7f0;
  border-radius: 18px 18px 90px 90px;
  background: #e85f45;
  box-shadow: 0 -9px 0 #253d3a;
}

.pocket::after {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translateX(-50%);
  border: 5px solid #f9f7f0;
  border-radius: 50%;
  background: #f0bb3c;
}

.empty-pocket {
  background: #ce6651;
  box-shadow: 0 -9px 0 #38423e;
}

.empty-pocket::after {
  display: none;
}

.nothing-mark {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(255 255 255 / 72%);
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
}

.key-shape {
  position: absolute;
  top: -116px;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  border: 10px solid #f0bb3c;
  border-radius: 50%;
  filter: drop-shadow(0 6px 5px rgb(44 48 45 / 18%));
}

.key-shape::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 28px;
  width: 82px;
  height: 12px;
  border-radius: 0 8px 8px 0;
  background: #f0bb3c;
}

.key-shape i,
.key-shape i::after {
  position: absolute;
  width: 12px;
  height: 22px;
  background: #f0bb3c;
}

.key-shape i {
  top: 14px;
  left: 70px;
}

.key-shape i::after {
  content: "";
  top: 0;
  left: 20px;
}

.scene-road {
  position: absolute;
  inset: 58% 0 0;
  background: #747d78;
}

.scene-road::after {
  content: "";
  position: absolute;
  top: 52%;
  right: 0;
  left: 0;
  height: 7px;
  background: repeating-linear-gradient(90deg, #f6e6a7 0 42px, transparent 42px 78px);
}

.car {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 58px;
  width: 238px;
  height: 116px;
  border-radius: 62px 44px 20px 20px;
  background: #e85f45;
  box-shadow: inset 0 -13px 0 rgb(87 43 34 / 12%);
}

.car::before {
  content: "";
  position: absolute;
  top: -48px;
  left: 54px;
  width: 132px;
  height: 72px;
  border-radius: 58px 58px 0 0;
  background: #e85f45;
}

.car-window {
  position: absolute;
  z-index: 1;
  top: -35px;
  left: 71px;
  width: 95px;
  height: 53px;
  border-radius: 38px 38px 4px 4px;
  background: #b8d8d2;
}

.car-door {
  position: absolute;
  top: 26px;
  left: 96px;
  width: 92px;
  height: 72px;
  border: 4px solid rgb(94 52 43 / 42%);
  border-radius: 8px 18px 10px 8px;
}

.car-door::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 10px;
  width: 20px;
  height: 5px;
  border-radius: 5px;
  background: #f8d7a6;
}

.key-to-door-arrow {
  position: absolute;
  z-index: 5;
  top: 126px;
  left: 102px;
  width: 136px;
  height: 7px;
  border-radius: 8px;
  background: #fffdf8;
  transform: rotate(31deg);
  transform-origin: left center;
}

.key-to-door-arrow::after {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-top: 7px solid #fffdf8;
  border-right: 7px solid #fffdf8;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.car-wheel {
  position: absolute;
  bottom: -25px;
  width: 50px;
  height: 50px;
  border: 12px solid #303734;
  border-radius: 50%;
  background: #bfc5c0;
}

.car-wheel-left {
  left: 34px;
}

.car-wheel-right {
  right: 34px;
}

.car-person {
  z-index: 3;
  right: auto;
  left: 18px;
  bottom: 30px;
  transform: scale(0.82);
  transform-origin: bottom left;
}

.car-question-bubble {
  position: absolute;
  z-index: 5;
  top: 24px;
  left: 24px;
  width: 120px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 30px;
  background: #fffdf8;
  box-shadow: 0 8px 22px rgb(42 50 46 / 14%);
}

.car-question-bubble::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 30px;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
  background: #fffdf8;
}

.car-question-bubble span {
  font-size: 34px;
}

.car-question-bubble strong {
  color: #e85f45;
  font-size: 34px;
}

.empty-hand {
  position: absolute;
  z-index: 5;
  bottom: 30px;
  left: 24px;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 5px solid #fffdf8;
  border-radius: 50%;
  background: #e8d5b9;
  box-shadow: 0 8px 22px rgb(42 50 46 / 16%);
}

.empty-hand span {
  position: relative;
  font-size: 52px;
  filter: grayscale(1);
  opacity: 0.65;
}

.empty-hand::after,
.missing-key i {
  content: "";
  position: absolute;
  width: 82px;
  height: 7px;
  border-radius: 7px;
  background: #cf4f39;
  transform: rotate(-42deg);
}

.missing-key {
  position: absolute;
  z-index: 4;
  top: 28px;
  left: 24px;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fffdf8;
  box-shadow: 0 8px 22px rgb(42 50 46 / 14%);
}

.missing-key span {
  font-size: 45px;
  filter: grayscale(1);
  opacity: 0.65;
}

.creative-scene,
.recap-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7ddd0;
}

.creative-scene {
  gap: 10px;
}

.creative-block {
  padding: 16px 18px;
  border-radius: 7px;
  background: #fffdf9;
  color: #1f5f58;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgb(49 53 50 / 12%);
}

.creative-choice {
  color: #cf4f39;
  font-size: 28px;
  font-weight: 800;
}

.creative-spark {
  position: absolute;
  top: 50px;
  right: 54px;
  color: #e5a92f;
  font-size: 34px;
}

.empty-pet-bubble {
  position: absolute;
  top: 52px;
  left: 50%;
  width: 190px;
  height: 120px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 5px solid #fffdf8;
  border-radius: 8px;
  background: #e8d5b9;
  box-shadow: 0 8px 24px rgb(42 50 46 / 16%);
}

.empty-pet-bubble span {
  filter: grayscale(1);
  font-size: 48px;
  opacity: 0.62;
}

.empty-pet-bubble i {
  position: absolute;
  width: 150px;
  height: 8px;
  border-radius: 8px;
  background: #cf4f39;
  transform: rotate(-34deg);
}

.key-question-bubble {
  position: absolute;
  z-index: 5;
  top: 22px;
  left: 18px;
  width: 146px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 28px;
  background: #fffdf8;
  box-shadow: 0 8px 22px rgb(42 50 46 / 14%);
}

.key-question-bubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 30px;
  width: 23px;
  height: 23px;
  transform: rotate(45deg);
  background: #fffdf8;
}

.key-question-bubble span {
  font-size: 29px;
}

.key-question-bubble strong {
  color: #cf4f39;
  font-size: 32px;
}

.owned-key {
  position: absolute;
  z-index: 5;
  bottom: 34px;
  left: 24px;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border: 5px solid #fffdf8;
  border-radius: 50%;
  background: #e8d5b9;
  box-shadow: 0 8px 22px rgb(42 50 46 / 16%);
}

.owned-key span {
  font-size: 54px;
}

.owned-key b {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1f5f58;
  color: #fff;
  font-size: 20px;
}

.recap-map {
  position: relative;
  width: min(100%, 360px);
  height: 290px;
}

.recap-map .orbit {
  position: absolute;
  padding: 8px 10px;
  border: 1px solid #c9c0b4;
  border-radius: 7px;
  background: #fffdf9;
  color: #1f5f58;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgb(49 53 50 / 8%);
}

.orbit-1 { top: 10px; left: 18px; }
.orbit-2 { top: 12px; right: 28px; }
.orbit-3 { top: 78px; left: 0; }
.orbit-4 { top: 82px; right: 0; }
.orbit-5 { bottom: 72px; left: 2px; }
.orbit-6 { bottom: 78px; right: 16px; }
.orbit-7 { bottom: 10px; left: 22px; }
.orbit-8 { right: 16px; bottom: 8px; }

.recap-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.recap-core strong {
  min-width: 92px;
  padding: 14px 12px;
  border: 1px solid #dfac3d;
  border-radius: 7px;
  background: #f4ca68;
  color: #40351e;
  font-size: 17px;
  text-align: center;
  box-shadow: 0 7px 17px rgb(90 68 25 / 15%);
}

.recap-rings {
  position: relative;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
}

.recap-rings i {
  position: absolute;
  border: 4px solid rgb(31 95 88 / 28%);
  border-radius: 50%;
}

.recap-rings i:first-child { width: 180px; height: 180px; }
.recap-rings i:nth-child(2) { width: 130px; height: 130px; }
.recap-rings i:nth-child(3) { width: 80px; height: 80px; }

.recap-rings strong {
  z-index: 1;
  color: #cf4f39;
  font-size: 30px;
}

.recap-path {
  width: 290px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recap-path i {
  width: 58px;
  height: 58px;
  border: 8px solid #fffdf9;
  border-radius: 50%;
  background: #1f5f58;
  box-shadow: 0 6px 16px rgb(45 50 47 / 15%);
}

.recap-path i:nth-child(2) { background: #e5a92f; }
.recap-path i:nth-child(3) { background: #e85f45; }

.recap-path span {
  color: #38403b;
  font-size: 40px;
}

.cat {
  position: absolute;
  z-index: 2;
  bottom: 68px;
  width: 74px;
  height: 100px;
  border-radius: 38px 38px 24px 24px;
  background: #fff7e8;
  box-shadow: inset 0 -9px 0 rgb(45 53 49 / 8%);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.cat-ear {
  position: absolute;
  z-index: -1;
  top: -10px;
  width: 30px;
  height: 30px;
  background: inherit;
  transform: rotate(45deg);
}

.cat-ear-left {
  left: 5px;
}

.cat-ear-right {
  right: 5px;
}

.cat-face {
  position: absolute;
  top: 27px;
  left: 50%;
  width: 48px;
  height: 31px;
  transform: translateX(-50%);
}

.cat-face b {
  position: absolute;
  top: 0;
  width: 7px;
  height: 10px;
  border-radius: 50%;
  background: #28332f;
}

.cat-face b:first-child {
  left: 8px;
}

.cat-face b:nth-child(2) {
  right: 8px;
}

.cat-face em {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 9px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50% 50% 65% 65%;
  background: #db816e;
}

.cat-face::before,
.cat-face::after {
  content: "";
  position: absolute;
  top: 19px;
  width: 18px;
  height: 1px;
  background: #65706a;
  box-shadow: 0 5px 0 #65706a;
}

.cat-face::before {
  left: -5px;
  transform: rotate(8deg);
}

.cat-face::after {
  right: -5px;
  transform: rotate(-8deg);
}

.cat-tail {
  position: absolute;
  z-index: -1;
  right: -22px;
  bottom: 12px;
  width: 34px;
  height: 55px;
  border: 9px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 30px 0 0;
  color: #fff7e8;
}

.cat-one {
  left: 52px;
}

.cat-two {
  left: 132px;
  background: #5b6661;
}

.cat-two .cat-tail {
  color: #5b6661;
}

.cat-two .cat-face b,
.cat-two .cat-face::before,
.cat-two .cat-face::after {
  background: #f8f2e8;
}

.scene.show-cats .cat {
  opacity: 1;
  transform: translateY(0);
}

.speaker {
  position: absolute;
  right: 24px;
  bottom: 32px;
  width: 108px;
  height: 164px;
}

.speaker-head {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: #d9a477;
}

.speaker-body {
  width: 108px;
  height: 104px;
  margin-top: -4px;
  border-radius: 44px 44px 8px 8px;
  background: #1f5f58;
}

.pet-bubble {
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 22px;
  width: 184px;
  min-height: 88px;
  padding: 15px 15px 13px;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 28px;
  align-items: center;
  gap: 3px;
  border: 4px solid #fffdf8;
  border-radius: 34px;
  background: #fffdf8;
  box-shadow: 0 8px 22px rgb(42 50 46 / 14%);
}

.pet-bubble::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -18px;
  width: 24px;
  height: 24px;
  background: #fffdf8;
  transform: rotate(45deg);
}

.pet-bubble span {
  font-size: 25px;
  line-height: 1;
}

.pet-bubble strong {
  color: #e85f45;
  font-size: 36px;
  line-height: 1;
}

.thought {
  position: absolute;
  bottom: 38px;
  left: 24px;
  width: 160px;
  height: 126px;
  border: 5px solid #fffdf8;
  border-radius: 8px;
  background: #e8d5b9;
  box-shadow: 0 8px 24px rgb(42 50 46 / 16%);
}

.thought::before,
.thought::after {
  content: "🐈";
  position: absolute;
  top: 26px;
  font-size: 44px;
}

.thought::before {
  left: 22px;
}

.thought::after {
  right: 22px;
}

.practice-copy {
  min-height: 104px;
  text-align: center;
}

.eyebrow {
  min-height: 20px;
  margin: 0 0 6px;
  color: #cf4f39;
  font-size: 13px;
  font-weight: 750;
}

.main-text {
  margin: 0;
  font-size: clamp(25px, 8vw, 36px);
  line-height: 1.2;
  letter-spacing: 0;
  white-space: pre-line;
}

.lesson-page .main-text {
  font-size: clamp(23px, 6.8vw, 31px);
}

.lesson-page.compact-copy .main-text {
  font-size: clamp(20px, 5.8vw, 27px);
  line-height: 1.25;
}

.instruction {
  margin: 10px 0 0;
  color: #696e6a;
  font-size: 15px;
  white-space: pre-line;
}
.written-cue { display: block; margin: 12px auto 0; max-width: 330px; color: #365f59; font-size: 17px; line-height: 1.45; font-weight: 650; }

.lesson-page .instruction {
  font-size: 14px;
  line-height: 1.5;
}

.practice.scenario-intro .instruction {
  max-width: 320px;
  margin: 12px auto 0;
  color: #303632;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
}

.voice-meter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  opacity: 0;
}

.voice-meter.active {
  opacity: 1;
}

.voice-meter span {
  width: 5px;
  height: 12px;
  border-radius: 4px;
  background: #e85f45;
  animation: voice 720ms ease-in-out infinite alternate;
}

.voice-meter span:nth-child(2),
.voice-meter span:nth-child(4) {
  animation-delay: 180ms;
}

.voice-meter span:nth-child(3) {
  animation-delay: 360ms;
}

@keyframes voice {
  to { height: 34px; }
}

.practice-actions {
  display: grid;
  gap: 10px;
}

.primary-button,
.secondary-button {
  min-height: 52px;
  border-radius: 7px;
  font-weight: 750;
  cursor: pointer;
}

.primary-button {
  border: 0;
  background: #1f5f58;
  color: #fff;
}

.primary-button.recording {
  background: #b63d30;
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.compare-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.secondary-button {
  border: 1px solid #c5bbae;
  background: #fffdf9;
  color: #303632;
}

.status {
  min-height: 20px;
  margin: 0;
  color: #6e746f;
  font-size: 12px;
  text-align: center;
}

.audio-fallback {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #d8cfc3;
  border-radius: 7px;
  background: #fffdf9;
}

.audio-fallback.hidden {
  display: none;
}

.audio-fallback p {
  margin: 0;
  color: #4f5752;
  font-size: 13px;
  text-align: center;
}

.audio-fallback audio {
  width: 100%;
  min-height: 42px;
}

/* Third unit: destination, sunshine, and personal preference illustrations. */
.travel-sky,
.sunny-sky {
  position: absolute;
  inset: 0 0 43%;
  background: linear-gradient(#9dd1d3, #d5e9d8);
}

.travel-sea {
  position: absolute;
  inset: 37% 0 27%;
  background: linear-gradient(#65b5bc, #8ac9c6);
}

.travel-sand,
.beach-floor {
  position: absolute;
  inset: 70% 0 0;
  background: #efd9ad;
}

.travel-sun,
.sun-disc {
  position: absolute;
  top: 22px;
  right: 30px;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #ffd36b;
  box-shadow: 0 0 0 9px rgb(255 211 107 / 22%);
}

.port-dock {
  position: absolute;
  top: 43%;
  right: 0;
  width: 42%;
  height: 13px;
  border-radius: 5px 0 0 5px;
  background: #9a7655;
  box-shadow: 0 12px 0 -4px #765e49;
}

.port-dock::before,
.port-dock::after {
  position: absolute;
  top: 5px;
  width: 7px;
  height: 46px;
  content: "";
  background: #8a6b4e;
}

.port-dock::before { left: 18%; }
.port-dock::after { right: 18%; }

.port-boat {
  position: absolute;
  z-index: 1;
  top: 28%;
  width: 59px;
  height: 34px;
  border-bottom: 13px solid #fff8e9;
  border-radius: 0 0 30px 25px;
}

.port-boat::before {
  position: absolute;
  bottom: 10px;
  left: 28px;
  width: 3px;
  height: 40px;
  content: "";
  background: #806e59;
}

.port-boat i,
.port-boat b {
  position: absolute;
  bottom: 16px;
  width: 21px;
  height: 24px;
  background: #fffdf4;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.port-boat i { left: 7px; }
.port-boat b { left: 31px; transform: scaleX(-1); background: #f3b766; }
.boat-one { right: 30%; transform: scale(1.05); }
.boat-two { right: 8%; top: 34%; transform: scale(.72); }

.port-sign {
  position: absolute;
  z-index: 2;
  top: 21%;
  right: 12px;
  padding: 5px 9px;
  border-radius: 5px;
  color: #fffdf8;
  background: #1f6868;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.beach-umbrella {
  position: absolute;
  z-index: 2;
  right: 18%;
  bottom: 5px;
  color: #e66c4b;
  font-size: 48px;
  line-height: 1;
}

.travel-person,
.like-person {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  left: 22%;
  width: 27px;
  height: 54px;
  border-radius: 15px 15px 7px 7px;
  background: #e66c4b;
}

.travel-person i,
.like-person i {
  position: absolute;
  top: -24px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c99068;
}

.travel-person b,
.like-person b {
  position: absolute;
  bottom: -9px;
  left: 5px;
  width: 5px;
  height: 14px;
  border-radius: 4px;
  background: #384b4b;
  box-shadow: 12px 0 #384b4b;
}

.destination-bubble {
  position: absolute;
  z-index: 4;
  top: 19%;
  left: 17%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 24px;
  background: #fffdf8;
  box-shadow: 0 6px 16px rgb(42 50 46 / 14%);
}

.travel-person.under-umbrella {
  left: auto;
  right: 22%;
  bottom: 12px;
  transform: scale(.65);
  transform-origin: bottom center;
}

.beach-umbrella { font-size: 100px; right: 14%; bottom: 5px; }
.travel-person.conversation-self {
  left: 116px;
  bottom: 23px;
  transform: scale(1.3);
  transform-origin: bottom center;
}
.distant-sunbathing {
  position: absolute;
  z-index: 3;
  right: 6px;
  bottom: 8px;
  width: 205px;
  height: 130px;
  transform: scale(.7);
  transform-origin: bottom right;
}
.travel-person.arriving-at-beach { animation: arrive-at-beach .8s ease-out both; }
@keyframes arrive-at-beach {
  from { transform: translateX(-110px) scale(.65); }
  to { transform: translateX(0) scale(.65); }
}
@media (prefers-reduced-motion: reduce) {
  .travel-person.arriving-at-beach { animation: none; }
}
.travel-questioner .question-mark {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  color: #b84930;
  font-size: 42px;
  font-weight: 800;
}

.sunbathing-likes {
  position: absolute;
  z-index: 5;
  left: 36%;
  bottom: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.sunbathing-likes span { padding: 6px 10px; border-radius: 22px; background: #fffdf8; font-size: 23px; }
.sunbathing-likes b { color: #e66c6b; font-size: 31px; line-height: 1; }

.destination-bubble span { font-size: 27px; }
.destination-bubble strong { color: #e66c4b; font-size: 24px; }

.afternoon-clock {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 24px;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 7px solid #fffdf8;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 5px 14px rgb(48 59 54 / 17%);
}

.afternoon-clock::before,
.afternoon-clock::after {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 2px);
  width: 4px;
  content: "";
  transform-origin: bottom center;
  border-radius: 4px;
  background: #356b68;
}

.afternoon-clock::before { height: 23px; transform: rotate(0deg); }
.afternoon-clock::after { height: 17px; transform: rotate(120deg); }
.afternoon-clock i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #e66c4b; }
.afternoon-clock b { display: none; }
.afternoon-clock span { position: absolute; top: 3px; right: 13px; color: #a76c3f; font-size: 11px; font-weight: 800; }
.travel-questioner,
.beach-questioner { right: auto; bottom: 18px; left: 13px; transform: scale(.68); transform-origin: bottom left; }

.sunny-sky { background: linear-gradient(#9ed5df, #d9eee2); }
.beach-floor { inset: 67% 0 0; background: #f0d7a5; }
.sun-disc { top: 24px; right: 37px; width: 60px; height: 60px; }

.sun-lounger {
  position: absolute;
  z-index: 2;
  right: 15%;
  bottom: 37px;
  width: 146px;
  height: 11px;
  transform: rotate(-7deg);
  border-radius: 8px;
  background: #e66c4b;
  box-shadow: 15px 18px 0 -4px #8c765d, -1px 18px 0 -4px #8c765d;
}

.sun-lounger i {
  position: absolute;
  top: -31px;
  left: -4px;
  width: 40px;
  height: 38px;
  border: 7px solid #f9efe0;
  border-radius: 50%;
  background: #c99068;
}

.sun-lounger b {
  position: absolute;
  top: -12px;
  left: 34px;
  width: 100px;
  height: 23px;
  border-radius: 16px;
  background: #e9a36e;
}

.sunbather {
  position: absolute;
  z-index: 3;
  right: 25%;
  bottom: 58px;
  width: 112px;
  height: 20px;
  transform: rotate(-7deg);
  border-radius: 16px;
  background: #d99a6d;
}

.sunbather i {
  position: absolute;
  top: -18px;
  left: -31px;
  width: 34px;
  height: 34px;
  border: 5px solid #fff4e4;
  border-radius: 50%;
  background: #c99068;
}

.sunbather b,
.sunbather em {
  position: absolute;
  right: -28px;
  bottom: 3px;
  width: 39px;
  height: 8px;
  border-radius: 9px;
  background: #c99068;
  transform: rotate(20deg);
}

.sunbather em { right: -24px; bottom: -6px; transform: rotate(-15deg); }

.like-heart {
  position: absolute;
  z-index: 4;
  top: 31px;
  left: 33%;
  color: #e66c6b;
  font-size: 37px;
  filter: drop-shadow(0 3px 4px rgb(98 61 47 / 15%));
}

.tan-before,
.tan-after {
  position: absolute;
  z-index: 4;
  bottom: 26px;
  width: 85px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 46px 46px 15px 15px;
  background: rgb(255 253 248 / 82%);
}

.tan-before { left: 16%; }
.tan-after { right: 16%; }
.mini-person { position: relative; display: block; width: 38px; height: 48px; margin-top: 11px; border-radius: 17px 17px 7px 7px; background: #e66c4b; }
.mini-person i { position: absolute; top: -34px; left: 3px; width: 32px; height: 32px; border-radius: 50%; background: #f1d6c2; }
.mini-person.warm i { background: #c58a5d; }
.mini-person b { position: absolute; top: -25px; left: 10px; width: 19px; height: 4px; border-radius: 3px; background: #4a4038; }
.tan-before small,
.tan-after small { position: absolute; top: 6px; right: 8px; color: #eca83d; font-size: 18px; }
.tan-arrow { position: absolute; z-index: 5; bottom: 63px; left: calc(50% - 15px); color: #e66c4b; font-size: 27px; font-weight: 800; }

.sun-question-bubble,
.pistachio-bubble {
  position: absolute;
  z-index: 6;
  top: 20px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-radius: 28px;
  background: #fffdf8;
  box-shadow: 0 6px 18px rgb(42 50 46 / 15%);
}

.sun-question-bubble span { font-size: 27px; }
.sun-question-bubble strong,
.pistachio-bubble strong { color: #e66c4b; font-size: 28px; }
.sun-question-bubble { left: 18px; }

.like-scene,
.third-chunks,
.third-recap,
.cherry-choice,
.dessert-question-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#b8d8d2 0 57%, #ead9bd 57%);
}

.like-person { bottom: 63px; left: calc(50% - 13px); transform: scale(1.3); }
.like-thought { position: absolute; bottom: 199px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 9px 15px; border-radius: 24px; background: #fffdf8; font-size: 25px; box-shadow: 0 6px 18px rgb(42 50 46 / 12%); }
.like-scene .like-heart { top: auto; bottom: 160px; left: 50%; transform: translateX(-50%); line-height: 1; }
.like-spark { position: absolute; top: 42px; right: 22%; color: #e6aa37; font-size: 28px; }

.third-chunks { gap: 12px; background: #e7ddd0; }
.third-chunks span { padding: 16px 20px; border-radius: 11px; background: #fffdf8; color: #1f5f58; font-size: 22px; font-weight: 800; box-shadow: 0 7px 18px rgb(49 53 50 / 12%); }
.third-chunks i { color: #d17e50; font-size: 23px; }
.third-chunks b { position: absolute; top: 33px; right: 34px; color: #e5a92f; font-size: 30px; }

.dessert-question-scene { background: linear-gradient(#b8d8d2 0 57%, #ead9bd 57%); }
.dessert-question-scene .speaker { right: 22px; bottom: 22px; transform: scale(.8); transform-origin: bottom right; }
.pistachio-bubble { top: 36px; left: 25px; gap: 10px; }
.pistachio-bubble span { font-size: 37px; }
.pistachio-bubble i { width: 13px; height: 13px; border-radius: 50%; background: #93ae65; box-shadow: 7px -5px #a4ba75; }
.cherry-choice { gap: 24px; background: #e7ddd0; }
.dessert-option { position: relative; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: #fffdf8; font-size: 46px; box-shadow: 0 6px 16px rgb(42 50 46 / 11%); }
.dessert-option small { position: absolute; right: 8px; bottom: 5px; font-size: 21px; }
.dessert-option.pistachio { opacity: .48; filter: grayscale(.7); }
.dessert-option.cherry { outline: 4px solid #efc66e; }
.dessert-option b { position: absolute; top: -12px; right: -8px; color: #e66c6b; font-size: 30px; }
.cherry-choice > strong { color: #d07f50; font-size: 27px; }

.third-recap { padding: 35px 18px; flex-wrap: wrap; align-content: center; gap: 9px; background: #e7ddd0; }
.third-recap > span { padding: 7px 10px; border-radius: 20px; background: #fffdf8; color: #59645e; font-size: 12px; }
.third-recap > div { flex-basis: 100%; display: flex; justify-content: center; gap: 10px; margin-top: 9px; }
.third-recap strong { padding: 10px 17px; border-radius: 9px; background: #f0c879; color: #674d2c; font-size: 18px; }

@media (max-width: 380px) {
  .like-person { bottom: 25px; }
  .like-thought { bottom: 160px; }
  .like-scene .like-heart { bottom: 122px; }
  .port-sign { right: 7px; font-size: 8px; }
  .afternoon-clock { left: 15px; transform: scale(.85); transform-origin: top left; }
  .tan-before { left: 9%; }
  .tan-after { right: 9%; }
  .third-chunks { gap: 7px; }
  .third-chunks span { padding: 13px 14px; font-size: 19px; }
  .third-recap > span { font-size: 11px; }
}

@media (max-height: 720px) {
  .app-shell {
    min-height: 100vh;
  }

  .practice {
    grid-template-rows: 40px minmax(220px, 40%) auto 32px auto 20px;
  }

  .scene {
    min-height: 220px;
  }
}

@media (min-width: 700px) {
  .app-shell {
    border-radius: 10px;
  }
}
.state-room, .state-overview { position: absolute; inset: 0; background: #e8e4d8; overflow: hidden; }
.state-dialogue { position: absolute; inset: 0; overflow: hidden; background: #cfe5df; }
.dialogue-sky { position: absolute; inset: 0 0 28%; background: #cfe5df; }
.dialogue-sky span { position: absolute; right: 22px; top: 16px; font-size: 39px; color: #eab854; }
.dialogue-road { position: absolute; bottom: 0; width: 100%; height: 30%; background: #b9c3bb; border-top: 14px solid #d8d5bf; }
.dialogue-road::after { content: ""; position: absolute; bottom: 22%; left: 8%; width: 84%; border-bottom: 4px dashed #f8f2dc; }
.dialogue-person { position: absolute; z-index: 2; bottom: 16%; width: 65px; height: 154px; }
.dialogue-person i { position: absolute; top: 0; left: 7px; width: 50px; height: 54px; border-radius: 48%; background: #ebbd94; border-top: 9px solid #51473f; }
.dialogue-person i::after { content: "•  •"; position: absolute; left: 11px; top: 8px; color: #615149; font-size: 18px; }
.dialogue-person b { position: absolute; top: 60px; left: 1px; width: 63px; height: 69px; border-radius: 14px 14px 5px 5px; }
.dialogue-person b::after { content: ""; position: absolute; bottom: -23px; left: 8px; width: 17px; height: 27px; background: #626f68; box-shadow: 31px 0 #626f68; }
.dialogue-person.questioner { left: 20%; }
.dialogue-person.questioner b { background: #72a38e; }
.dialogue-person.questioner span { position: absolute; top: -49px; left: 17px; padding: 0 12px; border-radius: 50%; background: #fffaf0; color: #b4694b; font-size: 38px; font-weight: 700; }
.dialogue-person.self { left: 60%; }
.dialogue-person.self b { background: #fffdf5; border-left: 7px solid #d7885e; border-right: 7px solid #d7885e; }
.dialogue-person.self b::before { content: ""; position: absolute; left: 46%; top: 4px; width: 6px; height: 36px; background: #c57b5b; }
.dialogue-thought { position: absolute; z-index: 3; top: 6%; left: 43%; display: grid; place-items: center; width: 133px; height: 100px; border: 4px solid #fff; border-radius: 50%; background: #fdfbf3; box-shadow: 0 3px 10px #77968a3b; }
.dialogue-thought::after { content: ""; position: absolute; bottom: -15px; right: 14px; width: 16px; height: 16px; border-radius: 50%; background: #fdfbf3; }
.dialogue-office { position: relative; width: 94px; height: 67px; overflow: hidden; border-radius: 5px; background: #e9ede3; border: 3px solid #8cabaa; }
.dialogue-office::before { content: ""; position: absolute; top: 5px; left: 6px; width: 25px; height: 27px; background: #aed1d0; border: 3px solid #f9fbf5; }
.dialogue-office::after { content: ""; position: absolute; bottom: 8px; left: 14px; width: 65px; height: 7px; border-radius: 3px; background: #b98464; box-shadow: 0 6px #896e5e; }
.dialogue-office i { position: absolute; z-index: 1; bottom: 16px; left: 32px; width: 35px; height: 25px; border: 4px solid #556f73; border-radius: 3px; background: #94bdba; }
.dialogue-office b { position: absolute; z-index: 1; bottom: 8px; left: 46px; width: 8px; height: 9px; background: #556f73; }
.dialogue-office span { position: absolute; top: 7px; right: 8px; width: 14px; height: 14px; border-radius: 50%; background: #d6a77c; box-shadow: 0 16px #fdfbf3; }
.on-phone { background: #e3e8de; }
.on-phone .dialogue-sky { background: #e3e8de; }
.on-phone .dialogue-road { background: #c4d0c2; border-top-color: #d4c8ad; }
.on-phone .dialogue-person.questioner { left: calc(50% - 33px); }
.dialogue-phone { position: absolute; top: 15%; right: 18%; padding: 8px 14px; border-radius: 50%; background: #fffaf0; color: #598d80; font-size: 38px; }
@media (max-width: 380px) { .dialogue-person.questioner { left: 13%; } .dialogue-person.self { left: 66%; } .dialogue-thought { left: 44%; width: 116px; } }
.office-scene { position: absolute; inset: 0; overflow: hidden; background: #e6e9e3; }
.identity-scene { position: absolute; inset: 0; overflow: hidden; background: #d8e9e6; }
.identity-sky { position: absolute; inset: 0 0 24%; background: #d8e9e6; }
.identity-ground { position: absolute; bottom: 0; width: 100%; height: 25%; background: #d4c6ac; border-top: 8px solid #9fb7a5; }
.identity-person { position: absolute; z-index: 4; bottom: 12%; left: 44%; width: 66px; height: 140px; }
.identity-head { position: absolute; top: 0; left: 10px; width: 46px; height: 49px; border-radius: 48%; background: #edbc95; border-top: 9px solid #4c413b; }
.identity-head b { position: absolute; top: 16px; left: 9px; width: 6px; height: 6px; border-radius: 50%; background: #534940; box-shadow: 19px 0 #534940; }
.identity-head em { position: absolute; top: 29px; left: 16px; width: 13px; height: 6px; border-bottom: 2px solid #995e57; border-radius: 50%; }
.identity-body { position: absolute; top: 50px; left: 3px; width: 61px; height: 65px; border-radius: 13px 13px 4px 4px; background: #da895e; }
.identity-body::after { content: ""; position: absolute; bottom: -24px; left: 9px; width: 16px; height: 26px; background: #586f6a; box-shadow: 28px 0 #586f6a; }
.identity-profile { position: absolute; z-index: 2; top: 7%; left: 7%; width: 126px; padding: 8px 10px; border: 2px solid #b59a7e; border-radius: 5px; background: #fffaf0; box-shadow: 0 4px 0 #cbb79b; color: #6c5f53; font-size: 11px; }
.identity-profile strong { display: block; padding-bottom: 4px; border-bottom: 1px solid #d7c9b5; font-size: 12px; }
.identity-profile span { display: flex; align-items: center; gap: 7px; height: 19px; }
.identity-profile span i { width: 50px; border-bottom: 1px solid #c8b9a5; }
.identity-university { position: absolute; bottom: 23%; left: 9%; width: 82%; height: 48%; background: #d2a77b; border: 5px solid #aa775d; box-shadow: inset 0 0 0 7px #e2bc8e; }
.university-roof { position: absolute; top: -35px; left: -6%; width: 112%; height: 32px; background: #8c6758; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.identity-university > span { position: absolute; z-index: 2; top: -31%; left: 23%; width: 54%; padding: 3px 0; border: 2px solid #8c6758; background: #f8edd8; text-align: center; color: #644e42; font-size: 15px; font-weight: 700; }
.university-windows { position: absolute; inset: 36% 9% 21%; background: repeating-linear-gradient(90deg, #597a81 0 13%, #f4d8ae 13% 25%); border-top: 5px solid #ad7c61; }
.university-door { position: absolute; bottom: 0; left: 42%; width: 16%; height: 33%; background: #715b51; border-radius: 25px 25px 0 0; }
.identity-backpack { position: absolute; top: 67px; left: -6px; width: 18px; height: 38px; border-radius: 7px; background: #63877e; }
.identity-flag { position: absolute; top: 4%; right: 12%; width: 37%; height: 35%; box-shadow: 0 7px 12px #455f6533; }
.china-flag { background: #d9443e; color: #ffda66; }
.china-flag .flag-star { position: absolute; display: block; width: 11px; height: 11px; background: #ffde5c; clip-path: polygon(50% 0, 62% 35%, 100% 35%, 70% 58%, 81% 95%, 50% 72%, 19% 95%, 30% 58%, 0 35%, 38% 35%); }
.china-flag .flag-star.large { top: 13%; left: 10%; width: 34px; height: 34px; }
.china-flag .flag-star.one { top: 8%; left: 34%; transform: rotate(-20deg); }
.china-flag .flag-star.two { top: 23%; left: 41%; transform: rotate(-8deg); }
.china-flag .flag-star.three { top: 43%; left: 41%; transform: rotate(8deg); }
.china-flag .flag-star.four { top: 59%; left: 34%; transform: rotate(20deg); }
.spain-flag { background: linear-gradient(#ba3435 0 25%, #f4ca55 25% 75%, #ba3435 75%); }
.spain-flag i { position: absolute; top: 35%; left: 27%; width: 13px; height: 28px; border: 3px solid #b4483c; border-radius: 3px; background: #f4ead0; }
.identity-stage { position: absolute; inset: 0; background: #e3ddd1; }
.identity-stage::before { content: ""; position: absolute; top: 0; left: 6%; width: 88%; height: 65%; background: #f4e9d7; border-left: 17px solid #ae7468; border-right: 17px solid #ae7468; }
.identity-podium { position: absolute; z-index: 2; bottom: 23%; right: 16%; width: 78px; height: 98px; background: #9a6b58; clip-path: polygon(9% 0, 91% 0, 80% 100%, 20% 100%); }
.identity-podium b { position: absolute; top: 9px; left: 16px; width: 46px; border-top: 5px solid #e9c197; }
.identity-audience { position: absolute; z-index: 1; bottom: 4%; width: 100%; display: flex; justify-content: space-around; }
.identity-audience i { width: 40px; height: 45px; border-radius: 50% 50% 0 0; background: #78928b; }
.at-stage .identity-person { left: 33%; bottom: 18%; }
.identity-person.shy .identity-head { background: #efb8a1; }
.identity-person.shy .identity-head::after { content: ""; position: absolute; top: 25px; left: 2px; width: 12px; height: 8px; border-radius: 50%; background: #d77c79; box-shadow: 29px 0 #d77c79; }
.identity-person.shy .identity-head b { top: 19px; height: 2px; border-radius: 0; transform: rotate(14deg); }
.identity-dislike { position: absolute; z-index: 5; top: 1%; left: 34%; width: 68px; height: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.speech-icon { position: relative; display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fffaf0; }
.speech-icon i { position: absolute; top: 5px; left: 12px; width: 7px; height: 12px; border-radius: 6px; background: #716d67; }
.speech-icon i::after { content: ""; position: absolute; top: 7px; left: -4px; width: 11px; height: 10px; border: 2px solid #716d67; border-top: 0; border-radius: 0 0 9px 9px; }
.speech-icon::after { content: ""; position: absolute; top: 23px; left: 14px; width: 2px; height: 4px; background: #716d67; }
.dislike-heart { position: relative; display: block; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fffaf0; color: #d76d69; font-size: 32px; line-height: 42px; text-align: center; }
.dislike-heart b { position: absolute; inset: 0; color: #58605c; font-size: 45px; line-height: 39px; font-weight: 400; }
.identity-questioner { position: absolute; z-index: 5; bottom: 11%; left: 11%; width: 54px; height: 130px; }
.identity-questioner i { display: block; width: 43px; height: 44px; margin: 0 auto; border-radius: 50%; background: #e3ae89; border-top: 8px solid #50473d; }
.identity-questioner b { display: block; height: 64px; border-radius: 12px; background: #75a28c; }
.identity-questioner span { position: absolute; top: -46px; left: 12px; width: 36px; height: 38px; border-radius: 50%; background: #fffaf0; text-align: center; color: #b6694e; font-size: 30px; }
.at-stage .identity-questioner { left: 5%; }
.identity-bank { position: absolute; bottom: 20%; left: 10%; width: 80%; height: 55%; background: #e1d2b5; }
.bank-roof { position: absolute; top: -27px; left: -5%; width: 110%; height: 30px; background: #779997; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bank-sign { position: absolute; z-index: 2; top: -24px; left: 50%; transform: translateX(-50%); min-width: 92px; padding: 3px 12px; border: 2px solid #536e71; background: #f7f1df; color: #405f60; font-size: 16px; font-weight: 700; text-align: center; }
.bank-columns { position: absolute; top: 13%; width: 100%; display: flex; justify-content: space-around; }
.bank-columns i { width: 16px; height: 86px; background: #f6f3e8; }
.bank-counter { position: absolute; bottom: 0; left: 5%; width: 90%; height: 32%; background: #a7775b; border-top: 8px solid #eac396; }
.bank-counter b { position: absolute; right: 14%; top: -30px; width: 42px; height: 27px; border: 4px solid #536e71; background: #a7d0c9; }
.at-bank .identity-person { bottom: 9%; left: calc(50% - 33px); }
.identity-person.bank-worker .identity-body { left: -10px; width: 86px; height: 70px; background: #f4f2e9; border-left: 7px solid #819c95; border-right: 7px solid #819c95; }
.bank-shirt-label { display: block; padding-top: 21px; color: #36595b; font-size: 11px; font-weight: 700; line-height: 1.05; text-align: center; white-space: nowrap; }
.identity-badge { position: absolute; z-index: 5; top: 56px; left: 47px; width: 14px; height: 11px; background: #f5d074; border: 2px solid #a98055; }
.identity-office { position: absolute; bottom: 24%; right: 10%; width: 47%; height: 52%; background: #8faeaa; border: 5px solid #6c8d8c; }
.identity-office i { position: absolute; top: 10%; left: 15%; width: 19%; height: 19%; background: #d5ebdf; box-shadow: 42px 0 #d5ebdf, 0 39px #d5ebdf, 42px 39px #d5ebdf; }
.identity-office b { position: absolute; bottom: 0; left: 39%; width: 24%; height: 28%; background: #e8d6b7; }
.identity-recap { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 9px; padding: 26px; background: #e1e9e2; }
.identity-recap span, .identity-recap strong { padding: 9px 13px; background: #fffaf0; border-radius: 6px; color: #586a64; font-size: 14px; }
.identity-recap strong { background: #efc880; color: #594d3d; font-size: 19px; }
@media (max-width: 380px) { .identity-university > span { font-size: 12px; } .identity-questioner { left: 3%; transform: scale(.8); transform-origin: bottom left; } .identity-flag { right: 7%; } }
.office-back-wall { position: absolute; inset: 0 0 72%; display: flex; justify-content: space-around; align-items: center; background: #e9ede7; border-bottom: 7px solid #b3c9c4; }
.office-window { width: 27%; height: 60%; border: 5px solid #f9fbf5; background: #a6d4da; }
.office-window i { display: block; height: 100%; width: 4px; margin: auto; background: #f9fbf5; }
.office-workstations { position: absolute; inset: 15% 5% 5%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0 4%; }
.office-worker { position: relative; min-width: 0; height: 100%; }
.office-worker:nth-child(-n+3) { transform: scale(.78); transform-origin: bottom center; z-index: 1; }
.office-worker:nth-child(n+4):nth-child(-n+6) { transform: scale(.9); transform-origin: bottom center; z-index: 2; }
.office-worker:nth-child(n+7) { z-index: 3; }
.office-chair { position: absolute; left: 9%; bottom: 8%; width: 42%; height: 45%; border-radius: 11px 11px 4px 4px; background: #5d807c; }
.office-person { position: absolute; z-index: 1; left: 9%; bottom: 10%; width: 42%; height: 67%; }
.office-person i { position: absolute; left: 16%; top: 0; width: 68%; height: 43%; border-radius: 45% 45% 48% 48%; background: #e8b58b; border-top: 6px solid #50443c; }
.office-person b { position: absolute; left: 4%; bottom: 1%; width: 92%; height: 56%; border-radius: 11px 11px 3px 3px; background: #faf9f3; border-left: 5px solid #c8d5d0; border-right: 5px solid #c8d5d0; }
.office-person b::after { content: ""; position: absolute; left: 45%; top: 2px; width: 8%; height: 60%; background: #8dada8; }
.office-worker:nth-child(3n) .office-person b { background: #d7e5e1; }
.office-worker:nth-child(3n + 1) .office-person b { background: #f6eee0; }
.office-worker.is-me { z-index: 4; }
.office-worker.is-me .office-person b { background: #fffdf7; border-left-color: #e5a674; border-right-color: #e5a674; }
.office-worker.is-me .office-person b::after { background: #cb8060; }
.office-worker.is-me .office-chair { background: #c57951; }
.office-desk { position: absolute; z-index: 2; left: 2%; right: 2%; bottom: 1%; height: 17%; border-radius: 3px 3px 8px 8px; background: #b39272; border-bottom: 5px solid #8c6c55; }
.office-monitor { position: absolute; left: 52%; bottom: 65%; width: 42%; height: 34px; border: 4px solid #547b78; border-radius: 3px; background: #b3d7d2; }
.office-monitor::after { content: ""; position: absolute; left: 45%; bottom: -12px; width: 9%; height: 8px; background: #547b78; }
.office-monitor i { position: absolute; left: 15%; top: 8px; width: 54%; height: 3px; background: #eaf5ed; box-shadow: 0 8px #eaf5ed; }
.office-question { position: absolute; z-index: 5; right: 3%; top: 3%; display: grid; place-items: center; width: 49px; height: 49px; border-radius: 50%; background: #fffaf2; color: #c47350; font-size: 32px; font-weight: 700; }
@media (max-width: 380px) { .office-monitor { height: 27px; } .office-monitor i { top: 5px; box-shadow: 0 7px #eaf5ed; } }
.state-room::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 24%; background: #c3cfbd; }
.state-window { position: absolute; top: 23px; left: 23px; width: 92px; height: 83px; background: #b9dce2; border: 7px solid #fffaf1; }
.state-window i, .state-window b { position: absolute; background: #fffaf1; }
.state-window i { left: 42%; width: 5px; height: 100%; }
.state-window b { top: 48%; height: 5px; width: 100%; }
.state-window span { position: absolute; right: 4px; top: 0; color: #eab344; font-size: 31px; }
.state-person { position: absolute; left: calc(50% - 30px); bottom: 34px; width: 60px; height: 149px; z-index: 2; }
.state-head { position: absolute; top: 0; left: 5px; width: 51px; height: 53px; border-radius: 48%; background: #f0bf92; border-top: 10px solid #51453d; }
.state-head::after { content: "•  •"; position: absolute; top: 8px; left: 13px; font-style: normal; font-size: 18px; color: #594a42; white-space: pre; }
.state-body { position: absolute; top: 60px; left: 1px; width: 60px; height: 70px; background: #df8854; border-radius: 19px 19px 8px 8px; }
.state-body::after { content: ""; position: absolute; bottom: -23px; left: 9px; width: 15px; height: 28px; background: #64796f; box-shadow: 29px 0 #64796f; }
.state-arm { position: absolute; top: 73px; left: 47px; width: 34px; height: 15px; border-radius: 15px; transform: rotate(24deg); background: #f0bf92; }
.state-desk { position: absolute; z-index: 3; bottom: 41px; right: 11%; width: 56%; height: 11px; background: #a87951; border-radius: 5px; }
.state-desk::before, .state-desk::after { content: ""; position: absolute; top: 8px; height: 42px; width: 9px; background: #8f7155; }
.state-desk::before { left: 10px; } .state-desk::after { right: 10px; }
.state-person.seated { left: 38%; bottom: 28px; }
.state-laptop { position: absolute; bottom: 10px; right: 9px; width: 84px; height: 52px; border: 6px solid #668d8b; border-radius: 5px; background: #d5ebe8; }
.state-laptop::after { content: ""; position: absolute; bottom: -10px; left: -12px; width: 96px; height: 6px; background: #527674; }
.state-laptop i { position: absolute; left: 13px; top: 11px; width: 42px; height: 4px; background: #91bbb5; box-shadow: 0 10px #91bbb5; }
.state-office-sign { position: absolute; right: 25px; top: 24px; padding: 12px; background: #faf5e9; border-radius: 8px; }
.state-building { display: block; width: 43px; height: 57px; background: repeating-linear-gradient(0deg, transparent 0 12px, #a9d0cd 12px 19px), repeating-linear-gradient(90deg, #698a87 0 9px, #a9d0cd 9px 17px); border: 4px solid #698a87; }
.state-home-shelf { position: absolute; top: 60px; right: 24px; width: 64px; height: 43px; border-bottom: 6px solid #ac8964; font-size: 34px; text-align: center; }
.state-clock { position: absolute; top: 20px; left: calc(50% - 20px); width: 43px; height: 43px; border: 4px solid #b2a38b; background: #fffaf0; border-radius: 50%; }
.state-clock i, .state-clock b { position: absolute; left: 18px; top: 18px; transform-origin: 2px 2px; width: 3px; border-radius: 3px; background: #665f52; }
.state-clock i { height: 17px; transform: rotate(180deg); } .state-clock b { height: 12px; transform: rotate(60deg); }
.state-fruit { position: absolute; bottom: 10px; left: 22px; font-size: 27px; line-height: 25px; text-align: center; border-bottom: 6px solid #f6f0dd; border-radius: 35%; }
.state-cup { position: absolute; bottom: 13px; right: 15px; width: 20px; height: 28px; background: #f9f1da; border-radius: 3px 3px 9px 9px; }
.state-flush { position: absolute; top: 29px; left: 5px; width: 11px; height: 7px; border-radius: 50%; background: #e9948b; box-shadow: 28px 0 #e9948b; }
.is-sick .state-arm { transform: rotate(-44deg); }
.state-thermometer { position: absolute; z-index: 3; top: 33px; right: -15px; font-size: 31px; }
.state-tissue { position: absolute; top: 63px; right: -14px; color: white; font-size: 37px; }
.state-questioner { left: 16px; bottom: 23px; z-index: 4; transform: scale(.75); transform-origin: bottom left; }
.state-room:has(.state-questioner) .state-person { left: 55%; }
.state-destination { position: absolute; right: 21px; bottom: 53px; z-index: 3; }
.state-destination span { position: absolute; left: -55px; top: 12px; font-size: 37px; color: #698a87; }
.is-morning .state-person { left: 29%; }
.state-overview { background: #dce7de; }
.state-overview .state-person { bottom: 44px; }
.state-orbit { position: absolute; display: flex; gap: 7px; align-items: center; justify-content: center; width: 94px; height: 75px; border-radius: 18px; background: #fff9ec; }
.state-orbit > span { color: #c27753; font-size: 25px; } .state-orbit > b { font-size: 31px; font-weight: normal; }
.state-location { left: 17px; top: 23px; } .state-feeling { right: 17px; top: 23px; }
.state-health { left: 12px; bottom: 45px; } .state-action { right: 12px; bottom: 45px; }
.state-location .state-building { transform: scale(.65); margin: -8px; }
.state-now { position: absolute; bottom: 11px; width: 100%; text-align: center; color: #577062; font-size: 14px; }
@media (max-width: 380px) { .state-orbit { width: 79px; height: 65px; } .state-orbit > b { font-size: 25px; } .state-health { left: 6px; } .state-action { right: 6px; } }

/* Fourth round: real-life expression recording */
.round-four-group .course-group-heading > span { color: #a43f35; }
.round-four-entry { background: #f7eee7; border-color: #d6b9ab; }
.round-four-entry .creativity-entry-icon { background: #a43f35; color: #fff8ef; font-size: 13px; }

.round-four-screen {
  padding: max(18px, env(safe-area-inset-top)) 18px max(34px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  background: #f7f3eb;
  scroll-behavior: smooth;
}

.round-four-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.round-four-header > div { min-width: 0; display: grid; gap: 2px; }
.round-four-header span { color: #7b7f7a; font-size: 11px; }
.round-four-header strong { overflow: hidden; font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.round-four-position { padding: 5px 8px; border: 1px solid #d8cec0; border-radius: 5px; background: #fffdf8; color: #676d68 !important; font-weight: 750; }

.round-four-day-tabs {
  width: calc(100% + 36px);
  margin: 18px -18px 0;
  padding: 0 18px 8px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.round-four-day-tabs::-webkit-scrollbar { display: none; }
.round-four-day-tab {
  flex: 0 0 56px;
  min-height: 52px;
  padding: 6px 4px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 1px solid #d9d0c4;
  border-radius: 6px;
  background: #fffdf8;
  color: #646a65;
  cursor: pointer;
}
.round-four-day-tab span { font-size: 13px; font-weight: 850; }
.round-four-day-tab small { font-size: 10px; }
.round-four-day-tab.is-active { border-color: #2f6d64; background: #e5efea; color: #214f49; }
.round-four-day-tab.is-complete:not(.is-active) { border-color: #e4c07f; background: #fff7de; color: #785d2e; }
.round-four-day-tab.is-complete span::after { content: " ✓"; font-size: 9px; }

.round-four-intro { margin: 22px 0 18px; padding-right: 86px; }
.round-four-intro p { margin: 0 0 7px; color: #a43f35; font-size: 11px; font-weight: 850; }
.round-four-intro h1 { margin: 0; font-size: 20px; line-height: 1.48; letter-spacing: 0; }

.round-four-recorder { position: relative; }
.round-four-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 6px solid #684f45;
  border-radius: 8px;
  background: #1f2523;
  box-shadow: 0 10px 26px rgb(65 49 39 / 18%), inset 0 0 0 2px #d7b98b;
}
.round-four-frame::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 6px;
  border: 1px solid rgb(255 248 229 / 36%);
  border-radius: 3px;
  pointer-events: none;
}
.round-four-frame video {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 2px;
  background: #202522;
  object-fit: cover;
  transform: scaleX(-1);
}
.round-four-frame-empty,
.round-four-audio-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 2px;
  background: linear-gradient(150deg, #d9e5df, #eee3d3 54%, #d5c1ae);
  color: #35433e;
  text-align: center;
}
.round-four-frame-empty > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid #a43f35;
  border-radius: 50%;
  color: #a43f35;
  font-size: 16px;
}
.round-four-frame-empty strong,
.round-four-audio-stage strong { max-width: 240px; font-size: 17px; line-height: 1.4; }
.round-four-frame-empty small,
.round-four-audio-stage small { max-width: 230px; color: #68716c; font-size: 11px; line-height: 1.5; }
.round-four-audio-stage { background: linear-gradient(145deg, #d8e6e1, #e8efe7 48%, #e1d2bf); }
.round-four-audio-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 2px solid #2f6d64;
  border-radius: 50%;
  color: #2f6d64;
  font-size: 44px;
  line-height: 1;
}
.round-four-teacher {
  position: absolute;
  z-index: 6;
  top: -96px;
  right: -24px;
  width: 142px;
  height: auto;
  filter: drop-shadow(0 5px 5px rgb(54 43 36 / 20%));
  pointer-events: none;
}
.round-four-timer,
.round-four-saved-badge {
  position: absolute;
  z-index: 7;
  top: 14px;
  left: 14px;
  padding: 6px 9px;
  border-radius: 5px;
  background: rgb(25 31 29 / 78%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.round-four-recorder[data-state="recording"] .round-four-timer::before { content: "●"; margin-right: 6px; color: #ff7568; }
.round-four-saved-badge { top: auto; bottom: 14px; background: rgb(37 90 81 / 88%); }

.round-four-mode {
  margin-top: 13px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px solid #d8cfc2;
  border-radius: 7px;
  background: #e8e1d7;
}
.round-four-mode button {
  min-height: 38px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #676d68;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
}
.round-four-mode button.is-active { background: #fffdf8; color: #245c54; box-shadow: 0 2px 7px rgb(56 52 44 / 10%); }
.round-four-mode button:disabled { opacity: .55; cursor: default; }
.round-four-mode button span { margin-right: 5px; }

.round-four-actions { margin-top: 10px; }
.round-four-actions > button { width: 100%; min-height: 52px; }
.round-four-actions .primary-button span { margin-right: 7px; color: #ffd7d0; font-size: 12px; }
.round-four-stop {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 7px;
  background: #a43f35;
  color: #fff;
  font-weight: 820;
  cursor: pointer;
}
.round-four-stop span { width: 14px; height: 14px; border-radius: 2px; background: #fff; }
.round-four-stop:disabled { opacity: .6; }
.round-four-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.round-four-review-actions button { min-height: 48px; }
.round-four-review-actions .primary-button { grid-column: 1 / -1; }
.round-four-status { min-height: 36px; margin: 9px 4px 0; color: #66706a; font-size: 11px; line-height: 1.5; text-align: center; }

.round-four-prompts,
.round-four-chunks { margin-top: 30px; padding-top: 24px; border-top: 1px solid #dcd2c5; }
.round-four-section-heading { margin-bottom: 13px; }
.round-four-section-heading span { color: #a43f35; font-size: 10px; font-weight: 850; }
.round-four-section-heading h2 { margin: 5px 0 0; font-size: 18px; line-height: 1.35; letter-spacing: 0; }
.round-four-prompts ul { margin: 0; padding: 0; display: grid; list-style: none; }
.round-four-prompts li { min-height: 55px; padding: 12px 0; display: grid; grid-template-columns: 32px 1fr; align-items: start; gap: 9px; border-bottom: 1px solid #e4dcd1; }
.round-four-prompts li > span { padding-top: 2px; color: #2f6d64; font-size: 10px; font-weight: 850; }
.round-four-prompts li p { margin: 0; color: #303632; font-size: 14px; line-height: 1.55; }
.round-four-chunk-list { display: flex; flex-wrap: wrap; gap: 8px; }
.round-four-chunk-list span { padding: 7px 10px; border: 1px solid #b9cbc5; border-radius: 6px; background: #edf3ef; color: #275950; font-size: 13px; font-weight: 760; }
.round-four-storage-note { margin: 30px 0 8px; padding: 14px 0 0; border-top: 1px solid #ded5ca; color: #7d7f7b; font-size: 10px; line-height: 1.6; text-align: center; }

@media (max-width: 380px) {
  .round-four-screen { padding-left: 14px; padding-right: 14px; }
  .round-four-day-tabs { width: calc(100% + 28px); margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .round-four-intro { padding-right: 72px; }
  .round-four-intro h1 { font-size: 18px; }
  .round-four-teacher { top: -80px; right: -18px; width: 122px; }
  .round-four-frame-empty strong,
  .round-four-audio-stage strong { font-size: 15px; }
}

@media (min-width: 431px) {
  .round-four-screen { border-left: 1px solid #d9d1c6; border-right: 1px solid #d9d1c6; }
}