:root {
  --bg: #fff9f1;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-border: rgba(255, 255, 255, 0.7);
  --ink: #233041;
  --muted: #5e6a79;
  --accent: #ff9e6d;
  --accent-strong: #ff7f45;
  --mint: #dff6ec;
  --mint-strong: #69c59f;
  --blue: #daf1ff;
  --blue-strong: #3a8bc5;
  --lavender: #ece4ff;
  --lavender-strong: #7b63d0;
  --rose: #ffe7ef;
  --shadow: 0 24px 70px -42px rgba(64, 79, 107, 0.55);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --font-kaiti: "BiauKai", "DFKai-SB", "STKaiti", "Kaiti SC", "KaiTi", "Kaiti TC", "Songti SC", serif;
  --font-body: var(--font-kaiti);
  --font-display: var(--font-kaiti);
}

body.is-student-home #lesson-map {
  --map-design-version: 2;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(133, 86, 39, 0.42);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 246, 196, 0.95), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(188, 232, 221, 0.45), transparent 34%),
    linear-gradient(135deg, #fff5d8 0%, #f6dfad 52%, #fcefc8 100%);
  box-shadow: 0 20px 46px rgba(107, 74, 36, 0.2);
}

body.is-student-home #lesson-map::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 3px double rgba(126, 74, 28, 0.78);
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
}

body.is-student-home #lesson-map .panel__header {
  position: relative;
  z-index: 2;
  padding-inline: 18px;
}

body.is-student-home #lesson-map h2 {
  color: #7b3f16;
  text-shadow: 0 2px 0 rgba(255, 239, 197, 0.9);
}

body.is-student-home #lesson-map .panel__header p {
  color: #744f2c;
}

body.is-student-home #lesson-map .panel__header .btn {
  background: #fff6d8;
  border-color: rgba(141, 90, 32, 0.22);
  color: #7a4519;
  box-shadow: 0 8px 18px rgba(119, 78, 28, 0.12);
}

.treasure-map {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 76px 34px;
  min-height: 1160px;
  margin-top: 26px;
  padding: 132px 44px 72px;
  overflow: hidden;
  border: 2px solid rgba(125, 76, 30, 0.45);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 16% 15%, rgba(255, 248, 218, 0.9) 0 8%, transparent 9%),
    radial-gradient(ellipse at 82% 28%, rgba(234, 248, 222, 0.72) 0 9%, transparent 10%),
    radial-gradient(ellipse at 18% 65%, rgba(236, 248, 230, 0.7) 0 10%, transparent 11%),
    linear-gradient(rgba(151, 103, 45, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 103, 45, 0.05) 1px, transparent 1px),
    linear-gradient(145deg, #fff1bd 0%, #f8e2ad 48%, #fff6cf 100%);
  background-size: auto, auto, auto, 24px 24px, 24px 24px, auto;
  box-shadow:
    inset 0 0 0 8px rgba(255, 246, 212, 0.55),
    inset 0 0 34px rgba(130, 83, 32, 0.16);
}

.treasure-map::before {
  content: "";
  position: absolute;
  inset: 86px 42px 48px;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='880' height='1040' viewBox='0 0 880 1040' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82 86 C278 42 515 56 732 108 C856 138 828 264 650 282 C430 304 228 266 150 362 C56 478 286 552 486 500 C772 426 828 604 628 684 C408 772 86 682 98 830 C108 956 464 970 792 884' fill='none' stroke='%2394714f' stroke-width='7' stroke-linecap='round' stroke-dasharray='1 24' opacity='.82'/%3E%3Cg fill='%23865b39' opacity='.86'%3E%3Cellipse cx='128' cy='80' rx='8' ry='15' transform='rotate(72 128 80)'/%3E%3Cellipse cx='188' cy='62' rx='8' ry='15' transform='rotate(82 188 62)'/%3E%3Cellipse cx='314' cy='63' rx='8' ry='15' transform='rotate(96 314 63)'/%3E%3Cellipse cx='484' cy='76' rx='8' ry='15' transform='rotate(102 484 76)'/%3E%3Cellipse cx='688' cy='126' rx='8' ry='15' transform='rotate(112 688 126)'/%3E%3Cellipse cx='756' cy='238' rx='8' ry='15' transform='rotate(182 756 238)'/%3E%3Cellipse cx='568' cy='286' rx='8' ry='15' transform='rotate(266 568 286)'/%3E%3Cellipse cx='336' cy='296' rx='8' ry='15' transform='rotate(264 336 296)'/%3E%3Cellipse cx='150' cy='378' rx='8' ry='15' transform='rotate(202 150 378)'/%3E%3Cellipse cx='118' cy='504' rx='8' ry='15' transform='rotate(138 118 504)'/%3E%3Cellipse cx='278' cy='546' rx='8' ry='15' transform='rotate(82 278 546)'/%3E%3Cellipse cx='514' cy='506' rx='8' ry='15' transform='rotate(76 514 506)'/%3E%3Cellipse cx='750' cy='560' rx='8' ry='15' transform='rotate(132 750 560)'/%3E%3Cellipse cx='668' cy='682' rx='8' ry='15' transform='rotate(224 668 682)'/%3E%3Cellipse cx='398' cy='746' rx='8' ry='15' transform='rotate(268 398 746)'/%3E%3Cellipse cx='116' cy='824' rx='8' ry='15' transform='rotate(178 116 824)'/%3E%3Cellipse cx='252' cy='930' rx='8' ry='15' transform='rotate(92 252 930)'/%3E%3Cellipse cx='548' cy='954' rx='8' ry='15' transform='rotate(88 548 954)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

.treasure-map::after {
  content: "";
  position: absolute;
  left: 32px;
  top: 32px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    conic-gradient(from 22deg, #8b5a34 0 12%, #fff4d1 12% 25%, #8b5a34 25% 37%, #fff4d1 37% 50%, #8b5a34 50% 62%, #fff4d1 62% 75%, #8b5a34 75% 87%, #fff4d1 87% 100%);
  box-shadow: inset 0 0 0 10px rgba(255, 247, 222, 0.9), 0 8px 18px rgba(101, 65, 29, 0.2);
  opacity: 0.36;
  z-index: 0;
}

.treasure-map .adventure-node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  min-height: 164px;
  margin-top: var(--map-rise, 0);
  padding: 16px 16px 18px;
  overflow: visible;
  border: 1px solid rgba(133, 86, 39, 0.22);
  border-radius: 28px 18px 30px 20px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.94), transparent 24%),
    linear-gradient(135deg, rgba(255, 251, 230, 0.96), var(--node-wash, rgba(224, 244, 232, 0.88)));
  box-shadow:
    0 16px 28px rgba(105, 75, 41, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82);
  transform: translateY(var(--map-rise, 0)) rotate(var(--node-tilt, -1deg));
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.treasure-map .adventure-node:hover {
  box-shadow:
    0 20px 34px rgba(105, 75, 41, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  transform: translateY(calc(var(--map-rise, 0) - 4px)) rotate(var(--node-tilt, -1deg));
}

.treasure-map .adventure-node:nth-child(4n + 1) {
  --node-tilt: -1.5deg;
  --node-wash: #e5f4e7;
}

.treasure-map .adventure-node:nth-child(4n + 2) {
  --map-rise: 18px;
  --node-tilt: 1.2deg;
  --node-wash: #eef6df;
}

.treasure-map .adventure-node:nth-child(4n + 3) {
  --map-rise: -14px;
  --node-tilt: -0.8deg;
  --node-wash: #e7f5f3;
}

.treasure-map .adventure-node:nth-child(4n) {
  --map-rise: 10px;
  --node-tilt: 1deg;
  --node-wash: #fff5d8;
}

.treasure-map .adventure-node__art {
  width: 88px;
  height: 88px;
  margin: 0 auto 10px;
  border-radius: 26px;
  background: linear-gradient(145deg, #fff8d9, #e9f7ea);
  box-shadow: inset 0 0 0 1px rgba(139, 91, 33, 0.18), 0 8px 16px rgba(123, 86, 38, 0.14);
}

.treasure-map .adventure-node__art img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(78, 51, 25, 0.16));
}

.treasure-map .adventure-node__content {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

.treasure-map .adventure-node__period {
  margin-bottom: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #7b5a35;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(97, 70, 33, 0.1);
}

.treasure-map .adventure-node__title,
.treasure-map .adventure-node strong {
  display: block;
  max-width: 100%;
  color: #102d49;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.26;
  letter-spacing: 0;
  text-align: center;
  writing-mode: horizontal-tb;
  word-break: keep-all;
}

.treasure-map .adventure-node__status {
  margin-top: 10px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #7a4519;
  color: #fff7dc;
  font-size: 12px;
  box-shadow: 0 5px 12px rgba(86, 48, 20, 0.18);
}

.treasure-map .adventure-node.current {
  border-color: rgba(171, 103, 26, 0.5);
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.98), transparent 25%),
    linear-gradient(135deg, #fff1b5, #ffe0a8 52%, #fff6d7);
  box-shadow:
    0 20px 34px rgba(154, 93, 23, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.treasure-map .adventure-node.current .adventure-node__dog {
  position: absolute;
  left: 18px;
  top: -38px;
  width: 76px;
  height: 76px;
  display: block;
  filter: drop-shadow(0 8px 10px rgba(93, 62, 28, 0.18));
}

.treasure-map .adventure-node.current .adventure-node__title,
.treasure-map .adventure-node.current strong {
  font-size: clamp(24px, 2.2vw, 31px);
}

.treasure-map .adventure-node.complete {
  border-color: rgba(110, 151, 84, 0.4);
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.96), transparent 25%),
    linear-gradient(135deg, #f4f7d6, #dff2d5);
}

.treasure-map .adventure-node.complete::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d8a12f;
  box-shadow: 0 0 0 5px rgba(255, 225, 128, 0.35);
}

@media (max-width: 900px) {
  .treasure-map {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 48px 22px;
    min-height: 0;
    padding: 112px 24px 48px;
  }

  .treasure-map::before {
    inset: 74px 18px 36px;
    opacity: 0.5;
  }
}

@media (max-width: 680px) {
  body.is-student-home #lesson-map::before {
    inset: 12px;
  }

  .treasure-map {
    grid-template-columns: 1fr;
    padding: 96px 18px 36px;
  }

  .treasure-map .adventure-node {
    transform: none;
  }

  .treasure-map .adventure-node:hover {
    transform: translateY(-3px);
  }
}

/* Final student-home map override: large number, larger art/title, no chain. */
html body.is-student-home .adventure-map,
html body.is-student-home #lessonGrid.adventure-map {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 34px;
  overflow: hidden;
  border: 2px solid rgba(132, 85, 37, 0.36);
  border-radius: 30px;
  background:
    linear-gradient(rgba(138, 91, 38, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 91, 38, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 12% 14%, rgba(255, 237, 178, 0.9), transparent 34%),
    linear-gradient(135deg, #fff0bb 0%, #eef8dd 55%, #e6f7ff 100%);
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow: inset 0 0 0 8px rgba(255, 250, 225, 0.62);
}

html body.is-student-home .adventure-map::before,
html body.is-student-home .adventure-map::after,
html body.is-student-home #lessonGrid.adventure-map::before,
html body.is-student-home #lessonGrid.adventure-map::after,
html body.is-student-home .adventure-map .adventure-node::before,
html body.is-student-home .adventure-map .adventure-node::after {
  content: none !important;
  display: none !important;
}

html body.is-student-home .adventure-map .adventure-node,
html body.is-student-home .adventure-map .adventure-node:nth-child(2n),
html body.is-student-home .adventure-map .adventure-node:nth-child(3n),
html body.is-student-home .adventure-map .adventure-node:nth-child(4n),
html body.is-student-home .adventure-map .adventure-node:nth-child(5n) {
  --tilt: 0deg;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 76px minmax(140px, 1fr) auto auto;
  gap: 12px;
  min-height: 300px;
  margin-top: 0;
  padding: 22px 20px 24px;
  overflow: hidden;
  border: 1px solid rgba(143, 103, 54, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), transparent 30%),
    linear-gradient(145deg, #fff6d8 0%, #f4f9e8 54%, #eaf8fb 100%);
  box-shadow: none;
  transform: none;
}

html body.is-student-home .adventure-map .adventure-node:hover {
  border-color: rgba(245, 112, 57, 0.52);
  box-shadow: 0 10px 22px rgba(78, 56, 29, 0.12);
  transform: translateY(-2px);
}

html body.is-student-home .adventure-map .adventure-node.is-current,
html body.is-student-home .adventure-map .adventure-node.current {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), transparent 30%),
    linear-gradient(145deg, #ffe9a8 0%, #fff3ca 50%, #ecf8e4 100%);
}

