/* Top-first navigation and a playful, responsive learning space. */
body.appTopNav{background:radial-gradient(ellipse at 5% 10%,#e8dfff80,transparent 45%),radial-gradient(ellipse at 100% 40%,#fff0d980,transparent 40%),#f8f7fd;overflow-x:clip}.appTopNav .appTopbar{position:sticky;inset:auto;top:0;z-index:50;display:flex;flex-direction:column;width:100%;height:auto;padding:16px max(24px,calc((100vw - 1280px)/2));background:#fffefaf5;backdrop-filter:blur(18px);border:0;border-bottom:1px solid #e6dff3;box-shadow:0 5px 25px #45326308;gap:14px}.topbarRow{display:flex;align-items:center;justify-content:space-between;gap:20px}.topbarRow .brand{font-size:19px}.topbarRow .brand small{font-size:8px;letter-spacing:1.8px}.topbarActions,.topbarActions .headtools{display:flex;align-items:center;gap:12px}.topbarActions .headtools>.avatar{display:none}.topbarActions #languageSwitch{margin:0;background:#f5f1ff;border:1px solid #e5daf8;color:#654694;min-height:44px}.topbarActions .iconbtn{width:44px;height:44px}.appTopNav .navlabel{display:none}.appTopNav .nav{flex-direction:row;align-items:stretch;gap:8px;margin:0;width:100%;position:relative}.appTopNav .nav>button,.navMore>summary{flex:1;justify-content:center;align-items:center;gap:10px;padding:12px 16px;min-height:46px;border-radius:12px;font-size:13px;color:#736587;display:flex;text-align:center;white-space:nowrap;transition:background .15s,transform .15s,box-shadow .15s}.appTopNav .nav>button:hover,.navMore>summary:hover{background:#f1ebfb;filter:none}.appTopNav .nav>button.active{color:#fff;background:#7750df;box-shadow:0 4px 0 #5830b2,0 7px 14px #6e4bc022;transform:translateY(-2px)}.appTopNav .nav>button>span:first-child{font-size:19px;line-height:1;min-width:18px}.appTopNav .nav>button .navtext{font-size:13px}.navMore{flex:1;position:relative}.navMore>summary{list-style:none;cursor:pointer;height:100%}.navMore>summary::-webkit-details-marker,.accountMenu>summary::-webkit-details-marker{display:none}.navMore>summary>span:first-child{font-size:17px;letter-spacing:2px}.navExtra{position:absolute;right:0;top:calc(100% + 12px);width:230px;background:#fff;border:1px solid #e4d9f2;border-radius:16px;padding:8px;box-shadow:0 14px 45px #45336522;z-index:55}.appTopNav .nav .navExtra button{display:flex;align-items:center;width:100%;min-height:46px;text-align:left;font-size:13px;padding:12px 15px}.appTopNav .nav .navExtra button[hidden]{display:none}.accountMenu{position:relative}.accountMenu>summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;font-weight:700;color:#6b5682;min-height:44px}.accountMenu .avatar{width:36px;height:36px;background:#ffe0bd;color:#91551f}.appTopNav .accountMenu .asidebottom{position:absolute;right:0;top:calc(100% + 17px);width:240px;background:#fff;border:1px solid #e6ddef;border-radius:16px;box-shadow:0 16px 40px #47306122;padding:18px;margin:0;z-index:55}.accountMenu .tip{display:none}.accountMenu .profile{margin-top:0;font-size:12px}.accountMenu .asidebottom>a{font-size:12px!important;padding:10px}.appTopNav main{margin:0 auto;max-width:1280px;width:100%;padding:22px 28px 50px}.appTopNav main>header{padding:0 0 18px;min-height:34px}.appTopNav .crumb{font-size:11px}.appTopNav .intro{margin:23px 0 26px}.appTopNav .intro h1{font-size:36px}.appTopNav #focusBanner{display:none}.appTopNav .layout{grid-template-columns:minmax(0,1fr) 280px;gap:24px}.appTopNav .levelMapHero{display:grid!important;grid-template-columns:minmax(0,1fr) 225px;gap:18px;min-height:305px;padding:32px;border-radius:24px;background:radial-gradient(circle at 90% 10%,#c795ff55,transparent 50%),linear-gradient(125deg,#30234f,#7040c6 72%,#8e5be6);box-shadow:0 8px 0 #dcd2ee,0 16px 32px #7745b420}.appTopNav .levelMapHero h2{font-size:30px!important;line-height:1.32!important;max-width:490px;color:#fff}.appTopNav .levelMapHero .eyebrow{font-size:10px;letter-spacing:1.7px;color:#ffe388}.appTopNav .levelMapHero p{font-size:13px;line-height:1.85;max-width:380px;color:#eee1ff}.appTopNav .levelMapHero .primary{background:#ffcb58;color:#442a17;border-radius:12px;padding:15px 21px;box-shadow:0 5px 0 #c38e27;min-height:48px}.appTopNav .levelMapHero .primary:hover{filter:none;background:#ffda7c;transform:translateY(-2px);box-shadow:0 7px 0 #c38e27}.appTopNav .levelMapHero .heroart{position:relative!important;right:auto;inset:auto;transform:none!important;width:225px!important;height:220px;margin:0!important}.miniPandaTrail{height:220px;min-height:220px}.miniPandaTrail>img{width:135px;height:135px;left:-6px;top:-10px;animation:pandaFloat 3.3s ease-in-out infinite}.miniTrailDots{margin-top:120px}.miniTrailDots b{width:47px;height:47px;background:#c2a0f0;border-color:#f0e5ff;color:#67428c}.miniTrailDots b:first-child{background:#ffce59;border-color:#fff6d2;color:#754920;box-shadow:0 5px 0 #c19134}.miniPandaTrail>span{color:#e5ceff;font-size:11px}.appTopNav .stats{margin-top:27px;gap:12px}.appTopNav .stat{padding:20px 17px;border-radius:17px;border-bottom-width:4px}.appTopNav .stat:nth-child(1){background:#f6efff;border-color:#e9d9fb}.appTopNav .stat:nth-child(2){background:#fff5e5;border-color:#f4dfba}.appTopNav .stat:nth-child(3){background:#eafff5;border-color:#c8eddd}.appTopNav .stat strong{font-size:25px}.appTopNav .panel{border-radius:20px;border-bottom-width:4px}.appTopNav .journey .lessonrow{border-radius:17px;padding:20px;border-bottom:4px solid #e6def3}.appTopNav .journey h2{font-size:19px}.appTopNav .quote{display:none}.appTopNav .hubBanner{border-radius:18px;background:linear-gradient(115deg,#efe5ff,#f7f0ff);padding:23px;margin-top:27px;border-color:#deccf4}.appTopNav .primary{border-radius:11px;min-height:44px}.appTopNav .outline{border-radius:10px;min-height:44px}.appTopNav .learningTabs button{min-height:44px;border-radius:11px}.appTopNav .pandaMap{border-radius:26px;border:2px solid #d6e8d6;background:radial-gradient(ellipse at 10% 15%,#b5e7d06b,transparent 40%),linear-gradient(180deg,#e6f7eb,#fff4d9 70%,#e7f5e8)}.appTopNav .mapHeading h2{font-size:26px}.appTopNav .mapHeading .learningEyebrow{color:#4e8062}.appTopNav .stopDot{width:78px;height:78px;font-size:29px;border-width:6px}.appTopNav .mapStop{min-height:173px;padding-left:calc(50% - 39px)}.appTopNav .mapStop.swing1,.appTopNav .mapStop.swing2{padding-left:0;padding-right:calc(50% - 39px)}.appTopNav .stopLabel h3{font-size:16px}.appTopNav .isCurrent .stopDot{background:#9560ed;box-shadow:0 6px 0 #6330ad,0 0 0 9px #b68ee32b;animation:levelGlow 2.7s ease-in-out infinite}.appTopNav .trailPanda{width:102px;height:102px;bottom:59px;left:-12px}.appTopNav .isDone .stopDot{background:#36b982;box-shadow:0 5px 0 #258459}.appTopNav .lessonPanel{border-radius:24px;border-bottom:5px solid #e8def5;padding:31px}.lessonFeedback.good{background:#e8fff2;color:#27734e;padding:14px 17px;border-radius:12px;animation:feedbackPop .25s ease-out}.lessonFeedback.retry{background:#fff3df;padding:14px 17px;border-radius:12px;color:#87632d}.appTopNav .lessonOptions button{min-height:56px;border-radius:13px;border-bottom-width:4px}.appTopNav .answerInput{min-height:55px;border-radius:13px;font-size:16px}.appTopNav button:active{transform:translateY(2px)}.skipContent{position:fixed;left:14px;top:-100px;z-index:1000;padding:12px 20px;background:#fff;color:#503080;border:3px solid #8a5cd6;border-radius:9px}.skipContent:focus{top:12px}.levelCelebration{display:flex;align-items:center;gap:20px;position:relative;padding:23px 34px 23px 20px;margin:-3px 0 28px;background:linear-gradient(120deg,#7744cf,#a269ed);color:#fff;border-radius:19px;box-shadow:0 5px 0 #d7c4f0;animation:celebrationIn .4s ease-out}.levelCelebration>img{width:94px;height:94px;object-fit:contain;transform:rotate(-8deg)}.levelCelebration h2{font-size:21px!important;margin:8px 0!important;color:#fff}.levelCelebration p{font-size:12px;color:#eee0ff;line-height:1.8}.celebrationTag{font-size:9px;font-weight:800;letter-spacing:2px;color:#ffe385}.levelCelebration>button{position:absolute;right:11px;top:8px;border:0;background:transparent;color:#fff;font-size:23px;width:30px;height:30px}.pandaConfetti{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}.pandaConfetti i{position:absolute;top:-25px;left:var(--x);height:15px;width:9px;border-radius:3px;background:var(--color);animation:confettiFall 2.8s var(--delay) ease-in forwards}.pandaConfetti i:nth-child(3n){border-radius:50%;height:11px;width:11px}@keyframes pandaFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}@keyframes levelGlow{50%{box-shadow:0 6px 0 #6330ad,0 0 0 15px #b68ee31a}}@keyframes confettiFall{to{transform:translateY(110vh) rotate(var(--spin))}}@keyframes feedbackPop{from{transform:translateY(4px);opacity:.5}to{transform:none;opacity:1}}@keyframes celebrationIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:1000px){.appTopNav .appTopbar{padding:13px 24px}.appTopNav .layout{grid-template-columns:minmax(0,1fr) 245px}.appTopNav .levelMapHero{grid-template-columns:minmax(0,1fr);padding:27px}.appTopNav .levelMapHero .heroart{display:none!important}.appTopNav .levelMapHero h2{max-width:100%;font-size:27px!important}.accountLabel{display:none}.appTopNav .brand small{display:none}}
@media(max-width:760px){.appTopNav .appTopbar{padding:10px 15px 12px;gap:12px}.topbarRow{gap:10px}.topbarRow .brand{font-size:16px;gap:8px}.topbarRow .logo{width:35px;height:35px}.topbarRow .logo img{width:30px;height:30px}.topbarActions,.topbarActions .headtools{gap:7px}.topbarActions .iconbtn{display:none}.topbarActions #languageSwitch{font-size:11px;padding:8px 10px;min-height:39px;max-width:145px;gap:7px}.topbarActions #languageSwitch>span:not(.flagGroup){display:none}.accountMenu>summary>span:last-child{display:none}.accountMenu .avatar{width:32px;height:32px}.appTopNav .nav{gap:5px}.appTopNav .nav>button,.navMore>summary{padding:8px 3px;min-height:56px;flex-direction:column;gap:5px;border-radius:10px}.appTopNav .nav>button .navtext,.navMore>summary>span:last-child{font-size:10px!important;line-height:1.2}.appTopNav .nav>button>span:first-child{font-size:19px}.appTopNav main{padding:17px 16px 35px;max-width:100%}.appTopNav main>header{padding-bottom:10px}.appTopNav .crumb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.appTopNav .layout{grid-template-columns:minmax(0,1fr);gap:22px}.appTopNav .intro{margin:20px 0}.appTopNav .intro h1{font-size:28px}.appTopNav .intro p{font-size:12px}.appTopNav .date{display:none}.appTopNav .levelMapHero{position:relative;grid-template-columns:minmax(0,1fr);padding:27px 24px 24px;min-height:360px}.appTopNav .levelMapHero h2{font-size:27px!important;padding-right:32px}.appTopNav .levelMapHero p{max-width:100%;padding-right:55px;font-size:12px;margin-bottom:22px}.appTopNav .levelMapHero .heroart{display:grid!important;position:absolute!important;width:110px!important;height:115px;right:0!important;bottom:13px!important;top:auto!important;left:auto!important;pointer-events:none}.appTopNav .heroart .miniPandaTrail{width:110px;height:115px;min-height:115px;transform:scale(.64);transform-origin:right bottom}.appTopNav .miniPandaTrail>img{width:128px;height:128px;left:-50px;top:-54px}.appTopNav .miniTrailDots{margin-top:25px}.appTopNav .miniPandaTrail>span{display:none}.appTopNav .levelMapHero .primary{font-size:12px;max-width:calc(100% - 57px)}.appTopNav .stats{gap:8px;margin-bottom:22px}.appTopNav .stat{padding:14px 8px;display:block;text-align:center}.appTopNav .stat-icon{display:inline-block;font-size:17px;padding:6px;margin-bottom:8px}.appTopNav .stat strong{font-size:20px}.appTopNav .stat small{font-size:9px;line-height:1.6}.appTopNav .rail{display:grid;grid-template-columns:minmax(0,1fr)}.appTopNav .rail>.panel.word{display:none}.appTopNav .rail>.panel:first-child{padding:20px}.appTopNav .goalring{margin:18px auto;width:115px;height:115px}.appTopNav .lessonrow{flex-wrap:wrap}.appTopNav .lessonbody{min-width:150px}.appTopNav .lessonrow>button{margin-left:auto}.appTopNav .hubBanner{padding:18px;gap:14px;flex-wrap:wrap}.appTopNav .hubBanner>button{width:100%}.appTopNav .hubBanner img{width:42px}.appTopNav .learningHeader{display:block}.appTopNav .learningHeader h1{font-size:27px}.appTopNav .learningHeader .learningPill{margin-top:14px}.appTopNav .learningTabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:20px 0}.appTopNav .learningTabs button{font-size:11px;padding:10px 6px}.appTopNav .trailSummary{padding:22px}.appTopNav .trailSummary h2{font-size:21px}.appTopNav .trailScore strong{font-size:30px}.appTopNav .mapHeading h2{font-size:20px}.appTopNav .mapStop,.appTopNav .mapStop.swing1,.appTopNav .mapStop.swing2{padding:0 0 0 18px;min-height:166px;gap:20px}.appTopNav .stopDot{width:64px;height:64px;font-size:25px}.appTopNav .trailPanda{width:84px;height:84px;left:-10px;bottom:49px}.appTopNav .stopLabel h3{font-size:13px}.appTopNav .stopLabel p{font-size:10px}.appTopNav .lessonPanel{padding:21px 17px}.appTopNav .lessonPanel h2{font-size:22px}.appTopNav .lessonTrail{font-size:10px;gap:10px}.appTopNav .lessonTrail>span{max-width:50%;text-align:right;line-height:1.5}.appTopNav .lessonControls{gap:9px}.appTopNav .lessonControls .primary{flex:1;min-width:145px}.appTopNav .courseHero{grid-template-columns:1fr}.appTopNav .learningGrid,.appTopNav .learningStats{grid-template-columns:1fr}.appTopNav .reviewRow{gap:12px;flex-wrap:wrap}.appTopNav .reviewRow .learningPill{font-size:9px}.appTopNav .levelCelebration{padding:20px 25px 20px 15px;gap:10px}.appTopNav .levelCelebration>img{width:63px;height:80px}.appTopNav .levelCelebration h2{font-size:18px!important}.appTopNav .levelCelebration p{font-size:11px}.appTopNav .celebrationTag{font-size:8px;letter-spacing:1.2px}.appTopNav .languagegrid{gap:12px}.appTopNav .simpleLanguageCard{padding:16px!important}.appTopNav .simpleLanguageCard h3{font-size:15px!important}.appTopNav .simpleLanguageCard .countryFlag{width:28px;height:20px}.appTopNav dialog{max-width:calc(100vw - 24px);padding:23px 19px}}
@media(prefers-reduced-motion:reduce){.appTopNav *{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
.appTopNav .nav .navtext{display:block!important}.appTopNav .levelMapHero .heroart{opacity:1!important}.appTopNav .brand>div:not(.logo){display:block!important}@media(max-width:760px){.appTopNav main>header{display:none}.appTopNav .topbarRow .brand{font-size:14px}.appTopNav .heroart .miniPandaTrail{position:absolute;right:0;bottom:0;width:210px!important;height:185px;min-height:185px;transform:scale(.55);transform-origin:right bottom}.appTopNav .miniPandaTrail>img{left:0;top:0;width:120px;height:120px}.appTopNav .miniTrailDots{margin-top:115px}.appTopNav .levelMapHero .heroart{width:120px!important;height:110px;right:4px!important;bottom:15px!important}.appTopNav .nav>button{min-width:0}.appTopNav .navMore{min-width:0}.appTopNav .topbarRow .brand small{display:none!important}}
.appTopNav .navMore:has(button.active)>summary{background:#eee6ff;color:#6940b5}.levelCelebration>button{width:44px;height:44px;right:3px;top:2px}@media(max-width:760px){.topbarActions #languageSwitch{min-height:44px}}
@media(max-width:360px){.appTopNav .levelMapHero{padding-bottom:125px;min-height:455px}.appTopNav .levelMapHero h2{font-size:25px!important;padding-right:0}.appTopNav .levelMapHero p{padding-right:0}.appTopNav .levelMapHero .primary{max-width:100%}.appTopNav .levelMapHero .heroart{bottom:9px!important;right:18px!important}.appTopNav .topbarActions #languageSwitch{max-width:105px;font-size:10px}.appTopNav .topbarRow .brand{font-size:12px;gap:6px}}