:root{--bg: #f6f7f9;--surface: #ffffff;--surface-2: #eef1f4;--text: #1f2933;--text-muted: #66727f;--border: #d9dee4;--accent: #2f6fed;--accent-text: #ffffff;--c-unknown: #9aa5b1;--c-easy: #2f9e44;--c-medium: #e8a317;--c-hard: #e03131;--radius: 12px}[data-theme=dark]{--bg: #161b22;--surface: #1f2933;--surface-2: #2a343f;--text: #e6edf3;--text-muted: #9aa5b1;--border: #323d49;--accent: #4d8bff;--accent-text: #0b0f14}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Kaku Gothic ProN,Noto Sans JP,Meiryo,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}#app{max-width:720px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}a{color:var(--accent);text-decoration:none}button{font:inherit;cursor:pointer}input,textarea,select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .8rem;width:100%}.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;padding-top:max(.75rem,env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--border)}.app-header .brand{font-weight:700;font-size:1.1rem;color:var(--text)}.app-header .spacer{flex:1}.icon-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem}.content{flex:1;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}.tabbar{display:flex;gap:.25rem;background:var(--surface);border-top:1px solid var(--border);padding:.4rem .5rem;padding-bottom:calc(.4rem + env(safe-area-inset-bottom));position:sticky;bottom:0}.tabbar a{flex:1;text-align:center;padding:.5rem;border-radius:var(--radius);color:var(--text-muted);font-size:.85rem}.tabbar a.active{color:var(--accent);background:var(--surface-2)}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:var(--radius);padding:.7rem 1rem;font-weight:600;width:100%}.btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}.chip{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:.35rem .8rem;font-size:.85rem;color:var(--text)}.chip.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.kanji-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.kanji-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.25rem;padding:.7rem .4rem .6rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);text-align:center}.kanji-cell:active{background:var(--surface-2)}.kanji-cell.easy{border-color:var(--c-easy);background:color-mix(in srgb,var(--c-easy) 9%,var(--surface))}.kanji-cell.medium{border-color:var(--c-medium);background:color-mix(in srgb,var(--c-medium) 9%,var(--surface))}.kanji-cell.hard{border-color:var(--c-hard);background:color-mix(in srgb,var(--c-hard) 9%,var(--surface))}.cell-glyph{font-size:2.2rem;line-height:1.1}.cell-kw{font-size:.78rem;color:var(--text-muted);line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.dot{width:12px;height:12px;border-radius:50%;flex:none}.dot.unknown{background:var(--c-unknown)}.dot.easy{background:var(--c-easy)}.dot.medium{background:var(--c-medium)}.dot.hard{background:var(--c-hard)}.detail-hero{text-align:center;padding:1rem 0 .5rem}.detail-hero .glyph{font-size:5rem;line-height:1}.detail-hero .keyword{font-size:1.3rem;font-weight:700;margin-top:.3rem}.detail-hero .meaning{color:var(--text-muted)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1rem;margin-bottom:.75rem}.card h3{margin:0 0 .5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.badges{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}.badge{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:.2rem .7rem;font-size:.8rem;color:var(--text-muted)}.tag-link{display:inline-block;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:.3rem .6rem;margin:.2rem .2rem 0 0}.reading-list{display:flex;flex-wrap:wrap;gap:.4rem}.hint{font-size:.7rem;opacity:.7}.reading-wrap{position:relative;display:inline-block}.reading-btn{color:var(--text);cursor:pointer}.reading-tip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translate(-50%);background:var(--text);color:var(--bg);padding:.25rem .55rem;border-radius:6px;font-size:.8rem;white-space:nowrap;z-index:30;pointer-events:none;box-shadow:0 2px 10px #0000004d}.reading-tip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--text)}.vocab-item,.example-item{padding:.4rem 0;border-bottom:1px solid var(--border)}.vocab-item:last-child,.example-item:last-child{border-bottom:none}.vocab-item .jp{font-weight:600}.vocab-item .rd,.example-item .rd{color:var(--text-muted);font-size:.85rem;margin-left:.4rem}.vocab-item .mn{color:var(--text-muted);font-size:.9rem}.word-item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--border);color:var(--text);padding:.5rem 0;cursor:pointer}.word-item:last-child{border-bottom:none}.word-item:active{background:var(--surface-2)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:1.2rem;z-index:100}.modal-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem 1.2rem 1.4rem;width:100%;max-width:560px;text-align:center;box-shadow:0 12px 40px #0006}.modal-close{position:absolute;top:.5rem;right:.6rem;background:var(--surface-2);border:1px solid var(--border);color:var(--text);width:34px;height:34px;border-radius:50%;font-size:1rem}.modal-word{line-height:1.15;word-break:break-word;margin:.5rem 0 .75rem}.modal-word .kanji-link{text-decoration-thickness:2px}.modal-reading{font-size:1.4rem;color:var(--text-muted)}.modal-meaning{margin-top:.5rem;color:var(--text)}.kanji-link{color:var(--accent);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}.story{white-space:pre-wrap;font-size:.95rem}.story+.story{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border)}.conf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}.conf-grid button{border:2px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:var(--radius);padding:.5rem .2rem;font-size:.85rem;font-weight:600}.conf-grid button.sel.unknown{border-color:var(--c-unknown);background:var(--c-unknown);color:#fff}.conf-grid button.sel.easy{border-color:var(--c-easy);background:var(--c-easy);color:#fff}.conf-grid button.sel.medium{border-color:var(--c-medium);background:var(--c-medium);color:#fff}.conf-grid button.sel.hard{border-color:var(--c-hard);background:var(--c-hard);color:#fff}textarea{min-height:90px;resize:vertical}.muted{color:var(--text-muted)}.kana-heading{margin:1rem 0 .4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.kana-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem}.kana-grid.yoon{grid-template-columns:repeat(3,1fr)}.kana-cell{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.4rem .2rem;text-align:center;min-height:56px;display:flex;flex-direction:column;justify-content:center}.kana-cell.empty{background:none;border:none}.kana-pair{display:flex;justify-content:center;gap:.3rem;font-size:1.15rem;line-height:1.1}.kana-pair span:last-child{color:var(--text-muted)}.kana-single{font-size:1.7rem;line-height:1.1}.kana-rj{font-size:.72rem;color:var(--accent);margin-top:.15rem}.center{text-align:center}.spinner{text-align:center;padding:2rem;color:var(--text-muted)}.login-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem 1.5rem;gap:1rem}.login-wrap h1{text-align:center;font-size:2.5rem;margin:0}.error{color:var(--c-hard);text-align:center;font-size:.9rem}.stack>*+*{margin-top:.6rem}