:root{--paper:#efece3;--card:#fbfaf5;--ink:#26231f;--ink-soft:#6e6a60;--guide:#d8d4c8;--shu:#c3402b;--shu-soft:#f3ded8;--ai:#3a5a8c;--ai-soft:#dde4ef;--ok-wash:#e7edde;--font-kana:"Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;--font-ui:"Avenir Next", "Hiragino Sans", system-ui, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--paper);min-height:100dvh;color:var(--ink);font-family:var(--font-ui);flex-direction:column;margin:0;display:flex}button{font:inherit;cursor:pointer}kbd{font-family:var(--font-mono);border:1px solid var(--guide);background:var(--card);border-radius:4px;padding:0 .35em;font-size:.75em}.topbar{flex-wrap:wrap;align-items:baseline;gap:1.25rem;padding:1rem 1.5rem;display:flex}.wordmark{font-family:var(--font-kana);letter-spacing:.05em;margin:0;font-size:1.6rem;font-weight:600}.wordmark-latin{font-family:var(--font-ui);letter-spacing:.35em;text-transform:uppercase;color:var(--ink-soft);margin-left:.6em;font-size:.8rem;font-weight:500}.session-chips{gap:.5rem;margin-right:auto;display:flex}.chip{color:var(--ink-soft);background:var(--card);border:1px solid var(--guide);white-space:nowrap;border-radius:999px;padding:.15rem .7rem;font-size:.8rem}.chip-streak.hot{color:var(--shu);border-color:var(--shu)}.topbar-actions{gap:.5rem;display:flex}.ghost-btn{border:1px solid var(--guide);color:var(--ink-soft);background:0 0;border-radius:6px;padding:.3rem .8rem;font-size:.85rem}.ghost-btn:hover{border-color:var(--ink-soft);color:var(--ink)}.exit-btn{text-decoration:none}.exit-btn:hover{border-color:var(--shu);color:var(--shu)}.solid-btn{background:var(--ink);color:var(--card);border:none;border-radius:6px;padding:.45rem 1.1rem;font-size:.9rem}.solid-btn:hover{background:#000}.link-btn{color:var(--ai);background:0 0;border:none;padding:0;text-decoration:underline}.stage{flex:1;justify-content:center;align-items:center;padding:1rem 1.5rem 3rem;display:flex}.drill{flex-direction:column;align-items:center;gap:1.4rem;width:min(30rem,100%);display:flex}.drill-ask{letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0;font-size:.85rem}.practice-square{aspect-ratio:1;background:var(--card);border:1.5px solid var(--ink);justify-content:center;align-items:center;width:min(15rem,70vw);display:flex;position:relative}.practice-square:before,.practice-square:after{content:"";pointer-events:none;position:absolute}.practice-square:before{border-left:1px dashed var(--guide);top:4%;bottom:4%;left:50%}.practice-square:after{border-top:1px dashed var(--guide);top:50%;left:4%;right:4%}.prompt{font-family:var(--font-kana);z-index:1;-webkit-user-select:none;user-select:none;font-size:clamp(4rem,22vw,7.5rem);line-height:1}.prompt.romaji{font-family:var(--font-mono);font-size:clamp(3rem,16vw,5rem)}.prompt.word{letter-spacing:.04em;font-size:clamp(2.2rem,10vw,3.6rem)}.reveal-answer .gloss{color:var(--ink-soft);font-size:.95rem}.prompt.sound{color:var(--ink-soft);font-size:clamp(3rem,16vw,5rem)}.script-tag,.new-tag{letter-spacing:.1em;z-index:2;border-radius:999px;padding:.1rem .5rem;font-size:.7rem;position:absolute;top:.5rem}.script-tag{background:var(--ai-soft);color:var(--ai);left:.5rem}.script-tag.hira{background:var(--shu-soft);color:var(--shu)}.new-tag{background:var(--ink);color:var(--card);text-transform:uppercase;right:.5rem}.replay-btn{z-index:2;border:1px solid var(--guide);background:0 0;border-radius:6px;padding:.15rem .45rem;font-size:1.1rem;position:absolute;bottom:.5rem;right:.5rem}.maru{z-index:3;pointer-events:none;opacity:0;position:absolute;inset:4%}.maru circle{fill:none;stroke:var(--shu);stroke-width:7px;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100px;transform-origin:50%;transform:rotate(-80deg)}.practice-square.correct{background-color:var(--ok-wash)}.practice-square.correct .maru{opacity:.9}.practice-square.correct .maru circle{animation:.35s ease-out forwards draw-maru}@keyframes draw-maru{to{stroke-dashoffset:4px}}.batsu{z-index:3;color:var(--shu);opacity:0;pointer-events:none;font-size:2.2rem;position:absolute;bottom:.4rem;left:.6rem}.practice-square.wrong{background-color:var(--shu-soft)}.practice-square.wrong .batsu{opacity:.9;animation:.2s ease-out pop-batsu}@keyframes pop-batsu{0%{opacity:0;transform:scale(1.6)}to{opacity:.85;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.practice-square.correct .maru circle{stroke-dashoffset:4px;animation:none}.practice-square.wrong .batsu{animation:none}}.answer-area{flex-direction:column;gap:.8rem;width:100%;display:flex}.type-row{align-items:center;gap:.7rem;display:flex}#answerInput{font-family:var(--font-mono);text-align:center;border:none;border-bottom:2px solid var(--ink);color:var(--ink);background:0 0;outline:none;flex:1;padding:.5rem .8rem;font-size:1.4rem}#answerInput::placeholder{font-family:var(--font-ui);color:var(--ink-soft);font-size:.95rem}#answerInput:focus{border-bottom-color:var(--ai)}.mic{color:var(--ink-soft);align-items:center;gap:.4rem;font-size:.75rem;display:flex}.mic-dot{background:var(--guide);border-radius:50%;width:.6rem;height:.6rem}.mic.listening .mic-dot{background:var(--shu);animation:1.6s ease-in-out infinite pulse}.mic.loading .mic-dot{background:var(--guide);animation:1.6s ease-in-out infinite pulse}.mic.blocked .mic-dot{background:var(--guide);outline:1.5px solid var(--shu)}.mic[hidden]{display:none}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.35)}}@media (prefers-reduced-motion:reduce){.mic.listening .mic-dot{animation:none}}.options{grid-template-columns:repeat(3,1fr);gap:.6rem;margin:0;padding:0;list-style:none;display:grid}.options button{background:var(--card);border:1px solid var(--guide);border-radius:8px;align-items:center;gap:.6rem;width:100%;padding:.5rem .7rem;display:flex}.options button:hover{border-color:var(--ink-soft)}.options .opt-num{font-family:var(--font-mono);color:var(--ink-soft);border:1px solid var(--guide);border-radius:4px;padding:0 .35em;font-size:.8rem}.options .opt-kana{font-family:var(--font-kana);font-size:1.9rem;line-height:1.1}.options .opt-romaji{font-family:var(--font-mono);font-size:1.3rem}.options button.picked-wrong{border-color:var(--shu);background:var(--shu-soft)}.options button.is-answer{border-color:var(--ink);background:var(--ok-wash)}.reveal{background:var(--card);border:1px solid var(--guide);border-left:3px solid var(--shu);border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1rem;display:flex}.reveal[hidden]{display:none}.reveal-answer{font-size:1.1rem}.reveal-answer .big{font-family:var(--font-kana);margin-right:.4rem;font-size:1.7rem}.reveal-answer .romaji{font-family:var(--font-mono)}.reveal-actions{align-items:center;gap:.6rem;display:flex}.hint-row{align-items:center;gap:1rem;min-height:2rem;display:flex}.heard{color:var(--ink-soft);font-size:.8rem;font-style:italic}.empty-note{color:var(--ink-soft);text-align:center;max-width:26rem;line-height:1.6}.panel{border:1.5px solid var(--ink);background:var(--card);color:var(--ink);border-radius:10px;width:min(34rem,100vw - 2rem);max-height:85dvh;padding:0}.panel::backdrop{background:#26231f59}.panel-head{justify-content:space-between;align-items:center;padding:1rem 1.25rem .5rem;display:flex}.panel-head h2{font-family:var(--font-kana);margin:0;font-size:1.2rem}.panel-head h2 span{font-family:var(--font-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-left:.5em;font-size:.75rem}.panel-body{padding:.5rem 1.25rem 1.25rem;overflow-y:auto}.set-section{margin-bottom:1.3rem}.set-section h3{letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .5rem;font-size:.75rem}.chip-row{flex-wrap:wrap;gap:.4rem;display:flex}.toggle-chip{border:1px solid var(--guide);color:var(--ink-soft);background:0 0;border-radius:999px;padding:.25rem .75rem;font-size:.85rem}.toggle-chip.on{border-color:var(--ink);color:var(--ink);background:var(--paper)}.toggle-chip.on.kata{border-color:var(--ai);color:var(--ai);background:var(--ai-soft)}.toggle-chip.on.hira{border-color:var(--shu);color:var(--shu);background:var(--shu-soft)}.set-row{align-items:center;gap:.7rem;margin:.4rem 0;font-size:.9rem;display:flex}.set-row select{font:inherit;padding:.15rem .3rem}.set-note{color:var(--ink-soft);margin:.3rem 0 0;font-size:.78rem;line-height:1.5}.danger-btn{border:1px solid var(--shu);color:var(--shu);background:0 0;border-radius:6px;padding:.3rem .8rem;font-size:.85rem}.mastery{margin-bottom:1.2rem}.mastery h3{margin:0 0 .4rem;font-size:.9rem}.mastery-grid{flex-wrap:wrap;gap:.25rem;display:flex}.mastery-cell{width:2.1rem;height:2.1rem;font-family:var(--font-kana);border:1px solid var(--guide);background:var(--card);border-radius:5px;justify-content:center;align-items:center;font-size:1.05rem;display:flex;position:relative}.mastery-cell .dot{border-radius:50%;width:.4rem;height:.4rem;position:absolute;bottom:2px;right:2px}.stats-legend{color:var(--ink-soft);font-size:.78rem;line-height:1.6}@media (width<=480px){.topbar{gap:.6rem;padding:.8rem 1rem}.session-chips{order:3;width:100%}.options{grid-template-columns:repeat(2,1fr)}.stage{padding:.5rem 1rem 2rem}}:focus-visible{outline:2px solid var(--ai);outline-offset:2px}