:root{--bg: #fbfaf7;--surface: #ffffff;--text: #1d1d1f;--muted: #55575c;--line: #d6d4cf;--accent: #1f5fae;--accent-text: #ffffff;--focus: #b3470a;--mark: #ffe08a;--right: #1d6b3a;--correct: #3f9a68;--correct-deep: #1d7a4a;--wrong: #9b2c1f;--radius: 10px;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #17181a;--surface: #212326;--text: #f1f0ec;--muted: #b5b6b9;--line: #3b3e43;--accent: #7fb0f0;--accent-text: #0c1a2c;--focus: #ffb070;--mark: #6b5310;--right: #7fd49c;--correct: #5dbb8c;--correct-deep: #7fd49c;--wrong: #ff9f8f}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font:18px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}.brand{font-weight:600;flex:1 1 auto}main{max-width:760px;margin:0 auto;padding:16px 16px 48px}h1{font-size:1.6rem;line-height:1.25;margin:12px 0 16px}h1:focus{outline:none}h2{font-size:1.15rem;margin:0 0 8px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:16px 0}.notice{background:var(--surface);border-left:4px solid var(--accent);padding:10px 14px;border-radius:4px}.notice.warn{margin:12px 16px 0;border-left-color:var(--wrong)}.note,.small,.progress{color:var(--muted);font-size:.9rem}button,select,input{font:inherit;color:inherit}button{min-height:44px;padding:8px 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);cursor:pointer}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}button.quiet{background:transparent}button:disabled{opacity:.55;cursor:default}button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}fieldset{border:none;margin:0 0 12px;padding:0}legend,.field label{font-weight:600;margin-bottom:6px;display:block}.choice{display:inline-flex;align-items:center;gap:6px;margin-right:20px;min-height:44px}.choice input{width:22px;height:22px}select{min-height:44px;padding:6px 10px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);max-width:100%}.sentence{font-size:1.5rem;line-height:1.6;margin:16px 0}.gap{display:inline-block;min-width:5em;border-bottom:3px solid var(--text);margin:0 .2em;vertical-align:baseline}.answer-label{display:block;font-weight:600;margin-top:8px}.answer-input{width:100%;max-width:420px;font-size:1.6rem;padding:8px 12px;margin-top:6px;border:2px solid var(--line);border-radius:var(--radius);background:var(--surface)}.problem:empty{display:none}.problem{color:var(--wrong);font-weight:600}.keyboard{margin-top:12px;display:grid;gap:6px;user-select:none;-webkit-user-select:none}.key-row{display:flex;justify-content:center;gap:5px}.key{flex:1 1 0;max-width:56px;min-width:0;padding:8px 0;font-size:1.2rem;touch-action:manipulation}.key-wide{flex:2 1 0;max-width:120px;font-size:1rem}.key-space{flex:4 1 0;max-width:220px;font-size:1rem}.answer.correct .answer-input{border-color:var(--correct);border-width:3px;color:var(--correct-deep);font-weight:700;padding-right:52px}.answer-field{display:block;position:relative;max-width:420px}.answer.correct .answer-field:after{content:"✓";position:absolute;right:16px;top:50%;transform:translateY(-40%);font-size:1.8rem;font-weight:800;color:var(--correct-deep);pointer-events:none}.compare-row{margin:8px 0}.compare-label{margin:0;font-size:.85rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.attempt-word{font-size:2.4rem;letter-spacing:.08em;margin:4px 0 12px;color:var(--muted)}.compare-row .marked-word{margin-top:4px}.marked-word{font-size:2.4rem;letter-spacing:.08em;margin:12px 0}mark{background:var(--mark);color:inherit;text-decoration:underline 3px;text-underline-offset:6px;border-radius:3px}.word-list{columns:2;padding-left:1.2em}.facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px}.facts dt{color:var(--muted)}.facts dd{margin:0;font-weight:600}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;margin-top:12px;font-size:.95rem}caption{text-align:left;font-weight:600;padding-bottom:6px}th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}td.right{color:var(--right);font-weight:600}td.wrong{color:var(--wrong);font-weight:600}td.muted{color:var(--muted);font-style:italic}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:480px){body{font-size:17px}.sentence{font-size:1.25rem}.facts{grid-template-columns:1fr}.word-list{columns:1}.key{font-size:1rem}}@media(prefers-reduced-motion:no-preference){button{transition:background-color .12s ease,box-shadow .12s ease}.answer.correct .answer-input{animation:pop .2s ease-out}@keyframes pop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}}.keyboard[hidden]{display:none}