@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=ZCOOL+KuaiLe&display=swap";:root{font-family:Nunito,PingFang SC,Microsoft YaHei,sans-serif;color:#29364a;background:#fff8ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#fff8ed}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;background:radial-gradient(circle at 85% 10%,#fff0cb 0,transparent 28%),#fff8ed}.toast{position:fixed;z-index:20;top:22px;left:50%;transform:translate(-50%);padding:12px 20px;border-radius:999px;box-shadow:0 12px 30px #29364a22;font-weight:800}.toast-error{color:#8b3e25;background:#ffe0d1}.toast-success{color:#24644c;background:#d9f5d7}.loading-screen{min-height:100vh;display:grid;place-content:center;text-align:center;color:#8c96a8;font-weight:800}.mascot{font-size:70px;animation:bob 1.4s ease-in-out infinite}.auth-layout{min-height:100vh;display:grid;grid-template-columns:minmax(280px,45%) 1fr;max-width:1250px;margin:auto}.auth-hero{position:relative;overflow:hidden;padding:12vh 10%;color:#fff;background:#5167d9;border-radius:0 0 110px}.auth-hero:before,.auth-hero:after{content:"";position:absolute;border-radius:50%;background:#7184e5;opacity:.55}.auth-hero:before{width:310px;height:310px;right:-90px;top:10%}.auth-hero:after{width:180px;height:180px;left:-90px;bottom:8%}.brand-mark{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#ffcf5c;color:#6d4e1a;font-size:30px;transform:rotate(-8deg);box-shadow:0 8px #dfaa3d}.eyebrow{margin:30px 0 10px;letter-spacing:.16em;font-size:11px;font-weight:900;opacity:.7}.auth-hero h1{position:relative;z-index:1;margin:0;font-family:ZCOOL KuaiLe,sans-serif;font-size:clamp(58px,8vw,100px);line-height:.95;letter-spacing:.05em}.auth-hero h1 span{color:#ffcf5c}.hero-copy{position:relative;z-index:1;margin-top:34px;line-height:1.8;font-weight:800;font-size:18px}.floating-keys{position:absolute;right:15%;bottom:13%;display:flex;gap:14px;transform:rotate(8deg)}.floating-keys b{display:grid;place-items:center;width:66px;height:66px;border-radius:15px;color:#5167d9;background:#fff;font-size:27px;box-shadow:0 8px #3e50b5}.floating-keys b:nth-child(2){transform:translateY(-28px) rotate(10deg);background:#ffcf5c}.floating-keys b:nth-child(3){transform:rotate(-12deg);background:#ff9f8e}.auth-card{width:min(430px,88%);align-self:center;justify-self:center;padding:30px}.auth-tabs{display:flex;gap:8px;border-bottom:1px solid #e8e0d4;margin-bottom:34px}.auth-tabs button{border:0;background:transparent;color:#a2a8b4;font-weight:800;padding:12px 18px;border-bottom:3px solid transparent}.auth-tabs button.active{color:#5167d9;border-color:#5167d9}.auth-heading{display:flex;gap:16px;align-items:flex-start}.sun{font-size:35px}.auth-heading h2{margin:0 0 5px;font-size:28px}.auth-heading p,.auth-card label{color:#8c96a8;font-size:13px}.auth-card form{margin-top:28px}.auth-card label,.profile-card label{display:block;margin:18px 0;font-weight:800}.auth-card input,.profile-card input{display:block;width:100%;margin-top:8px;padding:14px 16px;border:2px solid #eee6da;border-radius:13px;outline:0;color:#29364a;background:#fffdf9}.auth-card input:focus,.profile-card input:focus{border-color:#9eacf4;box-shadow:0 0 0 4px #5167d915}.primary-button,.secondary-button{border:0;border-radius:13px;padding:14px 24px;font-weight:900;transition:transform .15s,box-shadow .15s}.primary-button{color:#fff;background:#5167d9;box-shadow:0 4px #3e50b5}.primary-button:hover{transform:translateY(-2px);box-shadow:0 6px #3e50b5}.primary-button:disabled{opacity:.6;cursor:wait}.secondary-button{color:#5167d9;background:#edf0ff}.full{width:100%;margin-top:12px}.safe-note{margin:28px 0 0;color:#a2a8b4;text-align:center;font-size:12px}.avatar-picker{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:18px 0;color:#8c96a8;font-size:12px;font-weight:800}.avatar-picker span{width:100%}.avatar-picker button{width:37px;height:37px;padding:0;border:2px solid transparent;border-radius:11px;background:#f4eee5;font-size:20px}.avatar-picker button.selected{border-color:#5167d9;background:#e9edff}.topbar{height:76px;display:flex;justify-content:space-between;align-items:center;padding:0 max(24px,calc((100% - 1120px)/2));background:#fffdf9dd;border-bottom:1px solid #eee6da}.brand-button,.profile-button,.logout-button,.back-button{border:0;background:transparent;color:#29364a}.brand-button{display:flex;align-items:center;gap:10px;font-size:17px}.brand-button span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#ffcf5c;font-size:20px}.top-actions{display:flex;align-items:center;gap:18px}.stat-pill{padding:9px 14px;border-radius:999px;color:#88651d;background:#fff1c8}.profile-button{display:flex;gap:7px;align-items:center;font-weight:800}.profile-button span{font-size:23px}.logout-button{color:#a2a8b4;font-size:12px}.dashboard-page{width:min(1120px,calc(100% - 40px));margin:auto;padding:58px 0 80px}.welcome-row{display:flex;justify-content:space-between;align-items:end}.welcome-row .eyebrow,.map-header .eyebrow,.result-page .eyebrow{margin-top:0;color:#5167d9}.welcome-row h1{margin:0;font-size:34px}.welcome-row p:not(.eyebrow){color:#8c96a8}.streak-card{display:flex;gap:12px;align-items:center;padding:15px 22px;border:1px solid #eee6da;border-radius:18px;background:#fffdf9}.streak-card>span{font-size:28px}.streak-card strong,.streak-card small{display:block}.streak-card strong{font-size:24px}.streak-card small{color:#8c96a8;font-size:11px}.map-card{margin-top:36px;padding:34px;border:1px solid #eee6da;border-radius:26px;background:#fffdf9;box-shadow:0 15px 45px #574d3810}.map-header{display:flex;justify-content:space-between;align-items:end}.map-header h2{margin:0;font-size:26px}.map-progress{width:190px;color:#8c96a8;font-size:12px;text-align:right}.map-progress>span{display:block;margin-bottom:8px}.map-progress>div,.progress-track{overflow:hidden;height:7px;border-radius:9px;background:#f0ece4}.map-progress i,.progress-track i{display:block;height:100%;border-radius:inherit;background:#ffbf46;transition:width .3s}.path-map{margin-top:35px}.chapter-block{padding:22px 0;border-top:1px dashed #e4dbce}.chapter-title{display:flex;align-items:center;gap:14px}.chapter-number{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;color:#fff;background:#ff9f8e;font-size:13px;font-weight:900}.chapter-block:nth-child(2) .chapter-number{background:#78c9a8}.chapter-block:nth-child(3) .chapter-number{background:#8d9cef}.chapter-block:nth-child(4) .chapter-number{background:#f4bd53}.chapter-block:nth-child(5) .chapter-number{background:#bd91e9}.chapter-title strong,.chapter-title small{display:block}.chapter-title small{margin-top:3px;color:#a2a8b4;font-size:11px}.lesson-row{display:flex;gap:13px;margin:18px 0 0 52px}.lesson{position:relative;min-width:125px;min-height:104px;padding:15px 12px;border:2px solid #eee6da;border-radius:16px;text-align:left;background:#fffdf9;transition:transform .15s,border .15s}.lesson:not(.lesson-locked):hover{transform:translateY(-4px);border-color:#aab5f5}.lesson-icon{display:block;margin-bottom:8px;font-size:21px}.lesson strong,.lesson small{display:block}.lesson strong{font-size:13px}.lesson small{margin-top:5px;color:#a2a8b4;font-size:10px}.lesson-available{border-color:#ffca63;box-shadow:0 4px #f1b950}.lesson-completed{border-color:#9bdaa9;background:#f7fff4}.lesson-locked{opacity:.58;cursor:not-allowed}.bottom-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:20px}.quote-card,.reward-card{display:flex;align-items:center;gap:15px;min-height:105px;padding:22px;border-radius:20px}.quote-card{color:#395a55;background:#ddf3df}.quote-card>span{font-size:28px}.quote-card strong{font-size:13px}.quote-card p,.reward-card p{margin:6px 0 0;font-size:12px}.reward-card{display:block;background:#fff0ca}.section-mini-title{display:flex;gap:8px;align-items:center}.reward-list{display:flex;gap:12px;margin-top:12px;font-size:27px}.reward-card>p{color:#967538}.training-page{min-height:calc(100vh - 76px);outline:0;padding:34px 20px 70px}.training-top{display:flex;align-items:center;justify-content:space-between;width:min(820px,100%);margin:auto}.back-button{color:#7f8aa0;font-weight:800}.training-title{text-align:center}.training-title span{color:#5167d9;font-size:11px;font-weight:900;letter-spacing:.12em}.training-title h1{margin:6px 0 0;font-size:25px}.training-time{color:#8c96a8;font-weight:800}.training-card{width:min(820px,100%);margin:35px auto 0;padding:30px 34px;border:1px solid #eee6da;border-radius:26px;background:#fffdf9;box-shadow:0 15px 45px #574d3810}.training-intro{display:flex;align-items:center;gap:14px;color:#8c96a8;font-size:13px}.training-intro p{margin:0}.lesson-badge{padding:7px 11px;border-radius:999px;color:#8b671f;background:#fff0c6;font-size:11px;font-weight:900;white-space:nowrap}.prompt-box{margin:26px 0 20px;padding:22px;border-radius:18px;background:#f5f6ff;text-align:center}.prompt-label{color:#8c96a8;font-size:12px;font-weight:800}.prompt-text{min-height:52px;margin-top:12px;color:#d7dce6;font-size:27px;font-weight:900;letter-spacing:.11em;word-break:break-word}.prompt-text span{display:inline-block;padding:3px 1px}.prompt-text span.typed{color:#67b889}.prompt-text span.current{color:#5167d9;border-bottom:4px solid #ffbf46;animation:pulse 1s infinite}.training-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:20px 0;text-align:center}.training-stats div{border-right:1px solid #eee6da}.training-stats div:last-child{border:0}.training-stats strong,.training-stats span{display:block}.training-stats strong{font-size:20px;color:#5167d9}.training-stats span{margin-top:4px;color:#a2a8b4;font-size:10px}.progress-track{margin:25px 0 32px;height:9px}.progress-track i{background:#67c889}.keyboard{padding:21px 10px;border-radius:18px;background:#f2eee6}.keyboard-row{display:flex;justify-content:center;gap:6px;margin:6px 0}.keyboard-row:nth-child(2){padding-left:18px}.keyboard-row:nth-child(3){padding-left:36px}.keyboard kbd{display:grid;place-items:center;width:clamp(24px,7vw,53px);height:clamp(30px,7vw,47px);border:0;border-bottom:4px solid #d3cbbb;border-radius:9px;color:#7c8492;background:#fffdf9;font-size:16px;font-weight:900;text-transform:uppercase}.keyboard kbd.is-next{color:#fff;background:#5167d9;border-color:#3e50b5;transform:translateY(-3px);box-shadow:0 7px #ffbf46}.keyboard-hint{margin:20px 0 0;color:#a2a8b4;text-align:center;font-size:11px}.finish-button{display:block;margin:25px auto 0}.result-page{width:min(600px,calc(100% - 40px));margin:auto;padding:14vh 0;text-align:center}.result-confetti{font-size:65px;animation:bob 1.4s ease-in-out infinite}.result-page h1{margin:0;font-size:42px}.result-subtitle{color:#8c96a8}.result-score{display:grid;grid-template-columns:repeat(3,1fr);margin:38px 0 25px;padding:25px;border-radius:22px;background:#fffdf9;box-shadow:0 12px 35px #574d3810}.result-score div{border-right:1px solid #eee6da}.result-score div:last-child{border:0}.result-score span,.result-score strong,.result-score small{display:block}.result-score span{font-size:20px}.result-score strong{color:#5167d9;font-size:28px}.result-score small{color:#a2a8b4;font-size:11px}.new-reward{padding:13px;border-radius:12px;color:#73591c;background:#fff0ca;font-size:13px;font-weight:800}.result-actions{display:flex;justify-content:center;gap:12px;margin-top:28px}.profile-page{width:min(520px,calc(100% - 40px));margin:auto;padding:45px 0}.profile-card{margin-top:20px;padding:36px;border-radius:25px;background:#fffdf9;box-shadow:0 15px 45px #574d3810}.profile-avatar{display:grid;place-items:center;width:90px;height:90px;margin:auto;border-radius:30px;background:#fff0ca;font-size:52px}.profile-card .eyebrow,.profile-card h1{text-align:center}.profile-card h1{margin:0 0 35px;font-size:26px}.profile-avatars{margin-top:25px}@keyframes bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}@keyframes pulse{50%{opacity:.4}}@media(max-width:760px){.auth-layout{display:block}.auth-hero{min-height:330px;padding:38px 28px;border-radius:0 0 55px 55px}.auth-hero h1{font-size:63px}.hero-copy{margin-top:18px;font-size:14px}.floating-keys{right:10%;bottom:25px}.floating-keys b{width:48px;height:48px;font-size:20px}.auth-card{padding:32px 0 50px}.topbar{padding:0 17px}.brand-button strong{display:none}.top-actions{gap:9px}.logout-button{display:none}.profile-button{font-size:12px}.dashboard-page{width:min(100% - 28px,600px);padding-top:35px}.welcome-row{align-items:start;display:block}.welcome-row h1{font-size:28px}.streak-card{display:inline-flex;margin-top:12px}.map-card{padding:20px 14px;border-radius:20px}.map-header{align-items:start}.map-progress{width:115px}.lesson-row{gap:8px;margin-left:0;overflow-x:auto;padding:6px 0 10px}.lesson{min-width:125px}.bottom-grid{grid-template-columns:1fr}.training-card{padding:20px 14px}.training-top{gap:5px}.training-title h1{font-size:19px}.training-intro{align-items:flex-start;flex-direction:column;gap:8px}.prompt-text{font-size:21px;letter-spacing:.06em}.training-stats strong{font-size:17px}.training-stats span{font-size:9px}.result-page{padding-top:10vh}.result-page h1{font-size:34px}}.guest-button{display:block;width:100%;margin-top:17px;border:0;color:#5167d9;background:transparent;font-size:13px;font-weight:900}.guest-button:hover{text-decoration:underline}.guest-button:disabled{opacity:.5;cursor:wait}.guest-pill{padding:7px 11px;border-radius:999px;color:#8b671f;background:#fff0c6;font-size:11px;font-weight:900}.register-button{border:0;border-radius:10px;padding:9px 13px;color:#5167d9;background:#edf0ff;font-size:12px;font-weight:900}.guest-banner{display:flex;align-items:center;gap:14px;margin-top:25px;padding:17px 20px;border:1px solid #f1d996;border-radius:17px;background:#fff4d4}.guest-banner>span{font-size:28px}.guest-banner strong,.guest-banner p{display:block}.guest-banner p{margin:4px 0 0;color:#967538;font-size:12px}.guest-banner .secondary-button{margin-left:auto;white-space:nowrap}.guest-lock-card{margin:15px 0 0 52px;padding:15px 18px;border-radius:14px;color:#73591c;background:#fff6df;font-size:12px;font-weight:800}.lesson-signup-required{opacity:.62;border-style:dashed;cursor:pointer}.lesson-signup-required:hover{border-color:#aab5f5}.guest-unlock-card{display:flex;flex-direction:column;gap:8px;margin-top:22px;padding:18px;border-radius:16px;color:#73591c;background:#fff0ca;font-size:13px}.guest-unlock-card span{color:#967538;font-size:12px}.guest-unlock-card .primary-button{align-self:center}.finger-badge{padding:7px 11px;border-radius:999px;color:#3f6c61;background:#ddf3df;font-size:11px;font-weight:900;white-space:nowrap}.prompt-text .space-token{min-width:58px;margin:0 3px;padding:5px 7px;border:2px solid #d7dce6;border-radius:8px;color:#8c96a8;background:#fffdf9;font-size:13px;letter-spacing:0}.prompt-text .space-token.typed{border-color:#9bdaa9;color:#67b889;background:#f2fff0}.prompt-text .space-token.current{border-color:#5167d9;color:#5167d9;background:#edf0ff}.spacebar-key{width:min(360px,78%);height:38px;display:grid;place-items:center;margin:12px auto 0;border-bottom:4px solid #d3cbbb;border-radius:9px;color:#7c8492;background:#fffdf9;font-size:12px;font-weight:900}.spacebar-key.is-next{color:#fff;background:#5167d9;border-color:#3e50b5;transform:translateY(-3px);box-shadow:0 7px #ffbf46}@media(max-width:760px){.register-button{padding:8px 9px;font-size:10px}.guest-banner{align-items:flex-start;flex-wrap:wrap}.guest-banner .secondary-button{width:100%;margin:5px 0 0}.guest-lock-card{margin-left:0}}