.journey-home,
.journey-intro {
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 24px 0;
}
.journey-home .btn {
  margin-left: auto;
  white-space: nowrap;
}
.journey-mascot {
  font-size: 76px;
}
.journey-path {
  display: grid;
  gap: 22px;
  margin: 28px 0;
}
.journey-step {
  padding: 28px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  border-left: 5px solid #a7ead4;
}
.journey-step h2 {
  margin: 10px 0;
}
.journey-step p {
  margin: 10px 0;
  max-width: 650px;
}
.journey-number {
  display: grid;
  place-items: center;
  background: #6940b2;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  font-weight: 800;
}
.journey-symbol {
  font-size: 55px;
  margin-left: auto;
}
.theme-grid,
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.project-grid article {
  background: #f3effa;
  border-radius: 16px;
  padding: 22px;
}
.project-grid article > span {
  font-size: 32px;
}
.theme-grid .pad {
  padding: 24px;
}
.theme-grid p,
.resource-list p {
  margin: 12px 0;
}
.resource-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0;
}
.resource-list {
  display: grid;
  gap: 18px;
  margin: 22px 0;
}
.resource-list h3 {
  overflow-wrap: anywhere;
}
.resource-hash {
  overflow-wrap: anywhere;
  font-size: 11px;
}
.teaching-note {
  padding: 18px;
  background: #eef8f3;
  border-radius: 14px;
  margin: 18px 0;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.teaching-note summary {
  cursor: pointer;
  font-weight: 700;
  color: #453274;
}
.teaching-note p {
  margin: 10px 0;
}
.game-instruction {
  background: #f0eaf9;
  border-radius: 16px;
  padding: 16px;
  margin: 18px 0;
}
.game-instruction p {
  margin: 6px 0;
}
.memory-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.memory-card {
  border: 3px solid transparent;
  background: #6940b2;
  color: #fff;
  border-radius: 18px;
  min-height: 105px;
  padding: 14px;
  font-size: 24px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.memory-card.revealed {
  background: #e5ddf2;
  color: #342750;
}
.memory-card.paired {
  background: #c6f1df;
  color: #234337;
  opacity: 1;
}
.sort-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.sort-baskets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sort-baskets button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f8edc1;
  color: #3d3250;
  border: 2px dashed #c3a241;
  border-radius: 18px;
  font: inherit;
  cursor: pointer;
}
.sort-baskets span {
  font-size: 36px;
}
.counter-tray {
  min-height: 130px;
  border: 3px dashed #ad91cc;
  background: #f5f0fc;
  border-radius: 20px;
  padding: 22px;
  font-size: 27px;
  line-height: 1.8;
}
.counter-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}
.counter-controls output {
  font-size: 32px;
  min-width: 45px;
  text-align: center;
}
.number-path {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}
.number-path button {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid #ab91cf;
  background: #f2ecf9;
  color: #453365;
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}
.number-path button.selected {
  background: #a4e5ce;
  border-color: #218a66;
}
.resource-search {
  display: flex;
  gap: 12px;
  margin: 18px 0;
}
.resource-results article {
  padding: 18px;
  margin: 12px 0;
  background: #f4f0fa;
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 800px) {
  .theme-grid,
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .journey-symbol {
    display: none;
  }
  .journey-home {
    align-items: flex-start;
    flex-direction: column;
  }
  .journey-home .btn {
    margin-left: 0;
  }
  .journey-step {
    padding: 20px;
    gap: 12px;
  }
  .journey-mascot {
    font-size: 46px;
  }
  .resource-search {
    flex-direction: column;
  }
}
@media (max-width: 520px) {
  .theme-grid,
  .project-grid,
  .resource-summary {
    grid-template-columns: 1fr;
  }
  .journey-intro {
    align-items: flex-start;
  }
  .journey-step h2 {
    font-size: 22px;
  }
  .memory-card {
    font-size: 19px;
    min-height: 90px;
    padding: 8px;
  }
  .counter-controls {
    gap: 8px;
    flex-wrap: wrap;
  }
  .journey-number {
    width: 30px;
    height: 30px;
  }
  .sort-baskets {
    gap: 9px;
  }
  .journey-home .btn {
    white-space: normal;
  }
  .resource-list .pad {
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .memory-card {
    transition: none;
  }
}
.creative-workspace {
  margin: 24px 0;
}
.creative-workspace > p {
  margin: 14px 0;
}
.paint-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 20px 0;
}
.paint-color {
  width: 38px;
  height: 38px;
  border: 3px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.paint-color.selected {
  outline: 3px solid #39234e;
  outline-offset: 3px;
}
#drawing-board {
  width: 100%;
  height: auto;
  border: 2px solid #c9b6df;
  border-radius: 18px;
  touch-action: none;
  background: #fffdf8;
}
.rhythm-target,
.rhythm-answer {
  background: #f0eafa;
  padding: 24px;
  border-radius: 18px;
  margin: 20px 0;
  min-height: 70px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 38px;
}
.rhythm-pads {
  display: flex;
  gap: 18px;
  margin: 24px 0;
}
.rhythm-pads button {
  flex: 1;
  background: #c5efdf;
  border: 2px solid #5ab392;
  border-radius: 20px;
  padding: 25px 12px;
  font-size: 45px;
  cursor: pointer;
}
.rhythm-pads small {
  display: block;
  font-size: 16px;
  margin-top: 10px;
}
.puzzle-work {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  margin: 24px 0;
}
.picture-puzzle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 340px;
  max-width: 100%;
  gap: 7px;
}
.picture-puzzle button {
  padding: 0;
  border: 4px solid #d7c6ed;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.picture-puzzle button.selected {
  border-color: #6940b2;
}
.picture-puzzle svg {
  display: block;
  width: 100%;
  height: auto;
}
.puzzle-reference {
  width: 150px;
}
.puzzle-reference > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 12px;
}
.puzzle-reference svg {
  width: 100%;
  display: block;
}
.creative-workspace .button-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#creative-status {
  padding: 14px;
  background: #eef8f2;
  border-radius: 12px;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .puzzle-work {
    flex-direction: column;
  }
  .rhythm-pads {
    gap: 10px;
  }
  .rhythm-pads button {
    font-size: 32px;
    padding: 18px 8px;
  }
  .rhythm-target,
  .rhythm-answer {
    gap: 15px;
    font-size: 30px;
  }
}
.place-total,
.fraction-total,
.money-total {
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: #513080;
  margin: 20px 0;
  text-align: center;
}
.place-board {
  display: grid;
  grid-template-columns: repeat(var(--places), minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.place-board section {
  background: #f2edf9;
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  min-width: 0;
}
.place-board h3 {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.place-digit {
  display: block;
  font-size: 32px;
  font-weight: 800;
  margin: 12px 0;
}
.place-beads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 75px;
  margin: 12px auto;
}
.place-beads i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ddd2ee;
  border: 1px solid #ac96c9;
}
.place-beads i.filled {
  background: #42b48b;
  border-color: #288760;
}
.place-controls {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.place-controls button {
  font: inherit;
  font-size: 22px;
  min-width: 32px;
  min-height: 44px;
  border: 1px solid #ae94cf;
  border-radius: 9px;
  background: #fff;
  color: #55337e;
  cursor: pointer;
}
.fraction-whole {
  display: grid;
  grid-template-columns: repeat(var(--parts), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  border: 3px solid #7450a5;
  border-radius: 16px;
  overflow: hidden;
  max-width: 450px;
  height: 180px;
  margin: 24px auto;
  background: #fff;
}
.fraction-whole button {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #b8a3d2;
  background: #eee6f7;
  color: #77569c;
  font-size: 25px;
  cursor: pointer;
}
.fraction-whole button.shaded {
  background: #a4e7ce;
  color: #236f52;
}
.clock-workspace {
  display: flex;
  gap: 25px;
  align-items: center;
  margin: 24px 0;
}
.teaching-clock {
  width: 260px;
  max-width: 100%;
  flex-shrink: 0;
}
.teaching-clock text {
  font: 600 12px sans-serif;
  fill: #45305d;
}
.hour-hand {
  stroke: #4f2c7c;
  stroke-width: 8;
  stroke-linecap: round;
}
.minute-hand {
  stroke: #278d70;
  stroke-width: 4;
  stroke-linecap: round;
}
.clock-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  margin: 16px 0;
  padding: 0;
}
.clock-choices legend {
  font-weight: 700;
  margin-bottom: 9px;
}
.clock-choices button {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid #d1bfeb;
  border-radius: 12px;
  background: #f6f1fc;
  color: #4e3570;
  font: inherit;
  cursor: pointer;
}
.clock-choices button[aria-pressed="true"] {
  background: #c3efdc;
  border-color: #3aa87f;
}
.clock-digital {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #57377e;
  margin-top: 18px;
}
.money-bank {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.money-bank button {
  padding: 16px 20px;
  background: #f8edbd;
  border: 2px dashed #bb9b39;
  border-radius: 12px;
  color: #4e3c20;
  cursor: pointer;
}
.money-bank span {
  display: block;
  font-size: 11px;
  margin-bottom: 8px;
}
.money-bank strong {
  font-size: 20px;
}
.money-tray {
  min-height: 100px;
  padding: 18px;
  border: 2px dashed #b49ad2;
  background: #f4effb;
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.money-tray span {
  background: #c6efdd;
  padding: 10px;
  border-radius: 9px;
  color: #285f48;
  font-size: 13px;
}
.practice-chart {
  padding: 20px;
  background: #f3eef9;
  border-radius: 16px;
  margin: 22px 0;
}
.practice-chart figcaption {
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 20px;
}
.practice-chart > p {
  font-size: 12px;
  margin-top: 18px;
}
.chart-lab-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 15px;
  margin: 14px 0;
  align-items: center;
}
.chart-lab-row strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.chart-lab-amount {
  min-width: 0;
}
.chart-lab-amount > span:not(.chart-lab-bar) {
  font-size: 23px;
  color: #714bac;
  overflow-wrap: anywhere;
  letter-spacing: 3px;
}
.chart-lab-bar {
  display: block;
  background: #aa8bd2;
  color: #24183a;
  min-height: 30px;
  border-radius: 6px;
  padding: 5px;
  min-width: 25px;
  text-align: right;
}
.compass-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, 75px);
  gap: 12px;
  max-width: 390px;
  margin: 22px auto;
}
.compass-map button {
  border: 2px solid #b59ad7;
  background: #f0e9fa;
  color: #4e3376;
  border-radius: 15px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.compass-map button.selected {
  background: #bcebd6;
  border-color: #28956d;
}
.direction-north {
  grid-area: 1/2;
}
.direction-east {
  grid-area: 2/3;
}
.direction-south {
  grid-area: 3/2;
}
.direction-west {
  grid-area: 2/1;
}
.compass-centre {
  grid-area: 2/2;
  display: grid;
  place-items: center;
  font-size: 38px;
}
@media (max-width: 700px) {
  .clock-workspace {
    flex-direction: column;
    align-items: stretch;
  }
  .teaching-clock {
    align-self: center;
  }
  .place-board {
    gap: 7px;
  }
  .place-board h3 {
    font-size: 11px;
  }
  .place-controls button {
    min-width: 28px;
  }
  .chart-lab-row {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 8px;
  }
  .practice-chart {
    padding: 15px;
  }
  .compass-map {
    gap: 8px;
    grid-template-rows: repeat(3, 65px);
  }
  .compass-map button {
    font-size: 13px;
  }
  .money-bank button {
    padding: 13px;
  }
  .money-bank strong {
    font-size: 17px;
  }
}
.competency-guide {
  margin: 22px 0;
}
.competency-guide > p {
  margin: 12px 0;
}
.competency-guide details {
  margin-top: 20px;
}
.competency-guide summary {
  padding: 15px;
  background: #eee7f8;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}
.competency-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.competency-list article {
  padding: 20px;
  background: #f7f3fc;
  border-radius: 14px;
  overflow-wrap: anywhere;
}
.competency-list h3 {
  margin: 10px 0;
}
.competency-list p {
  margin: 12px 0;
  line-height: 1.6;
}
.competency-list small {
  font-size: 11px;
  color: #655871;
}
@media (max-width: 650px) {
  .competency-list {
    grid-template-columns: 1fr;
  }
}
.guide-planner {
  margin: 24px 0;
}
.guide-lesson-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0;
}
.guide-lesson-list article {
  background: #f6f1fc;
}
.guide-lesson-list h3 {
  margin: 12px 0;
}
.guide-lesson-list p {
  margin: 12px 0;
  line-height: 1.7;
}
.guide-lesson-list .button-wrap,
.teaching-plan .button-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.teaching-plan {
  margin: 24px 0;
}
.teaching-plan .section-title {
  margin-top: 0;
  gap: 12px;
  flex-wrap: wrap;
}
.teaching-plan > p {
  margin: 14px 0;
  line-height: 1.7;
}
.plan-activities > article {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #f0eaf9;
  padding: 18px;
  border-radius: 16px;
  margin: 15px 0;
}
.plan-activities article > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.plan-activities p {
  margin: 8px 0;
  line-height: 1.6;
}
.plan-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#guide-filter-form select {
  max-width: 230px;
}
#guide-query {
  flex: 1;
}
@media (max-width: 700px) {
  .guide-lesson-list {
    grid-template-columns: 1fr;
  }
  .plan-activities > article {
    flex-wrap: wrap;
    gap: 10px;
  }
  .plan-controls {
    width: 100%;
    justify-content: flex-end;
  }
  #guide-filter-form select {
    max-width: 100%;
  }
  .teaching-plan .pill {
    white-space: normal;
  }
}

.literacy-story,
.sentence-frame,
.literacy-pattern {
  background: #f2edff;
  border-radius: 18px;
  padding: 20px;
  margin: 16px 0;
  line-height: 1.8;
}
.literacy-story p {
  white-space: pre-line;
  font-size: 1.12rem;
}
.sentence-frame {
  font-size: 1.4rem;
  background: #e5f8ee;
}
.sentence-frame strong {
  display: inline-block;
  min-width: 3rem;
  border-bottom: 3px solid #7250b0;
  text-align: center;
}
.literacy-status {
  font-size: 0.88rem;
  color: #535167;
  line-height: 1.5;
}
.literacy-goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.literacy-goals article {
  border: 1px solid #e4deee;
  border-radius: 16px;
  padding: 18px;
}
.literacy-goals h3 {
  margin-top: 6px;
}