:root{--bg: #1f2933;--bg-card: #27313c;--bg-elev: #323e4b;--text: #e7edf3;--text-dim: #9aa7b4;--accent: #4fd1c5;--accent-strong: #38b2ac;--ok: #48bb78;--bad: #f56565;--border: #3b4754;--flame: #ff8a3d;--flame-bg: #3a2a1f;--radius: 14px;--shadow: 0 10px 30px rgba(0, 0, 0, .3)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;justify-content:center;align-items:flex-start;padding:max(24px,env(safe-area-inset-top)) 16px max(48px,env(safe-area-inset-bottom))}#app{width:100%;max-width:480px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;gap:18px}.title{margin:0;font-size:1.6rem;text-align:center}.subtitle{margin:0;text-align:center;color:var(--text-dim)}.section-heading{margin:8px 0 0;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.set-list{display:flex;flex-direction:column;gap:14px}.set-section{display:flex;flex-direction:column;gap:8px}.set-head{display:flex;align-items:center;gap:8px}.set-head__title{font-size:.9rem;font-weight:600}.set-head__count{font-size:.8rem;color:var(--text-dim);margin-right:auto}.btn--mini{padding:4px 12px;font-size:.8rem;border-radius:8px}.row-chips{display:flex;flex-wrap:wrap;gap:8px}.word-length{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.word-length__label{font-size:.9rem;color:var(--text-dim)}.chip{font:inherit;font-size:1.05rem;padding:8px 12px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;color:var(--text-dim);cursor:pointer;transition:border-color .15s,background .15s,color .15s}.chip:hover{border-color:var(--accent)}.chip--on{border-color:var(--accent);background:#2b3a3d;color:var(--text)}.options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.options--stack{grid-template-columns:1fr}.option{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s;font-size:.95rem}.option--on{border-color:var(--accent);background:#2b3a3d}.option input{accent-color:var(--accent);width:16px;height:16px}.btn{font:inherit;border:1px solid var(--border);background:var(--bg-elev);color:var(--text);padding:12px 18px;border-radius:10px;cursor:pointer;transition:transform .05s,background .15s,border-color .15s}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#06231f;font-weight:600}.btn--primary:hover:not(:disabled){background:var(--accent)}.btn--ghost{background:transparent}.btn--block{width:100%}.scorebar{display:flex;align-items:center;gap:12px}.stat{display:flex;flex-direction:column;align-items:center;min-width:52px}.stat__value{font-size:1.25rem;font-weight:700}.stat__label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.scorebar__actions{margin-left:auto;display:flex;gap:8px}.scorebar .btn{padding:8px 14px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;justify-content:center;align-items:flex-start;padding:max(16px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom));background:#0a0e12b3;overflow-y:auto}.overlay__panel{width:100%;max-width:480px;display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.overlay__body{display:flex;flex-direction:column;gap:14px}.quiz-body{display:flex;flex-direction:column;gap:18px;align-items:stretch}.prompt{text-align:center;padding:24px 12px;background:var(--bg-elev);border-radius:var(--radius);line-height:1}.prompt--kana{font-size:5rem}.prompt--kana-word{font-size:3.2rem;word-break:break-all}.prompt--romaji{font-size:3rem;letter-spacing:.04em}.answer-input{width:100%;font:inherit;font-size:1.25rem;text-align:center;text-transform:lowercase;letter-spacing:.05em;padding:14px 16px;background:var(--bg);border:2px solid var(--border);border-radius:10px;color:var(--text);transition:border-color .15s,background .15s,box-shadow .15s}.answer-input:focus{outline:none;border-color:var(--accent)}.quiz-body.is-correct .answer-input{border-color:var(--ok);background:#48bb7826;box-shadow:0 0 0 3px #48bb7840}.quiz-body.is-correct .prompt--kana{color:var(--ok)}.quiz-body.is-wrong .answer-input{border-color:var(--bad);background:#f565651f}.answer-hint{min-height:1.4em;text-align:center;font-weight:600;color:var(--bad);opacity:0;transition:opacity .15s}.answer-hint.is-shown{opacity:1}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.shake{animation:shake .3s ease}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.btn--choice{font-size:2.2rem;padding:18px}.btn--correct{background:var(--ok);border-color:var(--ok);color:#06231f}.btn--wrong{background:var(--bad);border-color:var(--bad);color:#2d0b0b}.speak-status{text-align:center;color:var(--text-dim);min-height:1.4em}.quiz-body.is-correct .speak-status{color:var(--ok);font-weight:600}.quiz-body.is-wrong .speak-status{color:var(--bad);font-weight:600}.speak-heard{text-align:center;min-height:1.4em;color:var(--text);white-space:pre-line;opacity:0;transition:opacity .15s}.meter{height:26px;background:var(--bg);border:1px solid var(--border);border-radius:13px;overflow:hidden}.meter__fill{height:100%;width:0%;background:var(--text-dim);border-radius:13px;transition:width .05s linear,background .1s}.meter__fill--active{background:var(--ok)}.speak-heard.is-shown{opacity:1}.speak-device{text-align:center;font-size:.75rem;color:var(--text-dim);min-height:1em}.speak-mic{touch-action:none;user-select:none;-webkit-user-select:none}.btn.is-recording{background:var(--bad);border-color:var(--bad);color:#2d0b0b;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #f5656580}50%{box-shadow:0 0 0 8px #f5656500}}.results{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:8px 0}.results .stat{padding:16px;background:var(--bg-elev);border-radius:10px}.results-actions{display:flex;flex-direction:column;gap:10px}.settings-links{display:flex;flex-wrap:wrap;gap:10px}.settings-links .btn{flex:1 1 30%;font-size:.9rem;padding:10px}.chart-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.chart-header .title{text-align:left}.tabs{display:flex;gap:8px;background:var(--bg-elev);padding:4px;border-radius:10px}.tab{flex:1;font:inherit;padding:10px;border:none;background:transparent;color:var(--text-dim);border-radius:8px;cursor:pointer;transition:background .15s,color .15s}.tab--on{background:var(--accent-strong);color:#06231f;font-weight:600}.chart-section{display:flex;flex-direction:column;gap:10px}.chart-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.chart-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px}.chart-cell__kana{font-size:1.6rem;line-height:1.1}.chart-cell__romaji{font-size:.75rem;color:var(--text-dim)}.drawpad{width:100%;max-width:340px;margin:0 auto}.drawpad__canvas{display:block;width:100%;aspect-ratio:1;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius);touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}.drawpad--disabled .drawpad__canvas{cursor:default;opacity:.85}.draw-prompt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--bg-elev);border-radius:var(--radius)}.draw-prompt__romaji{font-size:2.4rem;font-weight:700;letter-spacing:.04em;line-height:1.1}.draw-prompt__script{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.draw-prompt__answer{font-size:2.8rem;line-height:1;min-width:1em;text-align:center}.draw-prompt__answer.is-right{color:var(--ok)}.draw-prompt__answer.is-wrong{color:var(--bad)}.draw-actions{display:grid;grid-template-columns:1fr 1fr 2fr;gap:8px}.draw-actions .btn[hidden]{display:none}.draw-status{text-align:center;min-height:1.4em;color:var(--text-dim)}.draw-status.is-right{color:var(--ok);font-weight:600}.draw-status.is-wrong{color:var(--bad);font-weight:600}.draw-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.draw-results:empty{display:none}.draw-result{display:grid;grid-template-columns:2.4rem 1fr 3.5rem;align-items:center;gap:10px;padding:4px 10px;border-radius:8px;background:var(--bg-elev)}.draw-result--target{outline:2px solid var(--ok)}.draw-result__char{font-size:1.6rem;text-align:center}.draw-result__bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden}.draw-result__bar i{display:block;height:100%;background:var(--accent-strong);border-radius:4px}.draw-result__dist{font-size:.8rem;color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums}.draw-results__meta{font-size:.75rem;color:var(--text-dim);text-align:center}.draw-tally{text-align:center;font-size:.9rem}.draw-misses{text-align:center;font-size:.9rem;color:var(--text-dim);word-break:break-all}.draw-misses:empty{display:none}.draw-prompt--quiz{align-items:stretch;min-height:104px}.draw-prompt__main{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}.draw-syls{display:flex;flex-wrap:wrap;gap:6px 14px}.draw-syl{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 6px;border-radius:8px;border:2px solid transparent}.draw-syl.is-current{border-color:var(--accent)}.draw-syl__romaji{font-size:1.8rem;font-weight:700;letter-spacing:.03em;line-height:1.1}.draw-syl__kana{display:flex;gap:2px}.draw-syl__script{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.draw-slot{width:1.6rem;height:1.6rem;display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;border-bottom:2px solid var(--border)}.draw-slot.is-current{border-bottom-color:var(--accent)}.draw-slot.is-done{color:var(--ok);border-bottom-color:var(--ok)}.draw-reveal{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.draw-reveal:empty{display:none}.draw-reveal__char{font-size:3.5rem;color:var(--accent)}.stroke-order{width:104px;height:104px;background:var(--bg);border-radius:10px;cursor:pointer}.stroke-order path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4}.stroke-order__ghost path{stroke:var(--border)}.stroke-order__ink path{stroke:var(--accent)}.stroke-order__numbers circle{fill:var(--flame)}.stroke-order__numbers text{fill:#1f2933;font-size:7px;font-weight:700}.draw-actions--quiz{grid-template-columns:1fr 1fr 1fr 1.6fr}.quiz-body.is-correct .drawpad__canvas{border-color:var(--ok)}.quiz-body.is-wrong .drawpad__canvas{border-color:var(--bad)}.credit{margin:0;font-size:.75rem;text-align:center;color:var(--text-dim)}.credit a{color:var(--text-dim)}.streak{font:inherit;display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;text-align:left;color:var(--text);background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:border-color .15s,transform .05s}.streak:hover{border-color:var(--flame)}.streak:active{transform:translateY(1px)}.streak--on{background:var(--flame-bg);border-color:#ff8a3d59}.streak__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.streak__big{font-size:1.15rem;font-weight:700}.streak--on .streak__big{color:var(--flame)}.streak__sub,.streak__link{font-size:.8rem;color:var(--text-dim)}.streak__link{white-space:nowrap}.stat-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--bg-elev);border-radius:10px}.stat-tile__value{font-size:1.5rem;font-weight:700}.stat-tile--flame .stat-tile__value{color:var(--flame)}.stat-tile__label{font-size:.75rem;color:var(--text-dim)}.today-row{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--bg-elev);border-radius:10px}.today-row__dim{color:var(--text-dim)}.legend{display:flex;gap:16px;font-size:.8rem;color:var(--text-dim)}.legend__item{display:inline-flex;align-items:center;gap:6px}.swatch{display:inline-block;width:10px;height:10px;border-radius:3px}.swatch--practiced,.daychart__bar--practiced{background:var(--accent-strong)}.swatch--missed,.daychart__bar--missed{background:var(--bad);opacity:.75}.daychart-wrap{display:flex;flex-direction:column;gap:10px}.daychart{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;height:170px;padding:12px 8px 8px;background:var(--bg-elev);border-radius:10px}.daychart__col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.daychart__bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-bottom:1px solid var(--border)}.daychart__bar{width:40%;max-width:10px;border-radius:3px 3px 0 0}.daychart__col--today .daychart__bar--practiced{background:var(--accent)}.daychart__day{font-size:.7rem;color:var(--text-dim)}.daychart__col--today .daychart__day{color:var(--text);font-weight:700}.empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 16px;background:var(--bg-elev);border-radius:10px;color:var(--text-dim);font-size:.9rem}.empty strong{color:var(--text)}@media (max-width: 380px){.chart-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 480px){body{padding:max(12px,env(safe-area-inset-top)) 10px max(24px,env(safe-area-inset-bottom))}.card{padding:18px 16px}.prompt--kana{font-size:4.2rem}.prompt--kana-word{font-size:2.6rem}}