:root{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#482819;background:#fff8f0}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}#app{max-width:520px;min-height:100dvh;margin:auto;background:#fffaf4;position:relative;padding-bottom:96px;box-shadow:0 0 65px #5e361015}.top{padding:18px 20px 8px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:950;font-size:25px;letter-spacing:-1.1px}.brand b{color:#f28a1c}.icon{width:43px;height:43px;border-radius:13px}.chip{background:#fff0d8;border-radius:20px;padding:8px 12px;font-size:13px;font-weight:800;color:#a34f13}.wrap{padding:12px 20px 30px}h1{font-size:27px;line-height:1.15;letter-spacing:-.8px;margin:6px 0 9px}h2{font-size:20px;margin:0 0 8px}p{line-height:1.5}.muted{color:#9d806b}.small{font-size:13px}.hero{border-radius:24px;background:linear-gradient(135deg,#fff0d3,#ffe0b4);padding:16px;display:flex;align-items:center;gap:10px;overflow:hidden}.hero img{width:39%;height:180px;object-fit:cover;object-position:center top;border-radius:18px;mix-blend-mode:multiply}.hero h2{font-size:23px}.btn{border:0;background:#f28a1c;color:white;border-radius:15px;padding:15px 18px;font-weight:850;box-shadow:0 4px 0 #c66a12}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #c66a12}.btn.secondary{background:#fff;border:2px solid #e7d6c3;color:#724124;box-shadow:none}.btn.ghost{background:transparent;box-shadow:none;color:#995f2e}.btn:disabled{opacity:.45;cursor:default}.wide{width:100%}.card{border:1px solid #f0e1cf;border-radius:20px;background:#fff;padding:16px;margin:14px 0;box-shadow:0 4px 12px #b8843e0b}.flex{display:flex;align-items:center;gap:9px}.between{justify-content:space-between}.meter{height:10px;border-radius:20px;background:#f1e5d7;overflow:hidden}.meter>span{display:block;height:100%;background:linear-gradient(90deg,#f3a522,#e67820);border-radius:20px}.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:520px;width:100%;background:#fffcf8;border-top:1px solid #eedcc9;display:flex;padding:11px 8px max(13px,env(safe-area-inset-bottom));z-index:10}.nav button{flex:1;background:none;border:0;color:#9e8371;font-size:12px;font-weight:800;display:grid;gap:4px;justify-items:center}.nav button.active{color:#d87518}.nav .glyph{font-size:23px}.path{position:relative;background:linear-gradient(#f8e9cc,#fff4e4);border-radius:24px;padding:18px 10px 25px;margin-top:16px;overflow:hidden}.path:before{content:'';position:absolute;top:65px;bottom:65px;left:50%;width:8px;background:#f6c36a;transform:translateX(-50%);border-radius:12px}.path-node{position:relative;display:flex;align-items:center;justify-content:center;margin:15px 0;min-height:66px;gap:8px}.path-node:nth-child(even){transform:translateX(14px)}.path-node:nth-child(odd){transform:translateX(-14px)}.orb{width:59px;height:59px;border-radius:50%;background:#fff;border:5px solid #ddc8b2;box-shadow:0 5px 0 #c5ad96;font-size:23px;flex-shrink:0}.orb.done{background:#f8a323;border-color:#ffda7c}.orb.current{background:#f58d20;border-color:#ffe1a0;animation:pulse 2s infinite}.path-label{background:#fff;border-radius:15px;padding:9px 11px;font-weight:800;font-size:12px;box-shadow:0 3px 10px #8e61201a;max-width:190px}.path-label small{display:block;color:#b48b6e;font-weight:600;margin-top:2px}@keyframes pulse{50%{box-shadow:0 0 0 9px #efb15e55}}.progressbar{height:9px;background:#f0e4d6;border-radius:9px;overflow:hidden}.progressbar>div{height:100%;background:#f19a20}.lesson-text{font-size:23px;font-weight:780;line-height:1.5;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;padding:16px 8px}.translation{font-size:15px;color:#7e5e49;line-height:1.55}.segment{display:flex;gap:5px;background:#f7e8d5;padding:5px;border-radius:15px}.segment button{flex:1;border:0;background:transparent;padding:10px 4px;border-radius:11px;color:#855a3b;font-weight:800;font-size:13px}.segment button.active{background:white;box-shadow:0 2px 8px #9d6a3018}.words{display:flex;flex-wrap:wrap;gap:8px;min-height:62px;align-items:center}.word{border:1px solid #e8cda9;border-bottom:3px solid #d9b990;background:#fff9ef;color:#60371d;border-radius:11px;padding:11px 12px;font-weight:750}.word.used{opacity:.25}.answer{border-bottom:2px dashed #dcc5ab;padding-bottom:8px}.note{background:#fff1d9;color:#86522b;border-radius:13px;padding:12px;font-size:13px;line-height:1.5}.field{width:100%;padding:13px;border:1px solid #dec7ae;border-radius:12px;background:white}.audio-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.audio-row button{padding:10px;border-radius:11px;border:1px solid #e7cdb0;background:white;color:#794522;font-weight:750}.audio-row input{width:90px}.stat{font-size:30px;font-weight:900;color:#d77917}.unit-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #f1e5d7}.unit-row:last-child{border:0}.pill{padding:5px 9px;border-radius:9px;background:#fff1d8;color:#98551d;font-size:12px;font-weight:800}.recstatus{font-size:13px;color:#98551d}.sticky-actions{display:flex;gap:9px;margin-top:16px}.sticky-actions .btn{flex:1}.subtle{font-size:12px;color:#ab8c77}.footer-note{padding:10px 20px 22px;color:#a18a78;font-size:11px;line-height:1.45}.review{background:#fff0d9;border-radius:14px;padding:12px;margin-top:12px}.header-back{border:0;background:transparent;color:#794b29;font-size:23px;padding:5px}.hide{display:none}.center{text-align:center}.welcome{padding-top:24px}

.revealed-word{color:#c5530a;background:#ffdfb3;border-radius:7px;padding:1px 4px;font-weight:950;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

.sim-answer{color:#bb4d0b;background:#ffead0;border-radius:14px;font-weight:900}.nav button{font-size:11px}.nav .glyph{font-size:21px}

.audio-controls{margin-top:14px;padding:14px;background:#fff7ed;border:1px solid #ecd8c3;border-radius:16px}.audio-controls input[type=range]{width:100%;margin:15px 0;accent-color:#d96e1d;min-height:26px}.audio-controls select{padding:9px 12px;border:1px solid #dfc5ad;border-radius:10px;background:white;color:#603b28;font-weight:700}.rating-actions .rating-selected{background:#f48a1b;color:#fff;border:2px solid #bc5d14;box-shadow:0 3px 0 #ac5718}.rating-actions button{flex:1}.audio-controls button{flex:0 0 auto}

.karaoke-preview{margin-top:14px;padding:14px;background:#fff7ed;border:1px solid #efd7bd;border-radius:14px}.karaoke-phrases{line-height:2.4}.karaoke-phrase{display:inline;padding:5px 7px;border-radius:8px;color:#523322;box-decoration-break:clone;-webkit-box-decoration-break:clone}.karaoke-phrase.current{background:#f6b45f;color:#582b0a;font-weight:800}.karaoke-phrase.past{color:#9e8774}.audio-controls input[type=range]{width:100%}

/* v0.8.2: frasa dapat diketuk untuk replay */
button.karaoke-phrase{font:inherit;cursor:pointer;border:0;text-align:left;vertical-align:baseline;background:transparent;box-shadow:none;min-height:0;touch-action:manipulation}button.karaoke-phrase.current{background:#f6b45f;color:#582b0a;font-weight:800}button.karaoke-phrase:focus-visible{outline:2px solid #b05a21;outline-offset:2px}

/* v0.9 Stable Karaoke: color-only changes, no layout-affecting font changes. */
.karaoke-phrases{line-height:2.4;overflow-wrap:anywhere}
button.karaoke-phrase,button.karaoke-phrase.current,button.karaoke-phrase.past{
  font:inherit;font-weight:650;line-height:inherit;letter-spacing:inherit;
  display:inline;padding:5px 7px;margin:0;border:0;border-radius:8px;
  box-shadow:none;vertical-align:baseline;box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  transition:background-color 150ms ease,color 150ms ease;
}
button.karaoke-phrase{background:transparent;color:#523322}
button.karaoke-phrase.current{background:#ffe0ae;color:#88400e}
button.karaoke-phrase.past{background:transparent;color:#927b68}
@media(prefers-reduced-motion:reduce){button.karaoke-phrase{transition:none}}

.audio-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:sikkha-spin .8s linear infinite;margin-right:6px}@keyframes sikkha-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.audio-spinner{animation:none}}

.audio-load-status:empty{display:none}.audio-load-status:not(:empty){margin-top:8px;line-height:1.4}

/* Stable Answer Reveal: identical word geometry before and after reveal. */
.lesson-text .answer-slot{position:relative;display:inline;font:inherit;letter-spacing:inherit;line-height:inherit;padding:0;margin:0;border:0;border-radius:0;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:color 150ms ease,background-color 150ms ease}
.lesson-text .answer-slot.blank-word{color:transparent;background:linear-gradient(to top,#69412a 0 2px,transparent 2px) left bottom / 100% 100% no-repeat;-webkit-text-fill-color:transparent}
.lesson-text .answer-slot.revealed-word{color:#b65719;background:#ffe0b3;font-weight:inherit;-webkit-text-fill-color:currentColor}
@media(prefers-reduced-motion:reduce){.lesson-text .answer-slot{transition:none}}


.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);align-items:end;gap:2px;min-height:205px;position:relative;padding:18px 13px 14px 17px}.hero .hero-copy{min-width:0;position:relative;z-index:1;align-self:center}.hero .hero-copy h2{font-size:clamp(18px,5vw,25px);line-height:1.13}.hero .hero-copy p{font-size:clamp(12px,3vw,14px);line-height:1.45}.hero .hero-copy .btn{font-size:clamp(12px,3.3vw,15px);padding:12px 11px;max-width:100%}.hero img.hero-miga{display:block;align-self:end;width:100%;height:auto;max-height:240px;object-fit:contain;object-position:center bottom;border-radius:0;mix-blend-mode:normal;filter:drop-shadow(0 4px 5px rgba(100,54,15,.12))}@media(max-width:370px){.hero{grid-template-columns:minmax(0,1fr) 38%;padding:13px 9px 12px 12px}.hero .hero-copy h2{font-size:19px}.hero img.hero-miga{max-height:205px}.hero .pill{font-size:10px}}

/* v1.2 Minimal Learning */
.lesson-timeline{display:flex;align-items:center;gap:7px;margin:16px 0 18px;padding:0;border:0;overflow-x:auto;scrollbar-width:none}
.lesson-timeline::-webkit-scrollbar{display:none}
.timeline-step{flex:1 0 0;min-width:37px;height:43px;border-radius:13px;background:#fff2e1;color:#825533;border:1.5px solid #e6d4c0;box-shadow:none;font-size:15px;font-weight:750;touch-action:manipulation}
.timeline-step.active{background:#e88421;color:white;border-color:#c86a17}
.timeline-step.memorized:not(.active){background:#fbe0b7;color:#915014;border-color:#efbc78}
.timeline-step:focus-visible{outline:2px solid #a9561b;outline-offset:2px}
.nav{justify-content:space-around}.nav button{min-height:46px}
@media(max-width:360px){.lesson-timeline{gap:5px}.timeline-step{min-width:33px;height:40px}}