:root{--ink:#2d3436;--muted:#636e72;--green:#799881;--deep:#466b59;--mist:#e8f0ed;--warm:#d4a373;--line:#d1d8d6}*{box-sizing:border-box}body{margin:0;background:#f5f7f6;color:var(--ink);font-family:"Avenir Next","PingFang SC",system-ui,sans-serif}header,main,footer{max-width:1140px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px 50px;font-size:13px;color:var(--muted)}.brand{font-size:22px;color:var(--deep);font-weight:700;text-decoration:none}.brand small{display:block;font-size:12px;font-weight:400;margin-top:4px}main{padding:0 32px}#home{display:grid;grid-template-columns:1fr 1fr;gap:40px}.intro{padding-top:28px}.eyebrow{font-size:13px;color:var(--deep);font-weight:600}h1{font-size:clamp(38px,5vw,62px);line-height:1.25;letter-spacing:-2px;margin:24px 0}h2{font-size:23px;margin:0 0 22px}.intro>p{line-height:1.9;color:var(--muted)}.panel{background:white;border:1px solid var(--line);border-radius:24px;padding:30px}.setup{box-shadow:0 18px 45px #2d343609}fieldset{border:0;padding:0;margin:0 0 23px}legend{font-size:13px;margin-bottom:10px}.choices{display:flex;gap:12px}.choices label{flex:1;cursor:pointer;position:relative}.choices input{position:absolute;opacity:0}.choices span{display:block;border:1px solid var(--line);padding:16px 12px;border-radius:12px}.choices input:checked+span{background:var(--mist);border-color:var(--deep);box-shadow:inset 0 0 0 1px var(--deep)}.choices input:focus-visible+span{outline:3px solid var(--warm);outline-offset:3px}.choices b,.choices small{display:block}.choices small{font-size:11px;color:var(--muted);margin-top:6px}.settings{display:flex;gap:14px;margin-bottom:22px}.settings label{flex:1;font-size:13px}select{display:block;width:100%;margin-top:8px;border:1px solid var(--line);background:white;border-radius:8px;padding:10px;color:var(--ink);font:inherit}button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:12px 18px;background:var(--mist);color:var(--deep)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--warm);outline-offset:3px}.primary{background:var(--deep);color:white;font-weight:600}.primary:hover{background:#355442}.primary:disabled{background:var(--line);color:#52615b;cursor:not-allowed}.setup>.primary{width:100%}.hint{font-size:12px;color:var(--muted);line-height:1.8}.setup>.hint{text-align:center;margin-bottom:0}.history{grid-column:1/-1}.history h2{font-size:18px}.history-row{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;margin:28px 0}.intro .metrics{grid-template-columns:repeat(3,1fr);text-align:left;margin-top:45px}.metrics strong{display:block;font-size:28px;font-variant-numeric:tabular-nums}.metrics span{font-size:12px;color:var(--muted)}progress{appearance:none;width:100%;height:6px;border:0;display:block;margin-bottom:24px;background:var(--mist)}progress::-webkit-progress-bar{background:var(--mist)}progress::-webkit-progress-value{background:var(--green)}progress::-moz-progress-bar{background:var(--green)}#target{font-family:Georgia,serif;font-size:clamp(26px,4vw,38px);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;color:#636e72}#target .correct{color:var(--deep)}#target .wrong{color:#a22332;background:#ffe3e3;text-decoration:underline}#target .cursor{border-bottom:3px solid var(--warm)}#meaning{color:var(--muted);line-height:1.7;min-height:26px}#answer{display:block;width:100%;padding:15px;margin-top:9px;font:20px ui-monospace,monospace;border:1.5px solid var(--line);border-radius:10px}#feedback{min-height:24px;font-size:13px;color:var(--deep)}#keyboard{text-align:center;margin:26px auto 0}.key-row{display:flex;justify-content:center;gap:6px;margin:6px}.key{background:white;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;width:40px;padding:8px 0;font:13px ui-monospace,monospace}.key.active{background:var(--deep);color:white}.key.space{width:200px}.centered{text-align:center}#result{max-width:850px;margin:auto}#result h1{font-size:40px}#result h2{font-size:19px;margin-top:30px}.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.mistake{border-bottom:1px solid var(--line);padding:12px 0;overflow-wrap:anywhere}.mistake small{display:block;color:var(--muted);margin-top:5px}footer{text-align:center;font-size:12px;color:var(--muted);padding:40px 20px}dialog{border:1px solid var(--line);border-radius:20px;padding:30px;max-width:calc(100% - 32px)}dialog::backdrop{background:#2d343680}[hidden]{display:none!important}@media(max-width:760px){header{padding:22px}header>span{display:none}main{padding:0 18px}#home{grid-template-columns:1fr;gap:25px}.intro{padding:0}.intro h1{font-size:43px}.intro .metrics{margin-top:25px}.panel{padding:22px}.history{grid-column:auto}.metrics strong{font-size:23px}.metrics{gap:5px}.metrics span{font-size:10px}#keyboard{display:none}.history-row{flex-wrap:wrap}.toolbar{font-size:12px;flex-wrap:wrap}.toolbar button{padding:10px}#result h1{font-size:32px}}