:root{--ink:#273e50;--muted:#8296a6;--blue:#699fca;--line:#dce9f0;--glass:rgba(255,255,255,.73)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink)}body{background:radial-gradient(ellipse at 5% 4%,#dcecf7 0,transparent 40%),radial-gradient(ellipse at 92% 85%,#e5f0f7 0,transparent 42%),#f8f9f7}button,select,textarea{font:inherit}button{cursor:pointer}header{max-width:1160px;margin:auto;padding:30px 26px 15px;display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{font-size:13px;letter-spacing:2.5px;font-weight:650}.sub{font-size:11px;letter-spacing:1.7px;color:#93a6b3;margin-top:7px}.back{text-decoration:none;color:#718da1;border:1px solid #dce8ee;border-radius:50px;padding:11px 17px;background:#ffffffa6;font-size:13px}main{max-width:1160px;padding:10px 26px 60px;margin:auto}.hero{text-align:center;margin:32px auto 28px}.eyebrow{color:#7f9db3;letter-spacing:3px;font-size:11px}.hero h1{font-size:clamp(29px,4vw,43px);font-weight:500;letter-spacing:2px;margin:13px 0}.hero p{font-size:14px;color:#8b9da9;line-height:1.8}.panel{background:var(--glass);border:1px solid #fff;box-shadow:0 14px 44px #b3c9d51d,inset 0 1px 0 #fff;border-radius:27px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 22px;flex-wrap:wrap;margin-bottom:18px}.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.controls label{font-size:12px;color:#7c92a3}.controls select{border:1px solid #d9e6ee;border-radius:12px;background:#ffffffb5;color:#456277;padding:10px 12px;outline:none}.primary{background:#739fc0;border:1px solid #739fc0;color:white;border-radius:12px;padding:11px 20px}.secondary{border:1px solid #d5e3eb;background:#ffffffa6;color:#66849a;border-radius:12px;padding:11px 17px}.hint{font-size:12px;color:#91a4b2}.practice{padding:30px 32px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}.metric{border:1px solid #e1ebf0;background:#f9fcfdb8;border-radius:18px;padding:17px 20px}.metric b{display:block;font-size:30px;font-weight:550;letter-spacing:-1px;color:#496f8b}.metric span{display:block;font-size:12px;color:#90a1ad;margin-top:3px}.prompt{min-height:133px;padding:23px 25px;background:#f7fbfd;border:1px solid #dfeaf1;border-radius:18px;font-size:21px;line-height:1.95;letter-spacing:.3px;overflow-wrap:anywhere;color:#6b8192}.prompt .done{color:#85b99f}.prompt .wrong{color:#d98b8b;background:#fff0ef;border-radius:3px}.prompt .current{background:#d6eaf9;border-bottom:2px solid #6a9bc1;border-radius:3px;color:#355b76}.typing{display:block;width:100%;min-height:100px;resize:vertical;margin-top:17px;padding:17px 19px;border-radius:16px;background:#ffffffd6;border:1px solid #d7e6ee;outline:none;color:#38586e;font-size:17px;line-height:1.6}.typing:focus{border-color:#93b8d4;box-shadow:0 0 0 4px #d5e9f455}.typing::placeholder{color:#aabac5}.keyboard-title{font-size:12px;color:#94a6b2;letter-spacing:1.5px;margin:27px 0 14px}.keyboard{display:flex;flex-direction:column;gap:7px;align-items:center}.keyrow{display:flex;gap:6px;justify-content:center;width:100%}.key{flex:1;max-width:66px;height:48px;display:grid;place-items:center;border-radius:10px;border:1px solid #dce7ee;background:#fafdff;color:#6d8293;font-size:14px;box-shadow:0 2px 0 #dbe5eb}.key.active{background:#bddbf0;border-color:#7eaccd;color:#2e5d7c;box-shadow:0 2px 0 #8cb7d4}.key.space{max-width:320px;flex:5}.footer{text-align:center;color:#a1afb8;font-size:11px;margin-top:25px;letter-spacing:.4px}.overlay{position:fixed;inset:0;background:#334f6580;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:20px;z-index:10}.overlay.show{display:flex}.result{max-width:510px;width:100%;padding:38px 32px;text-align:center;background:#fbfdfff5;border:1px solid white;border-radius:29px;box-shadow:0 30px 80px #18394b30}.result .symbol{font-size:37px}.result h2{font-weight:550;font-size:25px;margin:15px 0}.result p{font-size:14px;line-height:1.9;color:#6e899d}.result .score{display:flex;justify-content:center;gap:35px;padding:20px;margin:18px 0;background:#f1f7fa;border-radius:17px}.score b{display:block;font-size:28px;color:#4c7c9e}.score span{font-size:12px;color:#8aa0ae}.disclaimer{font-size:11px!important;color:#a2aeb7!important}@media(max-width:650px){header{padding:22px 16px 5px}main{padding:6px 14px 35px}.hero{margin:22px auto}.toolbar{padding:15px}.practice{padding:18px 14px}.metrics{gap:7px}.metric{padding:12px}.metric b{font-size:23px}.prompt{padding:15px;font-size:17px;min-height:150px}.keyrow{gap:3px}.key{height:36px;border-radius:6px;font-size:11px}.hint{display:none}}

.brand-light{font-weight:400}

.sound-controls{
 display:flex;
 justify-content:flex-end;
 gap:10px;
 margin-top:18px;
 flex-wrap:wrap;
}
.sound-controls button{
 font-size:12px;
}