.kana-page{--gold:#d9a23a;--gold-ink:#8a5a12;--mast:color-mix(in srgb,var(--accent) 82%,var(--bg));--mast-ink:#fff;--q:#2b7f4b;--q-line:#1b5e35;--q-ink:#fff;--l:#ecbd52;--l-line:#a87618;--l-ink:#2a1d02}@media (prefers-color-scheme:dark){.kana-page{--gold:#e3b04b;--gold-ink:#f3d48a;--mast-ink:var(--accent-ink);--q:#5cc285;--q-line:#a6e3bd;--q-ink:#0b1d12;--l:#e9b949;--l-line:#fbe2a2;--l-ink:#241a05}}.kana-page .page-head{padding-bottom:.5rem}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.game{margin:1rem 0 0}.cats{display:grid;grid-template-columns:auto repeat(3,1fr);gap:.4rem}.cat-row{align-self:center;font:600 .68rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding-right:.25rem}.cat{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.45rem;align-items:center;text-align:left;font:inherit;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:.5rem .6rem;cursor:pointer;min-width:0}.cat .tro{grid-row:span 2}.cat-n{font-weight:650;font-size:.85rem;line-height:1.2}.cat-k{font-size:.78rem;line-height:1.2;opacity:.8}.cat[aria-pressed="true"]{background:var(--bg);color:var(--ink);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.cat:hover{color:var(--ink)}@media (max-width:30rem){.cat{grid-template-columns:1fr;justify-items:center;text-align:center;padding:.45rem .25rem}.cat .tro{grid-row:auto;margin-bottom:.2rem}.cat-row{font-size:.6rem;padding-right:0}}.tro{width:1.35rem;height:1.35rem;flex:none;overflow:visible;fill:transparent;stroke:var(--ink-2);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:2 1.8;opacity:.5;transition:fill .6s ease .3s,stroke .6s ease .3s,stroke-dasharray .6s ease .3s,opacity .3s ease .3s}.tro.on{fill:var(--gold);stroke:var(--gold-ink);stroke-dasharray:2 0;opacity:1}.tro.win{animation:win 1s ease-in-out}@keyframes win{25%{transform:scale(1.6) rotate(-14deg)}45%{transform:scale(1.55) rotate(12deg)}65%{transform:scale(1.45) rotate(-7deg)}85%{transform:scale(1.15) rotate(3deg)}}.burst{position:absolute;width:0;height:0;z-index:3;pointer-events:none}.burst i{position:absolute;left:-3px;top:-4px;width:6px;height:9px;border-radius:2px;background:var(--accent);opacity:0;animation:confetti .95s cubic-bezier(.2,.7,.3,1) var(--d) forwards}.burst i.c1{background:var(--gold)}.burst i.c2{background:var(--mark)}.burst i.c3{background:var(--q)}@keyframes confetti{0%{opacity:1;transform:translate(0,0) scale(.5)}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 14px)) rotate(var(--r))}}.stats{display:flex;gap:1.75rem;margin:1rem 0;font-variant-numeric:tabular-nums}.stats div{position:relative;display:flex;flex-direction:column-reverse}.stats dt{font:600 .7rem/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}.stats dd{margin:0;font:700 1.5rem/1.2 var(--mono)}.stats dd.bump{animation:bump .25s ease-out}@keyframes bump{40%{transform:scale(1.18)}}.stats div::after{content:"";position:absolute;left:.55rem;top:.8rem;width:5px;height:5px;border-radius:50%;opacity:0;pointer-events:none}.stats div.spark::after{animation:spark .8s ease-out}@keyframes spark{0%{opacity:1;box-shadow:0 0 var(--gold),0 0 var(--accent),0 0 var(--mark),0 0 var(--gold),0 0 var(--q),0 0 var(--accent)}100%{opacity:0;box-shadow:-20px -16px var(--gold),18px -18px var(--accent),26px 2px var(--mark),-24px 8px var(--gold),4px -26px var(--q),-4px 22px var(--accent)}}.card{position:relative;border:1.5px solid var(--line);border-radius:18px;background:var(--bg);height:10.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color .2s,background-color .2s}@media (min-width:40rem){.card{height:13rem}}.kana{font:500 clamp(4.5rem,20vw,6.5rem)/1 var(--font);margin:0}.romaji{font:600 1.15rem/1 var(--mono);color:var(--mark);margin:.9rem 0 0;min-height:1.15rem}.card.ok{border-color:var(--accent);background:var(--accent-soft)}.card.no{border-color:var(--mark)}.card.pop .kana{animation:pop .25s ease-out}@keyframes pop{from{transform:scale(.92);opacity:.4}to{transform:none;opacity:1}}.answer{display:flex;gap:.6rem;margin-top:1rem}.answer input{flex:1;min-width:0;font:600 1.25rem/1.2 var(--mono);text-align:center;letter-spacing:.04em;padding:.75rem;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}.answer input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.answer .btn{padding:.75rem 1.2rem}.feedback{min-height:1.6em;margin:.75rem 0 0;font-weight:600;text-align:center}.feedback .w{color:var(--mark)}.controls{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-2);margin:.25rem 0 0}.keys{display:none;font:.72rem/1 var(--mono);border:1px solid var(--line);border-radius:4px;padding:.2rem .35rem;color:var(--ink-2)}@media (hover:hover) and (pointer:fine){.keys{display:inline-block}}.link{font:inherit;color:var(--accent);background:none;border:0;padding:.3rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:.18em}.progress{margin-top:2rem}.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;font:.75rem/1 var(--mono);color:var(--ink-2);margin:0 0 .6rem}.sw{display:inline-block;width:.8rem;height:.8rem;border-radius:3px;margin-right:.35rem;vertical-align:-1px}.sw.m,.grid li.m{background:var(--mast)}.sw.q,.grid li.q{background:var(--q);box-shadow:0 0 0 1.5px var(--q-line) inset}.sw.l,.grid li.l{background:var(--l);box-shadow:0 0 0 1.5px var(--l-line) inset}.grid{list-style:none;padding:0;margin:0 0 .5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(2.6rem,1fr));gap:5px}.grid li{position:relative;margin:0;aspect-ratio:1;display:grid;place-items:center;font-size:1.05rem;border-radius:7px;border:1px solid var(--line);background:color-mix(in srgb,var(--accent) var(--m,0%),var(--bg))}.grid li.new{border-style:dashed;color:var(--ink-2)}.grid li.m{color:var(--mast-ink);border-color:transparent}.grid li.q{color:var(--q-ink);border-color:transparent}.grid li.l{color:var(--l-ink);border-color:transparent;box-shadow:0 0 0 1.5px var(--l-line) inset,0 0 10px color-mix(in srgb,var(--l) 45%,transparent)}.grid li.yo{font-size:.8rem;letter-spacing:-.06em}.grid li.up{z-index:1;animation:up .6s ease-out}@keyframes up{35%{transform:scale(1.3);filter:brightness(1.15)}}.after{margin:2.5rem 0 1rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--ink-2)}@media (prefers-reduced-motion:reduce){.tro{transition:none}.burst{display:none}.card{transition:none}.card.pop .kana,.tro.win,.stats dd.bump,.stats div.spark::after,.grid li.up{animation:none}}