html body.is-student-home .adventure-map .adventure-node__number {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ff6840;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(60px, 5.8vw, 86px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(255, 223, 145, 0.9);
  box-shadow: none;
}

html body.is-student-home .adventure-map .adventure-node__art {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: min(82%, 190px);
  height: 150px;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

html body.is-student-home .adventure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .adventure-map .adventure-node__art img,
html body.is-student-home .adventure-map .adventure-node__art svg,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

html body.is-student-home .adventure-map .adventure-node__content {
  grid-column: 1;
  grid-row: 3;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  padding-right: 0;
  text-align: center;
  writing-mode: horizontal-tb;
}

html body.is-student-home .adventure-map .adventure-node__period {
  display: none;
}

html body.is-student-home .adventure-map .adventure-node__title,
html body.is-student-home .adventure-map .adventure-node strong {
  color: #0f2d49;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  writing-mode: horizontal-tb;
  word-break: keep-all;
  overflow-wrap: break-word;
}

html body.is-student-home .adventure-map .adventure-node__status {
  grid-column: 1;
  grid-row: 4;
  align-self: center;
  justify-self: center;
  margin-top: 2px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #7a4519;
  color: #fff7dc;
  font-size: 13px;
  box-shadow: none;
}

html body.is-student-home .adventure-map .adventure-node__dog {
  left: auto;
  right: 96px;
  top: 18px;
  width: 46px;
  height: 46px;
}

@media (max-width: 1100px) {
  html body.is-student-home .adventure-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  html body.is-student-home .adventure-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px;
  }

  html body.is-student-home .adventure-map .adventure-node {
    grid-template-columns: minmax(0, 1fr) 96px;
    min-height: 178px;
    padding: 16px;
  }

  html body.is-student-home .adventure-map .adventure-node__art {
    width: 96px;
    height: 96px;
  }

  html body.is-student-home .adventure-map .adventure-node__content {
    padding-right: 100px;
  }
}

@media (max-width: 540px) {
  html body.is-student-home .adventure-map {
    grid-template-columns: 1fr;
  }

  html body.is-student-home .adventure-map .adventure-node {
    grid-template-columns: minmax(0, 1fr) 112px;
    min-height: 174px;
  }

  html body.is-student-home .adventure-map .adventure-node__art {
    width: 112px;
    height: 112px;
  }

  html body.is-student-home .adventure-map .adventure-node__content {
    padding-right: 118px;
  }
}

/* Final lesson-map card layout: number top-left, image centered, horizontal title below. */
html body.is-student-home .adventure-map .adventure-node,
html body.is-student-home .treasure-map .adventure-node,
.treasure-map .adventure-node {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 72px minmax(132px, 1fr) auto auto !important;
  align-items: stretch !important;
  justify-items: center !important;
  min-height: 300px !important;
  padding: 24px 20px 22px !important;
  overflow: hidden !important;
}

html body.is-student-home .adventure-map .adventure-node__number,
html body.is-student-home .treasure-map .adventure-node__number,
.treasure-map .adventure-node__number {
  position: absolute !important;
  top: 20px !important;
  left: 24px !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ff6840 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(58px, 5.6vw, 82px) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 3px 0 rgba(255, 226, 154, 0.95) !important;
}

html body.is-student-home .adventure-map .adventure-node__art,
html body.is-student-home .treasure-map .adventure-node__art,
.treasure-map .adventure-node__art {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(86%, 172px) !important;
  height: 142px !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.is-student-home .adventure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image,
html body.is-student-home .adventure-map .adventure-node__art img,
html body.is-student-home .adventure-map .adventure-node__art svg,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image,
html body.is-student-home .treasure-map .adventure-node__art img,
html body.is-student-home .treasure-map .adventure-node__art svg,
.treasure-map .adventure-node__art .illustration-image-frame,
.treasure-map .adventure-node__art .illustration-image,
.treasure-map .adventure-node__art img,
.treasure-map .adventure-node__art svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

html body.is-student-home .adventure-map .adventure-node__content,
html body.is-student-home .treasure-map .adventure-node__content,
.treasure-map .adventure-node__content {
  grid-column: 1 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
}

html body.is-student-home .adventure-map .adventure-node__period,
html body.is-student-home .treasure-map .adventure-node__period,
.treasure-map .adventure-node__period {
  display: none !important;
}

html body.is-student-home .adventure-map .adventure-node__title,
html body.is-student-home .adventure-map .adventure-node strong,
html body.is-student-home .treasure-map .adventure-node__title,
html body.is-student-home .treasure-map .adventure-node strong,
.treasure-map .adventure-node__title,
.treasure-map .adventure-node strong {
  display: block !important;
  width: 100% !important;
  color: #0f2d49 !important;
  font-size: clamp(25px, 2.1vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

html body.is-student-home .adventure-map .adventure-node__status,
html body.is-student-home .treasure-map .adventure-node__status,
.treasure-map .adventure-node__status {
  grid-column: 1 !important;
  grid-row: 4 !important;
  align-self: center !important;
  justify-self: center !important;
  margin-top: 12px !important;
  text-align: center !important;
}

html body.is-student-home .adventure-map .adventure-node__dog,
html body.is-student-home .treasure-map .adventure-node__dog,
.treasure-map .adventure-node__dog {
  left: 50% !important;
  right: auto !important;
  top: 82px !important;
  width: 42px !important;
  height: 42px !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 780px) {
  html body.is-student-home .adventure-map .adventure-node,
  html body.is-student-home .treasure-map .adventure-node,
  .treasure-map .adventure-node {
    min-height: 250px !important;
    padding: 20px 16px 18px !important;
    grid-template-rows: 58px minmax(104px, 1fr) auto auto !important;
  }

  html body.is-student-home .adventure-map .adventure-node__number,
  html body.is-student-home .treasure-map .adventure-node__number,
  .treasure-map .adventure-node__number {
    top: 18px !important;
    left: 20px !important;
    font-size: 48px !important;
  }

  html body.is-student-home .adventure-map .adventure-node__art,
  html body.is-student-home .treasure-map .adventure-node__art,
  .treasure-map .adventure-node__art {
    width: min(82%, 132px) !important;
    height: 108px !important;
  }

  html body.is-student-home .adventure-map .adventure-node__title,
  html body.is-student-home .adventure-map .adventure-node strong,
  html body.is-student-home .treasure-map .adventure-node__title,
  html body.is-student-home .treasure-map .adventure-node strong,
  .treasure-map .adventure-node__title,
  .treasure-map .adventure-node strong {
    font-size: 23px !important;
  }
}

/* Final treasure map card override. Keep lesson titles horizontal. */
html body.is-student-home .treasure-map .adventure-node,
html body.is-student-home .adventure-map .adventure-node,
html body.is-student-home .adventure-map .adventure-node:nth-child(n),
.treasure-map .adventure-node,
.treasure-map .adventure-node:nth-child(n) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 64px minmax(118px, 1fr) auto auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 10px !important;
  min-height: 272px !important;
  padding: 24px 18px 20px !important;
  overflow: hidden !important;
}

html body.is-student-home .treasure-map .adventure-node__number,
html body.is-student-home .adventure-map .adventure-node__number,
.treasure-map .adventure-node__number {
  position: absolute !important;
  top: 22px !important;
  left: 24px !important;
  right: auto !important;
  z-index: 3 !important;
  color: #ff6842 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(54px, 4.8vw, 72px) !important;
  font-weight: 900 !important;
  line-height: .86 !important;
  text-shadow: 0 3px 0 rgba(255, 230, 148, .9) !important;
}

html body.is-student-home .treasure-map .adventure-node__art,
html body.is-student-home .adventure-map .adventure-node__art,
.treasure-map .adventure-node__art {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(82%, 156px) !important;
  height: 124px !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

html body.is-student-home .treasure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image,
html body.is-student-home .treasure-map .adventure-node__art img,
html body.is-student-home .treasure-map .adventure-node__art svg,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image,
html body.is-student-home .adventure-map .adventure-node__art img,
html body.is-student-home .adventure-map .adventure-node__art svg,
.treasure-map .adventure-node__art .illustration-image-frame,
.treasure-map .adventure-node__art .illustration-image,
.treasure-map .adventure-node__art img,
.treasure-map .adventure-node__art svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.is-student-home .treasure-map .adventure-node__content,
html body.is-student-home .adventure-map .adventure-node__content,
.treasure-map .adventure-node__content {
  grid-column: 1 !important;
  grid-row: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
}

html body.is-student-home .treasure-map .adventure-node__period,
html body.is-student-home .adventure-map .adventure-node__period,
.treasure-map .adventure-node__period {
  display: none !important;
}

html body.is-student-home .treasure-map .adventure-node__title,
html body.is-student-home .treasure-map .adventure-node strong,
html body.is-student-home .adventure-map .adventure-node__title,
html body.is-student-home .adventure-map .adventure-node strong,
.treasure-map .adventure-node__title,
.treasure-map .adventure-node strong {
  display: block !important;
  width: 100% !important;
  color: #082b4c !important;
  font-size: clamp(25px, 2.2vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

html body.is-student-home .treasure-map .adventure-node__status,
html body.is-student-home .adventure-map .adventure-node__status,
.treasure-map .adventure-node__status {
  grid-column: 1 !important;
  grid-row: 4 !important;
  align-self: center !important;
  justify-self: center !important;
  margin-top: 2px !important;
}

html body.is-student-home .treasure-map .adventure-node__dog,
html body.is-student-home .adventure-map .adventure-node__dog,
.treasure-map .adventure-node__dog {
  left: 50% !important;
  right: auto !important;
  top: 90px !important;
  bottom: auto !important;
  width: 42px !important;
  height: 42px !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 780px) {
  html body.is-student-home .treasure-map .adventure-node,
  html body.is-student-home .adventure-map .adventure-node,
  html body.is-student-home .adventure-map .adventure-node:nth-child(n),
  .treasure-map .adventure-node,
  .treasure-map .adventure-node:nth-child(n) {
    grid-template-rows: 52px minmax(92px, 1fr) auto auto !important;
    min-height: 238px !important;
    padding: 18px 14px 16px !important;
  }

  html body.is-student-home .treasure-map .adventure-node__number,
  html body.is-student-home .adventure-map .adventure-node__number,
  .treasure-map .adventure-node__number {
    top: 18px !important;
    left: 18px !important;
    font-size: 46px !important;
  }

  html body.is-student-home .treasure-map .adventure-node__art,
  html body.is-student-home .adventure-map .adventure-node__art,
  .treasure-map .adventure-node__art {
    width: min(84%, 126px) !important;
    height: 98px !important;
  }

  html body.is-student-home .treasure-map .adventure-node__title,
  html body.is-student-home .treasure-map .adventure-node strong,
  html body.is-student-home .adventure-map .adventure-node__title,
  html body.is-student-home .adventure-map .adventure-node strong,
  .treasure-map .adventure-node__title,
  .treasure-map .adventure-node strong {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
}

/* Treasure map cards: number top-left, centered image, horizontal title below. */
html body.is-student-home .treasure-map .adventure-node,
html body.is-student-home .adventure-map .adventure-node,
html body.is-student-home .adventure-map .adventure-node:nth-child(n),
.treasure-map .adventure-node,
.treasure-map .adventure-node:nth-child(n) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 64px minmax(118px, 1fr) auto auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 10px !important;
  min-height: 272px !important;
  padding: 24px 18px 20px !important;
  overflow: hidden !important;
}

html body.is-student-home .treasure-map .adventure-node__number,
html body.is-student-home .adventure-map .adventure-node__number,
.treasure-map .adventure-node__number {
  position: absolute !important;
  top: 22px !important;
  left: 24px !important;
  right: auto !important;
  z-index: 3 !important;
  color: #ff6842 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(54px, 4.8vw, 72px) !important;
  font-weight: 900 !important;
  line-height: .86 !important;
  text-shadow: 0 3px 0 rgba(255, 230, 148, .9) !important;
}

html body.is-student-home .treasure-map .adventure-node__art,
html body.is-student-home .adventure-map .adventure-node__art,
.treasure-map .adventure-node__art {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(82%, 156px) !important;
  height: 124px !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

html body.is-student-home .treasure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image,
html body.is-student-home .treasure-map .adventure-node__art img,
html body.is-student-home .treasure-map .adventure-node__art svg,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image,
html body.is-student-home .adventure-map .adventure-node__art img,
html body.is-student-home .adventure-map .adventure-node__art svg,
.treasure-map .adventure-node__art .illustration-image-frame,
.treasure-map .adventure-node__art .illustration-image,
.treasure-map .adventure-node__art img,
.treasure-map .adventure-node__art svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.is-student-home .treasure-map .adventure-node__content,
html body.is-student-home .adventure-map .adventure-node__content,
.treasure-map .adventure-node__content {
  grid-column: 1 !important;
  grid-row: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
}

html body.is-student-home .treasure-map .adventure-node__period,
html body.is-student-home .adventure-map .adventure-node__period,
.treasure-map .adventure-node__period {
  display: none !important;
}

html body.is-student-home .treasure-map .adventure-node__title,
html body.is-student-home .treasure-map .adventure-node strong,
html body.is-student-home .adventure-map .adventure-node__title,
html body.is-student-home .adventure-map .adventure-node strong,
.treasure-map .adventure-node__title,
.treasure-map .adventure-node strong {
  display: block !important;
  width: 100% !important;
  color: #082b4c !important;
  font-size: clamp(25px, 2.2vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

html body.is-student-home .treasure-map .adventure-node__status,
html body.is-student-home .adventure-map .adventure-node__status,
.treasure-map .adventure-node__status {
  grid-column: 1 !important;
  grid-row: 4 !important;
  align-self: center !important;
  justify-self: center !important;
  margin-top: 2px !important;
}

html body.is-student-home .treasure-map .adventure-node__dog,
html body.is-student-home .adventure-map .adventure-node__dog,
.treasure-map .adventure-node__dog {
  left: 50% !important;
  right: auto !important;
  top: 90px !important;
  bottom: auto !important;
  width: 42px !important;
  height: 42px !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 780px) {
  html body.is-student-home .treasure-map .adventure-node,
  html body.is-student-home .adventure-map .adventure-node,
  html body.is-student-home .adventure-map .adventure-node:nth-child(n),
  .treasure-map .adventure-node,
  .treasure-map .adventure-node:nth-child(n) {
    grid-template-rows: 52px minmax(92px, 1fr) auto auto !important;
    min-height: 238px !important;
    padding: 18px 14px 16px !important;
  }

  html body.is-student-home .treasure-map .adventure-node__number,
  html body.is-student-home .adventure-map .adventure-node__number,
  .treasure-map .adventure-node__number {
    top: 18px !important;
    left: 18px !important;
    font-size: 46px !important;
  }

  html body.is-student-home .treasure-map .adventure-node__art,
  html body.is-student-home .adventure-map .adventure-node__art,
  .treasure-map .adventure-node__art {
    width: min(84%, 126px) !important;
    height: 98px !important;
  }

  html body.is-student-home .treasure-map .adventure-node__title,
  html body.is-student-home .treasure-map .adventure-node strong,
  html body.is-student-home .adventure-map .adventure-node__title,
  html body.is-student-home .adventure-map .adventure-node strong,
  .treasure-map .adventure-node__title,
  .treasure-map .adventure-node strong {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
}

/* Lesson hero final layout: three equal panels in one bar. */
html body:not(.is-login-page) #lessonHero .lesson-hero {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 22px !important;
  width: 100% !important;
  padding: 24px !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero > .lesson-hero__course,
html body:not(.is-login-page) #lessonHero .lesson-hero > .lesson-hero__poem,
html body:not(.is-login-page) #lessonHero .lesson-hero > .lesson-hero__progress {
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 430px !important;
  align-self: stretch !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero > .lesson-hero__course {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 22px !important;
  border-radius: 30px !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero > .lesson-hero__poem {
  grid-column: 2 !important;
  display: grid !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero > .lesson-hero__progress {
  grid-column: 3 !important;
  display: flex !important;
  justify-content: center !important;
  padding: 22px !important;
  border-radius: 30px !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__course-title h1 {
  font-size: clamp(42px, 3.8vw, 62px) !important;
  line-height: 1.08 !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__art--focus {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 18px !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__art--focus .illustration-image-frame {
  width: min(88%, 330px) !important;
  max-width: 330px !important;
  aspect-ratio: 1 !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__art--focus img,
html body:not(.is-login-page) #lessonHero .lesson-hero__art--focus svg,
html body:not(.is-login-page) #lessonHero .lesson-hero__art--focus .illustration-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__poem-card {
  min-height: 100% !important;
  height: 100% !important;
  justify-content: center !important;
  padding: 34px 36px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 30%),
    linear-gradient(145deg, rgba(255, 239, 198, 0.98), rgba(255, 249, 229, 0.98) 55%, rgba(231, 248, 238, 0.96)),
    #fff2cf !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__poem-title {
  margin-bottom: 22px !important;
  font-size: clamp(34px, 3.1vw, 50px) !important;
  line-height: 1.12 !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__poem-lines {
  gap: 10px !important;
  font-size: clamp(31px, 2.75vw, 44px) !important;
  line-height: 1.42 !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__poem-task {
  margin-top: 24px !important;
  font-size: 16px !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__progress .student-session {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  align-content: start !important;
  gap: 18px !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__progress .student-session__main {
  align-items: center !important;
  gap: 14px !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__progress .student-session__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__progress .student-session__stat {
  min-height: 88px !important;
  border-radius: 20px !important;
  padding: 14px !important;
}

html body:not(.is-login-page) #lessonHero .lesson-hero__progress .student-session__stat-value {
  font-size: 26px !important;
}

@media (max-width: 1080px) {
  html body:not(.is-login-page) #lessonHero .lesson-hero {
    grid-template-columns: 1fr !important;
  }

  html body:not(.is-login-page) #lessonHero .lesson-hero > .lesson-hero__course,
  html body:not(.is-login-page) #lessonHero .lesson-hero > .lesson-hero__poem,
  html body:not(.is-login-page) #lessonHero .lesson-hero > .lesson-hero__progress {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: auto !important;
  }
}

/* Daily review: a visible Ebbinghaus memory loop on the student home page. */
.daily-review-panel {
  overflow: hidden;
  border-color: rgba(114, 157, 141, 0.22);
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 236, 171, 0.58), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(179, 231, 223, 0.5), transparent 28%),
    #fffef8;
}

.daily-review {
  display: grid;
  gap: 20px;
}

.daily-review__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.daily-review__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff0bd;
  color: #8a5600;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(209, 162, 72, 0.2);
}

.daily-review__header h2 {
  margin: 0;
  color: #0f2d49;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.15;
}

.daily-review__header p {
  margin: 8px 0 0;
  color: #41556a;
  font-size: 17px;
  line-height: 1.7;
}

.daily-review__body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.daily-review__path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(126, 164, 150, 0.18);
}

.daily-review__stop {
  display: grid;
  gap: 4px;
  min-height: 58px;
  align-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 244, 205, 0.96), rgba(231, 249, 255, 0.94));
  color: #0f2d49;
  padding: 10px 12px;
}

.daily-review__stop b {
  font-size: 16px;
  line-height: 1.1;
}

.daily-review__stop small {
  color: #6a5a2f;
  font-size: 13px;
  font-weight: 800;
}

.daily-review__mascot {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 210px;
  padding: 22px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(219, 245, 237, 0.92), rgba(255, 241, 198, 0.78));
  text-align: center;
}

.daily-review__dog {
  width: 98px;
  height: 98px;
  object-fit: contain;
}

.daily-review__mascot strong {
  color: #0f2d49;
  font-size: 20px;
  line-height: 1.25;
}

.daily-review__mascot span {
  color: #4e6478;
  font-size: 14px;
  line-height: 1.6;
}

.daily-review__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.daily-review-card {
  display: grid;
  justify-items: start;
  align-content: space-between;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(134, 161, 155, 0.28);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  color: #0f2d49;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(58, 80, 77, 0.08);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.daily-review-card:hover,
.daily-review-card.is-active {
  border-color: rgba(250, 120, 70, 0.65);
  background: #fff6d8;
  box-shadow: 0 12px 24px rgba(103, 72, 31, 0.12);
  transform: translateY(-2px);
}

.daily-review-card__interval,
.daily-review-card__meta {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e8f4ff;
  color: #315b7f;
  font-size: 13px;
  font-weight: 800;
}

.daily-review-card strong {
  color: #102f4c;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 900;
  line-height: 1.15;
}

.daily-review-card__source {
  color: #5a6c7c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.daily-review-card__meta {
  background: #f6f1e6;
  color: #6d5a3a;
  font-size: 12px;
}

.daily-review__status {
  margin: 0;
  padding: 14px 18px;
  border-radius: 18px;
  background: #f3f9ff;
  color: #31506a;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .daily-review__header {
    grid-template-columns: 1fr;
  }

  .daily-review__body {
    grid-template-columns: 1fr;
  }

  .daily-review__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-review__path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .daily-review__cards {
    grid-template-columns: 1fr;
  }

  .daily-review__path {
    grid-template-columns: 1fr;
  }

  .daily-review-card {
    min-height: 104px;
  }
}

/* Definitive home treasure map sizing: keep lessons bold, uncluttered, and inside each card. */
html body.is-student-home .adventure-map,
html body.is-student-home #lessonGrid.adventure-map {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 34px;
  overflow: hidden;
}

html body.is-student-home .adventure-map::before,
html body.is-student-home .adventure-map::after,
html body.is-student-home #lessonGrid.adventure-map::before,
html body.is-student-home #lessonGrid.adventure-map::after,
html body.is-student-home .adventure-map .adventure-node::before,
html body.is-student-home .adventure-map .adventure-node::after {
  content: none !important;
  display: none !important;
}

html body.is-student-home .adventure-map .adventure-node,
html body.is-student-home .adventure-map .adventure-node:nth-child(n) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  grid-template-rows: 1fr auto;
  min-height: 228px;
  gap: 14px 16px;
  padding: 22px;
  overflow: hidden;
  box-shadow: none;
  transform: none;
}

html body.is-student-home .adventure-map .adventure-node__number {
  color: #ff6840;
  font-size: clamp(60px, 5.8vw, 86px);
  font-weight: 900;
  line-height: 0.9;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html body.is-student-home .adventure-map .adventure-node__art {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 142px;
  height: 142px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html body.is-student-home .adventure-map .adventure-node__art img,
html body.is-student-home .adventure-map .adventure-node__art svg,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image-frame {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html body.is-student-home .adventure-map .adventure-node__content {
  padding-right: 150px;
  text-align: left;
}

html body.is-student-home .adventure-map .adventure-node__period {
  display: none;
}

html body.is-student-home .adventure-map .adventure-node__title,
html body.is-student-home .adventure-map .adventure-node strong {
  font-size: clamp(32px, 2.8vw, 42px);
  line-height: 1.18;
  letter-spacing: 0;
  writing-mode: horizontal-tb;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

html body.is-student-home .adventure-map .adventure-node__dog {
  right: 110px;
  width: 48px;
  height: 48px;
}

@media (max-width: 780px) {
  html body.is-student-home .adventure-map,
  html body.is-student-home #lessonGrid.adventure-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  html body.is-student-home .adventure-map,
  html body.is-student-home #lessonGrid.adventure-map {
    grid-template-columns: 1fr;
  }
}

/* Clean treasure-map card layout requested for the student home page. */
html body.is-student-home .adventure-map {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 34px;
  overflow: hidden;
  border: 2px solid rgba(132, 85, 37, 0.36);
  border-radius: 30px;
  background:
    linear-gradient(rgba(138, 91, 38, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 91, 38, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 12% 14%, rgba(255, 237, 178, 0.9), transparent 34%),
    linear-gradient(135deg, #fff0bb 0%, #eef8dd 55%, #e6f7ff 100%);
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow: inset 0 0 0 8px rgba(255, 250, 225, 0.62);
}

html body.is-student-home .adventure-map::before,
html body.is-student-home .adventure-map::after {
  content: none;
  display: none;
}

html body.is-student-home .adventure-map .adventure-node,
html body.is-student-home .adventure-map .adventure-node:nth-child(2n),
html body.is-student-home .adventure-map .adventure-node:nth-child(3n),
html body.is-student-home .adventure-map .adventure-node:nth-child(4n),
html body.is-student-home .adventure-map .adventure-node:nth-child(5n) {
  --tilt: 0deg;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-rows: 1fr auto;
  gap: 12px 14px;
  min-height: 212px;
  margin-top: 0;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(143, 103, 54, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), transparent 30%),
    linear-gradient(145deg, #fff6d8 0%, #f4f9e8 54%, #eaf8fb 100%);
  box-shadow: none;
  transform: none;
}

html body.is-student-home .adventure-map .adventure-node:hover {
  border-color: rgba(245, 112, 57, 0.52);
  box-shadow: 0 10px 22px rgba(78, 56, 29, 0.12);
  transform: translateY(-2px);
}

html body.is-student-home .adventure-map .adventure-node.is-current,
html body.is-student-home .adventure-map .adventure-node.current {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), transparent 30%),
    linear-gradient(145deg, #ffe9a8 0%, #fff3ca 50%, #ecf8e4 100%);
}

html body.is-student-home .adventure-map .adventure-node::before,
html body.is-student-home .adventure-map .adventure-node::after {
  content: none;
  display: none;
}

html body.is-student-home .adventure-map .adventure-node__number {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ff6840;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 5vw, 70px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(255, 223, 145, 0.9);
  box-shadow: none;
}

html body.is-student-home .adventure-map .adventure-node__art {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: min(118px, 100%);
  height: 118px;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

html body.is-student-home .adventure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .adventure-map .adventure-node__art img,
html body.is-student-home .adventure-map .adventure-node__art svg,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

html body.is-student-home .adventure-map .adventure-node__content {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding-right: 124px;
  text-align: left;
}

html body.is-student-home .adventure-map .adventure-node__period {
  display: none;
}

html body.is-student-home .adventure-map .adventure-node__title,
html body.is-student-home .adventure-map .adventure-node strong {
  color: #0f2d49;
  font-size: clamp(26px, 2.15vw, 34px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: left;
  writing-mode: horizontal-tb;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

html body.is-student-home .adventure-map .adventure-node__status {
  align-self: flex-start;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #7a4519;
  color: #fff7dc;
  font-size: 13px;
  box-shadow: none;
}

html body.is-student-home .adventure-map .adventure-node__dog {
  left: auto;
  right: 92px;
  top: 18px;
  width: 46px;
  height: 46px;
}

@media (max-width: 1100px) {
  html body.is-student-home .adventure-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  html body.is-student-home .adventure-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px;
  }

  html body.is-student-home .adventure-map .adventure-node {
    grid-template-columns: minmax(0, 1fr) 96px;
    min-height: 178px;
    padding: 16px;
  }

  html body.is-student-home .adventure-map .adventure-node__art {
    width: 96px;
    height: 96px;
  }

  html body.is-student-home .adventure-map .adventure-node__content {
    padding-right: 100px;
  }
}

@media (max-width: 540px) {
  html body.is-student-home .adventure-map {
    grid-template-columns: 1fr;
  }

  html body.is-student-home .adventure-map .adventure-node {
    grid-template-columns: minmax(0, 1fr) 112px;
    min-height: 174px;
  }

  html body.is-student-home .adventure-map .adventure-node__art {
    width: 112px;
    height: 112px;
  }

  html body.is-student-home .adventure-map .adventure-node__content {
    padding-right: 118px;
  }
}

/* Final home-map refresh: cleaner, larger, and more clickable. */
body.is-login-page .welcome-hero h1,
body.is-login-page .program-story h2,
body.is-student-home #lesson-map h2,
.treasure-map .adventure-node__title,
.kid-hero h1 {
  font-family: "KaiTi", "STKaiti", "楷体", var(--font-display);
}

body.is-student-home #lesson-map {
  overflow: hidden;
  border: 1px solid rgba(150, 99, 45, 0.34);
  border-radius: 30px;
  background:
    linear-gradient(rgba(142, 105, 50, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 105, 50, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, #fff4d4 0%, #f5dfad 46%, #e7f6eb 100%);
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 22px 46px rgba(84, 63, 34, 0.16);
}

body.is-student-home #lesson-map::before {
  inset: 16px;
  border: 3px double rgba(128, 78, 30, 0.5);
  border-radius: 24px;
}

body.is-student-home #lesson-map .panel__header {
  padding-inline: 18px;
}

body.is-student-home #lesson-map h2 {
  color: #7a3c12;
  font-size: clamp(38px, 4.4vw, 58px);
}

body.is-student-home #lesson-map .panel__header p {
  max-width: 760px;
  color: #6f4b28;
  font-size: 18px;
}

.treasure-map {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 26px;
  min-height: 0;
  margin-top: 28px;
  padding: 34px;
  border: 0;
  border-radius: 24px;
  background:
    linear-gradient(rgba(117, 80, 35, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 80, 35, 0.055) 1px, transparent 1px),
    rgba(255, 246, 211, 0.52);
  background-size: 20px 20px, 20px 20px, auto;
  overflow: visible;
}

.treasure-map::before,
.treasure-map::after,
.treasure-map .adventure-node::before {
  display: none !important;
}

.treasure-map .adventure-node,
.treasure-map .adventure-node:nth-child(n) {
  --node-tilt: 0deg;
  --map-rise: 0px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  grid-template-rows: 116px auto;
  align-items: start;
  justify-items: stretch;
  min-height: 214px;
  margin: 0;
  padding: 20px 20px 18px;
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 246, 0.96), rgba(234, 247, 237, 0.92)),
    var(--node-wash, #fff7df);
  box-shadow:
    0 16px 30px rgba(92, 68, 37, 0.13),
    inset 0 0 0 1px rgba(118, 84, 42, 0.14);
  transform: none;
  overflow: hidden;
}

.treasure-map .adventure-node:hover {
  box-shadow:
    0 22px 34px rgba(92, 68, 37, 0.2),
    inset 0 0 0 2px rgba(244, 174, 65, 0.52);
  transform: translateY(-4px);
}

.treasure-map .adventure-node.is-current,
.treasure-map .adventure-node.current {
  background:
    linear-gradient(135deg, #ffecad 0%, #fff5cf 48%, #eaf7de 100%);
  box-shadow:
    0 22px 38px rgba(151, 92, 24, 0.22),
    inset 0 0 0 3px rgba(255, 186, 74, 0.5);
}

.treasure-map .adventure-node.is-complete,
.treasure-map .adventure-node.complete {
  background:
    linear-gradient(135deg, rgba(244, 255, 226, 0.98), rgba(222, 247, 226, 0.94));
}

.treasure-map .adventure-node__number {
  position: absolute;
  left: 18px;
  top: 12px;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ff8a3d;
  font-family: var(--font-sans);
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
}

.treasure-map .adventure-node__art {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: 128px;
  height: 112px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.treasure-map .adventure-node__art .illustration-image-frame,
.treasure-map .adventure-node__art img,
.treasure-map .adventure-node__placeholder {
  width: 124px;
  height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(78, 51, 25, 0.16));
}

.treasure-map .adventure-node__content {
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: flex-start;
  justify-content: end;
  min-width: 0;
  text-align: left;
}

.treasure-map .adventure-node__title,
.treasure-map .adventure-node strong {
  max-width: 100%;
  color: #102d49;
  font-size: clamp(27px, 2.35vw, 36px);
  line-height: 1.18;
  text-align: left;
  writing-mode: horizontal-tb;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.treasure-map .adventure-node__period {
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #7d5a34;
  font-size: 13px;
  font-weight: 700;
}

.treasure-map .adventure-node__status {
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #153452;
  color: #fff8df;
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
}

.treasure-map .adventure-node__dog {
  position: absolute;
  right: 18px;
  bottom: 14px;
  left: auto;
  top: auto;
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 7px 10px rgba(70, 48, 22, 0.16));
  transform: none;
}

.treasure-map .adventure-node__complete {
  top: 14px;
  right: 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #f4aa24;
  font-size: 26px;
}

@media (max-width: 980px) {
  .treasure-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 24px;
  }
}

@media (max-width: 680px) {
  body.is-student-home #lesson-map {
    border-radius: 22px;
  }

  body.is-student-home #lesson-map h2 {
    font-size: 34px;
  }

  .treasure-map {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .treasure-map .adventure-node,
  .treasure-map .adventure-node:nth-child(n) {
    grid-template-columns: minmax(0, 1fr) 112px;
    grid-template-rows: 98px auto;
    min-height: 184px;
    padding: 18px;
  }

  .treasure-map .adventure-node__number {
    font-size: 38px;
  }

  .treasure-map .adventure-node__art,
  .treasure-map .adventure-node__art .illustration-image-frame,
  .treasure-map .adventure-node__art img,
  .treasure-map .adventure-node__placeholder {
    width: 106px;
    height: 90px;
  }

  .treasure-map .adventure-node__title,
  .treasure-map .adventure-node strong {
    font-size: 28px;
  }
}

/* Final treasure-map cleanup: keep cards simple, contained, and kid-readable. */
.treasure-map::before,
.treasure-map::after,
html body.is-student-home .treasure-map::before,
html body.is-student-home .treasure-map::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.treasure-map .adventure-node::before,
.treasure-map .adventure-node::after,
html body.is-student-home .treasure-map .adventure-node::before,
html body.is-student-home .treasure-map .adventure-node::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.treasure-map .adventure-node,
.treasure-map .adventure-node:nth-child(n),
html body.is-student-home .treasure-map .adventure-node,
html body.is-student-home .treasure-map .adventure-node:nth-child(n) {
  overflow: hidden !important;
  min-height: clamp(190px, 18vw, 240px) !important;
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px) !important;
  gap: clamp(10px, 1.4vw, 16px) !important;
  box-shadow:
    0 12px 24px rgba(58, 43, 24, 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.78) !important;
}

.treasure-map .adventure-node:hover,
html body.is-student-home .treasure-map .adventure-node:hover {
  box-shadow:
    0 14px 26px rgba(58, 43, 24, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82) !important;
}

.treasure-map .adventure-node__art,
.treasure-map .adventure-node.is-current .adventure-node__art,
.treasure-map .adventure-node.current .adventure-node__art,
html body.is-student-home .treasure-map .adventure-node__art,
html body.is-student-home .treasure-map .adventure-node.is-current .adventure-node__art,
html body.is-student-home .treasure-map .adventure-node.current .adventure-node__art {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  width: clamp(118px, 12vw, 156px) !important;
  height: clamp(104px, 10.5vw, 138px) !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.treasure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image-frame {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.treasure-map .adventure-node__art img,
.treasure-map .adventure-node__art svg,
.treasure-map .adventure-node__art .illustration-image,
.treasure-map .adventure-node__placeholder,
html body.is-student-home .treasure-map .adventure-node__art img,
html body.is-student-home .treasure-map .adventure-node__art svg,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image,
html body.is-student-home .treasure-map .adventure-node__placeholder {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.treasure-map .adventure-node__dog,
.treasure-map .adventure-node.current .adventure-node__dog,
.treasure-map .adventure-node.is-current .adventure-node__dog,
html body.is-student-home .treasure-map .adventure-node__dog,
html body.is-student-home .treasure-map .adventure-node.current .adventure-node__dog,
html body.is-student-home .treasure-map .adventure-node.is-current .adventure-node__dog {
  top: auto !important;
  right: 6px !important;
  bottom: 4px !important;
  left: auto !important;
  width: 44px !important;
  height: 44px !important;
  max-width: 38% !important;
  max-height: 38% !important;
  transform: none !important;
  filter: drop-shadow(0 4px 8px rgba(66, 44, 24, 0.12)) !important;
}

.treasure-map .adventure-node__title,
.treasure-map .adventure-node.current .adventure-node__title,
.treasure-map .adventure-node.current strong,
.treasure-map .adventure-node.is-current .adventure-node__title,
html body.is-student-home .treasure-map .adventure-node__title,
html body.is-student-home .treasure-map .adventure-node.current .adventure-node__title,
html body.is-student-home .treasure-map .adventure-node.current strong,
html body.is-student-home .treasure-map .adventure-node.is-current .adventure-node__title {
  font-size: clamp(23px, 2.05vw, 32px) !important;
  line-height: 1.16 !important;
}

@media (max-width: 680px) {
  .treasure-map .adventure-node,
  .treasure-map .adventure-node:nth-child(n),
  html body.is-student-home .treasure-map .adventure-node,
  html body.is-student-home .treasure-map .adventure-node:nth-child(n) {
    min-height: 180px !important;
    padding: 20px 18px !important;
  }

  .treasure-map .adventure-node__art,
  .treasure-map .adventure-node.is-current .adventure-node__art,
  .treasure-map .adventure-node.current .adventure-node__art,
  html body.is-student-home .treasure-map .adventure-node__art,
  html body.is-student-home .treasure-map .adventure-node.is-current .adventure-node__art,
  html body.is-student-home .treasure-map .adventure-node.current .adventure-node__art {
    width: 122px !important;
    height: 108px !important;
  }
}

/* Final treasure-map cleanup: no boxes around numbers or artwork. */
html body.is-student-home .treasure-map .adventure-node__number {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f26a3d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(44px, 4.2vw, 68px) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  text-shadow:
    0 3px 0 rgba(255, 232, 159, 0.95),
    0 8px 18px rgba(119, 60, 20, 0.18) !important;
}

html body.is-student-home .treasure-map .adventure-node__art,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image-frame {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body.is-student-home .treasure-map .adventure-node__art img,
html body.is-student-home .treasure-map .adventure-node__art svg,
html body.is-student-home .treasure-map .adventure-node__placeholder,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body.is-student-home .treasure-map .adventure-node__art {
  justify-self: end !important;
  align-self: start !important;
  margin-right: 2px !important;
  filter: drop-shadow(0 12px 16px rgba(106, 70, 30, 0.14));
}

html body.is-student-home .treasure-map .adventure-node__art img {
  max-width: 128px !important;
  max-height: 112px !important;
  object-fit: contain !important;
}

/* Treasure map polish: open numbers and frameless artwork. */
html body.is-student-home .treasure-map .adventure-node__number {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f26a3d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(44px, 4.2vw, 68px) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  text-shadow:
    0 3px 0 rgba(255, 232, 159, 0.95),
    0 8px 18px rgba(119, 60, 20, 0.18) !important;
}

html body.is-student-home .treasure-map .adventure-node__art,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image-frame {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body.is-student-home .treasure-map .adventure-node__art img,
html body.is-student-home .treasure-map .adventure-node__art svg,
html body.is-student-home .treasure-map .adventure-node__placeholder,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body.is-student-home .treasure-map .adventure-node__art {
  justify-self: end !important;
  align-self: start !important;
  margin-right: 2px !important;
  filter: drop-shadow(0 12px 16px rgba(106, 70, 30, 0.14));
}

html body.is-student-home .treasure-map .adventure-node__art img {
  max-width: 128px !important;
  max-height: 112px !important;
  object-fit: contain !important;
}

/* Treasure map scale cleanup: keep the open number, remove route dots, enlarge art and titles. */
html body.is-student-home .treasure-map::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

html body.is-student-home .treasure-map .adventure-node,
html body.is-student-home .treasure-map .adventure-node:nth-child(n) {
  grid-template-rows: 162px auto !important;
  gap: 8px !important;
  min-height: 270px !important;
  padding: 20px 18px 22px !important;
}

html body.is-student-home .treasure-map .adventure-node__art {
  width: 178px !important;
  height: 148px !important;
  margin: -4px -2px 0 auto !important;
}

html body.is-student-home .treasure-map .adventure-node__art img,
html body.is-student-home .treasure-map .adventure-node__art svg,
html body.is-student-home .treasure-map .adventure-node__placeholder,
html body.is-student-home .treasure-map .adventure-node__art .illustration-image {
  width: 164px !important;
  height: 136px !important;
  max-width: 164px !important;
  max-height: 136px !important;
}

html body.is-student-home .treasure-map .adventure-node__content {
  align-content: start !important;
  gap: 6px !important;
}

html body.is-student-home .treasure-map .adventure-node__title,
html body.is-student-home .treasure-map .adventure-node strong {
  min-height: 0 !important;
  font-size: clamp(30px, 2.35vw, 39px) !important;
  line-height: 1.14 !important;
  -webkit-line-clamp: 3 !important;
}

@media (max-width: 900px) {
  html body.is-student-home .treasure-map .adventure-node,
  html body.is-student-home .treasure-map .adventure-node:nth-child(n) {
    grid-template-rows: 150px auto !important;
    min-height: 250px !important;
  }

  html body.is-student-home .treasure-map .adventure-node__art {
    width: 158px !important;
    height: 132px !important;
  }

  html body.is-student-home .treasure-map .adventure-node__art img,
  html body.is-student-home .treasure-map .adventure-node__art svg,
  html body.is-student-home .treasure-map .adventure-node__placeholder,
  html body.is-student-home .treasure-map .adventure-node__art .illustration-image {
    width: 146px !important;
    height: 122px !important;
  }
}

/* Treasure map final specificity lock: this wins over older map drafts later in the file. */
html body.is-student-home #lesson-map {
  overflow: hidden;
  border: 2px solid rgba(118, 70, 26, 0.56);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 249, 219, 0.96), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(197, 235, 221, 0.44), transparent 36%),
    linear-gradient(135deg, #fff1c8 0%, #f1d8a3 48%, #fff4cd 100%);
  box-shadow:
    0 26px 56px rgba(89, 58, 25, 0.22),
    inset 0 0 0 10px rgba(255, 255, 255, 0.28);
}

html body.is-student-home #lesson-map::before {
  inset: 18px;
  border: 3px double rgba(111, 64, 23, 0.62);
  border-radius: 24px;
  opacity: 0.84;
}

html body.is-student-home #lesson-map .panel__header {
  align-items: flex-start;
  padding: 10px 22px 0;
}

html body.is-student-home #lesson-map h2 {
  color: #6f3515;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
}

html body.is-student-home #lesson-map .panel__header p {
  color: #714923;
  font-size: 18px;
}

html body.is-student-home .treasure-map {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 96px 46px;
  min-height: 1400px;
  margin-top: 30px;
  padding: 124px 52px 92px;
  overflow: hidden;
  border: 3px double rgba(109, 62, 21, 0.72);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 18% 16%, rgba(255, 250, 219, 0.82) 0 14%, transparent 32%),
    radial-gradient(ellipse at 78% 28%, rgba(209, 240, 225, 0.72) 0 16%, transparent 34%),
    radial-gradient(ellipse at 28% 72%, rgba(255, 239, 190, 0.68) 0 17%, transparent 36%),
    linear-gradient(90deg, rgba(118, 72, 30, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(118, 72, 30, 0.055) 1px, transparent 1px),
    linear-gradient(145deg, #f8e1aa 0%, #fff2c9 54%, #f5dfa9 100%);
  background-size: auto, auto, auto, 24px 24px, 24px 24px, auto;
  box-shadow:
    inset 0 0 0 10px rgba(255, 250, 224, 0.45),
    inset 0 0 38px rgba(101, 62, 24, 0.18);
}

html body.is-student-home .treasure-map::before {
  content: "";
  position: absolute;
  inset: 78px 34px 64px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.88;
  background-image: url("data:image/svg+xml,%3Csvg width='1160' height='1320' viewBox='0 0 1160 1320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112 140 C250 72 388 92 502 154 S780 238 994 146 C1080 111 1112 232 1014 300 C846 418 635 292 506 382 C360 482 556 585 758 528 C1010 456 1132 636 943 758 C741 887 443 708 247 842 C75 960 226 1120 482 1064 C707 1016 784 1188 1028 1120' fill='none' stroke='%23764b25' stroke-width='13' stroke-linecap='round' stroke-dasharray='4 32' opacity='.74'/%3E%3Cpath d='M112 140 C250 72 388 92 502 154 S780 238 994 146 C1080 111 1112 232 1014 300 C846 418 635 292 506 382 C360 482 556 585 758 528 C1010 456 1132 636 943 758 C741 887 443 708 247 842 C75 960 226 1120 482 1064 C707 1016 784 1188 1028 1120' fill='none' stroke='%23fff4cd' stroke-width='4' stroke-linecap='round' stroke-dasharray='3 33' opacity='.9'/%3E%3Cg fill='%23764b25' opacity='.48'%3E%3Cellipse cx='140' cy='164' rx='16' ry='8' transform='rotate(-25 140 164)'/%3E%3Cellipse cx='488' cy='170' rx='16' ry='8' transform='rotate(22 488 170)'/%3E%3Cellipse cx='1018' cy='304' rx='18' ry='9' transform='rotate(-16 1018 304)'/%3E%3Cellipse cx='502' cy='386' rx='15' ry='8' transform='rotate(-28 502 386)'/%3E%3Cellipse cx='760' cy='530' rx='18' ry='9' transform='rotate(16 760 530)'/%3E%3Cellipse cx='940' cy='760' rx='18' ry='9' transform='rotate(-20 940 760)'/%3E%3Cellipse cx='250' cy='842' rx='18' ry='9' transform='rotate(22 250 842)'/%3E%3Cellipse cx='482' cy='1064' rx='18' ry='9' transform='rotate(-10 482 1064)'/%3E%3Cellipse cx='1028' cy='1120' rx='18' ry='9' transform='rotate(18 1028 1120)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

html body.is-student-home .treasure-map .adventure-node,
html body.is-student-home .treasure-map .adventure-node:nth-child(n) {
  --map-rise: 0px;
  --tilt: -1deg;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 124px auto;
  gap: 14px;
  min-height: 230px;
  padding: 18px 18px 20px;
  overflow: visible;
  border: 2px solid rgba(135, 88, 31, 0.34);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.98), transparent 27%),
    linear-gradient(145deg, #fffbe2 0%, #eef8e9 56%, #eaf8fb 100%);
  box-shadow:
    0 22px 32px rgba(92, 65, 34, 0.16),
    0 4px 0 rgba(113, 67, 24, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82);
  transform: translateY(var(--map-rise)) rotate(var(--tilt));
}

html body.is-student-home .treasure-map .adventure-node:nth-child(4n + 2) {
  --map-rise: 18px;
  --tilt: 1.2deg;
}

html body.is-student-home .treasure-map .adventure-node:nth-child(4n + 3) {
  --map-rise: -8px;
  --tilt: -0.7deg;
}

html body.is-student-home .treasure-map .adventure-node:nth-child(4n) {
  --map-rise: 12px;
  --tilt: 1deg;
}

html body.is-student-home .treasure-map .adventure-node:hover {
  border-color: rgba(150, 91, 28, 0.58);
  box-shadow:
    0 30px 44px rgba(92, 65, 34, 0.22),
    0 4px 0 rgba(113, 67, 24, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  transform: translateY(calc(var(--map-rise) - 6px)) rotate(var(--tilt));
}

html body.is-student-home .treasure-map .adventure-node__number {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 2px solid rgba(121, 68, 18, 0.22);
  border-radius: 20px;
  color: #793c13;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.96), transparent 32%),
    linear-gradient(145deg, #fff6bf, #ffc65f);
  box-shadow:
    0 12px 18px rgba(95, 58, 22, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

html body.is-student-home .treasure-map .adventure-node__art {
  align-self: start;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 132px;
  height: 118px;
  margin: 0 0 0 auto;
  overflow: visible;
  border: 2px solid rgba(135, 88, 31, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(145deg, #fff9db, #eaf9f4);
  box-shadow:
    0 13px 22px rgba(76, 56, 28, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

html body.is-student-home .treasure-map .adventure-node__art img,
html body.is-student-home .treasure-map .adventure-node__art svg,
html body.is-student-home .treasure-map .adventure-node__placeholder {
  width: 108px;
  height: 98px;
  max-width: 108px;
  max-height: 98px;
  object-fit: contain;
}

html body.is-student-home .treasure-map .adventure-node__period {
  display: none;
}

html body.is-student-home .treasure-map .adventure-node__content {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  text-align: left;
}

html body.is-student-home .treasure-map .adventure-node__title,
html body.is-student-home .treasure-map .adventure-node strong {
  display: -webkit-box;
  min-height: 66px;
  overflow: hidden;
  color: #12345a;
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: left;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body.is-student-home .treasure-map .adventure-node__status {
  justify-self: start;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #744018;
  color: #fff9df;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 14px rgba(92, 55, 20, 0.18);
}

html body.is-student-home .treasure-map .adventure-node.is-current,
html body.is-student-home .treasure-map .adventure-node.current {
  border-color: rgba(177, 99, 21, 0.58);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.98), transparent 27%),
    linear-gradient(145deg, #fff1af 0%, #ffe2a7 53%, #fff7da 100%);
}

html body.is-student-home .treasure-map .adventure-node.is-complete,
html body.is-student-home .treasure-map .adventure-node.complete {
  border-color: rgba(88, 134, 79, 0.46);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.97), transparent 27%),
    linear-gradient(145deg, #f7f8db 0%, #e1f4d8 100%);
}

@media (max-width: 1000px) {
  html body.is-student-home .treasure-map {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
    gap: 58px 26px;
    min-height: 0;
    padding: 112px 28px 54px;
  }
}

@media (max-width: 680px) {
  html body.is-student-home .treasure-map {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 86px 16px 34px;
  }

  html body.is-student-home .treasure-map .adventure-node,
  html body.is-student-home .treasure-map .adventure-node:nth-child(n) {
    grid-template-columns: 66px minmax(0, 1fr) 88px;
    grid-template-rows: auto;
    align-items: center;
    min-height: 118px;
    padding: 16px;
    transform: none;
  }

  html body.is-student-home .treasure-map .adventure-node__number {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 30px;
  }

  html body.is-student-home .treasure-map .adventure-node__art {
    grid-column: 3;
    grid-row: 1;
    width: 82px;
    height: 82px;
    border-radius: 22px;
  }

  html body.is-student-home .treasure-map .adventure-node__content {
    grid-column: 2;
    grid-row: 1;
  }

  html body.is-student-home .treasure-map .adventure-node__title,
  html body.is-student-home .treasure-map .adventure-node strong {
    min-height: 0;
    font-size: 24px;
  }
}

/* Treasure map redesign: larger lesson stops, lesson numbers, and a clearer route. */
body.is-student-home #lesson-map {
  overflow: hidden;
  border: 2px solid rgba(118, 70, 26, 0.56);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 249, 219, 0.96), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(197, 235, 221, 0.44), transparent 36%),
    linear-gradient(135deg, #fff1c8 0%, #f1d8a3 48%, #fff4cd 100%);
  box-shadow:
    0 26px 56px rgba(89, 58, 25, 0.22),
    inset 0 0 0 10px rgba(255, 255, 255, 0.28);
}

body.is-student-home #lesson-map::before {
  inset: 18px;
  border: 3px double rgba(111, 64, 23, 0.62);
  border-radius: 24px;
  opacity: 0.84;
}

body.is-student-home #lesson-map .panel__header {
  align-items: flex-start;
  padding: 10px 22px 0;
}

body.is-student-home #lesson-map h2 {
  color: #6f3515;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
}

body.is-student-home #lesson-map .panel__header p {
  color: #714923;
  font-size: 18px;
}

.treasure-map {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 96px 46px;
  min-height: 1400px;
  margin-top: 30px;
  padding: 124px 52px 92px;
  overflow: hidden;
  border: 3px double rgba(109, 62, 21, 0.72);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 18% 16%, rgba(255, 250, 219, 0.82) 0 14%, transparent 32%),
    radial-gradient(ellipse at 78% 28%, rgba(209, 240, 225, 0.72) 0 16%, transparent 34%),
    radial-gradient(ellipse at 28% 72%, rgba(255, 239, 190, 0.68) 0 17%, transparent 36%),
    linear-gradient(90deg, rgba(118, 72, 30, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(118, 72, 30, 0.055) 1px, transparent 1px),
    linear-gradient(145deg, #f8e1aa 0%, #fff2c9 54%, #f5dfa9 100%);
  background-size: auto, auto, auto, 24px 24px, 24px 24px, auto;
  box-shadow:
    inset 0 0 0 10px rgba(255, 250, 224, 0.45),
    inset 0 0 38px rgba(101, 62, 24, 0.18);
}

.treasure-map::before {
  content: "";
  position: absolute;
  inset: 78px 34px 64px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.88;
  background-image: url("data:image/svg+xml,%3Csvg width='1160' height='1320' viewBox='0 0 1160 1320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112 140 C250 72 388 92 502 154 S780 238 994 146 C1080 111 1112 232 1014 300 C846 418 635 292 506 382 C360 482 556 585 758 528 C1010 456 1132 636 943 758 C741 887 443 708 247 842 C75 960 226 1120 482 1064 C707 1016 784 1188 1028 1120' fill='none' stroke='%23764b25' stroke-width='13' stroke-linecap='round' stroke-dasharray='4 32' opacity='.74'/%3E%3Cpath d='M112 140 C250 72 388 92 502 154 S780 238 994 146 C1080 111 1112 232 1014 300 C846 418 635 292 506 382 C360 482 556 585 758 528 C1010 456 1132 636 943 758 C741 887 443 708 247 842 C75 960 226 1120 482 1064 C707 1016 784 1188 1028 1120' fill='none' stroke='%23fff4cd' stroke-width='4' stroke-linecap='round' stroke-dasharray='3 33' opacity='.9'/%3E%3Cg fill='%23764b25' opacity='.48'%3E%3Cellipse cx='140' cy='164' rx='16' ry='8' transform='rotate(-25 140 164)'/%3E%3Cellipse cx='488' cy='170' rx='16' ry='8' transform='rotate(22 488 170)'/%3E%3Cellipse cx='1018' cy='304' rx='18' ry='9' transform='rotate(-16 1018 304)'/%3E%3Cellipse cx='502' cy='386' rx='15' ry='8' transform='rotate(-28 502 386)'/%3E%3Cellipse cx='760' cy='530' rx='18' ry='9' transform='rotate(16 760 530)'/%3E%3Cellipse cx='940' cy='760' rx='18' ry='9' transform='rotate(-20 940 760)'/%3E%3Cellipse cx='250' cy='842' rx='18' ry='9' transform='rotate(22 250 842)'/%3E%3Cellipse cx='482' cy='1064' rx='18' ry='9' transform='rotate(-10 482 1064)'/%3E%3Cellipse cx='1028' cy='1120' rx='18' ry='9' transform='rotate(18 1028 1120)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.treasure-map::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 28px;
  z-index: 1;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  opacity: 0.72;
  background:
    conic-gradient(from 22deg, rgba(112, 67, 25, 0.28) 0 12.5%, transparent 12.5% 25%, rgba(112, 67, 25, 0.28) 25% 37.5%, transparent 37.5% 50%, rgba(112, 67, 25, 0.28) 50% 62.5%, transparent 62.5% 75%, rgba(112, 67, 25, 0.28) 75% 87.5%, transparent 87.5%),
    radial-gradient(circle, rgba(255, 248, 218, 0.94) 0 17%, transparent 18%),
    radial-gradient(circle, transparent 0 48%, rgba(112, 67, 25, 0.42) 49% 51%, transparent 52%);
}

.treasure-map .adventure-node,
.treasure-map .adventure-node:nth-child(n) {
  --map-rise: 0px;
  --tilt: -1deg;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 124px auto;
  gap: 14px;
  min-height: 230px;
  padding: 18px 18px 20px;
  overflow: visible;
  border: 2px solid rgba(135, 88, 31, 0.34);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.98), transparent 27%),
    linear-gradient(145deg, #fffbe2 0%, #eef8e9 56%, #eaf8fb 100%);
  box-shadow:
    0 22px 32px rgba(92, 65, 34, 0.16),
    0 4px 0 rgba(113, 67, 24, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82);
  transform: translateY(var(--map-rise)) rotate(var(--tilt));
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.treasure-map .adventure-node:nth-child(4n + 2) {
  --map-rise: 18px;
  --tilt: 1.2deg;
}

.treasure-map .adventure-node:nth-child(4n + 3) {
  --map-rise: -8px;
  --tilt: -0.7deg;
}

.treasure-map .adventure-node:nth-child(4n) {
  --map-rise: 12px;
  --tilt: 1deg;
}

.treasure-map .adventure-node:hover {
  border-color: rgba(150, 91, 28, 0.58);
  box-shadow:
    0 30px 44px rgba(92, 65, 34, 0.22),
    0 4px 0 rgba(113, 67, 24, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  transform: translateY(calc(var(--map-rise) - 6px)) rotate(var(--tilt));
}

.treasure-map .adventure-node__number {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 2px solid rgba(121, 68, 18, 0.22);
  border-radius: 20px;
  color: #793c13;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.96), transparent 32%),
    linear-gradient(145deg, #fff6bf, #ffc65f);
  box-shadow:
    0 12px 18px rgba(95, 58, 22, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.treasure-map .adventure-node__art {
  align-self: start;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 132px;
  height: 118px;
  margin: 0 0 0 auto;
  overflow: visible;
  border: 2px solid rgba(135, 88, 31, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(145deg, #fff9db, #eaf9f4);
  box-shadow:
    0 13px 22px rgba(76, 56, 28, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.treasure-map .adventure-node__art img,
.treasure-map .adventure-node__art svg,
.treasure-map .adventure-node__placeholder {
  width: 108px;
  height: 98px;
  max-width: 108px;
  max-height: 98px;
  object-fit: contain;
}

.treasure-map .adventure-node__dog {
  position: absolute;
  left: 44px;
  top: 54px;
  z-index: 5;
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 9px 12px rgba(91, 56, 23, 0.18));
}

.treasure-map .adventure-node__period {
  display: none;
}

.treasure-map .adventure-node__content {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  text-align: left;
}

.treasure-map .adventure-node__title,
.treasure-map .adventure-node strong {
  display: -webkit-box;
  min-height: 66px;
  overflow: hidden;
  color: #12345a;
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: left;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.treasure-map .adventure-node__status {
  justify-self: start;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #744018;
  color: #fff9df;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 14px rgba(92, 55, 20, 0.18);
}

.treasure-map .adventure-node.is-current,
.treasure-map .adventure-node.current {
  border-color: rgba(177, 99, 21, 0.58);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.98), transparent 27%),
    linear-gradient(145deg, #fff1af 0%, #ffe2a7 53%, #fff7da 100%);
  box-shadow:
    0 32px 48px rgba(154, 93, 23, 0.26),
    0 5px 0 rgba(127, 74, 21, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.92);
}

.treasure-map .adventure-node.is-current .adventure-node__number,
.treasure-map .adventure-node.current .adventure-node__number {
  color: #fffaf0;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.7), transparent 32%),
    linear-gradient(145deg, #ffb84a, #8a4418);
}

.treasure-map .adventure-node.is-complete,
.treasure-map .adventure-node.complete {
  border-color: rgba(88, 134, 79, 0.46);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.97), transparent 27%),
    linear-gradient(145deg, #f7f8db 0%, #e1f4d8 100%);
}

.treasure-map .adventure-node__complete {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #d9a229;
  color: #fff8db;
  font-size: 20px;
  box-shadow: 0 0 0 7px rgba(255, 225, 128, 0.32);
}

@media (max-width: 1000px) {
  .treasure-map {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
    gap: 58px 26px;
    min-height: 0;
    padding: 112px 28px 54px;
  }

  .treasure-map::before {
    inset: 74px 20px 42px;
    opacity: 0.42;
  }
}

@media (max-width: 680px) {
  body.is-student-home #lesson-map h2 {
    font-size: 34px;
  }

  body.is-student-home #lesson-map .panel__header {
    padding-inline: 8px;
  }

  .treasure-map {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 86px 16px 34px;
  }

  .treasure-map::before {
    opacity: 0.22;
  }

  .treasure-map .adventure-node,
  .treasure-map .adventure-node:nth-child(n) {
    grid-template-columns: 66px minmax(0, 1fr) 88px;
    grid-template-rows: auto;
    align-items: center;
    min-height: 118px;
    padding: 16px;
    transform: none;
  }

  .treasure-map .adventure-node:hover {
    transform: translateY(-3px);
  }

  .treasure-map .adventure-node__number {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 30px;
  }

  .treasure-map .adventure-node__art {
    grid-column: 3;
    grid-row: 1;
    width: 82px;
    height: 82px;
    border-radius: 22px;
  }

  .treasure-map .adventure-node__art img,
  .treasure-map .adventure-node__art svg,
  .treasure-map .adventure-node__placeholder {
    width: 70px;
    height: 70px;
    max-width: 70px;
    max-height: 70px;
  }

  .treasure-map .adventure-node__content {
    grid-column: 2;
    grid-row: 1;
  }

  .treasure-map .adventure-node__title,
  .treasure-map .adventure-node strong {
    min-height: 0;
    font-size: 24px;
  }
}

/* Login and welcome page: use a Kai-style Chinese font without changing layout. */
body.is-login-page {
  --login-kai-font: "KaiTi", "STKaiti", "Kaiti SC", "BiauKai", "Microsoft YaHei", serif;
  font-family: var(--login-kai-font);
}

body.is-login-page .page-shell,
body.is-login-page .page-shell * {
  font-family: var(--login-kai-font) !important;
}

body.is-student-home {
  background:
    linear-gradient(180deg, #e8f7ff 0%, #fff8dd 46%, #edf9ee 100%);
}

body.is-student-home .page-shell {
  max-width: 1180px;
}

body.is-student-home .page-topbar {
  align-items: center;
  min-height: 62px;
  margin-bottom: 16px;
}

body.is-student-home .hero {
  min-height: 390px;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  align-items: stretch;
  gap: 22px;
  border-color: rgba(89, 137, 158, 0.18);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.72)),
    linear-gradient(135deg, #dff5ff 0%, #fff4bd 52%, #dff5df 100%);
  box-shadow: 0 30px 80px -48px rgba(48, 87, 116, 0.5);
}

body.is-student-home .hero__content {
  justify-content: center;
  gap: 18px;
  padding: 4px 0;
}

body.is-student-home .hero__eyebrow {
  border: 1px solid rgba(35, 129, 116, 0.12);
  background: #ffffff;
  color: #238174;
  box-shadow: 0 12px 22px -18px rgba(35, 129, 116, 0.5);
}

body.is-student-home .hero h1 {
  max-width: 680px;
  color: #183552;
  font-size: clamp(38px, 5vw, 62px);
}

body.is-student-home .hero p {
  max-width: 620px;
  color: #496274;
  font-size: 21px;
}

body.is-student-home .hero__actions {
  margin-top: 8px;
  gap: 14px;
}

body.is-student-home .hero__actions .button[href="/teacher"] {
  display: none;
}

.button--hero {
  min-height: 64px;
  justify-content: center;
  border-radius: 999px;
  padding: 18px 30px;
  font-size: 21px;
  box-shadow: 0 20px 34px -22px rgba(31, 48, 68, 0.72);
}

.kid-hero__scene {
  position: relative;
  min-height: 320px;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(70, 137, 167, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(229, 249, 255, 0.95) 0%, rgba(229, 249, 255, 0.95) 54%, rgba(202, 238, 212, 0.96) 55%, rgba(181, 228, 190, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.kid-hero__scene::before,
.kid-hero__scene::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.kid-hero__scene::before {
  top: 34px;
}

.kid-hero__scene::after {
  bottom: 74px;
  background: rgba(255, 255, 255, 0.22);
}

.kid-hero__trail {
  position: absolute;
  left: 13%;
  right: 14%;
  bottom: 58px;
  display: flex;
  justify-content: space-between;
  transform: rotate(-3deg);
}

.kid-hero__trail span {
  width: 34px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 248, 225, 0.9);
  border: 1px solid rgba(135, 112, 67, 0.16);
  box-shadow: 0 12px 18px -16px rgba(84, 93, 69, 0.42);
}

.kid-hero__dog {
  position: relative;
  z-index: 2;
  width: min(58%, 250px);
  align-self: end;
  margin-bottom: 40px;
  filter: drop-shadow(0 18px 24px rgba(50, 75, 91, 0.2));
}

.kid-hero__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  padding: 13px 16px;
  color: #183552;
  box-shadow: 0 20px 30px -24px rgba(44, 66, 86, 0.44);
}

.kid-hero__badge strong {
  font-size: 18px;
}

.kid-hero__badge span {
  color: #5e6f7c;
  font-size: 14px;
}

.kid-account {
  align-items: center;
  gap: 10px;
}

.kid-account__trigger {
  appearance: none;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(86, 99, 118, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  padding: 8px 14px 8px 8px;
  color: #233041;
  box-shadow: 0 18px 32px -24px rgba(64, 79, 107, 0.34);
}

.kid-account__trigger:focus-visible {
  outline: 3px solid rgba(97, 172, 255, 0.36);
  outline-offset: 2px;
}

.kid-account__meta {
  display: grid;
  gap: 2px;
  text-align: left;
}

.kid-account__meta strong {
  line-height: 1.1;
}

.kid-account__meta span {
  color: #607081;
  font-size: 12px;
  font-weight: 700;
}

body.is-student-home #lesson-map {
  border-color: rgba(89, 137, 158, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 255, 251, 0.96)),
    #ffffff;
  overflow: hidden;
}

body.is-student-home #lesson-map .panel__header {
  align-items: center;
}

body.is-student-home #lesson-map h2 {
  color: #183552;
  font-size: clamp(30px, 4vw, 42px);
}

body.is-student-home #lesson-map p {
  max-width: 680px;
  font-size: 18px;
}

.adventure-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 26px;
  border: 1px solid rgba(78, 143, 171, 0.16);
  border-radius: 38px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 244, 177, 0.82), rgba(255, 244, 177, 0) 22%),
    radial-gradient(circle at 86% 18%, rgba(153, 225, 255, 0.62), rgba(153, 225, 255, 0) 24%),
    radial-gradient(circle at 30% 88%, rgba(153, 225, 171, 0.72), rgba(153, 225, 171, 0) 25%),
    linear-gradient(180deg, rgba(225, 248, 255, 0.96) 0%, rgba(236, 250, 227, 0.96) 56%, rgba(255, 247, 218, 0.96) 100%),
    #f4fbff;
  padding: 44px 38px;
  overflow: hidden;
}

.adventure-map::before {
  content: "";
  position: absolute;
  inset: 42px 34px;
  background-image: url("data:image/svg+xml,%3Csvg width='980' height='820' viewBox='0 0 980 820' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M68 96 C230 8 344 174 502 92 C690 -6 808 80 918 160 C1012 229 862 326 688 286 C510 246 360 220 218 300 C82 376 100 500 278 494 C448 488 554 416 720 484 C914 564 832 730 632 710 C426 690 260 588 82 718' fill='none' stroke='%23f4c85f' stroke-width='22' stroke-linecap='round' stroke-dasharray='10 24' opacity='.72'/%3E%3Cpath d='M70 96 C232 8 346 174 504 92 C692 -6 810 80 920 160 C1014 229 864 326 690 286 C512 246 362 220 220 300 C84 376 102 500 280 494 C450 488 556 416 722 484 C916 564 834 730 634 710 C428 690 262 588 84 718' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' stroke-dasharray='2 31' opacity='.85'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.adventure-map::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -86px;
  width: 360px;
  height: 220px;
  border-radius: 50%;
  background: rgba(119, 198, 224, 0.22);
  pointer-events: none;
}

.adventure-node {
  --tilt: 0deg;
  position: relative;
  z-index: 1;
  min-height: 198px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 252, 239, 0.98), rgba(238, 250, 255, 0.98)),
    #ffffff;
  padding: 18px;
  box-shadow:
    0 20px 38px -28px rgba(55, 66, 86, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  transform: rotate(var(--tilt));
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.adventure-node:nth-child(8n + 2),
.adventure-node:nth-child(8n + 7) {
  --tilt: 1deg;
  margin-top: 28px;
}

.adventure-node:nth-child(8n + 4),
.adventure-node:nth-child(8n + 5) {
  --tilt: -1.2deg;
  margin-top: 12px;
}

.adventure-node:nth-child(8n + 8) {
  margin-top: -6px;
}

.adventure-node:hover {
  border-color: rgba(255, 195, 79, 0.82);
  box-shadow: 0 30px 56px -32px rgba(55, 66, 86, 0.68);
  transform: translateY(-4px) rotate(var(--tilt));
}

.adventure-node__art {
  position: relative;
  width: 92px;
  height: 92px;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91, 151, 173, 0.12);
  border-radius: 30px 42px 34px 42px;
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 34%),
    linear-gradient(145deg, #fff5c8, #dff6ff 58%, #e2f7df);
  box-shadow:
    0 16px 24px -20px rgba(83, 93, 101, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.adventure-node__art .illustration-image-frame {
  width: min(84%, 82px);
  height: min(84%, 82px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.adventure-node__art .illustration-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(75, 98, 120, 0.18));
}

.adventure-node__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 8px 2px;
}

.adventure-node__period,
.adventure-node__status {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.adventure-node__period {
  background: rgba(255, 255, 255, 0.86);
  color: #4f6c82;
  box-shadow: 0 10px 18px -15px rgba(54, 70, 88, 0.46);
}

.adventure-node strong {
  min-height: 0;
  color: #183552;
  font-size: clamp(20px, 1.55vw, 23px);
  line-height: 1.28;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: anywhere;
  writing-mode: horizontal-tb;
}

.adventure-node__status {
  background: rgba(255, 255, 255, 0.78);
  color: #63849a;
}

.adventure-node.is-current {
  border-color: rgba(255, 151, 86, 0.7);
  background:
    linear-gradient(145deg, rgba(255, 246, 202, 0.98), rgba(226, 249, 255, 0.98)),
    #ffffff;
  box-shadow: 0 30px 58px -32px rgba(255, 142, 76, 0.58);
}

.adventure-node.is-current .adventure-node__art {
  background: linear-gradient(145deg, #ffe99b, #ffba74);
}

.adventure-node.is-current .adventure-node__status {
  background: #1f3044;
  color: #ffffff;
}

.adventure-node.is-complete {
  background:
    linear-gradient(145deg, rgba(228, 255, 238, 0.98), rgba(232, 246, 255, 0.98)),
    #ffffff;
}

.adventure-node.is-complete .adventure-node__art {
  background: linear-gradient(145deg, #ddffd9, #90e2aa);
  color: #1f7a48;
}

.adventure-node__dog {
  position: absolute;
  bottom: -12px;
  left: -8px;
  width: 48px;
  filter: drop-shadow(0 10px 14px rgba(55, 66, 86, 0.2));
}

.adventure-node__complete {
  position: absolute;
  right: -6px;
  top: -7px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff0a8;
  color: #987000;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 12px 18px -14px rgba(96, 84, 33, 0.4);
}

body.is-student-home .student-profile-popover {
  width: min(640px, calc(100vw - 32px));
}

body.is-student-home .student-profile-popover .summary-card {
  min-height: 116px;
}

body.is-student-home .student-profile-popover .summary-card__subtext {
  display: none;
}

@media (max-width: 900px) {
  body.is-student-home .hero {
    grid-template-columns: 1fr;
  }

  .adventure-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adventure-node:nth-child(3n + 2),
  .adventure-node:nth-child(6n + 3),
  .adventure-node:nth-child(6n + 5),
  .adventure-node:nth-child(8n + 2),
  .adventure-node:nth-child(8n + 4),
  .adventure-node:nth-child(8n + 5),
  .adventure-node:nth-child(8n + 7),
  .adventure-node:nth-child(8n + 8) {
    --tilt: 0deg;
    margin-top: 0;
  }

  .adventure-node:nth-child(even) {
    margin-top: 22px;
  }
}

@media (max-width: 680px) {
  body.is-student-home {
    padding: 14px 10px 32px;
  }

  body.is-student-home .page-topbar {
    justify-content: stretch;
  }

  .kid-account {
    width: 100%;
    justify-content: space-between;
  }

  .kid-account__trigger {
    min-width: 0;
    flex: 1;
  }

  body.is-student-home .hero {
    min-height: 0;
    padding: 22px;
    border-radius: 26px;
  }

  body.is-student-home .hero h1 {
    font-size: clamp(32px, 10vw, 44px);
  }

  body.is-student-home .hero p {
    font-size: 18px;
  }

  .button--hero {
    width: 100%;
  }

  .kid-hero__scene {
    min-height: 260px;
  }

  .kid-hero__dog {
    width: min(62%, 190px);
  }

  body.is-student-home #lesson-map {
    padding: 18px;
    border-radius: 26px;
  }

  body.is-student-home #lesson-map .panel__header {
    align-items: stretch;
    flex-direction: column;
  }

  .adventure-map {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px;
  }

  .adventure-map::before,
  .adventure-map::after {
    display: none;
  }

  .adventure-node {
    min-height: 124px;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    align-content: center;
    gap: 14px;
    border-radius: 24px;
    padding: 12px;
    margin-top: 0;
    transform: none;
  }

  .adventure-node:nth-child(even),
  .adventure-node:nth-child(3n + 2),
  .adventure-node:nth-child(6n + 3),
  .adventure-node:nth-child(6n + 5),
  .adventure-node:nth-child(8n + 2),
  .adventure-node:nth-child(8n + 4),
  .adventure-node:nth-child(8n + 5),
  .adventure-node:nth-child(8n + 7),
  .adventure-node:nth-child(8n + 8) {
    --tilt: 0deg;
    margin-top: 0;
  }

  .adventure-node__art {
    width: 92px;
    height: 92px;
    border-radius: 20px;
  }

  .adventure-node__art .illustration-image-frame {
    width: min(84%, 82px);
    height: min(84%, 82px);
  }

  .adventure-node strong {
    min-height: 0;
    font-size: 20px;
    line-height: 1.26;
  }

  .adventure-node__period {
    position: static;
  }

  .adventure-node__dog {
    bottom: -7px;
    left: 8px;
    width: 44px;
  }

  body.is-student-home .student-profile-popover {
    right: 0;
    left: 0;
    width: 100%;
  }

  body.is-student-home .student-profile-popover__grid {
    grid-template-columns: 1fr;
  }
}

body.is-student-home #lesson-map {
  position: relative;
  border: 3px solid rgba(105, 62, 28, 0.32);
  border-radius: 28px 34px 30px 32px;
  background:
    radial-gradient(circle at 7% 10%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 92% 18%, rgba(168, 219, 222, 0.35), rgba(168, 219, 222, 0) 24%),
    radial-gradient(circle at 60% 98%, rgba(118, 188, 144, 0.2), rgba(118, 188, 144, 0) 22%),
    linear-gradient(135deg, #fff1c9 0%, #f6dca7 46%, #eef3d4 100%);
  box-shadow:
    0 28px 70px -42px rgba(69, 45, 24, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.is-student-home #lesson-map::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(113, 65, 27, 0.32);
  border-radius: 22px 28px 24px 26px;
  pointer-events: none;
}

body.is-student-home #lesson-map .panel__header {
  position: relative;
  z-index: 2;
  align-items: start;
}

body.is-student-home #lesson-map h2 {
  color: #6c3518;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: 0;
}

body.is-student-home #lesson-map p {
  color: #6a4a2e;
  font-size: 19px;
}

.treasure-map {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 54px 34px;
  min-height: 980px;
  border: 5px solid #74451f;
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 80% 76%, rgba(94, 166, 156, 0.13), rgba(94, 166, 156, 0) 28%),
    linear-gradient(90deg, rgba(123, 77, 34, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(123, 77, 34, 0.045) 1px, transparent 1px),
    linear-gradient(145deg, #f8e4ad 0%, #fff0c7 48%, #eed096 100%);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
  padding: 124px 42px 62px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 10px rgba(255, 248, 215, 0.48),
    inset 0 0 52px rgba(108, 65, 29, 0.18);
}

.treasure-map::before {
  content: "";
  position: absolute;
  inset: 92px 46px 70px;
  background-image: url("data:image/svg+xml,%3Csvg width='1040' height='880' viewBox='0 0 1040 880' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96 96 C278 10 390 155 538 96 C736 18 900 130 862 250 C822 378 586 272 398 342 C180 424 182 560 372 570 C548 580 646 448 824 552 C1014 664 790 816 574 730 C374 650 220 696 112 790' fill='none' stroke='%236b3d1d' stroke-width='10' stroke-linecap='round' stroke-dasharray='2 28' opacity='.56'/%3E%3Cg fill='%236b3d1d' opacity='.58'%3E%3Cellipse cx='144' cy='118' rx='9' ry='17' transform='rotate(68 144 118)'/%3E%3Cellipse cx='198' cy='91' rx='8' ry='16' transform='rotate(74 198 91)'/%3E%3Cellipse cx='524' cy='108' rx='9' ry='17' transform='rotate(78 524 108)'/%3E%3Cellipse cx='718' cy='118' rx='8' ry='16' transform='rotate(106 718 118)'/%3E%3Cellipse cx='852' cy='226' rx='9' ry='17' transform='rotate(16 852 226)'/%3E%3Cellipse cx='618' cy='300' rx='8' ry='16' transform='rotate(100 618 300)'/%3E%3Cellipse cx='356' cy='366' rx='9' ry='17' transform='rotate(72 356 366)'/%3E%3Cellipse cx='158' cy='480' rx='8' ry='16' transform='rotate(28 158 480)'/%3E%3Cellipse cx='374' cy='566' rx='9' ry='17' transform='rotate(86 374 566)'/%3E%3Cellipse cx='714' cy='510' rx='8' ry='16' transform='rotate(116 714 510)'/%3E%3Cellipse cx='840' cy='628' rx='9' ry='17' transform='rotate(20 840 628)'/%3E%3Cellipse cx='620' cy='742' rx='8' ry='16' transform='rotate(92 620 742)'/%3E%3Cellipse cx='328' cy='700' rx='9' ry='17' transform='rotate(74 328 700)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.treasure-map::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 28px;
  width: 116px;
  height: 116px;
  border: 3px solid rgba(103, 58, 26, 0.54);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, rgba(103, 58, 26, 0.62) 45%, rgba(103, 58, 26, 0.62) 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(103, 58, 26, 0.62) 45%, rgba(103, 58, 26, 0.62) 55%, transparent 56%),
    radial-gradient(circle, #fff6d1 0 16%, transparent 17%),
    conic-gradient(from 45deg, rgba(103, 58, 26, 0.78) 0 12.5%, transparent 12.5% 25%, rgba(103, 58, 26, 0.78) 25% 37.5%, transparent 37.5% 50%, rgba(103, 58, 26, 0.78) 50% 62.5%, transparent 62.5% 75%, rgba(103, 58, 26, 0.78) 75% 87.5%, transparent 87.5% 100%);
  box-shadow: inset 0 0 0 12px rgba(255, 243, 198, 0.88);
  opacity: 0.82;
  pointer-events: none;
}

.treasure-map .adventure-node {
  --tilt: 0deg;
  min-height: 138px;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 13px;
  border: 2px solid rgba(105, 62, 28, 0.36);
  border-radius: 78px 24px 24px 78px;
  background:
    linear-gradient(135deg, rgba(255, 247, 218, 0.94), rgba(237, 246, 224, 0.9)),
    rgba(255, 241, 195, 0.92);
  padding: 13px 16px 13px 12px;
  box-shadow:
    0 22px 34px -28px rgba(61, 40, 22, 0.66),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.treasure-map .adventure-node:nth-child(8n + 2),
.treasure-map .adventure-node:nth-child(8n + 7) {
  --tilt: 1.6deg;
  margin-top: 54px;
}

.treasure-map .adventure-node:nth-child(8n + 4),
.treasure-map .adventure-node:nth-child(8n + 5) {
  --tilt: -1.4deg;
  margin-top: 18px;
}

.treasure-map .adventure-node:nth-child(8n + 8) {
  --tilt: 1deg;
  margin-top: -8px;
}

.treasure-map .adventure-node:hover {
  border-color: rgba(154, 85, 31, 0.78);
  box-shadow: 0 26px 46px -28px rgba(61, 40, 22, 0.78);
}

.treasure-map .adventure-node__art {
  width: 78px;
  height: 78px;
  border: 2px solid rgba(112, 69, 31, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 25% 20%, #fffdf0, rgba(255, 253, 240, 0) 32%),
    linear-gradient(145deg, #fff0b8, #eef5d9 58%, #d9f0eb);
}

.treasure-map .adventure-node__art .illustration-image-frame {
  width: 68px;
  height: 68px;
}

.treasure-map .adventure-node__content {
  gap: 7px;
}

.treasure-map .adventure-node__period,
.treasure-map .adventure-node__status {
  border: 1px solid rgba(105, 62, 28, 0.14);
  background: rgba(255, 252, 235, 0.88);
  color: #6f4523;
  font-size: 12px;
}

.treasure-map .adventure-node strong {
  color: #3e210f;
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.18;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.treasure-map .adventure-node.is-current {
  border-color: #9c5b22;
  background:
    linear-gradient(135deg, rgba(255, 232, 153, 0.98), rgba(255, 246, 209, 0.96)),
    #fff0b3;
}

.treasure-map .adventure-node.is-current .adventure-node__art {
  background: linear-gradient(145deg, #ffe38d, #ffbd67);
}

.treasure-map .adventure-node.is-current .adventure-node__status {
  background: #6b3518;
  color: #fff9e9;
}

.treasure-map .adventure-node.is-complete {
  background:
    linear-gradient(135deg, rgba(221, 250, 221, 0.96), rgba(255, 244, 207, 0.9)),
    #e6f8d8;
}

.treasure-map .adventure-node__dog {
  width: 46px;
  bottom: -8px;
  left: -2px;
}

.treasure-map .adventure-node__complete {
  background: #f5c04f;
  color: #6a3d16;
}

@media (max-width: 900px) {
  .treasure-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
    min-height: 0;
    padding: 112px 24px 34px;
  }
}

@media (max-width: 680px) {
  body.is-student-home #lesson-map {
    padding: 18px;
  }

  .treasure-map {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 88px 14px 18px;
  }

  .treasure-map::before {
    display: none;
  }

  .treasure-map::after {
    width: 74px;
    height: 74px;
    left: 18px;
    top: 18px;
  }

  .treasure-map .adventure-node,
  .treasure-map .adventure-node:nth-child(even),
  .treasure-map .adventure-node:nth-child(8n + 2),
  .treasure-map .adventure-node:nth-child(8n + 4),
  .treasure-map .adventure-node:nth-child(8n + 5),
  .treasure-map .adventure-node:nth-child(8n + 7),
  .treasure-map .adventure-node:nth-child(8n + 8) {
    min-height: 122px;
    margin-top: 0;
    transform: none;
  }
}

body.is-student-home #lesson-map {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(122, 78, 34, 0.34);
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 244, 196, 0.78), transparent 25%),
    radial-gradient(circle at 88% 15%, rgba(183, 232, 221, 0.34), transparent 30%),
    linear-gradient(135deg, #fff4d1 0%, #f6dfab 48%, #e9f7e7 100%);
  box-shadow: 0 18px 40px rgba(86, 65, 35, 0.15);
}

body.is-student-home #lesson-map::before {
  inset: 20px;
  border: 2px solid rgba(111, 66, 28, 0.34);
  border-radius: 24px;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.22);
}

body.is-student-home #lesson-map .panel__header {
  position: relative;
  z-index: 2;
}

body.is-student-home #lesson-map h2 {
  color: #783d18;
  text-shadow: 0 2px 0 rgba(255, 246, 211, 0.92);
}

.treasure-map {
  isolation: isolate;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 72px 34px;
  min-height: 1110px;
  padding: 136px 46px 72px;
  border: 3px solid rgba(113, 69, 31, 0.78);
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255, 255, 222, 0.9) 0 13%, transparent 28%),
    radial-gradient(ellipse at 82% 26%, rgba(215, 244, 235, 0.75) 0 14%, transparent 30%),
    radial-gradient(ellipse at 28% 72%, rgba(238, 255, 218, 0.72) 0 16%, transparent 33%),
    radial-gradient(ellipse at 78% 84%, rgba(255, 231, 179, 0.74) 0 14%, transparent 30%),
    linear-gradient(90deg, rgba(128, 82, 38, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(128, 82, 38, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, #f8e8b9 0%, #fff2cf 44%, #dff4e9 100%);
  background-size: auto, auto, auto, auto, 26px 26px, 26px 26px, auto;
  box-shadow:
    inset 0 0 0 9px rgba(255, 255, 255, 0.32),
    inset 0 0 0 17px rgba(118, 71, 30, 0.12),
    0 20px 38px rgba(77, 58, 35, 0.18);
}

.treasure-map::before {
  content: "";
  position: absolute;
  inset: 92px 48px 84px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='1120' height='1010' viewBox='0 0 1120 1010' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M92 96 C235 48 322 120 414 116 C563 110 646 52 806 86 C966 120 1035 205 982 293 C913 409 703 305 625 410 C548 514 690 590 828 575 C960 565 1053 628 1011 735 C960 864 696 810 568 884 C456 948 272 914 204 818 C122 703 254 623 389 648 C529 674 564 554 445 498 C332 445 112 496 93 348 C76 218 256 221 323 287' fill='none' stroke='%23805a38' stroke-width='11' stroke-linecap='round' stroke-dasharray='2 28'/%3E%3Cpath d='M108 120 C260 78 312 157 441 145 C589 132 691 72 830 122 C954 168 1005 240 960 302' fill='none' stroke='%23fff3cb' stroke-width='4' stroke-linecap='round' stroke-dasharray='1 29' opacity='.65'/%3E%3Cg fill='%23764924' opacity='.55'%3E%3Cellipse cx='156' cy='121' rx='14' ry='7' transform='rotate(-20 156 121)'/%3E%3Cellipse cx='328' cy='208' rx='13' ry='6' transform='rotate(20 328 208)'/%3E%3Cellipse cx='590' cy='110' rx='13' ry='6' transform='rotate(-12 590 110)'/%3E%3Cellipse cx='882' cy='182' rx='15' ry='7' transform='rotate(22 882 182)'/%3E%3Cellipse cx='866' cy='575' rx='14' ry='7' transform='rotate(-8 866 575)'/%3E%3Cellipse cx='560' cy='878' rx='15' ry='7' transform='rotate(-18 560 878)'/%3E%3Cellipse cx='212' cy='822' rx='13' ry='6' transform='rotate(18 212 822)'/%3E%3Cellipse cx='388' cy='648' rx='14' ry='7' transform='rotate(6 388 648)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23764924' stroke-width='4' stroke-linecap='round' opacity='.36'%3E%3Cpath d='M70 58 l36 -34 l36 34 M96 26 v68'/%3E%3Cpath d='M910 36 l23 40 l25 -40 l22 40'/%3E%3Cpath d='M76 900 c38 -46 86 -46 124 0 c42 -48 92 -48 136 0'/%3E%3Cpath d='M952 884 h86 v48 h-86z M970 884 v-26 h50 v26'/%3E%3C/g%3E%3C/svg%3E");
}

.treasure-map::after {
  width: 122px;
  height: 122px;
  top: 28px;
  left: 34px;
  z-index: 1;
  border-color: rgba(116, 69, 28, 0.34);
  background:
    conic-gradient(from 45deg, rgba(101, 62, 27, 0.74) 0 12.5%, rgba(255, 246, 213, 0.68) 0 25%, rgba(101, 62, 27, 0.74) 0 37.5%, rgba(255, 246, 213, 0.68) 0 50%, rgba(101, 62, 27, 0.74) 0 62.5%, rgba(255, 246, 213, 0.68) 0 75%, rgba(101, 62, 27, 0.74) 0 87.5%, rgba(255, 246, 213, 0.68) 0),
    radial-gradient(circle, #fff9de 0 29%, transparent 30%);
  box-shadow: inset 0 0 0 12px rgba(255, 255, 255, 0.42), 0 12px 24px rgba(77, 58, 35, 0.16);
}

.treasure-map .adventure-node,
.treasure-map .adventure-node:nth-child(even),
.treasure-map .adventure-node:nth-child(8n + 2),
.treasure-map .adventure-node:nth-child(8n + 3),
.treasure-map .adventure-node:nth-child(8n + 4),
.treasure-map .adventure-node:nth-child(8n + 5),
.treasure-map .adventure-node:nth-child(8n + 6),
.treasure-map .adventure-node:nth-child(8n + 7),
.treasure-map .adventure-node:nth-child(8n + 8) {
  margin-top: 0;
}

.treasure-map .adventure-node {
  --map-rise: 0px;
  --node-wash: rgba(255, 252, 222, 0.9);
  position: relative;
  z-index: 2;
  min-height: 158px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 15px 13px 17px;
  border: 2px solid rgba(120, 75, 33, 0.22);
  border-radius: 46px 46px 34px 34px;
  text-align: center;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.94), transparent 33%),
    linear-gradient(135deg, var(--node-wash), rgba(225, 247, 237, 0.92));
  box-shadow:
    0 15px 24px rgba(77, 58, 35, 0.17),
    inset 0 -14px 26px rgba(126, 84, 41, 0.05);
  transform: translateY(var(--map-rise)) rotate(var(--tilt));
}

.treasure-map .adventure-node::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 44px;
  height: 16px;
  border-radius: 50%;
  background: rgba(93, 63, 36, 0.18);
  filter: blur(2px);
  transform: translateX(-50%);
  z-index: -1;
}

.treasure-map .adventure-node:hover {
  transform: translateY(calc(var(--map-rise) - 6px)) rotate(var(--tilt)) scale(1.025);
}

.treasure-map .adventure-node:nth-child(4n + 1) {
  --node-wash: rgba(255, 246, 204, 0.94);
}

.treasure-map .adventure-node:nth-child(4n + 2) {
  --map-rise: 34px;
  --tilt: -2deg;
  --node-wash: rgba(239, 253, 224, 0.94);
}

.treasure-map .adventure-node:nth-child(4n + 3) {
  --map-rise: 8px;
  --tilt: 2deg;
  --node-wash: rgba(229, 248, 238, 0.94);
}

.treasure-map .adventure-node:nth-child(4n + 4) {
  --map-rise: 40px;
  --tilt: -1.2deg;
  --node-wash: rgba(255, 248, 216, 0.94);
}

.treasure-map .adventure-node__art {
  width: 86px;
  height: 86px;
  border-radius: 30px;
  border: 1px solid rgba(126, 82, 36, 0.2);
  background:
    radial-gradient(circle at 36% 28%, #ffffff, transparent 40%),
    linear-gradient(145deg, #fff0bd, #eaf8ed);
  box-shadow: 0 10px 18px rgba(74, 57, 33, 0.13);
}

.treasure-map .adventure-node__art img,
.treasure-map .adventure-node__placeholder {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.treasure-map .adventure-node__content {
  align-items: center;
  text-align: center;
  gap: 6px;
}

.treasure-map .adventure-node__index {
  padding: 5px 12px;
  border-radius: 999px;
  color: #6b4b26;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 4px 10px rgba(93, 63, 36, 0.08);
}

.treasure-map .adventure-node__title {
  max-width: 10em;
  color: #143357;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.2;
  letter-spacing: 0;
  writing-mode: horizontal-tb;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.treasure-map .adventure-node__status {
  position: static;
  margin-top: 1px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #6d421f;
  color: #fff8d7;
  box-shadow: 0 5px 12px rgba(82, 50, 23, 0.18);
}

.treasure-map .adventure-node.is-current {
  min-height: 172px;
  border-color: rgba(148, 85, 31, 0.66);
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.96), transparent 36%),
    linear-gradient(135deg, #ffe2a0 0%, #fff2bd 48%, #eaf7de 100%);
  box-shadow:
    0 20px 34px rgba(118, 69, 24, 0.25),
    inset 0 0 0 6px rgba(255, 248, 211, 0.55);
}

.treasure-map .adventure-node.is-current .adventure-node__art {
  width: 94px;
  height: 94px;
  border-radius: 32px;
}

.treasure-map .adventure-node.is-current .adventure-node__title {
  font-size: clamp(24px, 2vw, 31px);
}

.treasure-map .adventure-node__dog {
  top: -42px;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 58px;
  filter: drop-shadow(0 7px 10px rgba(79, 49, 24, 0.22));
  transform: translateX(-50%);
}

.treasure-map .adventure-node.is-complete {
  border-color: rgba(62, 140, 105, 0.38);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, #f6f5c2, #ddf5df);
}

.treasure-map .adventure-node__complete {
  top: -12px;
  right: -10px;
  border-color: rgba(255, 255, 255, 0.82);
  background: #1f9c75;
  box-shadow: 0 8px 16px rgba(30, 115, 87, 0.2);
}

@media (max-width: 900px) {
  .treasure-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    gap: 46px 24px;
    padding: 118px 24px 46px;
  }

  .treasure-map::before {
    inset: 86px 20px 50px;
    opacity: 0.46;
  }

  .treasure-map .adventure-node:nth-child(n) {
    --map-rise: 0px;
  }
}

@media (max-width: 680px) {
  .treasure-map {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 90px 15px 24px;
    border-width: 2px;
  }

  .treasure-map::before {
    display: block;
    opacity: 0.22;
  }

  .treasure-map::after {
    width: 76px;
    height: 76px;
    top: 18px;
    left: 18px;
  }

  .treasure-map .adventure-node,
  .treasure-map .adventure-node:nth-child(n) {
    min-height: 124px;
    grid-template-columns: 76px 1fr;
    justify-items: start;
    text-align: left;
    border-radius: 34px;
    transform: none;
  }

  .treasure-map .adventure-node__content {
    align-items: flex-start;
    text-align: left;
  }

  .treasure-map .adventure-node__art {
    width: 72px;
    height: 72px;
    border-radius: 24px;
  }

  .treasure-map .adventure-node__title {
    max-width: none;
    font-size: 22px;
  }

  .treasure-map .adventure-node__dog {
    top: -26px;
    left: 40px;
    width: 44px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(255, 232, 189, 0.95), transparent 28%),
    radial-gradient(circle at top right, rgba(213, 242, 255, 0.92), transparent 32%),
    radial-gradient(circle at bottom center, rgba(225, 251, 237, 0.84), transparent 34%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

body {
  padding: 20px 16px 40px;
}

body.is-login-page {
  min-height: 100vh;
  padding: 26px 18px 44px;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(131, 43, 29, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(131, 43, 29, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, #f6eddb 0%, #fbf6ec 100%);
  background-size: 18px 18px, 18px 18px, auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.page-shell {
  margin: 0 auto;
  max-width: 1200px;
}

body.is-login-page .page-shell {
  max-width: 1180px;
}

.page-topbar {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
  z-index: 20;
  overflow: visible;
}

.page-topbar--empty {
  display: none;
}

.hero,
.panel {
  border: 1px solid var(--panel-border);
  background: var(--panel);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 420px);
  gap: 28px;
  padding: 28px;
  overflow: hidden;
}

.hero--warm {
  background:
    linear-gradient(140deg, rgba(255, 242, 205, 0.96), rgba(255, 230, 219, 0.96) 44%, rgba(227, 244, 255, 0.96) 75%, rgba(232, 255, 243, 0.98)),
    var(--panel);
}

body.is-login-page .hero {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
  gap: 46px;
  align-items: center;
  min-height: 0;
  padding: 42px 52px;
  border-color: rgba(122, 78, 45, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(115deg, rgba(255, 248, 228, 0.98), rgba(250, 232, 214, 0.96) 54%, rgba(242, 246, 236, 0.98)),
    #fbf2df;
  box-shadow: 0 28px 74px -48px rgba(78, 49, 31, 0.48);
}

body.is-login-page .hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(122, 78, 45, 0.13);
  border-radius: 6px;
  pointer-events: none;
}

body.is-login-page .hero__eyebrow {
  border: 1px solid rgba(128, 42, 28, 0.16);
  background: rgba(255, 250, 240, 0.88);
  color: #823323;
  letter-spacing: 0.08em;
}

body.is-login-page .hero h1 {
  max-width: 600px;
  color: #3b2a1f;
  font-size: clamp(44px, 5.7vw, 68px);
  line-height: 1.18;
}

body.is-login-page .hero p {
  max-width: 520px;
  color: #654d3d;
  font-size: 19px;
}

body.is-login-page .hero__actions {
  display: none;
}

body.is-login-page .hero__art {
  min-height: 0;
  padding: 18px;
  border-color: rgba(122, 78, 45, 0.13);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 22px 44px -36px rgba(80, 52, 38, 0.48);
}

.hero--cool {
  background:
    linear-gradient(135deg, rgba(226, 244, 255, 0.98), rgba(239, 232, 255, 0.97) 46%, rgba(233, 255, 245, 0.97)),
    var(--panel);
}

.hero__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.hero__eyebrow {
  width: fit-content;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px 14px;
  color: #5a6675;
  font-size: 14px;
  font-weight: 700;
}

.hero h1,
.panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero h1 {
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.hero h1 .title-line {
  display: block;
}

.hero p,
.panel__header p,
.summary-copy,
.task-card__hint,
.recording-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.hero__actions,
.footer-nav,
.student-selector,
.lesson-tags,
.task-card__options,
.leaderboard-list,
.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__art,
.hero__art--teacher {
  min-width: 0;
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg, rgba(255, 248, 225, 0.72), rgba(234, 247, 255, 0.72) 54%, rgba(233, 255, 244, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.textbook-display {
  width: min(100%, 330px);
  margin: 0;
  display: grid;
  place-items: center;
}

.textbook-cover-image {
  width: min(100%, 310px);
  height: auto;
  display: block;
  border: 7px solid rgba(211, 198, 165, 0.78);
  background: #f6e9ad;
  box-shadow:
    0 24px 52px -34px rgba(80, 52, 38, 0.56),
    0 2px 0 rgba(255, 255, 255, 0.8) inset;
}

.hero__art svg,
.lesson-card__art svg,
.lesson-hero__art svg,
.hero__art img,
.lesson-card__art img,
.lesson-hero__art img {
  width: 100%;
  height: auto;
  display: block;
}

.lesson-card__art svg,
.lesson-card__art img {
  max-width: 210px;
  max-height: 176px;
  object-fit: contain;
}

.lesson-card__art .illustration-image-frame {
  width: min(88%, 214px);
  aspect-ratio: 1;
}

.lesson-card__art .illustration-image {
  object-fit: contain;
}

.illustration-image-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}

.illustration-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(88, 113, 147, 0.2));
}

.button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button--dark {
  background: #1f3044;
  color: #fff;
  box-shadow: 0 16px 30px -18px rgba(31, 48, 68, 0.7);
}

.button--ghost {
  background: rgba(255, 255, 255, 0.82);
  color: #425166;
  border: 1px solid rgba(93, 110, 134, 0.14);
}

.button--tiny {
  padding: 9px 14px;
  font-size: 13px;
}

.button--light {
  background: #fff6dc;
  color: #8f6304;
}

.panel {
  margin-top: 20px;
  padding: 24px;
}

.panel--compact {
  padding: 20px 24px;
}

body.is-login-page #studentLoginPanel {
  width: min(100%, 610px);
  max-width: 100%;
  min-width: 0;
  margin-top: 18px;
  padding: 22px;
  border-color: rgba(122, 78, 45, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 252, 0.74);
  box-shadow: 0 18px 46px -40px rgba(77, 55, 39, 0.46);
}

body.is-login-page #studentLoginPanel .panel__header {
  align-items: flex-start;
  margin-bottom: 16px;
}

body.is-login-page #studentLoginPanel h2 {
  color: #3b2a1f;
  font-size: clamp(24px, 3vw, 32px);
}

body.is-login-page #studentLoginPanel p {
  color: #6d5a49;
}

.panel__header {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel__header h2 {
  font-size: clamp(24px, 3vw, 34px);
}

.dashboard-grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.summary-card {
  border-radius: 28px;
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.summary-card--gold {
  background: linear-gradient(135deg, #fff3cf, #ffe2bd);
}

.summary-card--blue {
  background: linear-gradient(135deg, #ebf7ff, #d5efff);
}

.summary-card--mint {
  background: linear-gradient(135deg, #e9fbf3, #d9f5e8);
}

.summary-card--rose {
  background: linear-gradient(135deg, #fff0f5, #ffe2ea);
}

.summary-card__label {
  color: #5d6774;
  font-size: 14px;
  font-weight: 700;
}

.summary-card__value {
  margin-top: 8px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
}

.summary-card__subtext {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.student-selector__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(86, 99, 118, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 14px;
  color: #415064;
}

.student-selector__button.is-active {
  background: #1f3044;
  color: #fff;
  box-shadow: 0 16px 28px -18px rgba(31, 48, 68, 0.75);
}

.avatar-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.avatar-badge__icon {
  width: 42px;
  height: 42px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

.avatar-badge__meta {
  display: grid;
  gap: 2px;
}

.avatar-badge__name {
  font-weight: 800;
}

.avatar-badge__class {
  font-size: 12px;
  color: inherit;
  opacity: 0.8;
}

.student-session {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(86, 99, 118, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  padding: 8px 10px 8px 8px;
  box-shadow: 0 18px 32px -24px rgba(64, 79, 107, 0.34);
}

.account-menu {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.account-menu .student-session__main {
  cursor: pointer;
  border-radius: 999px;
  outline: none;
}

.account-menu .student-session__main:focus-visible {
  box-shadow: 0 0 0 4px rgba(77, 121, 178, 0.16);
}

.student-profile-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  width: min(680px, calc(100vw - 32px));
  border: 1px solid rgba(86, 99, 118, 0.13);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 70px -42px rgba(45, 57, 78, 0.74);
  padding: 18px;
}

.student-profile-popover__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.student-profile-popover__header h2 {
  margin: 0;
  color: #233041;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
}

.student-profile-popover__header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.student-profile-popover__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.student-profile-popover .summary-card {
  min-height: 150px;
  border-radius: 20px;
  padding: 18px;
  box-shadow: none;
}

.student-profile-popover .summary-card__value {
  margin: 12px 0;
  font-size: 34px;
}

.student-profile-popover .summary-card__subtext {
  font-size: 13px;
  line-height: 1.55;
}

.student-session--stacked {
  display: grid;
  gap: 12px;
  border-radius: 28px;
  padding: 14px 16px;
  min-width: 280px;
}

.student-session__main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.student-session__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
}

.student-session__meta {
  display: grid;
  gap: 3px;
}

.student-session__name {
  font-size: 16px;
  font-weight: 800;
  color: #233041;
  line-height: 1.1;
}

.student-session__score {
  color: #8f6304;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

.student-session__detail {
  color: #6f7f91;
  font-size: 11px;
  line-height: 1.1;
}

.student-session__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.student-session__stat {
  display: grid;
  gap: 4px;
  border-radius: 18px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(255, 247, 222, 0.95), rgba(236, 248, 255, 0.95));
}

.student-session__stat-label {
  color: #6f7f91;
  font-size: 11px;
  line-height: 1.1;
}

.student-session__stat-value {
  color: #233041;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

.star-strip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #9b6d03;
}

.star-strip__icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.lesson-grid,
.task-grid {
  display: grid;
  gap: 16px;
}

.task-sections {
  display: grid;
  gap: 26px;
}

.lesson-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.task-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-section {
  display: grid;
  gap: 16px;
}

.task-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.task-section__title {
  margin: 0;
  color: #233041;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
}

.task-section__copy {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.lesson-card,
.task-card,
.leaderboard-card,
.recording-card {
  border-radius: 28px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 45px -34px rgba(64, 79, 107, 0.55);
}

.lesson-card {
  position: relative;
  display: grid;
  grid-template-rows: 205px minmax(0, 1fr) auto;
  gap: 0;
  height: 398px;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 252, 254, 0.99)),
    #ffffff;
  box-shadow:
    0 22px 48px -36px rgba(55, 66, 86, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.lesson-card:hover {
  border-color: rgba(121, 83, 45, 0.24);
  box-shadow:
    0 30px 62px -40px rgba(55, 66, 86, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.lesson-card__art {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(105, 85, 62, 0.09);
  border-radius: 28px 28px 0 0;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255, 248, 232, 0.98), rgba(255, 237, 231, 0.95) 48%, rgba(238, 247, 242, 0.98)),
    #fff4df;
}

.lesson-card__body {
  min-width: 0;
  overflow: hidden;
  padding: 18px 20px 6px;
}

.lesson-card__eyebrow,
.lesson-stage,
.lesson-unit,
.task-type,
.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.lesson-card__eyebrow {
  background: #eef6ff;
  color: #4d79b2;
}

.lesson-card .lesson-card__eyebrow,
.lesson-card .lesson-stage,
.lesson-card .lesson-unit {
  padding: 6px 10px;
  font-size: 12px;
}

.lesson-stage {
  background: #fff0cb;
  color: #9a6a00;
}

.lesson-stage[data-stage="读词读句"] {
  background: #ebf4ff;
  color: #346ab1;
}

.lesson-stage[data-stage="复习"] {
  background: #f2ebff;
  color: #6d57b9;
}

.lesson-stage[data-stage="考试"] {
  background: #ffe8ef;
  color: #b0476e;
}

.lesson-unit {
  background: #edf9f2;
  color: #2f7a53;
}

.lesson-card h3,
.task-card h3 {
  margin: 12px 0 8px;
  font-size: 22px;
  line-height: 1.3;
}

.lesson-card h3 {
  margin: 13px 0 0;
  display: -webkit-box;
  min-height: 60px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 22px;
  line-height: 1.36;
}

.lesson-card__copy {
  color: var(--muted);
  line-height: 1.65;
  min-height: 52px;
}

.lesson-tags {
  margin-top: 12px;
  gap: 9px;
}

.word-card-panel {
  display: grid;
  gap: 14px;
}

.word-card-panel__quote {
  border-radius: 24px;
  background: linear-gradient(135deg, #fff8e1, #fff1d8);
  padding: 16px 18px;
  color: #7f5f0d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.lesson-read-quote {
  width: auto;
  flex: 1 1 560px;
  min-width: 0;
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(230, 191, 106, 0.28);
  border-radius: 28px;
  background: linear-gradient(135deg, #fff7de, #fff0c8);
  padding: 22px 24px;
  color: #7b5712;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.8;
  text-align: left;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.lesson-read-quote:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 34px -24px rgba(177, 129, 32, 0.28);
}

.lesson-read-quote:focus-visible {
  outline: 3px solid rgba(97, 172, 255, 0.36);
  outline-offset: 3px;
}

.lesson-read-quote.is-speaking {
  border-color: rgba(255, 166, 94, 0.52);
  background: linear-gradient(135deg, #ffefc7, #ffe6b4);
  box-shadow: 0 20px 36px -22px rgba(255, 150, 69, 0.4);
}

.lesson-read-inline {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.lesson-read-tools {
  display: grid;
  gap: 12px;
  justify-items: start;
  flex: 0 0 auto;
  min-width: 180px;
}

.recording-inline {
  display: grid;
  gap: 12px;
}

.recording-status {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.lesson-video-card {
  display: grid;
  gap: 16px;
  width: min(100%, 880px);
  margin: 0 auto;
}

.lesson-video-card__player {
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 34%),
    linear-gradient(145deg, rgba(255, 248, 229, 0.85), rgba(235, 247, 255, 0.82));
  border: 1px solid rgba(86, 99, 118, 0.12);
  box-shadow: 0 18px 34px -24px rgba(64, 79, 107, 0.32);
  padding: 10px;
}

.lesson-video-player {
  width: 100%;
  display: block;
  border-radius: 16px;
  background: #000;
  aspect-ratio: 16 / 9;
}

.lesson-video-card__meta {
  border-radius: 22px;
  background: #fffaf0;
  border: 1px solid rgba(232, 198, 136, 0.22);
  padding: 14px 16px;
}

.lesson-video-card__meta strong {
  display: block;
  color: #24364a;
  font-size: 20px;
}

.lesson-video-card__meta p {
  margin-top: 6px;
}

.sentence-practice-list {
  display: grid;
  gap: 12px;
}

.sentence-practice-item {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  border-radius: 22px;
  background: #fffdf8;
  padding: 14px 16px;
  color: #1f3044;
  text-align: left;
  box-shadow: 0 14px 32px -28px rgba(48, 64, 86, 0.52);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.sentence-practice-item:hover {
  border-color: rgba(255, 178, 86, 0.36);
  background: #fff8e8;
  transform: translateY(-1px);
}

.sentence-practice-item:focus-visible {
  outline: 3px solid rgba(97, 172, 255, 0.34);
  outline-offset: 2px;
}

.sentence-practice-item__index {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff1c9;
  color: #916600;
  font-weight: 900;
}

.sentence-practice-item__text {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.45;
}

.sentence-practice-item__action {
  border-radius: 999px;
  background: #edf7ff;
  padding: 8px 12px;
  color: #276b9d;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.word-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.word-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #f9fbff);
  border: 1px solid rgba(86, 99, 118, 0.12);
  box-shadow: 0 18px 30px -26px rgba(64, 79, 107, 0.45);
  padding: 10px 16px;
  color: #24364a;
  font-size: 20px;
  font-weight: 800;
}

.lesson-text-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.lesson-text-card {
  border-radius: 28px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  background:
    radial-gradient(circle at top left, rgba(255, 248, 220, 0.96), rgba(255, 248, 220, 0) 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 255, 0.96));
  box-shadow: 0 18px 34px -26px rgba(64, 79, 107, 0.38);
  padding: 18px;
}

.lesson-text-card__title {
  color: #24364a;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
}

.lesson-text-card__tip {
  margin-top: 8px;
  color: #6c7888;
  font-size: 15px;
  line-height: 1.6;
}

.lesson-text-block {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.reading-river {
  gap: 12px;
}

.reading-river__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reading-river__counter {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(86, 99, 118, 0.1);
  padding: 6px 12px;
  color: #4f6780;
  font-size: 13px;
  font-weight: 800;
}

.reading-river__scene {
  position: relative;
  min-height: 244px;
  overflow: hidden;
  border: 1px solid rgba(77, 130, 166, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 82% 20%, rgba(255, 242, 201, 0.72), rgba(255, 242, 201, 0) 22%),
    linear-gradient(180deg, rgba(225, 246, 255, 0.94), rgba(210, 238, 249, 0.9) 52%, rgba(204, 233, 242, 0.94));
  padding: 84px 18px 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.reading-river__scene::before,
.reading-river__scene::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  pointer-events: none;
}

.reading-river__scene::before {
  top: 38px;
}

.reading-river__scene::after {
  bottom: -42px;
}

.reading-river__buddy {
  position: absolute;
  top: 40px;
  left: 42px;
  z-index: 4;
  width: 62px;
  height: 62px;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -70%);
  filter: drop-shadow(0 9px 12px rgba(74, 84, 101, 0.2));
  transition: left 260ms ease, top 260ms ease, transform 180ms ease;
}

.reading-river__finish {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(86, 99, 118, 0.1);
  padding: 7px 12px;
  color: #547083;
  font-size: 13px;
  font-weight: 800;
}

.reading-river.is-complete .reading-river__finish {
  background: #fff0bf;
  color: #8f6308;
  box-shadow: 0 16px 24px -20px rgba(145, 95, 11, 0.45);
}

.reading-river__stones {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  gap: 58px;
  justify-items: center;
}

.reading-river__stone-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.reading-river--characters .reading-river__stone-row {
  display: grid;
  grid-template-columns: repeat(var(--river-row-count), minmax(72px, 1fr));
  gap: clamp(30px, 2.8vw, 40px);
}

.reading-river--words .reading-river__stones {
  width: min(100%, 900px);
  margin: 0 auto;
}

.reading-river--words .reading-river__stone-row {
  display: grid;
  grid-template-columns: repeat(var(--river-row-count), minmax(116px, 1fr));
  gap: 24px;
}

.reading-river__stone {
  min-height: 58px;
  border-radius: 28px 24px 30px 22px;
  border-color: rgba(126, 106, 77, 0.2);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 36%),
    linear-gradient(145deg, #fff8e7, #f3e5c7);
  box-shadow:
    0 13px 22px -18px rgba(79, 77, 72, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.reading-river__stone.is-read {
  border-color: rgba(72, 154, 102, 0.34);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 36%),
    linear-gradient(145deg, #e7fff0, #cdefdc);
  color: #166b3d;
}

.reading-river__stone.is-speaking {
  border-color: rgba(255, 166, 94, 0.56);
  background: linear-gradient(145deg, #fff0cf, #ffe2ac);
}

.reading-river__message {
  min-height: 20px;
  color: #587184;
  font-size: 14px;
  font-weight: 700;
}

.reading-river.is-complete .reading-river__message {
  color: #1f7a48;
}

.lesson-text-label {
  width: fit-content;
  border-radius: 999px;
  background: #fff4d7;
  padding: 6px 12px;
  color: #8f6308;
  font-size: 14px;
  font-weight: 700;
}

.lesson-text-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lesson-text-chips.reading-river__stones {
  display: grid;
  gap: 58px;
}

.lesson-text-chip {
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  background: rgba(255, 255, 255, 0.92);
  padding: 10px 16px;
  color: #233041;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.lesson-text-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 28px -24px rgba(64, 79, 107, 0.4);
}

.lesson-text-chip:focus-visible {
  outline: 3px solid rgba(97, 172, 255, 0.36);
  outline-offset: 2px;
}

.lesson-text-chip.is-speaking {
  border-color: rgba(255, 166, 94, 0.5);
  background: linear-gradient(145deg, #fff0cf, #ffe6bf);
  box-shadow: 0 18px 30px -22px rgba(255, 150, 69, 0.45);
  transform: translateY(-1px) scale(1.02);
}

.lesson-text-chip--character {
  min-width: 52px;
  padding: 10px 14px;
  background: linear-gradient(145deg, #fff8e7, #fff1d8);
  color: #8f5b11;
  font-size: 30px;
}

.reading-river__stone {
  min-height: 58px;
  border-radius: 28px 24px 30px 22px;
  border-color: rgba(126, 106, 77, 0.2);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 36%),
    linear-gradient(145deg, #fff8e7, #f3e5c7);
  box-shadow:
    0 13px 22px -18px rgba(79, 77, 72, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.reading-river__stone.lesson-text-chip--character {
  min-width: 72px;
  width: 100%;
  min-height: 72px;
  padding: 11px 10px;
  color: #8f5b11;
  font-size: clamp(38px, 3vw, 44px);
}

.reading-river__stone--lower {
  font-size: 25px;
}

.reading-river__stone--lower.lesson-text-chip--character {
  min-width: 76px;
  min-height: 76px;
  font-size: clamp(40px, 3.2vw, 46px);
}

.reading-river--words .reading-river__stone {
  min-height: 66px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 30px 26px 32px 24px;
  font-size: clamp(30px, 2.5vw, 38px);
}

.reading-river--words .reading-river__stone--lower {
  font-size: clamp(32px, 2.8vw, 40px);
}

.reading-river__celebration {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.reading-river__celebration::after {
  content: "过河成功";
  position: absolute;
  left: 50%;
  top: 24px;
  border-radius: 999px;
  background: rgba(255, 246, 202, 0.96);
  border: 1px solid rgba(232, 183, 72, 0.28);
  color: #96640b;
  padding: 9px 16px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 18px 26px -22px rgba(145, 95, 11, 0.56);
  transform: translate(-50%, -8px) scale(0.92);
  opacity: 0;
}

.reading-river__celebration span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #ff7aa2;
  transform: scale(0);
}

.reading-river__celebration span:nth-child(1) {
  left: 22%;
  top: 22%;
  background: #ffcf4a;
}

.reading-river__celebration span:nth-child(2) {
  left: 38%;
  top: 18%;
  background: #70d68a;
}

.reading-river__celebration span:nth-child(3) {
  left: 55%;
  top: 24%;
  background: #5db7ff;
}

.reading-river__celebration span:nth-child(4) {
  left: 70%;
  top: 18%;
  background: #ff8c5a;
}

.reading-river__celebration span:nth-child(5) {
  left: 82%;
  top: 34%;
  background: #b48cff;
}

.reading-river.is-complete .reading-river__celebration {
  opacity: 1;
}

.reading-river.is-complete .reading-river__celebration::after {
  animation: riverSuccessBadge 900ms ease-out both;
}

.reading-river.is-complete .reading-river__celebration span {
  animation: riverFirework 960ms ease-out both;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(2) {
  animation-delay: 90ms;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(3) {
  animation-delay: 150ms;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(4) {
  animation-delay: 220ms;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(5) {
  animation-delay: 300ms;
}

@keyframes riverFirework {
  0% {
    opacity: 0;
    transform: scale(0);
    box-shadow:
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor;
  }
  18% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
    box-shadow:
      0 -54px 0 #ffcf4a,
      46px -28px 0 #70d68a,
      46px 28px 0 #5db7ff,
      0 54px 0 #ff8c5a,
      -46px 28px 0 #b48cff,
      -46px -28px 0 #ff7aa2;
  }
}

@keyframes riverSuccessBadge {
  0% {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.88);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.04);
  }
  74% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -4px) scale(0.96);
  }
}

.reading-river__celebration {
  overflow: hidden;
}

.reading-river__celebration::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  border: 2px solid rgba(255, 210, 85, 0.45);
  box-shadow:
    0 0 0 14px rgba(255, 122, 162, 0.08),
    0 0 0 28px rgba(93, 183, 255, 0.07);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
}

.reading-river__celebration::after {
  content: "过河成功";
  font-size: 20px;
}

.reading-river__celebration span {
  width: 13px;
  height: 13px;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.16);
  filter: drop-shadow(0 2px 4px rgba(65, 84, 110, 0.18));
}

.reading-river__celebration span:nth-child(1) {
  left: 20%;
  top: 34%;
  color: #ffcf4a;
  background: currentColor;
}

.reading-river__celebration span:nth-child(2) {
  left: 35%;
  top: 23%;
  color: #70d68a;
  background: currentColor;
}

.reading-river__celebration span:nth-child(3) {
  left: 50%;
  top: 37%;
  color: #5db7ff;
  background: currentColor;
}

.reading-river__celebration span:nth-child(4) {
  left: 65%;
  top: 24%;
  color: #ff8c5a;
  background: currentColor;
}

.reading-river__celebration span:nth-child(5) {
  left: 80%;
  top: 40%;
  color: #b48cff;
  background: currentColor;
}

.reading-river__celebration span:nth-child(6) {
  left: 29%;
  top: 66%;
  color: #ff7aa2;
  background: currentColor;
}

.reading-river__celebration span:nth-child(7) {
  left: 54%;
  top: 69%;
  color: #ffd166;
  background: currentColor;
}

.reading-river__celebration span:nth-child(8) {
  left: 73%;
  top: 64%;
  color: #4ddbd2;
  background: currentColor;
}

.reading-river.is-complete .reading-river__celebration::before {
  animation: riverCelebrationGlow 1150ms ease-out both;
}

.reading-river.is-complete .reading-river__celebration span {
  animation: riverFirework 1400ms cubic-bezier(0.16, 0.74, 0.18, 1) both;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(2) {
  animation-delay: 100ms;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(3) {
  animation-delay: 190ms;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(4) {
  animation-delay: 290ms;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(5) {
  animation-delay: 390ms;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(6) {
  animation-delay: 500ms;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(7) {
  animation-delay: 600ms;
}

.reading-river.is-complete .reading-river__celebration span:nth-child(8) {
  animation-delay: 700ms;
}

@keyframes riverFirework {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.16);
    box-shadow:
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor,
      0 0 0 currentColor;
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  52% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
    box-shadow:
      0 -110px 0 #ffcf4a,
      78px -78px 0 #fff3a5,
      110px 0 0 #70d68a,
      78px 78px 0 #5db7ff,
      0 110px 0 #ff8c5a,
      -78px 78px 0 #b48cff,
      -110px 0 0 #ff7aa2,
      -78px -78px 0 #4ddbd2;
  }
}

@keyframes riverCelebrationGlow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.85);
  }
}

.reading-river__stone.is-read {
  border-color: rgba(72, 154, 102, 0.34);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 36%),
    linear-gradient(145deg, #e7fff0, #cdefdc);
  color: #166b3d;
}

.reading-river__stone.is-speaking {
  border-color: rgba(255, 166, 94, 0.56);
  background: linear-gradient(145deg, #fff0cf, #ffe2ac);
}

.lesson-tag {
  border-radius: 999px;
  background: #f5f6f9;
  padding: 6px 10px;
  color: #5f6c7c;
  font-size: 12px;
}

.lesson-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid rgba(86, 99, 118, 0.08);
  padding: 15px 20px 18px;
}

.progress-pill {
  flex: 0 1 auto;
  border-radius: 999px;
  background: #f0f4f9;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 700;
  color: #5c6778;
  white-space: nowrap;
}

.progress-pill.is-done {
  background: #e8fff0;
  color: #1e7a49;
}

.lesson-card__footer .button {
  flex: 0 0 auto;
  padding: 9px 13px;
  font-size: 13px;
  white-space: nowrap;
}

.task-card {
  padding: 20px;
}

.task-card--fill-blank {
  padding: 30px;
}

.task-card--picture {
  padding: 20px;
}

.task-card__visual {
  margin-top: 16px;
  border-radius: 24px;
  padding: 12px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 38%),
    linear-gradient(145deg, rgba(255, 247, 225, 0.94), rgba(236, 247, 255, 0.94));
}

.task-card__visual .illustration-image-frame {
  aspect-ratio: 16 / 10;
}

.task-card--picture .task-card__visual {
  margin-top: 0;
  height: clamp(210px, 20vw, 280px);
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: hidden;
}

.task-card--picture .task-card__visual .illustration-image-frame {
  width: min(58%, 280px);
  height: min(100%, 280px);
  max-height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.task-card--picture .task-card__visual .illustration-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
}

.task-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-card__question {
  margin: 16px 0 0;
  font-size: 22px;
  line-height: 1.35;
}

.task-card__question--fill {
  margin-top: 20px;
  border-radius: 28px;
  background: linear-gradient(135deg, #fff8e4, #fff2dd);
  padding: 28px 30px;
  font-size: clamp(30px, 2.8vw, 38px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: 0.03em;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  white-space: normal;
}

.task-blank {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 2.1em;
  margin: 0 0.05em;
  color: #1f3044;
  white-space: nowrap;
}

.task-blank__space {
  display: inline-block;
  width: 0.72em;
}

.fill-line {
  display: block;
  max-width: 100%;
}

.fill-lock {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.task-type {
  background: #fff2d7;
  color: #976703;
}

.task-points {
  color: #4b7db1;
  font-weight: 700;
}

.task-card__options {
  margin-top: 18px;
}

.task-card--picture .task-card__options {
  margin-top: 16px;
  gap: 14px;
}

.task-card__options--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}

.task-card__options--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-card__options--fill {
  margin-top: 22px;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.task-option {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(86, 99, 118, 0.14);
  border-radius: 20px;
  background: #fff;
  padding: 14px 16px;
  color: var(--ink);
}

.task-card__options--grid .task-option {
  display: grid;
  place-items: center;
  min-height: 70px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  padding: 16px 12px;
}

.task-card--picture .task-card__options--grid .task-option {
  min-height: 92px;
  border-radius: 22px;
  font-size: clamp(34px, 2.8vw, 44px);
  line-height: 1.15;
}

.task-option--fill {
  min-height: 92px !important;
  border-radius: 24px;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 800;
  padding: 18px 14px !important;
}

.task-option:hover {
  background: #fafcff;
}

.task-option.is-correct,
.task-option[disabled].is-correct {
  background: #e8fff0;
  border-color: #89d6af;
  color: #0e6d3b;
}

.task-option.is-wrong {
  background: #fff1f1;
  border-color: #f1a3a3;
  color: #b54a4a;
}

.task-option[disabled] {
  cursor: default;
  opacity: 1;
}

.task-card__hint,
.task-card__result,
.status-message,
.info-chip {
  margin-top: 14px;
  border-radius: 18px;
  padding: 12px 14px;
}

.task-card__hint {
  background: #fff8e7;
  color: #8c6707;
}

.task-card__result {
  background: #effcf4;
  color: #17754e;
  font-weight: 700;
}

.writing-practice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.writing-studio {
  display: grid;
  gap: 18px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.96);
  padding: 20px;
  box-shadow: 0 20px 42px -34px rgba(64, 79, 107, 0.46);
}

.writing-studio__picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.writing-character-tab {
  appearance: none;
  min-height: 92px;
  display: grid;
  gap: 3px;
  place-items: center;
  border: 1px solid rgba(86, 99, 118, 0.12);
  border-radius: 22px;
  background: #f8fbff;
  color: #1f3044;
  box-shadow: 0 14px 28px -24px rgba(64, 79, 107, 0.42);
}

.writing-character-tab span {
  color: #657487;
  font-size: 13px;
  font-weight: 800;
}

.writing-character-tab strong {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1;
}

.writing-character-tab.is-active {
  border-color: rgba(47, 126, 216, 0.36);
  background: linear-gradient(145deg, #eaf5ff, #fff8e4);
  color: #103f7e;
  box-shadow: 0 22px 34px -26px rgba(47, 126, 216, 0.45);
}

.writing-studio__main {
  display: grid;
  gap: 18px;
}

.writing-studio__practice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.writing-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  padding: 18px;
  box-shadow: 0 20px 42px -34px rgba(64, 79, 107, 0.46);
}

.writing-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.writing-card__eyebrow,
.writing-card__focus {
  width: fit-content;
  border-radius: 999px;
  background: #fff4d7;
  padding: 6px 10px;
  color: #8f6308;
  font-size: 13px;
  font-weight: 800;
}

.writing-card__focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.writing-card h4 {
  margin: 8px 0 0;
  color: #1f3044;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
}

.writing-card__section {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(86, 99, 118, 0.1);
  border-radius: 20px;
  background: #ffffff;
  padding: 14px;
}

.writing-card__section--write {
  justify-items: center;
}

.writing-card__section--demo {
  background: #f8fbff;
  gap: 18px;
}

.writing-card__section--trace {
  background: #fffdf8;
}

.writing-card__section--free {
  background: #fbfffd;
}

.writing-card__section--writebook {
  gap: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 244, 215, 0.86), transparent 34%),
    linear-gradient(145deg, #fffdf7 0%, #f8fffb 100%);
}

.writing-card__section-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #103f7e;
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
  font-size: 19px;
  font-weight: 900;
}

.writing-card__section-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #2f7ed8;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 12px 22px -16px rgba(47, 126, 216, 0.72);
}

.writing-demo-board {
  position: relative;
  width: min(100%, 250px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(38, 52, 70, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.14) calc(50% - 1px), rgba(38, 52, 70, 0.14) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.14) calc(50% - 1px), rgba(38, 52, 70, 0.14) calc(50% + 1px), transparent calc(50% + 1px)),
    #ffffff;
}

.writing-demo-character {
  color: rgba(31, 48, 68, 0.16);
  font-family: var(--font-display);
  font-size: 154px;
  line-height: 1;
}

.writing-demo-stroke {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #c83d3d;
  pointer-events: none;
}

.writing-demo-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 20px;
}

.hanzi-animation-board {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(38, 52, 70, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.12) calc(50% - 1px), rgba(38, 52, 70, 0.12) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.12) calc(50% - 1px), rgba(38, 52, 70, 0.12) calc(50% + 1px), transparent calc(50% + 1px)),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hanzi-animation-target {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.hanzi-animation-target svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hanzi-animation-fallback {
  color: rgba(31, 48, 68, 0.18);
  font-family: var(--font-display);
  font-size: 176px;
  line-height: 1;
}

.writing-stroke-frame-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.writing-stroke-frame-panel__title {
  color: #5c6f83;
  font-size: 14px;
  font-weight: 800;
}

.writing-stroke-frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.writing-stroke-frame {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 1px solid rgba(86, 99, 118, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  padding: 10px 8px 8px;
  color: #63748a;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 14px 26px -24px rgba(64, 79, 107, 0.44);
}

.writing-stroke-frame--loading {
  min-height: 92px;
  place-content: center;
}

.writing-stroke-frame__svg {
  width: min(100%, 88px);
  aspect-ratio: 1;
  display: block;
}

.writing-stroke-frame__svg rect {
  fill: #ffffff;
  stroke: rgba(38, 52, 70, 0.12);
  stroke-width: 10;
}

.writing-stroke-frame__guides line {
  stroke: rgba(38, 52, 70, 0.12);
  stroke-width: 8;
  stroke-linecap: round;
}

.writing-stroke-frame__svg path {
  stroke: none;
}

.writing-stroke-frame__svg path.is-done {
  fill: #172942;
}

.writing-stroke-frame__svg path.is-current {
  fill: #c83d3d;
}

.writing-card__board {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 2px solid rgba(38, 52, 70, 0.72);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.34) calc(50% - 1px), rgba(38, 52, 70, 0.34) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.34) calc(50% - 1px), rgba(38, 52, 70, 0.34) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.12) calc(50% - 1px), rgba(38, 52, 70, 0.12) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.12) calc(50% - 1px), rgba(38, 52, 70, 0.12) calc(50% + 1px), transparent calc(50% + 1px)),
    #fffaf0;
  touch-action: none;
}

.writing-card__board--blank {
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.28) calc(50% - 1px), rgba(38, 52, 70, 0.28) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.28) calc(50% - 1px), rgba(38, 52, 70, 0.28) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.1) calc(50% - 1px), rgba(38, 52, 70, 0.1) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.1) calc(50% - 1px), rgba(38, 52, 70, 0.1) calc(50% + 1px), transparent calc(50% + 1px)),
    #ffffff;
}

.writing-card__board--practice {
  width: min(100%, 320px);
  border-color: rgba(38, 52, 70, 0.58);
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.32) calc(50% - 1px), rgba(38, 52, 70, 0.32) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.32) calc(50% - 1px), rgba(38, 52, 70, 0.32) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.1) calc(50% - 1px), rgba(38, 52, 70, 0.1) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.1) calc(50% - 1px), rgba(38, 52, 70, 0.1) calc(50% + 1px), transparent calc(50% + 1px)),
    #fffaf0;
}

.writing-card__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(31, 48, 68, 0.18);
  font-family: var(--font-display);
  font-size: 168px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transition: opacity 160ms ease, color 160ms ease;
}

.writing-card.is-demoing .writing-card__ghost {
  color: rgba(180, 103, 18, 0.26);
}

.writing-card.is-free-writing .writing-card__ghost {
  opacity: 0;
}

.writing-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.writing-practice-toolbar {
  display: flex;
  justify-content: flex-start;
}

.writing-mode-toggle {
  display: inline-flex;
  gap: 6px;
  border: 1px solid rgba(47, 126, 216, 0.16);
  border-radius: 999px;
  background: rgba(239, 247, 255, 0.84);
  padding: 5px;
}

.writing-book-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(240px, 1fr);
  align-items: center;
  gap: 22px;
}

.writing-book-side {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: center;
}

.writing-copybook-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.writing-copybook-row span {
  min-height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(86, 99, 118, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.08) calc(50% - 1px), rgba(38, 52, 70, 0.08) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(38, 52, 70, 0.08) calc(50% - 1px), rgba(38, 52, 70, 0.08) calc(50% + 1px), transparent calc(50% + 1px)),
    rgba(255, 255, 255, 0.82);
  color: rgba(31, 48, 68, 0.18);
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
}

.writing-card__modes,
.writing-card__actions,
.writing-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.writing-mode-button {
  appearance: none;
  border: 1px solid rgba(86, 99, 118, 0.14);
  border-radius: 999px;
  background: #ffffff;
  padding: 8px 14px;
  color: #526174;
  font-size: 14px;
  font-weight: 800;
}

.writing-mode-button.is-active {
  border-color: rgba(24, 50, 79, 0.18);
  background: #18324f;
  color: #ffffff;
  box-shadow: 0 10px 20px -18px rgba(24, 50, 79, 0.75);
}

.writing-strokes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}

.writing-strokes li {
  position: relative;
  width: 58px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(86, 99, 118, 0.08);
  border-radius: 18px;
  background: #eef5fb;
  padding: 5px;
  color: #43566c;
  text-align: center;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.writing-strokes li.is-active {
  background: #ffdf8a;
  border-color: rgba(155, 93, 0, 0.22);
  color: #7a4d00;
  transform: translateY(-2px) scale(1.05);
}

.writing-stroke-number {
  position: absolute;
  top: -7px;
  left: -5px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ffffff;
  color: #557086;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 16px -12px rgba(48, 68, 92, 0.5);
}

.writing-stroke-icon {
  width: 44px;
  height: 36px;
  display: block;
  overflow: visible;
}

.writing-stroke-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.writing-stroke-icon--focus {
  width: 32px;
  height: 26px;
}

.writing-stroke-icon--demo {
  width: 120px;
  height: 120px;
}

.writing-stroke-icon--demo path {
  stroke-width: 13;
}

.writing-card__note,
.writing-card__examples {
  margin: 0;
  color: #607083;
  text-align: center;
  line-height: 1.6;
}

.writing-card__examples {
  font-weight: 700;
}

.writing-card__saved {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 18px;
  background: #f7fbff;
  padding: 10px;
  color: #607083;
  font-size: 13px;
  font-weight: 700;
}

.writing-card__saved img {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  border-radius: 10px;
  background: #fffaf0;
  object-fit: contain;
}

.lesson-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255, 246, 223, 0.97), rgba(255, 232, 219, 0.97) 38%, rgba(231, 246, 255, 0.96) 68%, rgba(235, 255, 245, 0.96)),
    var(--panel);
  box-shadow: var(--shadow);
}

.lesson-hero__course {
  min-width: 0;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  padding: 20px;
}

.lesson-hero__course-title {
  display: grid;
  gap: 12px;
}

.lesson-hero__course-title h1 {
  margin: 0;
  color: #17283a;
  font-family: var(--font-display);
  font-size: clamp(38px, 3.3vw, 58px);
  line-height: 1.08;
}

.lesson-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

.lesson-hero__meta h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.2;
  font-family: var(--font-display);
}

.lesson-hero__read {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.8);
  padding: 14px 16px;
  color: #536274;
  line-height: 1.7;
}

.lesson-hero__art {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 40%),
    linear-gradient(145deg, rgba(255, 248, 229, 0.8), rgba(235, 247, 255, 0.78) 58%, rgba(233, 255, 245, 0.8));
}

.lesson-hero__art--focus {
  min-height: 210px;
  padding: 18px;
  border-radius: 24px;
}

.lesson-hero__art--focus .illustration-image-frame {
  width: min(100%, 300px);
  max-width: 300px;
  aspect-ratio: 1;
}

.lesson-hero__poem {
  min-width: 0;
  display: grid;
  align-items: stretch;
}

.lesson-hero__poem-card {
  position: relative;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(145, 105, 52, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 30%),
    linear-gradient(145deg, rgba(255, 239, 199, 0.96), rgba(255, 248, 230, 0.98) 58%, rgba(232, 248, 238, 0.95)),
    #fff3d5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68), 0 18px 34px -30px rgba(72, 48, 25, 0.42);
  padding: 28px 30px 24px;
}

.lesson-hero__poem-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(12deg, rgba(153, 115, 62, 0.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-8deg, rgba(55, 126, 160, 0.035) 0 1px, transparent 1px 9px);
  mix-blend-mode: multiply;
}

.lesson-hero__poem-pin {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #f6d6a3, #b97939 68%, #70411d);
  box-shadow: 0 5px 10px -6px rgba(64, 36, 15, 0.7);
}

.lesson-hero__poem-title,
.lesson-hero__poem-lines,
.lesson-hero__poem-task {
  position: relative;
  z-index: 1;
}

.lesson-hero__poem-title {
  margin-bottom: 20px;
  color: #17283a;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.25vw, 48px);
  line-height: 1.12;
}

.lesson-hero__poem-lines {
  display: grid;
  gap: 8px;
  color: #17283a;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.34;
}

.lesson-hero__poem-task {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
  width: fit-content;
  max-width: 100%;
  border: 1px dashed rgba(167, 117, 38, 0.42);
  border-radius: 18px;
  background: rgba(255, 251, 235, 0.78);
  color: #5f4720;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.45;
}

.lesson-hero__poem-task strong {
  border-radius: 999px;
  background: #ffd66a;
  color: #7b4b08;
  padding: 3px 9px;
}

.lesson-hero__progress {
  min-width: 0;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(86, 99, 118, 0.12);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  padding: 20px;
}

.lesson-hero__progress-title {
  display: grid;
  gap: 10px;
}

.lesson-hero__progress-title h1 {
  margin: 0;
  color: #17283a;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.16;
}

.lesson-hero__progress .student-session {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.lesson-hero__progress .student-session__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-hero__progress .student-session__stat {
  min-height: 70px;
  align-content: center;
  border: 1px solid rgba(86, 99, 118, 0.08);
  background: linear-gradient(135deg, rgba(255, 248, 225, 0.94), rgba(235, 248, 255, 0.95));
}

.recording-panel {
  display: grid;
  gap: 16px;
}

.recording-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.recording-action {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-grid;
  justify-items: center;
  gap: 10px;
  padding: 0;
  color: #233041;
}

.recording-action__shape {
  display: block;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease,
    background 140ms ease;
}

.recording-action__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.recording-action--record .recording-action__shape {
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: linear-gradient(145deg, #ff7d7d, #e34d4d);
  box-shadow: 0 18px 30px -20px rgba(209, 63, 63, 0.9);
}

.recording-action--save .recording-action__shape {
  width: 70px;
  height: 70px;
  border-radius: 22px;
  background: linear-gradient(145deg, #69c88b, #2ea35d);
  box-shadow: 0 18px 30px -20px rgba(39, 140, 82, 0.82);
}

.recording-action:hover .recording-action__shape {
  transform: translateY(-1px) scale(1.03);
}

.recording-action:focus-visible {
  outline: 3px solid rgba(97, 172, 255, 0.34);
  outline-offset: 4px;
  border-radius: 20px;
}

.recording-action[disabled] {
  cursor: not-allowed;
}

.recording-action[disabled] .recording-action__shape,
.recording-action[disabled] .recording-action__label {
  opacity: 0.42;
}

.recording-panel.is-recording .recording-action--record .recording-action__shape,
.lesson-read-tools.is-recording .recording-action--record .recording-action__shape {
  animation: recordingPulse 1s ease-in-out infinite;
}

@keyframes recordingPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 18px 30px -20px rgba(209, 63, 63, 0.9);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 22px 34px -18px rgba(209, 63, 63, 1);
  }
}

.recording-list {
  display: grid;
  gap: 12px;
}

.recording-card {
  padding: 16px;
}

.recording-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.recording-card audio {
  width: 100%;
  margin-top: 10px;
}

.recording-assessment {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(74, 124, 177, 0.15);
  border-radius: 20px;
  background: #f7fbff;
  padding: 14px;
  color: #26394f;
}

.recording-assessment--pending {
  background: #fff9ec;
  border-color: rgba(170, 123, 27, 0.16);
  color: #7a5a0a;
}

.recording-assessment p {
  margin: 0;
  color: inherit;
  line-height: 1.6;
}

.recording-assessment__score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.recording-assessment__score strong {
  color: #12355c;
  font-size: 20px;
}

.recording-assessment__score span {
  color: #5b6e82;
  font-size: 13px;
  font-weight: 700;
}

.recording-assessment__issues {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recording-assessment__issues li {
  display: grid;
  gap: 4px;
  border-radius: 16px;
  background: #ffffff;
  padding: 10px 12px;
  line-height: 1.55;
}

.recording-assessment__issues span {
  width: fit-content;
  border-radius: 999px;
  background: #fff0cc;
  padding: 3px 8px;
  color: #8a6100;
  font-size: 12px;
  font-weight: 800;
}

.recording-delete-button {
  flex: 0 0 auto;
}

.leaderboard-list {
  flex-direction: column;
}

.leaderboard-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.leaderboard-card__rank {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff2d8;
  color: #976703;
  font-weight: 800;
}

.leaderboard-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #5f6c7c;
  font-size: 13px;
}

.hidden {
  display: none !important;
}

.teacher-login-form,
.student-login-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

body.is-login-page .student-login-form {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

body.is-login-page .student-login-form .button {
  grid-column: 1 / -1;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  min-height: 58px;
  padding-inline: 30px;
  border-radius: 10px;
  white-space: nowrap;
}

.form-field {
  display: grid;
  gap: 8px;
  min-width: min(320px, 100%);
}

body.is-login-page .form-field {
  min-width: 0;
  max-width: 100%;
}

.form-field span {
  font-weight: 700;
  color: #566476;
}

body.is-login-page .form-field span {
  color: #634533;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.form-field input {
  border-radius: 18px;
  border: 1px solid rgba(86, 99, 118, 0.16);
  background: #fff;
  padding: 14px 16px;
}

body.is-login-page .form-field input {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  border-radius: 8px;
  border-color: rgba(122, 78, 45, 0.2);
  background: #fffdf9;
  color: #2f2a25;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  outline: none;
}

body.is-login-page .form-field input:focus {
  border-color: rgba(132, 45, 32, 0.46);
  box-shadow:
    0 0 0 4px rgba(132, 45, 32, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.status-message {
  background: #edf6ff;
  color: #3d6f9a;
}

body.is-login-page #studentLoginMessage {
  margin: 14px 0 0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff0e8;
  color: #8b3328;
}

.teacher-dashboard {
  display: grid;
  gap: 20px;
}

.recording-review-grid {
  display: grid;
  gap: 16px;
}

.recording-review-card {
  border: 1px solid rgba(86, 99, 118, 0.1);
  border-radius: 24px;
  background: #fcfdff;
  padding: 18px;
}

.recording-review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.recording-review-card__head h3 {
  margin: 0;
  font-size: 20px;
}

.recording-review-list {
  display: grid;
  gap: 12px;
}

.recording-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.recording-score-label {
  color: #566476;
  font-size: 14px;
  font-weight: 700;
}

.recording-score-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.button--tiny.is-active {
  background: #1f3044;
  color: #fff;
  border-color: #1f3044;
}

.table-wrap {
  overflow-x: auto;
}

.teacher-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

.teacher-table th,
.teacher-table td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(86, 99, 118, 0.1);
}

.teacher-table th {
  color: #566476;
  font-size: 13px;
}

.footer-nav {
  justify-content: space-between;
}

.empty-state {
  border-radius: 24px;
  background: #f7fbff;
  padding: 22px;
  color: #607083;
}

@media (max-width: 1180px) {
  .lesson-hero {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

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

@media (max-width: 980px) {
  .hero,
  .lesson-hero {
    grid-template-columns: 1fr;
  }

  .lesson-hero__progress {
    grid-column: auto;
  }

  .lesson-hero__course,
  .lesson-hero__poem-card,
  .lesson-hero__progress {
    min-height: auto;
  }

  .lesson-hero__art--focus {
    min-height: 260px;
  }

  body.is-login-page .hero {
    grid-template-columns: 1fr;
    padding: 34px;
  }

  body.is-login-page .hero__art {
    min-height: 0;
  }

  body.is-login-page .student-login-form {
    grid-template-columns: 1fr;
  }

  .dashboard-grid,
  .task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .writing-practice-grid {
    grid-template-columns: 1fr;
  }

  .writing-studio__practice {
    grid-template-columns: 1fr;
  }

  .writing-card__section--demo {
    grid-template-columns: 1fr;
  }

  .writing-demo-layout {
    grid-template-columns: 1fr;
  }

  .writing-book-layout {
    grid-template-columns: 1fr;
  }

  .writing-book-side {
    width: min(100%, 460px);
    justify-self: center;
  }

  .lesson-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body {
    padding: 14px 12px 28px;
  }

  body.is-login-page {
    padding: 12px 10px 32px;
  }

  body.is-login-page .page-shell,
  body.is-login-page .hero {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  body.is-login-page .hero__content,
  body.is-login-page #studentLoginPanel {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .hero,
  .panel,
  .lesson-hero {
    padding: 18px;
    border-radius: 24px;
  }

  .lesson-hero {
    gap: 14px;
  }

  .lesson-hero__course {
    border-radius: 22px;
    padding: 18px;
  }

  .lesson-hero__art--focus {
    min-height: 220px;
    padding: 12px;
  }

  .lesson-hero__poem-card,
  .lesson-hero__progress {
    border-radius: 22px;
    padding: 18px;
  }

  .lesson-hero__poem-card {
    min-height: auto;
  }

  .lesson-hero__poem-title {
    font-size: 32px;
  }

  .lesson-hero__poem-lines {
    font-size: 29px;
    line-height: 1.32;
  }

  .lesson-hero__progress .student-session__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-login-page .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
  }

  body.is-login-page .hero h1 {
    font-size: 34px;
    line-height: 1.24;
  }

  body.is-login-page .hero h1 .title-line {
    white-space: normal;
    word-break: break-all;
  }

  body.is-login-page .hero p {
    font-size: 16px;
    max-width: 100%;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  body.is-login-page .hero__art {
    min-height: 0;
    padding: 12px;
    width: 100%;
  }

  body.is-login-page .textbook-display {
    width: 100%;
    max-width: 100%;
  }

  body.is-login-page .textbook-cover-image {
    width: min(100%, 230px);
  }

  body.is-login-page #studentLoginPanel {
    margin-top: 16px;
    padding: 18px;
    border-radius: 10px;
  }

  body.is-login-page #studentLoginPanel .panel__header {
    margin-bottom: 18px;
  }

  body.is-login-page #studentLoginPanel p {
    word-break: break-all;
  }

  body.is-login-page .student-login-form .button,
  body.is-login-page .form-field input {
    width: 100%;
  }

  body.is-login-page .student-login-form .button {
    padding-inline: 18px;
    white-space: normal;
  }

  .hero h1 {
    font-size: 32px;
    line-height: 1.24;
    word-break: break-all;
  }

  .hero__actions .button {
    width: 100%;
    text-align: center;
  }

  .panel__header,
  .hero__actions,
  .footer-nav,
  .recording-controls,
  .teacher-login-form {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-grid,
  .lesson-grid,
  .task-grid {
    grid-template-columns: 1fr;
  }

  .writing-card {
    padding: 14px;
    border-radius: 22px;
  }

  .writing-studio {
    padding: 14px;
    border-radius: 22px;
  }

  .writing-studio__picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .writing-character-tab {
    min-height: 82px;
    border-radius: 18px;
  }

  .writing-character-tab strong {
    font-size: 36px;
  }

  .writing-card__top {
    align-items: stretch;
    flex-direction: column;
  }

  .writing-card__board {
    width: min(100%, 240px);
  }

  .writing-card__board--practice {
    width: min(100%, 270px);
  }

  .hanzi-animation-board {
    width: min(100%, 280px);
  }

  .writing-stroke-frames {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .writing-practice-toolbar {
    justify-content: center;
  }

  .writing-copybook-row span {
    min-height: 62px;
    border-radius: 14px;
    font-size: 38px;
  }

  .writing-card__ghost {
    font-size: 152px;
  }

  .lesson-card {
    grid-template-columns: 1fr;
    grid-template-rows: 164px minmax(0, 1fr) auto;
    height: 368px;
    gap: 0;
    padding: 0;
    border-radius: 22px;
  }

  .lesson-card__art {
    width: auto;
    min-height: 0;
    border-radius: 22px 22px 0 0;
    padding: 16px;
  }

  .lesson-card__art svg,
  .lesson-card__art img {
    max-width: 142px;
    max-height: 112px;
  }

  .lesson-card__art .illustration-image-frame {
    width: min(68%, 148px);
  }

  .lesson-card h3 {
    min-height: 52px;
    font-size: 20px;
    line-height: 1.34;
  }

  .lesson-tags {
    gap: 8px;
  }

  .lesson-card__footer {
    gap: 8px;
    padding: 13px 18px 16px;
  }

  .lesson-card__footer .button,
  .progress-pill {
    padding: 7px 10px;
    font-size: 12px;
  }

  .task-card--picture {
    padding: 14px;
  }

  .task-card--picture .task-card__visual {
    height: 150px;
    border-radius: 20px;
    padding: 12px;
  }

  .task-card--picture .task-card__visual .illustration-image-frame {
    width: min(48%, 150px);
    height: min(100%, 150px);
  }

  .task-card--picture .task-card__options--grid .task-option {
    min-height: 84px;
    border-radius: 20px;
    font-size: clamp(32px, 8.2vw, 40px);
  }

  .lesson-video-card {
    width: 100%;
  }

  .lesson-video-card__player {
    border-radius: 20px;
    padding: 8px;
  }

  .lesson-video-player {
    border-radius: 14px;
  }

  .reading-river__topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .reading-river__scene {
    min-height: 220px;
    padding: 74px 12px 22px;
    border-radius: 22px;
  }

  .reading-river__buddy {
    width: 52px;
    height: 52px;
  }

  .reading-river__finish {
    top: 12px;
    right: 12px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .reading-river__stones {
    gap: 52px;
  }

  .lesson-text-chips.reading-river__stones {
    gap: 52px;
  }

  .reading-river__stone-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .reading-river--characters .reading-river__stone-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
    gap: 48px 24px;
  }

  .reading-river--words .reading-river__stone-row {
    grid-template-columns: repeat(2, minmax(128px, 1fr));
    gap: 16px;
  }

  .reading-river__stone {
    min-height: 52px;
    padding: 9px 13px;
    font-size: 22px;
  }

  .reading-river__stone.lesson-text-chip--character {
    min-width: 68px;
    min-height: 68px;
    padding: 10px 8px;
    font-size: 36px;
  }

  .reading-river__stone--lower {
    font-size: 23px;
  }

  .reading-river__stone--lower.lesson-text-chip--character {
    min-width: 70px;
    min-height: 70px;
    font-size: 38px;
  }

  .reading-river--words .reading-river__stone {
    min-height: 60px;
    padding: 11px 12px;
    font-size: clamp(25px, 7vw, 32px);
  }

  .reading-river--words .reading-river__stone--lower {
    font-size: clamp(26px, 7.4vw, 34px);
  }

  .page-topbar {
    justify-content: stretch;
  }

  .account-menu {
    width: 100%;
    display: grid;
    gap: 10px;
  }

  .student-profile-popover {
    position: static;
    width: 100%;
    padding: 14px;
    border-radius: 20px;
  }

  .student-profile-popover__header {
    align-items: stretch;
    flex-direction: column;
  }

  .student-profile-popover__grid {
    grid-template-columns: 1fr;
  }

  .student-profile-popover .summary-card {
    min-height: 0;
  }

  .student-selector {
    gap: 10px;
  }

  .student-session {
    width: 100%;
    justify-content: space-between;
  }

  .student-session__stats {
    grid-template-columns: 1fr;
  }

  .student-selector__button {
    width: 100%;
    justify-content: space-between;
  }

  .lesson-read-inline {
    flex-direction: column;
  }

  .lesson-read-tools {
    min-width: 0;
  }
}

body.is-student-home .button--hero {
  min-height: 64px;
  justify-content: center;
  border-radius: 999px;
  padding: 18px 30px;
  font-size: 21px;
}

body.is-student-home .hero__art .kid-hero__dog {
  width: min(46%, 210px);
  height: auto;
  object-fit: contain;
}

body.is-student-home .hero__art .kid-hero__scene {
  width: 100%;
  height: auto;
}

.task-card.task-card--fill-blank .task-card__question--fill {
  font-size: clamp(30px, 2.8vw, 38px);
  line-height: 1.42;
}

.task-card.task-card--fill-blank .task-option--fill {
  min-height: 82px !important;
  border-radius: 22px;
  font-size: clamp(19px, 1.65vw, 23px) !important;
  line-height: 1.2;
  padding: 16px 12px !important;
}

@media (max-width: 680px) {
  body.is-student-home .account-menu.kid-account {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  body.is-student-home .kid-account__trigger {
    min-width: 0;
    flex: 1;
  }

  body.is-student-home .student-profile-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    left: 0;
    width: 100%;
  }

  body.is-student-home .hero__art .kid-hero__dog {
    width: min(48%, 150px);
    margin-bottom: 26px;
  }

  body.is-student-home .kid-hero__scene {
    min-height: 220px;
  }

  .task-card.task-card--fill-blank .task-card__question--fill {
    font-size: clamp(27px, 7.4vw, 34px);
    line-height: 1.38;
    padding: 22px 20px;
  }

  .task-card.task-card--fill-blank .task-card__options--fill {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .task-card.task-card--fill-blank .task-option--fill {
    min-height: 68px !important;
    border-radius: 20px;
    font-size: clamp(17px, 4.4vw, 20px) !important;
  }
}

/* Khan Kids inspired welcome page */
body.is-login-page {
  min-height: 100vh;
  padding: 28px 18px 58px;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #eef8fb 0%, #f9fcfb 46%, #fff8e6 100%);
}

body.is-login-page .page-shell {
  max-width: 1180px;
}

body.is-login-page .hero.welcome-hero {
  min-height: 560px;
  grid-template-columns: minmax(0, 0.98fr) minmax(360px, 1.02fr);
  gap: 38px;
  align-items: center;
  border: 0;
  border-radius: 34px;
  background: #eef8fb;
  box-shadow: none;
  padding: 44px 28px 42px;
}

body.is-login-page .hero.welcome-hero::before {
  display: none;
}

body.is-login-page .welcome-hero .hero__content {
  gap: 22px;
}

body.is-login-page .welcome-hero .hero__eyebrow {
  border: 0;
  background: #fff4cf;
  color: #8c6500;
  letter-spacing: 0;
  padding: 11px 18px;
  font-size: 17px;
  box-shadow: 0 14px 26px -20px rgba(100, 128, 137, 0.5);
}

body.is-login-page .welcome-hero h1 {
  max-width: 650px;
  color: #0b2e63;
  font-family: "Trebuchet MS", "Nunito", "Microsoft YaHei", sans-serif;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.08;
  letter-spacing: 0;
}

body.is-login-page .welcome-hero p {
  max-width: 620px;
  color: #18283d;
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
  font-size: clamp(21px, 2.1vw, 29px);
  line-height: 1.62;
}

body.is-login-page .welcome-hero .hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}

body.is-login-page .welcome-hero .hero__actions .button[href="/teacher"] {
  display: none;
}

body.is-login-page .welcome-hero .button--dark {
  min-height: 58px;
  padding: 16px 28px;
  background: #103f7e;
  font-size: 18px;
  box-shadow: 0 18px 32px -20px rgba(16, 63, 126, 0.62);
}

body.is-login-page .welcome-hero .hero__art {
  position: relative;
  min-height: 470px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.welcome-hero__scene {
  position: relative;
  width: min(100%, 560px);
  min-height: 470px;
  margin: 0 auto;
}

.welcome-hero__book {
  position: absolute;
  right: 36px;
  top: 34px;
  width: 250px;
  transform: rotate(3deg);
}

.welcome-hero__book .textbook-display {
  width: 100%;
}

.welcome-hero__book .textbook-cover-image {
  width: 100%;
  border-width: 8px;
  border-color: #e0d6ae;
  box-shadow: 0 28px 48px -34px rgba(20, 44, 83, 0.48);
}

.welcome-hero__dog-wrap {
  position: absolute;
  left: 74px;
  bottom: 16px;
  width: 250px;
  min-height: 210px;
  display: grid;
  place-items: end center;
  border-radius: 42px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0 46%, rgba(200, 235, 216, 0.92) 47% 100%);
}

.welcome-hero__dog {
  width: 215px;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(30, 73, 88, 0.22));
}

body.is-login-page .hero__art img.welcome-hero__dog {
  width: 215px;
  height: auto;
}

.welcome-hero__mini {
  position: absolute;
  display: grid;
  gap: 8px;
  justify-items: center;
  border: 3px solid #ffffff;
  border-radius: 28px;
  background: #ffffff;
  padding: 12px 14px 10px;
  box-shadow: 0 20px 36px -24px rgba(32, 64, 92, 0.34);
}

.welcome-hero__mini .illustration-image-frame {
  width: 82px;
  height: 68px;
  aspect-ratio: auto;
}

.welcome-hero__mini .illustration-image {
  object-fit: contain;
}

.welcome-hero__mini span {
  color: #0b2e63;
  font-size: 16px;
  font-weight: 800;
}

.welcome-hero__mini--eye {
  left: 0;
  top: 78px;
  transform: rotate(-5deg);
}

.welcome-hero__mini--ear {
  right: 2px;
  bottom: 70px;
  transform: rotate(4deg);
}

.welcome-hero__word {
  position: absolute;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 16px 28px -20px rgba(23, 50, 78, 0.52);
}

.welcome-hero__word--one {
  left: 218px;
  top: 14px;
  background: #53c3bb;
  transform: rotate(-8deg);
}

.welcome-hero__word--two {
  right: 118px;
  bottom: 8px;
  background: #ff7f66;
  transform: rotate(7deg);
}

.welcome-hero__word--three {
  right: 20px;
  top: 210px;
  background: #ffc74f;
  transform: rotate(-11deg);
}

body.is-login-page #studentLoginPanel.student-entry {
  width: min(100%, 930px);
  margin: -22px auto 0;
  padding: 26px 30px;
  border: 0;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 28px 60px -42px rgba(23, 55, 85, 0.44);
}

body.is-login-page #studentLoginPanel.student-entry h2 {
  color: #0b2e63;
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: 0;
}

body.is-login-page #studentLoginPanel.student-entry p {
  color: #44556a;
  font-size: 17px;
}

body.is-login-page .student-login-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}

