@font-face{font-family:Noto Sans JP;src:url(/fonts/noto-sans-jp.woff2)format("woff2");font-weight:100 900;font-display:block}@font-face{font-family:Noto Serif JP;src:url(/fonts/noto-serif-jp.woff2)format("woff2");font-weight:200 900;font-display:block}@font-face{font-family:Klee One;src:url(/fonts/klee-one.woff2)format("woff2");font-weight:400;font-display:block}:root{--bg:#fbf9f6;--fg:#22201d;--muted:#6f675d;--line:#e3ddd3;--accent:#8a4b2a;--error:#b3261e;--radius:10px;--ui:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--bg);color:var(--fg);font-family:var(--ui);margin:0;line-height:1.5}a{color:var(--accent)}.app{max-width:46rem;margin:0 auto;padding:1rem 1.25rem 3rem}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;padding:.5rem 0 1rem;display:flex}.brand{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;font-size:1rem;font-weight:600}.sections{gap:1.25rem;display:flex}.sections button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:.1rem 0}.sections button:hover{color:var(--fg)}.sections button[aria-pressed=true]{border-bottom-color:var(--accent);color:var(--fg)}.score{min-width:4ch;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;margin:0;font-size:.9rem}.score-fail{color:var(--error)}.main{justify-content:center;align-items:center;min-height:60vh;display:flex}.trainer{justify-items:center;gap:.5rem;width:100%;display:grid}.glyph{margin:0;font-size:clamp(4.5rem,14vw,8rem);line-height:1.1}.answer-line{place-items:center;min-height:2rem;margin:0;display:grid}.answer-error{color:var(--error);font-size:1.25rem;font-weight:600}.answer{border:0;border-bottom:2px solid var(--line);width:11ch;color:inherit;font:inherit;text-align:center;background:0 0;border-radius:0;padding:.15rem .4rem;font-size:1.15rem}.answer:focus{border-bottom-color:var(--accent);outline:none}.card{text-align:center;justify-items:center;gap:.35rem;width:100%;display:grid}.word{text-align:center;max-width:100%;margin:0;font-size:clamp(2.6rem,9vw,4.5rem);line-height:1.15}.reading{color:var(--muted);margin:0;font-size:1.05rem}.romaji{color:var(--muted);opacity:0;margin:0;font-size:.72rem;transition:opacity .12s}.card:hover .romaji{opacity:1}@media (hover:none){.romaji{opacity:1}}.meanings{text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:.5rem;width:100%;min-height:4.5rem;margin:.35rem 0 0;padding:0;font-size:1.05rem;list-style:none;display:flex}.meanings li{align-items:center;gap:.5rem;display:flex}.meanings li+li:before{content:"";background:var(--muted);opacity:.5;width:1px;height:.9rem}.actions{align-items:center;gap:.5rem;min-height:2.4rem;display:flex}.action{border:1px solid var(--line);border-radius:var(--radius);min-height:2.375rem;color:inherit;font:inherit;cursor:pointer;background:#fff;justify-content:center;align-items:center;padding:.4rem 1rem;line-height:1.2;display:inline-flex}.action:hover{border-color:var(--accent);color:var(--accent)}.audio{border:1px solid var(--line);border-radius:var(--radius);min-height:2.375rem;color:inherit;font:inherit;cursor:pointer;background:#fff;justify-content:center;align-items:center;padding:.35rem .55rem;font-size:1.05rem;line-height:1;display:inline-flex}.audio:hover{border-color:var(--accent);color:var(--accent)}.audio:disabled{color:var(--muted);cursor:default}.audio.audio-error{border-color:var(--error);color:var(--error);font-size:.8rem}.audio-square{width:2.375rem;padding:0}.audio[aria-pressed=false]{color:var(--muted)}.audio[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.start{justify-items:center;gap:.75rem;display:grid}.keys{color:var(--muted);margin:0;font-size:.78rem}.empty{color:var(--muted)}.warning{border-radius:var(--radius);color:#6b4c13;background:#fff4e5;border:1px solid #f0d8b0;margin:0 0 1rem;padding:.5rem .75rem;font-size:.9rem}.panels{border-top:1px solid var(--line)}.panel{border-bottom:1px solid var(--line);padding:.75rem 0}.panel-summary{cursor:pointer;color:var(--muted);font-size:.9rem}.kana-table{border-collapse:collapse;font-size:.9rem}.table-scroll{margin-top:.6rem;overflow-x:auto}.kana-table th,.kana-table td{border-bottom:1px solid var(--line);text-align:center;white-space:nowrap;padding:.2rem .45rem;font-weight:400}.kana-table thead th{padding:.1rem .45rem .35rem}.kana-table thead input{cursor:pointer}.kana-table .kind-sep{border-left:1px solid var(--line)}.kana-glyph{font-size:1.2rem;line-height:1.2;display:block}.kana-reading{color:var(--muted);font-size:.7rem;display:block}.group{border:0;margin:1.25rem 0 0;padding:0}.group legend{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0;font-size:.8rem}.voices{flex-wrap:wrap;gap:1rem;margin-top:.5rem;display:flex}.voice{cursor:pointer;align-items:center;gap:.35rem;font-size:.9rem;display:flex}.fonts{flex-wrap:wrap;gap:1rem;margin:.5rem 0 0;padding:0;list-style:none;display:flex}.pack-all{color:var(--muted);cursor:pointer;align-items:center;gap:.4rem;margin:.6rem 0 .2rem;font-size:.85rem;display:flex}.packs{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.1rem 1rem;margin:0;padding:0;list-style:none;display:grid}.pack{cursor:pointer;align-items:baseline;gap:.45rem;padding:.15rem 0;font-size:.85rem;display:flex}.pack-title{min-width:3.6rem;color:var(--muted);font-variant-numeric:tabular-nums}.pack-preview{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.font{cursor:pointer;align-items:center;gap:.4rem;display:flex}.font-sample{font-size:1.4rem}.footer{border-top:1px solid var(--line);color:var(--muted);gap:.1rem;margin-top:1.5rem;padding-top:.85rem;font-size:.78rem;display:grid}.footer p{margin:0}.footer a{color:inherit;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line)}.footer a:hover{color:var(--accent)}.sections button:focus-visible,.panel-summary:focus-visible,.font input:focus-visible,.voice input:focus-visible,.pack input:focus-visible,.pack-all input:focus-visible,.action:focus-visible,.audio:focus-visible,.footer a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}