:root{--color-00:#fff;--color-50:#fafafc;--color-100:#f1f1f2;--color-150:#eaebec;--color-200:#e3e5e6;--color-500:#76787c;--color-800:#252833;--color-900:#0e1018;--green-lightest:#f4fff6;--green-light:#eefff1;--green:#2bea47;--green-dark:#12df30;--green-darkest:#01c41f;--blue-light:#e8f3ff;--blue:#0069ff;--blue-dark:#005bdd;--red-light:#ffebeb;--red:#ff3a3a;--red-dark:#da1010;--yellow-light:#fffae9;--yellow:#f2be0b;--yellow-dark:#bc9200;--color-shadow:#0000001a;--transition:all .25s ease-in-out}
:root.dark-mode{--color-00:#171d2b;--color-50:#10151e;--color-100:#1b2230;--color-150:#1e2739;--color-500:#6d7790;--color-800:#d6d9e0;--color-900:#fff;--green-lightest:#003d09;--green-light:#001303;--green:#4bf364;--green-dark:#13ce2f;--green-darkest:#00ac1a;--blue-light:#e8f3ff;--blue:#0069ff;--blue-dark:#005bdd;--red-light:#400;--red:#ff3a3a;--red-dark:#ff8686;--yellow-light:#392700;--yellow:#f2be0b;--yellow-dark:#bc9200;--color-shadow:#0000001a}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--color-50);color:var(--color-800);line-height:160%;font-size:1.5rem;min-height:100vh;transition:var(--transition)}
button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:none;border:none;transition:var(--transition)}
button,select,a{cursor:pointer}
button:focus-visible,a:focus-visible{outline:none}
a{color:var(--color-primary);text-decoration:none;transition:var(--transition)}
a:hover{text-decoration:underline}
.grid{display:grid}
.grid-cols-3{grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-cols-4{grid-template-columns:repeat(4,1fr);gap:1rem}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;border-bottom:1px solid var(--color-150)}
.navbar-end{margin-left:4rem}
.navbar h1{text-align:center;font-size:2.8rem;line-height:4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{display:flex;align-items:center;gap:.4rem;font-size: 1.4rem;padding:.8rem;border-radius:.6rem;font-weight:500}
.btn:hover{background:var(--color-150)}
.btn svg{width:1em;height:1em;fill:currentColor}
.navbar .btn svg{width:2rem;height:2rem}
.menu-toggle{font-size:1.3rem;padding:.8rem 1.5rem}
.icon-dark{display:block}
.icon-light{display:none}
.dark-mode .icon-dark{display:none}
.dark-mode .icon-light{display:block}
.menu-side{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0;z-index:199}
.menu-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;opacity:0;transition:var(--transition)}
.menu-container{position:absolute;top:0;left:0;height:100vh;width:300px;background:var(--color-00);transform:translateX(-100%);transition:var(--transition);overflow-y:auto}
.menu-side.active{visibility:visible}
.menu-side.active .menu-overlay{opacity:1}
.menu-side.active .menu-container{transform:translateX(0)}
.menu-head{padding:1rem 1.5rem 0;display:flex;justify-content:flex-end}
.menu-list{list-style:none;padding:1rem 2rem}
.menu-list li{font-size:1.5rem;font-weight:500}
.menu-list a{display:block;padding:1rem 1.5rem}
.menu-list a:hover{background:var(--color-100);color:var(--color-900);border-radius:.6rem;text-decoration:none}
body.menu-open{overflow:hidden}
@media(max-width:768px) {
.grid-cols-4{grid-template-columns:repeat(2,1fr);gap:1rem}
.navbar{padding:1rem .5rem}
.navbar h1{font-size:1.8rem}
.navbar-end{margin-left:0}
.btn span{display:none}
.menu-container{width:60%}
}
.container{position:relative;z-index:1}
.ads-side{position:absolute;width:860px;top:0;left:0;bottom:0;right:0;z-index:-1;overflow:visible;margin:0 auto}
.ads-side .side-ad{position:absolute;top:0;bottom:0;z-index:2;width:300px}
.ads-side .ad-sticky{position:sticky;top:0;padding-top:3rem;cursor:pointer}
.ads-left{right:calc(100% + 30px)}
.ads-right{left:calc(100% + 30px)}
main,.main{width:860px;margin:0 auto;padding:3rem 0}
.wrapper{width:1200px;margin:0 auto}
@media(max-width:768px) {
main,.main{width:100%;margin:3rem 0;padding:0 1.8rem}
.ads-side{display:none}
.wrapper{width:100%;margin:3rem 0;padding:0 1.8rem}
}
@media screen and (max-width:1550px) and (min-width:1280px) {
.ads-side .side-ad{width:160px}
}
@media(max-width:1280px) {
.ads-side{display:none}
}
.count-item{padding:1.5rem 1rem 1.8rem;line-height:1.5;font-weight:700;background:var(--color-00);border-radius:1rem;border:1px solid var(--color-100);text-align:center}
.count-item span{display:block}
.count-item > span:first-child{font-size:2.4rem;padding:.5rem}
.count-label{font-size:1.4rem;font-weight:400;color:var(--color-500)}
#click-area{position:relative;height:30rem;margin-top:2.5rem;border-radius:1.2rem;padding:.2rem;cursor:pointer;user-select:none;background:var(--green-light) repeating-linear-gradient(135deg,transparent,transparent 3px,var(--green-dark) 3px,var(--green-dark) 8px);overflow:hidden;background-origin:border-box;background-size:1rem 1rem;color:var(--green-darkest);transition:var(--transition)}
#click-area p{height:100%;width:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700;border-radius:1rem;background:var(--green-light)}
#click-area:hover{animation:shine 2s infinite linear;color:var(--green-dark)}
#click-area.disabled{cursor:not-allowed}
#click-area.testing{animation:shine .25s infinite linear}
#click-area.testing:active{transform:scale(1)}
@keyframes shine {
0%{background-position:0 0}
100%{background-position:1rem 1rem}
}
.click-effect{position:absolute;border-radius:50%;background:var(--green-dark);width:2rem;height:2rem;animation:ripple .6s ease-in-out;transform:scale(0);pointer-events:none}
@keyframes ripple {
to{transform:scale(20);opacity:0}
}
.personal-best{margin-top:2.5rem;background:var(--color-100);padding:1rem;border-radius:.6rem;text-align:center}
.personal-best strong{color:var(--green-dark)}
.nav-duration{margin-top:2.5rem;grid-template-columns:repeat(8,1fr);gap:1rem}
.nav-duration a{background:var(--color-100);padding:1rem;border-radius:.6rem;text-align:center}
.nav-duration a:hover{background:var(--color-150);text-decoration:none}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:flex-start;justify-content:center;z-index:1000;padding-top:10vh;visibility:hidden;opacity:0;transition:all .3s ease-in-out}
.modal-overlay.show{visibility:visible;opacity:1}
.modal-content{width:60rem;background:var(--color-50);border-radius:1.5rem;box-shadow:0 10px 30px var(--color-shadow);transform:translateY(-100%);transition:transform .4s ease-in-out;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}
.modal-overlay.show .modal-content{transform:translateY(0)}
.modal-overlay.hiding .modal-content{transform:translateY(-150%)}
.modal-head{display:flex;justify-content:space-between;padding:1.5rem 2rem;align-items:center;border-bottom:1px solid var(--color-100);font-weight:500}
.score-content{padding: 2.5rem 11.5rem 3rem;text-align:center;line-height: 1.4;font-size: 1.8rem;}
.score-rank{font-size:2rem;padding: 2rem 0;}
.star-rating{font-size: 4rem;font-family: "Times New Roman",Times,serif;letter-spacing: .2rem;padding: 0 0 2rem;}
#new-high-score{color:var(--green-dark);font-weight:700;padding:1rem 0 1.5rem}
.score-btn{display:flex;align-items:center;justify-content:center;margin:1rem auto}
.score-btn .btn{padding:1rem 2rem;background:var(--color-150)}
.score-btn .btn:hover{background:var(--color-100)}
.score-btn .btn+.btn{margin-left:1rem}
@media (max-width:768px) {
#click-area{height:26rem}
.nav-duration{grid-template-columns:repeat(2,1fr)}
.modal-head{padding:1.2rem 2rem}
.modal-content{width:90%}
.score-content{padding:2rem 2rem 3.5rem;font-size:1.4rem}
#final-score{font-size:3rem}
.score-rank{font-size:1.7rem}
}
.history{margin-top:2.5rem}
.history-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.history-head h3{margin:0;font-size:1.8rem;color:var(--color-800)}
#clear-history{padding:.5rem 1.5rem;background:var(--color-100);font-size:1.4rem;border-radius:.4rem}
#clear-history:hover{background:var(--red);color:#fff}
.history-table{max-height:28rem;overflow-y:auto;border:1px solid var(--color-150);border-radius:.8rem}
.history table{width:100%;border-collapse:collapse;font-size:1.4rem}
.history thead{position:sticky;top:0;background:var(--color-100);z-index:10}
.history th{padding:1rem 1.5rem;font-weight:600;color:var(--color-800);border-bottom:1px solid var(--color-150);white-space:nowrap}
.history tbody tr{border-bottom:1px solid var(--color-100);transition:var(--transition)}
.history tbody tr:hover{background:var(--color-100)}
.history tbody tr.active td{font-weight:600}
.history td{padding:1rem 1.5rem;text-align:center}
.scrollbar::-webkit-scrollbar{width:6px}
.scrollbar::-webkit-scrollbar-track{background:transparent}
.scrollbar::-webkit-scrollbar-thumb{background:var(--color-150);border-radius:3px}
.scrollbar::-webkit-scrollbar-thumb:hover{background:var(--color-500)}
@media(max-width:768px) {
.article table{font-size:1.2rem}
.history th,.history td{padding:.8rem 1rem;font-size:1.2rem}
.history .history-date{white-space:normal}
}
.scroll-track{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:30rem;margin-top:2.5rem;border-radius:1.2rem;padding:1rem;cursor:pointer;user-select:none;background:var(--green-light);color:var(--green-darkest);border:.2rem dashed var(--green-dark);transition:var(--transition)}
.scroll-track:hover{color:var(--green-dark);background:var(--green-lightest)}
.real-time-speed{font-size:3rem;font-weight:700;transition:var(--transition)}
.scroll-track .real-time-speed{padding:2rem 0}
.scroll-track .track-msg{font-size:2rem}
.scroll-track .arrow{font-size:5rem;transition:var(--transition);opacity:.4}
.scroll-track .arrow svg{width:6rem;height:6rem}
.scroll-track .arrow.active{opacity:1;transform:scale(1.5);color:var(--red)}
.scroll-track .arrow.active svg{filter:drop-shadow(0 0 4px var(--red-light))}
#doubleClick{margin-top:2.5rem;height:30rem;border-radius:1.2rem;color:#fff;background:#0069ff;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.4rem;cursor:pointer;user-select:none}
#doubleClick h2{padding:0 0 1.5rem;font-size:2.5rem}
#doubleClick:active{transform:scale(0.99);background:#1d4ed8}
#doubleClick.detected-error{background:#f87400;animation:errorShake .4s cubic-bezier(.36,.07,.19,.97) both}
#doubleClick.detected-success{background:#00be15}
.button-indicators{display:flex;gap:1.2rem;margin:2rem 0 1rem;align-items:center;justify-content:center}
.button-indicator{padding:.8rem 1.5rem;border-radius:2rem;background:#fff3;display:flex;align-items:center;gap:.5rem}
.button-indicator.active{background:#ffff;font-weight:700;color:#000}
.double-click-info{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:1.5rem;gap:2rem}
.double-click-status{display:flex;align-items:center;gap:.8rem}
.double-click-indicator{width:1.2rem;height:1.2rem;border-radius:50%;background:#0006}
.double-click-indicator.active{background:#fff;box-shadow:0 0 10px #fff}
@keyframes errorShake {
10%,90%{transform:translate3d(-1px,0,0)}
20%,80%{transform:translate3d(2px,0,0)}
30%,50%,70%{transform:translate3d(-4px,0,0)}
40%,60%{transform:translate3d(4px,0,0)}
}
@keyframes pulse {
0%{transform:scale(1)}
50%{transform:scale(1.05)}
100%{transform:scale(1)}
}
#statusIndicator{font-size:1.2rem;margin-top:2rem;background:#0000001a;padding:.5rem 2rem;border-radius:2rem}
.double-set{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center}
.double-set .btn{padding:.8rem 1.6rem;background:var(--color-100);font-size:1.4rem}
.double-set .btn:hover{background:var(--red);color:#fff}
.double-set .settings{width:70%}
.double-set .threshold-head{display:flex;justify-content:space-between}
.double-set #thresholdSlider{width:100%;margin:1rem 0}
.double-set .threshold-value{border:1px solid var(--color-150);border-radius:.6rem;padding:0 1rem;font-size:1.2rem}
.double-set .threshold-tips{color:var(--color-500)}
@media(max-width:768px) {
#doubleClick{height:34rem}
.scroll-track{height:26rem}
.real-time-speed{font-size:2rem}
.double-click-info{gap:.5rem}
.double-set .settings{width:100%}
}
.log-box{max-height:18rem;overflow-y:auto;margin-top:2.5rem;padding:1rem 2rem;background:#1d1d22;border:.5rem solid #1d1d22;border-radius:1rem;font-size:1.4rem;color:#e2e2ff;font-family:Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.log-entry{padding:.1rem 0}
.log-success{color:#4ade80}
.test-results,.double-set{margin-top:2.5rem;border-radius:1.2rem;background:var(--color-00);padding:2rem 2.5rem 2.5rem}
.test-results-head{display:flex;justify-content:space-between;align-items:center}
.issue-item{padding:1.5rem 2rem;margin-top:1.5rem;border-radius:.8rem;background:var(--color-50)}
.issue-item.good{background:var(--green-lightest)}
.issue-item.warning{background:var(--yellow-light)}
.issue-item.error{background:var(--red-light)}
.article{padding:1rem 0}
.article h2{margin:2em 0 1.25em;font-size:1.5em;line-height:1.25;color:var(--color-900)}
.article h3{margin:1.2em 0;font-size:1.25em}
.article h4,.article h5{margin:1em 0;font-size:1em}
.article p,.article table{margin:.7em 0}
.article a{text-decoration:underline}
.article a:hover{color:var(--green-darkest)}
.article li{padding:.4em 0}
.article ul,.article ol{padding:0;padding-inline-start:1.1em}
.article li h3,.article li p{margin:.25em 0;font-size:1em}
.article table{width:100%;font-size:.9em;border-collapse:separate;border-radius:.8rem;border-spacing:0;border:1px solid var(--color-150);border-radius:1rem;overflow:hidden}
.table{max-width:100%;overflow-y:auto}
.table th,.table td{padding:.75em 1em;line-height:1.2;border-right:1px solid var(--color-150);text-align:left}
.table td{border-top:1px solid var(--color-150)}
.table th:last-child,.table td:last-child{border-right:none}
.table th{background:var(--color-100)}
.quick-nav{padding:2.5rem 0 1rem;text-align:center}
.quick-nav span{display:block;text-transform:uppercase;font-weight:600}
.quick-nav a{display:inline-block;margin:.5rem 1rem}
.article .info-box,.article .warning-box{padding:.8rem 2.2rem;margin:2rem 0;border-radius:1rem}
.article .info-box{background:var(--color-100);border-left:.4rem solid var(--color-150)}
.article .warning-box{background:var(--red-light);border-left:.4rem solid var(--red)}
footer{margin-top:3rem;text-align:center;padding:2rem 1rem;background:#000;color:#ccc;font-size:1.4rem}
footer a{color:#e5e5e6;text-decoration:none}
footer a:hover{text-decoration:underline}
.history-bar{margin:0 0 2.5rem;padding:0 0 2.5rem;display:flex;overflow:hidden;border-bottom:1px solid var(--color-150)}
.history-item{border:1px solid var(--green);color:var(--green-darkest);padding:0 .8rem;border-radius:.4rem;font-size:1.2rem;white-space:nowrap;margin-right:.6rem}
.history-item.system{border:1px solid var(--yellow-dark);color:var(--yellow-dark)}
.history-item.extra{border:1px solid var(--color-500);color:var(--color-800)}
.keyboard-tabs{display:flex;margin-top:2rem;flex-wrap:wrap}
.keyboard-tabs .tab-btn{display:flex;align-items:center;gap:.6rem;padding:1.2rem 2rem;background:var(--color-50);border:1px solid var(--color-150);border-bottom:none;border-radius:.8rem .8rem 0 0;cursor:pointer;font-size:1.4rem;color:var(--color-500);transition:var(--transition);margin-right:.5rem}
.keyboard-tabs .tab-btn:hover{background:var(--color-100);color:var(--color-800)}
.keyboard-tabs .tab-btn.active{background:var(--color-00);color:var(--color-900);border-color:var(--color-150);border-bottom:1px solid var(--color-00);margin-bottom:-1px;position:relative}
.keyboard-tabs .tab-btn svg{width:2.2rem;height:2.2rem;fill:currentColor}
.keyboard-tabs .btn-reset{margin-left:auto;margin-bottom:.8rem;padding:.5rem 1.5rem;background:var(--color-100);font-size:1.4rem;border-radius:.6rem}
.keyboard-tabs .btn-reset:hover{background:var(--red);color:#fff}
.keyboard-content{display:none;padding:3rem;background:var(--color-00);border:1px solid var(--color-150);border-radius:0 1.2rem 1.2rem 1.2rem;box-shadow:0 2px 4px #0000000d}
.keyboard-content.active{display:block}
.keyboard-frame{display:grid;grid-template-columns:15fr 3fr 4fr;gap:2rem;min-height:3rem}
.keyboard-col{display:grid;gap:.6rem;align-content:start}
.keyboard-numpad{grid-template-columns:repeat(4,1fr)}
.keyboard-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(1rem,1fr));width:100%;gap:.6rem}
.key{background:var(--color-50);border:1px solid var(--color-200);border-radius:.5rem;grid-column:span 1;height:4.4rem;line-height:1.1;display:flex;align-items:center;justify-content:center;font-weight:500;color:var(--color-800);font-size:1.2rem;box-shadow:0 2px 0 var(--color-200);position:relative;user-select:none;transition:transform 0.05s,background .1s;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.key svg{width:1.5em;height:1.5em;fill:currentColor}
.key.hide{visibility:hidden}
.u-1{grid-column:span 1}
.u-2{grid-column:span 2}
.u-3{grid-column:span 3}
.u-4{grid-column:span 4}
.u-5{grid-column:span 5}
.u-11{grid-column:span 11}
.u-14{grid-column:span 14}
.key.tested{background:var(--green);color:var(--green-light);border-color:var(--green-dark);box-shadow:0 2px 0 var(--green-dark)}
.key.active{background:var(--blue);color:var(--blue-light);border-color:var(--blue-dark);box-shadow:0 2px 0 var(--blue-dark);transform:translateY(3px);animation:keyPress .1s ease}
@keyframes keyPress {
0%{transform:scale(1)}
50%{transform:scale(0.95)}
100%{transform:scale(1)}
}
.numpad-tall{grid-row:span 2;height:9.6rem}
.numpad-0{grid-column:span 2}
.key i{position:absolute;top:-.2rem;right:-.2rem;background:var(--green-dark);color:#fff;border-radius:0 .5rem;padding:.2rem .4rem;font-size:1rem;line-height:1;display:none;justify-content:center;align-items:center;font-style:normal;transform:scale(.8)}
@media (max-width: 768px) {
.article.main{padding:0 1.8rem}
.keyboard-content{padding:2rem;width:100%;overflow-x:auto}
.keyboard-frame{width:100rem}
}
.technique-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.tech-card{background:var(--color-00);border-radius:.8rem;padding:0 2rem 1rem}
.tech-card h3+p{color:var(--green-darkest);margin:0 0 1.5rem}
@media (max-width: 768px) {
.technique-grid{grid-template-columns:1fr}
}