body.is-login-page .form-field span {
  color: #0b2e63;
  font-size: 15px;
}

body.is-login-page .form-field input {
  min-height: 58px;
  border: 2px solid #d9e6ef;
  border-radius: 20px;
  background: #fbfdff;
  color: #18283d;
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
}

body.is-login-page .form-field input:focus {
  border-color: #56b8f0;
  box-shadow: 0 0 0 5px rgba(86, 184, 240, 0.16);
}

body.is-login-page .student-login-form .button {
  min-height: 58px;
  padding: 14px 24px;
  border-radius: 20px;
  background: #103f7e;
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
  font-size: 17px;
}

.homepage-showcase {
  color: #142a44;
}

.audience-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.audience-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 230px;
  padding: 28px;
  border: 1px solid rgba(76, 111, 139, 0.13);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72)),
    #f8fcff;
  box-shadow: 0 22px 46px -36px rgba(22, 52, 83, 0.42);
}

.audience-card--teacher {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 253, 255, 0.78)),
    #e9f7ff;
}

.audience-card--student {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 229, 0.78)),
    #fff1bd;
}

.audience-card--parent {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(238, 250, 241, 0.78)),
    #e6f7ec;
}

.audience-card__tag,
.section-heading__label {
  width: fit-content;
  border-radius: 999px;
  background: #fff4cf;
  padding: 8px 14px;
  color: #906500;
  font-size: 15px;
  font-weight: 900;
}

