body[data-activity=basics]{--activity-accent:#08776f;--activity-light:#dff5ec;--activity-edge:#90d3b3}.basics-main{max-width:1050px}.basics-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0}.basics-heading h1{font-size:clamp(28px,4vw,44px);margin:8px 0}.basics-heading img{object-fit:contain}.basics-stages,.basics-characters,.basics-actions,.basics-after{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.basics-stages{margin-bottom:14px}.basics-stages button{padding:12px 22px;border:2px solid #78beb3;border-radius:24px;background:#fff;font-size:16px;font-weight:700}.basics-stages [aria-pressed=true]{color:#fff;background:#08776f;border-color:#08776f}.basics-characters{margin-bottom:20px}.basics-characters button{min-width:70px;min-height:66px;background:#fff;border:3px solid #beded8;border-radius:16px;padding:6px 20px;font-size:34px}.basics-characters [aria-pressed=true]{border-color:#b08000;background:#fff0ac}.basics-characters .practised{display:block;font:700 13px system-ui;color:#066a5b}.basics-card{border:3px solid #b8dace;border-radius:28px;background:#fffef9;padding:24px 32px;box-shadow:0 6px 0 #9ccabc}.basics-step{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;color:#466b60;font-size:16px;font-weight:700;margin-bottom:14px}.practice-status{font-size:14px}.learn-pair{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;text-align:center}.character-face{display:flex;align-items:center;flex-direction:column;background:#e4f5ed;border-radius:24px;padding:22px}.learn-char{font-family:system-ui,sans-serif;font-size:clamp(110px,16vw,170px);line-height:1.2;color:#174f47}.learn-pinyin{font-size:25px}.meaning-picture{font-size:90px;min-height:120px;display:flex;align-items:center;justify-content:center;gap:16px;max-width:100%;margin:12px 0}.count-picture{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:320px;margin:auto}.count-picture span{font-size:38px;line-height:1.3;color:#ad7000}.meaning-picture .selected-size{border:3px solid #168675;border-radius:18px;padding:12px;background:#dff5ec}.size-big{font-size:80px}.size-small{font-size:36px}.basics-actions{justify-content:center;margin-top:24px}.basics-actions a{display:inline-block;text-decoration:none;text-align:center}.basics-actions .text-link{color:#126f65;text-decoration:underline;padding:12px}.basics-after{justify-content:center;margin:30px 0}.basics-after a,.basics-parent a{color:#096e63}.basics-parent{background:#fff;border:2px solid #d1e6e0;border-radius:20px;padding:18px 24px;line-height:1.8}.basics-parent summary{cursor:pointer;font-weight:700}.basics-parent p{font-size:16px}.answer-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:680px;margin:22px auto}.answer-choices.two-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.answer-choices button{border:3px solid #8ecdc2;background:#eaf8f2;box-shadow:0 5px 0 #b6dace;border-radius:22px;padding:16px;font-family:system-ui,sans-serif;font-size:clamp(54px,10vw,90px);color:#18564b;min-height:110px}.answer-choices button:disabled{opacity:.65;cursor:default}.answer-choices button.correct{background:#fff0a9;border-color:#a47700;opacity:1}.basics-feedback{min-height:1.7em;font-size:20px;font-weight:700;color:#146e58}.basics-card #quizPanel,.basics-card #finishPanel{text-align:center}.basics-card #parentPrompt{max-width:440px;margin:16px auto;text-align:left;font-size:16px;color:#4b675e}.basics-card #parentPrompt summary{cursor:pointer}.finish-symbol{font-size:76px;color:#a86f00}.basics-card h2{font-size:28px}.basics-card p{line-height:1.7}.basics-card button:focus-visible,.basics-card a:focus-visible,.basics-stages button:focus-visible,.basics-characters button:focus-visible{outline:4px solid #276cbe;outline-offset:4px}.basics-main .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}.first-characters-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff0ad;border:3px solid white;border-radius:24px;padding:24px 28px;margin:22px 0;box-shadow:0 5px 0 #ddc674}.first-characters-banner h2{margin:4px 0}.first-characters-banner p{margin:8px 0;font-size:17px}.first-characters-banner a{display:inline-block;text-decoration:none;white-space:nowrap}.first-characters-banner .eyebrow{font-size:14px}.basics-main [hidden]{display:none!important}
@media(max-width:620px){.basics-heading img{height:80px;width:65px}.basics-card{padding:20px 14px;border-radius:22px}.learn-pair{gap:12px;grid-template-columns:1fr 1fr}.character-face{padding:15px 8px}.learn-char{font-size:104px}.learn-pinyin{font-size:22px}.meaning-picture{font-size:65px;min-height:90px;gap:6px}.count-picture{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}.count-picture span{font-size:22px}.size-big{font-size:48px}.size-small{font-size:22px}.meaning-picture .selected-size{padding:5px;border-width:2px}.basics-stages{gap:8px}.basics-stages button{flex:1;padding:11px 8px;font-size:14px}.basics-characters{gap:8px}.basics-characters button{min-width:60px;padding:6px 15px;font-size:30px}.answer-choices{gap:10px}.answer-choices button{padding:10px;min-height:95px}.basics-card h2{font-size:23px}.basics-after{align-items:stretch}.basics-after a{flex-basis:100%;text-align:center}.basics-main .lesson-top{flex-wrap:wrap;gap:8px}.basics-main .lesson-top span{font-size:14px}.basics-actions .primary{width:100%}.basics-parent{padding:16px}.first-characters-banner{flex-direction:column;align-items:flex-start;padding:20px}.first-characters-banner a{white-space:normal}.first-characters-banner p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.basics-main *{animation:none!important;transition:none!important}}

/* Large single-count targets keep the quantity visible after each tap. */
.count-interactive{width:max-content;max-width:100%;gap:6px}
.count-interactive button{width:46px;height:50px;min-width:44px;padding:0;border:2px solid #9f7726;border-radius:12px;background:#fffdf2;color:#9b6510;font:36px/1 system-ui;box-shadow:0 3px 0 #d9c68e;cursor:pointer}
.count-interactive button[aria-pressed=true]{background:#08776f;color:white;border-color:#06594f;box-shadow:none}
.count-practice{font-size:16px}.count-practice p{margin:8px 0}.count-practice #countStatus{font-weight:800;color:#075e55;min-height:1.7em}
.count-practice a{display:block;margin-top:14px;color:#096e63}.count-practice .quiet{min-height:44px}
@media(max-width:620px){.learn-pair.counting-lesson{grid-template-columns:minmax(0,1fr)}.counting-lesson .character-face{padding:12px}.counting-lesson .learn-char{font-size:92px}.count-interactive{gap:4px}.count-interactive button{width:44px;height:48px}}

/* Learning diagrams show relative positions; image assets illustrate concrete meanings. */
.lesson-meaning-art{display:block;width:min(100%,220px);height:auto;aspect-ratio:1;object-fit:contain;border-radius:18px}.position-picture{display:grid;grid-template-rows:repeat(3,1fr);gap:6px;width:100px;height:156px}.position-slot{display:flex;justify-content:center;align-items:center;min-height:0;background:#f6fcff;border:2px solid #769cbb;border-radius:10px}.position-dot{display:block;width:25px;height:25px;border:2px solid #9c3024;border-radius:50%;background:#e3543f}.word-activity{margin:22px 0 0;padding:14px 18px;background:#e9f5ff;border:1px solid #b4d4ea;border-radius:16px;font-size:16px}.word-activity summary{cursor:pointer;font-weight:700}.word-activity p{margin:10px 0 0}.basics-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.basics-stages button{padding:12px 10px}.word-activity[hidden]{display:none!important}@media(max-width:620px){.lesson-meaning-art{width:min(100%,150px)}.position-picture{width:78px;height:120px;gap:4px}.position-slot{border-radius:7px}.position-dot{width:20px;height:20px}.basics-stages{grid-template-columns:repeat(2,minmax(0,1fr))}.word-activity{padding:12px 14px}}