:root{--bg-page:#f5f2fc;--bg-card:#fff;--bg-card-soft:#f6f3fd;--bg-input:#fff;--text:#241f38;--text-soft:#6f6788;--text-faint:#9891ac;--border:#e7e1f7;--primary:#7c3aed;--primary-dark:#6425c9;--primary-light:#a78bfa;--primary-grad:linear-gradient(135deg, #7c3aed, #a78bfa);--primary-tint:#f1eafd;--correct:#16a34a;--correct-bg:#eefcf3;--wrong:#dc2626;--wrong-bg:#fdeeee;--radius:18px;--radius-sm:10px;--radius-pill:999px;--shadow-card:0 1px 2px #280f5a0a, 0 10px 30px #32146412;--shadow-pop:0 8px 20px #7c3aed47}:root[data-theme=dark]{--bg-page:#15111f;--bg-card:#1d1830;--bg-card-soft:#241e3a;--bg-input:#1a1629;--text:#f1edfb;--text-soft:#aba3c8;--text-faint:#8a82a8;--border:#342b52;--primary:#a78bfa;--primary-dark:#8b5cf6;--primary-light:#c4b5fd;--primary-grad:linear-gradient(135deg, #8b5cf6, #a78bfa);--primary-tint:#2a2245;--correct:#4ade80;--correct-bg:#16321f;--wrong:#f87171;--wrong-bg:#3a1b1b;--shadow-card:0 1px 2px #0000004d, 0 10px 30px #00000059}*{box-sizing:border-box}html,body{background:var(--bg-page);color:var(--text);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif}body{position:relative;overflow-x:hidden}svg{display:block}.page{z-index:1;max-width:1040px;margin:0 auto;padding:32px 24px 80px;position:relative}.scene-bg{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.scene-bg-img{object-fit:cover}.scene-bg-dark,:root[data-theme=dark] .scene-bg-light{display:none}:root[data-theme=dark] .scene-bg-dark{display:block}.header{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:28px;padding:10px 20px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-icon{background:var(--primary-grad);color:#fff;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;font-weight:700;display:flex}.brand-text{flex-direction:column;display:flex}.title{margin:0;font-size:17px;font-weight:700;line-height:1.25}.subtitle{color:var(--text-soft);margin:0;font-size:12px}.header-right{align-items:center;gap:8px;margin-left:auto;display:flex}.stats-header{gap:8px;display:flex}.stat-pill{border:1px solid var(--border);border-radius:var(--radius);white-space:nowrap;align-items:center;gap:5px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-flex}.stat-pill-flame{color:#ea580c}.stat-pill-target{color:var(--primary)}.stat-pill svg{width:14px;height:14px}.theme-toggle{border:1px solid var(--border);background:var(--bg-card-soft);width:34px;height:34px;color:var(--text-soft);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;display:flex}.theme-toggle:hover{color:var(--primary);border-color:var(--primary-light)}.theme-toggle svg{width:16px;height:16px}.mode-tabs{background:var(--bg-card-soft);border-radius:var(--radius);gap:2px;padding:4px;display:flex}.mode-tab{color:var(--text-soft);border-radius:var(--radius);white-space:nowrap;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:500;text-decoration:none;display:flex}.mode-tab svg{width:15px;height:15px}.mode-tab:hover{color:var(--primary)}.mode-tab.active{color:var(--primary);background:var(--bg-card);box-shadow:var(--shadow-card);font-weight:700}.field label{align-items:center;gap:4px;display:inline-flex}.field-info{width:13px;height:13px;color:var(--text-faint)}.review-panel{border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-soft);background:var(--bg-card);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding:12px 18px;font-size:13px;display:flex}.review-info{flex-wrap:wrap;gap:14px;display:flex}.review-btn{border-radius:var(--radius-sm);background:var(--primary-grad);color:#fff;cursor:pointer;border:none;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:600}.speak-btn{cursor:pointer;color:var(--primary);background:0 0;border:none;margin-left:6px;padding:2px 4px;font-size:13px}.main-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);margin-bottom:20px;padding:28px}.card-header{align-items:flex-start;gap:14px;margin-bottom:22px;display:flex}.card-header-icon{background:var(--primary-tint);width:42px;height:42px;color:var(--primary);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.card-header-icon svg{width:20px;height:20px}.card-header-title{margin:0;font-size:16px;font-weight:700}.card-header-desc{color:var(--text-soft);margin:2px 0 0;font-size:13px}.panel{grid-template-columns:1fr 1fr;gap:16px;display:grid}.panel-3col{grid-template-columns:1fr 1fr 1fr}@media (max-width:720px){.panel-3col{grid-template-columns:1fr}}.panel+.panel{margin-top:22px}.field{flex-direction:column;gap:6px;display:flex}.field-wide{grid-column:1/-1}.field label{color:var(--text-soft);font-size:12px;font-weight:600}.field select,.field input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);outline:none;padding:10px 12px;font-family:inherit;font-size:14px}.field select:focus,.field input:focus{border-color:var(--primary)}.field input::placeholder{color:var(--text-faint)}.theme-input-row{align-items:stretch;gap:8px;display:flex}.theme-input-row input{flex:1}.sparkle-btn{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--primary-tint);width:40px;color:var(--primary);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;display:flex}.sparkle-btn:hover{background:var(--primary-light);color:#fff}.sparkle-btn svg{width:16px;height:16px}.generate-btn{background:var(--primary-grad);color:#fff;border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-pop);border:none;grid-column:1/-1;justify-content:center;align-items:center;gap:8px;margin-top:6px;padding:13px 16px;font-family:inherit;font-size:14px;font-weight:700;display:flex}.generate-btn:hover{filter:brightness(1.06)}.generate-btn:disabled{opacity:.6;cursor:progress;box-shadow:none}.generate-btn svg{width:16px;height:16px}.field select,.field input,.quiz-input,.generate-btn,.check-btn,.history-toggle{-webkit-tap-highlight-color:transparent;accent-color:var(--primary)}.generate-btn:focus-visible,.history-toggle:focus-visible,.check-btn:focus-visible,.field select:focus,.field select:focus-visible,.field input:focus,.field input:focus-visible,.quiz-input:focus,.quiz-input:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}.result-area{min-height:60px;margin-bottom:20px}.empty-state{text-align:center;border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-soft);background:var(--bg-card);padding:36px 16px;font-size:14px}.empty-state p{margin:0}.empty-state-icon{background:var(--primary-tint);width:48px;height:48px;color:var(--primary);border-radius:14px;justify-content:center;align-items:center;margin:0 auto 12px;display:flex}.empty-state-icon svg{width:22px;height:22px}.error-box{border:1px solid var(--wrong);border-radius:var(--radius-sm);background:var(--wrong-bg);color:var(--wrong);padding:14px 16px;font-size:14px}.error-box code{color:var(--text-soft);word-break:break-word;margin-top:8px;font-size:12px;display:block}.loading-state{text-align:center;color:var(--text-soft);background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);padding:24px 16px;font-size:14px}.loading-dots span{background:var(--primary);border-radius:50%;width:5px;height:5px;margin:0 2px;animation:1s ease-in-out infinite pulse;display:inline-block}.loading-dots span:nth-child(2){animation-delay:.15s}.loading-dots span:nth-child(3){animation-delay:.3s}@keyframes pulse{0%,80%,to{opacity:.25}40%{opacity:1}}@media (prefers-reduced-motion:reduce){.loading-dots span{opacity:.6;animation:none}}.quiz{flex-direction:column;gap:12px;display:flex}.quiz-meta{color:var(--text-soft);margin:0 0 2px;font-size:12px}.quiz-item{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);grid-template-columns:26px 1fr;gap:10px;padding:16px;display:grid}.quiz-number{color:var(--primary);background:var(--primary-tint);border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:13px;font-weight:700;display:flex}.quiz-body{flex-direction:column;gap:10px;min-width:0;display:flex}.quiz-question{margin:0;font-size:15px}.quiz-input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);outline:none;padding:10px 12px;font-family:inherit;font-size:14px}.quiz-input:focus{border-color:var(--primary)}.quiz-input:disabled{color:var(--text-soft);background:var(--bg-card-soft)}.quiz-feedback{border-top:1px solid var(--border);flex-direction:column;gap:2px;padding-top:8px;font-size:13px;display:none}.quiz-item.is-correct{border-color:var(--correct);background:var(--correct-bg)}.quiz-item.is-wrong{border-color:var(--wrong);background:var(--wrong-bg);border-style:dashed}.quiz-item.is-correct .quiz-feedback,.quiz-item.is-wrong .quiz-feedback{opacity:.9;border-top-color:currentColor;display:flex}.feedback-label{text-transform:uppercase;letter-spacing:.03em;font-size:11px;font-weight:700}.quiz-item.is-correct .feedback-label{color:var(--correct)}.quiz-item.is-wrong .feedback-label{color:var(--wrong)}.feedback-answer{color:var(--text);font-size:14px}.feedback-romaji{color:var(--text-soft);font-size:12px}.check-btn{background:var(--primary-grad);color:#fff;border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-pop);border:none;margin-top:2px;padding:12px 16px;font-family:inherit;font-size:14px;font-weight:700}.check-btn:hover{filter:brightness(1.06)}.check-btn:disabled{opacity:.7;cursor:default;box-shadow:none}.check-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.history-section{margin-top:4px}.history-toggle{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);cursor:pointer;box-shadow:var(--shadow-card);justify-content:space-between;align-items:center;padding:14px 18px;font-family:inherit;font-size:13px;font-weight:600;display:flex}.history-toggle:hover{border-color:var(--primary-light)}.history-toggle-label{align-items:center;gap:8px;display:flex}.history-toggle-label svg{width:15px;height:15px;color:var(--primary)}.history-toggle-right{align-items:center;gap:8px;display:flex}.history-chevron{width:14px;height:14px;color:var(--text-faint);transition:transform .15s}.history-chevron.open{transform:rotate(180deg)}.history-count{background:var(--primary-tint);color:var(--primary);border-radius:10px;padding:3px 10px;font-size:12px;font-weight:700}.history-list{flex-direction:column;gap:8px;margin-top:10px;display:flex}.history-list.hidden{display:none}.history-item{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);cursor:pointer;padding:12px 14px}.history-item:hover{border-color:var(--primary-light)}.history-item .h-jp{margin-bottom:2px;font-size:14px}.history-item .h-arti{color:var(--text-soft);font-size:12px}.chat-controls{margin-bottom:16px}.chat-window{flex-direction:column;gap:12px;margin-top:20px;display:flex}.chat-messages{flex-direction:column;gap:10px;min-height:120px;display:flex}.chat-bubble{border:1px solid var(--border);border-radius:14px;max-width:80%;padding:10px 14px;font-size:14px}.chat-bubble-user{background:var(--primary-grad);color:#fff;border-color:#0000;align-self:flex-end}.chat-bubble-assistant{background:var(--bg-card-soft);align-self:flex-start}.chat-bubble-text{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.chat-correction{color:var(--text-soft);border-bottom:1px dashed var(--border);margin-bottom:6px;padding-bottom:6px;font-size:12px}.chat-input-row{gap:8px;display:flex}.chat-input-row .quiz-input{flex:1}.shadowing-panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);margin-top:20px;padding:18px}.shadowing-hint{color:var(--text-soft);margin:4px 0 0;font-size:12px}.shadowing-progress{background:var(--bg-card-soft);border-radius:4px;height:5px;margin:12px 0;overflow:hidden}.shadowing-progress-bar{background:var(--primary-grad);height:100%;transition:width 50ms linear}.shadowing-actions{gap:8px;display:flex}.kanji-layout{grid-template-columns:1fr;gap:16px;display:grid}.kanji-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);padding:22px}.kanji-glyph{color:var(--primary-dark);margin-bottom:12px;font-size:64px;line-height:1}.kanji-readings{color:var(--text-soft);flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:8px;font-size:13px;display:flex}.kanji-meaning{margin:0 0 12px;font-size:15px}.kanji-section{margin-top:14px;font-size:13px}.kanji-section h3{text-transform:uppercase;letter-spacing:.03em;color:var(--text-soft);margin:0 0 6px;font-size:12px}.kanji-radicals,.kanji-examples{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.kanji-radical-char{color:var(--primary);font-weight:700}.kanji-example-word{font-weight:600}.trace-canvas-wrap{border:1px solid var(--border);border-radius:var(--radius);text-align:center;background:var(--bg-card);padding:18px}.trace-hint{color:var(--text-soft);margin:0 0 10px;font-size:12px}.trace-canvas{border:1px solid var(--border);border-radius:var(--radius-sm);touch-action:none;background:var(--bg-input);margin-bottom:10px}@media (min-width:560px){.kanji-layout{grid-template-columns:1fr 1fr;align-items:start}}.word-quiz-prompt{align-items:center;gap:6px;margin-bottom:12px;display:flex}.word-quiz-options{grid-template-columns:1fr;gap:8px;margin-bottom:12px;display:grid}@media (min-width:480px){.word-quiz-options{grid-template-columns:1fr 1fr}}.word-option{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);text-align:left;cursor:pointer;padding:12px 14px;font-family:inherit;font-size:14px}.word-option:hover:not(:disabled){border-color:var(--primary-light)}.word-option:disabled{cursor:default}.word-option.is-correct{border-color:var(--correct);background:var(--correct-bg);border-style:solid;font-weight:600}.word-option.is-wrong{border-color:var(--wrong);background:var(--wrong-bg);border-style:dashed}.word-quiz-done{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:20px 0;display:flex}.conjugation-drill{flex-direction:column;gap:12px;display:flex}.conjugation-prompt{flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:4px;font-size:20px;display:flex}.conjugation-dict{font-weight:700}.conjugation-meaning{color:var(--text-soft);font-size:14px}.conjugation-feedback{border-top:1px solid var(--border);gap:2px;padding-top:8px;font-size:13px;display:flex!important}.conjugation-feedback.is-correct{color:var(--correct)}.conjugation-feedback.is-wrong{color:var(--wrong)}.conjugation-feedback .feedback-answer{color:var(--text)}.paragraph-item{grid-template-columns:1fr}.paragraph-source{line-height:1.7}.paragraph-textarea{resize:vertical;font-family:inherit;line-height:1.6}.grammar-picker{position:relative}.grammar-picker-trigger{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);cursor:pointer;text-align:left;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;font-family:inherit;font-size:14px;display:flex}.grammar-picker-trigger:hover{border-color:var(--primary-light)}.grammar-picker-summary{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.grammar-picker-trigger svg{width:14px;height:14px;color:var(--text-faint);flex-shrink:0}.grammar-picker-panel{background:var(--bg-card-soft);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;gap:12px;margin-top:10px;padding:16px;display:flex}.grammar-picker-toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.grammar-picker-search{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:160px;color:var(--text);outline:none;flex:1;padding:9px 12px;font-family:inherit;font-size:13px}.grammar-picker-search:focus{border-color:var(--primary)}.grammar-picker-summary-row{color:var(--text-soft);white-space:nowrap;align-items:center;gap:12px;font-size:12px;display:flex}.grammar-picker-count{font-weight:600}.grammar-picker-clear{color:var(--primary);cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:12px;font-weight:600}.grammar-picker-clear:disabled{color:var(--text-faint);cursor:default}.grammar-picker-body{grid-template-columns:1.3fr 1fr;gap:16px;min-height:0;display:grid}@media (max-width:860px){.grammar-picker-body{grid-template-columns:1fr}}.grammar-picker-col{min-width:0}.grammar-picker-col-chips{flex-direction:column;gap:10px;display:flex}.grammar-picker-col-explain{border-left:1px solid var(--border);padding-left:16px}@media (max-width:860px){.grammar-picker-col-explain{border-left:none;border-top:1px solid var(--border);padding-top:14px;padding-left:0}}.grammar-picker-explain-empty{color:var(--text-soft);margin:0;font-size:13px;line-height:1.6}.grammar-picker-explain-list{flex-direction:column;gap:12px;max-height:380px;padding-right:2px;display:flex;overflow-y:auto}.grammar-explain-card{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);padding:12px 14px}.grammar-explain-head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:14px;display:flex}.grammar-explain-level{color:var(--primary);background:var(--primary-tint);border-radius:var(--radius-pill);padding:2px 8px;font-size:11px;font-weight:700}.grammar-explain-hint{color:var(--text-soft);margin:0;font-size:12px;line-height:1.5}.grammar-explain-row{border-top:1px solid var(--border);gap:8px;padding:5px 0;font-size:12px;display:flex}.grammar-explain-row:first-of-type{border-top:none}.grammar-explain-label{width:78px;color:var(--text-faint);flex-shrink:0;font-weight:600}.grammar-explain-value{color:var(--text);line-height:1.5}.grammar-explain-structure{font-family:monospace;font-size:12.5px}.grammar-explain-example{border-top:1px dashed var(--border);margin-top:10px;padding-top:10px}.grammar-explain-example-jp{align-items:center;gap:4px;font-size:14px;font-weight:600;display:flex}.grammar-explain-example-id{color:var(--text-soft);margin-top:4px;font-size:12px}.grammar-picker-level-tabs{flex-wrap:wrap;gap:6px;display:flex}.grammar-picker-level-tab{border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-card);color:var(--text-soft);cursor:pointer;align-items:center;gap:6px;padding:7px 12px;font-family:inherit;font-size:12px;font-weight:600;display:flex}.grammar-picker-level-tab:hover{border-color:var(--primary-light)}.grammar-picker-level-tab.active{background:var(--primary-grad);color:#fff;border-color:#0000}.grammar-picker-level-count{opacity:.75;font-size:11px}.grammar-picker-level-actions{color:var(--text-soft);justify-content:space-between;align-items:center;font-size:12px;font-weight:600;display:flex}.grammar-picker-level-actions button{color:var(--primary);cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:12px;font-weight:600}.grammar-picker-chips{flex-wrap:wrap;gap:8px;max-height:280px;padding:2px;display:flex;overflow-y:auto}.grammar-picker-chip{border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-card);color:var(--text);cursor:pointer;padding:8px 14px;font-family:inherit;font-size:13px;line-height:1.3}.grammar-picker-chip:hover{border-color:var(--primary-light)}.grammar-picker-chip.selected{background:var(--primary-grad);color:#fff;border-color:#0000;font-weight:600}.grammar-picker-empty{color:var(--text-soft);text-align:center;width:100%;margin:0;padding:20px 0;font-size:13px}.grammar-picker-done{border-radius:var(--radius-sm);background:var(--primary-grad);color:#fff;cursor:pointer;border:none;align-self:flex-end;padding:9px 18px;font-family:inherit;font-size:13px;font-weight:700}ruby{ruby-position:over}rt{color:var(--text-soft);-webkit-user-select:none;user-select:none;font-size:.55em;font-weight:400}@media (max-width:700px){.header{border-radius:var(--radius);flex-direction:column;align-items:stretch}.header-right{justify-content:space-between;margin-left:0}.mode-tabs{overflow-x:auto}}@media (max-width:600px){.page{padding:20px 14px 60px}.panel{grid-template-columns:1fr}.main-card{padding:20px}}