.audience-card h2,
.learning-route h2,
.feature-showcase h2 {
  margin: 0;
  color: #0b2e63;
  font-family: "Trebuchet MS", "Nunito", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.audience-card h2 {
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.22;
}

.audience-card p {
  margin: 0;
  color: #2f4056;
  font-size: 18px;
  line-height: 1.62;
}

.section-heading {
  display: grid;
  gap: 14px;
  max-width: 840px;
}

.section-heading--center {
  max-width: 820px;
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.section-heading h2 {
  font-size: clamp(34px, 4.1vw, 52px);
  line-height: 1.18;
}

.section-heading p {
  margin: 0;
  color: #2f4056;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.72;
}

.learning-route {
  display: grid;
  gap: 26px;
  padding: 34px;
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(231, 248, 255, 0.92), rgba(255, 247, 221, 0.82) 52%, rgba(238, 250, 241, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.learning-route__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.route-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 13px;
  align-items: start;
  min-height: 188px;
  padding: 20px;
  border: 1px solid rgba(47, 91, 125, 0.13);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
}

.route-step span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #fff0b7;
  color: #9a6700;
  font-size: 22px;
  font-weight: 900;
}

.route-step h3 {
  align-self: center;
  margin: 0;
  color: #0b2e63;
  font-size: 24px;
  line-height: 1.2;
}

.route-step p {
  grid-column: 1 / -1;
  margin: 0;
  color: #33465d;
  font-size: 17px;
  line-height: 1.62;
}

.feature-showcase {
  display: grid;
  gap: 26px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.feature-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 238px;
  padding: 22px;
  border: 1px solid rgba(63, 91, 120, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 38%),
    #fffdf6;
  box-shadow: 0 18px 38px -34px rgba(22, 52, 83, 0.46);
}

.feature-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  border-radius: 18px;
  background: #54c3bb;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 900;
  box-shadow: 0 16px 25px -19px rgba(27, 62, 88, 0.44);
}

.feature-card--stroke .feature-card__icon,
.feature-card--image .feature-card__icon {
  background: #ffbf43;
  color: #6f4d00;
}

.feature-card--video .feature-card__icon,
.feature-card--teacher .feature-card__icon {
  background: #6bb7f0;
}

.feature-card--score .feature-card__icon,
.feature-card--speech .feature-card__icon {
  background: #ff7f66;
}

.feature-card--mistake .feature-card__icon {
  background: #9b8bea;
}

.feature-card h3 {
  margin: 0;
  color: #0b2e63;
  font-size: 23px;
  line-height: 1.24;
}

.feature-card p {
  margin: 0;
  color: #33465d;
  font-size: 17px;
  line-height: 1.62;
}

.program-intro {
  display: grid;
  gap: 54px;
  margin-top: 76px;
}

.program-story {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(300px, 0.78fr);
  gap: 48px;
  align-items: center;
  padding: 10px 28px;
}

.program-story--kids {
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 0.9fr);
}

