:root{font-family:system-ui,"Microsoft JhengHei",sans-serif;color:#24483b;background:#f5f3ed}*{box-sizing:border-box}body{margin:0}header,main{max-width:1000px;margin:auto;padding:28px}header{display:flex;justify-content:space-between;border-bottom:1px solid #dce1d8;font-size:13px}a{color:inherit;text-decoration:none}.eyebrow{letter-spacing:3px;font-size:11px;margin-top:26px;color:#77877b}h1{font-size:48px;letter-spacing:-2px;margin:20px 0 36px}h1 span{display:block;font-size:16px;font-weight:400;letter-spacing:1px;color:#7b887e;margin-top:16px}nav{display:flex;gap:8px;margin-bottom:24px}button,select,input,textarea{font:inherit}button{cursor:pointer;border:0;background:#285641;color:white;padding:13px 22px;border-radius:10px}nav button,.quiet{background:transparent;color:#607366;border:1px solid #d6ded3}nav .active{background:#285641;color:white}section{background:#fffef9;border:1px solid #dce1d8;border-radius:20px;padding:28px}.toolbar{display:flex;justify-content:space-between;gap:20px;font-size:13px;align-items:center}select{margin-left:8px;padding:9px;border:1px solid #d6ded3;background:#f7f7f0;color:#24483b;border-radius:8px}.practice{text-align:center;padding:16px 0}#progress,.muted{font-size:12px;color:#7b887e}#character{font-family:serif;font-size:116px;line-height:1.5}#slots{display:flex;justify-content:center;gap:8px;height:50px;margin-bottom:28px}.slot{background:#f0f3eb;min-width:48px;padding:8px;border-radius:8px}label{font-size:13px}form{max-width:420px;margin:auto}.inputrow{display:flex;gap:8px;margin-top:12px}input{min-width:0;width:100%;border:1px solid #bdcbbd;border-radius:10px;padding:14px;text-transform:uppercase;background:white;color:#24483b}input:focus,textarea:focus{outline:2px solid #6e927b;outline-offset:3px}#feedback{min-height:24px;font-size:14px}.actions{display:flex;justify-content:center;gap:12px}details{border-top:1px solid #e3e7de;padding-top:20px;font-size:13px}summary{cursor:pointer}#keyboard{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}#keyboard span{padding:10px;background:#f0f3eb;border-radius:6px}footer{font-size:11px;color:#7b887e;display:flex;justify-content:space-between;margin-top:24px}#timer{font-size:54px}small{font-size:13px;margin-left:6px}#passage{line-height:2.2;font-size:23px;letter-spacing:3px;max-height:250px;overflow:auto;background:#f5f6ef;padding:20px;border-radius:10px}textarea{display:block;width:100%;min-height:160px;margin-top:12px;padding:16px;border:1px solid #cbd7c8;border-radius:10px;line-height:1.8}.good{color:#267548}.bad{color:#b84b37;background:#fae8e1}.record{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid #e0e6da}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}@media(max-width:600px){header,main{padding:20px}header span{display:none}h1{font-size:40px}section{padding:18px}.toolbar{flex-wrap:wrap}nav button{padding:11px 13px}#character{font-size:100px}footer{gap:20px}#passage{font-size:20px}}
.inputrow button{white-space:nowrap;flex-shrink:0}button:focus-visible,select:focus-visible{outline:2px solid #6e927b;outline-offset:3px}