@import "https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap";:root{--bg-primary:#fffbf0;--text-color:#3d2c1e;--accent-blue:#5bc4f5;--accent-green:#7dd87a;--accent-yellow:#ffd966;--accent-pink:#ffb3c6;--accent-orange:#ffa552;--card-shadow:0 8px 20px #3d2c1e14;--card-radius:24px;--font-nunito:"Nunito", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-color);font-family:var(--font-nunito);padding-bottom:100px;font-weight:700;line-height:1.4;overflow-x:hidden}.app-container{background-color:var(--bg-primary);flex-direction:column;max-width:600px;min-height:100vh;margin:0 auto;display:flex;position:relative}.main-content{flex:1;padding:20px 16px}.page-transition{animation:.4s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.home-header{text-align:center;margin-bottom:24px;padding-top:10px}.home-title{color:var(--text-color);text-shadow:2px 2px #0000000a;font-size:40px;font-weight:900}.home-subtitle{color:#7c6046;margin-top:6px;font-size:20px}.grid-kategori{grid-template-columns:repeat(2,1fr);gap:16px;padding-bottom:20px;display:grid}.card-kategori{border-radius:var(--card-radius);border:4px solid var(--card-bg);box-shadow:var(--card-shadow);text-align:center;cursor:pointer;background-color:#fff;flex-direction:column;justify-content:center;align-items:center;min-height:140px;padding:20px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;display:flex}.card-kategori:hover,.card-kategori:active{transform:scale(1.06);box-shadow:0 12px 24px #3d2c1e26}.card-kategori:active{transform:scale(.95)}.card-kategori-emoji{margin-bottom:10px;font-size:48px;display:block}.card-kategori-nama{color:var(--text-color);font-size:20px;font-weight:800}.nav-bottom{z-index:999;background-color:#fff;border-top-left-radius:28px;border-top-right-radius:28px;justify-content:space-around;align-items:center;width:100%;max-width:600px;padding:10px 8px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -4px 20px #3d2c1e14}.nav-bottom-item{cursor:pointer;color:#7c6046;font-family:var(--font-nunito);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:6px 0;font-size:14px;font-weight:700;transition:transform .2s;display:flex}.nav-bottom-item:active{transform:scale(.9)}.nav-bottom-item.active{color:var(--accent-blue);font-weight:800}.nav-bottom-item.active .nav-bottom-emoji{filter:drop-shadow(0 2px 4px #5bc4f566);transform:scale(1.2)translateY(-4px)}.nav-bottom-emoji{margin-bottom:2px;font-size:28px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.module-container{flex-direction:column;padding-bottom:20px;display:flex}.module-header{align-items:center;min-height:60px;margin-bottom:20px;display:flex;position:relative}.module-title{text-align:center;flex:1;margin-right:60px;font-size:28px;font-weight:800}.btn-back{color:var(--text-color);font-family:var(--font-nunito);cursor:pointer;z-index:10;background-color:#fff;border:3px solid #e6dfd1;border-radius:20px;justify-content:center;align-items:center;min-height:50px;padding:10px 16px;font-size:16px;font-weight:800;transition:transform .2s,background-color .2s;display:inline-flex;box-shadow:0 4px #3d2c1e1a}.btn-back:hover,.btn-back:active{background-color:#f7f1e6;transform:scale(1.05)}.btn-back:active{transform:scale(.95)translateY(2px);box-shadow:0 2px #3d2c1e1a}.grid-alphabet{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.card-alphabet{aspect-ratio:1;box-shadow:var(--card-shadow), inset 0 -6px 0 #0000001a;color:var(--text-color);cursor:pointer;font-weight:900;font-family:var(--font-nunito);border:none;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;min-height:75px;transition:transform .15s cubic-bezier(.175,.885,.32,1.275);display:flex}.card-alphabet:active{box-shadow:var(--card-shadow), inset 0 -2px 0 #0000001a;transform:scale(.9)translateY(4px)}.alphabet-letter{font-size:32px;line-height:1}.alphabet-subletter{opacity:.7;font-size:18px}.detail-card{border-radius:var(--card-radius);box-shadow:var(--card-shadow);text-align:center;background-color:#fff;border:4px solid #fff;flex-direction:column;align-items:center;padding:30px 20px;display:flex;position:relative;overflow:hidden}.large-letter{color:var(--text-color);letter-spacing:-2px;margin-bottom:15px;font-size:120px;font-weight:900;line-height:1}.large-letter-lower{color:var(--accent-orange);margin-left:10px;font-size:90px}.detail-visual{flex-direction:column;align-items:center;margin:15px 0;display:flex}.modal-image{object-fit:contain;border-radius:20px;width:160px;height:160px;margin-bottom:15px;display:inline-block;box-shadow:0 4px 12px #0000001a}.large-emoji{margin-bottom:15px;font-size:110px;line-height:1;display:inline-block}.detail-word{color:var(--text-color);font-size:38px;font-weight:900}.btn-suara{background-color:var(--accent-green);color:#fff;font-family:var(--font-nunito);cursor:pointer;border:none;border-radius:20px;justify-content:center;align-items:center;min-height:60px;margin-top:15px;padding:14px 28px;font-size:20px;font-weight:800;transition:transform .15s,box-shadow .15s;display:inline-flex;box-shadow:0 6px #3f923c,0 8px 15px #7dd87a66}.btn-suara:hover,.btn-suara:active{transform:translateY(-2px)}.btn-suara:active{transform:translateY(4px);box-shadow:0 2px #3f923c,0 4px 5px #7dd87a66}.detail-nav{justify-content:space-between;gap:16px;margin-top:20px;display:flex}.btn-nav{color:var(--text-color);font-family:var(--font-nunito);cursor:pointer;background-color:#fff;border:3px solid #e6dfd1;border-radius:24px;flex:1;min-height:60px;padding:15px;font-size:18px;font-weight:800;transition:transform .2s,background-color .2s;box-shadow:0 4px #3d2c1e1a}.btn-nav:hover,.btn-nav:active{background-color:#f7f1e6;transform:scale(1.03)}.btn-nav:active{transform:scale(.97)translateY(2px);box-shadow:0 2px #3d2c1e1a}.grid-numbers{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.card-number{border-radius:var(--card-radius);box-shadow:var(--card-shadow), inset 0 -6px 0 #0000001a;text-align:center;cursor:pointer;color:var(--text-color);font-family:var(--font-nunito);border:none;flex-direction:column;justify-content:center;align-items:center;min-height:110px;padding:16px;transition:transform .15s cubic-bezier(.175,.885,.32,1.275);display:flex}.card-number:active{box-shadow:var(--card-shadow), inset 0 -2px 0 #0000001a;transform:scale(.9)translateY(4px)}.number-val{font-size:38px;font-weight:900;line-height:1.1}.number-dots{text-overflow:ellipsis;white-space:nowrap;max-width:100%;margin:4px 0;font-size:12px;overflow:hidden}.number-name{opacity:.8;font-size:15px}.large-number-detail{color:var(--accent-blue);font-size:140px;font-weight:900;line-height:1}.counting-visual{flex-wrap:wrap;justify-content:center;gap:10px;max-width:320px;margin:20px 0;display:flex}.counting-dot{font-size:32px;display:inline-block}.tab-container{background-color:#ebdcb9;border-radius:20px;justify-content:center;gap:6px;margin-bottom:20px;padding:6px;display:flex}.tab-btn{font-family:var(--font-nunito);cursor:pointer;color:var(--text-color);background:0 0;border:none;border-radius:16px;flex:1;padding:12px;font-size:18px;font-weight:800;transition:background-color .2s,color .2s}.tab-btn.active{background-color:#fff;box-shadow:0 4px 10px #0000000d}.tab-btn.mini{flex:initial;padding:8px 14px;font-size:16px}.spelled-word-container{gap:8px;margin:20px 0;display:flex}.spelled-char{width:70px;height:80px;color:var(--text-color);background-color:#fffbf0;border:4px solid #ebdcb9;border-radius:16px;justify-content:center;align-items:center;font-size:54px;font-weight:900;display:flex}.spelled-full-word{color:#7c6046;text-transform:capitalize;margin-bottom:20px;font-size:26px}.btn-eja{background-color:var(--accent-orange);color:#fff;font-family:var(--font-nunito);cursor:pointer;border:none;border-radius:20px;justify-content:center;align-items:center;min-height:60px;padding:14px 32px;font-size:22px;font-weight:800;transition:transform .15s,box-shadow .15s;display:inline-flex;box-shadow:0 6px #b86e23,0 8px 15px #ffa55266}.btn-eja:hover,.btn-eja:active{transform:translateY(-2px)}.btn-eja:active{transform:translateY(4px);box-shadow:0 2px #b86e23,0 4px 5px #ffa55266}.quiz-instruction{color:#7c6046;margin-bottom:15px;font-size:20px}.quiz-options{flex-direction:column;gap:12px;width:100%;max-width:300px;margin-top:10px;display:flex}.grid-options-2x2{grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:320px;display:grid}.btn-quiz-option{color:var(--text-color);font-family:var(--font-nunito);cursor:pointer;background-color:#fff;border:3px solid #ebdcb9;border-radius:20px;min-height:60px;padding:16px;font-size:22px;font-weight:800;transition:background-color .2s,border-color .2s,transform .2s;box-shadow:0 4px #3d2c1e0d}.btn-quiz-option:active{transform:scale(.97)}.btn-quiz-option.correct{background-color:var(--accent-green)!important;color:#fff!important;border-color:#55ac52!important;box-shadow:0 4px #3f923c!important}.btn-quiz-option.wrong{color:#fff!important;background-color:#ffb3c6!important;border-color:#e57c96!important;box-shadow:0 4px #b34a62!important}.math-progress{text-align:center;color:#7c6046;margin-bottom:10px;font-size:20px}.math-equation-visual{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;min-height:80px;margin-bottom:20px;display:flex}.equation-group{background-color:#fffbf0;border:3px dashed #ebdcb9;border-radius:16px;flex-wrap:wrap;justify-content:center;gap:4px;max-width:180px;padding:8px 12px;display:flex}.math-emoji{font-size:28px}.math-operator{color:var(--accent-orange);font-size:32px;font-weight:900}.math-question-mark{color:var(--accent-blue);font-size:40px;font-weight:900}.math-equation-text{margin-bottom:20px;font-size:34px;font-weight:900}.math-option-btn{height:80px;font-size:32px}.finish-card{padding:50px 30px}.finish-title{margin-top:10px;font-size:32px}.finish-score{margin:10px 0 25px;font-size:22px}.highlight-text{color:var(--accent-blue);font-size:32px}.btn-restart{background-color:var(--accent-blue);color:#fff;font-family:var(--font-nunito);cursor:pointer;border:none;border-radius:20px;min-height:60px;padding:16px 36px;font-size:22px;font-weight:800;transition:transform .15s,box-shadow .15s;box-shadow:0 6px #2a9cd4,0 8px 15px #5bc4f566}.btn-restart:active{transform:translateY(4px);box-shadow:0 2px #2a9cd4,0 4px 5px #5bc4f566}.melukis-layout{flex-direction:column;gap:16px;display:flex}.canvas-wrapper{border-radius:var(--card-radius);box-shadow:var(--card-shadow);background-color:#fff;border:4px solid #ebdcb9;justify-content:center;align-items:center;padding:10px;display:flex;overflow:hidden}.drawing-canvas{aspect-ratio:720/500;touch-action:none;cursor:crosshair;background-color:#fff;border-radius:14px;max-width:100%;height:auto;display:block}.canvas-controls{border-radius:var(--card-radius);box-shadow:var(--card-shadow);background-color:#fff;flex-direction:column;gap:15px;padding:20px;display:flex}.control-section{flex-direction:column;gap:8px;display:flex}.control-label{color:#7c6046;font-size:16px;font-weight:800}.brush-sizes{gap:12px;display:flex}.btn-brush{cursor:pointer;background-color:#fffbf0;border:3px solid #ebdcb9;border-radius:16px;justify-content:center;align-items:center;width:60px;height:60px;font-size:22px;transition:transform .2s,border-color .2s;display:flex}.btn-brush.active{border-color:var(--accent-orange);background-color:#ffdcb8;transform:scale(1.1)}.colors-grid{grid-template-columns:repeat(6,1fr);gap:10px;display:grid}.color-dot{aspect-ratio:1;cursor:pointer;border:4px solid #fff;border-radius:50%;outline:none;width:44px;height:44px;transition:transform .2s;box-shadow:0 2px 5px #00000026}.color-dot.active{border-color:var(--text-color);transform:scale(1.2)}.color-picker-wrapper{cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 5px #00000026}.custom-color-picker{cursor:pointer;background:0 0;border:none;outline:none;width:54px;height:54px;position:absolute;top:-5px;left:-5px}.picker-emoji{pointer-events:none;z-index:5;font-size:20px;position:relative}.templates-row{-webkit-overflow-scrolling:touch;gap:8px;padding:4px 0;display:flex;overflow-x:auto}.btn-template{font-family:var(--font-nunito);white-space:nowrap;cursor:pointer;background-color:#fffbf0;border:3px solid #ebdcb9;border-radius:16px;padding:8px 16px;font-size:15px;font-weight:800;transition:transform .2s,border-color .2s}.btn-template.active{background-color:var(--accent-yellow);border-color:orange;transform:scale(1.05)}.canvas-actions{gap:10px;margin-top:5px;display:flex}.btn-action{font-family:var(--font-nunito);cursor:pointer;color:#fff;border:none;border-radius:16px;flex:1;padding:14px;font-size:16px;font-weight:800;transition:transform .1s;box-shadow:0 4px #0000001a}.btn-action:active{transform:translateY(2px);box-shadow:0 2px #0000001a}.btn-action.undo{background-color:var(--accent-orange)}.btn-action.clear{color:#7c2237;background-color:#ffb3c6}.btn-action.save{background-color:var(--accent-blue)}.grid-cards-items{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.card-item{border-radius:var(--card-radius);box-shadow:var(--card-shadow);text-align:center;cursor:pointer;background-color:#fff;border:4px solid #fff;flex-direction:column;justify-content:center;align-items:center;min-height:130px;padding:20px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);display:flex}.card-item:hover,.card-item:active{transform:scale(1.06);box-shadow:0 10px 20px #3d2c1e1f}.card-item:active{transform:scale(.95)}.card-item-image{object-fit:contain;width:70px;height:70px;margin-bottom:8px}.card-item-emoji{margin-bottom:8px;font-size:48px}.card-item-title{color:var(--text-color);font-size:20px;font-weight:800}.card-item-subtitle{color:#7c6046;font-size:14px;font-weight:600}.overlay-modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;background-color:#3d2c1e66;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.modal-content{text-align:center;border:6px solid var(--accent-yellow);background-color:#fff;border-radius:32px;width:100%;max-width:400px;padding:40px 24px;position:relative;box-shadow:0 10px 30px #3d2c1e40}.modal-close-btn{cursor:pointer;background:#fffbf0;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:22px;display:flex;position:absolute;top:15px;right:15px}.modal-title{margin:10px 0 6px;font-size:32px;font-weight:800}.modal-subtitle{color:#7c6046;margin-bottom:15px;font-size:16px;font-weight:800}.modal-fact{background-color:#fffbf0;border:3px dashed #ebdcb9;border-radius:20px;margin-bottom:20px;padding:16px;font-size:20px;line-height:1.4}.modal-tts-btn{width:100%;max-width:220px;margin-top:0}.solar-system-container{border-radius:var(--card-radius);color:#fff;background-color:#1a1a2e;border:4px solid #0f0f1d;flex-direction:column;align-items:center;margin-bottom:24px;padding:20px;display:flex;overflow:hidden;box-shadow:0 8px 24px #00000026}.solar-system-title{color:var(--accent-yellow);margin-bottom:20px;font-size:18px;font-weight:800}.solar-system-instruction{opacity:.8;margin-top:15px;font-size:14px}.solar-system-view{justify-content:center;align-items:center;width:100%;height:300px;display:flex;position:relative}.sun-center{cursor:pointer;z-index:10;background:0 0;border:none;margin:0;padding:0;font-size:42px;transition:transform .2s;position:absolute}.sun-center:active{transform:scale(1.2)}.orbit-ring{pointer-events:none;border:2px dashed #ffffff26;border-radius:50%;justify-content:center;align-items:flex-start;animation:linear infinite orbitRotation;display:flex;position:absolute}.planet-on-ring{cursor:pointer;pointer-events:auto;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;font-size:26px;transition:transform .2s;display:flex;position:absolute;top:-15px}.planet-on-ring:active{transform:scale(1.4)}@keyframes orbitRotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes popStar{0%{opacity:1;transform:scale(0)rotate(0)}60%{opacity:1;transform:scale(1.4)rotate(180deg)}to{opacity:.8;transform:scale(1)rotate(360deg)}}.animate-pop{animation:.5s cubic-bezier(.175,.885,.32,1.275) both popStar}.animate-bounce-slow{animation:3s ease-in-out infinite bounceSlow}@keyframes bounceSlow{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.animate-shake{animation:.4s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.confetti-container{pointer-events:none;z-index:10001;width:100vw;height:100vh;position:fixed;top:0;left:0}.confetti-star{font-size:28px;animation:2.2s cubic-bezier(.1,.8,.3,1) both starFloat;position:absolute}@keyframes starFloat{0%{opacity:0;transform:translateY(50px)scale(0)rotate(0)}20%{transform:translate(0, 0) scale(var(--star-scale,1)) rotate(90deg);opacity:1}to{transform:translate(var(--star-drift,20px), -150px) scale(.4) rotate(360deg);opacity:0}}.btn-whatsapp{color:#fff;background-color:#25d366;border-radius:20px;justify-content:center;align-items:center;min-height:50px;margin-top:14px;padding:10px 20px;font-size:16px;font-weight:800;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 6px #1ebe57,0 8px 15px #25d3664d}.btn-whatsapp:hover,.btn-whatsapp:active{transform:translateY(-2px)}.btn-whatsapp:active{transform:translateY(4px);box-shadow:0 2px #1ebe57,0 4px 5px #25d3664d}.home-footer{justify-content:center;width:100%;margin-top:10px;margin-bottom:30px;display:flex}@media (width>=600px){body{background-color:#ebdcb9}.app-container{min-height:100vh;box-shadow:0 0 40px #0000001a}}