.program-story__copy {
  display: grid;
  gap: 18px;
}

.program-story__label {
  width: fit-content;
  border-radius: 999px;
  background: #fff4cf;
  padding: 9px 15px;
  color: #906500;
  font-size: 16px;
  font-weight: 900;
}

.program-story h2 {
  margin: 0;
  color: #0b2e63;
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.18;
  letter-spacing: 0;
}

.program-story p,
.program-points {
  margin: 0;
  color: #18283d;
  font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.72;
}

.program-points {
  display: grid;
  gap: 10px;
  padding-left: 1.2em;
}

.program-story__visual {
  min-height: 330px;
  display: grid;
  place-items: center;
}

.memory-path {
  position: relative;
  width: min(100%, 420px);
  height: 310px;
  border-radius: 46px;
  background:
    linear-gradient(180deg, #dff5ff 0 56%, #dff2da 57% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.memory-path__line {
  position: absolute;
  left: 62px;
  right: 60px;
  top: 156px;
  height: 10px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, #ffc94d 0 26px, transparent 26px 44px);
}

.memory-path__tile {
  position: absolute;
  z-index: 2;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  border-radius: 25px;
  background: #fff5d6;
  color: #7a5300;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  box-shadow: 0 18px 32px -24px rgba(36, 67, 95, 0.42);
}

.memory-path__tile:nth-child(1) {
  left: 44px;
  top: 62px;
}

.memory-path__tile:nth-child(2) {
  left: 134px;
  top: 158px;
  background: #e6f8ff;
  color: #0d5f8f;
}

.memory-path__tile:nth-child(3) {
  right: 108px;
  top: 84px;
  background: #e7f8ee;
  color: #1f7449;
}

.memory-path__tile:nth-child(4) {
  right: 34px;
  top: 176px;
  background: #ffe8ef;
  color: #a7355c;
}

.kid-learning-scene {
  position: relative;
  width: min(100%, 430px);
  min-height: 330px;
}

.kid-learning-scene__photo {
  position: absolute;
  left: 62px;
  bottom: 20px;
  width: 255px;
  height: 210px;
  display: grid;
  place-items: end center;
  border-radius: 52px;
  background:
    linear-gradient(180deg, #dff5ff 0 46%, #d8f1d3 47% 100%);
}

.kid-learning-scene__photo img {
  width: 218px;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(30, 73, 88, 0.2));
}

.kid-learning-scene__chip {
  position: absolute;
  min-width: 86px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  border-radius: 999px;
  padding: 13px 18px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 16px 28px -20px rgba(23, 50, 78, 0.52);
}

.kid-learning-scene__chip--read {
  left: 18px;
  top: 52px;
  background: #53c3bb;
}

.kid-learning-scene__chip--choose {
  right: 16px;
  top: 92px;
  background: #ff7f66;
}

.kid-learning-scene__chip--speak {
  left: 42px;
  bottom: 18px;
  background: #ffc74f;
  color: #6f4d00;
}

.map-preview {
  position: relative;
  width: min(100%, 430px);
  height: 330px;
  border-radius: 46px;
  background:
    linear-gradient(180deg, #e6f8ff 0 58%, #e2f4d8 59% 100%);
  overflow: hidden;
}

.map-preview::before {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: 152px;
  height: 14px;
  border-radius: 999px;
  background: #ffd66b;
  transform: rotate(-7deg);
}

.map-preview__stop {
  position: absolute;
  z-index: 2;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 4px solid #ffffff;
  border-radius: 23px;
  background: #f3f7fa;
  color: #6d7d8e;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 18px 30px -24px rgba(37, 68, 92, 0.45);
}

.map-preview__stop:nth-child(1) {
  left: 46px;
  top: 92px;
}

.map-preview__stop:nth-child(2) {
  left: 146px;
  top: 168px;
}

.map-preview__stop:nth-child(3) {
  right: 126px;
  top: 104px;
}

.map-preview__stop:nth-child(4) {
  right: 42px;
  top: 178px;
}

.map-preview__stop.is-done {
  background: #dff7df;
  color: #21784c;
}

.map-preview__stop.is-now {
  background: #fff0b7;
  color: #8a6200;
}

.map-preview img {
  position: absolute;
  z-index: 3;
  left: 132px;
  top: 72px;
  width: 96px;
  height: auto;
  filter: drop-shadow(0 13px 17px rgba(30, 73, 88, 0.2));
}

@media (max-width: 980px) {
  body.is-login-page .hero.welcome-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 34px 24px;
  }

  body.is-login-page .welcome-hero .hero__art {
    min-height: 420px;
  }

  .welcome-hero__scene {
    min-height: 420px;
  }

  .program-story,
  .program-story--kids {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 4px 16px;
  }

  .audience-strip,
  .learning-route__steps,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-route {
    padding: 28px;
  }

  .program-story--kids .program-story__visual {
    order: 2;
  }
}

@media (max-width: 640px) {
  body.is-login-page {
    padding: 12px 10px 34px;
  }

  body.is-login-page .page-shell,
  body.is-login-page .hero.welcome-hero {
    width: auto;
    max-width: 100%;
  }

  body.is-login-page .hero.welcome-hero {
    display: grid;
    padding: 26px 16px 20px;
    border-radius: 26px;
  }

  body.is-login-page .welcome-hero h1 {
    font-size: clamp(36px, 12vw, 46px);
    word-break: normal;
  }

  body.is-login-page .welcome-hero p {
    font-size: 20px;
    word-break: normal;
    overflow-wrap: normal;
  }

  body.is-login-page .welcome-hero h1 .title-line {
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  body.is-login-page .welcome-hero .hero__actions {
    width: 100%;
  }

  body.is-login-page .welcome-hero .button--dark {
    width: 100%;
    justify-content: center;
  }

  body.is-login-page .welcome-hero .hero__art {
    min-height: 330px;
  }

  .welcome-hero__scene {
    min-height: 330px;
  }

  .welcome-hero__book {
    right: 14px;
    top: 28px;
    width: 150px;
  }

  .welcome-hero__dog-wrap {
    left: 8px;
    bottom: 14px;
    width: 190px;
    min-height: 170px;
  }

  .welcome-hero__dog {
    width: 150px;
  }

  body.is-login-page .hero__art img.welcome-hero__dog {
    width: 150px;
  }

  .welcome-hero__mini {
    padding: 8px;
    border-radius: 20px;
  }

  .welcome-hero__mini .illustration-image-frame {
    width: 56px;
    height: 46px;
  }

  .welcome-hero__mini span {
    font-size: 13px;
  }

  .welcome-hero__mini--eye {
    left: 2px;
    top: 78px;
  }

  .welcome-hero__mini--ear {
    right: 0;
    bottom: 30px;
  }

  .welcome-hero__word {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 24px;
  }

  .welcome-hero__word--one {
    left: 150px;
    top: 6px;
  }

  .welcome-hero__word--two {
    right: 96px;
    bottom: 4px;
  }

  .welcome-hero__word--three {
    right: 4px;
    top: 166px;
  }

  body.is-login-page #studentLoginPanel.student-entry {
    margin-top: 12px;
    padding: 20px;
    border-radius: 24px;
  }

  body.is-login-page #studentLoginPanel.student-entry .panel__header {
    margin-bottom: 16px;
  }

  body.is-login-page #studentLoginPanel.student-entry p {
    word-break: normal;
  }

  body.is-login-page .student-login-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.is-login-page .student-login-form .button,
  body.is-login-page .form-field input {
    min-height: 56px;
  }

  .program-intro {
    gap: 42px;
    margin-top: 46px;
  }

  .audience-strip,
  .learning-route__steps,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .audience-card,
  .learning-route,
  .feature-card {
    border-radius: 22px;
  }

  .audience-card,
  .feature-card {
    min-height: 0;
    padding: 20px;
  }

  .audience-card p,
  .route-step p,
  .feature-card p {
    font-size: 16px;
  }

  .section-heading h2 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .section-heading p {
    font-size: 18px;
  }

  .learning-route {
    padding: 20px;
  }

  .route-step {
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
  }

  .route-step h3 {
    font-size: 22px;
  }

  .program-story {
    padding: 0 4px;
  }

  .program-story h2 {
    font-size: clamp(30px, 10vw, 40px);
  }

  .program-story p,
  .program-points {
    font-size: 19px;
  }

  .program-story__visual {
    min-height: 260px;
  }

  .memory-path,
  .kid-learning-scene,
  .map-preview {
    width: 100%;
    max-width: 340px;
    min-height: 260px;
    height: 260px;
  }

  .memory-path__tile {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    font-size: 32px;
  }

  .memory-path__tile:nth-child(1) {
    left: 24px;
    top: 52px;
  }

  .memory-path__tile:nth-child(2) {
    left: 98px;
    top: 144px;
  }

  .memory-path__tile:nth-child(3) {
    right: 82px;
    top: 76px;
  }

  .memory-path__tile:nth-child(4) {
    right: 22px;
    top: 162px;
  }

  .kid-learning-scene__photo {
    left: 46px;
    bottom: 12px;
    width: 210px;
    height: 174px;
  }

  .kid-learning-scene__photo img {
    width: 170px;
  }

  .kid-learning-scene__chip {
    min-width: 72px;
    padding: 10px 14px;
    font-size: 18px;
  }

  .map-preview__stop {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }

  .map-preview img {
    left: 108px;
    top: 70px;
    width: 78px;
  }
}

