:root{--bg:#f0f7ff;--ink:#1e293b;--muted:#64748b;--line:#e2edf8;--accent:#3b82f6;--accent-deep:#2563eb;--ok:#15803d;font-family:system-ui,Noto Sans TC,sans-serif}*{box-sizing:border-box}body{color:var(--ink);background:linear-gradient(#fff 0%,#f0f7ff 42%,#e6f0fa 100%);min-height:100vh;margin:0}#app{max-width:720px;margin:0 auto;padding:16px 16px 28px}.top{background:#fff;border:1px solid #e2edf8;border-radius:16px;gap:8px;padding:12px 12px 10px;display:grid;position:relative;box-shadow:0 4px 20px #387dc80f}.top h1{color:#1d4ed8;margin:0;font-size:1.1rem}.top-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.top-title{min-width:0;display:grid}.top-title-row{align-items:center;gap:8px;display:flex}.bunga-raya{flex:none}.top-sub{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.menu-toggle{color:var(--accent-deep);background:#fff;border:1px solid #bfdbfe;border-radius:999px;flex:none;padding:8px 12px;font-weight:600}.menu{background:#fff;border:1px solid #e2edf8;border-radius:12px;max-height:60vh;padding:10px;animation:.15s ease-out menu-in;overflow-y:auto;box-shadow:0 8px 24px #387dc81a}@keyframes menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.menu-export{color:var(--accent-deep);background:#f0f7ff;border:1px solid #bfdbfe;border-radius:8px;margin-bottom:6px;padding:8px 12px;font-weight:600}.menu-level h3{color:var(--muted);margin:8px 0 6px;font-size:.85rem}.menu-lessons{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;display:grid}.menu-item{text-align:left;color:var(--ink);background:#fff;border:1px solid #e2edf8;border-radius:8px;padding:8px 10px;font-size:.9rem}.menu-item.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.progress{color:var(--muted);align-items:center;gap:10px;font-size:.85rem;display:flex}.bar{background:#e2edf8;border-radius:3px;flex:1;height:6px;overflow:hidden}.fill{background:linear-gradient(90deg,#60a5fa,#2563eb);height:100%}.stage{z-index:1;background:#fff;border:1px solid #e2edf8;border-radius:16px;gap:14px;margin-top:14px;padding:16px;display:grid;position:relative;box-shadow:0 4px 20px #387dc80f}.crumb{color:var(--muted);margin:0;font-size:.85rem}.dots{flex-wrap:wrap;gap:8px;display:flex}.dot{cursor:pointer;background:#fff;border:2px solid #bfdbfe;border-radius:50%;width:14px;height:14px;padding:0}.dot.done{background:var(--accent);border-color:var(--accent)}.dot.active{outline:2px solid var(--accent-deep);outline-offset:2px}.target{color:#0f172a;margin:0;font-size:1.8rem;font-weight:600}.answer,.tray{border-radius:12px;flex-wrap:wrap;gap:8px;min-height:56px;padding:10px;display:flex}.answer{background:#f8fbff;border:2px dashed #bfdbfe;align-items:center}.placeholder{color:var(--muted)}button{font:inherit;cursor:pointer}.block{color:#1e293b;background:#fff;border:1px solid #bfdbfe;border-radius:10px;padding:10px 16px;font-size:1.1rem;box-shadow:0 2px #dbeafe}.block.placed{border-color:var(--accent-deep);color:#1d4ed8;background:#eff6ff}.block.used{opacity:.35}.block:disabled{cursor:default}.block:not(:disabled):hover{background:#f0f7ff;border-color:#60a5fa}.typed{color:var(--ink);background:#fff;border:1px solid #e2edf8;border-radius:10px;padding:10px;font-size:1rem}.actions{flex-wrap:wrap;gap:8px;display:flex}.actions button{color:var(--ink);background:#fff;border:1px solid #e2edf8;border-radius:10px;padding:8px 14px}.actions .primary{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}.feedback{color:#b3261e;min-height:1.4em;margin:0}.feedback.ok{color:var(--ok)}.hint{background:#f8fbff;border:1px solid #e2edf8;border-radius:12px;padding:12px 16px}.hint .ms{margin:0 0 6px;font-size:1.1rem;font-weight:600}.hint ul{margin:0;padding-left:18px}.chip-word{border-bottom:1px dotted var(--muted);cursor:help;font-weight:600}