.kp-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.5rem 1.5rem}.kp-level{display:flex;align-items:center;gap:1rem;padding:.75rem .5rem;margin:0 -.5rem;border-radius:.75rem;color:var(--color-ink);text-decoration:none;transition:background-color .15s;-webkit-tap-highlight-color:transparent}@media(hover:hover)and (pointer:fine){.kp-level:hover{background:color-mix(in srgb,var(--color-ink) 5%,transparent)}.kp-level:hover .kp-level__icon{border-color:var(--color-accent)}}.kp-level:active .kp-level__icon{transform:scale(.96)}.kp-level:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.kp-level__icon{flex:none;display:grid;place-items:center;width:4rem;height:4rem;border:1px solid var(--color-rule-strong);border-radius:50%;background:var(--color-paper-raised);font-size:2rem;line-height:1;transition:border-color .15s,transform .15s}.kp-level.is-done .kp-level__icon{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}.kp-level__text{display:flex;flex-direction:column;gap:.125rem;min-width:0}.kp-level__name{font-weight:var(--weight-semibold)}.kp-level__kana{color:var(--color-ink-body)}.kp-level__status{font-size:.8125rem;color:var(--color-ink-dim)}.kp-level.is-done .kp-level__status{color:var(--color-ink-muted);font-weight:var(--weight-semibold)}.kp-level.is-done .kp-level__status:before{content:"✓ "}.kp-review{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding:1rem 1.25rem;border-radius:.75rem;background:color-mix(in srgb,var(--color-ink) 5%,var(--color-paper))}.kp-review[hidden]{display:none}.kp-inline{color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-rule-strong);text-underline-offset:3px}@media(hover:hover)and (pointer:fine){.kp-inline:hover{color:var(--color-accent);text-decoration-color:currentColor}}.kp-btn,.kb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.75rem;padding:0 1.125rem;border:1px solid var(--color-rule-strong);border-radius:999px;background:var(--color-paper);color:var(--color-ink);font-size:.9375rem;font-weight:var(--weight-semibold);text-decoration:none;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s,opacity .15s;-webkit-tap-highlight-color:transparent}.kp-btn--primary,.kb-btn--primary{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}.kp-btn:active:not(:disabled),.kb-btn:active:not(:disabled){transform:scale(.97)}.kp-btn:disabled,.kb-btn:disabled{opacity:.4;cursor:default}@media(hover:hover)and (pointer:fine){.kp-btn:hover:not(:disabled),.kb-btn:hover:not(:disabled){border-color:var(--color-ink)}.kp-btn--primary:hover:not(:disabled),.kb-btn--primary:hover:not(:disabled){background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}}.kp-btn:focus-visible,.kb-btn:focus-visible,.kp-sound:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.kp-stage{border-top:1px solid var(--color-rule);padding-top:1.5rem;scroll-margin-top:1rem}.kp{display:flex;flex-direction:column;align-items:center;gap:1rem}.kp--loading{min-height:36rem}.kp-top{display:flex;align-self:stretch;align-items:center;justify-content:space-between;gap:1rem}.kp-steps{display:flex;gap:.25rem;margin:0;padding:0;list-style:none;font-size:.8125rem;color:var(--color-ink-dim)}.kp-steps li{padding:.25rem .625rem;border-radius:999px}.kp-steps li[aria-current]{background:var(--color-ink);color:var(--color-paper);font-weight:var(--weight-semibold)}.kp-count{font-size:.8125rem;color:var(--color-ink-muted);font-variant-numeric:tabular-nums}.kp-prompt{display:grid;grid-template-columns:auto auto;align-items:center;-moz-column-gap:1rem;column-gap:1rem;min-height:6rem}.kp-prompt__text{display:flex;flex-direction:column;align-items:center;gap:.125rem}.kp-prompt__kana{font-size:4rem;line-height:1.1;color:var(--color-ink)}.kp-prompt__romaji{font-size:1.25rem;color:var(--color-ink-muted)}.kp-prompt__label{font-size:.875rem;color:var(--color-ink-muted)}.kp-prompt__big{font-size:3rem;font-weight:var(--weight-light);line-height:1.1;color:var(--color-ink)}.kp-sound{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--color-rule-strong);border-radius:50%;background:var(--color-paper);color:var(--color-ink);cursor:pointer;transition:border-color .15s,color .15s;-webkit-tap-highlight-color:transparent}.kp-sound:active{transform:scale(.95)}@media(hover:hover)and (pointer:fine){.kp-sound:hover{border-color:var(--color-accent);color:var(--color-accent)}}.kp-status{margin:0;min-height:1.5em;text-align:center;font-size:.9375rem;color:var(--color-ink-body)}.kp-status.is-miss{color:var(--color-accent)}.kp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;min-height:2.75rem}.kp-end{gap:.75rem;padding:2rem 0;text-align:center}.kp-end__kana{margin:0;font-size:2.5rem;letter-spacing:.1em;color:var(--color-ink)}.kp-end__title{margin:0;font-size:1.5rem;font-weight:var(--weight-semibold);color:var(--color-ink)}.kp-end__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.75rem}.kp-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;width:min(100%,24rem)}.kp-choice{min-height:4rem;border:1px solid var(--color-rule-strong);border-radius:12px;background:var(--color-paper-raised);color:var(--color-ink);font-size:1.5rem;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s,opacity .15s;-webkit-tap-highlight-color:transparent}.kp-choice:active:not(:disabled){transform:scale(.97)}@media(hover:hover)and (pointer:fine){.kp-choice:hover:not(:disabled){border-color:var(--color-ink)}}.kp-choice:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.kp-choice:disabled{cursor:default}.kp-choice.is-wrong{border-color:var(--color-accent);color:var(--color-accent);opacity:.55;text-decoration:line-through}.kp-choice.is-right{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}.kb{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.kb-row{display:flex;align-items:center;gap:.5rem}.kb-reset{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--color-rule-strong);border-radius:50%;background:var(--color-paper);color:var(--color-ink);cursor:pointer;transition:border-color .15s,color .15s,opacity .15s;-webkit-tap-highlight-color:transparent}.kb-reset:active:not(:disabled){transform:scale(.95)}.kb-reset:disabled{opacity:.4;cursor:default}.kb-reset:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media(hover:hover)and (pointer:fine){.kb-reset:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}}.kb-board{display:block;width:min(100%,24rem,52svh);aspect-ratio:1;border:1px solid var(--color-rule);border-radius:12px;background:var(--color-paper-raised);touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;cursor:crosshair;transition:border-color .2s}.kb-board.is-done{border-color:var(--color-ink);cursor:default}.kb-grid{stroke:color-mix(in srgb,var(--color-ink) 16%,transparent);stroke-width:1.5;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}.kb-guide{fill:none;stroke:color-mix(in srgb,var(--color-ink) 14%,transparent);stroke-width:24;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}.kb-guide.is-next{stroke:color-mix(in srgb,var(--color-accent) 30%,transparent)}.kb-guide.is-reveal{stroke-dasharray:1 1;animation:kb-reveal ease-in-out both}@keyframes kb-reveal{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}to{stroke-dashoffset:0}}.kb-ink polyline{fill:none;stroke:var(--color-ink);stroke-width:16;stroke-linecap:round;stroke-linejoin:round}.kb-ink circle{fill:var(--color-ink)}.kb-ink .is-miss{stroke:var(--color-accent);opacity:0;transition:opacity .6s ease-in .1s}.kb-ink circle.is-miss{fill:var(--color-accent)}.kb-anim{fill:none;stroke:var(--color-ink);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none}.kb-marks,.kb-hint{pointer-events:none}.kb-badge{fill:var(--color-ink-muted)}.kb-badge-n{fill:var(--color-paper);font-family:var(--font-sans),ui-sans-serif,system-ui,sans-serif;font-size:15px;font-weight:var(--weight-bold);text-anchor:middle}.kb-arrow{fill:none;stroke:var(--color-ink-muted);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.kb-mark:not(.is-next) .kb-arrow{display:none}.kb-mark.is-next .kb-badge{fill:var(--color-accent)}.kb-mark.is-next .kb-badge-n{fill:var(--color-on-accent)}.kb-mark.is-next .kb-arrow{stroke:var(--color-accent)}.kb-hint{animation:kb-hint 1.8s ease-out forwards}.kb-hint__stroke{fill:none;stroke:color-mix(in srgb,var(--color-accent) 55%,transparent);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}@keyframes kb-hint{0%,70%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.kb-hint,.kb-guide.is-reveal{animation:none}.kb-ink .is-miss{transition:none}}.kp-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:100;pointer-events:none}