:root{font-family:system-ui,Microsoft YaHei,sans-serif;color:#202521;background:#f4f5f3;font-synthesis:none;letter-spacing:0}*{box-sizing:border-box;letter-spacing:0}body{margin:0}#app{max-width:1000px;margin:auto;padding:24px 28px 48px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:2px solid #284f39;padding-bottom:18px}h1{font-size:26px;line-height:1.35;margin:0}h2{font-size:20px;line-height:1.5;margin:12px 0 6px;overflow-wrap:anywhere}button,input,select,textarea{font:inherit}button{border:1px solid #a5afa7;background:#fff;color:#202521;padding:8px 12px;border-radius:5px;cursor:pointer;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px}button:hover{background:#e7eee7}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #2e7850;outline-offset:3px}button svg,label svg{width:18px;height:18px;flex-shrink:0}input:not([type=checkbox]):not([type=file]),textarea,select{min-width:0;max-width:100%;border:1px solid #96a399;background:#fff;border-radius:4px;padding:9px;color:#202521}input[type=checkbox]{accent-color:#267345;width:17px;height:17px;vertical-align:middle}textarea{display:block;width:100%;resize:vertical;margin-top:6px}label{font-size:14px;line-height:1.6}details{border-bottom:1px solid #c6cec7;padding:14px 0}summary{cursor:pointer;font-weight:600}details[open]>summary{margin-bottom:16px}#notice{min-height:30px;padding-top:6px;font-size:14px;color:#4c593f;overflow-wrap:anywhere}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0}.toolbar input[type=url]{flex:1}#drop{display:flex;align-items:center;gap:12px;border:1px dashed #819488;padding:16px;flex-wrap:wrap}#drop label{display:flex;align-items:center;gap:8px}#file{max-width:100%}pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:200px;overflow:auto;background:#fff;padding:12px;border:1px solid #c6cec7}.source{display:grid;grid-template-columns:1fr 2fr;gap:12px;padding:16px 0;border-bottom:1px solid #c6cec7}.source label input:not([type=checkbox]),.source select{display:block;width:100%}.article-meta{padding-top:12px}.article-meta span,.article-meta a{font-size:14px;color:#435646}#partial{color:#725319;font-size:14px}.article-nav{justify-content:flex-end;margin:8px 0}#context{height:190px;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap;overflow-wrap:anywhere;line-height:2;font-size:22px;padding:12px 8px;background:#fff;border-block:1px solid #c6cec7}.character{display:inline;border:0;border-radius:2px;font-size:inherit;line-height:inherit;padding:0 1px;min-height:0;background:none;color:#303a32}.character.completed{color:#68786c}.character.current{background:#d0ead6;color:#144a2b;box-shadow:inset 0 -3px #267345}#practice{text-align:center;padding:20px 0 8px;min-height:280px;border-bottom:1px solid #c6cec7}#currentChar{height:98px;font-size:76px;line-height:98px;font-weight:600}#hints{height:34px;display:flex;align-items:center;justify-content:center;gap:24px;font-size:22px}#hints[hidden]{display:flex;visibility:hidden}#code,#slots{font-family:ui-monospace,monospace}#code{color:#23683e}#slots{height:35px;font-size:24px;line-height:35px;color:#23683e}.input-label{display:inline-block;margin-right:8px}#typing{width:160px;height:42px;caret-color:#267345}#practice.error #slots{color:#b42323}#practice.error #typing{border-color:#b42323;background:#ffe9e7}#empty{font-size:16px;margin:8px 0}.centered{justify-content:center}#keyboard{max-width:760px;padding:16px 0;margin:auto;text-align:center}.key-row{display:flex;justify-content:center;gap:5px;margin-bottom:5px}.key{flex:0 1 70px;min-width:0;height:56px;padding:3px 1px;display:flex;flex-direction:column;gap:1px;border:1px solid #a7b3aa;border-bottom-width:3px;border-radius:5px}.key strong{font-size:16px}.key small{font-size:10px;line-height:12px;white-space:normal;overflow-wrap:anywhere;height:24px}.key.expected{background:#d0ead6;border-color:#2d7449;color:#174628}.key.wrong{background:#ffe0dc;border-color:#b42323;color:#9d2020}.progress{border-block:1px solid #c6cec7;padding:14px 0}#resume{font-family:ui-monospace,monospace;width:235px}.ai form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ai label>input:not([type=checkbox]){display:block;width:100%}#aiStatus{grid-column:1 / -1;font-size:14px;overflow-wrap:anywhere}[hidden]{display:none!important}#hints[hidden]{display:flex!important}@media (max-width: 600px){#app{padding:16px 12px 32px}h1{font-size:20px}header{align-items:flex-start}header button{font-size:13px;flex-shrink:0;padding:8px}.source,.ai form{grid-template-columns:1fr}#context{height:160px;font-size:20px}#practice{padding-top:10px}#currentChar{font-size:64px;height:82px;line-height:82px}.key-row{gap:2px}.key{height:58px}.key small{font-size:9px;line-height:10px;height:30px}.key strong{font-size:14px}.toolbar input[type=url]{flex-basis:100%}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}}