body.is-student-home #lesson-map {
  --map-design-version: 2;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(133, 86, 39, 0.42);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 246, 196, 0.95), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(188, 232, 221, 0.45), transparent 34%),
    linear-gradient(135deg, #fff5d8 0%, #f6dfad 52%, #fcefc8 100%);
  box-shadow: 0 20px 46px rgba(107, 74, 36, 0.2);
}

body.is-student-home #lesson-map::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 1;
  border: 3px double rgba(126, 74, 28, 0.78);
  border-radius: 18px;
  pointer-events: none;
}

body.is-student-home #lesson-map .panel__header {
  position: relative;
  z-index: 2;
  padding-inline: 18px;
}

body.is-student-home #lesson-map h2 {
  color: #7b3f16;
  text-shadow: 0 2px 0 rgba(255, 239, 197, 0.9);
}

body.is-student-home #lesson-map .panel__header p {
  color: #744f2c;
}

.treasure-map {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 76px 34px;
  min-height: 1160px;
  margin-top: 26px;
  padding: 132px 44px 72px;
  overflow: hidden;
  border: 2px solid rgba(125, 76, 30, 0.45);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 16% 15%, rgba(255, 248, 218, 0.9) 0 8%, transparent 9%),
    radial-gradient(ellipse at 82% 28%, rgba(234, 248, 222, 0.72) 0 9%, transparent 10%),
    radial-gradient(ellipse at 18% 65%, rgba(236, 248, 230, 0.7) 0 10%, transparent 11%),
    linear-gradient(rgba(151, 103, 45, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 103, 45, 0.05) 1px, transparent 1px),
    linear-gradient(145deg, #fff1bd 0%, #f8e2ad 48%, #fff6cf 100%);
  background-size: auto, auto, auto, 24px 24px, 24px 24px, auto;
  box-shadow:
    inset 0 0 0 8px rgba(255, 246, 212, 0.55),
    inset 0 0 34px rgba(130, 83, 32, 0.16);
}

