:root{--ink: #26221c;--ink-soft: #6f675c;--paper: #faf7f2;--card: #ffffff;--line: #e6ddd1;--primary: #b4531f;--primary-soft: #f6e3d7;--good: #2f7d4f;--bad: #b3382f;--warn-bg: #fdf3d7;--warn-line: #e0b64b;--culture-bg: #eef0fa;--radius: 14px;font-size:17px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:-apple-system,PingFang HK,Hiragino Sans,Noto Sans CJK TC,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}#app{max-width:640px;margin:0 auto;padding:16px 16px calc(110px + env(safe-area-inset-bottom))}.lesson-header{padding:8px 2px 4px}.lesson-kicker{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--ink-soft);letter-spacing:.02em}.odometer{background:var(--primary-soft);color:var(--primary);border-radius:999px;padding:2px 10px;font-size:.75rem}.lesson-header h1{margin:6px 0 2px;font-size:1.5rem;line-height:1.3;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}.title-target{color:var(--primary);font-weight:700}.cando{margin:4px 0 0;font-weight:500}.cando-ref{margin:2px 0 0;font-size:.72rem;color:var(--ink-soft)}.sample-banner{margin:10px 0 0;padding:8px 12px;border-radius:10px;font-size:.78rem;background:var(--warn-bg);border:1px solid var(--warn-line);color:#7a5b10}.stage{margin-top:26px}.stage-title{display:flex;justify-content:space-between;align-items:baseline;font-size:1.02rem;margin:0 2px 10px;color:var(--ink);border-bottom:2px solid var(--line);padding-bottom:6px}.stage-min{font-size:.72rem;color:var(--ink-soft);font-weight:400}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:0 0 12px;box-shadow:0 1px 2px #3c2d140a}.prompt{margin:0 0 10px;font-weight:500}.muted{color:var(--ink-soft);font-size:.85rem}.note-body h3,.read-body h3{margin:0 0 8px;font-size:1rem}.note-body p{margin:0 0 8px}.story-recap{background:#f4efe7;font-size:.9rem;color:var(--ink-soft)}.story-hook{background:#f4efe7;font-weight:500}.dialogue{margin:0 0 6px}.dialogue .who{color:var(--primary);font-weight:700;margin-right:8px;font-size:.85rem}.target-text{font-size:1.12rem}.narration{margin:0 0 10px;color:var(--ink-soft);font-size:.88rem}.callout{display:block;border-radius:10px;padding:8px 12px;margin:0 0 10px;font-size:.85rem}.callout strong{display:block;margin-bottom:2px}.callout-kanji-trap{background:var(--warn-bg);border:1px solid var(--warn-line)}.callout-cognate{background:#e9f4ec;border:1px solid #bcd9c5}.block-culture{background:var(--culture-bg)}.culture-tag{font-size:.75rem;color:#4a5290;font-weight:600}.culture-body p{margin:4px 0 0}.options{display:flex;flex-direction:column;gap:8px}.option{min-height:48px;text-align:left;padding:10px 14px;font-size:1.02rem;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;color:var(--ink)}.option.selected{border-color:var(--primary);background:var(--primary-soft);font-weight:600}.match-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 12px;margin:0 0 8px;font-size:1rem;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;color:var(--ink);text-align:left}.match-row.active{border-color:var(--primary);background:var(--primary-soft)}.match-slot{color:var(--ink-soft)}.match-slot.filled{color:var(--primary);font-weight:600}.match-pool,.order-pool{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.chip{min-height:44px;padding:8px 14px;font-size:1.02rem;background:var(--card);border:1.5px solid var(--primary);color:var(--primary);border-radius:999px;font-weight:600}.chip.used{opacity:.25}.chip.picked{background:var(--primary);color:#fff}.order-line{min-height:52px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1.5px dashed var(--line);border-radius:10px;padding:8px}.typein{width:100%;min-height:48px;font-size:1.1rem;padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}.typein:focus{outline:none;border-color:var(--primary)}.speak-body summary{color:var(--primary);font-weight:600;min-height:44px;display:flex;align-items:center}.cando-check{border-color:var(--primary)}.self-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.self-btn{min-height:48px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-size:.95rem;color:var(--ink)}.self-btn.selected{border-color:var(--primary);background:var(--primary-soft);font-weight:700}.submit-bar{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--paper) 70%,transparent)}.submit-btn{display:block;width:100%;max-width:608px;margin:0 auto;min-height:54px;background:var(--primary);color:#fff;font-size:1.1rem;font-weight:700;border:none;border-radius:var(--radius);box-shadow:0 4px 14px #b4531f59}.score-line{font-size:1.3rem;font-weight:700;margin:0 0 6px}.result-row{display:flex;flex-wrap:wrap;gap:6px 10px;padding:8px 0;border-bottom:1px solid var(--line)}.result-row:last-child{border-bottom:none}.result-icon{flex-shrink:0}.result-label{flex:1;min-width:60%}.result-expected{width:100%;color:var(--good);font-size:.9rem}.results-actions{display:flex;gap:10px}.ghost-btn{flex:1;min-height:48px;background:var(--card);color:var(--primary);border:1.5px solid var(--primary);border-radius:10px;font-size:1rem;font-weight:600}button{cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}ruby rt{font-size:.55em;color:var(--ink-soft)}.lesson-picker{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:10px}.lesson-picker a,.lesson-picker strong{min-height:34px;padding:4px 10px;border-radius:8px;font-size:.9rem;line-height:26px;text-decoration:none}.lesson-picker a{color:var(--primary);border:1px solid var(--primary-soft)}.lesson-picker strong{background:var(--primary);color:#fff}.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;padding:6px 10px;background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:.8rem;color:var(--ink-soft)}.sync-status{border-radius:999px;padding:2px 10px;font-weight:600}.sync-status[data-state=synced]{background:#e9f4ec;color:var(--good)}.sync-status[data-state=pending]{background:var(--warn-bg);color:#7a5b10}.sync-status[data-state=offline]{background:#eceff3;color:#4a5260}.sync-status[data-state=error],.sync-status[data-state=not-invited]{background:#fbe4e1;color:var(--bad)}.sync-status[data-state=signed-out]{background:#eceff3;color:#4a5260}.account{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-btn{background:none;border:none;color:var(--primary);font-weight:600;font-size:.85rem;min-height:32px;padding:0 6px}.signin{margin-top:24px;text-align:center}.signin h1{margin:6px 0 8px;font-size:1.4rem}.google-btn{margin:14px auto 8px}.signin-error{color:var(--bad);font-size:.9rem;min-height:1.2em;margin:0 0 8px}.srs-item{border-top:1px dashed var(--line);padding:10px 0 4px;margin-top:8px}.srs-item:first-of-type{border-top:none}.srs-prompt{margin:0 0 8px;font-weight:700;color:var(--primary)}.review-line{font-weight:500}.audio-btns{display:inline-flex;gap:.25rem;align-items:center;vertical-align:middle;margin-left:.4rem}.audio-btn{border:1px solid var(--line, #ddd6c8);background:transparent;border-radius:999px;cursor:pointer;font-size:.9rem;line-height:1;padding:.25rem .45rem;min-width:2rem;min-height:2rem}.audio-btn:hover:not([disabled]){background:#0000000d}.audio-btn[disabled]{opacity:.35;cursor:default}.audio-btn.slow{font-size:.8rem}[data-audio-state=loading] .audio-btn,[data-audio-state=playing] .audio-btn{background:#00000014}[data-audio-state=playing] .audio-btn:first-child{animation:audio-pulse 1s ease-in-out infinite}@keyframes audio-pulse{50%{opacity:.45}}.audio-err{color:#b3261e;font-size:.8rem}.audio-missing{color:#b3261e;font-size:.9rem}.listen-player{margin:.5rem 0}.audio-row{display:flex;gap:.5rem;flex-wrap:wrap}.audio-play{border:1px solid var(--line, #ddd6c8);background:#fff;border-radius:.5rem;padding:.5rem .9rem;cursor:pointer;font-size:.95rem;min-height:2.5rem}.audio-play.ghost{background:transparent}.audio-progress{height:4px;background:#00000014;border-radius:2px;margin:.5rem 0 .3rem;overflow:hidden}.audio-progress-bar{height:100%;width:0%;background:currentColor;opacity:.55;transition:width .15s linear}.audio-status{font-size:.8rem;opacity:.75}.listen-transcript{margin-top:.5rem}.audio-cache{font-size:.8rem;opacity:.65;margin:.2rem 0 0}.option-row{display:flex;align-items:center;gap:.25rem}.option-row .option{flex:1}.match-line{display:flex;align-items:center;gap:.25rem}.match-line .match-row{flex:1}.chip-wrap{display:inline-flex;align-items:center;gap:.15rem}.course-header{margin-bottom:1rem}.course-header h1{margin:0 0 .3rem;font-size:1.4rem}.course-headline{margin:.2rem 0;font-size:1rem}.course-review{margin:.2rem 0;font-size:.9rem;opacity:.8}.continue-btn{display:block;text-align:center;text-decoration:none;margin:1rem 0 1.4rem}.lesson-grid{display:grid;gap:.7rem}@media (min-width: 34rem){.lesson-grid{grid-template-columns:1fr 1fr}}.lesson-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line, #ddd6c8);border-radius:.6rem;padding:.7rem .8rem;background:#fff}.lesson-card:hover{border-color:#b9ae98}.lesson-card.done{background:#f7f5ef}.lesson-card-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;opacity:.7}.lesson-card.done .lesson-badge{color:#2e7d32;opacity:1}.lesson-card-title{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline;margin:.25rem 0}.lesson-card-title .title-zh{font-weight:600}.lesson-card-title .title-target{font-size:.9rem;opacity:.75}.lesson-card-cando{margin:.2rem 0;font-size:.85rem}.lesson-card-meta{margin:.3rem 0 0;font-size:.78rem;opacity:.7}.back-link{display:inline-block;margin-bottom:.6rem;font-size:.9rem;text-decoration:none}