:root {
  --paper:#f8f6ef;
  --ink:#2e4034;
  --muted:#6c756b;
  --green:#41644a;
  --line:#e4e6dc;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button {
  font:inherit;
  cursor:pointer;
  color:inherit;
  transition:background .18s,transform .18s,border-color .18s;
}
button:disabled {
  cursor:default;
}
button,a {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #b65c35;
  outline-offset:5px;
}
a {
  color:var(--green);
}
[hidden] {
  display:none!important;
}
.shell {
  width:min(1120px,calc(100% - 64px));
  margin-inline:auto;
}
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:20px;
  font-weight:700;
  text-decoration:none;
  letter-spacing:.03em;
}
.brand-mark {
  display:grid;
  place-items:center;
  background:var(--green);
  color:#fff9e9;
  width:38px;
  height:38px;
  border-radius:12px;
  font:32px/1 Georgia,serif;
  padding-bottom:4px;
}
.header-note {
  font-size:13px;
  color:var(--muted);
}
.header-note span {
  color:#b5552e;
  margin-right:6px;
}
.intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:52px 0 46px;
  gap:24px;
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--green);
}
.tiny-dot {
  width:7px;
  height:7px;
  background:#86a16a;
  border-radius:50%;
}
h1 {
  font-size:clamp(32px,4.2vw,48px);
  line-height:1.4;
  letter-spacing:-.04em;
  margin:14px 0;
}
h1 span {
  color:var(--green);
}
.intro p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin:0;
}
.letter-friends {
  position:relative;
  width:290px;
  height:150px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding-bottom:20px;
}
.friend {
  position:relative;
  width:75px;
  height:88px;
  border-radius:23px;
  display:grid;
  place-items:center;
  font:70px/.9 "Chalkboard SE","Comic Sans MS",cursive;
  padding-bottom:10px;
}
.friend-a {
  background:#e3eacb;
  color:#466043;
  transform:rotate(-12deg);
  margin-top:13px;
}
.friend-o {
  background:#f2d59b;
  color:#8a5d2b;
  transform:rotate(7deg);
  margin-top:-12px;
}
.friend-e {
  background:#e8dce9;
  color:#785a79;
  transform:rotate(14deg);
  margin-top:25px;
}
.friend i {
  position:absolute;
  width:20px;
  height:8px;
  border:1.5px solid currentColor;
  border-top:0;
  border-radius:0 0 12px 12px;
  bottom:9px;
  opacity:.6;
}
.friend-caption {
  position:absolute;
  bottom:-7px;
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  color:#818575;
  letter-spacing:.08em;
}
.spark {
  position:absolute;
  font-size:23px;
  color:#b97d40;
}
.spark-one {
  top:0;
  left:12px;
}
.spark-two {
  right:0;
  top:5px;
}
.classroom {
  background:#fffdf8;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:clip;
  box-shadow:0 8px 28px #3d493606;
}
.mode-nav {
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:0 30px;
  gap:24px;
}
.mode {
  display:flex;
  gap:9px;
  align-items:center;
  position:relative;
  border:0;
  background:transparent;
  padding:23px 2px;
  font-weight:600;
  color:#747b70;
  min-height:64px;
}
.mode.active {
  color:var(--green);
}
.mode.active:after {
  position:absolute;
  content:"";
  height:3px;
  background:var(--green);
  bottom:0;
  left:0;
  right:0;
  border-radius:3px;
}
.mode svg,.sound-hint svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mode-note {
  margin-left:auto;
  font-size:12px;
  color:#858b7e;
}
.classroom-body {
  padding:28px 30px 0;
}
.category-nav {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.category-nav button {
  border:1px solid var(--line);
  border-radius:12px;
  background:#fffdf8;
  min-height:46px;
  padding:10px 18px;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.category-nav button span {
  font:12px/1.2 sans-serif;
  color:#798471;
  background:#f0f2e9;
  padding:3px 7px;
  border-radius:6px;
}
.category-nav button[aria-pressed=true] {
  background:var(--green);
  border-color:var(--green);
  color:#fffdf5;
}
.category-nav button[aria-pressed=true] span {
  background:#ffffff20;
  color:#eaf0df;
}
.lesson-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:31px 0 24px;
}
h2 {
  font-size:22px;
  letter-spacing:.02em;
  margin:0 0 8px;
}
.lesson-heading p {
  font-size:13px;
  color:var(--muted);
  margin:0;
}
.sound-hint {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}
.sound-hint svg {
  width:16px;
  height:16px;
}
.letter-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;
}
.letter-card {
  border:1px solid #e3e8d9;
  border-radius:15px;
  background:#f1f4e9;
  min-height:104px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  position:relative;
}
.letter-card:nth-child(3n+2) {
  background:#faf0df;
  border-color:#eee5d4;
}
.letter-card:nth-child(3n) {
  background:#f1edf4;
  border-color:#e7e0eb;
}
.pinyin {
  font-family:"Chalkboard SE","Comic Sans MS","Trebuchet MS",sans-serif;
  font-size:43px;
  line-height:1.3;
  font-weight:400;
}
.card-speaker {
  opacity:.5;
  font-size:13px;
  line-height:1;
}
.letter-card:hover {
  transform:translateY(-3px);
  border-color:#7e9973;
}
.letter-card.playing {
  background:#dbe9cc;
  border:2px solid #64885a;
  transform:translateY(-2px);
}
.letter-card.playing .card-speaker {
  opacity:1;
}
.group-title {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  margin:26px 0 13px;
}
.group-title:first-child {
  margin-top:0;
}
.group-title:after {
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.playback {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:63px;
  border-top:1px dashed var(--line);
  margin-top:26px;
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  padding:10px 0;
}
.playback-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#91a581;
  flex-shrink:0;
}
#retry {
  border:1px solid #ccad8c;
  border-radius:8px;
  background:#fff3df;
  padding:10px 15px;
  min-height:44px;
  margin-left:auto;
  color:#844323;
  white-space:nowrap;
}
.parent-note {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:25px 0;
}
.parent-note>span {
  color:#bb874a;
  font-size:24px;
}
.parent-note p {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  margin:0;
}
.parent-note strong {
  font-weight:500;
  color:#54634f;
}
.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding:24px 0 30px;
  font-size:11px;
  color:#7e8577;
}
.site-footer a {
  color:#697561;
  text-underline-offset:4px;
  min-height:44px;
  display:flex;
  align-items:center;
}
.skip-link {
  position:fixed;
  z-index:5;
  top:8px;
  left:8px;
  padding:12px;
  background:#fff;
  transform:translateY(-160%);
}
.skip-link:focus {
  transform:none;
}
.quiz-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:30px 0 14px;
  font-size:13px;
  color:var(--muted);
}
.progress-track {
  height:5px;
  background:#e9eddf;
  border-radius:5px;
  overflow:hidden;
}
.progress-fill {
  height:100%;
  background:#83a06d;
  transform-origin:left;
  width:100%;
}
.quiz-stage {
  padding:29px 0 6px;
  text-align:center;
}
.quiz-stage h2 {
  font-size:24px;
  margin:0 0 8px;
}
.quiz-stage>p {
  font-size:13px;
  color:var(--muted);
  margin:0 0 24px;
  line-height:1.8;
}
.listen-button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:118px;
  height:118px;
  border-radius:50%;
  border:1px solid #d9e2c7;
  background:#edf2e0;
  margin:0 auto 28px;
  font-size:13px;
  color:var(--green);
}
.listen-button svg {
  width:34px;
  height:34px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.listen-button.is-playing {
  outline:5px solid #edf2e080;
  background:#e1ebcf;
}
.answers {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:530px;
  margin:0 auto;
}
.answer {
  position:relative;
  min-height:104px;
  border:1px solid #e2e5d9;
  background:#fcfaf3;
  border-radius:16px;
}
.answer:not(:disabled):hover {
  background:#eff3e6;
  border-color:#76946a;
  transform:translateY(-2px);
}
.answer:disabled {
  color:#93998c;
}
.answer.correct {
  border:2px solid #66875a;
  background:#e8f1dc;
  color:#3b603d;
}
.answer.wrong {
  border-color:#c68b67;
  background:#fbecdf;
  color:#935331;
}
.answer-mark {
  position:absolute;
  right:9px;
  top:6px;
  font:14px/1.4 sans-serif;
}
.feedback {
  height:44px;
  font-size:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#4f713f;
  margin-top:12px;
}
.primary {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  border:1px solid var(--green);
  background:var(--green);
  color:#fffdf4;
  border-radius:12px;
  min-height:46px;
  padding:12px 30px;
  font-size:14px;
}
.primary:disabled {
  background:#eef0e8;
  color:#858f7d;
  border-color:#e2e7d9;
}
.primary:not(:disabled):hover {
  background:#315439;
}
.quiz-actions {
  min-height:55px;
}
.finish {
  padding:38px 0 20px;
  text-align:center;
}
.finish-star {
  font-size:48px;
  color:#b67b35;
  display:block;
  margin-bottom:16px;
}
.finish h2 {
  font-size:28px;
}
.finish p {
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
}
.score {
  font-size:60px;
  color:var(--green);
  line-height:1.2;
  margin:22px 0 5px;
  font-family:Georgia,serif;
}
.score small {
  font-size:24px;
  color:#929c85;
}
.finish-actions {
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:25px;
}
.secondary {
  border:1px solid #cdd6c2;
  background:transparent;
  border-radius:12px;
  min-height:46px;
  padding:12px 24px;
  font-size:14px;
}
.credits {
  max-width:780px;
  margin:50px auto;
  line-height:1.9;
}
.credits h1 {
  font-size:30px;
}
.credits h2 {
  margin-top:32px;
  font-size:20px;
}
.credits p,.credits li {
  font-size:15px;
}
.credits table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.credits th,.credits td {
  text-align:left;
  padding:10px;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere;
}
.credits code {
  font-size:12px;
  overflow-wrap:anywhere;
}
@media(min-width:1000px) {
  .letter-card {
    min-height:108px;
  }
}
@media(max-width:800px) {
  .shell {
    width:calc(100% - 40px);
  }
  .intro {
    padding:34px 0;
  }
  .letter-friends {
    width:200px;
    transform:scale(.85);
    transform-origin:right center;
  }
  .friend {
    width:60px;
  }
  .letter-grid {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .classroom-body {
    padding:22px 22px 0;
  }
  .mode-nav {
    padding:0 22px;
  }
  .header-note {
    font-size:11px;
  }
  .sound-hint {
    display:none;
  }
  .parent-note {
    justify-content:flex-start;
  }
  .parent-note strong {
    display:block;
  }
}
@media(max-width:560px) {
  .shell {
    width:calc(100% - 32px);
  }
  .site-header {
    padding:20px 0;
  }
  .brand {
    font-size:18px;
  }
  .header-note {
    display:none;
  }
  .intro {
    padding:30px 0 32px;
    position:relative;
    min-height:180px;
  }
  .intro>div:first-child {
    position:relative;
    z-index:1;
  }
  .eyebrow {
    font-size:11px;
    letter-spacing:.04em;
  }
  h1 {
    font-size:32px;
    max-width:290px;
    line-height:1.45;
    margin:12px 0;
  }
  h1 span {
    display:block;
  }
  .intro p {
    font-size:12px;
    max-width:220px;
  }
  .letter-friends {
    position:absolute;
    right:14px;
    top:60px;
    width:140px;
    transform:scale(.72);
    transform-origin:right center;
    opacity:.95;
  }
  .friend {
    width:48px;
    height:72px;
    font-size:52px;
    border-radius:17px;
    flex-shrink:0;
  }
  .friend-caption {
    display:none;
  }
  .spark-one {
    left:-15px;
  }
  .spark-two {
    right:-6px;
  }
  .mode-nav {
    padding:0 18px;
    gap:28px;
  }
  .mode {
    font-size:15px;
    padding:19px 0;
  }
  .mode-note {
    display:none;
  }
  .classroom {
    border-radius:20px;
  }
  .classroom-body {
    padding:20px 16px 0;
  }
  .category-nav {
    gap:7px;
  }
  .category-nav button {
    padding:10px 11px;
    font-size:13px;
    gap:6px;
    border-radius:10px;
  }
  .category-nav button span {
    padding:2px 4px;
    font-size:11px;
  }
  .lesson-heading {
    margin:25px 0 20px;
  }
  h2 {
    font-size:20px;
  }
  .letter-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
  }
  .letter-card {
    min-height:88px;
    border-radius:12px;
  }
  .pinyin {
    font-size:35px;
  }
  .letter-card[id^="whole-"] .pinyin {
    font-size:clamp(24px,6.6vw,35px);
  }
  .playback {
    font-size:11px;
    min-height:60px;
    margin-top:22px;
  }
  .site-footer {
    flex-direction:column;
    gap:4px;
    align-items:flex-start;
    padding-top:20px;
  }
  .parent-note {
    align-items:flex-start;
    padding:20px 4px;
  }
  .parent-note>span {
    line-height:1.2;
  }
  .quiz-stage {
    padding-top:25px;
  }
  .quiz-stage h2 {
    font-size:21px;
  }
  .answers {
    gap:10px;
  }
  .answer {
    min-height:96px;
  }
  .quiz-header {
    font-size:12px;
  }
  .credits {
    margin:30px auto;
  }
  .credits table {
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}

.drawing .intro, .drawing .parent-note, .drawing .brand-mark {
  display: none;
}
.drawing .classroom {
  margin-top: 28px;
}
.draw-stage {
  text-align: center;
  padding: 12px 0 6px;
}
.draw-label, .draw-tip {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
  margin: 16px 0;
}
.draw-card {
  width: min(100%, 390px);
  min-height: 270px;
  margin: 8px auto;
  border: 1px solid #d9e2cb;
  border-radius: 24px;
  background: #eef3e3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.draw-card .pinyin {
  font-size: clamp(64px, 16vw, 120px);
}
.draw-card.playing {
  background: #dceacb;
  border-color: #64885a;
}
.draw-listen {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--green);
}
.draw-listen svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 560px) {
  .mode-nav { gap: 0; justify-content: space-between; padding: 0 12px; }
  .mode { gap: 5px; font-size: 13px; }
  .mode svg { width: 16px; height: 16px; }
  .drawing .classroom { margin-top: 16px; }
  .draw-card { min-height: 220px; }
}