.g-click-speed-test{--g-click-speed-test-ground:#35470e;--g-click-speed-test-panel:#3b510b;--g-click-speed-test-ink:#f2f8df;--g-click-speed-test-muted:#c8d4a2;--g-click-speed-test-brass:#e8d58b;--g-click-speed-test-grid:#95aa61;display:grid;grid-template-columns:minmax(0,520px);justify-content:center;width:100%;color:var(--g-click-speed-test-ink);background:var(--g-click-speed-test-ground);font-family:var(--mg-font)}:root[data-theme=light] .g-click-speed-test{--g-click-speed-test-ground:#d5e896;--g-click-speed-test-panel:#e0eeb4;--g-click-speed-test-ink:#263507;--g-click-speed-test-muted:#455820;--g-click-speed-test-brass:#66500a;--g-click-speed-test-grid:#627b31}.g-click-speed-test *{box-sizing:border-box}.g-click-speed-test-main{min-width:0;display:flex;flex-direction:column;padding:8px 12px 10px;gap:4px}.g-click-speed-test-lengths{display:flex;align-items:center;gap:4px;min-height:44px}.g-click-speed-test-length,.g-click-speed-test-button{font:600 14px/1.1 var(--mg-font);color:var(--g-click-speed-test-ink);background:var(--g-click-speed-test-panel);border:1px solid var(--g-click-speed-test-grid);min-width:44px;min-height:44px;padding:6px 10px;border-radius:4px;cursor:pointer;touch-action:manipulation}.g-click-speed-test-length{flex:1;padding:6px 2px}.g-click-speed-test-length[aria-pressed=true]{background:var(--g-click-speed-test-ink);color:var(--g-click-speed-test-panel);border-color:var(--g-click-speed-test-ink)}.g-click-speed-test-length:focus-visible,.g-click-speed-test-button:focus-visible{outline:2px solid var(--g-click-speed-test-brass);outline-offset:1px}.g-click-speed-test-pad{position:relative;width:100%;height:386px;background:var(--g-click-speed-test-panel);border:1px solid var(--g-click-speed-test-grid);border-radius:8px;isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;cursor:crosshair;overflow:clip;outline:none;contain:strict;will-change:transform}.g-click-speed-test-pad.is-kbd:focus{outline:3px solid var(--g-click-speed-test-brass);outline-offset:2px}.g-click-speed-test-pad:focus:not(.is-kbd){outline:none}.g-click-speed-test-pad.g-click-speed-test-pressed{transform:scale(.985)}.g-click-speed-test-pad{transition:transform 60ms ease-out}.g-click-speed-test-count{height:1em;overflow:clip;contain:strict}.g-click-speed-test-digits{position:relative;display:block;will-change:transform}.g-click-speed-test-digits:before{content:attr(data-previous);position:absolute;left:0;right:0;top:-100%}.g-click-speed-test-roll-a{animation:g-click-speed-test-roll-a 80ms ease-out}.g-click-speed-test-roll-b{animation:g-click-speed-test-roll-b 80ms ease-out}@keyframes g-click-speed-test-roll-a{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes g-click-speed-test-roll-b{0%{transform:translateY(100%)}to{transform:translateY(0)}}.g-click-speed-test-canvas{width:100%;height:100%;display:block;pointer-events:none}.g-click-speed-test-topline{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;font:600 11px/1 var(--mg-font-mono);letter-spacing:.06em;pointer-events:none;color:var(--g-click-speed-test-muted)}.g-click-speed-test-time{font-variant-numeric:tabular-nums;color:var(--g-click-speed-test-ink)}.g-click-speed-test-progress{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--g-click-speed-test-grid);transform-origin:left;pointer-events:none}.g-click-speed-test-last{background:var(--g-click-speed-test-brass)}.g-click-speed-test-count,.g-click-speed-test-unit,.g-click-speed-test-tempo,.g-click-speed-test-status,.g-click-speed-test-newbest,.g-click-speed-test-key{position:absolute;left:4%;width:92%;text-align:center;pointer-events:none}.g-click-speed-test-count{top:40%;font:800 66px/.95 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.g-click-speed-test-unit{top:56%;text-transform:uppercase;font:600 11px/1 var(--mg-font-mono);letter-spacing:.14em;color:var(--g-click-speed-test-muted)}.g-click-speed-test-tempo{top:62%;font:600 16px/1 var(--mg-font);color:var(--g-click-speed-test-brass)}.g-click-speed-test-status{top:69%;font:600 15px/1.3 var(--mg-font)}.g-click-speed-test-result .g-click-speed-test-count{top:14%;font-size:76px}.g-click-speed-test-result .g-click-speed-test-unit{top:34%}.g-click-speed-test-result .g-click-speed-test-tempo{top:40%;font-size:23px}.g-click-speed-test-result .g-click-speed-test-status{top:92%;font-size:13px}.g-click-speed-test-quiet .g-click-speed-test-canvas{animation:g-click-speed-test-quiet .2s ease-out}@keyframes g-click-speed-test-quiet{0%{opacity:.5}to{opacity:1}}.g-click-speed-test-newbest{top:4%;font:600 12px/1 var(--mg-font);color:var(--g-click-speed-test-brass)}.g-click-speed-test-key{top:74%;left:37%;width:26%;height:16px;border:1px solid var(--g-click-speed-test-grid);border-bottom-width:3px;border-radius:3px;font-size:7px;line-height:10px;color:var(--g-click-speed-test-muted)}.g-click-speed-test-key.g-click-speed-test-pressed{transform:translateY(2px);color:var(--g-click-speed-test-ink);background:var(--g-click-speed-test-ground)}.g-click-speed-test-rule,.g-click-speed-test-bestline{font-size:12px;line-height:18px;margin:0;text-align:center;color:var(--g-click-speed-test-muted)}.g-click-speed-test-rule-short{display:none}.g-click-speed-test-tools{display:flex;gap:4px;justify-content:center}.g-click-speed-test-tools .g-click-speed-test-button{flex:1;padding:5px 4px;font-size:13px}.g-click-speed-test-note{font-size:11px;line-height:1.3;margin:2px 0;text-align:center;color:var(--g-click-speed-test-muted)}.g-click-speed-test-aside{display:none;padding:20px 20px 10px 0;min-width:0}.g-click-speed-test-heading{font:600 15px/1.2 var(--mg-font);margin:8px 0 10px;color:var(--g-click-speed-test-brass)}.g-click-speed-test-help{padding:6px 8px;border:1px solid var(--g-click-speed-test-grid);border-radius:4px}.g-click-speed-test-help-line{font-size:12px;line-height:1.4;color:var(--g-click-speed-test-muted);margin:0 0 10px}.g-click-speed-test-best-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--g-click-speed-test-grid);font-size:13px}.g-click-speed-test-best-table{margin-bottom:20px}.g-click-speed-test-tries{margin-left:auto;font:600 12px/1 var(--mg-font)}.g-click-speed-test-daily{font:600 14px/1 var(--mg-font)}.g-click-speed-test-dots{display:flex;gap:4px;margin-left:4px}.g-click-speed-test-dot{width:7px;height:7px;border:1px solid var(--g-click-speed-test-ink);border-radius:50%}.g-click-speed-test-used{background:var(--g-click-speed-test-brass)}.g-click-speed-test-history{border-top:1px solid var(--g-click-speed-test-grid);margin-top:4px}.g-click-speed-test-history-canvas{width:100%;height:48px}.g-click-speed-test-sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:clip}.g-click-speed-test [hidden]{display:none!important}.g-click-speed-test-edge{position:absolute;inset:0;pointer-events:none;overflow:clip;display:none;border-radius:7px}.g-click-speed-test-presto .g-click-speed-test-edge{display:block}.g-click-speed-test-edge i{position:absolute;background:var(--g-click-speed-test-brass);opacity:.35;animation:g-click-speed-test-horizontal 2s linear infinite}.g-click-speed-test-beam-0{left:0;top:0;width:25%;height:2px}.g-click-speed-test-beam-2{right:0;bottom:0;width:25%;height:2px;animation-direction:reverse!important}.g-click-speed-test-beam-1{right:0;top:0;height:25%;width:2px;animation-name:g-click-speed-test-vertical!important}.g-click-speed-test-beam-3{left:0;bottom:0;height:25%;width:2px;animation-name:g-click-speed-test-vertical!important;animation-direction:reverse!important}@keyframes g-click-speed-test-horizontal{0%{transform:translate(-100%)}to{transform:translate(400%)}}@keyframes g-click-speed-test-vertical{0%{transform:translateY(-100%)}to{transform:translateY(400%)}}@media(min-width:1000px){.g-click-speed-test{grid-template-columns:minmax(0,520px) minmax(0,320px);gap:24px}.g-click-speed-test-pad{height:420px}.g-click-speed-test-aside{display:block}}@media(max-width:370px){.g-click-speed-test-pad{height:350px}.g-click-speed-test-topline{font-size:10px}.g-click-speed-test-main{padding:6px 8px}.g-click-speed-test-note{display:none}}@media(max-width:330px){.g-click-speed-test-pad{height:276px}.g-click-speed-test-count{font-size:48px}.g-click-speed-test-result .g-click-speed-test-count{font-size:59px}.g-click-speed-test-tempo{font-size:13px}.g-click-speed-test-rule-long,.g-click-speed-test-bestline{display:none}.g-click-speed-test-rule-short{display:inline}.g-click-speed-test-history{display:none}}@media(prefers-reduced-motion:reduce){.g-click-speed-test *,.g-click-speed-test *:before,.g-click-speed-test *:after{transition-property:none!important;animation:none!important}.g-click-speed-test-edge{display:none!important}.g-click-speed-test-key.g-click-speed-test-pressed,.g-click-speed-test-pad.g-click-speed-test-pressed,.g-click-speed-test-count.g-click-speed-test-tick{transform:none}.g-click-speed-test-pad,.g-click-speed-test-count{transition:none}}@media(prefers-reduced-motion:reduce){.g-click-speed-test-result .g-click-speed-test-progress{opacity:0}}
