:root{--yellow:#ffd966;--yellow-dark:#c9a800;--blue:#99d9ea;--blue-dark:#5ba8be;--peach:#fff8f0;--mint:#b5ead7;--mint-dark:#7ab89b;--pink:#ffd1dc;--pink-dark:#cc98a8;--brown:#5d4037;--brown-light:#7a5c4f;--border:#e1d9cd;--white:#fff;--font:"Itim",cursive}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}body,html{height:100%;font-family:var(--font)}.app,body,html{width:100%;overflow:hidden;background:var(--peach)}.app{height:100dvh;max-width:430px;margin:0 auto;position:relative}.app,.screen{display:flex;flex-direction:column}.screen{position:absolute;inset:0;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s;will-change:transform;overflow-y:auto;overflow-x:hidden}.screen-hidden{transform:translateX(100%)}.screen-hidden,.screen-left{opacity:0;pointer-events:none}.screen-left{transform:translateX(-100%)}.screen-visible{transform:translateX(0);opacity:1}.top-bar{background:var(--yellow);padding:env(safe-area-inset-top,44px) 16px 20px;text-align:center;position:relative;flex-shrink:0;border-radius:0 0 28px 28px}.top-bar h1{font-size:20px;font-weight:800;color:var(--brown)}.top-bar p{font-size:12px;color:#5c3d10;font-weight:600;margin-top:2px}.btn-back{position:absolute;left:14px;bottom:18px;width:36px;height:36px;background:hsla(0,0%,100%,.55);border-radius:50%;justify-content:center;border:none;cursor:pointer}.bottom-nav,.btn-back{display:flex;align-items:center}.bottom-nav{background:var(--white);border-radius:24px 24px 0 0;padding:10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);justify-content:space-around;border-top:2px solid var(--border);flex-shrink:0}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:6px 12px;border-radius:16px;background:none;border:none;font-family:var(--font)}.nav-item.active{background:#fff0b3}.nav-item .nav-icon{font-size:22px}.nav-item .nav-label{font-size:16px;font-weight:700;color:#5c4238}.nav-item.active .nav-label{color:#4a3020}.nav-home{background:none;border-radius:0;box-shadow:none}.nav-home .nav-label{color:var(--brown)}.content{flex:1 1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch}.jelly-card{border-radius:28px;padding:18px;background:var(--white);border:2px solid var(--border);box-shadow:0 5px 0 var(--border);transition:transform .12s,box-shadow .12s}.jelly-card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--border)}.jelly-card.blue{background:#d6f2fa;box-shadow:0 5px 0 #a3c9d8;border-color:#a3c9d8}.jelly-card.green{background:#ccf0e0;box-shadow:0 5px 0 #88c9aa;border-color:#88c9aa}.jelly-card.pink{background:#ffe4ec;box-shadow:0 5px 0 #d9a8b5;border-color:#d9a8b5}.jelly-card.yellow{background:#fff3cc;box-shadow:0 5px 0 #d9bc6a;border-color:#d9bc6a}.jelly-card.mint{background:#c8f0e0;box-shadow:0 5px 0 #80c4a0;border-color:#80c4a0}.btn-primary{display:block;width:100%;padding:16px;background:linear-gradient(135deg,#ffd966,#ffa726);color:var(--brown);font-family:var(--font);font-size:16px;font-weight:700;border:none;border-radius:50px;cursor:pointer;box-shadow:0 5px 0 #c47d00;transition:transform .1s,box-shadow .1s}.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #c47d00}.btn-secondary{display:block;width:100%;padding:14px;background:var(--white);color:var(--brown);font-family:var(--font);font-size:15px;font-weight:600;border:2px solid var(--border);border-radius:50px;cursor:pointer;box-shadow:0 4px 0 var(--border);transition:transform .1s,box-shadow .1s}.btn-secondary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--border)}.info-card{background:var(--white);border-radius:24px;padding:18px;border:2px solid var(--border);box-shadow:0 5px 0 var(--border)}.info-card h2,.info-card h3{font-size:16px;font-weight:800;color:var(--brown);margin-bottom:10px}.info-card li,.info-card p{font-size:13px;color:var(--brown);line-height:1.7}.info-card ul{padding-left:18px}.sq3r-step{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.sq3r-step:last-child{border-bottom:none}.sq3r-letter{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0}.sq3r-text h4{font-size:14px;font-weight:700;color:var(--brown)}.sq3r-text p{font-size:12px;color:var(--brown-light);margin-top:2px;line-height:1.5}.quiz-header{background:var(--yellow);padding:env(safe-area-inset-top,44px) 16px 24px;position:relative;border-radius:0 0 28px 28px;flex-shrink:0}.quiz-meta{display:flex;justify-content:space-between;align-items:center}.quiz-title{font-size:16px;font-weight:800;color:var(--brown);margin-top:10px;text-align:center}.quiz-progress-bar{background:hsla(0,0%,100%,.4);border-radius:20px;height:8px;margin-top:12px;overflow:hidden}.quiz-progress-fill{background:var(--brown);height:100%;border-radius:20px;transition:width .4s}.q-counter,.q-score{font-size:12px;font-weight:700;color:var(--brown)}.q-score{background:hsla(0,0%,100%,.5);padding:4px 10px;border-radius:20px}.question-card{background:var(--white);border-radius:24px;padding:20px;border:2px solid var(--border);box-shadow:0 5px 0 var(--border)}.question-type{font-size:11px;font-weight:700;background:var(--yellow);color:var(--brown);padding:4px 12px;border-radius:20px;display:inline-block;margin-bottom:10px}.question-text{font-size:16px;font-weight:600;color:var(--brown);line-height:1.6}.choice-btn{width:100%;padding:14px 16px;background:var(--white);border:2px solid var(--border);border-radius:18px;font-family:var(--font);font-size:14px;font-weight:500;color:var(--brown);cursor:pointer;text-align:left;transition:all .15s;margin-bottom:10px;box-shadow:0 3px 0 var(--border)}.choice-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--border)}.choice-btn.selected{background:#d6eeff;border-color:#4a90d9;box-shadow:0 3px 0 #4a90d9;font-weight:700}.choice-btn.correct{background:#ccf0e0;border-color:#7ab89b;box-shadow:0 3px 0 #7ab89b}.choice-btn.wrong{background:#ffd9d9;border-color:#d98080;box-shadow:0 3px 0 #d98080}.essay-area{width:100%;min-height:120px;background:var(--white);border:2px solid var(--border);border-radius:18px;padding:14px;font-family:var(--font);font-size:16px;color:var(--brown);resize:none;outline:none}.essay-area:focus{border-color:var(--yellow-dark)}.passage-card{background:#fffdf5;border:2px solid var(--border);border-radius:20px;padding:18px 18px 16px;box-shadow:0 4px 0 var(--border);flex-shrink:0;max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.passage-intro{font-size:13px;font-weight:700;color:var(--brown-light);margin-bottom:10px}.passage-title{font-size:18px;font-weight:800;color:var(--brown);text-align:center;margin-bottom:10px}.passage-text{font-size:16px;color:var(--brown);line-height:1.95;white-space:pre-line}.passage-source{font-size:11px;color:var(--brown-light);margin-top:12px;text-align:right}.section-q{background:var(--white);border-radius:20px;padding:16px;border:2px solid var(--border);box-shadow:0 4px 0 var(--border)}.section-q-text{font-size:15px;line-height:1.6;margin-bottom:12px;white-space:pre-line}.section-q-label,.section-q-text{font-weight:700;color:var(--brown)}.section-q-label{font-size:13px;margin-bottom:4px;padding-left:4px}.feedback-box{border-radius:18px;padding:14px 16px;font-size:13px;font-weight:600}.feedback-box.correct{background:#ccf0e0;color:#2e6b4a;border:2px solid #7ab89b}.feedback-box.wrong{background:#ffd9d9;color:#8b2020;border:2px solid #d98080}.form-label{font-size:13px;font-weight:700;color:var(--brown);margin-bottom:6px;display:block}.form-input{width:100%;padding:12px 14px;background:var(--white);border:2px solid var(--border);border-radius:16px;font-family:var(--font);font-size:16px;color:var(--brown);outline:none;transition:border-color .2s}.form-input:focus{border-color:var(--yellow-dark)}.form-group{display:flex;flex-direction:column;gap:6px}.register-two-col{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}@media (max-width:480px){.register-two-col{grid-template-columns:1fr}}.welcome-hero{background:var(--yellow);padding:env(safe-area-inset-top,50px) 20px 40px;text-align:center;position:relative;overflow:hidden;border-radius:0 0 50px 50px;flex-shrink:0}.welcome-hero h1{font-size:24px;font-weight:800;color:var(--brown);line-height:1.3}.welcome-hero p{font-size:13px;color:#5c3d10;margin-top:6px;font-weight:600}.cloud{position:absolute;background:var(--pink);border-radius:50px;opacity:.6;pointer-events:none}.mascot{font-size:72px;display:block;margin:20px auto 0;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .4s ease both}.step-item{display:flex;align-items:flex-start;gap:12px;background:var(--white);border-radius:20px;padding:14px 16px;border:2px solid var(--border);box-shadow:0 4px 0 var(--border)}.step-num{width:32px;height:32px;background:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--brown);flex-shrink:0}.step-text{font-size:13px;color:var(--brown);font-weight:500;line-height:1.5}.lesson-item{display:flex;align-items:center;gap:14px;background:var(--white);border-radius:20px;padding:16px;border:2px solid var(--border);box-shadow:0 4px 0 var(--border);cursor:pointer;transition:transform .1s}.lesson-item:active{transform:translateY(3px)}.lesson-num{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--brown);flex-shrink:0}.lesson-info h2{font-size:14px;font-weight:700;color:var(--brown)}.lesson-info p{font-size:11px;color:var(--brown-light);margin-top:2px}.menu-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.menu-card{border-radius:24px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;cursor:pointer;transition:transform .12s;border:2px solid transparent}.menu-card:active{transform:translateY(3px)}.icon-box{width:48px;height:48px;background:hsla(0,0%,100%,.55);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px}.mc-title{font-size:13px;font-weight:700;color:var(--brown);line-height:1.3}.mc-sub{font-size:11px;color:var(--brown-light)}.mc-blue{background:#cbf0fa;box-shadow:0 5px 0 #88c0d4;border-color:#88c0d4}.mc-green{background:#c4edd8;box-shadow:0 5px 0 #7ab89b;border-color:#7ab89b}.mc-pink{background:#ffd9e5;box-shadow:0 5px 0 #cca0af;border-color:#cca0af}.mc-yellow{background:#fff3cc;box-shadow:0 5px 0 #d9bc6a;border-color:#d9bc6a}.mc-mint{background:#c8f0e0;box-shadow:0 5px 0 #78bca0;border-color:#78bca0}.section-label{font-size:12px;font-weight:700;color:var(--brown-light);text-transform:uppercase;letter-spacing:.8px;padding:4px 0 0}.result-hero{text-align:center;padding:30px 20px}.result-emoji{font-size:80px;display:block;animation:bounce 1s ease-in-out infinite}.result-score{font-size:52px;font-weight:800;color:var(--brown);margin:10px 0}.result-label{font-size:16px;color:var(--brown-light)}.result-detail{display:flex;gap:10px;justify-content:center;margin:16px 0}.result-pill{background:var(--white);border:2px solid var(--border);border-radius:50px;padding:8px 18px;font-size:13px;font-weight:600;color:var(--brown);box-shadow:0 3px 0 var(--border)}.action-card{border-radius:24px;padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .1s}.action-card:active{transform:translateY(3px)}.ac-icon{font-size:36px;flex-shrink:0}.ac-text h3{font-size:15px;font-weight:700;color:var(--brown)}.ac-text p{font-size:12px;color:var(--brown-light);margin-top:3px}.lesson-detail-header{padding:env(safe-area-inset-top,44px) 16px 24px;text-align:center;position:relative;border-radius:0 0 28px 28px;flex-shrink:0}.lesson-detail-header h2{font-size:18px;font-weight:800;color:var(--brown)}.lesson-detail-header p{font-size:12px;color:#5c3d10;margin-top:4px;font-weight:600}.saving-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--brown);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:600;z-index:200;pointer-events:none;animation:fadeIn .3s ease}.welcome-topbar{display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top, 44px) + 2vh) 16px 14px;position:relative;flex-shrink:0;background:var(--peach)}.welcome-topbar-title{font-size:18px;font-weight:700;color:var(--brown)}.btn-back-square{position:absolute;left:16px;bottom:14px;width:40px;height:40px;background:var(--yellow);border-radius:14px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 4px 0 var(--yellow-dark);transition:transform .1s,box-shadow .1s}.btn-back-square:active{transform:translateY(3px);box-shadow:0 1px 0 var(--yellow-dark)}.welcome-content{gap:18px!important;padding-top:12px!important;padding-bottom:12px!important}.welcome-cloud-section{padding:8px 4px}.w-star{position:absolute;pointer-events:none;font-style:normal;line-height:1;animation:wsFloat 3s ease-in-out infinite}.ws-1{font-size:22px;color:#5cc8c8;top:0;right:2%;animation-delay:0s}.ws-2{font-size:18px;color:#f9a87c;top:8%;right:7%;animation-delay:.4s}.ws-3{font-size:14px;color:#5ab8f0;bottom:6%;left:1%;animation-delay:.8s}.ws-4{font-size:20px;color:#f9d94c;bottom:0;right:2%;animation-delay:1.2s}.ws-5{font-size:16px;color:#c85ce0;top:4%;left:1%;animation-delay:.6s}.ws-6{font-size:12px;color:#5cc88c;top:18%;left:6%;animation-delay:1s}@keyframes wsFloat{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(20deg)}}.welcome-cloud-section{position:relative;display:flex;justify-content:center;align-items:center;width:100%;aspect-ratio:auto;padding:12px 0}.welcome-cloud-section img{width:100%;max-width:380px;height:auto;object-fit:contain}.cloud-title-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:26px;font-weight:800;color:#3d1020;line-height:1.45;width:85%;max-width:300px;z-index:2;text-shadow:2px 2px 0 hsla(0,0%,100%,.8),4px 4px 0 hsla(0,0%,100%,.5),-1px -1px 0 hsla(0,0%,100%,.6)}.cloud-wrap{position:relative;padding-top:30px;margin:0 4px}.cloud-bump{position:absolute;background:linear-gradient(160deg,#f7aabc,#ffc4a0);border-radius:50%;z-index:0}.cb1{width:55px;height:50px;top:2px;left:8%}.cb2{width:76px;height:68px;top:-8px;left:24%}.cb3{width:66px;height:60px;top:-2px;left:50%}.cb4{width:52px;height:46px;top:4px;right:8%}.cloud-body{position:relative;z-index:1;background:linear-gradient(160deg,#f7aabc,#ffc4a0);border-radius:0 0 36px 36px;padding:24px 28px 26px;text-align:center;box-shadow:0 6px 20px rgba(200,90,110,.18)}.cloud-title{font-size:22px;font-weight:800;color:#3d1020;line-height:1.45}.mascot-area{align-items:center}.mascot-area,.mascot-glow{position:relative;display:flex;justify-content:center;height:220px}.mascot-glow{width:220px;background:radial-gradient(circle,#ffe566 20%,#ffd44a 55%,rgba(255,208,60,.35) 80%,transparent 100%);border-radius:50%;align-items:flex-end;padding-bottom:10px;animation:gentlePulse 2.5s ease-in-out infinite}.mascot-glow:after{content:"";position:absolute;inset:-16px;border-radius:50%;border:2px dashed rgba(255,200,50,.4);animation:rotateSlow 12s linear infinite}.mascot-book-icon{position:relative;z-index:1;line-height:1;display:flex;align-items:center;justify-content:center}.mascot-book-icon img{width:100%;height:100%;object-fit:contain}.mascot-cloud-icon{font-size:30px;position:absolute;top:22px;left:50%;transform:translateX(-15%);z-index:2}@keyframes gentlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes rotateSlow{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.float-deco{position:absolute;font-style:normal;pointer-events:none;animation:wsFloat 2.8s ease-in-out infinite;line-height:1}.fd1{font-size:20px;color:#f9d94c;top:10px;left:14%;animation-delay:0s}.fd2{font-size:18px;color:#f9a87c;top:28px;right:11%;animation-delay:.5s}.fd3{font-size:14px;color:#5cc8c8;bottom:18px;left:9%;animation-delay:1s}.fd4{font-size:18px;color:#5ab8f0;bottom:22px;right:13%;animation-delay:1.5s}.fd5{font-size:12px;color:#c85ce0;top:48%;left:5%;animation-delay:.8s}.welcome-subtitle{font-size:22px;font-weight:700;color:var(--brown);text-align:center;margin:0}.btn-start{display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;position:relative}.btn-start:active{transform:scale(.95)}.btn-start img{width:140px;height:60px}.btn-start-title-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:25px;font-weight:400;color:#fff;margin:0;z-index:2;text-align:center;width:90%;-webkit-text-stroke:.8px #5d4037}.btn-play-icon{display:flex;align-items:center;justify-content:center;opacity:.85}.btn-play-icon img{width:24px;height:24px;object-fit:contain}.nav-icon-wrap{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px}.nav-icon-wrap img{width:40px;height:40px;object-fit:contain}.nav-home-item{background:none!important;box-shadow:none!important;border-radius:0!important}.nav-label-home{color:var(--brown)!important;font-weight:700!important}.nav-active .nav-icon-wrap{background:rgba(255,220,100,.35)}.lessons-list{display:flex;flex-direction:column;gap:12px}@media (min-width:640px){.app{max-width:95vw}.top-bar{padding:20px 24px 22px}.lesson-detail-header,.quiz-header{padding:20px 24px 26px}.welcome-topbar{padding:calc(18px + 2vh) 24px 14px}.content{padding:20px 24px;gap:16px}.top-bar h1{font-size:22px}.top-bar p{font-size:13px}.jelly-card{border-radius:32px;padding:20px 24px}.btn-primary,.btn-secondary,.btn-start{max-width:480px;margin-left:auto;margin-right:auto}.btn-primary{font-size:17px;padding:17px}.btn-secondary{font-size:16px;padding:16px}.btn-start{font-size:21px;padding:25px 28px}.question-text{font-size:17px}.choice-btn{font-size:15px;padding:16px 18px}.essay-area{font-size:15px;min-height:140px}.info-card h2,.info-card h3{font-size:17px}.info-card li,.info-card p{font-size:14px}.lesson-item{padding:18px 20px}.lesson-num{width:52px;height:52px;font-size:22px;border-radius:16px}.lesson-info h2{font-size:16px}.lesson-info p{font-size:12px}.welcome-topbar-title{font-size:20px}.cloud-title{font-size:24px}.cloud-title-overlay{font-size:28px;max-width:320px}.welcome-subtitle{font-size:24px}.mascot-glow{width:160px;height:160px}.mascot-area{height:280px}.welcome-content{gap:20px!important;padding-bottom:16px!important}.bottom-nav{padding:12px 16px 14px}.nav-item{padding:8px 16px;gap:4px}.nav-icon-wrap{width:48px;height:48px;font-size:24px}.nav-item .nav-label{font-size:20px}.step-item{padding:16px 20px}.step-text{font-size:14px}}@media (min-width:768px){.app{max-width:95vw}.bottom-nav{padding:14px 20px 16px}.nav-item{padding:8px 18px}.nav-icon-wrap{width:52px;height:52px;font-size:26px}.nav-item .nav-label{font-size:20px}.content{padding:24px 32px;gap:18px}.top-bar{padding:22px 32px 26px;border-radius:0 0 36px 36px}.top-bar h1{font-size:24px}.quiz-header{padding:22px 32px 28px}.quiz-title{font-size:19px}.lesson-detail-header{padding:22px 32px 28px;border-radius:0 0 36px 36px}.lesson-detail-header h2{font-size:21px}.lessons-list{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px}.result-score{font-size:60px}.result-label{font-size:18px}.welcome-topbar{padding:calc(22px + 2vh) 32px 16px}.cloud-title{font-size:26px}.cloud-title-overlay{font-size:26px;max-width:340px}.welcome-subtitle{font-size:22px}.btn-start img{width:170px;height:88px}.btn-start-title-overlay{font-size:25px}.mascot-glow{width:175px;height:175px}.mascot-area{height:240px}.welcome-content{gap:22px!important;padding-bottom:20px!important}}@media (min-width:1024px){.app{max-width:min(95vw,1500px);box-shadow:0 8px 60px rgba(93,64,55,.1)}.content{padding:28px 48px;gap:20px}.top-bar{padding:26px 48px 30px}.top-bar h1{font-size:26px}.lesson-detail-header,.quiz-header{padding:26px 48px 30px}.jelly-card,.question-card{padding:24px 28px}.question-text{font-size:18px}.choice-btn{font-size:16px;padding:18px 22px;margin-bottom:12px}.essay-area{min-height:160px}.btn-primary,.btn-secondary,.btn-start{max-width:520px}.btn-primary{font-size:18px;padding:20px}.menu-card{padding:20px}.icon-box{width:56px;height:56px;font-size:30px}.mc-title{font-size:14px}.result-score{font-size:72px}.welcome-topbar{padding:calc(26px + 2vh) 48px 16px}.cloud-title{font-size:28px}.welcome-subtitle{font-size:24px}.btn-start img{width:180px;height:60px}.btn-start-title-overlay{font-size:30px}.mascot-glow{width:190px;height:190px}.mascot-area{height:260px}.mascot-book-icon{font-size:72px}.welcome-content{gap:24px!important;padding-bottom:24px!important}.bottom-nav{padding:16px 24px 18px}.nav-item{padding:10px 20px;gap:5px}.nav-icon-wrap{width:56px;height:56px;font-size:28px}.nav-item .nav-label{font-size:25px}.saving-toast{bottom:100px}.cloud-title-overlay{font-size:32px;max-width:360px}}