:root{--bg: #0f1115;--panel: #171a21;--panel-2: #1f242e;--text: #e7e9ee;--muted: #97a0b0;--line: #2a303c;--accent: #6ea8fe;--again: #e5484d;--hard: #e08c2f;--good: #35a15a;--easy: #4a8fe7;--radius: 14px}@media(prefers-color-scheme:light){:root{--bg: #f6f7f9;--panel: #ffffff;--panel-2: #f0f2f5;--text: #1a1d23;--muted: #5c6472;--line: #e2e6ec}}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}main{max-width:640px;margin:0 auto;padding:1.25rem max(1rem,env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}a{color:var(--accent);text-decoration:none}.offline-banner{background:var(--hard);color:#1a1205;text-align:center;font-size:.85rem;padding:calc(.4rem + env(safe-area-inset-top)) 1rem .4rem;font-weight:600}.update-banner{background:var(--accent);color:#0b1220;text-align:center;font-size:.85rem;padding:calc(.4rem + env(safe-area-inset-top)) 1rem .4rem;font-weight:600}.update-banner button{color:inherit;text-decoration:underline;font-weight:700}.nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem;padding:calc(.75rem + env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .75rem max(1rem,env(safe-area-inset-left));max-width:640px;margin:0 auto;border-bottom:1px solid var(--line)}.brand{font-weight:700;font-size:1.1rem;color:var(--text)}.brand span{color:var(--muted);font-weight:500;margin-left:.35rem;font-size:.9rem}.nav nav{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem 1rem;min-width:0}@media(max-width:480px){.nav nav{gap:.25rem .75rem;font-size:.92rem}.brand span{display:none}}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.85rem}.error{color:var(--again)}.ok{color:var(--good)}form{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}label{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem;color:var(--muted)}input{padding:.7rem .8rem;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:1rem}input:focus{outline:2px solid var(--accent);outline-offset:0}button{font:inherit;cursor:pointer;border:none;border-radius:10px}button.primary{background:var(--accent);color:#08111f;font-weight:600;padding:.75rem 1rem}button.primary:disabled{opacity:.6;cursor:default}button.ghost{background:transparent;color:var(--text);border:1px solid var(--line);padding:.6rem 1rem}button.link{background:none;color:var(--accent);padding:0}.auth{max-width:380px;margin:3rem auto 0}.logo{margin:0 0 .25rem;font-size:1.6rem}.logo span{color:var(--muted);font-weight:400}.progress{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;color:var(--muted);font-size:.9rem}.progress .bar{flex:1;height:6px;background:var(--panel-2);border-radius:99px;overflow:hidden}.progress .fill{height:100%;background:var(--accent);transition:width .2s}.badge{background:var(--accent);color:#08111f;font-size:.7rem;font-weight:700;padding:.1rem .4rem;border-radius:6px;letter-spacing:.03em}.feedback{position:fixed;top:.75rem;left:50%;transform:translate(-50%);z-index:50;display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);box-shadow:0 6px 20px #00000040;pointer-events:none;animation:fbIn .15s ease-out}.feedback .fb-kanji{font-size:1.3rem}.feedback .fb-label{font-weight:700}.feedback .fb-next{color:var(--muted);font-size:.85rem}.feedback .fb-undo{pointer-events:auto;margin-left:.3rem;padding:.2rem .55rem;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:.8rem;cursor:pointer}.feedback .fb-undo:disabled{opacity:.6;cursor:default}.feedback.again .fb-label{color:var(--again)}.feedback.hard .fb-label{color:var(--hard)}.feedback.good .fb-label{color:var(--good)}.feedback.easy .fb-label{color:var(--easy)}@keyframes fbIn{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}.submit-error{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:.8rem;padding:.7rem 1rem;border-radius:10px;text-align:center;background:var(--panel-2);border:1px solid var(--again)}.submit-error>span:first-child{font-weight:600}.submit-error button{margin-top:.3rem}.kanji-card{min-height:420px;display:flex;flex-direction:column;align-items:center;gap:1.2rem}.badge.recall{background:var(--good)}.learn-card{display:flex;flex-direction:column;gap:1.1rem}.learn-top{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}.learn-info{flex:1;min-width:160px}.learn-info .big-glyph{font-size:3.5rem;line-height:1;font-family:Noto Sans JP,system-ui,sans-serif}.learn-info .meanings{font-size:1.1rem;font-weight:600;margin:.4rem 0}.readings-row{display:flex;gap:.4rem;flex-wrap:wrap}.speak{background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:.2rem .5rem;font-size:.9rem}.speak.icon{padding:.2rem .4rem}.learn-actions{display:flex;justify-content:space-between;gap:1rem;margin-top:.3rem}.learn-actions .primary{flex:1}.words{width:100%;border-top:1px solid var(--line);padding-top:.9rem}.words li .speak{margin-right:.1rem}.words h4{margin:0 0 .5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.words ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}.words li{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}.words .w-exp{font-size:1.1rem;font-weight:600}.words .w-read{color:var(--muted);font-size:.85rem}.words .w-gloss{color:var(--muted);font-size:.85rem;margin-left:auto;text-align:right}.prompt-line{text-align:center}.prompt-line .hint{margin-bottom:.25rem}.prompt{text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center}.hint{font-size:1.4rem;font-weight:600;margin:0}.answer{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.glyph{font-size:6rem;line-height:1;font-family:Noto Sans JP,system-ui,sans-serif}.facts{text-align:center}.meanings{font-size:1.15rem;font-weight:600;margin:0 0 .25rem}.readings{color:var(--muted);margin:0}.components{margin:.5rem 0 0;display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}.comp{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:.15rem .5rem;font-size:1.1rem}.strokes svg{width:150px;height:150px;color:var(--text)}.strokes svg path{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.strokes svg text{display:none}.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%;margin-top:.5rem}.grade{padding:.9rem .5rem;font-weight:600;color:#fff}.grade.again{background:var(--again)}.grade.hard{background:var(--hard)}.grade.good{background:var(--good)}.grade.easy{background:var(--easy)}.done .check{width:56px;height:56px;margin:0 auto .5rem;border-radius:50%;background:var(--good);color:#fff;font-size:1.8rem;display:flex;align-items:center;justify-content:center}@media(max-width:420px){.glyph{font-size:4.5rem}.grades{grid-template-columns:repeat(2,1fr)}}