.treasure-map::before {
  content: "";
  position: absolute;
  inset: 86px 42px 48px;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='880' height='1040' viewBox='0 0 880 1040' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82 86 C278 42 515 56 732 108 C856 138 828 264 650 282 C430 304 228 266 150 362 C56 478 286 552 486 500 C772 426 828 604 628 684 C408 772 86 682 98 830 C108 956 464 970 792 884' fill='none' stroke='%2394714f' stroke-width='7' stroke-linecap='round' stroke-dasharray='1 24' opacity='.82'/%3E%3Cg fill='%23865b39' opacity='.86'%3E%3Cellipse cx='128' cy='80' rx='8' ry='15' transform='rotate(72 128 80)'/%3E%3Cellipse cx='188' cy='62' rx='8' ry='15' transform='rotate(82 188 62)'/%3E%3Cellipse cx='314' cy='63' rx='8' ry='15' transform='rotate(96 314 63)'/%3E%3Cellipse cx='484' cy='76' rx='8' ry='15' transform='rotate(102 484 76)'/%3E%3Cellipse cx='688' cy='126' rx='8' ry='15' transform='rotate(112 688 126)'/%3E%3Cellipse cx='756' cy='238' rx='8' ry='15' transform='rotate(182 756 238)'/%3E%3Cellipse cx='568' cy='286' rx='8' ry='15' transform='rotate(266 568 286)'/%3E%3Cellipse cx='336' cy='296' rx='8' ry='15' transform='rotate(264 336 296)'/%3E%3Cellipse cx='150' cy='378' rx='8' ry='15' transform='rotate(202 150 378)'/%3E%3Cellipse cx='118' cy='504' rx='8' ry='15' transform='rotate(138 118 504)'/%3E%3Cellipse cx='278' cy='546' rx='8' ry='15' transform='rotate(82 278 546)'/%3E%3Cellipse cx='514' cy='506' rx='8' ry='15' transform='rotate(76 514 506)'/%3E%3Cellipse cx='750' cy='560' rx='8' ry='15' transform='rotate(132 750 560)'/%3E%3Cellipse cx='668' cy='682' rx='8' ry='15' transform='rotate(224 668 682)'/%3E%3Cellipse cx='398' cy='746' rx='8' ry='15' transform='rotate(268 398 746)'/%3E%3Cellipse cx='116' cy='824' rx='8' ry='15' transform='rotate(178 116 824)'/%3E%3Cellipse cx='252' cy='930' rx='8' ry='15' transform='rotate(92 252 930)'/%3E%3Cellipse cx='548' cy='954' rx='8' ry='15' transform='rotate(88 548 954)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

.treasure-map::after {
  content: "";
  position: absolute;
  left: 32px;
  top: 32px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    conic-gradient(from 22deg, #8b5a34 0 12%, #fff4d1 12% 25%, #8b5a34 25% 37%, #fff4d1 37% 50%, #8b5a34 50% 62%, #fff4d1 62% 75%, #8b5a34 75% 87%, #fff4d1 87% 100%);
  box-shadow: inset 0 0 0 10px rgba(255, 247, 222, 0.9), 0 8px 18px rgba(101, 65, 29, 0.2);
  opacity: 0.36;
  z-index: 0;
}

.treasure-map .adventure-node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  min-height: 164px;
  margin-top: var(--map-rise, 0);
  padding: 16px 16px 18px;
  overflow: visible;
  border: 1px solid rgba(133, 86, 39, 0.22);
  border-radius: 28px 18px 30px 20px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.94), transparent 24%),
    linear-gradient(135deg, rgba(255, 251, 230, 0.96), var(--node-wash, rgba(224, 244, 232, 0.88)));
  box-shadow:
    0 16px 28px rgba(105, 75, 41, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82);
  transform: translateY(var(--map-rise, 0)) rotate(var(--node-tilt, -1deg));
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.treasure-map .adventure-node:hover {
  box-shadow:
    0 20px 34px rgba(105, 75, 41, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  transform: translateY(calc(var(--map-rise, 0) - 4px)) rotate(var(--node-tilt, -1deg));
}

.treasure-map .adventure-node:nth-child(4n + 1) {
  --node-tilt: -1.5deg;
  --node-wash: #e5f4e7;
}

.treasure-map .adventure-node:nth-child(4n + 2) {
  --map-rise: 18px;
  --node-tilt: 1.2deg;
  --node-wash: #eef6df;
}

.treasure-map .adventure-node:nth-child(4n + 3) {
  --map-rise: -14px;
  --node-tilt: -0.8deg;
  --node-wash: #e7f5f3;
}

.treasure-map .adventure-node:nth-child(4n) {
  --map-rise: 10px;
  --node-tilt: 1deg;
  --node-wash: #fff5d8;
}

.treasure-map .adventure-node__art {
  width: 88px;
  height: 88px;
  margin: 0 auto 10px;
  border-radius: 26px;
  background: linear-gradient(145deg, #fff8d9, #e9f7ea);
  box-shadow: inset 0 0 0 1px rgba(139, 91, 33, 0.18), 0 8px 16px rgba(123, 86, 38, 0.14);
}

.treasure-map .adventure-node__art img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(78, 51, 25, 0.16));
}

