.app{min-height:100vh;max-width:640px;margin:0 auto;padding:2rem 1rem 0;display:flex;flex-direction:column;gap:1.25rem}.app-header h1{font-size:1.5rem;margin:0;text-align:center}.app-main{display:flex;flex-direction:column;gap:1.25rem;flex:1}.filter-group{display:flex;align-items:center;gap:.6rem}.settings-toggle{position:fixed;top:1.25rem;right:1.25rem;z-index:30;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:999px;background:transparent;color:var(--text-dim);cursor:pointer;transition:color .2s ease,background-color .2s ease}.settings-toggle:hover{color:var(--text);background:var(--surface-2)}.settings-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.settings-toggle-close{position:absolute}.settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:20}.settings-drawer{position:fixed;top:0;right:0;height:100vh;width:min(320px,100vw);background:var(--surface);box-shadow:-8px 0 24px #00000059;transform:translate(100%);transition:transform .25s ease;z-index:25;overflow-y:auto}.settings-drawer-open{transform:translate(0)}.settings-drawer-content{padding:4.5rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem}.settings-drawer-title{font-size:1rem;margin:0 0 -.5rem;color:var(--text)}.settings-group{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.settings-group .segmented-control{flex-wrap:wrap}.settings-group.switch-group{flex-direction:row;align-items:center;justify-content:space-between;width:100%}.filter-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);white-space:nowrap}.segmented-control{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:.2rem;gap:.15rem}.segmented-option{border:none;background:transparent;color:var(--text-dim);border-radius:999px;padding:.35rem .85rem;font-size:.8rem;line-height:1.2;cursor:pointer;text-transform:capitalize;transition:background-color .2s ease,color .2s ease}.segmented-option:hover:not(:disabled){color:var(--text)}.segmented-option:disabled{opacity:.35;cursor:not-allowed}.segmented-option-active{background:var(--accent);color:#0b0e14;font-weight:600}.segmented-option-active:hover{color:#0b0e14}.segmented-option:focus-visible,.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.switch-group{display:flex;align-items:center;gap:.6rem}.switch-text-label{font-size:.85rem;color:var(--text);-webkit-user-select:none;user-select:none}.switch{border:none;cursor:pointer;width:2.6rem;height:1.5rem;border-radius:999px;background:var(--surface-2);padding:.2rem;display:inline-flex;align-items:center;transition:background-color .2s ease}.switch-on{background:var(--accent)}.switch-knob{width:1.1rem;height:1.1rem;border-radius:50%;background:var(--text);transform:translate(0);transition:transform .2s ease}.switch-on .switch-knob{background:#0b0e14;transform:translate(1.1rem)}.score-bar{display:flex;justify-content:center;gap:2rem;background:var(--surface);border-radius:12px;padding:.75rem}.score-item{display:flex;flex-direction:column;align-items:center}.score-value{font-size:1.25rem;font-weight:700}.score-label{font-size:.7rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:.04em}.quiz-area{display:flex;justify-content:center}.status-message{text-align:center;color:var(--text-dim);padding:2rem 1rem}.status-error{color:var(--red)}.status-warning{color:var(--yellow)}.quiz-card{width:100%;background:var(--surface);border-radius:16px;padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;transition:background-color .2s ease}.kana-display{font-size:clamp(2.5rem,10vw,4.5rem);font-weight:700;text-align:center;line-height:1.2;word-break:break-word}.kana-display-sentence{font-size:clamp(1.5rem,6vw,2.75rem);line-height:1.6}.kana-display ruby{ruby-align:center}.kana-display rt{font-size:.45em;font-weight:500;color:var(--text-dim)}.answer-kana{font-size:1rem;color:var(--text-dim);margin-bottom:.15rem}.item-kind{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}.answer-reveal{text-align:center}.answer-romaji{font-size:1.25rem;font-weight:600;color:var(--accent)}.mora-hit{color:var(--green)}.mora-miss{color:var(--red)}.answer-meaning{color:var(--text-dim);margin-top:.15rem}.meaning-preview{text-align:center;font-style:italic}.continue-hint{font-size:.75rem;color:var(--text-dim);text-align:center}.answer-form{width:100%;display:flex;flex-direction:column;gap:.75rem;align-items:center}.answer-input{width:100%;max-width:320px;font-size:1.1rem;padding:.6rem .9rem;border-radius:10px;border:1px solid var(--surface-2);background:var(--surface-2);color:var(--text);text-align:center}.answer-input:focus{outline:2px solid var(--accent)}.button-row{display:flex;gap:.5rem}.btn{border:1px solid var(--surface-2);background:var(--surface-2);color:var(--text);border-radius:8px;padding:.45rem 1rem;font-size:.9rem;cursor:pointer}.btn-primary{background:var(--accent);color:#0b0e14;border-color:var(--accent);font-weight:600}.flash-correct{background-color:color-mix(in srgb,var(--green) 25%,var(--surface))}.shake{animation:shake .4s ease;background-color:color-mix(in srgb,var(--red) 20%,var(--surface))}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.header-left-buttons{position:fixed;top:1.25rem;left:1.25rem;z-index:30;display:flex;gap:.25rem}.stats-toggle,.chart-toggle{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:999px;background:transparent;color:var(--text-dim);cursor:pointer;transition:color .2s ease,background-color .2s ease}.stats-toggle:hover,.chart-toggle:hover{color:var(--text);background:var(--surface-2)}.stats-toggle:focus-visible,.chart-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chart-toggle-label{font-size:1.1rem;font-weight:700;line-height:1}.stats-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:40}.stats-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:45;background:var(--surface);border-radius:16px;padding:2rem;width:min(420px,calc(100vw - 2rem));max-height:calc(100vh - 4rem);overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}.stats-title{font-size:1.25rem;margin:0;text-align:center}.stats-section{display:flex;flex-direction:column;gap:.5rem}.stats-section-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:0}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.stats-cell{background:var(--surface-2);border-radius:10px;padding:.6rem .75rem;display:flex;flex-direction:column;align-items:center}.stats-cell-value{font-size:1.25rem;font-weight:700}.stats-cell-label{font-size:.7rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:.04em}.missed-words-list{display:flex;flex-direction:column;gap:.25rem}.missed-word-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);border-radius:8px;padding:.4rem .75rem}.missed-word-kana{font-size:1rem;font-weight:600}.missed-word-count{font-size:.85rem;color:var(--text-dim)}.stats-actions{display:flex;justify-content:space-between;gap:.5rem}.kana-chart-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:35}.kana-chart-drawer{position:fixed;bottom:0;left:0;right:0;z-index:36;background:var(--surface);border-radius:16px 16px 0 0;box-shadow:0 -8px 24px #00000059;transform:translateY(100%);transition:transform .3s ease;max-height:75vh;display:flex;flex-direction:column}.kana-chart-drawer-open{transform:translateY(0)}.kana-chart-handle{width:2.5rem;height:.25rem;background:var(--surface-2);border-radius:999px;margin:.6rem auto 0;cursor:pointer}.kana-chart-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem .5rem}.kana-chart-title{font-size:1rem;margin:0}.kana-chart-scroll{overflow-y:auto;padding:0 1.25rem 1.25rem;display:flex;flex-direction:column;gap:2px}.kana-chart-header{display:grid;grid-template-columns:2rem repeat(5,1fr);gap:2px}.kana-chart-col-label{text-align:center;font-size:.7rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:.04em}.kana-chart-row{display:grid;grid-template-columns:2rem repeat(5,1fr);gap:2px}.kana-chart-row-label{display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--text-dim);text-transform:uppercase}.kana-chart-cell{display:flex;flex-direction:column;align-items:center;padding:.3rem .15rem;border-radius:6px;background:var(--surface-2)}.kana-chart-cell-empty{background:transparent}.kana-chart-char{font-size:clamp(1rem,4vw,1.4rem);font-weight:600;line-height:1.2}.kana-chart-romaji{font-size:.55rem;color:var(--text-dim);line-height:1}.kana-chart-divider{height:1px;background:var(--surface-2);margin:.25rem 0}.app-footer{text-align:center;color:var(--text-dim);font-size:.8rem;padding:1.5rem 1rem}:root{color-scheme:dark light;--bg: #12141a;--surface: #1c1f28;--surface-2: #262a36;--text: #eef0f4;--text-dim: #9aa0ae;--accent: #7aa2ff;--green: #4ade80;--red: #f87171;--yellow: #fbbf24;font-family:Hiragino Sans,Noto Sans JP,system-ui,-apple-system,sans-serif}@media(prefers-color-scheme:light){:root{--bg: #f5f6f9;--surface: #ffffff;--surface-2: #eceef3;--text: #1a1c22;--text-dim: #5b6172}}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}#root{min-height:100vh}