:root{--accent:#f8f184;--accent-soft:#f8f1841f;--chart-key:#014baa;--bg:#212222;--bg-elev:#1c1c1c;--text:#ffffe3;--muted:#8a8782;--dim:#4f4c47;--border:#2a2a2a;--error:#bf2105;--shadow:0 8px 30px #0006;--ime-pinyin:#7aa2f7;--ime-shuangpin:#9ece6a;--ime-wubi:#f8f184;--ime-zhuyin:#7dcfff;--ime-cangjie:#ff9e64;--ime-zhengma:#bb9af7;--ime-yinxingma:#73daca;--ime-yuepin:#e0af68;--ime-other:#f7768e;--ime-unspecified:#6b6b6b;--font-cjk:"Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;--font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--char-size:2.64rem;--line-height:1.9;--icon-ink:31px;--rail-w:84px;--content-w:1072px}:root[data-theme=light]{--accent:#443602;--accent-soft:#7a610810;--chart-key:#014baa;--bg:#f4f0e6;--bg-elev:#fbf8f1;--text:#23211c;--muted:#6b655a;--dim:#aaa69c;--border:#ded7c7;--error:#d5290b;--shadow:0 8px 30px #3c321e24;--ime-pinyin:#2e5fbf;--ime-shuangpin:#3f7d2e;--ime-wubi:#96700a;--ime-zhuyin:#0e7490;--ime-cangjie:#c2410c;--ime-zhengma:#6d28d9;--ime-yinxingma:#0f766e;--ime-yuepin:#92400e;--ime-other:#491644;--ime-unspecified:#7b776f}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh}.app{max-width:min(1120px, calc(100% - 2 * var(--rail-w)));flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;margin:0 auto;padding:40px 24px 48px;display:flex}.brand{text-align:center;width:100%;margin-bottom:20px;position:relative}.brand-name,.brand-name:link,.brand-name:visited{font-family:var(--font-cjk);letter-spacing:.35em;color:var(--text);cursor:pointer;padding:4px 12px;font-size:1.2rem;font-weight:500;text-decoration:none;display:inline-block}.brand-name:hover{color:var(--accent)}.brand-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.top-actions{width:var(--rail-w);pointer-events:none;flex-direction:column;justify-content:space-between;align-items:center;height:100dvh;padding:6px 0;transition:opacity .15s ease-out;display:flex;position:fixed;top:0;right:0}.top-actions.hidden{opacity:0}.top-actions.hidden .icon-btn{pointer-events:none}.icon-btn{width:var(--rail-w);height:var(--rail-w);cursor:pointer;pointer-events:auto;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:background .12s ease-out;display:inline-flex}.icon-btn:hover{background:var(--accent-soft)}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn:disabled{opacity:.45;cursor:default}.icon-btn:disabled:hover{background:0 0}.icon-btn img{--icon-fill:1;width:calc(var(--icon-ink) / var(--icon-fill));height:calc(var(--icon-ink) / var(--icon-fill));display:block}#info-btn img{--icon-fill:.399}#stats-btn img{--icon-fill:.407}#profile-btn img{--icon-fill:.795}#privacy-btn img{--icon-fill:1}#mute-btn img{--icon-fill:.379}#theme-btn img{--icon-fill:.944}.screen{flex-direction:column;align-items:center;width:100%;display:flex}.screen[hidden]{display:none}.settings{flex-direction:column;align-items:center;gap:10px;width:100%;max-height:140px;margin-bottom:22px;transition:opacity .15s ease-out;display:flex;overflow:hidden}.settings.hidden{opacity:0;pointer-events:none}.settings-row{gap:10px;max-height:44px;transition:opacity .15s ease-out;display:flex;overflow:hidden}.settings-row.hidden{opacity:0;pointer-events:none}.seg{appearance:none;color:var(--muted);font-family:var(--font-cjk);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:7px 16px;font-size:1rem;transition:color .12s ease-out,background .12s ease-out}.seg:hover{color:var(--text)}.seg.active{color:var(--accent);background:var(--accent-soft)}.seg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.timer{font-family:var(--font-ui);letter-spacing:.06em;color:var(--text);width:100%;max-width:var(--content-w);text-align:left;font-variant-numeric:tabular-nums;margin-top:138px;margin-bottom:18px;font-size:2.6rem;font-weight:600;line-height:1}.viewport{width:100%;max-width:var(--content-w);height:calc(3 * var(--char-size) * var(--line-height));position:relative;overflow:hidden}.focus-warning{box-sizing:border-box;text-align:center;background:color-mix(in srgb, var(--bg) 95%, transparent);color:var(--muted);font-family:var(--font-ui);justify-content:center;align-items:center;padding:0 12px;font-size:.95rem;transition:opacity .12s ease-out;display:flex;position:absolute;inset:0}.focus-warning[hidden]{display:none}.offset{will-change:transform;font-family:var(--font-cjk);font-size:var(--char-size);line-height:var(--line-height);text-align:left;word-break:break-word;overflow-wrap:anywhere;transition:transform .15s ease-out}.offset.no-transition{transition:none}.char{color:var(--text);transition:color .12s ease-out}.char.done{color:var(--dim)}.char.incorrect{color:var(--error)}.char.cursor{box-shadow:inset 0 -3px 0 0 var(--accent)}@keyframes caret-blink{0%,to{box-shadow:inset 0 -3px 0 0 var(--accent)}50%{box-shadow:inset 0 -3px #0000}}.offset.caret-blink .char.cursor{animation:1.06s step-end infinite caret-blink}.entry{white-space:nowrap}.sep{white-space:normal}.live-stats{color:var(--muted);gap:0;margin-top:20px;font-size:.95rem;display:flex}.ime-hint{color:var(--muted);font-family:var(--font-ui);margin:10px 0 0;font-size:.85rem}.stat+.stat{border-left:1px solid var(--border);margin-left:28px;padding-left:28px}.stat b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}.results-screen{gap:26px}.results-screen:focus,.results-screen:focus-visible{outline:none}.results-context{color:var(--muted);letter-spacing:.05em;margin:50px 0 0;font-size:.9rem}.results-grid{grid-template-columns:repeat(2,minmax(180px,1fr));gap:28px 48px;margin:0;padding:0;display:grid}.result-item dt{color:var(--muted);margin-bottom:6px;font-size:.85rem}.result-item dd{font-family:var(--font-cjk);color:var(--text);margin:0;font-size:3rem}.result-item dd b{font-variant-numeric:tabular-nums;font-weight:600}.result-item .unit{color:var(--muted);margin-left:4px;font-size:.95rem}.gap-note{color:var(--accent);margin:-10px 0 0;font-size:.9rem}.retry-btn{appearance:none;border:1px solid var(--accent);color:var(--accent);font-family:var(--font-cjk);cursor:pointer;background:0 0;border-radius:8px;padding:10px 34px;font-size:1.05rem;transition:background .12s ease-out,color .12s ease-out}.retry-btn:hover{background:var(--accent);color:var(--bg)}.retry-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.load-error{flex-direction:column;align-items:center;gap:16px;margin:8px 0 24px;display:flex}.load-error[hidden]{display:none}.load-error-msg{color:var(--muted);font-family:var(--font-cjk);margin:0;font-size:1.05rem}.speed-chart-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;width:100%;margin-top:50px;padding:16px 16px 12px}.chart-legend{color:var(--muted);gap:18px;margin-bottom:10px;font-size:.85rem;display:flex}.legend-item{align-items:center;gap:6px;display:inline-flex}.dot{border-radius:50%;width:8px;height:8px;display:inline-block}.dot-hanzi{background:var(--accent)}.dot-key{background:var(--chart-key)}.speed-chart{width:100%;height:220px;display:block}.typing-input{width:2px;height:calc(var(--char-size) * var(--line-height));opacity:0;white-space:nowrap;pointer-events:none;font-family:var(--font-cjk);font-size:var(--char-size);line-height:var(--line-height);border:0;margin:0;padding:0;position:fixed;top:0;left:0;overflow:hidden}.typing-mirror{visibility:hidden;white-space:nowrap;font-family:var(--font-cjk);font-size:var(--char-size);line-height:var(--line-height);position:fixed;top:0;left:-9999px}.page{width:100%;max-width:var(--content-w);text-align:left}.page-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:14px;display:flex}.page-title{font-family:var(--font-cjk);letter-spacing:.08em;color:var(--text);margin:0;font-size:1.6rem;font-weight:600}.page-body{flex-direction:column;gap:18px;display:flex}.info-body{max-width:760px}.panel-close{appearance:none;border:1px solid var(--border);color:var(--muted);font-family:var(--font-ui);cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;padding:6px 16px;font-size:.9rem;transition:color .12s ease-out,border-color .12s ease-out,background .12s ease-out}.panel-close:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.panel-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.info-lede{color:var(--text);margin:0;font-size:1rem;line-height:1.85}.info-hint{color:var(--muted);margin:-14px 0 0;font-size:.85rem}.faq-list{border-top:1px solid var(--border);flex-direction:column;display:flex}.faq{border-bottom:1px solid var(--border)}.faq summary{cursor:pointer;font-family:var(--font-cjk);color:var(--text);padding:13px 34px 13px 2px;font-size:1rem;list-style:none;transition:color .12s ease-out;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary:hover,.faq[open] summary{color:var(--accent)}.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.faq summary:after{content:"";border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);width:7px;height:7px;transition:transform .15s ease-out;position:absolute;top:50%;right:10px;transform:translateY(-70%)rotate(45deg)}.faq[open] summary:after{border-color:var(--accent);transform:translateY(-30%)rotate(225deg)}.faq-a{padding:0 34px 16px 2px}.faq-a p{color:var(--muted);margin:0;font-size:.92rem;line-height:1.9}.faq-a .coffee-links{flex-direction:column;gap:4px;margin-top:10px;display:flex}.faq-a a{color:var(--accent);text-decoration:none}.faq-a a:hover{text-decoration:underline}.text-input{background:color-mix(in srgb, var(--bg) 55%, transparent);border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--font-ui);resize:vertical;border-radius:10px;padding:10px 12px;font-size:.95rem;transition:border-color .12s ease-out,background .12s ease-out}.text-input::placeholder{color:var(--dim)}.text-input:hover{border-color:var(--muted)}.text-input:focus{border-color:var(--accent);background:var(--bg)}.text-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.stats-toolbar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.stats-label{color:var(--muted);font-size:.9rem}.stats-select{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);font-family:var(--font-ui);border-radius:8px;padding:8px 12px;font-size:.95rem}.leaderboard{border-collapse:collapse;width:100%}.board-head th{font-family:var(--font-ui);color:var(--text);text-align:right;letter-spacing:.04em;border-bottom:1px solid var(--border);white-space:nowrap;padding:0 12px 8px;font-size:.8rem;font-weight:500}.board-head .board-col-rank,.board-head .board-col-name{text-align:left}.board-unit{color:var(--muted);font-weight:400}.board-row td{border-bottom:1px solid var(--border);text-align:right;vertical-align:middle;padding:9px 12px;transition:background .12s ease-out}.board-row:last-child td{border-bottom:none}.board-row:hover td{background:var(--accent-soft)}.board-row .board-rank{color:var(--accent);font-variant-numeric:tabular-nums;text-align:left;width:3.5em}.board-name{color:var(--text);font-family:var(--font-cjk);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.board-row .board-name-td{text-align:left}.board-hanzi{color:var(--accent);font-variant-numeric:tabular-nums;font-size:1.15rem}.board-key,.board-acc,.board-eff{color:var(--text);font-variant-numeric:tabular-nums;font-size:1rem}.board-cell-label{display:none}.board-name-cell{align-items:center;gap:.5em;min-width:0;display:flex}.board-name-cell .board-name{flex:0 auto;min-width:0}.board-profile{appearance:none;cursor:pointer;font-size:inherit;background:0 0;border:none;flex:none;align-items:center;padding:0;display:inline-flex}.board-profile img{width:1.3em;height:1.3em;display:block}.board-profile:hover img{opacity:.65}.stats-your-rank{color:var(--text);font-variant-numeric:tabular-nums;margin:0 0 0 auto;font-size:1rem}.stats-fairness-note{color:var(--muted);margin:-12px 0 0;font-size:.82rem}.scatter-hero{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:14px 18px 12px}.scatter-hero[hidden]{display:none}.scatter-title{font-family:var(--font-cjk);color:var(--text);letter-spacing:.06em;margin:0;font-size:1.15rem;font-weight:600}.scatter-sub{color:var(--muted);margin:3px 0 8px;font-size:.85rem}.scatter-chart{width:100%;height:clamp(200px,28dvh,300px);display:block}.scatter-legend{color:var(--muted);flex-wrap:wrap;gap:14px;margin-top:8px;font-size:.82rem;display:flex}.profile-head{flex-direction:column;gap:8px;display:flex}.profile-username{font-family:var(--font-cjk);color:var(--accent);letter-spacing:.04em;font-size:1.7rem;font-weight:600}.profile-section-title{font-family:var(--font-cjk);color:var(--muted);letter-spacing:.06em;margin:0 0 12px;font-size:1.05rem;font-weight:600}.pb-list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.pb-row{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:6px;padding:14px 16px 16px;display:flex}.pb-label{color:var(--muted);font-size:.85rem}.pb-speed{color:var(--text);font-family:var(--font-cjk);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:600;line-height:1.1}.pb-unit{color:var(--muted);font-family:var(--font-ui);margin-left:6px;font-size:.85rem;font-weight:400}.pb-list:not(:has(.pb-row)),.replay-list:not(:has(.replay-row)){color:var(--muted);font-size:.92rem;display:block}.replay-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.replay-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:12px 0;transition:background .12s ease-out;display:flex}.replay-row:last-child{border-bottom:none}.replay-label{color:var(--text);font-family:var(--font-cjk);font-size:1rem}.profile-editors{border-top:1px solid var(--border);flex-direction:column;gap:10px;margin-top:6px;padding-top:18px;display:flex}.profile-name-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.profile-name-row[hidden]{display:none}.profile-name-label{color:var(--muted);font-size:.9rem}.profile-name-input{flex:0 auto;width:10ch}.profile-name-count{color:var(--dim);font-variant-numeric:tabular-nums;font-size:.8rem}.profile-save-status{color:var(--muted);margin:0;font-size:.85rem}.profile-save-status:empty{display:none}.replay-row:hover{background:var(--accent-soft)}.replay-btn{appearance:none;border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:0 0;border-radius:8px;padding:7px 20px;font-size:.92rem}.replay-btn:hover{background:var(--accent);color:var(--bg)}.replay-player{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;width:100%;margin-top:18px;padding:16px}.replay-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.replay-target{font-family:var(--font-cjk);letter-spacing:.08em;word-break:break-all;min-height:3em;font-size:1.4rem;line-height:2}.replay-keystrip{flex-wrap:wrap;gap:4px;margin-top:12px;display:flex}.key-token{border:1px solid var(--border);min-width:26px;height:26px;color:var(--muted);border-radius:6px;justify-content:center;align-items:center;padding:0 6px;font-size:.8rem;display:inline-flex}.key-token.active{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}.privacy-popover{top:50%;right:calc(var(--rail-w) + 14px);background:var(--bg-elev);border:1px solid var(--border);z-index:10;width:320px;max-height:calc(100dvh - 32px);box-shadow:var(--shadow);border-radius:16px;padding:18px 20px 20px;position:fixed;overflow-y:auto;transform:translateY(-50%)}.privacy-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;display:flex}.privacy-title{color:var(--text);font-family:var(--font-cjk);letter-spacing:.06em;font-size:1.05rem;font-weight:600}.privacy-body{flex-direction:column;gap:12px;display:flex}.privacy-item{color:var(--text);cursor:pointer;border-radius:8px;align-items:flex-start;gap:10px;margin:0 -10px;padding:8px 10px;font-size:.9rem;transition:background .12s ease-out;display:flex}.privacy-item:hover{background:var(--accent-soft)}.privacy-item input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:15px;height:15px;margin-top:1px}.privacy-item-select{cursor:default;justify-content:space-between;align-items:center}.privacy-item-select select{padding:4px 8px;font-size:.9rem}.privacy-note{color:var(--muted);border-top:1px solid var(--border);margin:4px 0 0;padding-top:12px;font-size:.8rem;line-height:1.7}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (width<=560px){:root{--char-size:1.6rem;--line-height:1.9;--icon-ink:19px;--rail-w:52px}.app{max-width:none;padding:24px calc(var(--rail-w) + 6px) 32px 14px}.results-grid{grid-template-columns:1fr;gap:18px}.page-title{font-size:1.35rem}.page-head{margin-bottom:14px;padding-bottom:12px}.page-body{gap:14px}.leaderboard thead{display:none}.leaderboard tbody{flex-direction:column;display:flex}.board-row{border-bottom:1px solid var(--border);grid-template-columns:1fr 1fr;gap:4px 14px;padding:10px 0;display:grid}.board-row:last-child{border-bottom:none}.board-row td{text-align:left;border-bottom:none;justify-content:space-between;align-items:baseline;gap:8px;padding:0;display:flex}.board-row .board-rank{width:auto;display:block}.board-row .board-name-td{display:block}.board-cell-label{color:var(--muted);letter-spacing:.03em;font-size:.78rem;display:block}.board-hanzi{font-size:1.1rem}.stats-select{padding:6px 10px;font-size:.85rem}.stats-your-rank{font-size:.9rem}.scatter-chart{height:clamp(140px,22dvh,190px)}.privacy-popover{left:14px;right:calc(var(--rail-w) + 6px);width:auto}}@media (width>=561px) and (height<=620px){:root{--rail-w:70px;--icon-ink:25px}}