*{margin:0;padding:0;box-sizing:border-box}a{color:inherit;text-decoration:none}:root{--ink:#5a3d2b;--ink-soft:#8a6a55;--card:#FFFDF3;--stroke-red:#FF8A8A;--orange:#FF9A3D;--orange-d:#E67E1B;--green:#58CC6B;--green-d:#3AA64F;--pink:#FF7BAC;--pink-d:#E85A90;--blue:#4FB8FF;--blue-d:#2E96DB;--yellow:#FFC93C;--radius:28px;--shadow:0 10px 0 rgba(90,61,43,.12), 0 20px 40px rgba(90,61,43,.12)}body[data-theme=mint]{--bg1:#E8F8D8;--bg2:#D3F0FF;--bg3:#FFF6D6}body[data-theme=cream]{--bg1:#FFF3C4;--bg2:#FFE3B3;--bg3:#FFFBEA}body[data-theme=sky]{--bg1:#D6EEFF;--bg2:#C9F0E4;--bg3:#FFF6D6}body[data-theme=pink]{--bg1:#FFDEE9;--bg2:#FFEED6;--bg3:#E2F5FF}body{font-family:ZCOOL KuaiLe,Nunito,PingFang SC,Microsoft YaHei,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%);min-height:100vh;overflow-x:hidden;transition:background .6s}button{font-family:inherit}.sky-deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.sun{position:absolute;top:24px;left:30px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff6a8,#ffc93c 65%,#ff9a3d);box-shadow:0 0 40px #ffc93cb3;animation:sunSpin 12s linear infinite,sunBob 4s ease-in-out infinite;display:flex;align-items:center;justify-content:center}.sun-face{font-size:28px;animation:faceWiggle 3s ease-in-out infinite}@keyframes sunSpin{to{filter:hue-rotate(8deg)}}@keyframes sunBob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(8px) rotate(3deg)}}@keyframes faceWiggle{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.cloud{position:absolute;font-size:52px;opacity:.9;filter:drop-shadow(0 6px 0 rgba(255,255,255,.6));animation:drift linear infinite}.c1{top:60px;right:10%;animation-duration:26s}.c2{top:150px;right:-60px;font-size:40px;animation-duration:34s}.c3{top:20px;left:40%;font-size:36px;animation-duration:30s}@keyframes drift{0%{transform:translate(15vw)}to{transform:translate(-115vw)}}.balloon{position:absolute;font-size:44px;animation:floatY 5s ease-in-out infinite}.b1{top:180px;left:4%}.b2{top:320px;right:5%;animation-delay:1.2s}@keyframes floatY{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-18px) rotate(4deg)}}.star{position:absolute;font-size:24px;animation:twinkle 1.8s ease-in-out infinite}.s1{top:120px;left:22%}.s2{top:90px;right:28%;animation-delay:.6s}.s3{top:220px;left:48%;animation-delay:1.1s}@keyframes twinkle{0%,to{transform:scale(.7) rotate(0);opacity:.5}50%{transform:scale(1.25) rotate(20deg);opacity:1}}.rainbow{position:absolute;top:-90px;left:50%;transform:translate(-50%);width:560px;height:280px;border-radius:280px 280px 0 0;background:transparent;border:18px solid rgba(255,120,150,.35);border-bottom:none;box-shadow:0 0 0 18px #ffc93c38 inset,0 0 0 36px #78dc782e inset;opacity:.55;animation:rainbowPulse 5s ease-in-out infinite}@keyframes rainbowPulse{0%,to{opacity:.4}50%{opacity:.65}}.topbar{position:sticky;top:12px;z-index:10;max-width:1060px;margin:14px auto 0;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#fffdf3e0;backdrop-filter:blur(12px);border:4px solid #fff;border-radius:26px;box-shadow:var(--shadow)}.logo{display:flex;align-items:center;gap:12px}.logo-bubble{width:62px;height:62px;border-radius:22px;font-size:34px;background:linear-gradient(135deg,#ffc93c,#ff9a3d);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 0 var(--orange-d);animation:wobble 2.6s ease-in-out infinite}@keyframes wobble{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg) scale(1.05)}}.logo h1{font-size:32px;letter-spacing:2px;line-height:1}.logo p{font-size:15px;color:var(--ink-soft)}.top-nav{display:flex;gap:8px}.top-nav a{padding:8px 18px;border-radius:999px;font-size:17px;background:#fff;border:3px solid #FFE0A6;transition:.2s;box-shadow:0 3px #5a3d2b1a}.top-nav a:hover{transform:translateY(-2px)}.top-nav a.router-link-active{background:linear-gradient(180deg,#ffb84d,#ff7b4d);color:#fff;border-color:#fff;box-shadow:0 4px 0 var(--orange-d)}.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.theme-switch{display:flex;align-items:center;gap:8px;background:#fff3d6;border:3px solid #fff;border-radius:999px;padding:6px 10px;box-shadow:0 4px #5a3d2b1a}.theme-switch span{font-size:15px}.theme-dot{width:34px;height:34px;border-radius:50%;border:3px solid #fff;background:var(--dot);font-size:18px;cursor:pointer;transition:.25s;box-shadow:0 3px #0000001f}.theme-dot:hover{transform:scale(1.15) rotate(10deg)}.theme-dot.active{outline:3px solid var(--orange);transform:scale(1.15)}.wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:18px 16px 40px}.input-card{background:var(--card);border:4px solid #fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-top:16px;position:relative;overflow:hidden}.input-card:before{content:"";position:absolute;top:0;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,var(--pink) 0 28px,var(--yellow) 28px 56px,var(--green) 56px 84px,var(--blue) 84px 112px)}.mascot-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 16px;flex-wrap:wrap}.mascot{font-size:52px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.08))}.bounce{animation:mascotJump 2s ease-in-out infinite}.bounce.d2{animation-delay:.5s}@keyframes mascotJump{0%,to{transform:translateY(0)}30%{transform:translateY(-14px) rotate(-6deg)}60%{transform:translateY(0) scale(1.05)}}.speech{background:#fff3d6;border:3px solid #FFE0A6;border-radius:18px 18px 18px 4px;padding:10px 16px;font-size:19px;max-width:520px;position:relative;animation:speechPop 3s ease-in-out infinite}@keyframes speechPop{0%,to{transform:rotate(-.5deg)}50%{transform:rotate(.5deg) scale(1.01)}}.input-row{display:flex;gap:14px}.input-row textarea,.login-card input{font-family:inherit;color:var(--ink);background:#f4ffdf;border:4px dashed #9BD67D;border-radius:20px;padding:14px 16px;outline:none;transition:.25s}.input-row textarea{flex:1;min-height:88px;resize:vertical;font-size:24px}.input-row textarea:focus,.login-card input:focus{border-color:var(--orange);background:#fffbea;box-shadow:0 0 0 6px #ff9a3d2e}.go-btn{min-width:116px;border:none;border-radius:22px;cursor:pointer;color:#fff;font-size:22px;line-height:1.15;background:linear-gradient(180deg,#ffb84d,#ff7b4d);box-shadow:0 7px 0 var(--orange-d);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px;position:relative;overflow:hidden;transition:.2s}.go-btn:hover{transform:translateY(-3px) scale(1.03)}.go-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--orange-d)}.go-emoji{font-size:36px;animation:rocket 1.6s ease-in-out infinite;display:block}@keyframes rocket{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.chips-row{display:flex;gap:10px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}.chips-label{font-size:17px;padding-top:8px;white-space:nowrap}.chips{display:flex;gap:8px;flex-wrap:wrap}.chips button{border:3px solid #fff;background:#e8f8ff;border-radius:999px;padding:7px 16px;font-size:17px;color:var(--ink);cursor:pointer;box-shadow:0 4px #2e96db40;transition:.2s}.chips button:nth-child(2n){background:#ffeaf3;box-shadow:0 4px #e85a9040}.chips button:nth-child(3n){background:#fff3c9;box-shadow:0 4px #e67e1b40}.chips button:hover{transform:translateY(-3px) rotate(-2deg) scale(1.05)}.chips button:active{transform:scale(.95)}.control-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;background:#f6fbeb;border-radius:18px;padding:12px 14px;border:3px dashed #BEE9A8}.ctrl{display:flex;align-items:center;gap:10px;font-size:17px}.ctrl.btns{flex-wrap:wrap}input[type=range]{accent-color:var(--orange);width:130px;height:8px;cursor:pointer}#speedLabel{background:#fff;border-radius:10px;padding:2px 10px;border:2px solid #FFE0A6;min-width:48px;text-align:center}.cute-btn{border:none;border-radius:999px;padding:10px 18px;font-size:17px;color:#fff;cursor:pointer;transition:.2s;box-shadow:0 5px #0000002e}.cute-btn:hover{transform:translateY(-2px) scale(1.04)}.cute-btn:active{transform:translateY(3px);box-shadow:0 1px #0000002e}.cute-btn.small{font-size:15px;padding:8px 14px}.cute-btn.green{background:linear-gradient(180deg,#6FDE82,var(--green-d))}.cute-btn.orange{background:linear-gradient(180deg,#FFB84D,var(--orange-d))}.cute-btn.pink{background:linear-gradient(180deg,#FF9CC2,var(--pink-d))}.cute-btn.blue{background:linear-gradient(180deg,#6FCBFF,var(--blue-d))}.cute-btn.gray{background:#c9bbae;box-shadow:0 5px #a08e80}.music-btn{background:linear-gradient(180deg,#b388ff,#7c5cff)}.stat-bar{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}.stat-pill{background:#fffdf3eb;border:3px solid #fff;border-radius:999px;padding:8px 18px;font-size:17px;box-shadow:0 5px #5a3d2b1a}.stat-pill b{color:#e67e1b;font-size:20px}.bunny-progress{flex:1;min-width:220px;display:flex;align-items:center;gap:8px}.bunny-progress .track{flex:1;height:14px;background:#eadfcb;border-radius:999px;overflow:hidden;border:2px solid #fff}.bunny-progress .fill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--green) 0 14px,#7FE68F 14px 28px);border-radius:999px;transition:width .6s cubic-bezier(.34,1.56,.64,1)}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}.char-card{background:var(--card);border:4px solid #fff;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);position:relative;animation:cardIn .6s cubic-bezier(.34,1.56,.64,1) backwards;transition:transform .25s}.char-card:hover{transform:translateY(-5px) rotate(-.4deg)}@keyframes cardIn{0%{opacity:0;transform:translateY(40px) scale(.9)}to{opacity:1;transform:none}}.char-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px}.char-index{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--orange));color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px #00000026;flex-shrink:0}.pinyin-bubble{flex:1;margin:0 10px;text-align:center;background:#e8f3ff;border:3px solid #C3E4FF;border-radius:16px;padding:4px 8px;font-size:19px;color:#2e96db;min-height:36px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}.speak-btn{border:none;background:#fff3c9;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;box-shadow:0 4px #e67e1b4d;transition:.2s}.speak-btn:hover{transform:scale(1.15) rotate(10deg)}.stage-wrap{padding:6px 16px 0;display:flex;justify-content:center}.tianzigge{position:relative;width:240px;height:240px;border-radius:20px;overflow:hidden;background:#fffef8;border:5px solid #FF9A3D;box-shadow:inset 0 0 0 4px #fff0d6,0 6px #e67e1b40}.tianzigge:before,.tianzigge:after{content:"";position:absolute;left:0;right:0;top:50%;pointer-events:none;z-index:1}.tianzigge:before{border-top:3px dashed var(--stroke-red);transform:translateY(-50%)}.tianzigge:after{inset:0 auto 0 50%;border-left:3px dashed var(--stroke-red);transform:translate(-50%)}.tianzigge .diag{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.5}.tianzigge .hanzi-target{position:absolute;inset:0;z-index:2}.tianzigge .hanzi-target svg{width:100%!important;height:100%!important;display:block}.tianzigge .writer-step-base,.tianzigge .writer-step-top{pointer-events:none}.tianzigge .writer-step-base path,.tianzigge .writer-step-top path{stroke:none}.tianzigge .writer-step-top path.step-new{animation:stepPop .35s ease}@keyframes stepPop{0%{opacity:0}to{opacity:1}}.loading-mask{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:#fffef8d9;font-size:17px;color:var(--ink-soft)}.card-btns button:disabled{opacity:.45;cursor:wait;filter:grayscale(.4)}.btn-disabled{opacity:.45;pointer-events:none;filter:grayscale(.4)}.quiz-badge{position:absolute;top:8px;right:8px;z-index:5;background:var(--pink);color:#fff;font-size:13px;border-radius:999px;padding:3px 10px;display:none;animation:blink 1s infinite}.quiz-on .quiz-badge{display:block}@keyframes blink{50%{opacity:.6}}.stroke-info{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 4px;font-size:16px}.stroke-count{background:#fff0d6;border-radius:999px;padding:3px 12px;border:2px solid #FFE0A6}.stroke-dots{display:flex;gap:5px;flex-wrap:wrap;max-width:150px;justify-content:flex-end}.stroke-dots i{width:14px;height:14px;border-radius:50%;background:#eee0cc;border:2px solid #fff;transition:.3s;display:block}.stroke-dots i.done{background:var(--green);transform:scale(1.15);box-shadow:0 0 8px #58cc6bb3}.stroke-dots i.now{background:var(--orange);animation:dotPulse .8s infinite}@keyframes dotPulse{50%{transform:scale(1.4)}}.card-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:12px 14px 6px}.card-btns button{border:none;border-radius:14px;padding:9px 4px;font-size:15px;color:#fff;cursor:pointer;transition:.2s;box-shadow:0 4px #0000002e}.card-btns button:hover{transform:translateY(-2px)}.card-btns button:active{transform:translateY(2px);box-shadow:none}.btn-play{background:linear-gradient(180deg,#6fde82,#3aa64f)}.btn-prev{background:linear-gradient(180deg,#ffd36f,#e69a1b)}.btn-next{background:linear-gradient(180deg,#6fcbff,#2e96db)}.btn-quiz{background:linear-gradient(180deg,#ff9cc2,#e85a90);width:100%;border:none;border-radius:14px;padding:9px 4px;font-size:15px;color:#fff;cursor:pointer;box-shadow:0 4px #0000002e;transition:.2s}.btn-quiz:hover{transform:translateY(-2px)}.btn-reset{background:#c9bbae;box-shadow:0 5px #a08e80}.card-btns2{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px}.card-btns2 button{border-radius:14px}.stroke-hint{text-align:center;font-size:14px;color:var(--ink-soft);padding:0 12px 12px;min-height:22px}.empty-tip{text-align:center;padding:40px;background:#fffdf3cc;border-radius:26px;border:4px dashed #FFC7DE;margin-top:10px}.empty-tip .big{font-size:64px;animation:mascotJump 2s infinite}.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}.tip-card{background:#fffdf3eb;border:3px solid #fff;border-radius:22px;padding:16px;text-align:center;box-shadow:0 6px #5a3d2b1a;transition:.25s}.tip-card:hover{transform:translateY(-4px) rotate(1deg)}.tip-e{font-size:38px}.tip-card h3{font-size:19px;margin:6px 0 4px}.tip-card p{font-size:14px;color:var(--ink-soft)}.footer{text-align:center;margin:22px 0 60px;color:var(--ink-soft);font-size:15px}.login-wrap{max-width:460px;margin:26px auto}.login-card{background:var(--card);border:4px solid #fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 26px;text-align:center;position:relative;overflow:hidden}.login-card:before{content:"";position:absolute;top:0;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,var(--pink) 0 28px,var(--yellow) 28px 56px,var(--green) 56px 84px,var(--blue) 84px 112px)}.login-mascot{font-size:64px;margin:8px 0}.login-card h2{font-size:30px;letter-spacing:2px}.login-desc{color:var(--ink-soft);font-size:16px;margin:8px 0 18px}.login-card input{display:block;width:100%;font-size:19px;margin-bottom:12px}.login-btn{width:100%;margin-top:4px}.back-link{display:inline-block;margin-top:16px;font-size:16px;color:var(--blue-d)}.pop-in{animation:cardIn .6s cubic-bezier(.34,1.56,.64,1) backwards}.pop-in.d1{animation-delay:.1s}.pop-in.d2{animation-delay:.2s}.pop-in.d3{animation-delay:.3s}.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:99;display:flex;flex-direction:column;gap:10px;align-items:center}.toast{background:#5a3d2b;color:#fff;border-radius:999px;padding:12px 22px;font-size:17px;box-shadow:0 8px 20px #00000040;animation:toastIn .4s cubic-bezier(.34,1.56,.64,1);border:3px solid #fff;transition:opacity .4s,transform .4s}.toast.leaving{opacity:0;transform:translateY(10px)}@keyframes toastIn{0%{transform:translateY(30px) scale(.8);opacity:0}}.confetti{position:fixed;inset:0;pointer-events:none;z-index:98;overflow:hidden}.confetti span{position:absolute;top:-20px;font-size:22px;animation:fall linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}@media (max-width:900px){.topbar{max-width:100%;margin:10px 10px 0}.wrap{padding:12px 12px 30px}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.speech{font-size:17px}.mascot{font-size:44px}}@media (max-width:640px){.sun{width:60px;height:60px;top:14px;left:16px}.sun-face{font-size:18px}.cloud,.balloon{display:none}.star{font-size:16px}.rainbow{width:340px;height:170px;border-width:12px}.topbar{top:0;margin:6px 6px 0;padding:6px 10px;border-radius:16px;gap:6px}.logo{gap:8px}.logo-bubble{width:34px;height:34px;font-size:17px;border-radius:12px}.logo h1{font-size:17px;letter-spacing:0;line-height:1}.logo p{display:none}.top-nav{order:3;width:100%;justify-content:center;gap:6px}.top-nav a{padding:4px 12px;font-size:13px;border-width:2px}.theme-switch{padding:4px 6px;gap:4px}.theme-switch span{display:none}.theme-dot{width:22px;height:22px;font-size:11px}.music-btn{font-size:12px;padding:5px 8px}.input-card{padding:14px}.input-row{flex-direction:column}.mascot-row{gap:8px;margin:6px 0 10px}.mascot{font-size:34px}.speech{font-size:15px;padding:8px 12px;max-width:100%}.input-row textarea{font-size:19px;min-height:68px;padding:10px 12px}.go-btn{min-width:100%;flex-direction:row;font-size:20px;padding:12px}.go-btn span br{display:none}.go-emoji{font-size:26px}.chips-label{font-size:14px;padding-top:6px}.chips button{font-size:14px;padding:6px 12px}.control-bar{padding:10px;gap:8px}.ctrl{font-size:14px;gap:6px}input[type=range]{width:100px}.cute-btn{font-size:14px;padding:8px 12px}.cute-btn.small{font-size:13px;padding:7px 10px}.stat-bar{gap:6px;margin:10px 0}.stat-pill{font-size:14px;padding:6px 12px}.stat-pill b{font-size:16px}.bunny-progress{min-width:140px}.cards-grid{grid-template-columns:1fr;gap:14px}.char-head{padding:10px 10px 6px}.char-index{width:32px;height:32px;font-size:16px}.pinyin-bubble{font-size:16px;min-height:32px;margin:0 8px}.speak-btn{width:34px;height:34px;font-size:16px}.stage-wrap{padding:4px 10px 0}.tianzigge{width:min(220px,78vw);height:min(220px,78vw)}.card-btns{padding:10px 10px 4px;gap:6px}.card-btns button,.btn-quiz{font-size:14px;padding:9px 2px}.card-btns2{padding:0 10px 10px}.stroke-info{font-size:14px;padding:8px 12px 2px}.stroke-dots i{width:11px;height:11px}.stroke-hint{font-size:13px;min-height:20px}.loading-mask{font-size:15px}.quiz-badge{font-size:11px}.tips{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.tip-e{font-size:28px}.tip-card h3{font-size:15px}.tip-card p{font-size:12px}.footer{font-size:12px;margin:14px 0 36px}.empty-tip{padding:26px}.empty-tip .big{font-size:44px}.empty-tip p{font-size:14px}.toast{font-size:14px;padding:10px 16px;max-width:88vw;text-align:center}}@media (max-width:380px){.tianzigge{width:min(190px,80vw);height:min(190px,80vw)}.card-btns button,.btn-quiz{font-size:13px}.logo h1{font-size:18px}}