:root{font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#25382e;background:#f8f9f6;font-synthesis:none;--green: #287553;--line: #dfe5dd;--orange: #b97839}*{box-sizing:border-box}body{margin:0}button,a,textarea{-webkit-tap-highlight-color:transparent}button,textarea{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #89b59e;outline-offset:4px}a{color:inherit;text-decoration:none}.app{max-width:1200px;margin:auto;padding:0 48px}header{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:650}.brand b{background:var(--green);color:#fff;width:34px;height:34px;display:grid;place-items:center;border-radius:5px;font-size:21px}.brand small{font-size:12px;font-weight:400;color:#748077;margin-left:12px}.demo-label{font-size:11px;border:1px solid var(--line);padding:5px 9px;color:#758177;border-radius:4px}.simulation-label{border-color:#9fc6aa;background:#edf5ed;color:var(--green)}.lobby{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding-top:90px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--green)}h1{font-size:62px;line-height:1.22;letter-spacing:-2px;font-weight:600;margin:25px 0}.intro p{color:#6c786f;font-size:16px;line-height:1.9}.setup{background:#fff;padding:30px;border:1px solid var(--line);border-radius:8px}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-heading span{font-size:11px;color:#748077}h2{font-size:18px;margin:0}.muted{color:#748077;font-size:12px}.keyboard-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.keyboard-option{background:#fff;border:1px solid var(--line);border-radius:5px;padding:22px 8px;display:flex;align-items:center;flex-direction:column;gap:10px}.keyboard-option.selected{border-color:var(--green);background:#f0f7f1}.keyboard-option.orange.selected{border-color:var(--orange);background:#fff7ef}.keyboard-option>span:last-child{font-size:10px;color:#748077}.system-keyboard-option{display:flex;align-items:center;gap:12px;min-height:48px;margin:-12px 0 20px;padding:10px 12px;border:1px solid var(--line);border-radius:5px;color:#435448;cursor:pointer}.system-keyboard-option input{width:18px;height:18px;margin:0;accent-color:var(--green)}.system-keyboard-option span{display:flex;flex-direction:column;gap:3px}.system-keyboard-option small{color:#748077;font-size:10px}.keyboard-picture{height:49px;width:49px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:4px}.keyboard-picture i{background:#86ae96;border-radius:2px}.keyboard-picture.full{width:76px;grid-template-columns:repeat(5,1fr)}.keyboard-picture.full i{background:#c9ac8d}.rules{display:flex;justify-content:space-between;font-size:11px;color:#748077;border-top:1px solid var(--line);padding:22px 0}.rules strong{font-size:19px;font-weight:500;color:#435448;margin-right:3px}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-radius:4px;background:var(--green);color:#fff;padding:16px 20px;font-size:14px}.primary:hover{background:#205f44}.demo-note{font-size:10px;color:#748077;text-align:center;margin:15px 0 0}.simulation-link{display:flex;min-height:40px;align-items:center;justify-content:center;color:var(--green);font-size:11px}.lobby-footer{grid-column:1/-1;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#748077;font-size:11px;padding:24px 0}.match-bar{height:70px;display:flex;align-items:center;gap:24px;font-size:12px}.clock{margin-left:auto;display:flex;align-items:center;gap:12px}.clock>span{color:#748077;font-size:11px}.clock strong{font-family:monospace;font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}.urgent{color:#c45e48}.text-button{background:transparent;border:0;color:#6c786f;font-size:12px;padding:10px}.arena{height:calc(var(--viewport-height, 100dvh) - 180px);min-height:570px;display:grid;grid-template-rows:minmax(0,2fr) minmax(0,8fr);border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;margin-bottom:22px}.reference{display:flex;flex-direction:column;justify-content:center;padding:14px 32px;background:#f0f3ed;border-bottom:1px solid var(--line);overflow:hidden}.reference-label{font-size:10px;color:#748077;margin-bottom:12px}.reference-text{font-size:21px;line-height:1.7;letter-spacing:3px;max-height:72px;overflow:hidden}.current-char{color:var(--green);background:#d6e9d9;border-bottom:2px solid var(--green);padding:3px 0}.writing{padding:22px 32px 0;display:flex;flex-direction:column;min-width:0;min-height:0}.writing-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.writing-toolbar h2{font-size:13px;font-weight:500}.key-label{font-size:10px;color:var(--green);background:#edf5ed;padding:4px 7px;margin-left:8px;border-radius:3px}.key-label.orange{color:#a36932;background:linen}.legend{font-size:10px;color:#748077;display:flex;align-items:center;gap:6px}.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;background:#b6d8bd}.legend i:last-child{background:#edb7ad;margin-left:8px}.grid-area{flex:1;min-height:85px;overflow-y:auto;padding:3px 3px 12px}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:7px}.cell{aspect-ratio:1;background:#fafbf8;border:1px solid #e1e6df;border-radius:4px;font-size:20px;position:relative;padding:0;display:grid;place-items:center}.cell.correct{background:#e7f3e6;color:#337746;border-color:#cee2cd}.cell.wrong{background:#fff0ec;color:#bd5147;border-color:#e6b5a9;text-decoration:underline;text-underline-offset:5px}.cell.active{border:2px solid var(--green);background:#fff}.cell span{display:inline-block}.caret{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:22px;width:2px;background:var(--green);animation:blink 1.1s steps(2,start) infinite}.pop{animation:pop .18s ease-out}.writing>label{font-size:10px;color:#6c786f;margin:9px 0 6px}textarea{resize:none;width:100%;min-height:46px;max-height:66px;border:1px solid var(--line);border-radius:4px;padding:10px 12px;font-size:16px;color:#314b3a;background:#fcfdfb}textarea::placeholder{font-size:12px;color:#748077}.input-help{font-size:10px;color:#748077;margin:7px 0 10px;min-height:14px}.race-progress{padding:0 0 12px}.race-progress>div{display:flex;justify-content:space-between;font-size:11px;align-items:center}.race-progress small{color:#748077;margin-left:6px}.race-progress strong{font-weight:500;color:var(--green)}progress{display:block;appearance:none;border:0;width:100%;height:4px;margin:7px 0 13px;border-radius:2px;overflow:hidden;background:#f0f3ed}progress::-webkit-progress-bar{background:#f0f3ed}progress::-webkit-progress-value{background:#74a884;transition:width .2s}progress::-moz-progress-bar{background:#74a884}.opponent{color:#748077}.race-progress progress:last-child{margin-bottom:0}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding:16px 0;gap:12px}.stats>span{display:flex;flex-direction:column;font-size:10px;color:#748077;gap:5px}.stats strong{font-size:21px;color:#445647;font-weight:500;font-variant-numeric:tabular-nums}.stats small{font-size:10px;font-weight:400;color:#748077}.countdown{display:flex;height:100%;min-height:160px;flex-direction:column;align-items:center;justify-content:center;color:#748077;font-size:12px}.countdown strong{font-size:70px;line-height:1.3;color:var(--green);animation:pop .25s ease-out}.countdown p{font-size:10px}.modal-backdrop{position:fixed;inset:0;background:#243a2e66;display:grid;place-items:center;padding:24px}.results{width:100%;max-width:420px;padding:32px;background:#fff;border-radius:8px}.results h1{font-size:30px;letter-spacing:-1px;margin:18px 0}.results .eyebrow{font-size:10px}.result-numbers{display:flex;gap:45px;padding:28px 0}.result-numbers>div{display:flex;flex-direction:column;font-size:11px;color:#748077;gap:8px}.result-numbers strong{font-size:40px;font-weight:500;color:var(--green)}.result-numbers small{font-size:14px;color:#748077}dl{font-size:12px;margin:0 0 28px}dl>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}dt{color:#748077}@keyframes pop{0%{transform:translateY(4px) scale(.85);opacity:.3}to{transform:translateY(0) scale(1);opacity:1}}@keyframes blink{to{opacity:0}}@media(min-width:900px){.arena{max-width:850px;margin-left:auto;margin-right:auto}.match-bar{max-width:850px;margin:auto}.character-grid{grid-template-columns:repeat(15,1fr)}}@media(max-width:700px){.app{padding:0 18px}header{height:64px}.brand{font-size:18px;gap:8px}.brand small{display:none}.brand b{width:29px;height:29px;font-size:18px}.lobby{grid-template-columns:1fr;gap:32px;padding-top:38px}.intro h1{font-size:44px;margin:18px 0}.intro p{font-size:13px}.setup{padding:23px}.lobby-footer{flex-direction:column;gap:10px;font-size:10px}.match-bar{height:58px;gap:8px;font-size:10px}.clock{gap:6px}.clock>span{font-size:9px}.clock strong{font-size:23px}.arena{height:calc(var(--viewport-height, 100dvh) - 134px);min-height:460px;margin-bottom:12px}.reference{padding:10px 16px}.reference-label{margin-bottom:6px;font-size:9px}.reference-text{font-size:17px;line-height:1.65;letter-spacing:2px;max-height:56px}.writing{padding:14px 14px 0}.writing-toolbar{margin-bottom:9px}.character-grid{grid-template-columns:repeat(7,1fr);gap:6px}.cell{font-size:19px}.race-progress{padding-bottom:4px}.stats{padding:11px 0}.stats strong{font-size:19px}.input-help{margin-bottom:8px}.writing-toolbar h2{font-size:12px}.writing>label{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}button:disabled{opacity:.5;cursor:not-allowed}.connection-error{color:#9c4228;background:#fff2ec;padding:12px;font-size:14px}.connection-error a{color:inherit}.waiting{max-width:620px;margin:48px auto}.waiting h1{font-size:36px;margin:20px 0 32px}.waiting label{font-size:13px;color:#68736e}.share-link{display:flex;gap:8px;margin:8px 0 24px}.share-link input{flex:1;min-width:0;border:1px solid #dce4df;background:#f6f8f6;padding:12px;font:inherit}.share-link button{white-space:nowrap}.players{display:grid;gap:12px;margin-bottom:16px}.players>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:18px;background:#f4f7f4}.players span{color:#68736e;font-size:13px}.input-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}.input-mode-options button{min-height:52px;padding:8px;border:1px solid var(--line);border-radius:4px;background:#f7f9f7;color:#435448}.input-mode-options button[aria-pressed=true]{border-color:var(--green);background:#edf5ed;color:var(--green)}.input-mode-options small{display:block;margin-top:3px;color:#748077;font-size:9px}.typing-hint{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#748077;margin:0}.native-input{flex-shrink:0;border-top:1px solid var(--line);padding-top:8px}.native-input label{display:block;margin-bottom:5px;color:#6c786f;font-size:10px}.native-input textarea{min-height:70px;max-height:110px}.native-input small{display:block;margin-top:4px;color:#748077;font-size:9px}.vrime-keyboard{flex-shrink:0;border-top:1px solid var(--line);padding-top:4px;--key-color: var(--green)}.vrime-keyboard.orange{--key-color: var(--orange)}.vrime-keyboard fieldset{border:0;padding:0;margin:0;min-width:0}.vrime-keyboard button{min-width:0;border:1px solid var(--line);border-radius:4px;background:#f5f7f3;padding:4px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.vrime-keyboard button:active{background:var(--key-color);color:#fff;transform:translateY(1px)}.preedit{min-height:22px;font-size:12px;color:var(--key-color);overflow-x:auto;white-space:nowrap}.candidate-bar{display:flex;gap:4px;height:42px;margin-bottom:5px}.candidate-bar>button{width:28px;flex-shrink:0}.candidates{display:flex;flex:1;min-width:0;overflow-x:auto;gap:4px}.candidates button{flex-shrink:0;min-width:38px;font-size:17px;background:#fff}.candidates small{display:block;font-size:9px;color:#748077}.t9-layout,.qwerty-layout{background:#eef0f2;border-radius:5px;padding:3px}.t9-layout button,.qwerty-layout button{height:42px;border:0;background:transparent;font-size:20px;color:#59616a}.t9-layout svg,.qwerty-layout svg{width:27px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.t9-layout .space-key svg,.qwerty-layout .space-key svg{width:44px}.t9-layout{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px}.t9-layout button{height:56px;font-size:clamp(16px,4.5vw,20px);background:#fff}.t9-layout svg{max-width:100%}.t9-punctuation{display:grid;grid-template-rows:repeat(4,56px);gap:4px}.t9-keys{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,56px);gap:4px}.t9-layout .backspace-key{align-self:start}.t9-layout .number-mode-key{font-size:17px}.qwerty-keys{display:grid;gap:3px}.letter-row{display:flex;justify-content:center}.qwerty-layout button{height:56px;background:#fff;box-shadow:inset -1px 0 #eef0f2,inset 0 -1px #eef0f2}.letter-row>button{flex:0 0 10%;padding:0;font-size:24px}.letter-row .shift-key,.letter-row .backspace-key{flex-basis:15%}.shift-key[aria-pressed=true]{color:var(--key-color)}.shift-key[aria-pressed=true] svg{fill:currentColor}.qwerty-bottom{display:grid;grid-template-columns:1fr 1fr 3fr 1fr 1fr;margin-top:3px}.keyboard-credit{display:block;text-align:right;color:#748077;font-size:9px;padding-top:3px}.with-keyboard .writing{padding-top:10px}.with-keyboard .grid-area{min-height:42px}.with-keyboard .race-progress{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;padding-bottom:2px}.with-keyboard .race-progress>div{grid-row:1}.with-keyboard .race-progress progress{margin:4px 0}.with-keyboard .stats{padding:5px 0}.with-keyboard .stats>span{flex-direction:row;align-items:baseline;gap:5px}.with-keyboard .stats strong{font-size:15px}.with-keyboard .input-help{margin:3px 0}.with-system-input .grid-area{min-height:74px}.keyboard-test{max-width:560px;margin:24px auto;padding:20px;border:1px solid var(--line);border-radius:6px;background:#fff}.test-heading,.test-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.test-heading h1{font-size:24px;letter-spacing:0;margin:0 0 12px}.test-layouts{display:flex;gap:8px}.test-layouts button{flex:1;padding:10px;font:inherit;background:#f5f7f3;border:1px solid var(--line);border-radius:4px}.test-layouts button[aria-pressed=true]{background:#edf5ed;border-color:var(--green);color:var(--green)}.test-output{height:clamp(100px,25dvh,240px);overflow-y:auto;padding:3px}.test-output .character-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.test-toolbar{color:#748077;font-size:12px}.test-status{min-height:16px;margin:0 0 8px;color:#748077;font-size:11px}@media(max-width:700px){.keyboard-test-app{padding:0 12px}.keyboard-test-app header{height:48px}.keyboard-test{margin:12px auto;padding:12px}}@media(max-width:700px){.with-keyboard header{height:46px}.with-keyboard .match-bar{height:42px}.with-keyboard .arena{height:calc(var(--viewport-height, 100dvh) - 100px);min-height:550px}.with-keyboard .arena:has(.t9-layout),.with-keyboard .arena:has(.qwerty-layout){min-height:690px}.with-keyboard .writing{padding:8px 8px 0}.with-keyboard .stats{font-size:9px}.with-system-input header{height:46px}.with-system-input .match-bar{height:42px}.with-system-input .arena{height:calc(var(--viewport-height, 100dvh) - 100px);min-height:550px}.with-system-input .writing{padding:8px 8px 0}}