.wto-keyboard-tester-page{--wto-subtext:var(--wto-muted)}.wto-keyboard-tester-page>main{margin:clamp(1.35rem,3vw,2.5rem) auto 3.5rem!important}.wto-keyboard-tester-page .wto-learning-intro{margin-bottom:1.15rem}.wto-keyboard-tester{width:min(100%,1120px);margin:0 auto;border:1px solid color-mix(in srgb,var(--wto-muted) 42%,transparent);border-radius:18px;padding:clamp(1rem,3vw,2rem);background:color-mix(in srgb,var(--wto-bg) 88%,#000);box-shadow:0 1.5rem 3rem #0002;outline:0}.wto-keyboard-tester:focus-visible{outline:3px solid color-mix(in srgb,var(--wto-accent) 45%,transparent);outline-offset:4px}.wto-keyboard-tester__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem}.wto-keyboard-tester h2{margin:.25rem 0 .45rem;color:var(--wto-text);font-size:clamp(1.2rem,2.3vw,1.65rem)}.wto-keyboard-tester p{max-width:38rem;margin:0;color:var(--wto-muted);line-height:1.5}.wto-keyboard-tester__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem;max-width:28rem}.wto-keyboard-tester__actions button{border:1px solid color-mix(in srgb,var(--wto-muted) 48%,transparent);border-radius:7px;padding:.58rem .72rem;background:transparent;color:var(--wto-text);font:inherit;font-size:.78rem;cursor:pointer}.wto-keyboard-tester__actions button:hover:not(:disabled){border-color:var(--wto-accent);color:var(--wto-accent)}.wto-keyboard-tester__actions button:disabled{opacity:.48;cursor:not-allowed}.wto-keyboard-tester__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin:1.15rem 0}.wto-keyboard-tester__stats div{min-width:0;padding:.75rem .85rem;border:1px solid color-mix(in srgb,var(--wto-muted) 32%,transparent);border-radius:10px;background:color-mix(in srgb,var(--wto-bg) 82%,#000)}.wto-keyboard-tester__stats span{display:block;color:var(--wto-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.wto-keyboard-tester__stats strong{display:block;overflow:hidden;margin-top:.28rem;color:var(--wto-text);font-size:.95rem;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.wto-keyboard-tester__notice{margin:0 0 .85rem;padding:.7rem .85rem;border-radius:9px;background:color-mix(in srgb,var(--wto-accent) 12%,transparent);color:var(--wto-text);font-size:.84rem}.wto-keyboard-tester__keyboard{overflow:auto;padding:clamp(.7rem,2vw,1.1rem);border:1px solid color-mix(in srgb,var(--wto-muted) 28%,transparent);border-radius:14px;background:color-mix(in srgb,var(--wto-bg) 76%,#000)}.wto-keyboard-tester__row{display:flex;justify-content:center;gap:clamp(.22rem,.65vw,.48rem);min-width:670px}.wto-keyboard-tester__row+.wto-keyboard-tester__row{margin-top:clamp(.22rem,.65vw,.48rem)}.wto-keyboard-tester__key{display:grid;place-items:center;min-width:2.6rem;height:2.72rem;border:1px solid color-mix(in srgb,var(--wto-muted) 45%,transparent);border-radius:7px;background:color-mix(in srgb,var(--wto-bg) 82%,#000);color:var(--wto-text);font-size:.73rem;line-height:1;transition:transform .08s ease,background .08s ease,color .08s ease,border-color .08s ease}.wto-keyboard-tester__key.is-active{border-color:var(--wto-accent);background:var(--wto-accent);color:var(--wto-bg);transform:translateY(2px)}.wto-keyboard-tester__key--wide{min-width:4.7rem}.wto-keyboard-tester__key--tab{min-width:3.9rem}.wto-keyboard-tester__key--caps{min-width:4.6rem}.wto-keyboard-tester__key--enter{min-width:4.8rem}.wto-keyboard-tester__key--shift{min-width:5.7rem}.wto-keyboard-tester__key--control{min-width:4rem}.wto-keyboard-tester__key--alt{min-width:3.3rem}.wto-keyboard-tester__key--space{min-width:15.5rem}.wto-keyboard-tester__log-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem}.wto-keyboard-tester__log-head h2{margin:0;font-size:1.05rem}.wto-keyboard-tester__log-head span{color:var(--wto-muted);font-size:.76rem}.wto-keyboard-tester__log{display:grid;gap:.35rem;max-height:10rem;margin:.55rem 0 0;padding:0;overflow:auto;list-style:none}.wto-keyboard-tester__log li{display:grid;grid-template-columns:5rem minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.55rem .7rem;border:1px solid color-mix(in srgb,var(--wto-muted) 23%,transparent);border-radius:8px;background:color-mix(in srgb,var(--wto-bg) 92%,#000);color:var(--wto-muted);font-size:.78rem}.wto-keyboard-tester__log li b{color:var(--wto-text)}.wto-keyboard-tester__log li.is-empty{display:block;text-align:center}.wto-keyboard-tester__log li em{font-style:normal;font-size:.72rem}@media(max-width:700px){.wto-keyboard-tester-page>main{margin:1.25rem auto 2.5rem!important}.wto-keyboard-tester__top{display:block}.wto-keyboard-tester__actions{justify-content:flex-start;max-width:none;margin-top:.85rem}.wto-keyboard-tester__stats{grid-template-columns:repeat(2,minmax(0,1fr))}.wto-keyboard-tester__key{height:2.35rem}.wto-keyboard-tester__log li{grid-template-columns:4.2rem minmax(0,1fr);gap:.45rem}.wto-keyboard-tester__log li em{grid-column:2}.wto-keyboard-tester__keyboard{margin-inline:-.2rem}}
.wto-keyboard-tester__layout{display:grid;grid-template-columns:minmax(0,1fr) 14.5rem;gap:1rem;align-items:stretch}.wto-keyboard-tester__main{min-width:0}.wto-keyboard-tester__sidebar{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid color-mix(in srgb,var(--wto-muted) 28%,transparent);border-radius:14px;background:color-mix(in srgb,var(--wto-bg) 80%,#000)}.wto-keyboard-tester__sidebar .wto-keyboard-tester__stats{grid-template-columns:1fr 1fr;gap:.5rem;margin:0}.wto-keyboard-tester__sidebar .wto-keyboard-tester__stats div{padding:.7rem}.wto-keyboard-tester__sidebar .wto-keyboard-tester__actions{display:grid;grid-template-columns:repeat(5,1fr);max-width:none;gap:.4rem}.wto-keyboard-tester__sidebar .wto-keyboard-tester__actions button{display:grid;place-items:center;min-height:2.35rem;padding:.35rem;font-family:system-ui,sans-serif;font-size:1.05rem;line-height:1}.wto-keyboard-tester__top{display:block;margin-bottom:.85rem}.wto-keyboard-tester__keyboard{display:flex;flex-direction:column;align-items:center;padding:1rem}.wto-keyboard-tester__row{justify-content:flex-start;width:max-content;min-width:0}.wto-keyboard-tester__row:nth-child(3){margin-left:-1.1rem}.wto-keyboard-tester__row:nth-child(4){margin-left:.65rem}.wto-keyboard-tester__row:nth-child(5){margin-left:1.65rem}.wto-keyboard-tester__row:nth-child(6){margin-left:2.35rem}.wto-keyboard-tester__notice{margin:.85rem 0 0;border:1px solid color-mix(in srgb,var(--wto-accent) 44%,transparent);background:color-mix(in srgb,var(--wto-accent) 16%,var(--wto-bg));color:var(--wto-text)}@media(max-width:820px){.wto-keyboard-tester__layout{grid-template-columns:1fr}.wto-keyboard-tester__sidebar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.wto-keyboard-tester__sidebar .wto-keyboard-tester__stats{width:min(100%,30rem)}.wto-keyboard-tester__sidebar .wto-keyboard-tester__actions{width:12rem}}@media(max-width:700px){.wto-keyboard-tester__sidebar{display:block}.wto-keyboard-tester__sidebar .wto-keyboard-tester__actions{width:100%;margin-top:.8rem}.wto-keyboard-tester__row{align-self:flex-start}.wto-keyboard-tester__row:nth-child(n){margin-left:0}.wto-keyboard-tester__keyboard{align-items:flex-start}}

/* Keep the tester compact: the keyboard is the visual focus, not the copy. */
.wto-keyboard-tester__top{text-align:center;margin:0 0 .65rem}.wto-keyboard-tester__top .wto-eyebrow{margin:0 0 .3rem}.wto-keyboard-tester__top h2{margin:0}.wto-keyboard-tester__help{max-width:44rem!important;margin:.7rem auto 0!important;text-align:center;font-size:.84rem;line-height:1.5}.wto-keyboard-tester__sidebar .wto-keyboard-tester__stats{grid-template-columns:1fr;gap:.5rem}.wto-keyboard-tester__sidebar .wto-keyboard-tester__stats div{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.72rem .8rem}.wto-keyboard-tester__sidebar .wto-keyboard-tester__stats span{font-size:.64rem}.wto-keyboard-tester__sidebar .wto-keyboard-tester__stats strong{margin:0;text-align:right}.wto-keyboard-tester__keyboard{padding:1.05rem 1.2rem 1.25rem;border-color:color-mix(in srgb,var(--wto-muted) 46%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--wto-bg) 68%,#000),color-mix(in srgb,var(--wto-bg) 82%,#000));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 17%,transparent),inset 0 -1px 0 #0003,0 .65rem 1.2rem #0001}.wto-keyboard-tester__row{gap:clamp(.2rem,.5vw,.38rem)}.wto-keyboard-tester__row+.wto-keyboard-tester__row{margin-top:clamp(.2rem,.5vw,.38rem)}.wto-keyboard-tester__row:nth-child(2){margin-left:0}.wto-keyboard-tester__row:nth-child(3){margin-left:.25rem}.wto-keyboard-tester__row:nth-child(4){margin-left:.65rem}.wto-keyboard-tester__row:nth-child(5){margin-left:1.15rem}.wto-keyboard-tester__row:nth-child(6){margin-left:1.75rem}.wto-keyboard-tester__key{height:2.5rem;min-width:2.38rem;border-color:color-mix(in srgb,var(--wto-muted) 52%,transparent);border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--wto-bg) 95%,#fff),color-mix(in srgb,var(--wto-bg) 76%,#000));box-shadow:0 2px 0 color-mix(in srgb,var(--wto-muted) 38%,transparent),0 4px 7px #0002;color:var(--wto-text);font-weight:600}.wto-keyboard-tester__key.is-active{box-shadow:0 0 0 2px color-mix(in srgb,var(--wto-accent) 28%,transparent),0 1px 0 color-mix(in srgb,var(--wto-muted) 35%,transparent);transform:translateY(2px)}
@media(max-width:820px){.wto-keyboard-tester__sidebar .wto-keyboard-tester__stats{width:100%}}@media(max-width:700px){.wto-keyboard-tester__help{text-align:left}.wto-keyboard-tester__key{height:2.3rem}.wto-keyboard-tester__row:nth-child(n){margin-left:0}}
.wto-keyboard-tester__key--space{min-width:18rem}

/* Compact ANSI-style rows, matching the keyboard used in the site artwork. */
.wto-keyboard-tester__row:nth-child(n){margin-left:0}
.wto-keyboard-tester__row:nth-child(3){margin-left:.35rem}
.wto-keyboard-tester__row:nth-child(4){margin-left:.7rem}
.wto-keyboard-tester__row:nth-child(5){margin-left:1.05rem}

/* Match the wider, clean keycap treatment used in the WordTypingOnline hero artwork. */
.wto-keyboard-tester__keyboard{align-items:center;padding:1.25rem 1.35rem 1.45rem}
.wto-keyboard-tester__row{width:100%;justify-content:center}
.wto-keyboard-tester__row:nth-child(n){margin-left:0}
.wto-keyboard-tester__key{min-width:clamp(2.45rem,3vw,2.9rem);height:2.9rem;border-color:#d7d1c6;border-radius:7px;background:linear-gradient(180deg,#fffdf8 0%,#ece8df 100%);box-shadow:0 3px 0 #c7c1b6,0 6px 11px #00000014;color:#26394b;font-size:.78rem;font-weight:600}
.wto-keyboard-tester__key--wide{min-width:5.25rem}.wto-keyboard-tester__key--tab{min-width:4.2rem}.wto-keyboard-tester__key--caps{min-width:4.9rem}.wto-keyboard-tester__key--enter{min-width:5.25rem}.wto-keyboard-tester__key--shift{min-width:6.2rem}.wto-keyboard-tester__key--control{min-width:4.25rem}.wto-keyboard-tester__key--alt{min-width:3.6rem}.wto-keyboard-tester__key--space{min-width:18rem}
.wto-keyboard-tester__key[data-key-code^="Arrow"]{display:none}
.wto-keyboard-tester__key.is-active{border-color:var(--wto-accent);background:linear-gradient(180deg,color-mix(in srgb,var(--wto-accent) 82%,#fff),var(--wto-accent));box-shadow:0 1px 0 color-mix(in srgb,var(--wto-accent) 55%,#000),0 0 0 2px color-mix(in srgb,var(--wto-accent) 22%,transparent);color:#fff;transform:translateY(2px)}
@media(max-width:700px){.wto-keyboard-tester__keyboard{align-items:flex-start}.wto-keyboard-tester__row{justify-content:flex-start;width:max-content}.wto-keyboard-tester__key{min-width:2.38rem;height:2.45rem}.wto-keyboard-tester__key--space{min-width:15.5rem}}

/* Home-page keyboard proportions: compact, light keycaps with restrained depth. */
.wto-keyboard-tester__keyboard{padding:1rem 1.1rem 1.1rem;background:linear-gradient(180deg,#f8f7f3,#eeece6);box-shadow:inset 0 1px 0 #fff,0 .45rem .9rem #00000012}
.wto-keyboard-tester__row{gap:clamp(.18rem,.42vw,.3rem)}
.wto-keyboard-tester__row+.wto-keyboard-tester__row{margin-top:clamp(.18rem,.42vw,.3rem)}
.wto-keyboard-tester__row{justify-content:space-between}
.wto-keyboard-tester__key{min-width:clamp(2.3rem,2.65vw,2.55rem);height:2.35rem;border:1px solid #ded9cf;border-radius:5px;background:linear-gradient(180deg,#fffefa 0%,#f0eee8 100%);box-shadow:0 1px 2px #0000001a,0 2px 0 #d7d2c8;color:#303a42;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.74rem;font-weight:500}
.wto-keyboard-tester__key--wide{min-width:5rem}.wto-keyboard-tester__key--tab{min-width:4rem}.wto-keyboard-tester__key--caps{min-width:4.65rem}.wto-keyboard-tester__key--enter{min-width:5rem}.wto-keyboard-tester__key--shift{min-width:5.8rem}.wto-keyboard-tester__key--control{min-width:4rem}.wto-keyboard-tester__key--alt{min-width:3.35rem}.wto-keyboard-tester__key--space{min-width:17.4rem}
.wto-keyboard-tester__key[data-key-code="Backquote"],.wto-keyboard-tester__key[data-key-code="Backspace"]{font-size:0}
.wto-keyboard-tester__key[data-key-code="Backquote"]::after{content:"~";font-size:.8rem}
.wto-keyboard-tester__key[data-key-code="Backspace"]::after{content:"Backspace";font-size:.7rem}
.wto-keyboard-tester__key.is-active{box-shadow:0 1px 0 color-mix(in srgb,var(--wto-accent) 55%,#000),0 0 0 2px color-mix(in srgb,var(--wto-accent) 22%,transparent)}
@media(max-width:700px){.wto-keyboard-tester__row{justify-content:flex-start}.wto-keyboard-tester__key{min-width:2.3rem;height:2.35rem}.wto-keyboard-tester__key--space{min-width:15.5rem}}

/* Match the reference keyboard's full-width rows and warm modifier-key caps. */
.wto-keyboard-tester__keyboard{padding:.9rem .4rem 1rem}
.wto-keyboard-tester__key--wide,.wto-keyboard-tester__key--tab,.wto-keyboard-tester__key--caps,.wto-keyboard-tester__key--enter,.wto-keyboard-tester__key--shift,.wto-keyboard-tester__key--control,.wto-keyboard-tester__key--alt{border-color:#ddd8cf;background:linear-gradient(180deg,#f1efea 0%,#e5e2da 100%);color:#59615f}
.wto-keyboard-tester__key--space{min-width:24.75rem}
@media(max-width:700px){.wto-keyboard-tester__keyboard{padding:1rem}.wto-keyboard-tester__key--space{min-width:15.5rem}}

/* Keep desktop key gaps stable when the tester panel becomes wider. */
@media(min-width:701px){.wto-keyboard-tester__keyboard{width:min(100%,45rem);margin-inline:auto}}