:root {
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #334c40;
  background: #f7f5eb;
  --leaf: #54785c;
  --leaf-light: #e9eddf;
  --border: #dedfd2;
  --muted: #606f62;
  --rail: #f4f2e8;
  --white: #fffef9;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, a { touch-action: manipulation; }
:where(button, a[href], summary) { -webkit-tap-highlight-color: transparent; }
:where(button, a[href], summary):active:not(:where(:disabled, [aria-disabled="true"], .parent-hold)) {
  filter: brightness(.94);
}
button {
  min-width: 44px;
  min-height: 44px;
  padding: .45rem 1rem;
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  cursor: pointer;
}
button:focus-visible, a:focus-visible { outline: 3px solid #a47935; outline-offset: 4px; }
button:disabled { cursor: default; }
.garden-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(18px, 4vw, 36px);
  background: var(--rail);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: inherit;
  text-decoration: none;
}
.brand img { flex: none; }
.brand strong { display: block; font-size: 18px; letter-spacing: .5px; white-space: nowrap; }
.brand small { display: block; color: var(--muted); font: 10px Georgia, serif; letter-spacing: 2px; }
.garden-nav { display: flex; gap: 6px; }
.garden-nav a, .garden-parent-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: 9px;
  padding: .55rem .85rem;
  border-radius: .85rem;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.garden-nav a:hover, .garden-parent-link:hover, .garden-parent-link[aria-current] { background: var(--leaf-light); color: #334c40; }
.garden-nav a[aria-current] { background: #386c59; color: white; }
.garden-nav-icon { flex: none; width: 1.25rem; height: 1.25rem; }
.garden-rail-end { text-align: center; }
.garden-motto { display: none; }
.garden-sprout { display: none; position: relative; width: 76px; height: 79px; margin-inline: auto; }
.garden-sprout span, .garden-sprout i, .garden-sprout b, .garden-sprout::after { position: absolute; }
.garden-sprout span { bottom: 0; left: 18px; width: 40px; height: 29px; background: #e2c29f; border-radius: 4px 4px 13px 13px; }
.garden-sprout::after { content: ''; bottom: 24px; left: 36px; width: 3px; height: 44px; background: #8fa585; }
.garden-sprout i, .garden-sprout b { width: 27px; height: 16px; border-radius: 25px 0; background: #a7bb9b; }
.garden-sprout i { left: 12px; bottom: 47px; transform: rotate(32deg); }
.garden-sprout b { left: 37px; bottom: 61px; transform: rotate(-19deg); background: #bdcaa7; }
.garden {
  width: min(100%, 1300px);
  margin-inline: auto;
  padding: clamp(18px, 4vw, 36px);
}
.garden-page-header, .game-shelf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2.3vw, 1.6rem);
}
.garden-page-kicker, .garden-page-note { margin: 0; color: var(--muted); font-size: .9rem; }
.garden-page-kicker { font-weight: 750; letter-spacing: .12em; }
.garden-page-heading .garden-page-kicker {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .15em;
}
.garden-page-heading .garden-page-kicker::before {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: #92a68c;
}
.garden-page-heading > :is(h1, h2) {
  margin: .5rem 0 0;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  line-height: 1.3;
  letter-spacing: .025em;
}
.garden-page-note { white-space: nowrap; }
.garden-page-note span { margin-inline-end: .3rem; color: var(--leaf); }
.today-card {
  --today-radius: 24px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(30%, 284px);
  align-items: center;
  gap: clamp(.75rem, 3vw, 1.75rem);
  margin-bottom: .75rem;
  min-height: clamp(12.25rem, 18vw, 14.25rem);
  padding: clamp(1rem, 3vw, 1.65rem);
  border: 1px solid #d9dfc9;
  border-radius: var(--today-radius);
  background: #ebefdf;
}
.garden-feature-title { margin: 0; font-size: clamp(1.25rem, 2.35vw, 1.625rem); line-height: 1.3; }
h1 {
  margin: .3em 0;
  font-size: clamp(2rem, 4vw, 2.7rem);
  letter-spacing: .04em;
  line-height: 1.2;
}
.today-card h2 { margin: 0; color: var(--muted); font-size: .95rem; }
#today-lesson { margin: .25rem 0; font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; }
#today-detail { margin: 0; color: var(--muted); }
.today-action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: .2rem;
  color: #345c49;
  font-weight: 700;
  text-decoration: none;
}
.today-action svg { width: 1.1rem; height: 1.1rem; flex: none; }
.today-action::after { content: ''; position: absolute; inset: 0; border-radius: var(--today-radius); }
.today-action:active { filter: none; }
.today-card:active { background: #e5ebd8; }
.today-action:focus-visible { outline: none; }
.today-action:focus-visible::after { outline: 3px solid #a47935; outline-offset: 4px; }
@media (hover: hover) {
  .today-card:hover { border-color: #9cae91; }
  .today-card:hover .today-action-label { text-decoration: underline; text-underline-offset: .2em; }
}
.garden-text-link { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: var(--leaf); font-weight: 650; }
.today-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 4;
  object-fit: cover;
  justify-self: end;
}
.game-shelf { padding: clamp(.85rem, 2.6vw, 1.65rem); border: 1px solid var(--border); border-radius: 24px; background: #f1f1e6; }
#game-list-status { margin: 0 0 .8rem; color: var(--leaf); font-weight: 700; }
.activities { display: grid; gap: 14px; }
.activity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 18px clamp(16px, 3vw, 26px);
  background: #edf1e3;
  border-color: #d3ddc6;
  border-radius: 24px;
  text-align: left;
}
.activity:nth-child(2) { background: #f4ecdb; border-color: #e9dcc2; }
.activity:nth-child(3) { background: #eeebf3; border-color: #e2daec; }
.activity:nth-child(4) { background: #e9f0ed; border-color: #ceded5; }
.activity:nth-child(5) { background: #f5eae3; border-color: #ead9cc; }
.activity:enabled:hover { border-color: var(--leaf); }
.activity-copy > * { display: block; }
.activity strong { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
.activity small { margin-top: 4px; color: var(--muted); font-weight: 400; }
.activity-action { margin-top: 10px; font-size: .86rem; }
.activity:disabled .activity-action { color: var(--muted); }
.activity-art { display: block; width: clamp(46px, 10vw, 76px); }
.activity-numbers { color: var(--leaf); font-size: clamp(1.5rem, 2.8vw, 2.25rem); text-align: center; }
.demo {
  margin-top: 1rem;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: var(--leaf-light);
  border: 1px solid var(--border);
  border-radius: 24px;
  text-align: center;
}
#counting-status { min-height: 1.5em; margin: .75rem 0; }
.choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.4rem, 2vw, .9rem);
  margin: .85rem 0;
}
.choices button {
  min-width: clamp(3rem, 10vw, 4.5rem);
  min-height: 3rem;
  padding: .35rem;
  font-size: clamp(1.4rem, 4vw, 2rem);
}
#flower-bed button { position: relative; }
#flower-bed img { display: block; margin-inline: auto; }
#flower-bed button[aria-pressed="true"] {
  background: #dce8d6;
  border-color: var(--leaf);
}
#flower-bed button[aria-pressed="true"]::after {
  position: absolute;
  top: 0;
  right: .25rem;
  content: "✓";
  color: #386c59;
  font-size: 1rem;
}
.secondary { font-size: .95rem; }
.practice-hear svg { vertical-align: -.2em; margin-inline-end: .25rem; }
.practice-muted .practice-hear { display: none; }
.choices button.is-retry {
  background: #f8ecdc;
  border-color: #9a6b39;
  border-style: dashed;
}
@media (min-width: 901px) {
  :root { --garden-rail-width: clamp(190px, 18vw, 226px); }
  body { padding-left: var(--garden-rail-width); }
  .garden-bar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--garden-rail-width);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(1.25rem, 5vh, 3rem);
    padding: clamp(1.15rem, 4vh, 2.1rem) clamp(.9rem, 1.5vw, 1.25rem);
    border: 0;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    z-index: 2;
  }
  .garden-nav { display: grid; gap: .5rem; }
  .garden-nav a { min-height: 54px; }
  .garden-rail-end { margin-top: auto; }
  .garden-sprout { display: block; }
  .garden-motto { display: block; margin: 1rem 0 1.2rem; color: var(--muted); font-size: 13px; }
  .garden-parent-link { justify-content: center; }
}
@media (min-width: 1000px), (min-width: 740px) and (max-width: 900px) {
  .activities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activity { min-height: 160px; gap: .5rem; padding: 18px; }
  .activity strong { font-size: clamp(1.24rem, 2vw, 1.5rem); }
  .activity-art { width: clamp(48px, 5.8vw, 68px); }
}
@media (max-width: 680px) {
  .today-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .today-art { display: none; }
  .garden-bar { flex-wrap: wrap; }
  .garden-nav { order: 1; flex: 0 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .garden-nav a { justify-content: center; padding-inline: .2rem; font-size: clamp(.73rem, 3.4vw, .9rem); gap: .27rem; }
  .garden-nav-icon { width: 1.05rem; height: 1.05rem; }
  .garden-page-note { display: none; }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(1.45rem, 6vw, 2rem); }
}

.game-progress { color: var(--muted); font-size: .9rem; margin: .5rem 0; }
.primary { background: var(--leaf); border-color: var(--leaf); color: #fff; }
#flower-bed.scattered { padding-bottom: .7rem; }
#flower-bed.scattered button:nth-child(even) { translate: 0 .7rem; }
@media (prefers-reduced-motion: no-preference) {
  #flower-bed.celebrate img { animation: flower-wave .45s ease; }
  @keyframes flower-wave {
    30% { rotate: -11deg; }
    70% { rotate: 11deg; }
  }
}

#choice-game [role="status"] { min-height: 1.5em; margin: .75rem 0; }
#choice-options button { min-width: clamp(60px, 13vw, 86px); min-height: clamp(60px, 13vw, 86px); }
.garden-course-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border-radius: .85rem;
  font-weight: 700;
  text-decoration: none;
}
.garden-parent-dialog {
  width: min(calc(100% - 2rem), 420px);
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  color: inherit;
}
.garden-parent-dialog::backdrop { background: #263c3380; }
.garden-parent-dialog h2 { margin: 0; }
.garden-parent-dialog p { color: var(--muted); }
.garden-parent-dialog form { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.garden-parent-dialog form button { min-height: 44px; padding: 10px 16px; border-radius: 10px; font-size: .95rem; line-height: 1.25rem; white-space: nowrap; }
.parent-hold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.parent-hold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff35;
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
}
.parent-hold.holding::before { transform: scaleX(1); transition: transform 1s linear; }

.challenge-hub { margin-top: 1.5rem; }
.challenge-hub h2 { margin: 0 0 .2rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.challenge-hub > p { margin: 0 0 .85rem; color: var(--muted); }
.challenge-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: .85rem;
}
.challenge-path {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(.95rem, 2.2vw, 1.35rem);
  border: 1px solid #d3ddc6;
  border-radius: 24px;
  background: #edf1e3;
}
.challenge-path:nth-child(2) { border-color: #e9dcc2; background: #f4ecdb; }
.challenge-path:nth-child(3) { border-color: #e2daec; background: #eeebf3; }
.challenge-path-top, .challenge-path-actions {
  display: flex;
  align-items: center;
  gap: .45rem .65rem;
  flex-wrap: wrap;
}
.challenge-path-top { justify-content: space-between; }
.challenge-path h3, .challenge-path p { margin: 0; }
.challenge-path-mark { color: var(--leaf); font-size: 1.35rem; font-weight: 750; }
.challenge-path > p { color: var(--muted); }
.challenge-path-progress { display: grid; gap: .2rem; margin-top: auto; font-size: .82rem; color: var(--muted); }
.challenge-path-progress progress { width: 100%; height: .65rem; accent-color: var(--leaf); }
.challenge-path p.challenge-path-next { color: inherit; font-size: .9rem; font-weight: 700; }
.challenge-path-actions { margin-top: .2rem; }
.challenge-results { list-style: none; margin: .35rem auto .85rem; padding: 0; text-align: start; }
.challenge-results li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
}
.challenge-results strong { flex-shrink: 0; color: var(--leaf); font-size: .82rem; }