:root{font-family:"Baloo 2",Nunito,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#172033;background:#f4f7ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,#dbeafe,transparent 32rem),#f4f7ff}#root{min-height:100vh}.app{min-height:100vh;max-width:520px;margin-inline:auto;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));transition:filter .25s ease}.screen{width:100%;margin:auto;animation:rise .35s ease both}.large-text{font-size:19px}.app.lembut{--surface: rgba(255,255,255,.88);--shadow: 0 18px 45px rgba(112,128,170,.14)}.theme-hewan{background:radial-gradient(circle at 10% 0,#fff7ed,transparent 28rem),radial-gradient(circle at 90% 20,#dcfce7,transparent 30rem),#fffbf4}.theme-pantai{background:radial-gradient(circle at 10% 0,#cffafe,transparent 28rem),radial-gradient(circle at 90% 20,#fef9c3,transparent 32rem),#f0fbff}.theme-gunung{background:radial-gradient(circle at 10% 0,#ecfccb,transparent 30rem),radial-gradient(circle at 90% 20,#e0f2fe,transparent 34rem),#f5faf6}.theme-angkasa{background:radial-gradient(circle at 10% 0,#e0e7ff,transparent 30rem),radial-gradient(circle at 90% 20,#fae8ff,transparent 34rem),#f7f7ff}.theme-buah{background:radial-gradient(circle at 10% 0,#fee2e2,transparent 28rem),radial-gradient(circle at 90% 20,#fef3c7,transparent 32rem),#fffaf5}.muted{color:#61708b;line-height:1.6}.eyebrow{color:#2563eb;font-weight:800;margin:0 0 .35rem}.pill{display:inline-flex;align-items:center;border-radius:999px;background:#fff;box-shadow:var(--shadow, 0 10px 30px rgba(15,23,42,.08));padding:.5rem .9rem;font-weight:700;white-space:nowrap}.hero{position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;color:#fff;background:linear-gradient(120deg,#2563eb,#8b5cf6 65%,#ec4899);border-radius:2rem;padding:clamp(1.4rem,5vw,2rem);padding-bottom:4.6rem;box-shadow:0 24px 60px #2563eb40}.hero h1{font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.05;margin:0}.hero p{max-width:42ch;opacity:.92}.hero-actions{display:flex;align-items:flex-start;gap:.8rem}.hero-badge{position:absolute;right:-1rem;bottom:-2.5rem;font-size:8rem;opacity:.55;filter:drop-shadow(0 12px 20px rgba(0,0,0,.15));transform:rotate(-8deg)}.music-button{border:2px solid rgba(255,255,255,.55);background:#ffffff29;color:#fff;border-radius:999px;padding:.65rem 1rem;font:inherit;font-weight:800;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.2s}.music-button:hover{transform:translateY(-2px);background:#ffffff42}.mode-tabs{display:inline-flex;width:min(420px,100%);margin:.5rem auto 1.5rem;padding:.25rem;background:#e6ebf5;border-radius:999px}.mode-tabs button{flex:1;border:0;background:none;color:#58677f;min-height:46px;border-radius:999px;font:inherit;font-weight:800;cursor:pointer}.mode-tabs button.active{background:#fff;color:#172033;box-shadow:0 6px 18px #0f172a1a}.continuous-note{margin:-.2rem 0 0;color:#64748b;font-size:.92rem}.learn-card{min-height:clamp(250px,38vw,330px);display:grid;place-items:center;align-content:center;gap:1rem;margin:1.2rem 0;text-align:center;border-radius:1.5rem;background:linear-gradient(145deg,#eff6ff,#f5f3ff)}.learn-card strong{font-size:clamp(2.8rem,11vw,4rem);line-height:1}.learn-visual{font-size:clamp(2rem,8vw,3.2rem);font-weight:900;color:#2563eb;max-width:100%;overflow-wrap:anywhere}.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:1rem 0 1.5rem}.page-head h1,h2{margin:0}.page-head h1{font-size:clamp(1.6rem,4vw,2.1rem)}.page-head .pill{white-space:normal;text-align:right}.module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:1.5rem}.module-card{cursor:pointer;text-align:left;border:0;border-radius:1.4rem;background:var(--surface,#fff);box-shadow:var(--shadow,0 12px 34px rgba(15,23,42,.09));padding:.95rem .85rem;display:grid;gap:.25rem;transition:transform .2s,box-shadow .2s}.module-card:hover,.module-card:focus-visible{transform:translateY(-5px);box-shadow:0 22px 50px #0f172a21;outline:3px solid rgba(37,99,235,.25);outline-offset:2px}.module-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:1rem;font-size:1.6rem;margin-bottom:.3rem}.module-card strong{font-size:1.02rem}.module-card small{color:#64748b;font-size:.78rem}.module-skill{color:#2563eb;font-size:.72rem;font-weight:700}.activity-card,.form-card,.parent-strip{background:var(--surface,#fff);border-radius:1.75rem;padding:clamp(1.1rem,3vw,1.8rem);box-shadow:var(--shadow,0 14px 40px rgba(15,23,42,.09))}.activity-card{max-width:720px;margin:2rem auto}.prompt-visual{min-height:clamp(150px,28vw,190px);width:100%;display:grid;place-items:center;border:0;border-radius:1.4rem;background:linear-gradient(145deg,#eff6ff,#f5f3ff);font-size:clamp(3.4rem,12vw,4.2rem);cursor:pointer;margin:1.2rem 0}.question-prompt{font-size:1.25rem;font-weight:750;text-align:center}.dots{display:flex;gap:.35rem;margin-top:.7rem}.dots i{flex:1;height:8px;border-radius:999px;background:#e2e8f0}.dots i.done{background:#2563eb}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.7rem;margin-top:1.2rem}.choice-grid.wide{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.choice{min-height:70px;border:2px solid #dce5f2;background:#fff;color:#172033;border-radius:1.1rem;font:inherit;font-size:1.3rem;font-weight:800;cursor:pointer;transition:.15s}.choice:hover:not(:disabled){border-color:#93c5fd;transform:translateY(-2px)}.choice.correct{background:#dcfce7;border-color:#22c55e;color:#166534}.choice.wrong{background:#fee2e2;border-color:#ef4444;color:#991b1b;animation:shake .4s}.writing-stage{position:relative;margin:1.2rem 0;border:2px dashed #cbd5e1;background:#fff;border-radius:1.4rem;overflow:hidden;touch-action:none;aspect-ratio:36/26}.writing-stage canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;cursor:crosshair}.trace-letter{position:absolute;inset:0;z-index:1;display:grid;place-items:center;font-size:min(52vw,260px);font-weight:900;color:transparent;-webkit-text-stroke:5px #dbeafe;-webkit-user-select:none;user-select:none}.action-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem}.action-row>button{flex:1 1 auto}.primary-button,.secondary-button{cursor:pointer;border:0;font:inherit;font-weight:800;padding:.85rem 1.25rem;border-radius:.95rem;transition:.2s}.primary-button{background:linear-gradient(120deg,#2563eb,#7c3aed);color:#fff;box-shadow:0 10px 24px #2563eb38}.secondary-button{background:#eef2ff;color:#334155;border:2px solid transparent}.primary-button:hover,.secondary-button:hover{transform:translateY(-2px)}.secondary-button:hover{background:#e2e8f0}.primary-button.full{width:100%;margin-top:1rem}.back-button{border:0;background:none;color:#2563eb;font:inherit;font-weight:800;margin-top:1rem;cursor:pointer;padding:.4rem 0}.parent-strip{display:grid;grid-template-columns:1fr;align-items:center;gap:1rem;margin-top:1.5rem}.parent-strip p,.form-card p{margin:.3rem 0 0;color:#64748b}.field{display:grid;gap:.45rem;margin-bottom:1rem;font-weight:700}.field input,.field select,.range-row input{width:100%}.field select,input[type=text],input:not([type]){min-height:48px;border:2px solid #dbe3ee;border-radius:.8rem;padding:.65rem .8rem;font:inherit;background:#fff}input,select,button{accent-color:#2563eb}.setting-row,.range-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.85rem 0;border-bottom:1px solid #edf1f7}.setting-row:last-child,.range-row:last-of-type{border-bottom:0}.setting-row span,.range-row span{display:grid;gap:.15rem}.setting-row small,.range-row small{color:#64748b;font-weight:500}.setting-row input{appearance:none;width:56px;height:31px;border-radius:999px;background:#d8dfec;position:relative;cursor:pointer;transition:.2s}.setting-row input:before{content:"";position:absolute;width:25px;height:25px;border-radius:50%;top:3px;left:3px;background:#fff;box-shadow:0 1px 4px #0003;transition:.2s}.setting-row input:checked{background:#22c55e}.setting-row input:checked:before{transform:translate(25px)}.range-row output{min-width:64px;text-align:right;font-weight:800}.toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));column-gap:2rem}.module-card.menggambar{background:linear-gradient(145deg,#fff5f9,#fdf2ff)}a.module-card{text-decoration:none;color:inherit;font:inherit}.jenjang-soon{opacity:.72;cursor:default}.template-grid{display:flex;gap:.55rem;overflow-x:auto;padding:.3rem .2rem 1rem;scrollbar-width:thin}.cat-chips{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem .1rem .4rem;margin:0 auto .3rem;max-width:760px;scrollbar-width:none}.chip{flex:0 0 auto;border:2px solid #dce5f2;background:#fff;color:#334155;font:inherit;font-weight:800;font-size:.85rem;border-radius:999px;padding:.45rem .9rem;cursor:pointer;transition:.15s}.chip:hover,.chip:focus-visible{border-color:#93c5fd;transform:translateY(-2px)}.chip.active{background:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 6px 16px #2563eb40}.template-card{flex:0 0 auto;width:106px;display:grid;gap:.35rem;justify-items:center;padding:.55rem .55rem .5rem;font-size:.82rem;border:2px solid #dce5f2;border-radius:1.15rem;background:var(--surface,#fff);box-shadow:var(--shadow,0 8px 22px rgba(15,23,42,.07));font:inherit;font-weight:800;color:#172033;cursor:pointer;transition:.15s}.template-card img{width:100%;aspect-ratio:18/13;object-fit:contain;border-radius:.7rem;background:#fff}.template-card span{font-size:.82rem}.template-card:hover,.template-card:focus-visible{transform:translateY(-3px);border-color:#93c5fd}.template-card.active{border-color:#2563eb;outline:3px solid rgba(37,99,235,.22);box-shadow:0 10px 24px #2563eb29}.draw-stage{position:relative;width:100%;max-width:min(760px,100%);margin:.4rem auto 1.2rem;aspect-ratio:18/13;max-height:72vh;border:2px solid #cbd5e1;border-radius:1.5rem;background:#fff;overflow:hidden;touch-action:none;box-shadow:var(--shadow,0 14px 40px rgba(15,23,42,.09))}.draw-stage canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;touch-action:none;cursor:crosshair}.draw-zoom{position:absolute;inset:0;z-index:1;transform-origin:0 0}.zoom-reset{position:absolute;left:.7rem;bottom:.7rem;z-index:3;border:0;background:#ffffffeb;color:#172033;font:inherit;font-weight:800;font-size:.8rem;border-radius:999px;padding:.45rem .75rem;cursor:pointer;box-shadow:0 6px 16px #0f172a2e}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem;margin-top:1rem}.art-card{margin:0;background:#fff;border:2px solid #e2e8f0;border-radius:1rem;padding:.5rem}.art-card img{width:100%;aspect-ratio:18/13;object-fit:cover;border-radius:.6rem;background:#fff;display:block;cursor:pointer;transition:.15s}.art-card img:hover{transform:scale(1.03)}.art-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding-top:.4rem;font-size:.78rem;font-weight:800;color:#475569}.art-card figcaption button{border:0;background:none;cursor:pointer;font-size:1.05rem;padding:.1rem .2rem}.draw-template-layer{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none;-webkit-user-select:none;user-select:none}.draw-template-layer img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}.studio-card{max-width:760px;margin:0 auto 2rem}.studio-card .palette,.studio-card .tool-row,.studio-card .action-row{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.studio-card .palette>:first-child,.studio-card .tool-row>:first-child,.studio-card .action-row>:first-child{margin-left:auto}.studio-card .palette>:last-child,.studio-card .tool-row>:last-child,.studio-card .action-row>:last-child{margin-right:auto}.studio-card .swatch,.studio-card .tool-button{flex:0 0 auto;white-space:nowrap}.draw-workspace{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}.example-card{background:var(--surface,#fff);border-radius:1.4rem;padding:.9rem 1rem 1rem;box-shadow:var(--shadow,0 14px 40px rgba(15,23,42,.09))}.example-card h3{margin:0;font-size:1rem}.example-card img{width:100%;max-height:170px;object-fit:contain;border-radius:.8rem;background:#fff;display:block;margin-top:.7rem;border:2px dashed #e2e8f0}.example-card p{margin:.55rem 0 0;font-size:.88rem;color:#475569;line-height:1.5}.mini-toggle{border:0;background:#eef2ff;color:#2563eb;font:inherit;font-weight:800;font-size:.75rem;border-radius:999px;padding:.35rem .7rem;cursor:pointer;transition:.15s}.mini-toggle:hover{background:#e0e7ff}.stage-full-button{position:absolute;top:.7rem;right:.7rem;z-index:3;border:0;background:#ffffffe0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#172033;font:inherit;font-weight:800;font-size:.85rem;border-radius:999px;padding:.5rem .85rem;cursor:pointer;box-shadow:0 6px 16px #0f172a2e;transition:.15s}.stage-full-button:hover,.stage-full-button:focus-visible{background:#fff;transform:translateY(-2px)}.draw-backdrop{display:contents}.draw-backdrop.open{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#0f172af5;padding:max(.4rem,env(safe-area-inset-top)) .6rem calc(.4rem + env(safe-area-inset-bottom));overscroll-behavior:contain;overflow:hidden}.draw-backdrop:fullscreen{display:flex;align-items:center;justify-content:center;flex-direction:column;background:#0f172a;overscroll-behavior:contain}.draw-backdrop.open .draw-stage,.draw-backdrop:fullscreen .draw-stage{width:100%;height:auto;aspect-ratio:18/13;max-height:calc(100vh - var(--bar-h,200px) - 28px);max-height:calc(100dvh - var(--bar-h,200px) - 28px);margin:auto;border-color:#64748b}.draw-backdrop.open .stage-full-button{display:none}.rotate-hint{position:absolute;top:max(.8rem,env(safe-area-inset-top));left:50%;transform:translate(-50%);margin:0;z-index:4;color:#cbd5e1;font-size:.78rem;font-weight:700;text-align:center;white-space:nowrap}.ref-float{position:absolute;top:max(.7rem,env(safe-area-inset-top));left:.8rem;z-index:4;display:grid;gap:.25rem;justify-items:center;background:#fffffff2;border-radius:.9rem;padding:.4rem .4rem .3rem;box-shadow:0 10px 26px #0006;max-width:clamp(96px,13vw,150px)}.ref-float img{width:100%;aspect-ratio:18/13;object-fit:contain;border-radius:.55rem;background:#fff;display:block}.ref-float span{font-size:.72rem;font-weight:800;color:#334155;text-align:center}.immersive-bar{position:relative;z-index:5;display:flex;flex-direction:column;gap:.45rem;padding:.55rem .75rem;background:#fffffff7;box-shadow:0 -10px 30px #0f172a47;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.immersive-bar .palette{margin:0;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:2px;scrollbar-width:none}.immersive-bar .swatch{flex:0 0 auto;width:32px;height:32px}.immersive-bar .tool-row{margin:0;justify-content:flex-start;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.immersive-bar .tool-button{flex:0 0 auto;padding:.45rem .65rem;font-size:.82rem}.immersive-actions{margin:0;justify-content:center}.immersive-actions>button{flex:0 0 auto;padding:.45rem .75rem;font-size:.8rem;border-radius:.8rem;box-shadow:none}.immersive-actions .primary-button{background:#2563eb}@media(orientation:landscape){.rotate-hint{display:none}.draw-backdrop.open,.draw-backdrop:fullscreen{padding:max(.6rem,env(safe-area-inset-top)) 218px max(.6rem,env(safe-area-inset-bottom)) .9rem}.draw-backdrop.open .draw-stage,.draw-backdrop:fullscreen .draw-stage{width:auto;height:min(calc(100vh - 34px),calc((100vw - 244px)*13/18));height:min(calc(100dvh - 34px),calc((100dvw - 244px)*13/18))}.immersive-bar{position:absolute;inset:0 0 0 auto;width:202px;flex-direction:column;align-items:stretch;gap:.55rem;padding:calc(.6rem + env(safe-area-inset-top)) .6rem calc(.6rem + env(safe-area-inset-bottom));overflow-y:auto;scrollbar-width:none}.immersive-bar .palette{display:grid;grid-template-columns:repeat(2,1fr);place-items:center;overflow:visible}.immersive-bar .swatch{width:34px;height:34px}.immersive-bar .tool-row{flex-direction:column;align-items:stretch;overflow:visible}.immersive-bar .tool-button{justify-content:center}.immersive-actions{flex-direction:column}}.palette{display:flex;flex-wrap:nowrap;gap:.45rem;justify-content:center;margin:.9rem 0}.swatch{flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:50%;border:2px solid rgba(15,23,42,.1);cursor:pointer;transition:.15s}.swatch:hover,.swatch:focus-visible{transform:scale(1.08)}.swatch.active{transform:scale(1.15);border-color:#172033;box-shadow:0 8px 16px #0f172a38}.tool-row{display:flex;flex-wrap:nowrap;gap:.45rem;justify-content:center;margin-bottom:1.1rem}.tool-button{display:inline-flex;align-items:center;gap:.45rem;border:2px solid #dce5f2;background:#fff;color:#172033;border-radius:.95rem;padding:.55rem .7rem;font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;transition:.15s}.tool-button:hover,.tool-button:focus-visible{border-color:#93c5fd;transform:translateY(-2px)}.tool-button.active{background:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 8px 18px #2563eb40}.size-dot{display:inline-block;border-radius:50%;background:currentColor}.action-row button:disabled{opacity:.45;cursor:not-allowed;transform:none}.draw-workspace.solo{grid-template-columns:1fr}.example-card img{max-height:170px}} .swatch{width:34px;height:34px;border-width:2px}.tool-row{gap:.45rem}.tool-button{padding:.55rem .7rem;font-size:.85rem}.template-grid{gap:.55rem}.template-card{width:92px;font-size:.78rem}} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes shake{0%,to{transform:translate(0)}25%,75%{transform:translate(-6px)}50%{transform:translate(6px)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}