.screen{flex-direction:column;gap:28px;max-width:1040px;margin:0 auto;padding:28px 24px 40px;display:flex}.motto{color:var(--color-primary-dark);background:var(--color-primary-light);border-radius:999px;padding:8px 20px;font-size:1.125rem;font-weight:700}.motto--large{padding:10px 28px;font-size:1.375rem}.btn{border:1px solid var(--color-key-border);background:var(--color-surface);min-height:52px;color:var(--color-text);cursor:pointer;border-radius:14px;padding:0 24px;font-size:1.0625rem}.btn:hover{background:var(--color-primary-light)}.btn--primary{border-color:var(--color-primary);background:var(--color-primary);color:#fff;padding:0 28px;font-weight:700}.btn--primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark)}.btn--large{min-height:60px;padding:0 48px;font-size:1.25rem}.btn:focus-visible{outline:3px solid var(--color-primary-dark);outline-offset:3px}.start{text-align:center;justify-content:center;align-items:center;gap:32px;min-height:100vh}.start__title{font-size:clamp(2.5rem,8vw,4rem);font-weight:700;line-height:1.2}.practice__top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.practice__step{color:var(--color-text-sub)}.progress{color:var(--color-text-sub);align-items:center;gap:12px;display:flex}.progress__bar{background:var(--color-border);border-radius:4px;width:160px;height:8px;overflow:hidden}.progress__fill{background:var(--color-primary);width:0;height:100%}.progress__text{font-variant-numeric:tabular-nums}.prompt{background:var(--color-surface);border:1px solid var(--color-border);text-align:center;border-radius:24px;flex-direction:column;align-items:center;gap:14px;padding:36px 24px 32px;display:flex}.prompt__kana{flex-wrap:wrap;justify-content:center;gap:0 .08em;font-size:clamp(3.25rem,12vw,6rem);font-weight:700;line-height:1.1;display:flex}.prompt__kana-char{border-bottom:6px solid #0000;padding-bottom:2px}.prompt__kana-char.is-done{color:var(--color-text-done)}.prompt__kana-char.is-current{color:var(--color-primary);border-bottom-color:var(--color-primary)}.prompt__romaji{font-family:var(--font-mono);letter-spacing:.3em;text-transform:uppercase;min-height:1.6em;font-size:clamp(1.5rem,5vw,2.125rem);font-weight:500}.prompt__romaji .is-done{color:var(--color-text-done)}.prompt__romaji .is-current{color:#fff;background:var(--color-primary);border-radius:8px;padding:2px 4px 2px 12px}.prompt__hint{color:var(--color-text-sub);min-height:1.7em;font-size:1.125rem}.prompt__keyname{color:var(--color-primary-dark);font-family:var(--font-mono);font-size:1.25rem}.prompt__upcoming{color:var(--color-key-unlearned-text);min-height:1.7em;margin-top:6px}.practice__foot{border-top:1px solid var(--color-border);padding-top:18px}.practice__legend{color:var(--color-text-sub);font-size:.9375rem}.result{padding-top:40px;padding-bottom:48px}.result__head{flex-direction:column;gap:8px;display:flex}.result__step{color:var(--color-text-sub)}.result__title{font-size:clamp(1.75rem,6vw,2.75rem);font-weight:700;line-height:1.25}.result__stats{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;display:grid}.stat{background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;flex-direction:column;gap:6px;max-width:340px;padding:22px 24px;display:flex}.stat__label{color:var(--color-text-sub)}.stat__value{font-family:var(--font-mono);font-size:3rem;font-weight:600;line-height:1.3}.result__foot{border-top:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;display:flex}.result__message{max-width:560px;font-size:1.0625rem}.result__buttons{flex-wrap:wrap;gap:12px;display:flex}@media (height<=820px){.practice{gap:16px;padding-top:16px;padding-bottom:20px}.practice .prompt{gap:8px;padding:20px 24px}.practice .prompt__kana{font-size:clamp(3rem,9vh,4.5rem)}.practice .prompt__romaji{font-size:1.75rem}.practice .prompt__upcoming{margin-top:0}.practice .key{height:clamp(36px,6.5vh,52px)}.practice .finger{width:38px;height:38px}.practice__foot{padding-top:12px}}.fingers{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 40px;display:flex}.fingers__hand{align-items:center;gap:8px;display:flex}.fingers__label{color:var(--color-text-sub);margin:0 6px;font-size:.9375rem}.finger{background:var(--color-key-unlearned-bg);width:clamp(34px,9vw,44px);height:clamp(34px,9vw,44px);color:var(--color-key-unlearned-text);border:1px solid var(--color-border);border-radius:50%;justify-content:center;align-items:center;font-size:.9375rem;display:flex}.finger--on{background:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:700}