:root {
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:#29483d;
  background:#faf8f0;
  font-synthesis:none;
  --ink:#29483d;
  --muted:#627263;
  --green:#2f6d55;
  --line:#e4e7dc;
  --paper:#faf8f0;
  --white:#fffef9;
  --shadow:0 10px 28px #324c3610
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,a,input {
  font:inherit
}
button {
  cursor:pointer;
  border:0;
  color:inherit;
  -webkit-tap-highlight-color:transparent
}
button:disabled {
  cursor:default
}
button:focus-visible,a:focus-visible {
  outline:3px solid #226d99;
  outline-offset:5px
}
button {
  touch-action:manipulation
}
a {
  color:var(--green)
}
svg {
  display:block
}
h1,h2,h3,p {
  margin:0
}
button {
  transition:transform .18s,background .18s,box-shadow .18s
}
button:active:not(:disabled) {
  transform:translateY(2px)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  left:16px;
  top:-70px;
  z-index:50;
  padding:12px;
  background:white;
  border-radius:8px
}
.skip-link:focus {
  top:12px
}
.no-script {
  padding:40px
}
.ui-icon {
  width:22px;
  height:22px;
  flex-shrink:0
}
.site-header {
  height:94px;
  max-width:1240px;
  padding:0 32px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  font-size:23px;
  font-weight:850;
  letter-spacing:-1px;
  white-space:nowrap
}
.brand-light {
  font-weight:500;
  margin-left:3px
}
.site-header nav {
  display:flex;
  gap:36px;
  margin-left:48px
}
.nav-link {
  position:relative;
  background:none;
  font-size:14px;
  color:var(--muted);
  padding:18px 0
}
.nav-link.active {
  color:var(--ink);
  font-weight:650
}
.nav-link.active:after {
  content:"";
  position:absolute;
  bottom:6px;
  left:calc(50% - 3px);
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%
}
.header-tools {
  display:flex;
  align-items:center;
  gap:22px
}
.icon-button {
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-radius:50%
}
.icon-button:hover {
  background:#eaece1
}
.parent-link {
  display:flex;
  align-items:center;
  gap:8px;
  background:transparent;
  font-size:13px;
  color:#647169
}
.parent-link .ui-icon {
  width:19px
}
.eyebrow {
  font-size:9px;
  font-weight:750;
  letter-spacing:2.1px;
  color:#5f735d
}
.primary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:var(--green);
  color:#fffef5;
  min-height:52px;
  border-radius:12px;
  padding:14px 25px;
  font-size:15px;
  font-weight:650;
  box-shadow:0 4px 0 #255b47
}
.primary-button:hover {
  background:#255e48
}
.sprout-art {
  width:100%;
  height:100%
}
.item-art {
  width:100%;
  height:100%;
  max-width:160px;
  max-height:160px
}
.sage {
  --tint:#eaf0df;
  --accent:#466f4b;
  --halo:#d6e3bd;
  --card:#f0f4e9
}
.peach {
  --tint:#f6e7dd;
  --accent:#905c47;
  --halo:#f0cfb5;
  --card:#faf0e7
}
.sky {
  --tint:#e3eff0;
  --accent:#416f7e;
  --halo:#c7e1e0;
  --card:#ebf4f3
}
.butter {
  --tint:#f5efdb;
  --accent:#816734;
  --halo:#efdeab;
  --card:#faf5e4
}
.mini-star {
  font-size:18px;
  color:#c5a156;
  margin-left:5px
}
.storage-note {
  background:#fff0d6;
  color:#80623d;
  border-radius:10px;
  padding:12px 16px;
  font-size:12px;
  line-height:1.7;
  margin-bottom:15px
}
.game-main {
  max-width:990px;
  margin:auto;
  padding:18px 24px 50px
}
.game-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  font-weight:650;
  font-size:17px
}
.text-button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  padding:12px 0;
  min-height:44px;
  color:#687d6e;
  font-size:13px
}
.age-tag {
  font-size:11px;
  background:#e9eee1;
  padding:5px 10px;
  border-radius:12px;
  margin-left:8px;
  color:#769073;
  font-weight:500
}
.question-count {
  font-size:22px;
  color:var(--green)
}
.question-count small {
  font-size:14px;
  color:#96a08e
}
.step-progress {
  display:flex;
  gap:10px;
  margin:15px 0 24px
}
.step-progress span {
  flex:1;
  height:5px;
  border-radius:4px;
  background:#e4e8dc
}
.step-progress .done {
  background:#6e9969
}
.step-progress .current {
  background:#bacb9b
}
.puzzle-panel {
  background:var(--white);
  border-radius:24px;
  border:1px solid var(--line);
  padding:28px 42px 27px;
  box-shadow:0 8px 35px #3f4e2810
}
.question-heading {
  text-align:center;
  position:relative;
  margin-bottom:25px
}
.question-kicker {
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--accent)
}
.question-heading h1 {
  font-size:24px;
  line-height:1.65;
  max-width:680px;
  margin:10px auto 12px;
  outline:0
}
.read-button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  background:var(--tint);
  color:var(--accent);
  padding:8px 14px;
  border-radius:22px;
  min-height:44px
}
.read-button .ui-icon {
  width:17px
}
.answer-options {
  display:grid;
  gap:16px;
  max-width:760px;
  margin:20px auto 28px;
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.options-3 {
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:650px
}
.answer-card {
  border:2px solid #e9ecdf;
  border-radius:19px;
  background:#fffef9;
  min-height:168px;
  position:relative;
  padding:19px 12px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-shadow:0 4px 0 #e9ecdf
}
.answer-card:hover:not(:disabled) {
  border-color:#b7caa4;
  background:#f5f8ed;
  transform:translateY(-3px);
  box-shadow:0 6px 0 #dce5d1
}
.answer-card .item-art {
  width:120px;
  height:120px;
  max-width:100%
}
.answer-card .answer-label {
  font-size:13px;
  color:#65775f
}
.choice-number {
  position:absolute;
  top:9px;
  left:11px;
  font-size:10px;
  color:#65765b
}
.answer-card.is-correct {
  border-color:#83ab77;
  background:#f1f6e8;
  box-shadow:0 4px 0 #83ab77;
  opacity:1
}
.answer-card:disabled:not(.is-correct) {
  opacity:.5
}
.correct-check {
  position:absolute;
  top:8px;
  right:8px;
  background:#719e68;
  color:white;
  border-radius:50%;
  padding:4px
}
.correct-check .ui-icon {
  width:16px;
  height:16px
}
.is-wrong {
  animation:wiggle .35s;
  background:#fff1e7!important;
  border-color:#dfa686!important
}
.number-art {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:68px;
  line-height:1.2;
  font-weight:750;
  color:var(--accent,#3b6953);
  font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif
}
.count-scene {
  display:grid;
  grid-template-columns:repeat(var(--columns),minmax(0,1fr));
  gap:10px 20px;
  max-width:620px;
  margin:15px auto 22px;
  background:var(--tint);
  border-radius:22px;
  padding:20px 30px;
  justify-items:center
}
.count-scene>span {
  height:88px;
  max-width:88px;
  width:100%
}
.interaction-note {
  text-align:center;
  color:#65775b;
  font-size:12px;
  line-height:1.7;
  margin:7px 0
}
.count-scene+.interaction-note+.answer-options .answer-card,.sequence~.answer-options .answer-card {
  min-height:102px
}
.count-scene+.interaction-note+.answer-options .item-art,.sequence~.answer-options .item-art {
  width:76px;
  height:76px
}
.sequence {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:25px auto 32px;
  background:var(--tint);
  border-radius:18px;
  padding:20px 15px;
  max-width:790px
}
.sequence-item {
  position:relative;
  flex:1;
  max-width:105px;
  min-width:0;
  height:99px;
  border-radius:12px;
  background:#ffffff80;
  padding:7px 5px 15px;
  display:flex;
  align-items:center;
  justify-content:center
}
.sequence-item .item-art {
  width:75px;
  height:75px;
  max-width:100%
}
.sequence-item .number-art {
  font-size:42px
}
.sequence-item small {
  position:absolute;
  bottom:3px;
  font-size:9px;
  color:var(--accent);
  opacity:.6
}
.sequence-dot {
  color:#b7b99e;
  font-size:20px
}
.sequence-item.missing {
  border:2px dashed #b9bf97;
  background:transparent
}
.missing>span {
  font-size:49px;
  color:#9ca678
}
.puzzle-feedback {
  display:flex;
  align-items:center;
  gap:13px;
  background:#f4f5eb;
  border-radius:14px;
  padding:14px 20px;
  min-height:82px;
  margin:20px 0
}
.feedback-mascot {
  width:47px;
  height:53px;
  flex-shrink:0
}
.puzzle-feedback strong {
  font-size:14px
}
.puzzle-feedback p {
  font-size:12px;
  line-height:1.7;
  color:#5d7350;
  margin-top:5px
}
.puzzle-feedback.success {
  background:#eaf3df
}
.puzzle-feedback.retry {
  background:#fff1e2
}
.puzzle-feedback.retry p {
  color:#896040
}
.puzzle-feedback>.stars {
  margin-left:auto
}
.puzzle-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:56px
}
.secondary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  min-height:46px;
  border:1px solid #dce3cf;
  background:#f8f9f1;
  border-radius:10px;
  font-size:13px;
  color:#536d47
}
.secondary-button:disabled {
  opacity:.55
}
.gentle-note {
  font-size:11px;
  line-height:1.8;
  color:#637658
}
.hint-box {
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:12px;
  background:#fff3d9;
  padding:14px 18px;
  color:#82622f;
  font-size:13px;
  line-height:1.8
}
.stars {
  display:inline-flex;
  gap:3px;
  align-items:center
}
.star-art {
  width:27px;
  height:27px
}
.stars .empty {
  filter:grayscale(1);
  opacity:.2
}
.matching-board {
  display:flex;
  justify-content:center;
  gap:20px;
  max-width:650px;
  margin:20px auto 26px
}
.matching-column {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:13px
}
.pair-card {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#fffef9;
  border:2px solid #e4e9dc;
  border-radius:15px;
  min-height:97px;
  padding:7px 17px;
  box-shadow:0 3px 0 #e4e9dc
}
.pair-card .item-art {
  width:70px;
  height:70px
}
.pair-card>span {
  font-size:13px;
  min-width:40px
}
.pair-card .connector-dot {
  position:absolute;
  right:-7px;
  top:calc(50% - 6px);
  background:#e2e8d6;
  border:2px solid white;
  border-radius:50%;
  width:12px;
  height:12px
}
.matching-column:last-child .connector-dot {
  left:-7px;
  right:auto
}
.pair-card.is-selected {
  border-color:#729c67;
  background:#f0f5e6;
  box-shadow:0 3px 0 #729c67
}
.pair-card.is-matched {
  background:#eef4e6;
  border-color:#c1d3b4;
  opacity:.7
}
.pair-card.is-matched .ui-icon {
  position:absolute;
  right:8px;
  top:8px;
  width:16px;
  height:16px;
  color:#73985f
}
.pair-middle {
  display:flex;
  flex-direction:column;
  gap:13px;
  width:20px;
  justify-content:space-around;
  color:#c9d1bb
}
.pair-middle span {
  height:97px;
  display:flex;
  align-items:center;
  justify-content:center
}
.result-main {
  max-width:790px;
  padding:25px 24px 60px;
  margin:auto
}
.result-card {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--white);
  text-align:center;
  padding:32px 36px;
  box-shadow:var(--shadow)
}
.result-mascot {
  width:160px;
  height:174px;
  margin:16px auto 8px
}
.result-card h1 {
  font-size:27px;
  margin:12px 0
}
.result-card>p {
  font-size:14px;
  color:#657459;
  line-height:1.9
}
.result-stars {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#f6f0de;
  border-radius:12px;
  padding:14px 20px;
  width:max-content;
  margin:24px auto;
  color:#987d49
}
.result-stars>span {
  font-size:12px
}
.result-stars>strong {
  font-size:29px
}
.result-stars small {
  font-size:14px;
  font-weight:400;
  opacity:.7
}
.result-stars>.item-art {
  width:32px;
  height:32px
}
.result-rounds {
  display:flex;
  justify-content:center;
  gap:25px;
  margin:22px 0 30px
}
.result-rounds>div {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px
}
.result-rounds>div>span:first-child {
  font-size:11px;
  color:#647553
}
.result-rounds .star-art {
  width:22px;
  height:22px
}
.result-buttons {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:15px 0
}
.result-confetti {
  position:absolute;
  inset:0;
  pointer-events:none
}
.result-confetti i {
  position:absolute;
  top:75px;
  left:calc(5% + var(--i) * 8%);
  width:7px;
  height:12px;
  border-radius:2px;
  background:#ddb677;
  transform:rotate(calc(var(--i) * 38deg));
  animation:float 3s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * -.2s);
  opacity:.55
}
.result-confetti i:nth-child(3n) {
  background:#94b8a0;
  top:180px
}
.result-confetti i:nth-child(3n + 1) {
  background:#dca092;
  top:130px
}
.modal {
  width:calc(100% - 36px);
  max-width:550px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:25px 28px;
  background:var(--white);
  color:var(--ink);
  box-shadow:0 20px 70px #223c3540;
  max-height:85dvh;
  overflow:auto
}
.modal::backdrop {
  background:#24382a55;
  backdrop-filter:blur(4px)
}
.modal-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.modal-heading h2 {
  font-size:23px;
  line-height:1.6
}
.modal-heading .icon-button {
  flex-shrink:0
}
.modal-intro {
  font-size:13px;
  line-height:1.9;
  color:#607155;
  margin:12px 0 22px
}
.parent-note {
  font-size:13px;
  line-height:1.9;
  color:#6f7d65
}
.parent-note strong {
  display:block;
  color:#3f634d;
  margin:17px 0 5px
}
.parent-actions {
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  margin:24px 0 10px
}
.danger-link {
  background:none;
  color:#a37263;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px;
  min-height:44px
}
.danger-button {
  padding:13px 18px;
  min-height:46px;
  color:#fff;
  background:#ad705b;
  border-radius:10px;
  font-size:13px
}
.small-note {
  font-size:11px;
  line-height:1.9;
  color:#647456;
  margin:20px 0 12px
}
.progress-row {
  display:flex;
  align-items:center;
  gap:15px;
  padding:15px 0;
  border-bottom:1px solid var(--line)
}
.progress-row>span {
  width:52px;
  height:52px;
  background:#f1f3e8;
  border-radius:12px;
  padding:6px
}
.progress-row>div {
  flex:1
}
.progress-row small {
  display:block;
  color:#647456;
  font-size:11px;
  margin-top:6px
}
.progress-row strong {
  font-size:15px
}
.full-width {
  width:100%
}
.dialog-buttons {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:20px 0 5px
}
@keyframes wiggle {
  25% {
    transform:translateX(-5px)
  }
  75% {
    transform:translateX(5px)
  }
}
@keyframes float {
  to {
    translate:0 14px;
    rotate:15deg
  }
}
@media(min-width:1450px) {
}
@media(max-width:1240px) {
}
@media(max-width:900px) {
  .site-header nav {
    margin-left:0;
    gap:24px
  }
  .site-header {
    padding:0 24px;
    height:80px
  }
  .puzzle-panel {
    padding:25px 24px
  }
  .answer-card .item-art {
    width:100px;
    height:100px
  }
  .answer-card {
    min-height:144px
  }
  .question-heading h1 {
    font-size:22px
  }
}
@media(max-width:600px) {
  .site-header {
    padding:0 18px;
    height:72px;
    gap:10px
  }
  .brand {
    font-size:20px;
    gap:8px
  }
  .brand img {
    width:32px;
    height:32px
  }
  .site-header nav {
    display:none
  }
  .header-tools {
    gap:5px
  }
  .parent-link {
    padding:8px
  }
  .parent-link span {
    display:none
  }
  .parent-link .ui-icon {
    width:21px
  }
  .game-main {
    padding:6px 14px 28px
  }
  .game-topline {
    font-size:14px;
    gap:6px
  }
  .game-topline .text-button {
    font-size:0;
    gap:0;
    width:40px
  }
  .game-topline .text-button .ui-icon {
    width:23px;
    height:23px
  }
  .age-tag {
    font-size:9px;
    margin-left:5px;
    padding:4px 7px
  }
  .step-progress {
    margin:8px 0 17px;
    gap:7px
  }
  .question-count {
    font-size:19px
  }
  .puzzle-panel {
    padding:21px 15px 18px;
    border-radius:19px
  }
  .question-heading {
    margin-bottom:17px
  }
  .question-heading h1 {
    font-size:21px;
    line-height:1.6;
    margin:8px 0 12px
  }
  .question-kicker {
    font-size:9px
  }
  .answer-options {
    gap:12px;
    margin:20px 0 23px;
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .options-3 {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px
  }
  .answer-card {
    border-radius:14px;
    min-height:137px;
    padding:17px 7px 12px
  }
  .options-3 .answer-card {
    min-height:119px;
    padding-left:4px;
    padding-right:4px
  }
  .answer-card .item-art {
    width:97px;
    height:97px
  }
  .options-3 .item-art {
    height:77px;
    width:77px
  }
  .answer-card .answer-label {
    font-size:11px;
    line-height:1.7
  }
  .choice-number {
    font-size:9px;
    top:6px;
    left:7px
  }
  .correct-check {
    padding:2px;
    top:4px;
    right:4px
  }
  .correct-check .ui-icon {
    width:13px;
    height:13px
  }
  .count-scene {
    padding:18px 12px;
    gap:8px;
    max-width:100%;
    margin:14px auto
  }
  .count-scene>span {
    height:58px
  }
  .count-scene~.answer-options {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px
  }
  .count-scene~.options-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .count-scene+.interaction-note+.answer-options .answer-card {
    min-height:86px;
    padding:9px 5px
  }
  .count-scene+.interaction-note+.answer-options .number-art {
    font-size:42px;
    width:100%;
    height:58px
  }
  .sequence {
    gap:3px;
    padding:14px 8px;
    margin:18px 0 20px
  }
  .sequence-item {
    height:66px;
    border-radius:8px;
    padding:5px 2px 12px
  }
  .sequence-item .item-art {
    width:45px;
    height:45px
  }
  .sequence-item .number-art {
    font-size:27px
  }
  .sequence-item small {
    font-size:8px
  }
  .sequence-dot {
    font-size:13px
  }
  .missing>span {
    font-size:30px
  }
  .sequence~.answer-options {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px
  }
  .sequence~.options-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .sequence~.answer-options .answer-card {
    min-height:91px;
    padding:11px 3px 6px
  }
  .sequence~.answer-options .item-art {
    width:60px;
    height:60px
  }
  .sequence~.answer-options .number-art {
    font-size:36px
  }
  .puzzle-feedback {
    gap:9px;
    padding:12px;
    margin:18px 0 13px;
    flex-wrap:wrap
  }
  .feedback-mascot {
    width:36px;
    height:47px
  }
  .puzzle-feedback>div {
    flex:1;
    min-width:170px
  }
  .puzzle-feedback strong {
    font-size:13px
  }
  .puzzle-feedback p {
    font-size:11px
  }
  .puzzle-feedback>.stars {
    margin-left:45px
  }
  .puzzle-actions {
    flex-wrap:wrap;
    gap:12px
  }
  .puzzle-actions .primary-button {
    width:100%;
    min-height:50px
  }
  .puzzle-actions .gentle-note {
    font-size:10px
  }
  .puzzle-actions .secondary-button {
    font-size:12px;
    padding:11px 14px
  }
  .hint-box {
    font-size:12px;
    padding:12px
  }
  .matching-board {
    gap:8px;
    margin:16px 0 22px
  }
  .pair-middle {
    width:13px
  }
  .pair-card {
    padding:8px 5px;
    min-height:98px;
    flex-direction:column;
    gap:2px;
    border-radius:13px
  }
  .pair-card .item-art {
    width:56px;
    height:56px
  }
  .pair-card>span {
    font-size:10px;
    min-width:0
  }
  .pair-card.is-matched .ui-icon {
    top:5px;
    right:5px;
    width:13px
  }
  .result-main {
    padding:10px 14px 35px
  }
  .result-card {
    padding:25px 18px
  }
  .result-card .eyebrow {
    font-size:7px;
    letter-spacing:1.2px
  }
  .result-card h1 {
    font-size:23px;
    line-height:1.6
  }
  .result-card>p {
    font-size:12px
  }
  .result-rounds {
    gap:12px
  }
  .result-rounds .star-art {
    width:20px;
    height:20px
  }
  .result-mascot {
    width:138px;
    height:150px
  }
  .result-card .gentle-note {
    font-size:10px
  }
  .modal {
    padding:20px;
    max-height:88dvh
  }
  .modal-heading h2 {
    font-size:21px
  }
  .dialog-buttons {
    flex-direction:column
  }
  .dialog-buttons button {
    width:100%
  }
  .parent-actions {
    flex-direction:column;
    align-items:stretch
  }
  .parent-actions .danger-link {
    margin-top:2px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.growth-details {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0;
  background:none;
  font-size:inherit;
  font-weight:inherit;
  text-align:left
}
.growth-details .ui-icon {
  width:17px;
  height:17px;
  color:#637658
}
.brand {
  min-height:44px
}
.parent-link {
  min-width:44px;
  min-height:44px
}
.sequence-item small {
  opacity:1
}
.voice-note {
  font-size:11px!important;
  line-height:1.7!important;
  color:#82622f!important;
  margin:12px auto 0!important;
  max-width:430px;
  background:#fff3d9;
  border-radius:8px;
  padding:8px 12px
}
@media(max-width:360px) {
}
.loading-screen { min-height:70vh; display:grid; place-items:center; color:#627263; }
.account-link { display:flex; align-items:center; justify-content:center; gap:7px; max-width:158px; padding:9px 13px; min-height:44px; border:1px solid #d4dfca; border-radius:12px; background:#edf2e4; color:#42684d; font-size:12px; }
.account-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-link .ui-icon { width:17px; height:17px; }
.account-invite { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:12px; color:#627263; background:#f1f3e9; padding:12px 16px; border-radius:12px; margin:0 0 18px; line-height:1.7; }
.account-invite button { background:none; color:#2f6d55; min-height:40px; white-space:nowrap; font-size:12px; font-weight:650; }
.cloud-notice { padding:14px 18px; border-radius:12px; background:#fff1d8; color:#805c2e; font-size:12px; line-height:1.8; margin:0 0 18px; }
.cloud-notice button { background:#fffaf0; border:1px solid #d9c89b; border-radius:8px; padding:10px 13px; min-height:44px; margin:10px 8px 0 0; font-size:12px; }
.account-form { display:flex; flex-direction:column; gap:17px; }
.account-form label { display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:600; }
.account-form input:not([type="checkbox"]) { width:100%; font:inherit; font-size:16px; padding:13px 14px; border:1px solid #cdd8c5; border-radius:10px; background:#fffef9; color:#29483d; min-height:48px; }
.account-form input:focus { outline:3px solid #9dc2a7; outline-offset:2px; }
.account-form small { font-size:10px; line-height:1.7; font-weight:400; color:#66775d; }
.account-form .checkbox-row { flex-direction:row; align-items:center; gap:10px; font-size:12px; font-weight:400; line-height:1.7; }
.checkbox-row input { width:18px; height:18px; accent-color:#2f6d55; flex-shrink:0; }
.form-error { min-height:0; font-size:12px; color:#a34535; line-height:1.7; }
.form-error:empty { display:none; }
.account-form button:disabled { opacity:.6; cursor:wait; }
.account-actions { display:flex; flex-wrap:wrap; gap:12px; }
.auth-switch { display:flex; justify-content:center; align-items:center; gap:8px; font-size:12px; margin-top:18px; color:#657459; }
.auth-switch button { background:none; color:#2f6d55; font-weight:650; min-height:44px; padding:8px; }
@media(max-width:600px) {
  .header-tools { gap:5px; }
  .header-tools .parent-link { display:none; }
  .brand { font-size:18px; }
  .brand img { width:29px; height:29px; }
  .account-link { padding:8px 10px; max-width:80px; font-size:11px; gap:4px; }
  .account-link .ui-icon { display:none; }
  .account-invite { flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; font-size:11px; }
  .account-invite button { padding:4px 0; min-height:36px; font-size:11px; }
}
/* Short lessons and the new visual reasoning activities. */
.lesson-list { display:grid; gap:14px; }
.lesson-card { display:flex; align-items:center; gap:16px; width:100%; padding:20px; text-align:left; border:1px solid #d6dfcc; border-radius:17px; background:#fffef8; color:#335447; }
.lesson-card:hover,.lesson-card.is-active { background:#eef4e7; border-color:#81a48a; }
.lesson-number { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#e9efda; font-size:20px; flex-shrink:0; }
.lesson-copy { display:flex; flex:1; flex-direction:column; gap:7px; }
.lesson-copy strong { font-size:18px; }
.lesson-copy small { font-size:12px; line-height:1.7; color:#6e7a66; }
.lesson-copy>span { font-size:11px; color:#68866a; }
.lesson-status { display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.lesson-status svg { width:17px; height:17px; }
.board-rule { text-align:center; font-size:13px; line-height:1.8; color:#647861; margin:4px auto 16px; }
.activity-grid { --board-size:3; display:grid; grid-template-columns:repeat(var(--board-size),minmax(0,1fr)); gap:7px; padding:9px; max-width:360px; margin:0 auto 18px; background:#e9ede2; border-radius:18px; }
.activity-grid.grid-2 { max-width:256px; }
.activity-grid.grid-5 { max-width:360px; gap:5px; }
.activity-cell { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:#fffdf5; border:2px solid transparent; border-radius:11px; min-width:0; }
.activity-cell>.item-art { width:72%; height:72%; }
.activity-cell>small { position:absolute; bottom:2px; right:4px; color:#93a087; font-size:9px; }
.start-cell { border-color:#7ca58e; background:#e1efde; }
.cell-badge { position:absolute; top:0; left:0; font-size:9px; background:#4f8062; color:white; border-radius:7px 0 7px 0; padding:2px 5px; font-weight:500; }
.target-cell { border:2px dashed #548b6c; background:#e4f0da; }
.empty-cell { background:#f7f4e9; }
.grid-question { font-size:34px; font-weight:750; color:#518368; }
.grid-symbols { display:flex; justify-content:center; align-items:center; gap:7px; font-size:11px; color:#718168; margin:8px 0 16px; }
.grid-symbols .item-art { width:32px; height:32px; }
.direction-sequence { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:12px auto 22px; }
.direction-sequence>span { background:#eff2e8; border-radius:10px; padding:5px 12px; font-size:28px; color:#50756a; }
.clue-props { display:flex; justify-content:center; gap:20px; margin:16px auto; }
.clue-props>span { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; color:#78836c; }
.clue-props .item-art { width:48px; height:48px; }
.clue-list { max-width:520px; margin:18px auto 26px; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:9px; counter-reset:clue; }
.clue-list li { counter-increment:clue; display:flex; align-items:center; gap:8px; padding:12px; background:#faf2df; border-radius:10px; font-size:13px; line-height:1.7; }
.clue-list li:before { content:counter(clue); display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#ead7ae; color:#80643a; font-size:12px; flex-shrink:0; }
.quantity-scene { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin:15px auto 26px; }
.quantity-group { width:148px; padding:12px; background:#f5f3e7; border-radius:15px; }
.quantity-group>strong { display:block; text-align:center; font-size:12px; color:#718060; margin-bottom:8px; }
.quantity-items { display:grid; grid-template-columns:repeat(4,1fr); }
.quantity-items .item-art { width:100%; height:auto; aspect-ratio:1; }
.quantity-operator { font-size:27px; color:#8a957d; }
.route-editor { max-width:540px; margin:18px auto; padding:18px; border-radius:16px; background:#f3f5ea; }
.route-caption { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#4c715a; }
.route-caption>span { font-size:11px; color:#77886a; }
.route-problem { margin:12px 0 0; font-size:12px; line-height:1.7; color:#a46d42; }
.wall-cell { background:#e1e3d9; }
.goal-cell { background:#fff0c7; border-color:#e4c678; }
.visited-cell { background:#e0eddb; }
.path-dot { color:#ccd4c0; font-size:24px; }
@media(max-width:600px) {
 .lesson-card { gap:10px; padding:16px 12px; }
 .lesson-number { width:34px; height:38px; font-size:17px; }
 .lesson-copy strong { font-size:16px; }
 .lesson-copy small { font-size:11px; }
 .lesson-status { font-size:11px; }
 .board-rule { font-size:11px; }
 .activity-grid { max-width:290px; padding:6px; gap:5px; }
 .activity-grid.grid-5 { max-width:305px; }
 .activity-cell { border-radius:8px; }
 .activity-cell>small { font-size:8px; }
 .clue-list { gap:6px; margin:14px auto 20px; }
 .clue-list li { padding:9px 7px; font-size:11px; gap:5px; }
 .clue-list li:before { width:19px; height:19px; font-size:10px; }
 .quantity-scene { gap:5px; }
 .quantity-group { width:84px; padding:9px 6px; }
 .quantity-group>strong { font-size:10px; }
 .quantity-items { grid-template-columns:repeat(3,1fr); }
 .quantity-operator { font-size:20px; }
 .route-editor { padding:14px 12px; }
 .result-buttons { flex-wrap:wrap; }
}
.options-2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:440px; margin-left:auto; margin-right:auto; }
/* Hands-on activities share generous touch targets and a click-only alternative. */
.centered { text-align:center; }
.token-shelf,.piece-shelf,.balance-inventory { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; min-height:74px; padding:16px; margin:12px auto 20px; border-radius:16px; background:#f4f3e8; }
.sorting-token,.object-token,.piece-token { min-width:64px; min-height:64px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; padding:7px; background:#fffef8; border:2px solid #e1e5d7; border-radius:13px; }
.sorting-token .token-art,.object-token .item-art { width:54px; height:54px; }
.object-token small,.piece-token small { font-size:10px; line-height:1.6; }
[data-drag-kind] { touch-action:none; user-select:none; -webkit-user-select:none; }
.drag-ghost { position:fixed!important; pointer-events:none!important; z-index:1000!important; width:78px!important; height:78px!important; opacity:.9; box-shadow:0 10px 30px #31513b45; margin:0!important; transform:scale(1.05); }
.is-selected { outline:3px solid #548a69; outline-offset:3px; }
.needs-change { border-color:#d89b64; background:#fff1d8; }
.sorting-zones { max-width:680px; margin:20px auto; display:grid; gap:12px; }
.partition-zones { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
.sorting-zone { border:2px dashed #afc5ad; border-radius:20px; background:#edf4e5; padding:10px; min-height:155px; }
.zone-label { background:transparent; display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:10px 4px; min-height:44px; font-size:13px; font-weight:650; }
.rule-dot { display:inline-block; width:14px; height:14px; border-radius:50%; }
.zone-items { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:8px; min-height:72px; }
.zone-drop { min-width:44px; min-height:50px; border-radius:10px; border:1px dashed #bfd0b4; color:#92a684; background:#ffffff55; font-size:25px; }
.venn-zones { grid-template-columns:1fr 1fr 1fr; gap:0; }
.venn-zones .zone-left { border-radius:70px 0 0 70px; background:#f4e0d7; border-color:#d5ac9c; border-right:0; }
.venn-zones .zone-both { border-radius:15px; background:#e6dfe9; border-color:#c3aecb; z-index:1; }
.venn-zones .zone-right { border-radius:0 70px 70px 0; background:#dcecef; border-color:#9dc2c8; border-left:0; }
.venn-zones .zone-outside { grid-column:1/-1; border-radius:14px; min-height:110px; margin-top:14px; background:#f4f1e8; border-color:#d1cab5; }
.shelf-empty { font-size:12px; color:#849578; }
.visual-demo { display:flex; align-items:center; justify-content:center; gap:15px; padding:15px; border:2px dashed #cbb987; background:#fff4d8; border-radius:14px; margin:20px auto; }
.visual-demo svg { width:52px; height:52px; }
.visual-demo small { font-size:10px; color:#92784f; }
.hint-focus { outline:3px dashed #d5aa53!important; outline-offset:4px; }
.activity-check { display:flex; margin:22px auto 8px; }
.activity-message { text-align:center; padding:12px; color:#966238; background:#fff0d4; border-radius:10px; font-size:13px; line-height:1.8; }
.assembly-board { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); width:min(100%,440px); gap:3px; padding:10px; margin:20px auto; background:#f1f0e7; border-radius:17px; }
.assembly-cell { position:relative; aspect-ratio:1; min-height:40px; padding:0; border-radius:5px; background:#e5eadd; border:1px solid #c8d7bc; }
.assembly-cell.off-outline { background:#f8f6ec; border:1px dotted #dcdccc; }
.assembly-cell.occupied { background:var(--piece-color); border-color:#ffffff66; }
.assembly-cell.demo-cell { outline:3px dashed #766937; outline-offset:-4px; }
.piece-token { width:105px; height:108px; }
.piece-token .piece-art { width:75px; height:74px; }
.piece-token.is-placed { background:#e8efdf; }
.assembly-tools { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:14px auto; }
.assembly-tools button { font-size:12px; min-height:44px; }
.balance-clues { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin:20px auto 10px; }
.balance-equation { display:flex; align-items:center; gap:10px; border:1px solid #e1dfca; border-radius:14px; padding:10px 15px; background:#faf4e4; }
.balance-equation span { display:flex; align-items:center; flex-wrap:wrap; max-width:180px; }
.balance-equation .item-art { width:32px; height:32px; }
.balance-equation b { color:#9c9875; font-size:22px; }
.balance-machine { position:relative; max-width:520px; height:265px; margin:30px auto 5px; }
.balance-beam { position:absolute; top:92px; left:12%; width:76%; height:9px; border-radius:9px; background:#7a9d7c; transform:rotate(var(--tilt)); transition:transform .35s ease; z-index:2; }
.scale-stand { position:absolute; left:calc(50% - 12px); top:74px; width:24px; height:172px; border-radius:12px; background:#b8c6a1; }
.scale-stand:after { content:''; position:absolute; bottom:0; width:150px; height:15px; border-radius:12px; left:-63px; background:#a5b68d; }
.scale-pan { position:absolute; top:116px; width:43%; min-height:83px; border-radius:0 0 50% 50%; border-bottom:8px solid #dfb875; background:#fff7dc; padding:8px 8px 14px; transition:transform .35s ease; z-index:3; }
.scale-pan>div { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; min-height:55px; }
.fixed-pan { left:0; }
.editable-pan { right:0; border-style:dashed; }
.fixed-pan .item-art { width:43px; height:43px; }
.pan-label { position:absolute; top:-27px; left:0; width:100%; text-align:center; font-size:11px; color:#788664; }
.pan-item { width:44px; height:44px; background:transparent; padding:2px; }
.pan-item svg { width:100%; height:100%; }
.pan-placeholder { font-size:34px; color:#d8c89e; }
.balance-status { text-align:center; font-size:15px; font-weight:600; color:#65816a; }
.cube-scene { display:block; width:min(100%,380px); max-height:340px; margin:15px auto 25px; }
.footprint-art { display:block; width:130px; max-width:100%; height:130px; }
.memory-phase { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:14px; line-height:1.7; color:#54735b; margin:16px 0; }
.memory-phase span { font-size:10px; color:#819374; }
.memory-cards,.memory-scene { display:grid; grid-template-columns:repeat(var(--memory-columns),minmax(0,1fr)); gap:10px; width:min(100%,470px); margin:18px auto; }
.memory-card,.memory-slot { position:relative; display:grid; place-items:center; aspect-ratio:1; min-height:48px; border:2px solid #a6bea1; border-radius:14px; padding:10px; background:#7fa78d; color:#fff7d6; font-size:30px; }
.memory-card svg,.memory-slot svg { width:85%; height:85%; }
.memory-card.face-up,.memory-slot { background:#fffaf0; }
.memory-card.is-matched { background:#e4efda; border-color:#9dbf82; }
.memory-card small,.memory-slot small { position:absolute; bottom:3px; right:6px; font-size:10px; color:#6d8669; }
.memory-slot { border-style:dashed; color:#aac396; }
.remember-sequence,.recall-order { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin:25px auto; }
.remember-sequence>div,.recall-order>div { position:relative; display:grid; place-items:center; width:80px; height:88px; background:#f4f1de; border-radius:13px; padding:8px; }
.remember-sequence svg,.recall-order svg { width:60px; height:60px; }
.remember-sequence small,.recall-order small { position:absolute; bottom:-20px; color:#869774; font-size:11px; }
.recall-order span { color:#a2b691; font-size:27px; }
.memory-pulse { outline:4px solid #e0b76a; transform:translateY(-5px); transition:transform .15s; }
.memory-ready,.demo-play { display:flex; margin:28px auto 14px; }
.memory-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px; }
@media(max-width:600px){
 .token-shelf,.piece-shelf { gap:8px; padding:12px 8px; }
 .sorting-token,.object-token { min-width:54px; min-height:54px; padding:5px; }
 .sorting-token .token-art,.object-token .item-art { width:42px; height:42px; }
 .partition-zones { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .venn-zones .sorting-zone { padding:7px 4px; }
 .zone-label { font-size:10px; flex-wrap:wrap; line-height:1.6; }
 .zone-items { gap:5px; }
 .venn-zones .sorting-token { min-width:47px; min-height:47px; padding:3px; }
 .venn-zones .token-art { width:36px; height:36px; }
 .visual-demo { gap:7px; font-size:12px; }
 .visual-demo small { display:none; }
 .assembly-board { gap:2px; padding:6px; }
 .assembly-cell { min-height:34px; }
 .piece-token { width:77px; height:89px; padding:6px; }
 .piece-token .piece-art { width:61px; height:60px; }
 .assembly-tools { gap:8px; }
 .assembly-tools .secondary-button { padding:11px; }
 .balance-machine { height:245px; }
 .balance-equation { padding:8px; gap:6px; }
 .balance-equation .item-art { width:27px; height:27px; }
 .balance-equation span { max-width:120px; }
 .scale-pan { width:44%; padding:6px 3px 12px; }
 .fixed-pan .item-art { width:37px; height:37px; }
 .memory-cards,.memory-scene { gap:7px; }
 .memory-card,.memory-slot { padding:5px; border-radius:10px; }
 .remember-sequence>div,.recall-order>div { width:60px; height:66px; }
 .remember-sequence svg,.recall-order svg { width:45px; height:45px; }
}
.zone-label { flex-wrap:wrap; }
.zone-symbol { width:30px; height:30px; flex-shrink:0; }
.zone-symbol-pair { display:inline-flex; align-items:center; gap:2px; }
.zone-symbol-pair .zone-symbol { width:24px; height:24px; }
.zone-symbol-none { font-size:28px; color:#9b9a84; line-height:1; }
.program-workspace{display:grid;grid-template-columns:minmax(250px,1fr) minmax(310px,1fr);gap:28px;align-items:start;margin-top:15px}
.program-stage{position:sticky;top:14px}
.program-stage .activity-grid{max-width:380px}
.program-editor{padding:18px;background:#f3f4e7;border-radius:16px}
.program-title{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-bottom:14px}
.program-title>span{font-size:11px;color:#7f906f}
.treasure-list{display:flex;justify-content:center;align-items:center;gap:14px;margin:12px 0}
.treasure-list>span{display:flex;align-items:center;gap:5px;font-size:11px;color:#889875}
.treasure-list svg{width:30px;height:30px}
.treasure-list .collected{color:#3b824e;font-weight:650}
.execution-message{text-align:center;font-size:12px;line-height:1.8;padding:12px;background:#fff0cf;border-radius:10px}
@media(max-width:760px){.program-workspace{grid-template-columns:1fr;gap:15px}.program-stage{position:static}.program-editor{padding:14px}.program-stage .activity-grid{max-width:300px}}

/* Concise explanations stay beside the operation they describe. */
.anchor-guide,.edit-budget-help{max-width:520px;margin:12px auto;line-height:1.7}
.anchor-guide summary,.edit-budget-help summary{cursor:pointer;min-height:44px;display:list-item;padding:10px}
.anchor-example{display:flex;align-items:center;gap:14px;padding:8px 12px}
.anchor-example svg{width:105px;flex-shrink:0}
.anchor-example p{margin:0}
.run-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.run-choices>div{padding:12px;background:#fffaf0;border-radius:10px}
.run-choices p{margin:6px 0;overflow-wrap:anywhere}
.lesson-empty .secondary-button{margin:6px}
@media(max-width:500px){.run-choices{grid-template-columns:1fr}.anchor-example{gap:8px;padding:4px}.anchor-example svg{width:80px}}
.chain-model{display:grid;grid-template-columns:minmax(60px,1fr) repeat(2,minmax(90px,1fr)) minmax(120px,1.5fr);align-items:center;gap:10px}
.chain-change{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:#f2f3e7;border-radius:12px}.chain-change small{color:#7b836c}.chain-change>span{font-size:23px}.chain-result{text-align:center}
.equal-parts .model-parts{margin:14px 0;align-items:center}.reserved-fruit{padding:12px;border:2px dashed #bcba99;border-radius:12px;margin:16px 0;text-align:center;background:#faf4df}
.historical-progress{border-top:1px dashed #ccd6bd;margin:20px 0;padding-top:16px;font-size:13px;line-height:1.8}.historical-progress p{color:#78826d}
@media(max-width:600px){.chain-model{grid-template-columns:1fr 1fr;gap:8px}.chain-result{grid-column:2}.chain-change{min-height:95px}.chain-model .model-unknown{min-height:95px}}
@media(max-width:600px){.chain-model{display:flex;flex-direction:column}.chain-model>div{width:100%}.chain-change{flex-direction:row;justify-content:center;min-height:60px}.chain-change>span{transform:rotate(90deg)}.chain-model .model-unknown{min-height:65px}}
.picture-gap{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr);gap:8px;align-items:center;max-width:580px;margin:18px auto;padding:14px;background:#f3f4e8;border-radius:16px}
.gap-scene{text-align:center;min-width:0}.gap-scene .event-art{width:100%;max-width:140px;height:auto}.gap-scene small{display:block;font-size:12px;line-height:1.5;margin-top:5px}.gap-middle>b{display:grid;place-items:center;aspect-ratio:1;font-size:42px;color:#8baa72;border:2px dashed #c6d4b5;border-radius:12px}.picture-gap>span{font-size:18px;color:#84906c}
@media(max-width:600px){.picture-gap{gap:4px;padding:9px;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr)}.gap-scene small{font-size:10px}.picture-gap>span{font-size:14px}}
.pair-source.has-source-label{height:auto;min-height:70px;display:flex;flex-direction:column;gap:2px}.pair-source.has-source-label small{font-size:11px;color:#77836a;line-height:1.4}
.answer-card .event-art{width:min(100%,140px);height:auto}.pair-source.has-source-label{align-items:center}