.treasure-map .adventure-node__content {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

.treasure-map .adventure-node__period {
  margin-bottom: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #7b5a35;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(97, 70, 33, 0.1);
}

.treasure-map .adventure-node__title,
.treasure-map .adventure-node strong {
  display: block;
  max-width: 100%;
  color: #102d49;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.26;
  letter-spacing: 0;
  text-align: center;
  writing-mode: horizontal-tb;
  word-break: keep-all;
}

.treasure-map .adventure-node__status {
  margin-top: 10px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #7a4519;
  color: #fff7dc;
  font-size: 12px;
  box-shadow: 0 5px 12px rgba(86, 48, 20, 0.18);
}

.treasure-map .adventure-node.current {
  border-color: rgba(171, 103, 26, 0.5);
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.98), transparent 25%),
    linear-gradient(135deg, #fff1b5, #ffe0a8 52%, #fff6d7);
  box-shadow:
    0 20px 34px rgba(154, 93, 23, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.treasure-map .adventure-node.current .adventure-node__dog {
  position: absolute;
  left: 18px;
  top: -38px;
  width: 76px;
  height: 76px;
  display: block;
  filter: drop-shadow(0 8px 10px rgba(93, 62, 28, 0.18));
}

.treasure-map .adventure-node.current .adventure-node__title,
.treasure-map .adventure-node.current strong {
  font-size: clamp(24px, 2.2vw, 31px);
}

.treasure-map .adventure-node.complete {
  border-color: rgba(110, 151, 84, 0.4);
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.96), transparent 25%),
    linear-gradient(135deg, #f4f7d6, #dff2d5);
}

.treasure-map .adventure-node.complete::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d8a12f;
  box-shadow: 0 0 0 5px rgba(255, 225, 128, 0.35);
}

@media (max-width: 900px) {
  .treasure-map {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 48px 22px;
    min-height: 0;
    padding: 112px 24px 48px;
  }

  .treasure-map::before {
    inset: 74px 18px 36px;
    opacity: 0.5;
  }
}

@media (max-width: 680px) {
  body.is-student-home #lesson-map::before {
    inset: 12px;
  }

  .treasure-map {
    grid-template-columns: 1fr;
    padding: 96px 18px 36px;
  }

  .treasure-map .adventure-node {
    transform: none;
  }

  .treasure-map .adventure-node:hover {
    transform: translateY(-3px);
  }
}

/* Final student-home map override: large number, larger art/title, no chain. */
html body.is-student-home .adventure-map {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 34px;
  overflow: hidden;
  border: 2px solid rgba(132, 85, 37, 0.36);
  border-radius: 30px;
  background:
    linear-gradient(rgba(138, 91, 38, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 91, 38, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 12% 14%, rgba(255, 237, 178, 0.9), transparent 34%),
    linear-gradient(135deg, #fff0bb 0%, #eef8dd 55%, #e6f7ff 100%);
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow: inset 0 0 0 8px rgba(255, 250, 225, 0.62);
}

html body.is-student-home .adventure-map::before,
html body.is-student-home .adventure-map::after,
html body.is-student-home .adventure-map .adventure-node::before,
html body.is-student-home .adventure-map .adventure-node::after {
  content: none;
  display: none;
}

html body.is-student-home .adventure-map .adventure-node,
html body.is-student-home .adventure-map .adventure-node:nth-child(2n),
html body.is-student-home .adventure-map .adventure-node:nth-child(3n),
html body.is-student-home .adventure-map .adventure-node:nth-child(4n),
html body.is-student-home .adventure-map .adventure-node:nth-child(5n) {
  --tilt: 0deg;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  grid-template-rows: 1fr auto;
  gap: 14px 16px;
  min-height: 228px;
  margin-top: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(143, 103, 54, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), transparent 30%),
    linear-gradient(145deg, #fff6d8 0%, #f4f9e8 54%, #eaf8fb 100%);
  box-shadow: none;
  transform: none;
}

html body.is-student-home .adventure-map .adventure-node:hover {
  border-color: rgba(245, 112, 57, 0.52);
  box-shadow: 0 10px 22px rgba(78, 56, 29, 0.12);
  transform: translateY(-2px);
}

html body.is-student-home .adventure-map .adventure-node.is-current,
html body.is-student-home .adventure-map .adventure-node.current {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), transparent 30%),
    linear-gradient(145deg, #ffe9a8 0%, #fff3ca 50%, #ecf8e4 100%);
}

html body.is-student-home .adventure-map .adventure-node__number {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ff6840;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(60px, 5.8vw, 86px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(255, 223, 145, 0.9);
  box-shadow: none;
}

html body.is-student-home .adventure-map .adventure-node__art {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: 142px;
  height: 142px;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

html body.is-student-home .adventure-map .adventure-node__art .illustration-image-frame,
html body.is-student-home .adventure-map .adventure-node__art img,
html body.is-student-home .adventure-map .adventure-node__art svg,
html body.is-student-home .adventure-map .adventure-node__art .illustration-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

html body.is-student-home .adventure-map .adventure-node__content {
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding-right: 150px;
  text-align: left;
}

html body.is-student-home .adventure-map .adventure-node__period {
  display: none;
}

html body.is-student-home .adventure-map .adventure-node__title,
html body.is-student-home .adventure-map .adventure-node strong {
  color: #0f2d49;
  font-size: clamp(32px, 2.8vw, 42px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  writing-mode: horizontal-tb;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

html body.is-student-home .adventure-map .adventure-node__status {
  align-self: flex-start;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #7a4519;
  color: #fff7dc;
  font-size: 13px;
  box-shadow: none;
}

html body.is-student-home .adventure-map .adventure-node__dog {
  left: auto;
  right: 20px;
  top: 18px;
  width: 48px;
  height: 48px;
}

@media (max-width: 1100px) {
  html body.is-student-home .adventure-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  html body.is-student-home .adventure-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px;
  }

  html body.is-student-home .adventure-map .adventure-node {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 64px minmax(108px, 1fr) auto auto;
    min-height: 246px;
    padding: 16px;
  }

  html body.is-student-home .adventure-map .adventure-node__art {
    width: min(82%, 150px);
    height: 116px;
  }

  html body.is-student-home .adventure-map .adventure-node__content {
    padding-right: 0;
  }
}

@media (max-width: 540px) {
  html body.is-student-home .adventure-map {
    grid-template-columns: 1fr;
  }

  html body.is-student-home .adventure-map .adventure-node {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 62px minmax(112px, 1fr) auto auto;
    min-height: 248px;
  }

  html body.is-student-home .adventure-map .adventure-node__art {
    width: min(82%, 154px);
    height: 118px;
  }

  html body.is-student-home .adventure-map .adventure-node__content {
    padding-right: 0;
  }
}


/* Lesson poster images supplied by the teacher. */
.lesson-hero.has-poster,
.lesson-hero-card.has-poster,
.lesson-detail-hero.has-poster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.lesson-hero-poster,
.lesson-hero-poster-card,
.lesson-poster-panel {
  min-width: 0;
  border-radius: 22px;
  background: #fffdf6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lesson-hero-poster img,
.lesson-hero-poster-card img,
.lesson-poster-panel img,
.lesson-poster-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
}
.lesson-map-card-title,
.lesson-card-title,
.treasure-card-title {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal;
  line-height: 1.25;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
}
@media (max-width: 900px) {
  .lesson-hero.has-poster,
  .lesson-hero-card.has-poster,
  .lesson-detail-hero.has-poster {
    grid-template-columns: 1fr;
  }
  .lesson-hero-poster img,
  .lesson-hero-poster-card img,
  .lesson-poster-panel img,
  .lesson-poster-image {
    max-height: 520px;
  }
}

/* codex treasure-map compact card polish */
:where([class*="treasure"], [class*="map"], [class*="lesson-map"]) :where([class*="route"], [class*="trail"], [class*="path"], [class*="compass"], [class*="wheel"], [class*="spinner"]) {
  display: none !important;
}
:where([class*="treasure"], [class*="map"], [class*="lesson-map"]) :where(a, button, article, li, div, span, h2, h3, p) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
:where([class*="treasure"], [class*="map"], [class*="lesson-map"]) :where([class*="lesson"], [class*="card"], [class*="tile"]) {
  align-items: center !important;
  justify-content: space-between !important;
}
:where([class*="treasure"], [class*="map"], [class*="lesson-map"]) img {
  max-width: 78% !important;
  max-height: 150px !important;
  object-fit: contain !important;
  border: 0 !important;
  box-shadow: none !important;
}
:where([class*="treasure"], [class*="map"], [class*="lesson-map"]) :where([class*="number"], [class*="index"], [class*="no"], [class*="order"]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ff6b3d !important;
}