:root{--paper: #f6f6f2;--surface: #fffffe;--ink: #191e22;--ink-soft: #5d666d;--ink-faint: #98a0a5;--rule: #dfe0da;--grid: #c1cfca;--shu: #c4342a;--shu-soft: #f0dbd6;--ai: #29496e;--ai-soft: #dee6ef;--ok: #2f7a4f;--shadow: 0 1px 2px rgb(25 30 34 / 6%), 0 8px 24px -12px rgb(25 30 34 / 18%);--f-jp: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;--f-th: "Noto Sans Thai", "Leelawadee UI", "Sarabun", Tahoma, sans-serif;--f-ui: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;--f-num: ui-monospace, "Cascadia Mono", Consolas, monospace;--w: 660px}@media(prefers-color-scheme:dark){:root{--paper: #12161a;--surface: #1a2026;--ink: #e9ebe7;--ink-soft: #9aa5ad;--ink-faint: #69737b;--rule: #2a333a;--grid: #3d4a53;--shu: #e7614e;--shu-soft: #3a2320;--ai: #8fb4dd;--ai-soft: #1e2c3b;--ok: #6bbd8c;--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px -14px rgb(0 0 0 / 70%)}}:root[data-theme=dark]{--paper: #12161a;--surface: #1a2026;--ink: #e9ebe7;--ink-soft: #9aa5ad;--ink-faint: #69737b;--rule: #2a333a;--grid: #3d4a53;--shu: #e7614e;--shu-soft: #3a2320;--ai: #8fb4dd;--ai-soft: #1e2c3b;--ok: #6bbd8c;--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px -14px rgb(0 0 0 / 70%)}:root[data-theme=light]{--paper: #f6f6f2;--surface: #fffffe;--ink: #191e22;--ink-soft: #5d666d;--ink-faint: #98a0a5;--rule: #dfe0da;--grid: #c1cfca;--shu: #c4342a;--shu-soft: #f0dbd6;--ai: #29496e;--ai-soft: #dee6ef;--ok: #2f7a4f;--shadow: 0 1px 2px rgb(25 30 34 / 6%), 0 8px 24px -12px rgb(25 30 34 / 18%)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0}body{font-family:var(--f-th);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}#app{min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.5vw,22px);padding:clamp(12px,3vw,32px) clamp(12px,4vw,24px) calc(24px + env(safe-area-inset-bottom))}.w{width:100%;max-width:var(--w)}.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:12px}.head-jp{font-family:var(--f-jp);font-size:clamp(1.3rem,4.5vw,1.8rem);letter-spacing:.12em;line-height:1.1;margin:0;font-weight:400}.head-th{font-size:.75rem;letter-spacing:.04em;color:var(--ink-soft)}.head-right{display:flex;align-items:center;gap:6px}.head-count{font-family:var(--f-num);font-size:.68rem;letter-spacing:.08em;color:var(--ink-faint);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.head-count b{display:block;font-size:1.35rem;font-weight:500;color:var(--ink);line-height:1.1}.controls{display:flex;flex-direction:column;gap:8px}.row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.row-label{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-family:var(--f-ui);min-width:46px}.chip{font-family:var(--f-th);font-size:.78rem;padding:5px 10px;border:1px solid var(--rule);background:transparent;color:var(--ink-soft);border-radius:2px;cursor:pointer;transition:background .12s,color .12s,border-color .12s;line-height:1.4}.chip:hover:not(:disabled){border-color:var(--ink-faint);color:var(--ink)}.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.chip:disabled{opacity:.35;cursor:not-allowed}.chip-jp{font-family:var(--f-jp)}:where(.chip,.tile,.btn,.key):focus-visible{outline:2px solid var(--ai);outline-offset:2px}.scope{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding-top:12px;font-size:.82rem;color:var(--ink-soft)}.scope-text b{color:var(--ink);font-weight:500}.picker{width:min(96vw,640px);max-height:86dvh;padding:0;border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);overflow:hidden}.picker::backdrop{background:#00000073}.picker[open]{display:flex;flex-direction:column}.picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--rule);flex:0 0 auto}.picker-head h2{margin:0;font-family:var(--f-th);font-size:.95rem;font-weight:500}.picker-body{flex:1 1 auto;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}.picker-foot{flex:0 0 auto;display:flex;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--rule)}.grid-box{display:flex;flex-direction:column;gap:3px}.grid-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:4px}.grid-block-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:var(--f-jp);font-size:.9rem;color:var(--ink-faint);letter-spacing:.1em;border-bottom:1px solid var(--rule);padding:12px 0 4px;margin-bottom:4px}.block-actions{display:flex;gap:4px;flex-shrink:0}.block-toggle{font-family:var(--f-th);font-size:.72rem;letter-spacing:0;padding:2px 8px;background:transparent;border:1px solid var(--rule);border-radius:2px;color:var(--ink-soft);cursor:pointer;white-space:nowrap}.block-toggle:hover{color:var(--ink);border-color:var(--ink-faint)}.block-toggle.is-know{color:var(--ai);border-color:color-mix(in srgb,var(--ai) 40%,var(--rule))}.block-toggle.is-know:hover{border-color:var(--ai)}.wrap-row{display:flex;align-items:flex-start;gap:8px;padding:2px 0}.wrap-head{flex:0 0 auto;width:92px;font-family:var(--f-th);font-size:.72rem;text-align:right;padding:6px 8px 0 0;background:transparent;border:0;border-right:2px solid var(--rule);color:var(--ink-faint);cursor:pointer}.wrap-head:hover{color:var(--ink)}.wrap-head[aria-pressed=true]{color:var(--ink);border-right-color:var(--shu)}.wrap-cells{display:flex;flex-wrap:wrap;gap:2px;flex:1 1 auto}.wrap-cells .kana-cell{min-width:32px}.picker-count{font-size:.78rem;color:var(--ink-soft)}.picker-foot{justify-content:space-between;align-items:center}.kana-scroll{overflow-x:auto;overflow-y:hidden;margin-bottom:6px;padding-bottom:2px;scrollbar-width:thin}.kana-table{display:grid;gap:1px;min-width:max-content}.col-head{height:5px;margin:0 2px 4px;padding:0;background:var(--rule);border:0;border-radius:3px;cursor:pointer;transition:background .1s}.col-head:hover{background:var(--ai)}.col-head[aria-pressed=true]{background:var(--ink-faint)}.col-head.is-gap,.kana-cell.is-gap{margin-left:14px}.kana-cell{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 1px;background:transparent;border:0;border-radius:2px;cursor:pointer;touch-action:manipulation;transition:background .1s,opacity .1s}.kana-cell-k{font-family:var(--f-jp);font-size:1.15rem;line-height:1.1;color:var(--ink);white-space:nowrap}.kana-cell-r{font-family:var(--f-num);font-size:.6rem;line-height:1;color:var(--ink-faint)}.kana-cell[aria-pressed=false]{opacity:.32}.kana-cell[data-state]:after{content:"";width:5px;height:5px;border-radius:50%;margin-top:1px;background:transparent}.kana-cell[data-state=weak]:after{background:var(--shu)}.kana-cell[data-severe=true]:after{box-shadow:0 0 0 2px color-mix(in srgb,var(--shu) 35%,transparent)}.kana-cell[data-state=ok]:after{background:var(--ok);opacity:.55}.kana-cell[data-state=new]:after{background:var(--ink-faint);opacity:.3}.picker-legend{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:.74rem;color:var(--ink-soft);padding-bottom:2px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:2px;vertical-align:middle}.dot-weak{background:var(--shu)}.dot-ok{background:var(--ok)}.dot-new{background:var(--ink-faint);opacity:.4}.scope-actions{display:flex;gap:6px;flex-wrap:wrap}.btn-weak[aria-pressed=true]{background:var(--shu);border-color:var(--shu);color:var(--paper)}.btn-weak:disabled{opacity:.4;cursor:default}.kana-cell[aria-pressed=false] .kana-cell-k{text-decoration:line-through;text-decoration-color:var(--ink-faint)}.kana-cell:hover{background:var(--ai-soft);opacity:1}.col-head:focus-visible,.kana-cell:focus-visible{outline:2px solid var(--ai);outline-offset:1px}.stage{display:flex;flex-direction:column;align-items:center;gap:12px}.square{position:relative;width:clamp(150px,44vw,230px);aspect-ratio:1;background:var(--surface);border:1px solid var(--grid);box-shadow:var(--shadow);display:grid;place-items:center}.square:before,.square:after{content:"";position:absolute;border-color:var(--grid);opacity:.55}.square:before{left:0;right:0;top:50%;border-top:1px dashed var(--grid)}.square:after{top:0;bottom:0;left:50%;border-left:1px dashed var(--grid)}.glyph{position:relative;z-index:1;font-family:var(--f-jp);font-size:clamp(4rem,22vw,8rem);line-height:1;color:var(--ink);user-select:none;text-align:center;padding:0 6px;white-space:nowrap;max-width:100%}.glyph.is-pair{font-size:clamp(2.2rem,12vw,4.4rem)}.glyph.is-many{font-size:clamp(1.6rem,8vw,3rem)}.glyph.is-text{font-family:var(--f-th);font-size:clamp(1.05rem,4.4vw,1.5rem);line-height:1.4;text-wrap:balance;white-space:normal;padding:0 14px}.glyph.is-romaji{font-family:var(--f-num);font-size:clamp(2rem,10vw,3.4rem);letter-spacing:.04em}.peek{position:absolute;bottom:22px;left:0;right:0;z-index:3;text-align:center;font-family:var(--f-num);font-size:clamp(1.1rem,5vw,1.5rem);letter-spacing:.06em;color:var(--ai);opacity:0;transition:opacity .1s;pointer-events:none}.peek.is-jp{font-family:var(--f-jp);font-size:clamp(1.8rem,8vw,2.6rem)}.square.is-peek .peek{opacity:1}.square{cursor:help}.square-note{position:absolute;bottom:7px;left:0;right:0;z-index:1;text-align:center;font-family:var(--f-ui);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}.square-audio{position:absolute;top:6px;right:6px;z-index:3;background:transparent;border:1px solid var(--rule);border-radius:2px;color:var(--ink-soft);cursor:pointer;font-size:.95rem;line-height:1;padding:5px 7px}.square-audio:hover{color:var(--ink);border-color:var(--ink-faint)}.mark{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--shu);stroke-width:4.5;stroke-linecap:round;opacity:0}.mark *{opacity:0}.square.is-correct .mark,.square.is-wrong .mark{opacity:1}.square.is-correct .m-o{opacity:.85;stroke-dasharray:239;stroke-dashoffset:239;animation:draw .34s ease-out forwards}.square.is-wrong .m-x1,.square.is-wrong .m-x2{opacity:.85;stroke-dasharray:71;stroke-dashoffset:71;animation:draw .22s ease-out forwards}.square.is-wrong .m-x2{animation-delay:.12s}@keyframes draw{to{stroke-dashoffset:0}}@media(prefers-reduced-motion:reduce){.square.is-correct .m-o,.square.is-wrong .m-x1,.square.is-wrong .m-x2{animation:none;stroke-dashoffset:0}}.answer{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}.answer-input{font-family:var(--f-num);font-size:clamp(1.5rem,7vw,2.1rem);text-align:center;letter-spacing:.12em;width:min(100%,300px);padding:8px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-bottom:2px solid var(--ink-faint);border-radius:2px;outline:none;caret-color:var(--shu)}.answer-input:focus{border-bottom-color:var(--ai)}.answer-input.is-wrong{border-bottom-color:var(--shu);color:var(--shu)}.answer-input:disabled{opacity:1}.answer-hint{font-size:.72rem;color:var(--ink-faint);min-height:1.2em}.keypad{display:none;flex-direction:column;gap:5px;width:100%}.keypad.is-on{display:flex}.keypad-row{display:grid;gap:5px}.keypad-row.consonants{grid-template-columns:repeat(7,1fr)}.keypad-row.vowels{grid-template-columns:repeat(5,1fr)}.keypad-row.extras{grid-template-columns:repeat(4,1fr)}.key{font-family:var(--f-num);font-size:1rem;padding:12px 0;min-height:46px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:3px;cursor:pointer;touch-action:manipulation;user-select:none}.key:active{background:var(--ai-soft)}.key.is-armed{border-color:var(--ai);background:var(--ai-soft);color:var(--ai)}.key.is-dim{opacity:.32}.key-wide{grid-column:span 2}.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.tile{position:relative;font-family:var(--f-th);font-size:.92rem;text-align:left;padding:12px 12px 12px 32px;min-height:54px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:2px;cursor:pointer;transition:border-color .12s,background .12s;display:flex;align-items:center;line-height:1.35}.tile:hover:not(:disabled){border-color:var(--ai)}.tile .num{position:absolute;left:11px;font-family:var(--f-num);font-size:.68rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}.tile.glyph-mode{font-family:var(--f-jp);font-size:2.3rem;justify-content:center;padding:10px;min-height:76px}.tile.glyph-mode .num{left:7px;top:5px}.tile.is-right{border-color:var(--shu);background:var(--shu-soft)}.tile.is-picked-wrong{border-color:var(--ink-faint);color:var(--ink-faint);text-decoration:line-through}.tile:disabled{cursor:default}.reveal{border-top:1px solid var(--rule);padding-top:10px;display:flex;flex-direction:column;gap:7px}.reveal[hidden]{display:none}.reveal-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}.reveal-glyph{font-family:var(--f-jp);font-size:1.8rem;line-height:1}.reveal-var{font-family:var(--f-jp);font-size:1.05rem;color:var(--ink-soft)}.reveal-th{font-size:.92rem}.reveal-romaji{font-family:var(--f-num);font-size:1.05rem;color:var(--shu);letter-spacing:.06em}.reveal-label{font-family:var(--f-ui);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}.examples{display:flex;flex-wrap:wrap;gap:12px}.ex{display:flex;align-items:baseline;gap:5px}.ex-k{font-family:var(--f-jp);font-size:1.3rem;color:var(--ai);line-height:1}.ex-t{font-size:.76rem;color:var(--ink-soft)}.tiles-single{grid-template-columns:1fr}.tile-part{flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;min-height:68px;text-align:center}.part-glyph{font-size:1.9rem;line-height:1}.part-meaning{font-size:.7rem;color:var(--ink-soft);line-height:1.25}.tile-part.is-right .part-meaning,.tile-part.is-picked-wrong .part-meaning{color:inherit}.reveal-btn{padding:14px;font-size:.95rem}.reveal-readings{gap:18px;align-items:flex-start}.rd-group{display:flex;align-items:baseline;gap:6px}.rd{font-family:var(--f-jp);font-size:1rem}.rd-on{color:var(--ai)}.rd-kun{color:var(--ink)}.ex-stacked{align-items:center;gap:6px}.ex-info{display:flex;flex-direction:column;line-height:1.2}.ex-reading{font-family:var(--f-jp);font-size:.7rem;color:var(--ink-soft)}.ex-unknown .ex-k{color:var(--ink-faint)}.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}.grade{font-family:var(--f-th);font-size:.82rem;padding:10px 4px;background:var(--surface);border:1px solid var(--rule);border-radius:2px;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:center;touch-action:manipulation}.grade:hover{border-color:var(--ai)}.grade small{font-family:var(--f-num);font-size:.64rem;color:var(--ink-faint)}.grade[data-r="1"]{color:var(--shu);border-color:color-mix(in srgb,var(--shu) 35%,var(--rule))}.grade[data-r="4"]{color:var(--ok)}.mnemo{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;border-left:2px solid var(--ai);padding:4px 0 4px 10px;margin:2px 0}.mnemo-text{flex:1 1 200px;font-size:.86rem;line-height:1.5;white-space:pre-wrap}.mnemo-text.is-empty{color:var(--ink-faint);font-style:italic}.mnemo-edit{flex:0 0 auto;font-family:var(--f-th);font-size:.72rem;padding:3px 9px;background:transparent;border:1px solid var(--rule);border-radius:2px;color:var(--ink-soft);cursor:pointer}.mnemo-edit:hover{color:var(--ink);border-color:var(--ink-faint)}.mnemo-input,.mnemo-keyword{width:100%;font-family:var(--f-th);font-size:.86rem;padding:6px 8px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:2px;resize:vertical}.mnemo-input:focus,.mnemo-keyword:focus{outline:none;border-color:var(--ai)}.next-row{display:flex;justify-content:flex-end;gap:8px}.btn{font-family:var(--f-th);font-size:.82rem;padding:8px 18px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:2px;cursor:pointer}.btn:hover{opacity:.86}.btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--rule)}.btn-ghost:hover{color:var(--ink);border-color:var(--ink-faint);opacity:1}.icon-btn{background:transparent;border:1px solid var(--rule);border-radius:2px;color:var(--ink-soft);cursor:pointer;font-size:.85rem;line-height:1;padding:6px 8px}.icon-btn:hover{color:var(--ink);border-color:var(--ink-faint)}.stats{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--rule);padding-top:12px}.bar{height:5px;background:var(--rule);overflow:hidden}.bar-fill{height:100%;width:0;background:var(--shu);transition:width .3s ease-out}.stat-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.stat{display:flex;flex-direction:column;gap:1px}.stat-k{font-family:var(--f-ui);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}.stat-v{font-family:var(--f-num);font-size:1rem;font-variant-numeric:tabular-nums}.foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.7rem;color:var(--ink-faint)}.kbd,kbd{font-family:var(--f-num);border:1px solid var(--rule);border-radius:2px;padding:1px 5px;font-size:.66rem;color:var(--ink-soft)}.sync-box{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--rule);padding-top:12px}.sync-field{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:var(--ink-soft)}.sync-field input{font-family:var(--f-num);font-size:.8rem;padding:6px 8px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:2px}.sync-field input:focus{outline:none;border-color:var(--ai)}.sync-status{font-variant-numeric:tabular-nums}.panel{background:var(--surface);border:1px solid var(--rule);padding:14px;display:flex;flex-direction:column;gap:12px}.panel[hidden]{display:none}.panel h2{margin:0;font-size:.82rem;font-family:var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}.field{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.85rem}.note{font-size:.72rem;color:var(--ink-faint);line-height:1.5}.note a{color:var(--ai)}@media(pointer:coarse){.chip{min-height:40px;padding:8px 13px}.btn{min-height:42px}.icon-btn,.square-audio{min-width:42px;min-height:42px}.block-toggle,.mnemo-edit{min-height:36px;padding:7px 12px}.grid-cell{min-width:40px;min-height:42px}.wrap-cells .kana-cell{min-width:40px}.col-head{height:12px}.grid-head,.wrap-head{min-height:36px}.key{min-height:52px}.tile{min-height:60px}}@media(max-width:430px){.tiles{grid-template-columns:1fr}.tiles.glyph-grid{grid-template-columns:repeat(2,1fr)}.tile.glyph-mode{min-height:62px;font-size:2rem}.row-label{min-width:100%}}