@import"https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300&family=Noto+Sans+JP:wght@300;400;500;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0e0d12;--bg-warm: #14121a;--surface: #1a1820;--surface-hover: #222028;--surface-raised: #282631;--border: #383542;--border-subtle: #2a2834;--text: #f4f1ec;--text-secondary: #c8c2b8;--text-muted: #908a80;--accent: #d4513a;--accent-soft: #e0674f;--accent-glow: rgba(212, 81, 58, .18);--accent-text: #f0b0a0;--correct: #5cb878;--correct-bg: rgba(92, 184, 120, .12);--correct-soft: #90d4a6;--incorrect: #d4513a;--incorrect-bg: rgba(212, 81, 58, .1);--streak: #e0b050;--streak-glow: rgba(224, 176, 80, .2);--font-body: "Crimson Pro", "Noto Sans JP", serif;--font-display: "Crimson Pro", serif;--font-kana: "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;--font-ui: "Noto Sans JP", -apple-system, sans-serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.5rem;--space-2xl: 4rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px}body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:var(--space-xl) var(--space-md);line-height:1.5;-webkit-font-smoothing:antialiased;background-image:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(212,81,58,.04),transparent),radial-gradient(ellipse 50% 30% at 80% 100%,rgba(224,176,80,.025),transparent)}#root{width:100%;max-width:480px}.start-btn{display:block;width:100%;padding:.9rem;border:none;border-radius:var(--radius-md);background:var(--accent);color:#fff;font-family:var(--font-ui);font-size:.95rem;font-weight:500;letter-spacing:.03em;cursor:pointer;transition:all .2s ease;margin-bottom:.6rem;position:relative;overflow:hidden}.start-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,transparent 60%);pointer-events:none}.start-btn:hover{background:var(--accent-soft);transform:translateY(-1px);box-shadow:0 4px 20px var(--accent-glow)}.start-btn:active{transform:translateY(0)}.reset-btn{display:block;width:100%;padding:.65rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-family:var(--font-ui);font-size:.85rem;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.reset-btn:hover{border-color:var(--incorrect);color:var(--incorrect);background:var(--incorrect-bg)}.progress-btn{background:var(--surface-raised);color:var(--text-secondary);border:1px solid var(--border)}.progress-btn:after{display:none}.progress-btn:hover{background:var(--surface-hover);border-color:var(--accent);color:var(--text);box-shadow:0 2px 12px #0003;transform:translateY(-1px)}.start-screen{text-align:center;padding-top:var(--space-2xl);animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.app-title{font-family:var(--font-display);font-size:2.2rem;font-weight:300;letter-spacing:.12em;margin-bottom:var(--space-xl);color:var(--text);position:relative}.app-title:after{content:"";display:block;width:2rem;height:2px;background:var(--accent);margin:.75rem auto 0;border-radius:1px}.course-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl);position:relative;overflow:hidden}.course-card:before{content:"";position:absolute;top:-60px;right:-60px;width:160px;height:160px;border-radius:50%;border:1px solid rgba(212,81,58,.06);pointer-events:none}.course-name{font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:.04em;margin-bottom:var(--space-sm);color:var(--text)}.course-meta{color:var(--text-muted);font-family:var(--font-ui);font-size:.85rem;margin-bottom:var(--space-xs);letter-spacing:.03em}.course-learned{color:var(--correct-soft);font-family:var(--font-ui);font-weight:500;font-size:.9rem;margin-bottom:var(--space-xs)}.course-config{color:var(--text-muted);font-family:var(--font-ui);font-size:.8rem;margin-bottom:var(--space-lg);letter-spacing:.02em}.session-container{display:flex;flex-direction:column;gap:var(--space-lg);animation:fadeIn .3s ease}.session-progress{display:flex;justify-content:center;gap:var(--space-xl)}.progress-stat{display:flex;flex-direction:column;align-items:center;gap:2px}.progress-label{font-family:var(--font-ui);font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em}.progress-value{font-family:var(--font-display);font-size:1.2rem;font-weight:600;letter-spacing:.02em;color:#fff}.progress-stat.streak .progress-value{color:var(--streak);text-shadow:0 0 16px var(--streak-glow)}.exercise-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-xl);text-align:center;position:relative}.exercise-type{font-family:var(--font-ui);color:var(--text-secondary);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--space-lg)}.exercise-prompt{margin-bottom:var(--space-xl)}.prompt-kana{font-family:var(--font-kana);font-size:5.5rem;line-height:1.15;font-weight:400;color:#fff;text-shadow:0 0 40px rgba(212,81,58,.12)}.prompt-romaji{font-family:var(--font-display);font-size:2.8rem;font-weight:400;letter-spacing:.06em;color:#fff}.choices{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:var(--space-md)}.choice-btn{padding:.9rem .5rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-warm);color:var(--text);font-family:var(--font-ui);font-size:1.1rem;cursor:pointer;transition:all .15s ease;position:relative}.choice-key{position:absolute;top:.3rem;left:.45rem;font-size:.65rem;color:var(--text-muted);opacity:.5;font-family:var(--font-ui)}.key-hint{font-family:var(--font-ui);font-size:.7rem;color:var(--text-muted);margin-left:.4rem;opacity:.6;letter-spacing:.02em}.choice-btn:hover:not(:disabled){background:var(--surface-hover);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 3px 12px #0003}.choice-kana{font-family:var(--font-kana);font-size:2rem;font-weight:500;color:#fff}.choice-btn.correct{background:var(--correct-bg);border-color:var(--correct);color:var(--correct-soft);box-shadow:0 0 24px #5cb8781f}.choice-btn.incorrect{background:var(--incorrect-bg);border-color:var(--incorrect);color:var(--incorrect)}.choice-btn.dimmed{opacity:.3}.choice-btn.eliminated{opacity:.2;text-decoration:line-through;border-color:var(--border);pointer-events:none}.choice-btn.shake{animation:shake .35s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.result-area{margin-top:var(--space-lg);animation:resultReveal .3s ease}@keyframes resultReveal{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.result-text{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin-bottom:var(--space-sm);letter-spacing:.02em}.text-correct{color:var(--correct-soft)}.text-incorrect{color:var(--incorrect)}.hint{color:var(--text-muted);font-family:var(--font-body);font-size:.85rem;font-style:italic;margin-bottom:.75rem;line-height:1.4}.next-btn{padding:.6rem 2.2rem;border:none;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-family:var(--font-ui);font-size:.9rem;font-weight:500;letter-spacing:.03em;cursor:pointer;transition:all .2s ease}.next-btn:hover{background:var(--accent-soft);transform:translateY(-1px);box-shadow:0 3px 14px var(--accent-glow)}.session-summary{text-align:center;padding-top:var(--space-2xl);animation:fadeIn .5s ease}.summary-title{font-family:var(--font-display);font-size:1.8rem;font-weight:300;letter-spacing:.08em;margin-bottom:var(--space-xl);color:var(--text)}.summary-stats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:var(--space-xl)}.summary-stat{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:1.25rem .75rem;display:flex;flex-direction:column;gap:var(--space-xs)}.summary-value{font-family:var(--font-display);font-size:1.9rem;font-weight:700;letter-spacing:.02em;color:#fff}.summary-label{font-family:var(--font-ui);font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em}.summary-actions{display:flex;flex-direction:column;gap:.6rem}.progress-view{text-align:center;padding-top:var(--space-xl);animation:fadeIn .4s ease}.progress-title{font-family:var(--font-display);font-size:1.8rem;font-weight:300;letter-spacing:.08em;margin-bottom:var(--space-sm)}.progress-summary{color:var(--text-muted);font-family:var(--font-ui);font-size:.85rem;margin-bottom:var(--space-lg);letter-spacing:.02em}.progress-tabs{display:flex;gap:.4rem;justify-content:center;margin-bottom:var(--space-md)}.progress-tab{padding:.45rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-ui);font-size:.8rem;letter-spacing:.04em;transition:all .15s ease}.progress-tab:hover{border-color:var(--text-muted);color:var(--text)}.progress-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}.progress-legend{display:flex;gap:.9rem;justify-content:center;margin-bottom:var(--space-md);font-family:var(--font-ui);font-size:.7rem;color:var(--text-muted);letter-spacing:.02em}.legend-item{display:flex;align-items:center;gap:.3rem}.legend-dot{width:10px;height:10px;border-radius:2px;display:inline-block}.legend-dot.unseen{background:var(--bg-warm);border:1px solid var(--border)}.legend-dot.learning{background:var(--streak)}.legend-dot.reviewing{background:var(--accent-text)}.legend-dot.mature{background:var(--correct)}.kana-grid{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:.75rem;overflow-x:auto}.grid-header{display:grid;grid-template-columns:2rem repeat(5,1fr);gap:2px;margin-bottom:2px}.grid-col-label{font-family:var(--font-ui);font-size:.65rem;color:var(--text-muted);text-align:center;padding:.2rem 0;letter-spacing:.05em;text-transform:lowercase}.grid-col-label:first-child{grid-column:1}.grid-row{display:grid;grid-template-columns:2rem repeat(5,1fr);gap:2px}.grid-row-label{font-family:var(--font-ui);font-size:.65rem;color:var(--text-muted);display:flex;align-items:center;justify-content:center;letter-spacing:.03em}.grid-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:3px;font-family:var(--font-kana);font-size:1.05rem;font-weight:400;min-width:2.4rem;min-height:2.4rem;transition:all .15s ease}.grid-cell.unseen{background:var(--bg);color:var(--text-muted);opacity:.35}.grid-cell.learning{background:#e0b05026;color:var(--streak)}.grid-cell.reviewing{background:#d4513a24;color:var(--accent-text)}.grid-cell.mature{background:#5cb87826;color:var(--correct-soft)}.grid-cell.empty{background:transparent}.audio-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--accent-text);cursor:pointer;transition:all .2s ease}.audio-btn.small{width:2rem;height:2rem;font-size:1rem}.audio-btn.large{width:5.5rem;height:5.5rem;font-size:2.5rem;border-color:var(--accent);box-shadow:0 0 30px var(--accent-glow)}.audio-btn:hover{background:var(--surface-hover);border-color:var(--accent);color:var(--accent-soft);transform:scale(1.05)}.audio-btn.large:hover{box-shadow:0 0 40px #d4513a33}.prompt-audio{display:inline-block;margin-left:.75rem;vertical-align:middle}.listen-prompt{display:flex;justify-content:center;align-items:center;min-height:7rem}.history-view{text-align:center;padding-top:var(--space-xl);animation:fadeIn .4s ease}.history-title{font-family:var(--font-display);font-size:1.8rem;font-weight:300;letter-spacing:.08em;margin-bottom:var(--space-lg)}.history-empty{color:var(--text-muted);font-family:var(--font-body);font-style:italic}.history-list{display:flex;flex-direction:column;gap:.4rem}.history-item{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:.75rem 1rem;text-align:left;transition:border-color .15s ease}.history-item:hover{border-color:var(--border)}.history-date{font-family:var(--font-ui);font-size:.75rem;color:var(--text-muted);margin-bottom:.2rem;letter-spacing:.02em}.history-stats{display:flex;gap:.9rem;font-family:var(--font-ui);font-size:.85rem;color:var(--text-secondary);flex-wrap:wrap}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.choices-wide{grid-template-columns:1fr 1fr 1fr}.choices-wide .choice-kana{font-size:1.7rem}.typing-input-form{display:flex;gap:.5rem;margin-bottom:var(--space-md)}.typing-input{flex:1;padding:.85rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-warm);color:var(--text);font-family:var(--font-ui);font-size:1.1rem;letter-spacing:.04em;transition:border-color .15s ease}.typing-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.typing-input::placeholder{color:var(--text-muted);opacity:.6}.typing-submit{padding:.85rem 1.5rem;border:none;border-radius:var(--radius-md);background:var(--accent);color:#fff;font-family:var(--font-ui);font-size:.95rem;font-weight:500;letter-spacing:.03em;cursor:pointer;transition:all .2s ease}.typing-submit:hover:not(:disabled){background:var(--accent-soft);transform:translateY(-1px);box-shadow:0 3px 14px var(--accent-glow)}.typing-submit:disabled{opacity:.4;cursor:default}.audio-choices{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:var(--space-md)}.audio-choice{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .5rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-warm);cursor:pointer;transition:all .15s ease}.audio-choice:hover:not(:disabled):not(.correct):not(.dimmed){background:var(--surface-hover);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 3px 12px #0003}.audio-choice.correct{background:var(--correct-bg);border-color:var(--correct)}.audio-choice.dimmed{opacity:.3}.audio-choice-label{font-family:var(--font-ui);font-size:.85rem;color:var(--text-secondary);letter-spacing:.04em}.audio-discrimination-layout{display:flex;gap:1.5rem;justify-content:center;margin-bottom:var(--space-md)}.audio-discrimination-layout .audio-choice{flex:1;max-width:10rem;padding:1.5rem 1rem}.audio-discrimination-layout .audio-choice-tag{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--text);margin-bottom:.3rem}.prompt-word{font-size:4rem;letter-spacing:.08em}