*{box-sizing:border-box}
body{margin:0;background:#eef5ed;color:#242424;font:14px/1.45 Verdana,Arial,sans-serif}
main{max-width:760px;margin:auto;padding:0 12px 32px}
h1{margin:18px 0 14px;text-align:center;color:#8e6264;font-size:27px;font-weight:600}
h2{margin:0;padding:9px 14px;background:#e6e1e1;color:#8e6264;font-size:18px;font-weight:600}
h3{margin:16px 0 9px;padding-bottom:5px;border-bottom:1px dotted #c0b0b1;color:#6f4749;font-size:15px;font-weight:600}
button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #4d99b7;outline-offset:2px}
.svg-defs,.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}
.practice,.reference{background:#fff;border-radius:3px}
.practice{padding:17px 20px 14px;text-align:center}
.question-number{min-height:78px;font-size:60px;line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#answer-form{display:flex;justify-content:center;gap:7px;max-width:390px;margin:0 auto}
#answer-input{min-width:0;flex:1;height:42px;padding:7px 10px;border:1px solid #cbd2ce;border-radius:2px;text-align:center;font-size:16px;color:#222}
#submit-button{height:42px;padding:0 13px;border:1px solid #cbd2ce;border-radius:2px;background:#f8f8f8;color:#333}
#submit-button:hover{background:#eee}
.feedback{min-height:31px;padding:6px 0 0;font-size:14px}
.feedback.good{color:#246b38}.feedback.bad{color:#ae3b32}.feedback .correct-answer{font-weight:600}
.tools{display:flex;align-items:center;gap:10px;min-height:32px;text-align:left;font-size:12px;color:#666}
#mode-select{max-width:135px;height:30px;border:1px solid #cbd2ce;border-radius:2px;background:#fff;color:#333;font-size:12px}
#skip-button{border:0;background:none;padding:6px 3px;color:#307c9b;font-size:12px}
#skip-button:hover,.sound-button:hover{color:#185971;text-decoration:underline}
.score{margin-left:auto;white-space:nowrap}
.reference{margin-top:18px;overflow:hidden}
.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:25px;row-gap:6px;padding:0 16px 20px}
.ref-section{min-width:0}
table{width:100%;border-collapse:collapse;table-layout:fixed;border:1px solid #dae2ef;font-size:13px}
tr+tr{border-top:1px solid #dae2ef}
th,td{padding:3px 8px;text-align:left;font-weight:400}
th{width:73px;color:#444;font-variant-numeric:tabular-nums}
td.word{overflow-wrap:anywhere}
td.sound-cell{width:38px;padding:0;text-align:center}
.sound-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;background:none;color:#307c9b}
.icon{width:16px;height:16px}
@media(max-width:600px){main{padding:0 10px 24px}h1{margin:12px 0;font-size:24px}.practice{padding:13px 12px 11px}.question-number{min-height:70px;font-size:54px}.reference{margin-top:12px}.reference-grid{display:block;padding:0 12px 18px}.ref-section+.ref-section{margin-top:18px}h3{margin-top:12px}}
@media(max-width:340px){.tools{gap:6px}#mode-select{max-width:114px}.score{font-size:11px}}