:root{color-scheme:light dark;--c-bg: #fdf6ec;--c-bg-alt: #f6ecd9;--c-fg: #271717;--c-fg-muted: #6c5b5b;--c-accent: #7b1f1f;--c-accent-soft: #b04a4a;--c-success: #2c7a3c;--c-error: #b8412c;--c-warning: #b07a1d;--c-card: #ffffff;--c-border: rgba(123, 31, 31, .18);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--shadow-sm: 0 1px 2px rgba(39, 23, 23, .06), 0 2px 8px rgba(39, 23, 23, .05);--shadow-md: 0 4px 14px rgba(39, 23, 23, .1);font-family:Inter,Segoe UI,Helvetica Neue,system-ui,sans-serif;font-size:16px;line-height:1.5}@media (prefers-color-scheme: dark){:root{--c-bg: #1a1212;--c-bg-alt: #221717;--c-fg: #f5e8d6;--c-fg-muted: #b8a392;--c-accent: #d77373;--c-accent-soft: #e29b9b;--c-success: #6cb37a;--c-error: #e87a64;--c-warning: #e0b765;--c-card: #2a1c1c;--c-border: rgba(215, 115, 115, .18)}}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-fg);min-height:100vh}body{-webkit-tap-highlight-color:transparent;font-feature-settings:"ss01","cv11"}#app{min-height:100vh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--c-bg);border-bottom:1px solid var(--c-border)}.app-header h1{font-size:1rem;margin:0;font-weight:600;letter-spacing:.01em;flex:1}.app-header .crumb{font-size:.85rem;color:var(--c-fg-muted)}.app-header a{color:var(--c-accent);text-decoration:none;font-weight:500}.screen{padding:1rem;max-width:720px;margin:0 auto;width:100%}.screen h2{margin:0 0 .25rem;font-size:1.4rem}.screen .lead{color:var(--c-fg-muted);margin:0 0 1rem}.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}.tile{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:1rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-sm);transition:transform 80ms ease,box-shadow .12s ease}.tile:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.tile .tile-glyph{font-size:1.6rem;font-weight:600;color:var(--c-accent)}.tile h3{margin:0;font-size:1.05rem;font-weight:600}.tile small{color:var(--c-fg-muted)}.btn{font:inherit;border:1px solid var(--c-border);background:var(--c-card);color:var(--c-fg);padding:.6rem 1rem;border-radius:var(--radius-md);cursor:pointer;transition:background .1s ease,transform 60ms ease;-webkit-user-select:none;user-select:none}.btn:hover{background:var(--c-bg-alt)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent)}.btn.primary:hover{background:var(--c-accent-soft)}.btn.ghost{background:transparent;border-color:transparent}.btn.danger{background:var(--c-error);color:var(--c-bg);border-color:var(--c-error)}.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.actions{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm)}.card.kat{font-family:BPG Glaho Sylfaen,Sylfaen,serif;font-size:1.6rem;letter-spacing:.01em}.translit{color:var(--c-fg-muted);font-style:italic}input.text-input,textarea.text-input{font:inherit;width:100%;padding:.7rem .9rem;border-radius:var(--radius-md);border:1px solid var(--c-border);background:var(--c-card);color:var(--c-fg)}input.text-input:focus,textarea.text-input:focus{outline:2px solid var(--c-accent);outline-offset:1px}.feedback{margin-top:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md);background:var(--c-bg-alt);border:1px solid var(--c-border)}.feedback.correct{border-color:var(--c-success);color:var(--c-success)}.feedback.incorrect{border-color:var(--c-error);color:var(--c-error)}.option{display:block;width:100%;text-align:left;padding:.85rem 1rem;border:1px solid var(--c-border);background:var(--c-card);color:var(--c-fg);border-radius:var(--radius-md);font:inherit;cursor:pointer;transition:border-color .1s ease,background .1s ease}.option:hover{border-color:var(--c-accent)}.option.selected{border-color:var(--c-accent);background:var(--c-bg-alt)}.option.correct{border-color:var(--c-success);background:#2c7a3c1a}.option.incorrect{border-color:var(--c-error);background:#b8412c1a}.options-grid{display:grid;gap:.5rem}.token-pool,.token-line{display:flex;flex-wrap:wrap;gap:.4rem}.token-line{min-height:3rem;padding:.5rem;border:1px dashed var(--c-border);border-radius:var(--radius-md);background:var(--c-bg-alt)}.token{background:var(--c-card);border:1px solid var(--c-border);padding:.4rem .75rem;border-radius:999px;cursor:pointer;font:inherit;font-family:BPG Glaho Sylfaen,Sylfaen,serif;font-size:1.05rem;-webkit-user-select:none;user-select:none}.token:hover{border-color:var(--c-accent)}.token[disabled]{opacity:.4;cursor:default}.progress{display:flex;gap:.25rem;margin:.5rem 0 1rem}.progress span{flex:1;height:4px;border-radius:2px;background:var(--c-border)}.progress span.done{background:var(--c-accent)}.progress span.current{background:var(--c-accent-soft)}.kanji-table,.alphabet-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.alphabet-cell{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:.5rem;text-align:center}.alphabet-cell .kat{font-family:BPG Glaho Sylfaen,Sylfaen,serif;font-size:1.6rem;color:var(--c-accent)}.alphabet-cell .lat{color:var(--c-fg-muted);font-size:.85rem}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin:.5rem 0 1rem}.stat{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:.5rem .75rem}.stat .label{color:var(--c-fg-muted);font-size:.8rem}.stat .value{font-size:1.4rem;font-weight:600;color:var(--c-accent)}.summary{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;margin-top:1rem}.summary .score{font-size:2.2rem;font-weight:700;color:var(--c-accent)}footer.app-footer{margin-top:auto;padding:1rem;text-align:center;color:var(--c-fg-muted);font-size:.85rem}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--c-border)}.toggle-row:last-of-type{border-bottom:none}@media (max-width: 480px){.screen{padding:.75rem}.card{padding:1.1rem}}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem 1rem;margin-top:.75rem}.form-field{display:flex;flex-direction:column;gap:.25rem}.form-label{font-size:.85rem;color:var(--c-fg-muted)}.input{font:inherit;width:100%;padding:.55rem .75rem;border-radius:var(--radius-md);border:1px solid var(--c-border);background:var(--c-card);color:var(--c-fg)}.input:focus{outline:2px solid var(--c-accent);outline-offset:1px}.feedback.err{border-color:var(--c-error);color:var(--c-error)}.feedback.ok{border-color:var(--c-success);color:var(--c-success)}.user-words{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.6rem}.user-word{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:.85rem 1rem;box-shadow:var(--shadow-sm)}.user-word__main p{margin:.05rem 0}.user-word__main p.kat{font-family:BPG Glaho Sylfaen,Sylfaen,serif;font-size:1.25rem;color:var(--c-accent)}.user-word__main small{display:block;color:var(--c-fg-muted);font-size:.8rem}.user-word__actions{display:flex;flex-direction:column;gap:.35rem}@media (max-width: 480px){.user-word{grid-template-columns:1fr}.user-word__actions{flex-direction:row}}.exam-qid{margin:0 0 .35rem;font-size:.85rem;color:var(--c-fg-muted);font-variant-numeric:tabular-nums}.exam-prompt{font-weight:600}.exam-passage{padding:.85rem 1rem;background:var(--c-bg-alt);border-radius:var(--radius-md);border:1px solid var(--c-border)}.exam-accordion{margin:0 0 1rem;border:1px solid var(--c-border);border-radius:var(--radius-md);padding:.55rem .85rem;background:var(--c-card)}.exam-accordion summary{cursor:pointer;color:var(--c-accent);font-weight:500;-webkit-user-select:none;user-select:none}.exam-accordion[open] summary{margin-bottom:.25rem}.exam-hint-box textarea.text-input{min-height:4.5rem;resize:vertical}