@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap');
:root{--ink:#171715;--muted:#77746d;--paper:#f6f2eb;--yellow:#f2d500;--green:#27b51e;--line:#e6e0d6;--white:#fff}*{box-sizing:border-box}body{margin:0;background:#f5f3ef;color:var(--ink);font-family:'DM Sans',sans-serif}.app{max-width:1120px;margin:auto;padding:0 28px}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font:800 25px Outfit,sans-serif;letter-spacing:-1px}.home-link{border:0;background:transparent;padding:0;color:var(--ink);cursor:pointer}.home-link:focus-visible{outline:2px solid #b49f00;outline-offset:5px;border-radius:4px}.brand span{color:#d5b900}.topright{color:var(--muted);font-size:14px}.nav{display:flex;gap:8px;padding:17px 0 4px}.nav button{border:0;background:transparent;padding:10px 14px;border-radius:12px;font:700 14px 'DM Sans';color:#6d6962;cursor:pointer}.nav button.active,.nav button:hover{background:white;color:var(--ink);box-shadow:0 2px 10px #0000000b}.page{display:none;padding:28px 0 55px}.page.active{display:block}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#89857d;font-weight:700}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:45px;align-items:center;padding:28px 0 44px}.hero h1{font:800 clamp(36px,5vw,58px)/1.02 Outfit,sans-serif;letter-spacing:-2px;margin:12px 0 17px}.hero p{color:var(--muted);line-height:1.7;max-width:480px}.hero-art{height:285px;border-radius:28px;background:linear-gradient(140deg,#f6df53,#f4c845 48%,#edaa46);position:relative;overflow:hidden;padding:30px;box-shadow:0 18px 40px #a5852522}.hero-art:before{content:'A';position:absolute;font:800 230px Outfit;color:#fff7;right:25px;bottom:-88px;transform:rotate(-12deg)}.art-card{position:relative;background:#fffE;border-radius:20px;padding:23px;width:75%;box-shadow:0 12px 25px #6c491b20}.art-card b{font:800 22px Outfit}.art-card p{margin:8px 0;color:#56524c}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.mode{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;text-align:left;cursor:pointer;transition:.2s;min-height:160px;color:var(--ink)}.mode:hover{transform:translateY(-3px);box-shadow:0 12px 25px #211b100e}.mode .emoji{font-size:25px}.mode h3{font:700 18px Outfit;margin:15px 0 5px}.mode p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}.section-title{font:700 22px Outfit;margin:8px 0 16px}.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px;max-width:740px;margin:10px auto}.panel h1{font:800 31px Outfit;margin:5px 0 8px}.sub{color:var(--muted);line-height:1.6}.question{font:700 22px/1.4 Outfit;margin:28px 0 16px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;font:600 15px 'DM Sans';cursor:pointer}.choice:hover{border-color:#c4a900;background:#fffdf2}.choice.correct{background:#e8f8e6;border-color:#83cf7e}.choice.wrong{background:#fff0ed;border-color:#e9a39a}.feedback{min-height:25px;margin-top:14px;font-weight:700}.btn{border:0;background:var(--ink);color:white;padding:12px 18px;border-radius:12px;font:700 14px 'DM Sans';cursor:pointer}.btn.light{background:#f3f0eb;color:var(--ink)}.btn.yellow{background:var(--yellow);color:var(--ink)}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:17px}.progressline{height:7px;background:#eeeae3;border-radius:10px;overflow:hidden;margin:18px 0}.progressline i{display:block;height:100%;background:var(--green);width:0;transition:.3s}.speakbox{background:#fbf9f5;border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center;margin:22px 0}.target{font:800 35px Outfit;margin:5px}.meaning{color:var(--muted)}.mic{width:74px;height:74px;border-radius:50%;border:0;background:var(--yellow);font-size:28px;cursor:pointer;margin:18px auto 5px;display:block}.mic.listening{background:#ffbbb1;animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 12px #ffbbb155}}.transcript{font-size:14px;color:var(--muted);min-height:22px}.qa{display:flex;gap:10px;margin-top:20px}.qa input{flex:1;min-width:0;padding:13px 15px;border-radius:12px;border:1px solid var(--line);font:15px 'DM Sans'}.chat{display:flex;flex-direction:column;gap:12px;margin-top:20px}.bubble{max-width:90%;padding:13px 16px;border-radius:15px;line-height:1.55;background:#f3f0eb}.bubble.user{align-self:flex-end;background:#f8e977}.bubble small{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.phrase{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 4px;border-bottom:1px solid var(--line)}.phrase:last-child{border:0}.phrase b{font:700 16px Outfit}.phrase .translation{color:var(--muted);font-size:14px;margin-top:4px}.speaker{border:0;background:#f3f0eb;width:38px;height:38px;border-radius:50%;cursor:pointer}.tag{display:inline-block;background:#f5edb4;border-radius:20px;padding:6px 10px;font-size:12px;font-weight:700;margin:0 5px 8px 0}.notice{font-size:12px;color:#89857d;margin-top:15px}.hide{display:none!important}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}.hero{gap:22px}.hero-art{height:250px}.app{padding:0 20px}}
@media(max-width:560px){.app{padding:0 15px}.topbar{height:63px}.topright{font-size:12px}.nav{overflow:auto;gap:2px;padding:11px 0}.nav button{white-space:nowrap;padding:9px 11px;font-size:13px}.page{padding:18px 0 40px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:16px 0 30px;gap:18px}.hero h1{font-size:42px}.hero-art{height:210px}.grid{gap:10px}.mode{padding:15px;min-height:148px}.mode h3{font-size:16px}.panel{padding:20px 17px}.panel h1{font-size:27px}.question{font-size:20px}.choices{grid-template-columns:1fr}.qa{flex-wrap:wrap}.qa input{flex-basis:100%}.target{font-size:30px}}

.home-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 30px}.progress-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:15px}.progress-card strong{display:block;font:800 24px Outfit}.progress-card span{font-size:12px;color:var(--muted)}select{padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;font:600 14px 'DM Sans';color:var(--ink)}.feedback.good{color:#24821f}.feedback.bad{color:#a34c3e}.speech-score{font-weight:700;color:#24821f;margin-top:8px;min-height:20px}.quiz-result{text-align:center;padding:30px 8px}.quiz-result strong{display:block;font:800 52px Outfit;color:#b49f00}
.conversation-panel{max-width:820px}.conversation-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.conversation-controls label{font-size:12px;color:var(--muted);font-weight:700}.conversation-controls select{display:block;width:100%;margin-top:6px}.roleplay-card{display:flex;gap:14px;align-items:center;background:#f7f4ec;border-radius:16px;padding:16px;margin:18px 0}.roleplay-avatar{width:48px;height:48px;display:grid;place-items:center;background:#f2df61;border-radius:15px;font-size:24px}.scenario-cue{font:700 17px Outfit;margin-top:4px}.practice-card{border:1px solid var(--line);border-radius:17px;padding:20px}.conversation-target{font:800 clamp(25px,4vw,36px)/1.25 Outfit;margin:9px 0}.conversation-meaning{color:var(--muted)}.conversation-actions{margin:17px 0!important}.response-row{display:flex;gap:9px;margin-top:18px}.response-row input{flex:1;min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:12px;font:15px 'DM Sans'}.conversation-mic{width:auto;height:auto;padding:11px 15px;border-radius:12px;margin:0;display:inline-block;font:700 14px 'DM Sans'}.conversation-feedback{min-height:25px;margin-top:13px;font-weight:700}.conversation-feedback.good{color:#24821f}.conversation-feedback.try{color:#9a6523}
@media(max-width:560px){.conversation-controls{grid-template-columns:1fr 1fr}.conversation-controls label:last-child{grid-column:1/-1}.practice-card{padding:15px}.conversation-actions .btn{flex:1;padding:10px 8px;font-size:12px}.conversation-mic{font-size:12px;padding:10px}.response-row{flex-wrap:wrap}.response-row input{flex-basis:100%}.response-row .btn{width:100%}}
@media(max-width:560px){.home-progress{gap:8px}.progress-card{padding:12px 9px}.progress-card strong{font-size:21px}}

.language-select{border:1px solid var(--line);background:#fff;border-radius:22px;padding:9px 13px;font:700 13px 'DM Sans';max-width:210px}.language-label{font-size:12px;color:var(--muted);margin-right:7px}.topright{display:flex;align-items:center;gap:5px}@media(max-width:560px){.language-label{display:none}.language-select{max-width:155px;padding:8px 9px;font-size:12px}}



.home-premium{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#1c1b18;color:#fff;border-radius:20px;padding:23px 26px;margin:25px 0}.home-premium h2{font:700 22px Outfit;margin:8px 0}.home-premium p{color:#d4d0c8;margin:0;line-height:1.55}.home-premium .tag{background:#f2d500;color:#171715}.premium-hero{text-align:center;padding:25px 0 30px}.premium-hero h1{font:800 clamp(34px,5vw,54px)/1.05 Outfit;letter-spacing:-1.8px;margin:12px}.premium-hero .sub{max-width:580px;margin:0 auto 17px}.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:850px;margin:0 auto}.pricing-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}.pricing-card h2{font:700 23px Outfit;margin:10px 0}.price{font:800 30px Outfit;margin:15px 0}.pricing-card ul{padding-left:20px;color:#55524d;line-height:1.9;min-height:154px}.pricing-card .btn{width:100%}.premium-card{border:2px solid #e3c400;background:linear-gradient(155deg,#fffdf2,#fff 55%)}.premium-card .eyebrow{color:#947c00}.premium-note{text-align:center;margin:18px auto;max-width:650px}.level-label{font-size:13px;color:var(--muted);font-weight:700}.level-select{margin-left:6px}.home-progress .progress-card span{display:block}
@media(max-width:650px){.home-premium{align-items:flex-start;flex-direction:column;padding:20px}.pricing-grid{grid-template-columns:1fr}.pricing-card ul{min-height:0}.premium-hero h1{font-size:37px}}

.premium-dialog{border:0;border-radius:20px;max-width:420px;padding:30px;color:var(--ink);box-shadow:0 22px 80px #0004}.premium-dialog::backdrop{background:#14131088;backdrop-filter:blur(3px)}.premium-dialog h2{font:800 26px Outfit;margin:10px 0}.premium-dialog p{color:var(--muted);line-height:1.6}.premium-dialog .btn{margin-top:10px}.nav{flex-wrap:wrap}

.home-progress{grid-template-columns:repeat(4,minmax(0,1fr))}.word-audio{border:0;background:transparent;padding:7px 0 0;font:500 14px 'DM Sans';cursor:pointer;color:var(--ink)}.word-audio:hover{color:#7a6800}
@media(max-width:650px){.home-progress{grid-template-columns:repeat(2,minmax(0,1fr))}}

.bubble-audio{display:block;margin-top:10px;border:0;border-radius:10px;background:#fff7cc;padding:8px 11px;color:#504400;font:700 12px 'DM Sans';cursor:pointer;transition:background .18s,transform .18s}.bubble-audio:hover{background:#f6e779;transform:translateY(-1px)}.bubble-audio:focus-visible{outline:2px solid #8b7600;outline-offset:2px}

.home-challenge{display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(120deg,#fff8cf,#fff 72%);border:1px solid #eadb78;border-radius:20px;padding:23px 26px;margin:18px 0 28px}.home-challenge h2{font:700 22px Outfit;margin:7px 0}.home-challenge p{color:var(--muted);margin:5px 0 10px}.challenge-progress{height:9px;background:#ece8de;border-radius:12px;overflow:hidden;max-width:460px}.challenge-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e1c600,#28b423);border-radius:12px;transition:width .5s}.challenge-progress.large{max-width:none;height:14px;margin:17px 0 25px}.challenge-score{display:flex;align-items:baseline;gap:9px;margin-top:22px}.challenge-score strong{font:800 42px Outfit}.challenge-score span{color:var(--muted)}.milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0 32px}.milestones div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 8px;background:#f6f4ef;border:1px solid var(--line);border-radius:14px;color:#aaa}.milestones div.reached{background:#f9f3c8;border-color:#e8d65b;color:#735f00}.milestones b{font:800 19px Outfit}.milestones span{font-size:11px;text-align:center}.certificate-unlock{background:#faf9f6;padding:20px;border-radius:16px;border:1px solid var(--line)}.certificate-unlock h2{font:700 20px Outfit;margin:0 0 6px}.certificate-form{display:flex;gap:9px;margin:14px 0}.certificate-form input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font:15px 'DM Sans'}.certificate-form .btn:disabled{opacity:.45;cursor:not-allowed}.certificate-sheet{display:none;margin:25px 0;background:#fffdf5;padding:18px;border:1px solid #d3bd55;border-radius:7px;text-align:center}.certificate-sheet.show{display:block}.certificate-inner{min-height:390px;padding:32px;border:4px double #c1a520;display:flex;flex-direction:column;align-items:center;justify-content:center}.certificate-logo{font:800 25px Outfit}.certificate-logo span{color:#d5b900}.certificate-kicker{font-size:11px;letter-spacing:3px;color:#8b7600;font-weight:800;margin-top:18px}.certificate-inner h2{font:700 29px Outfit;margin:11px 0}.certificate-intro,.certificate-copy{color:#666;line-height:1.6}.certificate-student{font:800 32px Outfit;border-bottom:1px solid #b99f25;padding:4px 28px 10px;min-width:240px}.certificate-copy{max-width:530px;margin:18px auto}.certificate-footer{display:flex;justify-content:space-between;align-items:end;gap:30px;width:100%;margin-top:25px;font-size:13px;color:#68645b}.certificate-footer span:last-child{display:flex;flex-direction:column}.certificate-footer small{font-size:10px}.challenge-panel>#printCertificate{margin-top:15px}.milestones div.reached{animation:milestone-in .35s ease-out}@keyframes milestone-in{from{transform:scale(.94);opacity:.75}to{transform:scale(1);opacity:1}}
@media(max-width:600px){.home-challenge{align-items:flex-start;flex-direction:column;padding:19px}.home-challenge .btn{width:100%}.milestones{grid-template-columns:repeat(2,1fr)}.certificate-form{flex-direction:column}.certificate-inner{padding:20px 13px;min-height:340px}.certificate-inner h2{font-size:24px}.certificate-student{font-size:26px;min-width:0}.certificate-footer{font-size:11px;gap:10px}}
@media print{body *{visibility:hidden!important}.certificate-sheet,.certificate-sheet *{visibility:visible!important}.certificate-sheet{display:block!important;position:fixed;inset:0;margin:0;padding:20mm;background:#fffdf5;border:0;border-radius:0}.certificate-inner{height:100%;min-height:0}.certificate-sheet.show{display:block!important}}

.sample-heading{font:700 21px Outfit;margin:28px 0 4px}.certificate-sample{display:block;position:relative;overflow:hidden}.sample-watermark{position:absolute;right:9%;top:38%;font:800 68px Outfit;letter-spacing:5px;color:#cbb738;opacity:.12;transform:rotate(-24deg);pointer-events:none}.certificate-sample .certificate-inner{position:relative}.certificate-sample .certificate-student{color:#756500}
@media print{body *{visibility:hidden!important}.certificate-sheet{display:none!important}.certificate-sheet.print-target,.certificate-sheet.print-target *{visibility:visible!important}.certificate-sheet.print-target{display:block!important;position:fixed;inset:0;margin:0;padding:20mm;background:#fffdf5;border:0;border-radius:0}.certificate-sheet.print-target .certificate-inner{height:100%;min-height:0}}

.course-header{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:22px}.course-header h1{font:800 clamp(32px,4vw,48px)/1.05 Outfit;letter-spacing:-1.5px;margin:8px 0}.course-header .sub{max-width:620px}.course-level-label{font-size:12px;font-weight:700;color:var(--muted);min-width:155px}.course-level-label select{display:block;width:100%;margin-top:6px}.course-summary{background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px 20px;margin:22px 0}.course-summary>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}.course-summary strong{font:800 20px Outfit;color:#947c00}.course-map{max-width:760px;margin:26px auto}.course-node{display:flex;align-items:center;gap:17px;max-width:650px;margin:12px auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px;box-shadow:0 7px 20px #211b1009}.course-node:nth-of-type(even){transform:translateX(32px)}.course-marker{flex:0 0 62px;height:62px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#f5db47,#f0bf30);font-size:25px;box-shadow:0 4px 0 #d5a71e}.course-node.complete .course-marker{background:linear-gradient(145deg,#a7e77b,#5bbc4f);box-shadow:0 4px 0 #3d9e38;color:#fff}.course-node.locked .course-marker{background:#eceae4;box-shadow:0 4px 0 #d8d5cd;font-size:20px}.course-node.current{border:2px solid #e3c900;background:#fffdf2}.course-node.locked{opacity:.72}.course-node-body{flex:1}.course-node-body .eyebrow{font-size:10px}.course-node-body h2{font:700 20px Outfit;margin:6px 0}.course-node-body p{color:var(--muted);margin:0 0 13px;line-height:1.5;font-size:14px}.course-node-body .btn:disabled{opacity:.55;cursor:not-allowed}.course-connector{height:25px;width:4px;background:#e8e4da;margin:-5px auto -5px;transform:translateX(-300px)}.course-connector.complete{background:#79c963}.lesson-viewer{background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px;max-width:800px;margin:25px auto}.back-link{border:0;background:transparent;padding:0;color:#796900;font:700 14px 'DM Sans';cursor:pointer}.lesson-viewer h2{font:800 31px Outfit;margin:8px 0}.lesson-phrases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.lesson-phrase-card{background:#faf8f3;border:1px solid var(--line);border-radius:15px;padding:16px}.lesson-phrase-card h3{font:700 18px Outfit;margin:8px 0}.lesson-phrase-card .sub{font-size:13px;min-height:38px}.lesson-answer{font-weight:700;color:#786500;margin-top:10px;opacity:0;transition:opacity .2s}.lesson-answer.visible{opacity:1}.course-header,.course-summary,.course-map,.lesson-viewer{transition:opacity .2s}
@media(max-width:700px){.course-header{align-items:flex-start;flex-direction:column}.course-level-label{width:100%}.course-node:nth-of-type(even){transform:none}.course-connector{transform:translateX(-140px)}.lesson-phrases{grid-template-columns:1fr}.course-node{padding:14px}.course-marker{flex-basis:52px;height:52px}}

/* Tema anak KataKita: cerah, lembut, dan mudah disentuh. */
:root{--ink:#25344f;--muted:#687a94;--paper:#fffdf5;--yellow:#ffd34e;--green:#54c78a;--line:#e1e9f3}
body{background:#f4f8ff;color:var(--ink)}
.brand{display:flex;align-items:center;gap:8px}.brand-icon{width:38px;height:38px;object-fit:contain}.home-link{border-radius:14px}
.nav button{border-radius:16px;color:#5d6f89}.nav button.active,.nav button:hover{background:#e6f7f4;color:#214f59;box-shadow:0 3px 0 #c5e7df}
.btn{border-radius:15px;background:#344a78;box-shadow:0 4px 0 #233657;transition:transform .16s,box-shadow .16s}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #233657}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #233657}.btn.light{background:#edf4ff;color:#2a4369;box-shadow:0 3px 0 #d1dfef}.btn.yellow{background:#ffd34e;color:#493b12;box-shadow:0 4px 0 #d8ad2f}
.mode,.panel,.pricing-card,.progress-card,.course-node,.lesson-viewer{border-radius:22px;box-shadow:0 7px 0 #dfe7f1,0 10px 24px #344a780d}.mode{border-color:#e1e9f3}.mode:hover{box-shadow:0 9px 0 #dfe7f1,0 14px 27px #344a7816}
.hero-art{background:linear-gradient(135deg,#91e6dc,#73cfe2 55%,#a9e9bd);box-shadow:0 9px 0 #b9ddd9,0 18px 40px #27435a16}.hero-art:before{content:'';display:none}.art-card{width:65%;border:2px solid #fff;border-radius:24px;z-index:2}.art-card .tag{background:#fff0a8;color:#655115}.mascot-stage{position:absolute;right:10px;bottom:5px;width:155px;height:160px;display:grid;place-items:end center;z-index:1}.mascot-stage img{width:145px;height:145px;filter:drop-shadow(0 7px 0 #2c8da055);animation:buddy-bob 2.8s ease-in-out infinite}.mascot-speech{position:absolute;right:0;top:0;padding:9px 12px;border-radius:16px 16px 16px 4px;background:white;color:#334966;font:800 12px Outfit;box-shadow:0 4px 0 #d5e2ed;transform:rotate(4deg)}@keyframes buddy-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.home-challenge{background:linear-gradient(120deg,#fff3b5,#fffdf5 72%);border-color:#f1dc77;border-radius:22px;box-shadow:0 6px 0 #eee1aa}.home-premium{border-radius:22px;background:linear-gradient(120deg,#2d426b,#5069a0)}.home-premium .tag{background:#ffe58a}.course-node.current{background:#fff9da;border-color:#f2cf4d}.course-marker{border:3px solid #fff}.course-node.complete .course-marker{border-color:#e7fff1}.phrase-tools input,.response-row input,.certificate-form input{border-radius:15px;border-color:#dce6f1}.phrase-action,.speaker{border-radius:13px}.certificate-sheet{border-radius:12px;background:#fffdf3}.certificate-inner{border-color:#dbbd3b;border-radius:8px}.premium-card{background:linear-gradient(145deg,#fff8cd,#fff)}
@media(max-width:560px){.brand-icon{width:33px;height:33px}.art-card{width:72%;padding:19px}.mascot-stage{right:3px;bottom:2px;width:130px;height:138px}.mascot-stage img{width:120px;height:120px}.mascot-speech{font-size:11px}.hero-art{overflow:hidden}}

[hidden]{display:none!important}.language-engine{display:none!important}.language-start{min-height:100svh;padding:22px 28px 45px;background:radial-gradient(circle at 12% 12%,#ffe8a0 0 80px,transparent 82px),radial-gradient(circle at 92% 78%,#c9f2e9 0 125px,transparent 127px),linear-gradient(145deg,#fffaf0,#f0f7ff);color:#25344f}.language-start-top{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;color:#657792;font-size:14px}.start-brand{display:flex;align-items:center;gap:8px;font:800 25px Outfit;color:#25344f}.start-brand img{width:42px;height:42px}.start-brand span{color:#e0ad20}.language-start-content{max-width:890px;margin:25px auto 0;text-align:center}.start-mascot img{width:96px;height:96px;filter:drop-shadow(0 6px 0 #d4e6ec);animation:buddy-bob 2.8s ease-in-out infinite}.language-start-content h1{font:800 clamp(32px,5vw,48px)/1.08 Outfit;letter-spacing:-1px;margin:8px 0}.language-start-content>p{color:#687a94;margin:0 auto 23px}.language-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;text-align:center}.language-card{min-height:135px;border:2px solid #e4ebf3;border-radius:22px;background:#fff;padding:15px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;color:#263650;box-shadow:0 5px 0 #dce5ee;transition:transform .17s,box-shadow .17s,border-color .17s}.language-card:hover{transform:translateY(-4px);box-shadow:0 9px 0 #dce5ee;border-color:#f3cf55}.language-card.last-used{border-color:#f1c847;background:#fffdf3}.language-card .flag{font-size:31px;line-height:1.1}.language-card strong{font:700 16px Outfit}.language-card small{font-size:12px;color:#78879d}.start-footnote{margin-top:21px;color:#66778d;font:700 14px Outfit}.app[hidden]{display:none!important}.topright{display:flex;align-items:center;gap:14px}.language-return{border:1px solid #dce6f1;background:#fff;border-radius:14px;padding:9px 12px;color:#4b6285;font:700 12px 'DM Sans';cursor:pointer}.language-return:hover{background:#ecf7f5}.avatar-picker{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#f0f9ff;border:1px solid #dbeaf5;border-radius:21px;padding:18px 21px;margin:16px 0 28px}.avatar-picker h2{font:700 19px Outfit;margin:6px 0}.avatar-options{display:flex;gap:9px}.avatar-choice{min-width:94px;border:2px solid transparent;background:#fff;border-radius:16px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:#32435b;transition:.16s}.avatar-choice span{font-size:27px}.avatar-choice b{font:700 13px Outfit}.avatar-choice small{font-size:10px;color:#74839a}.avatar-choice:hover,.avatar-choice.selected{border-color:#f1cc4d;transform:translateY(-2px);box-shadow:0 4px 0 #e3d69b}.mascot-emoji{width:130px;height:130px;display:grid;place-items:center;border-radius:48% 52% 50% 48%;font-size:82px;background:#f9d77c;filter:drop-shadow(0 7px 0 #2c8da055);animation:buddy-bob 2.8s ease-in-out infinite}.mascot-emoji.panda{background:#d8eef7}.mascot-emoji.fox{background:#ffd9ae}
@media(max-width:760px){.language-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.language-start{padding:18px 17px 35px}.language-start-top>span{font-size:11px}.avatar-picker{align-items:flex-start;flex-direction:column}.avatar-options{width:100%;justify-content:space-between}.avatar-choice{flex:1;min-width:0}.topright>span{display:none}}
.selected-language{color:#536c91;font-size:13px;font-weight:800;background:#e8f5f2;padding:7px 10px;border-radius:12px}.language-start[hidden]{display:none!important}
@media(max-width:760px){.topright .header-playful{display:none}.topright .selected-language{display:inline;font-size:11px;padding:6px 8px}}

.brand,.start-brand{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.brand-icon,.start-brand img{width:40px;height:40px;object-fit:contain;flex:none}.brand span,.start-brand span{color:#d5b900}.selected-language{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:34px;padding:4px 8px;font-size:23px;line-height:1;cursor:default}
.selected-language img{display:block;width:30px;height:20px;object-fit:cover;border:1px solid #d7e0eb;border-radius:3px;box-shadow:0 1px 2px #24334d1a}
.language-card .flag img{display:block;width:48px;height:32px;object-fit:cover;border:1px solid #dbe2eb;border-radius:4px;box-shadow:0 2px 3px #24334d12}
@media(max-width:760px){.topright .selected-language{font-size:23px;padding:4px 7px}.brand-icon,.start-brand img{width:36px;height:36px}}

/* Unit kartu kursus */
.course-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:900px;margin:20px auto}
.unit-card{display:flex;align-items:flex-start;gap:14px;min-width:0;padding:18px;background:#fff;border:1px solid #dce6f1;border-radius:20px;box-shadow:0 4px 0 #e2e9f0}
.unit-card.is-current{background:linear-gradient(145deg,#fffdf1,#fff 72%);border-color:#e8cf60}
.unit-card.is-complete{background:linear-gradient(145deg,#f0fff5,#fff 72%);border-color:#a9dfbb}
.unit-card.is-locked{background:#f8f9fc;opacity:.78}
.unit-icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:16px;background:#fff2bd;font-size:25px}
.is-complete .unit-icon{background:#dcf6e5;color:#19854b;font-weight:900}
.is-locked .unit-icon{background:#e9edf3}
.unit-info{min-width:0;flex:1}
.unit-info .eyebrow{font-size:10px;letter-spacing:1.2px}
.unit-info h2{font:800 20px/1.2 Outfit;margin:6px 0}
.unit-info p{min-height:0;color:#687992;font-size:13px;line-height:1.5;margin:7px 0 10px}
.unit-progress{font-size:11px;font-weight:700;color:#7b8798;margin:0 0 11px}
.unit-info .btn{font-size:12px;padding:10px 13px;max-width:100%;white-space:normal;text-align:center}
.unit-info .btn:disabled{opacity:.62}
.unit-question{max-width:640px;margin:12px auto;padding:21px;background:#fff;border:1px solid #dce6f1;border-radius:22px;box-shadow:0 4px 0 #e2e9f0}
.unit-question h3{font:800 22px/1.35 Outfit;margin:15px 0}
.unit-choices{display:grid;gap:9px}
.unit-choice{padding:13px 15px;background:#fff;border:1px solid #dce6f1;border-radius:14px;text-align:left;font:600 14px 'DM Sans';color:#25344f;cursor:pointer;box-shadow:0 3px 0 #edf0f4}
.unit-choice.correct{background:#e9f8ed;border-color:#80c994}.unit-choice.wrong{background:#fff0ed;border-color:#e1a096}
.unit-answer{min-height:23px;margin:13px 0;font-weight:700}.unit-answer.good{color:#24821f}.unit-answer.try{color:#9a6523}
.unit-question-actions{margin:10px 0}.unit-context{padding:11px 13px;background:#f3f8ff;border-radius:12px;color:#536783;font-size:13px}
.daily-mission{position:relative;overflow:hidden;padding:19px 21px;background:linear-gradient(120deg,#fff9df,#fff 72%);border:1px solid #eddb83;border-radius:20px;box-shadow:0 5px 0 #f0e8c9}.home-daily-mission{margin:17px 0 24px}.challenge-daily-mission{margin:23px 0;background:linear-gradient(120deg,#f1fff7,#fff 75%);border-color:#cce9d4;box-shadow:0 4px 0 #dcefe1}.daily-mission-top{display:flex;align-items:center;gap:12px}.daily-medal{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:14px;background:#ffedaa;font-size:24px}.daily-mission-top h2{font:800 19px Outfit;margin:4px 0}.daily-reward{margin-left:auto;white-space:nowrap;padding:7px 10px;border-radius:999px;background:#e8f8e9;color:#2f7c3b;font-size:11px;font-weight:800}.daily-progress-row{display:flex;justify-content:space-between;align-items:center;margin:15px 0 7px;color:#6c7890;font-size:12px;font-weight:700}.daily-progress-row strong{color:#9b7b00;font:800 14px Outfit}.daily-status{min-height:19px;margin:9px 0 12px;color:#677890;font-size:12px}.daily-mission .btn{font-size:12px;padding:10px 14px}.daily-explainer{margin:10px 0;color:#6e7c91;font-size:12px}
.shop-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 25px;border:1px solid #dfe8f2;border-radius:23px;background:linear-gradient(125deg,#f1f9ff,#fff8dc);box-shadow:0 5px 0 #e4ebf0}.shop-hero h1{font:800 clamp(30px,4vw,42px)/1.12 Outfit;margin:8px 0}.shop-hero .sub{max-width:620px;margin:0}.shop-balance{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;padding:15px 18px;border:1px solid #e8d77e;border-radius:17px;background:#fffdf0}.shop-balance span,.shop-balance small{color:#7d775e;font-size:11px}.shop-balance strong{font:800 25px Outfit;color:#8b7200}.shop-notice{min-height:21px;margin:16px 2px;color:#697b92;font-size:13px;font-weight:700}.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.shop-item{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:16px;background:#fff;border:1px solid #dde7f1;border-radius:20px;box-shadow:0 4px 0 #e6edf3}.shop-item.owned{border-color:#b8e0c3;background:linear-gradient(155deg,#f4fff4,#fff 65%)}.shop-item-preview{position:relative;display:grid;place-items:center;width:100%;height:112px;margin-bottom:13px;overflow:hidden;border-radius:15px;background:linear-gradient(130deg,#eaf7ff,#f9f4db)}.shop-item-preview.frame{background:linear-gradient(130deg,#ffeff4,#eef7ff)}.shop-item-preview.background{background:linear-gradient(130deg,#dff7ed,#e6f4ff)}.shop-buddy{font-size:57px;filter:drop-shadow(0 4px 0 #30466330)}.shop-reward-icon{position:absolute;right:calc(50% - 38px);top:12px;font-size:32px;filter:drop-shadow(0 2px 2px #27364d35)}.shop-item .eyebrow{font-size:9px;letter-spacing:1px}.shop-item h2{font:800 18px Outfit;margin:7px 0}.shop-item>p{flex:1;margin:0 0 12px;color:#6d7c91;font-size:12px;line-height:1.5}.shop-price{margin:2px 0 12px;color:#8b7200;font-size:12px;font-weight:800}.shop-action{width:100%;font-size:12px;padding:10px}.shop-action:disabled{opacity:.57;cursor:not-allowed}.shop-remove{align-self:center;margin-top:9px;border:0;background:transparent;color:#8993a2;font:600 11px 'DM Sans';cursor:pointer}.profile-shop-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.profile-cosmetic-title{display:inline-flex;padding:5px 9px;margin:0 0 7px;border-radius:999px;background:#fff2c4;color:#826400;font-size:11px;font-weight:800}.profile-avatar-large{position:relative}.profile-avatar-large[data-hat="cap"]::after,.profile-avatar-large[data-hat="crown"]::after{position:absolute;right:7px;top:0;z-index:2;font-size:36px;line-height:1;filter:drop-shadow(0 2px 2px #18274545);transform:rotate(9deg)}.profile-avatar-large[data-hat="cap"]::after{content:'🧢'}.profile-avatar-large[data-hat="crown"]::after{content:'👑';right:12px;top:0}.profile-avatar-large[data-frame="rainbow-frame"]{border:4px solid #efaa5f;box-shadow:0 0 0 4px #8bd7cf,0 6px 0 #d3e5e8}.profile-avatar-large[data-background="meadow"]{background:linear-gradient(145deg,#e2f8ca,#aee7ba)}.profile-avatar-large[data-background="ocean"]{background:linear-gradient(145deg,#c8f0ff,#75c9e2)}
.shop-buddy-image{width:69px;height:69px;object-fit:contain;filter:drop-shadow(0 4px 0 #30466330)}
.daily-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.shop-quick-link{border:0;background:transparent;padding:8px 0;color:#826a12;font:800 12px 'DM Sans';cursor:pointer}.shop-quick-link:hover{text-decoration:underline}
.avatar-choice span{display:grid;place-items:center;min-height:32px}.avatar-choice span img{display:block;width:34px;height:34px;object-fit:contain}
.avatar-choice-image{display:block;width:36px;height:36px;flex:0 0 36px;object-fit:contain}
.profile-avatar-large[data-hat="cap"]::after,.profile-avatar-large[data-hat="crown"]::after{content:none!important}
.equipped-accessory{position:absolute;z-index:3;left:50%;top:2px;width:56px;height:42px;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 2px 1px #26344e45);pointer-events:none}.profile-avatar-large[data-hat="cap"] .equipped-accessory{top:9px;width:66px;height:44px}.profile-avatar-large[data-hat="crown"] .equipped-accessory{top:1px;width:55px;height:40px}
.profile-avatar-large[data-frame="rainbow-frame"]{border:5px solid #efaa5f;box-shadow:0 0 0 4px #8bd7cf,0 6px 0 #d3e5e8}
.profile-avatar-large[data-frame="leaf-frame"]{border:5px solid #75bd65;box-shadow:0 0 0 4px #c4eaa7,0 6px 0 #d3e5e8}
.profile-avatar-large[data-frame="ocean-frame"]{border:5px solid #48aeca;box-shadow:0 0 0 4px #a8e5ee,0 6px 0 #d3e5e8}
.profile-avatar-large[data-frame="sunset-frame"]{border:5px solid #f18a70;box-shadow:0 0 0 4px #f7c1a2,0 6px 0 #d3e5e8}
.shop-item-preview .shop-buddy{width:82px;height:82px;display:grid;place-items:center;border-radius:25px;transition:box-shadow .2s}
.shop-item-preview .shop-buddy-image{width:69px;height:69px;object-fit:contain}
.shop-item-preview.item-rainbow-frame .shop-buddy{border:4px solid #efaa5f;box-shadow:0 0 0 3px #8bd7cf}
.shop-item-preview.item-leaf-frame .shop-buddy{border:4px solid #75bd65;box-shadow:0 0 0 3px #c4eaa7}
.shop-item-preview.item-ocean-frame .shop-buddy{border:4px solid #48aeca;box-shadow:0 0 0 3px #a8e5ee}
.shop-item-preview.item-sunset-frame .shop-buddy{border:4px solid #f18a70;box-shadow:0 0 0 3px #f7c1a2}
.shop-item-preview.item-meadow{background:radial-gradient(circle at 20% 20%,#fff4a5 0 12px,transparent 13px),linear-gradient(135deg,#d9f3c0,#abdfbd)}
.shop-item-preview.item-ocean{background:radial-gradient(ellipse at 78% 18%,#fff 0 13px,transparent 14px),linear-gradient(135deg,#c7f0ff,#71c7df)}
.shop-item-preview.item-sunset{background:radial-gradient(circle at 78% 22%,#fff3c4 0 18px,transparent 19px),linear-gradient(135deg,#ffc18f,#ef91a5 58%,#a984c7)}
.shop-item-preview.item-candy{background:radial-gradient(circle at 20% 24%,#fff 0 13px,transparent 14px),linear-gradient(135deg,#ffc9e6,#c8c7ff 55%,#a8e9ec)}
.shop-item-preview.item-galaxy{background:radial-gradient(circle at 20% 25%,#fff8c4 0 2px,transparent 3px),radial-gradient(circle at 78% 70%,#fff 0 2px,transparent 3px),linear-gradient(135deg,#323d7f,#8061ae 60%,#e582af)}
.profile-avatar-large[data-background="sunset"]{background:linear-gradient(145deg,#ffc18f,#ef91a5 58%,#a984c7)}
.profile-avatar-large[data-background="candy"]{background:linear-gradient(145deg,#ffc9e6,#c8c7ff 55%,#a8e9ec)}
.profile-avatar-large[data-background="galaxy"]{background:radial-gradient(circle at 20% 25%,#fff8c4 0 2px,transparent 3px),radial-gradient(circle at 78% 70%,#fff 0 2px,transparent 3px),linear-gradient(145deg,#323d7f,#8061ae 60%,#e582af)}
.shop-preview-title{position:absolute;right:10px;bottom:9px;padding:5px 8px;border-radius:999px;background:#fff5cc;color:#786111;font-size:9px;font-weight:800}
.premium-promise{display:flex;align-items:center;gap:13px;max-width:850px;margin:0 auto 18px;padding:15px 18px;border:1px solid #d7e9d6;border-radius:16px;background:#f3fff1;color:#49664e}.premium-promise>span{font-size:27px}.premium-promise p{margin:0;font-size:13px;line-height:1.55}.premium-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:900px;margin:18px auto 24px}.premium-preview article{padding:17px;border:1px solid #dfe7ef;border-radius:18px;background:#fff}.premium-preview article>span{font-size:25px}.premium-preview h2{font:700 17px Outfit;margin:9px 0 5px}.premium-preview p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.review-tile{background:linear-gradient(145deg,#fff8df,#fff)}.challenge-tile{background:linear-gradient(145deg,#fff3c7,#fff);border-color:#ead77b}.challenge-tile>span{filter:drop-shadow(0 2px 2px #d8b74c55)}.review-summary{margin:14px 0;padding:13px 16px;background:#f1f7ff;border:1px solid #d9e6f5;border-radius:14px;color:#566b86;font-size:13px;font-weight:700}.review-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.review-card{min-width:0;padding:17px;background:#fff;border:1px solid #dce6f1;border-radius:18px;box-shadow:0 4px 0 #e8edf3}.review-card .eyebrow{font-size:10px;line-height:1.5}.review-card h2{font:700 17px/1.4 Outfit;margin:10px 0}.review-attempts{display:block;color:#8792a2;font-size:11px}.review-answer{margin:12px 0;padding:11px 12px;border-radius:12px;background:#eff9ef;color:#27723c;font-weight:700}.review-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.review-actions .btn{font-size:12px;padding:10px 12px}
@media(max-width:700px){.course-map{grid-template-columns:1fr;gap:12px;margin:16px auto}.unit-card{padding:15px}.unit-icon{width:44px;height:44px;flex-basis:44px}.unit-info h2{font-size:18px}.unit-info .btn{font-size:12px}.unit-question{padding:16px}.unit-question h3{font-size:19px}}
@media(max-width:700px){.review-list{grid-template-columns:1fr}.review-actions>*{flex:1}}
@media(max-width:700px){.premium-preview{grid-template-columns:1fr}.premium-promise{align-items:flex-start}}
@media(max-width:560px){.daily-mission{padding:16px}.daily-mission-top h2{font-size:17px}.daily-reward{font-size:10px;padding:6px 8px}.daily-medal{width:39px;height:39px;flex-basis:39px}}
@media(max-width:760px){.shop-hero{align-items:flex-start;flex-direction:column;padding:18px}.shop-balance{width:100%;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:space-between}.shop-balance small{width:100%}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-shop-heading{align-items:flex-start;flex-direction:column}.profile-shop-heading .btn{width:100%}}
@media(max-width:420px){.shop-grid{grid-template-columns:1fr}.shop-item-preview{height:95px}}

.login-open{border:1px solid #f1cf61;border-radius:14px;background:#fffdf2;color:#655114;padding:9px 12px;font:800 12px 'DM Sans';cursor:pointer}.login-dialog{width:min(460px,calc(100% - 30px));border:0;border-radius:24px;padding:28px;color:var(--ink);box-shadow:0 24px 80px #18274544}.login-dialog::backdrop{background:#1b294477;backdrop-filter:blur(4px)}.login-dialog h2{font:800 25px Outfit;margin:10px 32px 8px 0}.login-dialog>p{line-height:1.55}.dialog-close{position:absolute;right:16px;top:13px;border:0;background:#edf3f9;border-radius:50%;width:34px;height:34px;font-size:22px;cursor:pointer}.login-options{display:grid;gap:9px;margin:18px 0}.login-options button{padding:13px;border:1px solid #dfe7ef;border-radius:14px;background:#fff;text-align:left;font:700 14px 'DM Sans';color:#334561;cursor:pointer}.login-options button:hover{background:#f5faff;border-color:#a9c8df}.login-message{font-size:12px;color:#7a6a36;background:#fff9df;border-radius:10px;padding:10px}.login-dialog .btn{width:100%;margin-top:4px}
.profile-header{display:flex;align-items:center;gap:22px;background:linear-gradient(120deg,#d8f4f2,#eef6ff);border:1px solid #d5e8ee;border-radius:24px;padding:24px;margin:10px 0 30px}.profile-avatar-large{flex:0 0 120px;height:120px;display:grid;place-items:center;background:#fff;border-radius:32px;box-shadow:0 6px 0 #d3e5e8;font-size:75px;overflow:hidden}.profile-avatar-large img{width:100%;height:100%;object-fit:contain;padding:8px}.profile-identity{flex:1}.profile-identity h1{font:800 30px Outfit;margin:6px 0}.profile-name-form{display:flex;gap:8px;max-width:430px}.profile-name-form input{flex:1;min-width:0;border:1px solid #dce6f1;border-radius:13px;padding:11px 13px;font:14px 'DM Sans'}.profile-name-form .btn{padding:10px 14px}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0 28px}.profile-stat{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:19px;padding:17px;box-shadow:0 5px 0 #e7edf4}.profile-stat>span{font-size:23px}.profile-stat strong{font:800 21px Outfit;color:#32486f}.profile-stat small{color:var(--muted)}.profile-avatars{justify-content:flex-start;margin:12px 0 30px}.profile-avatars .avatar-choice{min-width:120px}.language-progress-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0 28px}.language-progress-row{padding:14px;background:#fff;border:1px solid var(--line);border-radius:15px}.language-progress-row.current-language{border-color:#e8ca50;background:#fffdf2}.language-progress-label{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:9px}.language-progress-label strong{font:700 13px Outfit}.language-progress-label span{font-size:10px;color:var(--muted);text-align:right}.profile-progress-track{height:7px;border-radius:9px;background:#eef0f3;overflow:hidden}.profile-progress-track i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#62d1a0,#55b7d5);transition:width .35s}.profile-achievements{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0 28px}.profile-achievement{display:flex;align-items:center;gap:12px;padding:13px;background:#fff;border:1px solid var(--line);border-radius:15px;color:#9aa3af}.profile-achievement.unlocked{background:#fff9dc;border-color:#eed15a;color:#796100}.achievement-icon{width:42px;height:42px;display:grid;place-items:center;background:#f1f3f6;border-radius:13px;font-size:22px}.unlocked .achievement-icon{background:#ffeb9b}.achievement-text{display:flex;flex:1;flex-direction:column;gap:3px}.achievement-text strong{font:700 13px Outfit}.achievement-text small{font-size:10px}.profile-achievement>span:last-child{font-size:11px;white-space:nowrap}.account-card{display:flex;justify-content:space-between;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin:10px 0 28px}.account-card h2{font:700 17px Outfit;margin:0 0 4px}.account-card p{font-size:13px;color:var(--muted);margin:0}
@media(max-width:650px){.profile-header{align-items:flex-start;flex-direction:column;padding:18px}.profile-avatar-large{width:95px;height:95px;flex-basis:95px;font-size:60px;border-radius:25px}.profile-identity h1{font-size:26px}.profile-name-form{flex-direction:column;width:100%}.profile-stats{grid-template-columns:repeat(2,1fr)}.language-progress-list,.profile-achievements{grid-template-columns:1fr}.account-card{align-items:flex-start;flex-direction:column}.account-card .btn{width:100%}.language-start-top{flex-wrap:wrap}.login-open{margin-left:auto}}

.listening-panel{max-width:790px}.listening-panel h1{font:800 clamp(30px,4vw,43px) Outfit}.listen-progress{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:20px 0}.listen-progress>span{font-size:12px;font-weight:800;color:#6e7d94;white-space:nowrap}.listen-progress .challenge-progress{flex:1}.listening-scene{min-height:190px;display:flex;flex-direction:column;justify-content:space-between;padding:14px 15px 19px;background:linear-gradient(135deg,#f0f9ff,#f7fffa);border:1px solid #e1edf1;border-radius:22px;margin:19px 0}.speaker-character,.listener-character{display:flex;align-items:center;gap:10px}.character-face,.listener-avatar{width:52px;height:52px;border-radius:18px;background:#ffe9b1;display:grid;place-items:center;font-size:30px;box-shadow:0 4px 0 #ecd193}.speech-bubble,.answer-bubble{position:relative;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dce6ef;border-radius:15px;padding:10px 13px;min-height:44px;color:#33435d;font-weight:600}.speech-bubble:before{content:'';position:absolute;left:-7px;top:14px;width:12px;height:12px;transform:rotate(45deg);background:#fff;border-left:1px solid #dce6ef;border-bottom:1px solid #dce6ef}.prompt-audio{z-index:1;border:0;border-radius:10px;background:#eaf8ff;padding:6px 8px;font-size:18px;cursor:pointer}.listener-character{justify-content:flex-end}.answer-bubble{min-width:100px;max-width:70%;justify-content:center;color:#6c7a90}.answer-bubble:after{content:'';position:absolute;right:-7px;top:14px;width:12px;height:12px;transform:rotate(-45deg);background:#fff;border-right:1px solid #dce6ef;border-bottom:1px solid #dce6ef}.listener-avatar{background:#dff4e7;box-shadow:0 4px 0 #b8deca}.listening-options{display:grid;gap:9px}.listening-option{display:flex;align-items:center;gap:13px;text-align:left;padding:13px 14px;border:1px solid #dfe7ef;border-radius:15px;background:#fff;color:#34445d;box-shadow:0 3px 0 #e7edf4;font:600 14px 'DM Sans';cursor:pointer;transition:.16s}.listening-option:hover:not(:disabled){transform:translateY(-2px);border-color:#93cee6;box-shadow:0 5px 0 #e7edf4}.listening-option>span{width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;border:1px solid #dce5ee;border-radius:8px;color:#8290a3;font-size:12px}.listening-option.correct{background:#e9fbef;border-color:#90d6a5;box-shadow:0 3px 0 #c6edcf}.listening-option.incorrect{background:#fff0ef;border-color:#efa6a0;box-shadow:0 3px 0 #f2d2cf}.listening-option:disabled{cursor:default}.listening-feedback{min-height:26px;margin:15px 0 3px;font-weight:800}.listening-feedback.good{color:#2d9152}.listening-feedback.try{color:#ac6842}
@media(max-width:560px){.listening-scene{min-height:160px}.listening-option{font-size:13px;padding:12px}.listen-progress{align-items:flex-start;flex-direction:column}.listen-progress .challenge-progress{width:100%}}

@media(max-width:560px){.topbar{height:auto;min-height:63px;flex-wrap:wrap;padding:8px 0;gap:8px}.topright{gap:5px;flex-wrap:wrap}.language-return{padding:7px 8px;font-size:10px}.nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;gap:3px}.nav::-webkit-scrollbar{display:none}.nav button{flex:0 0 auto}}

.nav{display:none!important}.app{padding-bottom:112px}.bottom-nav{position:fixed;z-index:50;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);transform:translateX(-50%);width:min(650px,calc(100% - 22px));display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:8px 9px;background:#fffefaee;border:1px solid #dce6ef;border-radius:23px;box-shadow:0 8px 30px #2b426c25;backdrop-filter:blur(12px)}.bottom-nav button{border:0;background:transparent;border-radius:16px;color:#687a94;min-height:55px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}.bottom-nav button span{font-size:20px;line-height:1}.bottom-nav button small{font:800 9px 'DM Sans'}.bottom-nav button.active{color:#234c59;background:#e3f8f1}.bottom-nav button.active span{transform:translateY(-1px)}.more-menu{width:min(420px,calc(100% - 28px));border:0;border-radius:24px;padding:22px;background:#fffdf6;color:var(--ink);box-shadow:0 25px 85px #24334d55}.more-menu::backdrop{background:#26344d66;backdrop-filter:blur(4px)}.more-menu-head{display:flex;justify-content:space-between;align-items:start}.more-menu-head h2{font:800 23px Outfit;margin:6px 0 16px}.more-menu-head .dialog-close{position:static;flex:0 0 auto}.more-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.more-menu-grid button{border:1px solid var(--line);background:#fff;border-radius:15px;padding:14px;text-align:left;font:700 13px 'DM Sans';color:#354965;cursor:pointer}.more-menu-grid button:hover{background:#f2f8ff;border-color:#b7d3e4}.practice-title{font:800 34px Outfit;margin:6px 0}.practice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0}.practice-tile{min-height:145px;border:1px solid var(--line);border-radius:21px;background:#fff;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;cursor:pointer;color:var(--ink);box-shadow:0 5px 0 #e4ebf1;transition:.16s}.practice-tile:hover{transform:translateY(-2px);box-shadow:0 7px 0 #e4ebf1}.practice-tile>span{font-size:29px}.practice-tile b{font:800 18px Outfit}.practice-tile small{font-size:12px;color:var(--muted);line-height:1.45}.practice-more{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.practice-more .mode{min-height:130px}
@media(max-width:560px){.app{padding:0 15px 105px}.bottom-nav{bottom:calc(env(safe-area-inset-bottom,0px) + 5px);width:calc(100% - 14px);padding:6px}.bottom-nav button{min-height:51px}.bottom-nav button span{font-size:19px}.bottom-nav button small{font-size:8px}.practice-grid{gap:9px}.practice-tile{padding:14px;min-height:137px}.practice-tile b{font-size:16px}.practice-more{grid-template-columns:1fr 1fr}}
@media print{.bottom-nav{display:none!important}}
.site-copyright{max-width:1120px;margin:0 auto;padding:18px 28px 28px;border-top:1px solid #dce5ef;display:flex;justify-content:center;gap:7px;flex-wrap:wrap;color:#718097;font-size:11px;text-align:center}
.site-copyright strong{color:#32486f}
.site-copyright .app-version{padding:2px 8px;border-radius:999px;background:#eaf1fa;color:#556984;font-weight:700}
@media(max-width:560px){.site-copyright{padding:15px 18px 24px;font-size:10px}}

/* Keep the profile companion picker balanced even when Kiki uses the full mascot artwork. */
.avatar-choice-art{width:40px;height:40px;min-height:40px!important;flex:0 0 40px;display:grid!important;place-items:center}
.avatar-choice-art img.avatar-choice-image{display:block;width:36px;height:36px;max-width:36px;max-height:36px;object-fit:contain}
.profile-avatars{display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px}
.profile-avatars .avatar-choice{box-sizing:border-box;flex:0 0 120px;width:120px;height:112px;min-width:120px;min-height:112px;padding:8px 10px;justify-content:center;gap:3px;overflow:hidden}