@import url("https://fonts.googleapis.com/css2?family=Long+Cang&family=Noto+Serif+SC:wght@500;600;700;900&display=swap");

:root{--forest:#183f35;--forest-2:#2f6a57;--paper:#f3ead7;--paper-light:#fffaf0;--ink:#242a25;--cinnabar:#c64f3d;--gold:#e2ad52;--mist:#dce6d8;font-family:"Noto Serif SC","Songti SC",serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 8%,rgba(226,173,82,.22),transparent 24%),linear-gradient(180deg,#f8f0df 0,#eee2ca 100%);overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.topbar{height:88px;width:min(1180px,calc(100% - 38px));margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(24,63,53,.18)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}.brand-seal{width:48px;height:48px;display:grid;place-items:center;background:var(--cinnabar);color:#fff8e7;border-radius:5px 18px 5px 18px;font-family:"Long Cang",cursive;font-size:34px;box-shadow:5px 5px 0 rgba(226,173,82,.7)}.brand b,.brand small{display:block}.brand b{letter-spacing:.12em}.brand small{font-size:10px;margin-top:4px;color:#776c60;letter-spacing:.12em}.header-progress{display:flex;align-items:baseline;gap:7px;color:#6e675c;font-size:12px}.header-progress strong{font-family:"Long Cang",cursive;color:var(--cinnabar);font-size:34px;line-height:1}
main{width:min(1180px,calc(100% - 38px));margin:auto}.hero{min-height:680px;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:76px;padding:72px 0 96px}.eyebrow,.section-heading>div>p,.practice-intro>p{color:var(--cinnabar);font-size:11px;font-weight:900;letter-spacing:.24em}.hero h1{font-size:clamp(52px,7vw,84px);line-height:1.14;letter-spacing:-.05em;margin:20px 0 24px}.hero h1 em{display:inline-block;font-family:"Long Cang",cursive;font-size:1.1em;font-style:normal;font-weight:400;color:var(--cinnabar);transform:rotate(-2deg)}.hero-copy>p:not(.eyebrow){max-width:590px;color:#746b60;line-height:2;font-size:15px}.hero-actions{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}.primary-button,.quiet-button,.start-practice{min-height:48px;padding:0 20px;border:0;border-radius:4px 16px 4px 16px;font:700 13px/1 "Noto Serif SC",serif;cursor:pointer;transition:.22s}.primary-button{background:var(--forest);color:#fff9ec;box-shadow:6px 7px 0 rgba(47,106,87,.22)}.quiet-button{background:transparent;color:var(--forest);border:1px solid rgba(24,63,53,.3)}.primary-button:hover,.start-practice:hover{transform:translateY(-3px);box-shadow:8px 10px 0 rgba(47,106,87,.22)}.hero-notes{display:flex;gap:25px;padding:0;margin:28px 0 0;list-style:none;font-size:11px;color:#857a6d}.hero-notes li:before{content:"·";color:var(--cinnabar);font-size:20px;vertical-align:-2px;margin-right:6px}
.character-grove{height:510px;position:relative;border-radius:48% 48% 16px 16px;background:radial-gradient(circle at 52% 34%,rgba(255,248,222,.23),transparent 24%),linear-gradient(155deg,#285f4e,#11352e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 35px 80px rgba(24,63,53,.24);overflow:hidden}.character-grove:after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(170deg,transparent 45%,rgba(9,38,31,.9) 46%)}.character-grove span{position:absolute;display:grid;place-items:center;color:#fff8de;font-family:"Long Cang",cursive;text-shadow:0 8px 22px rgba(0,0,0,.28);animation:float 5s ease-in-out infinite}.character-grove .sun{font-size:72px;left:15%;top:15%;color:#f5cb73}.character-grove .moon{font-size:56px;right:17%;top:12%;animation-delay:-1s}.character-grove .mountain{font-size:78px;left:22%;bottom:21%;animation-delay:-2s}.character-grove .person{font-size:55px;right:21%;bottom:25%;animation-delay:-3s}.character-grove .tree-main{font-size:116px;left:42%;top:32%;color:#f3e4bf;z-index:2}.character-grove i{position:absolute;width:14px;height:14px;background:var(--gold);border-radius:70% 0 70% 0;opacity:.65;animation:leaf 7s linear infinite}.character-grove i:nth-of-type(1){left:18%;top:36%}.character-grove i:nth-of-type(2){left:76%;top:29%;animation-delay:-2s}.character-grove i:nth-of-type(3){left:35%;top:20%;animation-delay:-4s}.character-grove i:nth-of-type(4){left:65%;top:60%;animation-delay:-1s}.character-grove i:nth-of-type(5){left:20%;top:65%;animation-delay:-5s}.character-grove p{position:absolute;z-index:3;bottom:24px;left:0;right:0;text-align:center;color:rgba(255,249,231,.7);font-size:11px;letter-spacing:.25em}@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}@keyframes leaf{50%{transform:translate(18px,45px) rotate(220deg)}}
.library{padding:100px 0;border-top:1px solid rgba(24,63,53,.17)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.section-heading h2,.practice h2{font-size:clamp(38px,5vw,61px);margin:12px 0 16px;letter-spacing:-.04em}.section-heading span,.practice-intro>span{color:#776e63;font-size:13px;line-height:1.8}.section-heading>strong{color:var(--forest);font-size:13px;padding:11px 15px;border:1px solid rgba(24,63,53,.25);border-radius:20px}.theme-filters{display:flex;gap:9px;margin:40px 0 28px;overflow-x:auto;padding-bottom:5px}.theme-filter{flex:0 0 auto;border:1px solid rgba(24,63,53,.2);background:rgba(255,250,240,.55);color:#5d6058;border-radius:99px;padding:10px 16px;font:700 12px "Noto Serif SC",serif;cursor:pointer}.theme-filter.active{background:var(--forest);color:#fff9e9;border-color:var(--forest)}.character-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.character-card{min-width:0;aspect-ratio:.78;padding:16px 13px;border:1px solid rgba(57,52,42,.16);background:var(--paper-light);border-radius:5px 22px 5px 22px;box-shadow:0 16px 40px rgba(71,55,35,.09);cursor:pointer;position:relative;overflow:hidden;text-align:left;transition:.2s;animation:cardIn .45s both}.character-card:before{content:"";position:absolute;width:70px;height:70px;right:-27px;top:-28px;border-radius:50%;background:var(--card-tone,#d9b66f);opacity:.18}.character-card:hover{transform:translateY(-6px) rotate(.6deg);border-color:var(--forest-2)}.character-card .icon{font-size:23px}.character-card .hanzi{display:block;text-align:center;font-family:"Long Cang",cursive;font-size:clamp(54px,6vw,78px);line-height:1;margin:21px 0 10px;color:var(--forest)}.character-card .pinyin{display:block;text-align:center;font-size:12px;color:var(--cinnabar);letter-spacing:.08em}.character-card footer{position:absolute;left:13px;right:13px;bottom:13px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#82776a}.character-card.learned{background:#eef3e8;border-color:rgba(47,106,87,.38)}.learned-mark{color:var(--forest);font-weight:900}.character-message{grid-column:1/-1;min-height:220px;display:grid;place-items:center;text-align:center;color:#7a7167;background:rgba(255,250,240,.5);border:1px dashed rgba(24,63,53,.25);border-radius:8px 28px 8px 28px}@keyframes cardIn{from{opacity:0;transform:translateY(16px)}}
.practice{margin:30px 0 110px;padding:76px;display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;background:var(--forest);color:#fff9e8;border-radius:8px 48px 8px 48px;box-shadow:0 35px 90px rgba(24,63,53,.24);position:relative;overflow:hidden}.practice:before{content:"找 字";position:absolute;right:-15px;bottom:-55px;font-family:"Long Cang",cursive;font-size:180px;color:rgba(255,255,255,.035);letter-spacing:.05em}.practice-intro>p{color:#efbd65}.practice-intro>span{display:block;color:rgba(255,249,232,.67);max-width:330px}.start-practice{margin-top:30px;background:var(--gold);color:#253c33}.start-practice b{margin-left:18px}.practice-board{min-height:410px;background:#f8efdc;color:var(--ink);border-radius:6px 28px 6px 28px;padding:34px;position:relative;z-index:2}.practice-placeholder{height:100%;display:grid;place-items:center;text-align:center;color:#766d60}.stamp-stack{height:170px;position:relative;width:230px}.stamp-stack i{position:absolute;width:105px;height:125px;display:grid;place-items:center;background:#fffaf0;border:1px solid rgba(35,50,42,.15);border-radius:4px 16px 4px 16px;font:normal 68px "Long Cang",cursive;color:var(--forest);box-shadow:0 14px 30px rgba(45,41,34,.12)}.stamp-stack i:nth-child(1){left:10px;top:20px;transform:rotate(-9deg)}.stamp-stack i:nth-child(2){left:62px;top:0}.stamp-stack i:nth-child(3){right:5px;top:28px;transform:rotate(10deg)}.practice-top{display:flex;justify-content:space-between;color:#776e62;font-size:11px}.round-dots{display:flex;gap:6px}.round-dots i{width:8px;height:8px;border-radius:50%;background:#d9cdb8}.round-dots i.done{background:var(--cinnabar)}.practice-prompt{text-align:center;margin:36px 0 28px}.practice-prompt small{display:block;color:var(--cinnabar);font-weight:800;letter-spacing:.12em;margin-bottom:14px}.practice-prompt strong{display:block;font-size:clamp(30px,4vw,46px)}.audio-clue{width:76px;height:76px;border:0;border-radius:50%;background:var(--cinnabar);color:white;font-size:28px;cursor:pointer;box-shadow:0 0 0 9px rgba(198,79,61,.11)}.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.answer-button{min-height:130px;border:1px solid rgba(24,63,53,.18);border-radius:5px 18px 5px 18px;background:#fffaf0;color:var(--forest);font:normal 58px "Long Cang",cursive;cursor:pointer;transition:.16s}.answer-button:hover{transform:translateY(-3px);border-color:var(--forest)}.answer-button.correct{background:#dfead9;border-color:#4f8b6d}.answer-button.try-again{animation:wiggle .28s;border-color:var(--cinnabar)}.practice-feedback{text-align:center;min-height:28px;margin:16px 0 0;color:#6c675e;font-size:12px}.practice-finish{height:100%;display:grid;place-items:center;text-align:center}.practice-finish .finish-seal{width:96px;height:96px;display:grid;place-items:center;background:var(--cinnabar);color:white;border-radius:50%;font:58px "Long Cang",cursive;box-shadow:0 0 0 11px rgba(198,79,61,.1)}.practice-finish h3{font-size:32px;margin:20px 0 8px}.practice-finish p{color:#746d63}.practice-finish button{border:0;background:var(--forest);color:white;border-radius:4px 14px 4px 14px;padding:13px 20px;font:700 12px "Noto Serif SC";cursor:pointer}@keyframes wiggle{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.character-dialog{width:min(820px,calc(100% - 24px));padding:0;border:0;background:transparent}.character-dialog::backdrop{background:rgba(13,38,31,.76);backdrop-filter:blur(7px)}.learning-card{min-height:520px;display:grid;grid-template-columns:.85fr 1.15fr;background:#fff9e9;border-radius:8px 34px 8px 34px;overflow:hidden;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.35)}.close-dialog{position:absolute;z-index:3;right:16px;top:14px;width:42px;height:42px;border:0;background:transparent;color:#6f695f;font-size:28px;cursor:pointer}.dialog-visual{display:grid;place-items:center;align-content:center;background:linear-gradient(155deg,#2e6b57,#163b32);position:relative;overflow:hidden}.dialog-visual:after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(255,255,255,.11);border-radius:50%}.dialog-visual span{font-size:70px;position:relative;z-index:1}.dialog-visual i{font:normal clamp(130px,18vw,190px)/1 "Long Cang",cursive;color:#fff2cf;position:relative;z-index:1;text-shadow:0 15px 35px rgba(0,0,0,.25)}.dialog-copy{padding:58px 55px}.dialog-copy>p{color:var(--cinnabar);font-size:11px;font-weight:800;letter-spacing:.18em}.dialog-copy h2{margin:12px 0 18px}.dialog-copy h2 span,.dialog-copy h2 b{display:block}.dialog-copy h2 span{font-size:14px;color:#8a7b69;letter-spacing:.12em}.dialog-copy h2 b{font-size:36px;margin-top:4px}.speak-button{border:0;background:var(--gold);color:#2c3e36;padding:10px 15px;border-radius:99px;font:700 12px "Noto Serif SC";cursor:pointer}.speak-button span{font-size:17px;margin-right:4px}.dialog-copy blockquote{margin:24px 0;padding:0;font-size:15px;line-height:1.8}.memory-note{border-left:3px solid var(--cinnabar);padding:12px 16px;background:#f1e4cb}.memory-note small{color:var(--cinnabar);font-size:10px;font-weight:900}.memory-note p{margin:6px 0 0;line-height:1.7;color:#625e56;font-size:13px}.learned-button{width:100%;margin-top:24px;min-height:46px;border:1px solid var(--forest);background:transparent;color:var(--forest);border-radius:4px 15px 4px 15px;font:700 12px "Noto Serif SC";cursor:pointer}.learned-button.is-learned{background:var(--forest);color:white}
.site-footer{width:min(1180px,calc(100% - 38px));margin:0 auto 36px;padding-top:25px;border-top:1px solid rgba(24,63,53,.18);display:flex;justify-content:space-between;gap:30px;color:#746c61;font-size:11px;line-height:1.8}.site-footer p{margin:0;max-width:650px}.site-footer a{color:var(--forest)}
@media(max-width:980px){.hero{grid-template-columns:1fr;gap:40px}.character-grove{height:420px}.character-grid{grid-template-columns:repeat(4,1fr)}.practice{grid-template-columns:1fr;padding:55px;gap:40px}.practice-intro br{display:none}}
@media(max-width:650px){.topbar{height:78px}.brand small{display:none}.header-progress span{display:none}.hero{padding:54px 0 72px;min-height:auto}.hero h1{font-size:46px}.character-grove{height:330px;border-radius:45% 45% 12px 12px}.character-grove .tree-main{font-size:88px}.character-grove .sun,.character-grove .mountain{font-size:55px}.character-grid{grid-template-columns:repeat(3,1fr);gap:9px}.character-card{aspect-ratio:.78;padding:11px}.character-card .hanzi{font-size:56px;margin-top:14px}.character-card footer{left:9px;right:9px;bottom:9px}.library{padding:70px 0}.section-heading{align-items:start}.section-heading>strong{white-space:nowrap}.practice{padding:35px 18px;border-radius:7px 28px 7px 28px}.practice-board{padding:24px 15px;min-height:390px}.answer-button{min-height:105px;font-size:50px}.learning-card{grid-template-columns:1fr}.dialog-visual{min-height:230px}.dialog-visual i{font-size:120px}.dialog-copy{padding:34px 28px}.character-dialog{max-height:calc(100vh - 20px)}.site-footer{display:block}.site-footer span{display:block;margin-top:12px}}
@media(max-width:390px){.character-grid{grid-template-columns:repeat(2,1fr)}.hero-notes{gap:12px;flex-wrap:wrap}.hero h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.character-card .card-footer{position:absolute;left:13px;right:13px;bottom:13px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#82776a}
@media(max-width:650px){.character-card .card-footer{left:9px;right:9px;bottom:9px}}
.header-tools{display:flex;align-items:center;gap:18px}.header-tools>a{color:var(--forest);text-decoration:none;border:1px solid rgba(24,63,53,.25);padding:9px 13px;border-radius:4px 13px 4px 13px;font-size:11px;font-weight:700}@media(max-width:650px){.header-tools{gap:9px}.header-tools>a{padding:8px 9px;font-size:10px}}