:root{--bg: #faf5ec;--bg-card: #fffdf8;--ink: #4a3f33;--ink-soft: #8c7f6d;--line: #e9dfcd;--accent: #c96f4a;--accent-ink: #fff8f2;--leaf: #7d9b6a;--leaf-soft: #b5cc9e;--bloom: #e8a8b8;--tip-bg: #fdf3d9;--tip-border: #e3c576;--radius: 20px;--radius-sm: 14px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Avenir Next,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}#root{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 20px calc(20px + env(safe-area-inset-bottom))}h1,h2,h3{font-weight:600;margin:0}p{line-height:1.6}.screen{flex:1;display:flex;flex-direction:column;padding-top:24px;animation:fadein .25s ease}@keyframes fadein{0%{opacity:0;transform:translateY(6px)}to{opacity:1}}.center{align-items:center;justify-content:center;text-align:center}.btn{display:block;width:100%;border:none;border-radius:var(--radius);padding:18px 24px;font-size:17px;font-weight:600;font-family:inherit;cursor:pointer;transition:transform .1s ease,opacity .15s ease}.btn:active{transform:scale(.98)}.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 14px #c96f4a40}.btn-subtle{background:transparent;color:var(--ink-soft);border:1.5px solid var(--line);padding:12px 20px;font-size:14px;font-weight:500}.btn-option{background:var(--bg-card);color:var(--ink);border:1.5px solid var(--line);text-align:left;font-weight:500;font-size:16px;padding:14px 18px;margin-bottom:10px;border-radius:var(--radius-sm)}.btn-option.correct{border-color:var(--leaf);background:#f2f7ec}.btn-option.wrong{border-color:#d99;background:#fbf0ee;opacity:.8}.btn:disabled{opacity:.5;cursor:default}.card{background:var(--bg-card);border:1.5px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px}.card-tip{background:var(--tip-bg);border:1.5px dashed var(--tip-border);border-radius:var(--radius);padding:18px 20px;margin:16px 0}.card-tip h3{font-size:14px;color:#8a6d1f;margin-bottom:6px}.card-tip p{font-size:14px;margin:0;color:#6b5a25}.muted{color:var(--ink-soft);font-size:14px}.big-word{font-size:44px;font-weight:700;text-align:center;margin:12px 0 4px}.reading{text-align:center;color:var(--ink-soft);margin:0 0 16px}.jp{font-size:19px;line-height:1.9}.session-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}.session-head button{background:none;border:none;font-size:22px;color:var(--ink-soft);cursor:pointer;padding:4px}.skill-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin-bottom:6px}.dots{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.dot{width:9px;height:9px;border-radius:50%;background:var(--line)}.dot.part{background:var(--leaf-soft)}.dot.full{background:var(--leaf)}.dot.now{outline:2px solid var(--accent);outline-offset:2px}.kanji-comps{display:flex;gap:10px;justify-content:center;margin:14px 0;flex-wrap:wrap}.comp{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;text-align:center;background:var(--bg-card);min-width:64px}.comp.known{border-color:var(--leaf);background:#f2f7ec}.comp .char{font-size:26px;display:block}.comp .label{font-size:11px;color:var(--ink-soft)}.comp.known .label{color:var(--leaf);font-weight:600}.home-top{display:flex;justify-content:flex-end;padding-top:8px}.icon-btn{background:none;border:none;font-size:20px;color:var(--ink-soft);cursor:pointer;opacity:.65;padding:8px}.home-tree{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.home-greeting{text-align:center;color:var(--ink-soft);font-size:15px;margin-bottom:4px}.home-actions{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#4a3f334d;display:flex;align-items:flex-end;z-index:20}.sheet{background:var(--bg-card);border-radius:var(--radius) var(--radius) 0 0;padding:24px 24px 40px;width:100%;max-width:480px;margin:0 auto}.sheet button{margin-bottom:10px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#4a3f3359;display:flex;align-items:center;justify-content:center;padding:24px;z-index:30}.modal{background:var(--bg-card);border-radius:var(--radius);padding:28px 24px;max-width:340px;text-align:center;animation:fadein .2s ease}.modal p{margin:8px 0 20px}.garden-theme{margin-bottom:20px}.garden-theme.fogged{filter:blur(3px) grayscale(.6);opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.fog-note{text-align:center;font-size:13px;color:var(--ink-soft);margin:-12px 0 20px}.unit-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:15px}.unit-row:last-child{border-bottom:none}.unit-row .stage{font-size:18px}textarea,input[type=text],input[type=email]{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;font-size:16px;font-family:inherit;background:var(--bg-card);color:var(--ink);resize:vertical}textarea:focus,input:focus{outline:none;border-color:var(--accent)}.spacer{flex:1}.mt{margin-top:16px}.mb{margin-bottom:16px}.batch-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 16px}.batch-chip{display:inline-block;border:1.5px solid var(--line);border-radius:999px;padding:4px 12px;font-size:14px;color:var(--ink-soft);background:var(--bg-card)}.batch-chip.active{font-weight:700}.batch-chip.done{opacity:.55;text-decoration:none}.batch-chip.done:after{content:" ✓";font-size:11px}.badge{position:absolute;top:-8px;right:-6px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;min-width:22px;height:22px;line-height:22px;border-radius:999px;padding:0 5px}.feedback-wrong{background:#f7ede6;border:1.5px solid #e0c0a8;border-radius:var(--radius-sm);padding:12px 16px;margin-top:4px;animation:fadein .2s ease}.feedback-wrong p{margin:0 0 4px;font-size:14px}.feedback-right{color:var(--leaf);font-size:14px;background:#f2f7ec;border-radius:var(--radius-sm);padding:10px 14px}.feedback-reveal{font-size:14px;background:#eef1f8;border:1.5px solid #b9c4dd;color:#35406b;border-radius:var(--radius-sm);padding:10px 14px}input.typed-ok{border-color:var(--leaf);background:#f2f7ec}input.typed-fail{border-color:#b9c4dd;background:#eef1f8}.usage-card{border-left-width:4px;border-left-style:solid;padding:16px 18px;margin-bottom:12px}.usage-card h3{margin:0 0 4px}.usage-form{display:inline-block;font-size:13px;background:#f3ede1;border-radius:8px;padding:3px 10px;margin:0;color:var(--ink-soft)}.theme-done{padding-top:12px}.theme-done-hero{position:relative;display:flex;align-items:center;justify-content:center;height:150px;margin-bottom:4px}.theme-done-glow{position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,#7f9fe04d,#e8a8b829 45%,#35406b00 72%)}.theme-done-kicker{text-align:center;font-size:12px;letter-spacing:.22em;color:var(--ink-soft);margin:0}.theme-done-title{text-align:center;font-size:30px;line-height:1.2;margin:6px 0 0}.theme-done-stats{display:flex;gap:10px;margin-top:22px}.stat-box{flex:1;background:var(--bg-card);border:1.5px solid var(--line);border-top-width:4px;border-top-style:solid;border-radius:var(--radius-sm);padding:14px 8px;text-align:center}.stat-n{display:block;font-size:30px;font-weight:700;line-height:1}.stat-label{display:block;font-size:11px;color:var(--ink-soft);margin-top:6px;line-height:1.35}.arrange-slots{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}.arrange-slot{flex:1 1 auto;min-width:72px;min-height:46px;border:1.5px dashed var(--line);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--ink-soft);font-family:inherit;font-size:15px;padding:8px 10px;cursor:pointer}.arrange-slot.filled{border-style:solid;border-color:var(--accent);color:var(--ink);font-weight:600}.arrange-slot.star{border-color:#35406b;background:#eef1f8}.arrange-slot.star.filled{border-color:#35406b}.arrange-slot:disabled{cursor:default;opacity:1}.arrange-tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}.arrange-frag{border:1.5px solid var(--line);border-radius:999px;background:var(--bg-card);color:var(--ink);font-family:inherit;font-size:15px;padding:9px 16px;cursor:pointer}.arrange-frag:disabled{opacity:.3;cursor:default}.goal-card{background:var(--bg-card);border:1.5px solid var(--line);border-left-width:4px;border-left-style:solid;border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:12px}.goal-card h3{margin:0 0 8px;font-size:15px}.goal-aim{margin:0;font-size:14px}.goal-list{margin:8px 0 0;padding-left:20px}.goal-list li{font-size:14px;margin-bottom:4px;line-height:1.5}.goal-why{margin:10px 0 0;font-size:13px;color:var(--ink-soft);background:#f7f3ea;border-radius:10px;padding:8px 12px}.goal-banner{display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:9px 14px;margin-bottom:12px;background:var(--bg-card)}.goal-banner-nama{font-size:12px;font-weight:700;letter-spacing:.02em}.goal-banner-aim{font-size:12px;color:var(--ink-soft);line-height:1.4}.kind-chip{display:inline-block;border:1.5px solid var(--line);border-radius:999px;padding:2px 10px;font-size:11px;font-weight:600;letter-spacing:.04em}.usage-example{font-size:17px;margin:10px 0 0;padding-left:10px;border-left:2px solid var(--line)}.audio-box{background:var(--bg-card);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px}.audio-main{padding:14px 20px;font-size:16px}.audio-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.audio-label{font-size:12px;color:var(--ink-soft)}.audio-speed{border:1.5px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:999px;padding:5px 13px;font-size:13px;font-family:inherit;cursor:pointer}.audio-speed.aktif{border-color:var(--accent);color:var(--accent);font-weight:700}.audio-count{margin:10px 0 0;font-size:12px;color:var(--ink-soft)}.dev-status{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;background:var(--bg-card);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}.dev-status>div{display:flex;flex-direction:column}.dev-k{font-size:11px;color:var(--ink-soft);letter-spacing:.04em}.dev-status strong{font-size:14px}.dev-toast{margin:10px 0 0;background:#eef1f8;border:1.5px solid #b9c4dd;color:#35406b;border-radius:var(--radius-sm);padding:9px 14px;font-size:13px}.dev-card{background:var(--bg-card);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px}.dev-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}.dev-row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.dev-btn{flex:1 1 auto;border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}.situasi-card{margin-top:12px;padding:12px;border:1px solid var(--line, #e3ddd2);border-radius:10px;background:var(--card-alt, #fbf8f2)}.situasi-figure{position:relative;width:100%;max-width:420px;margin:0 auto 10px;line-height:0}.situasi-figure img{display:block;width:100%;border-radius:6px;background:#fff}.situasi-arrow{position:absolute;width:17%;height:auto;transform-origin:100% 50%;pointer-events:none}.situasi-teks{margin:0;font-size:14.5px;line-height:1.5;text-align:center;color:var(--ink-soft, #6b6156)}.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.opt-img{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;background:#fff;border:2px solid var(--line, #e3ddd2);border-radius:10px;cursor:pointer;font:inherit;color:inherit}.opt-img img{width:100%;aspect-ratio:1 / 1;object-fit:contain;border-radius:6px}.opt-img-label{font-size:13px;line-height:1.35;text-align:center;color:var(--ink-soft, #6b6156)}.opt-img.correct{border-color:#6a9a5b;background:#f2f8ef}.opt-img.wrong{border-color:#c08a86;background:#fbf1f0;opacity:.6}.opt-img:disabled{cursor:default}.opt-num-row{display:flex;gap:12px;justify-content:center;margin-top:14px}.opt-num{width:68px;height:68px;font:600 24px/1 inherit;color:var(--ink, #3f3a34);background:#fff;border:2px solid var(--line, #e3ddd2);border-radius:14px;cursor:pointer}.opt-num.correct{border-color:#6a9a5b;background:#f2f8ef;color:#4a7a3b}.opt-num.wrong{border-color:#c08a86;background:#fbf1f0;opacity:.55}.opt-num:disabled{cursor:default}.opt-num-reveal{margin:14px 0 0;padding-left:22px;font-size:14.5px;line-height:1.6;color:var(--ink-soft, #6b6156)}.opt-num-reveal li.benar{color:#4a7a3b;font-weight:600}.dev-grup{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:4px 0;background:none;border:none;font:inherit;text-align:left;cursor:pointer}.dev-soal-list{margin-top:8px;display:flex;flex-direction:column;gap:4px}.dev-soal{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;border:1px solid var(--line, #e3ddd2);border-radius:8px;font:inherit;text-align:left;cursor:pointer}.dev-soal-no{flex:0 0 24px;height:24px;display:grid;place-items:center;font-size:12px;border-radius:6px;background:var(--card-alt, #f4efe6);color:var(--ink-soft, #6b6156)}.dev-soal-judul{font-size:13.5px;line-height:1.35}.home-top{display:flex;align-items:center;justify-content:space-between}.countdown{font-size:12px;letter-spacing:.02em;color:var(--ink-soft, #6b6156);background:var(--card-alt, #f4efe6);border-radius:999px;padding:4px 10px}