@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/fonts/font-0.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/fonts/font-1.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/fonts/font-2.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/fonts/font-3.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/fonts/font-4.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/fonts/font-5.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/fonts/font-6.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/fonts/font-7.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url(/fonts/font-8.woff2) format('woff2');
}

:root{color-scheme:light;--ink:#18243a;--muted:#697587;--line:#e1e6ee;--blue:#3157de;--green:#c0efd3;--font:'DM Sans',system-ui,sans-serif;--heading:'Manrope',var(--font)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#f8f9fc;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,.keyboard-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:4px}select:focus,select:focus-visible{outline:none;box-shadow:none;border-color:var(--blue)}button{border:1px solid transparent}button:disabled{cursor:default}button,select,a,summary{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:8px;left:8px;z-index:10;padding:10px 18px;background:var(--ink);color:#fff;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.site-header{background:#fff;border-bottom:1px solid var(--line)}.header-inner{max-width:1256px;margin:auto;padding:21px 32px;display:flex;align-items:center;gap:48px}.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--heading);font-size:23px;font-weight:800;letter-spacing:-1.1px;white-space:nowrap}.brand-mark{display:grid;place-items:center;background:var(--ink);color:#a0eac0;width:32px;height:32px;border-radius:8px;font:700 23px var(--font);letter-spacing:0}.brand-light{font-weight:500}.brand-dot{color:var(--blue)}nav{display:flex;gap:28px;font-size:14px;font-weight:550;margin-left:auto}nav a:hover{color:var(--blue)}.private-label{font-size:13px;color:var(--muted);display:flex;gap:7px;align-items:center}.private-label svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}main{max-width:1256px;padding:0 32px;margin:auto}.tester{padding-top:34px}.title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{font-size:11px;letter-spacing:1.6px;font-weight:700;color:#778093;margin:0 0 9px}h1,h2,h3{font-family:var(--heading);line-height:1.25}h1{font-size:36px;font-weight:750;letter-spacing:-1.5px;margin:0 0 8px}h1 span{color:var(--blue)}.intro{margin:0;color:var(--muted);font-size:15px}.listening-button{font-size:13px;display:flex;align-items:center;gap:9px;border:1px solid #d6e7df;border-radius:30px;background:#eff8f2;padding:9px 14px;color:#2c6244;white-space:nowrap}.listening-button:hover{background:#e3f2e9}.listening-button[aria-pressed=false]{background:#f2f3f6;border-color:var(--line);color:var(--muted)}.status-dot{width:6px;height:6px;border-radius:50%;background:#3c9465}.listening-button[aria-pressed=false] .status-dot{background:#8b93a1}.pause-icon{margin-left:4px;opacity:.65}.workbench{background:#fff;border:1px solid #dce2ed;border-radius:15px;box-shadow:0 8px 32px #19274905;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 20px;border-bottom:1px solid var(--line)}.mode-tabs{display:flex;gap:3px;padding:3px;background:#f0f2f7;border-radius:8px}.mode-tabs button{border-radius:6px;color:#6a7587;background:transparent;padding:7px 13px;font-size:14px;font-weight:550;white-space:nowrap}.mode-tabs button[aria-selected=true]{color:var(--ink);background:#fff;box-shadow:0 1px 4px #15203713}.layout-controls{display:flex;gap:8px}select{border:1px solid #dce2ec;padding:8px 28px 8px 10px;border-radius:6px;background:#fff;color:#48536a;font-size:13px;min-height:37px;cursor:pointer}select:hover{border-color:#a9b4c7}.mode-instruction{min-height:58px;display:flex;align-items:center;gap:9px;padding:12px 23px}.instruction-number{font-size:20px;color:#8b98ac}.mode-instruction p{margin:0;font-size:13px;color:#647187}.text-button{padding:0;border:0;background:transparent;color:var(--blue);font-size:13px;font-weight:550;white-space:nowrap}.mode-instruction .text-button{margin-left:auto}.text-button:hover{text-decoration:underline;text-underline-offset:4px}.text-button[aria-pressed=true]{color:#1b6347}.keyboard-scroll{padding:0 22px;overflow:auto;scrollbar-width:thin;scrollbar-color:#b2bac9 transparent}.keyboard-case{display:grid;grid-template-columns:minmax(0,15fr) minmax(0,3fr) minmax(0,4fr);gap:14px;padding:18px 16px 15px;background:#e8ecf2;border:1px solid #d3dae5;border-bottom-width:3px;border-radius:11px;min-width:820px;box-shadow:inset 0 2px 1px #ffffffc0;--key-height:42px;--key-gap:5px}.keyboard-case.size-tkl{grid-template-columns:minmax(0,15fr) minmax(0,3fr);max-width:950px;margin:auto}.keyboard-case.size-compact{grid-template-columns:minmax(0,1fr);max-width:780px;min-width:600px;margin:auto}.key-block{display:grid;grid-template-rows:repeat(6,var(--key-height));gap:var(--key-gap)}.key-main{grid-template-columns:repeat(60,minmax(0,1fr));column-gap:0}.key-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--key-gap)}.key-numpad{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--key-gap)}.keycap{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:0;--key-edge:#cdd4df;--key-depth:#c2cbd9;border:1px solid var(--key-edge);border-bottom:3px solid var(--key-depth);border-radius:5px;background:linear-gradient(#fff,#f7f8fb);color:#39465b;font-size:12px;font-weight:550;line-height:1.15;user-select:none;box-shadow:0 1px 1px #14284806;transition:background-color .12s,transform .09s,color .12s,border-color .12s,opacity .18s;cursor:default}.key-main .keycap{margin-right:var(--key-gap)}.keycap .secondary{font-size:10px;line-height:1.4;color:#8c95a5;margin-bottom:3px}.keycap.small{font-size:10px}.keycap.checked{background:#d3f3df;--key-edge:#a9dbbc;--key-depth:#94c9a8;border-color:var(--key-edge);border-bottom-color:var(--key-depth);color:#285a3e}.keycap.pressed{background:#385cdb;--key-edge:#294cc7;--key-depth:#294cc7;border-color:var(--key-edge);border-bottom-color:var(--key-depth);color:#fff;transform:translateY(2px);box-shadow:0 0 0 2px #385cdb10}.keycap.pressed .secondary{color:#dfe7ff}.keycap.checked:not(.pressed) .secondary{color:#4d7d5f}.keycap.just-pressed{animation:key-arrive .17s ease-out}.keycap.iso-enter{clip-path:polygon(0 0,100% 0,100% 100%,20% 100%,20% 49%,0 49%);z-index:1}.keyboard-case.highlight-untested .keycap.checked:not(.pressed){opacity:.35}.keyboard-case.highlight-untested .keycap:not(.checked){border-color:#5976de;color:#2346b2}.keycap .key-count{position:absolute;bottom:3px;right:4px;font-size:9px;opacity:.65}.keyboard-bottom{display:flex;align-items:center;justify-content:space-between;padding:15px 24px 18px;font-size:12px;color:#7a8495}.legend{display:flex;gap:19px}.legend>span{display:flex;align-items:center;gap:6px}.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;border:1px solid #cdd4df}.swatch.idle{background:#f6f7fa}.swatch.checked{background:#c2ebd2;border-color:#a9d4ba}.swatch.pressed{background:#385cdb;border-color:#385cdb}.platform-control{display:flex;align-items:center;gap:3px}.platform-control>span{margin-right:7px}.platform-control button{background:#fff;color:#69768d;border-radius:4px;font-size:12px;padding:2px 8px}.platform-control button.active{background:#eaf0fe;color:#3556ba}.summary-strip{display:grid;grid-template-columns:1.4fr .85fr .9fr 1.4fr auto;align-items:center;gap:20px;padding:21px 24px;background:#fcfdff;border-top:1px solid var(--line)}.stat-label{font-size:10px;font-weight:700;letter-spacing:1px;color:#8992a2;margin-bottom:5px}.stat-value{font-family:var(--heading);font-size:26px;font-weight:750;line-height:1.2;letter-spacing:-.8px}.stat-denominator{font-size:17px;color:#9aa3b1;font-weight:500}.coverage-percent{float:right;font-size:11px;color:#738198;margin-top:9px;font-weight:550;letter-spacing:0}.progress-track{height:3px;background:#e6eaf0;margin-top:10px;border-radius:5px;overflow:hidden}.progress-track>div{height:100%;background:#53b882;width:0;transition:width .25s ease}.last-key{display:flex;align-items:center;gap:9px;min-height:34px}.last-key kbd{border:1px solid #dbe2ec;border-bottom-width:2px;padding:4px 8px;border-radius:5px;min-width:32px;text-align:center;font:550 14px var(--font);background:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis}.last-key>span{font-size:11px;color:#7b879b;overflow-wrap:anywhere}.reset-button{border:1px solid #dce2ec;background:#fff;color:#536077;padding:8px 11px;border-radius:6px;font-size:12px}.reset-button:hover{border-color:#8f9db4;color:var(--ink)}.reset-button span{font-size:17px;margin-right:4px}.test-footnote{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:13px 1px;color:#8a93a2;font-size:12px}.test-footnote p{margin:0}.small-check{color:#59916f;margin-right:6px}.test-footnote .text-button{font-size:12px;color:#687994}.test-footnote .text-button span{margin-left:6px}.notice{font-size:13px;color:#526583;min-height:0}.notice:not(:empty){margin:12px 0;padding:10px 14px;background:#edf2fe;border-radius:6px}.event-details{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.event-details summary{padding:14px 0;font-size:13px;font-weight:550;cursor:pointer;list-style:none}.event-details summary:before{content:'+';font-size:18px;margin-right:10px;color:#8592a5}.event-details[open]>summary:before{content:'−'}.event-details summary>span{font-weight:400;font-size:12px;color:#95a0b1;margin-left:10px}.event-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;padding:8px 0 15px}.event-grid span{display:block;font-size:12px;color:#7c879a}.event-grid strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}.event-details>p{font-size:12px;color:#7c879a;margin:0 0 17px}.how-section{padding:66px 0 56px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:29px}.section-heading h2{font-size:28px;letter-spacing:-1px;margin:0}.section-heading>p{font-size:14px;color:var(--muted);max-width:245px;margin:0}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}.guide-grid article+article{border-left:1px solid var(--line);padding-left:33px}.guide-number{color:#5770ae;font-size:10px;font-weight:700;letter-spacing:1.4px}.guide-grid h3{font-size:18px;letter-spacing:-.4px;margin:15px 0 10px}.guide-grid p{font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.75}.guide-action{border:0;background:transparent;padding:0;color:#3458be;font-size:13px;font-weight:600}.guide-action span{margin-left:8px}.help-section{display:grid;grid-template-columns:1fr 1.55fr;gap:85px;padding:58px 0;border-top:1px solid var(--line)}.help-intro h2{font-size:31px;letter-spacing:-1px;margin:12px 0 18px}.help-intro>p:not(.eyebrow){font-size:15px;line-height:1.8;color:var(--muted);max-width:310px}.honest-note{display:flex;gap:11px;margin-top:27px;max-width:315px;font-size:13px;color:#8190a4}.honest-note>span{font-family:serif;font-size:17px;margin-top:1px}.honest-note p{margin:0}.faq-list>details{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}.faq-list>details:first-child{border-top:1px solid var(--line)}.faq-list summary{padding:19px 30px 19px 0;font-size:15px;font-weight:550;cursor:pointer;list-style:none;position:relative;line-height:1.5}.faq-list summary:after{position:absolute;right:3px;content:'+';font-size:20px;color:#7c899d}.faq-list details[open] summary:after{content:'−'}.answer{font-size:14px;line-height:1.8;color:var(--muted);padding:0 23px 18px 0}.answer p{margin:0 0 10px}.answer p:last-child{margin:0}.limitations{padding:26px 30px;margin-bottom:52px;background:#edf1f7;border:1px solid #e2e7ee;border-radius:10px}.limitations h2{font-size:17px;margin:0 0 10px;letter-spacing:-.3px}.limitations>p{font-size:13px;line-height:1.8;color:#788396;margin:0;max-width:1020px}.limitations .source-links{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;margin-top:16px;color:#526887}.source-links a:hover{text-decoration:underline}footer{border-top:1px solid var(--line);max-width:1192px;margin:auto;padding:26px 0 32px;display:flex;align-items:center;gap:25px}footer .brand{font-size:19px}footer .brand-mark{width:26px;height:26px;border-radius:7px;font-size:19px}footer p{font-size:12px;color:#95a0b0;margin:0}footer>span{margin-left:auto;color:#98a1b0;font-size:11px}.mode-results{padding:18px 24px;border-top:1px solid var(--line);background:#f1f5ff;font-size:14px}.mode-results p{margin:0;color:#5f7192}.mode-results strong{color:#2e4fab}.mode-results .observed-keys{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}.observed-keys kbd{font:500 12px var(--font);border:1px solid #ccd8f1;border-radius:4px;padding:3px 7px;background:#fff}.repeat-stats{display:flex;gap:28px;margin-top:12px;font-size:13px}.repeat-stats b{font-size:20px;margin-right:4px}.mobile-note{display:none}.noscript{position:fixed;bottom:0;padding:15px;background:#fff4dc;width:100%;z-index:20;text-align:center}.size-compact .key-block{grid-template-rows:repeat(5,var(--key-height))}
@keyframes key-arrive{from{transform:translateY(0)}to{transform:translateY(2px)}}
@supports (interpolate-size:allow-keywords){details::details-content{height:0;overflow:clip;opacity:0;transition:height .26s ease,opacity .22s ease,content-visibility .26s allow-discrete}details[open]::details-content{height:auto;opacity:1}}
@media(min-width:1440px){.tester{padding-top:45px}.title-row{margin-bottom:30px}.keyboard-case{--key-height:46px}.how-section{padding-top:74px}}
@media(max-width:1050px){.header-inner{gap:25px}.private-label{display:none}.toolbar{flex-wrap:wrap;gap:12px}.layout-controls{margin-left:auto}.summary-strip{gap:14px;grid-template-columns:1.3fr .75fr .85fr 1.25fr auto}.keycap{font-size:11px}.help-section{gap:40px}.last-key{flex-wrap:wrap;gap:3px}.last-key>span{font-size:10px}.keyboard-case{--key-height:40px}}
@media(max-width:750px){.header-inner{padding:17px 20px}.brand{font-size:21px}nav{gap:19px;font-size:12px}.header-nav>a:first-child{display:none}main{padding:0 18px}.tester{padding-top:26px}.title-row{align-items:flex-start;flex-wrap:wrap;gap:17px;margin-bottom:18px}h1{font-size:29px;letter-spacing:-1px}.eyebrow{font-size:10px;letter-spacing:1.2px}.intro{font-size:14px}.listening-button{font-size:12px;padding:7px 12px}.mobile-note{display:block;color:#7c889b;font-size:12px;line-height:1.6;margin:0 0 16px}.toolbar{padding:12px;display:block}.mode-tabs{display:flex;justify-content:space-between}.mode-tabs button{font-size:12px;flex:1;padding:8px 6px}.layout-controls{margin-top:12px;gap:8px}.layout-controls select:first-of-type{flex:1;min-width:0}select{font-size:12px;min-height:36px}.mode-instruction{padding:14px 13px;flex-wrap:wrap;gap:4px 8px}.mode-instruction p{font-size:12px;flex:1}.mode-instruction .text-button{font-size:12px;margin-left:23px}.keyboard-scroll{padding:0 12px 9px}.keyboard-case{min-width:800px;--key-height:39px;padding:12px;gap:12px}.keyboard-bottom{padding:12px;align-items:flex-start;flex-wrap:wrap;gap:10px}.legend{gap:13px;font-size:10px}.platform-control{font-size:11px}.summary-strip{padding:16px 14px;grid-template-columns:1.3fr 1fr 1fr;gap:20px 18px}.stat-value{font-size:23px}.stat-label{font-size:9px;letter-spacing:.75px}.stat-denominator{font-size:13px}.last-key-stat{grid-column:span 2}.last-key{flex-wrap:nowrap;gap:8px}.reset-button{font-size:11px;justify-self:end}.test-footnote{align-items:flex-start;flex-direction:column;gap:8px;font-size:11px}.test-footnote .text-button{font-size:12px}.event-grid{grid-template-columns:repeat(3,1fr);gap:16px}.event-details>p{font-size:12px}.how-section{padding:42px 0}.section-heading{display:block;margin-bottom:25px}.section-heading h2{font-size:24px}.section-heading>p{margin-top:12px;max-width:none;font-size:14px}.guide-grid{grid-template-columns:1fr;gap:23px}.guide-grid article+article{padding:22px 0 0;border-left:0;border-top:1px solid var(--line)}.guide-grid h3{margin-top:8px}.guide-grid p{margin-bottom:13px}.help-section{grid-template-columns:1fr;gap:20px;padding:35px 0}.help-intro h2{font-size:27px}.help-intro h2 br{display:none}.help-intro>p:not(.eyebrow),.honest-note{max-width:none}.honest-note{margin-top:13px}.faq-list summary{font-size:14px;padding:17px 28px 17px 0}.answer{font-size:14px}.limitations{padding:21px 20px;margin-bottom:28px}.limitations .source-links{gap:8px 15px}footer{margin:0 18px;padding:22px 0;flex-wrap:wrap;gap:10px 20px}footer p{display:none}footer>span{font-size:10px}.repeat-stats{gap:15px;flex-wrap:wrap}.mode-results{padding:15px;font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after,*::details-content{animation:none!important;transition:none!important}}

.mode-results .mode-note{font-size:13px;color:#7385a2;margin-top:14px}.repeat-reset{margin-top:10px}.other-keys{padding:12px 24px;font-size:13px;border-top:1px solid var(--line);margin:0;color:#627492}.unfocused{color:#788497;border-color:#dce2eb;background:#f4f6f9}.keycap{font-size:14px}.keycap.small{font-size:11px}.guide-grid p,.answer{font-size:15px}.eyebrow,.guide-number{font-size:12px}.mode-tabs button{font-size:14px}.layout-controls select{font-size:14px}.mode-instruction p{font-size:14px}.mode-instruction .text-button{font-size:13px}@media(max-width:750px){.keycap{font-size:13px}.keycap.small{font-size:11px}.layout-controls select{font-size:12px}.mode-tabs button{font-size:13px}.mode-instruction p{font-size:13px}}

.keyboard-scroll:focus-visible{outline:none}.keyboard-scroll:focus-visible .keyboard-case{border-color:#617bd5}

@media(max-width:750px){.mode-instruction p{flex-basis:calc(100% - 32px)}.mode-instruction .text-button{margin-left:27px;margin-top:4px}.keyboard-bottom:before{content:attr(data-swipe-hint);display:block;width:100%;font-size:12px;color:#6b7890}}

/* Keep the working instrument, controls, and results together in a laptop viewport. */
.header-inner,main{max-width:1344px}.header-inner{padding:13px 24px}main{padding:0 24px}.tester{padding-top:18px}.title-row{margin-bottom:17px}.title-row .eyebrow{display:none}h1{font-size:32px;margin-bottom:4px}.toolbar{padding:10px 18px;gap:14px}.platform-prominent{padding:3px;background:#eef1f7;border-radius:8px;flex-shrink:0}.platform-prominent button{display:flex;align-items:center;justify-content:center;text-align:center;gap:7px;padding:7px 12px;font-size:14px;font-weight:600;background:transparent;border-radius:6px}.platform-prominent button>span{font-size:18px;line-height:1}.platform-prominent button.active{background:var(--ink);color:#fff}.mode-tabs button{padding:7px 10px;font-size:13px}.layout-controls select{font-size:13px}.mode-instruction{min-height:0;padding:9px 22px}.mode-instruction p{font-size:13px}#test-panel[data-mode=keys] .mode-instruction{display:none}.history-bar{display:flex;align-items:center;gap:16px;height:49px;padding:0 22px}.history-title{flex-shrink:0;font-size:10px;letter-spacing:1px;font-weight:700;color:#8792a5}#key-history{display:flex;align-items:center;gap:7px;flex:1;min-width:0;overflow:hidden;height:35px;white-space:nowrap}#key-history kbd{flex-shrink:0;padding:3px 9px;background:var(--info-soft);border:1px solid var(--info-line);border-radius:5px;color:var(--info-ink);font:500 13px var(--font);line-height:1.5;max-width:160px;overflow:hidden;text-overflow:ellipsis}.history-empty{font-size:12px;color:#8a95a7}.history-bar .text-button{font-size:12px;color:#7a879d}.keyboard-case.size-macbook{grid-template-columns:minmax(0,1fr)}.half-key{height:calc((var(--key-height) - var(--key-gap))/2);font-size:12px;border-bottom-width:2px}.half-top{align-self:start}.half-bottom{align-self:end}.optional-key:not(.checked){border-style:dashed}.keyboard-bottom{padding:10px 24px;gap:16px}.keyboard-bottom .text-button{font-size:12px;margin-left:auto}#fn-note{font-size:11px;color:#7c899e}.summary-strip{padding:13px 24px;gap:20px}.stat-label{margin-bottom:3px}.progress-track{margin-top:7px}.test-footnote{margin:9px 1px}.event-details{margin-top:19px}
@media(min-width:1100px){.title-row>div{display:flex;align-items:baseline;gap:20px}h1{margin:0}.intro{font-size:14px}.toolbar>.mode-tabs{margin-right:auto}}
@media(min-width:751px) and (max-height:800px){.header-inner{padding-top:10px;padding-bottom:10px}.tester{padding-top:12px}.title-row{margin-bottom:12px}.history-bar{height:43px}.keyboard-case{padding-top:13px;padding-bottom:12px}.keyboard-bottom{padding-top:8px;padding-bottom:8px}.summary-strip{padding-top:10px;padding-bottom:10px}.test-footnote{margin-top:7px;margin-bottom:7px}.event-details{margin-top:14px}}
@media(min-width:751px) and (max-width:1100px){.toolbar{gap:9px;padding:9px 14px}.platform-prominent button{padding:7px 9px}.mode-tabs button{padding:7px 8px;font-size:12px}.layout-controls{gap:5px}.layout-controls select{font-size:12px;padding-left:7px}.keyboard-bottom{flex-wrap:wrap;gap:8px 18px}.keyboard-bottom .text-button{margin-left:auto}.keyboard-case{--key-height:42px}}
@media(max-width:750px){.header-inner{padding:12px 18px}.tester{padding-top:17px}main{padding:0 14px}.title-row{gap:10px;margin-bottom:12px}h1{font-size:27px}.intro{font-size:13px}.toolbar{display:flex;flex-wrap:wrap;padding:10px;gap:10px}.platform-prominent{width:100%;justify-content:center}.platform-prominent button{flex:1;justify-content:center;font-size:14px}.mode-tabs{width:100%;order:2}.layout-controls{width:100%;margin:0;order:3}.history-bar{gap:9px;height:43px;padding:0 12px}.history-title{font-size:9px;letter-spacing:.5px}.history-empty{font-size:11px}.history-bar .text-button{font-size:11px}.keyboard-case{--key-height:42px}.keyboard-bottom{padding:8px 12px;gap:8px}.keyboard-bottom:before{margin-bottom:1px}.keyboard-bottom .text-button{margin-left:0}#fn-note{font-size:10px;order:3;width:100%}.summary-strip{padding:12px 14px;gap:12px 14px}.test-footnote{gap:5px}.mobile-note{margin-bottom:10px;font-size:11px}.event-details{margin-top:14px}}
@media(pointer:fine){.mobile-note{display:none}}


/* Own the chevron position instead of inheriting platform-specific select chrome. */
.layout-controls select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 5.5 5 5 5-5' fill='none' stroke='%2364758b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.layout-controls select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: none;
}
@media (forced-colors: active) {
  .layout-controls select {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }
}

/* Global prototype: shared controls retain a single, visible border. */
.styled-select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 5.5 5 5 5-5' fill='none' stroke='%2364758b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
.styled-select:focus{outline:none;box-shadow:none;border-color:var(--blue)}.header-inner nav{align-items:center;gap:20px}.header-inner #language{font-size:13px;max-width:145px}.header-inner .private-label{font-size:12px}
.key-state{position:absolute;top:2px;right:3px;font:700 10px/1 system-ui;pointer-events:none}.half-key .key-state{top:1px;font-size:8px}.keycap.excluded:not(.pressed){border-style:dashed;opacity:.5}.swatch{display:inline-grid;place-items:center;width:16px;height:16px;flex:0 0 16px;padding:0;border-radius:4px;line-height:0;font-style:normal}.swatch svg{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.swatch.pressed{color:white}.keyboard-case.size-laptop,.keyboard-case.size-small65,.keyboard-case.size-small75{grid-template-columns:minmax(0,15fr) minmax(0,1fr);max-width:1100px;margin:auto}.size-laptop .key-nav,.size-small65 .key-nav,.size-small75 .key-nav{grid-template-columns:1fr}.size-small65 .key-block{grid-template-rows:repeat(5,var(--key-height))}
.detail-deck{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}.detail-deck .event-details{margin-top:12px}.detail-deck .event-details>p,.settings-grid{font-size:13px;color:var(--muted)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:10px 0 16px}.settings-grid label,.settings-grid>div{display:flex;flex-direction:column;gap:6px}.settings-grid select{max-width:100%;min-width:0}.settings-grid>div{grid-column:1/-1;align-items:flex-start}.settings-grid .reset-button{font-size:12px}.key-customization{margin:18px 0}.key-customization p{font-size:13px;color:var(--muted)}.included-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:270px;overflow:auto;padding:7px 0 12px}.included-keys label{display:flex;gap:7px;align-items:center;font-size:11px;overflow-wrap:anywhere}.included-keys input{appearance:none;width:16px;height:16px;flex-shrink:0;border:1px solid #8793aa;border-radius:3px;margin:0;display:grid;place-items:center}.included-keys input:checked{background:var(--blue);border-color:var(--blue)}.included-keys input:checked:before{content:'✓';color:white;font:700 11px system-ui}.included-keys input:focus-visible{outline:none;border-color:#081d57}.key-list{display:flex;flex-wrap:wrap;gap:8px;max-height:280px;overflow:auto;list-style:none;padding:0 0 12px;margin:5px 0;font-size:12px}.key-list li{padding:4px 7px;border:1px solid var(--line);border-radius:5px;background:white}.key-list kbd{font:500 11px var(--font)}.footer-links{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:12px;margin:auto}.footer-links a:hover{text-decoration:underline}.document-page{max-width:960px;padding-top:38px;padding-bottom:70px}.back-link{display:inline-block;color:var(--blue);font-size:14px;margin-bottom:35px}.document-page h1{font-size:42px;margin:0 0 22px}.document-intro{font-size:19px;color:var(--muted);line-height:1.75;margin-bottom:40px}.document-page section{border-top:1px solid var(--line);padding:24px 0}.document-page section h2{font-size:23px;margin:0 0 16px;letter-spacing:-.5px}.document-page section p,.document-page section li{font-size:16px;line-height:1.85;color:#56647a}.document-page section li{margin-bottom:10px}.document-sources{display:flex;flex-wrap:wrap;gap:9px 15px;font-size:12px;margin-top:20px;align-items:baseline}.document-sources span{color:var(--muted)}.document-sources a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.document-page+footer{margin:0 auto;padding-left:24px;padding-right:24px}
dialog{border:1px solid var(--line);border-radius:16px;max-width:800px;width:calc(100% - 36px);max-height:85vh;padding:26px;background:#fff;color:var(--ink);opacity:0;transform:translateY(12px);transition:opacity .22s,transform .22s,display .22s allow-discrete,overlay .22s allow-discrete}dialog[open]{opacity:1;transform:translateY(0)}dialog::backdrop{background:#15233b77;backdrop-filter:blur(3px);opacity:0;transition:opacity .22s,display .22s allow-discrete,overlay .22s allow-discrete}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;transform:translateY(12px)}dialog[open]::backdrop{opacity:0}}.report-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.report-head h2{font-size:25px;margin:0}.report-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:24px}#readable-report pre{font:14px/1.8 var(--font);white-space:pre-wrap;overflow-wrap:anywhere;margin:24px 0;color:#4c5a70}
@media(min-width:1100px){html[lang=ru] .title-row>div{display:block}html[lang=ru] .title-row .intro{margin-top:4px}.toolbar .layout-controls select{max-width:240px}.platform-prominent button{padding:7px 9px;font-size:13px}}
@media(max-width:1050px){.detail-deck{grid-template-columns:1fr;gap:0}.header-inner .private-label{display:none}}
@media(max-width:750px){.header-inner{gap:12px}.header-inner nav{gap:10px}.header-inner nav>a{display:none}.header-inner #language{max-width:118px;font-size:12px}.footer-links{margin:12px 0;gap:12px}.footer-links a:first-child{display:block}.document-page{padding-top:25px}.document-page h1{font-size:32px}.document-intro{font-size:17px}.document-page section h2{font-size:21px}.document-page section p,.document-page section li{font-size:15px}.included-keys{grid-template-columns:repeat(3,minmax(0,1fr))}.keyboard-case.size-laptop,.keyboard-case.size-small65,.keyboard-case.size-small75{min-width:800px}html[lang=ru] .keyboard-bottom:before{content:attr(data-swipe-hint)}.settings-grid{grid-template-columns:1fr}.report-head h2{font-size:20px}dialog{padding:20px}}
@media(forced-colors:active){.styled-select{appearance:auto;background-image:none}.key-state{forced-color-adjust:auto}.keycap.checked{border-style:double}.keycap.pressed{border-style:dashed}}
@media print{body:has(#report-dialog[open])>*:not(#report-dialog){display:none!important}#report-dialog[open]{position:static;max-width:none;width:100%;max-height:none;overflow:visible;border:none;margin:0;padding:0;display:block}.report-actions,#close-report{display:none!important}#readable-report pre{font-size:11pt}dialog::backdrop{display:none}}

/* Prelaunch readability and keyboard navigation audit. */
:root{--muted:#59677b}
.eyebrow,.keyboard-bottom,.stat-label,.stat-denominator,.coverage-percent,.last-key>span,.test-footnote,.test-footnote .text-button,.event-details summary>span,.event-grid span,.event-details>p,.honest-note,.limitations>p,footer>span,.mobile-note,.history-title,.history-empty,.history-bar .text-button,#fn-note,.mode-results .mode-note{color:var(--muted)}
.keycap .secondary{color:#59677b}.keycap.checked:not(.pressed) .secondary{color:#356345}.keycap.excluded:not(.pressed){opacity:1;background:#f2f3f6;color:#59677b;border-style:dashed}.keyboard-case.highlight-untested .keycap.checked:not(.pressed){opacity:1}.keyboard-case.highlight-untested .keycap:not(.checked):not(.excluded):not(.pressed):not(.optional-key){--key-edge:var(--review-edge);--key-depth:var(--review-depth);background:var(--review-soft);border-color:var(--key-edge);border-bottom-color:var(--key-depth);color:var(--review-ink)}
.language-control{display:flex;align-items:center;gap:5px}.language-control button{padding:5px 8px;min-width:32px;min-height:37px}.language-control button span{margin:0;font-size:17px}.language-control button:disabled{color:#707a8a;background:#f4f5f8}.header-inner nav{gap:14px}.legend>span[hidden]{display:none}.event-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.map-suggestion{padding:12px 14px;margin-bottom:16px;background:#edf2fe;border-radius:6px;font-size:13px;color:var(--ink)}.map-suggestion p{margin:0 0 10px}.reference-link{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.report-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;font-size:14px;margin:24px 0}.report-summary dt{color:var(--muted)}.report-summary dd{margin:0;font-weight:600}.report-key-list{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;padding:0}#readable-report{font-size:14px;line-height:1.8}#readable-report section{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}#readable-report h3{margin:0 0 10px;font-size:17px}#readable-report p{color:var(--muted)}#readable-report a{color:var(--blue);text-decoration:underline}#report-title:focus{outline:none}#report-copy-status{font-size:13px;color:var(--muted)}#report-copy-text{width:100%;font:13px/1.7 var(--font);border:1px solid #a9b4c7;border-radius:6px;padding:12px;color:var(--ink);background:white}#report-copy-text:focus{outline:none;box-shadow:none;border-color:var(--blue)}
@media(max-width:750px){.header-inner{flex-wrap:wrap}.header-inner nav{gap:7px}.header-inner #language{max-width:112px}.language-control{gap:4px}.report-summary{grid-template-columns:1fr}.report-summary dd{margin-bottom:8px}.included-keys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{#report-copy-status,#report-copy-fallback{display:none!important}#readable-report section{break-inside:avoid}}
.contact-form{display:grid;gap:8px;max-width:720px;padding:28px 0}.contact-form label{font-size:14px;font-weight:600}.contact-form input,.contact-form textarea,#contact-draft{font:15px/1.7 var(--font);color:var(--ink);background:#fff;border:1px solid #a9b4c7;border-radius:6px;padding:10px 12px;width:100%;resize:vertical}.contact-form input:focus,.contact-form textarea:focus,#contact-draft:focus{outline:none;box-shadow:none;border-color:var(--blue)}.contact-form select{font-size:15px;max-width:100%;margin-bottom:18px}.contact-form .field-hint{font-size:12px;color:var(--muted);margin:0 0 18px}.contact-form>button{justify-self:start;font-size:14px;padding:9px 17px}.contact-form [role=status],#contact-copy-status{font-size:14px;color:var(--muted)}#contact-draft-section .reset-button{margin-top:15px}.document-links a{color:var(--blue);text-decoration:underline}.document-page section[hidden]{display:none}

/* Stable instrument geometry: reserve content before scripts and fonts arrive. */
html{scrollbar-gutter:stable}
.header-inner{display:grid;grid-template-columns:minmax(196px,1fr) 264px 244px;gap:28px;min-height:60px}
.header-inner>.brand{width:196px}.header-inner nav.header-nav{margin:0;display:grid;grid-template-columns:124px 124px;gap:16px;align-items:center}
.header-nav>.help-link{font-size:14px;white-space:nowrap}.header-inner .private-label{width:244px;min-width:0;justify-content:flex-end;font-size:12px;line-height:20px;white-space:nowrap}.private-label svg{flex:none}
.language-control{position:relative;display:block;width:124px;isolation:isolate;z-index:20}
.language-control .language-button{width:124px;height:38px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;background:#fff;border:1px solid #a9b4c7;border-radius:6px;font-size:13px;color:#48536a;text-align:left;line-height:20px}
.language-button svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}.language-button[aria-expanded=true] svg{transform:rotate(180deg)}
.language-button:focus-visible{outline:none;box-shadow:none;border-color:var(--blue)}
.language-menu{position:absolute;top:calc(100% + 8px);right:0;width:190px;display:grid;gap:4px;padding:10px;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px #18243a18;opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .18s ease,visibility 0s}
.language-menu[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
.language-menu-title{margin:0;padding:2px 10px 6px;color:var(--muted);font-size:12px;font-weight:500}.language-menu a{display:flex!important;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:7px 10px;border-radius:5px;font-size:14px;line-height:22px}.language-menu a:hover,.language-menu a[aria-current=page]{color:var(--ink);background:#eef2fb}.language-selected{visibility:hidden}.language-menu a[aria-current=page] .language-selected{visibility:visible}
.title-row,.title-row>div,html[lang=ru] .title-row>div{min-width:0}.title-row>div,html[lang=ru] .title-row>div{display:block;flex:1}.title-row{min-height:66px}.title-row h1{line-height:40px;margin:0}.title-row .intro,html[lang=ru] .title-row .intro{font-size:14px;line-height:22px;margin:4px 0 0}
.listening-button{width:264px;flex:none;min-height:44px;display:grid;grid-template-columns:6px minmax(0,1fr) 8px;gap:9px;align-items:center}.status-dot,.pause-icon{flex:none}#listen-label{min-width:0;text-align:center;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px}.toolbar>.mode-tabs{margin:0;justify-self:start}.layout-controls{margin:0}.layout-controls #layout{width:205px}.layout-controls #size{width:156px}.mode-tabs button{min-width:88px}.platform-prominent button{min-width:90px}
.keyboard-scroll{--key-height:42px;--key-gap:5px;--board-top:18px;--board-bottom:15px;--scroll-space:0px;min-height:calc(6 * var(--key-height) + 5 * var(--key-gap) + var(--board-top) + var(--board-bottom) + 4px + var(--scroll-space));overflow-anchor:none}
.keyboard-case,.keyboard-case[class*="size-"]{--key-height:inherit;--key-gap:inherit;min-width:800px;max-width:none;margin:0;min-height:calc(6 * var(--key-height) + 5 * var(--key-gap) + var(--board-top) + var(--board-bottom) + 4px);padding-top:var(--board-top);padding-bottom:var(--board-bottom)}
.keyboard-case[aria-busy=true]{min-height:calc(6 * var(--key-height) + 5 * var(--key-gap) + var(--board-top) + var(--board-bottom) + 4px);display:grid;grid-template-columns:1fr;place-items:center}
.keyboard-loading{color:var(--muted);font-size:14px;line-height:24px}
.history-title{width:86px}.history-empty{overflow:hidden;text-overflow:ellipsis}
.keyboard-bottom{min-height:36px}.legend{min-width:0;flex-wrap:wrap;gap:6px 15px}.legend>span{white-space:nowrap}.legend>span[hidden]{display:flex;visibility:hidden}#fn-note[hidden],#highlight[hidden]{display:block;visibility:hidden}.keyboard-bottom #highlight{min-width:132px;text-align:right}
.summary-strip{grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr) minmax(0,.9fr) minmax(0,1.4fr) 128px}.summary-strip>div{min-width:0}.stat-value{font-variant-numeric:tabular-nums}.last-key{display:grid;grid-template-columns:minmax(60px,104px) minmax(0,1fr);gap:9px;min-height:36px}.last-key kbd{height:34px;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.last-key>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-strip #reset{width:128px;white-space:nowrap;justify-self:end}
.test-footnote #download{min-width:152px;text-align:right}.notice,.notice:not(:empty){min-height:40px;margin:0;padding:8px 12px;line-height:24px}.notice:empty{padding:0;background:transparent}.other-keys{max-height:60px;overflow:auto}.mode-feedback{border:1px solid var(--line);background:#f1f5ff;border-radius:8px;overflow:hidden;margin:12px 0}.mode-feedback .mode-instruction{display:flex;padding:12px 20px;min-height:48px}.mode-feedback .mode-results{min-height:142px}.mode-feedback[hidden]{display:none}.observed-keys{min-height:32px;max-height:70px;overflow:auto}.repeat-stats{font-variant-numeric:tabular-nums}
@media(min-width:1440px){.keyboard-scroll{--key-height:46px}}
@media(min-width:751px) and (max-height:800px){.keyboard-scroll{--board-top:13px;--board-bottom:12px}.header-inner{padding-top:9px;padding-bottom:9px}}
@media(max-width:1190px){.toolbar{grid-template-columns:auto auto}.toolbar>.mode-tabs{justify-self:end}.toolbar>.layout-controls{grid-column:1/-1;justify-content:flex-end}.layout-controls #layout{width:220px}.layout-controls #size{width:170px}}
@media(max-width:1050px){.header-inner{grid-template-columns:minmax(196px,1fr) 264px;gap:20px}.header-inner .private-label{display:none}}
@media(max-width:750px){.header-inner{grid-template-columns:minmax(0,1fr) 112px;gap:12px;min-height:62px;padding:12px 18px}.header-inner>.brand{width:auto}.header-inner nav.header-nav{grid-template-columns:112px;gap:0}.header-nav>.help-link{display:none}.language-control,.language-control .language-button{width:112px}.title-row{display:grid;grid-template-columns:1fr;gap:10px}.title-row h1{font-size:27px;line-height:34px}.title-row .intro,html[lang=ru] .title-row .intro{font-size:13px;line-height:21px;min-height:42px}.listening-button{width:100%;min-height:40px}.toolbar{display:flex;gap:10px}.toolbar>.mode-tabs{width:100%}.mode-tabs button{min-width:0}.toolbar>.layout-controls{width:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:8px}.layout-controls #layout,.layout-controls #size{width:100%;min-width:0}.keyboard-scroll{--board-top:12px;--board-bottom:12px;--scroll-space:9px}.keyboard-case{--key-height:inherit}.history-title{width:57px}.keyboard-bottom{display:grid;grid-template-columns:1fr auto;gap:8px;min-height:124px}.keyboard-bottom:before,.keyboard-bottom .legend,#fn-note{grid-column:1/-1}.keyboard-bottom:before{margin:0}.keyboard-bottom .legend{min-height:16px}.keyboard-bottom #highlight{grid-column:1/-1;text-align:left;min-height:19px}#fn-note{min-height:16px;order:0}.summary-strip{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:12px 14px}.last-key-stat{grid-column:span 2}.last-key{grid-template-columns:64px minmax(0,1fr);gap:8px}.summary-strip #reset{width:100%;min-width:0;font-size:10px;padding:8px 4px}.stat-label{min-height:29px}.test-footnote p{min-height:36px}.test-footnote #download{text-align:left}.event-details summary>span{display:block;margin:4px 0 0 20px;min-height:20px}.mode-feedback .mode-results{min-height:200px}}
@media(max-width:350px){.header-inner{padding-inline:14px;grid-template-columns:minmax(0,1fr) 100px;gap:8px}.header-inner .brand{font-size:19px;gap:7px}.header-inner .brand-mark{width:28px;height:28px;flex:none}.header-inner nav.header-nav{grid-template-columns:100px}.language-control,.language-control .language-button{width:100px}.language-control .language-button{padding-inline:9px}.legend{gap:6px 10px}}
@media(prefers-reduced-motion:reduce){.language-menu,.language-menu[hidden],.language-button svg{transition:none}}

/* Keywise navigation and compact, non-wrapping test controls. */
.header-inner{grid-template-columns:minmax(196px,1fr) auto;gap:22px}
.header-inner nav.header-nav{grid-template-columns:auto 60px 42px;gap:12px;justify-self:end}.header-nav>.help-link{display:inline-flex;align-items:center;gap:7px}.help-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.language-control,.language-control .language-button{width:60px}.language-control .language-button{padding:0 8px;gap:4px;justify-content:center;text-align:center}.language-control .language-button .language-full{display:none}.language-control .language-button .language-short{display:inline;font-size:12px;font-weight:600}.language-button svg{width:12px;height:12px}
.language-short{display:none}.site-menu-control{position:relative;z-index:21;width:42px}.site-menu-button{width:42px;height:38px;display:grid;place-items:center;border:1px solid #a9b4c7;border-radius:6px;background:#fff;color:var(--ink)}.site-menu-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.site-menu-button:focus-visible{outline:none;border-color:var(--blue)}
.site-menu{position:absolute;right:0;top:calc(100% + 8px);width:270px;padding:14px;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px #18243a18;display:grid;gap:4px;opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .18s ease,visibility 0s}.site-menu[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}.site-menu p{font-size:12px;color:var(--muted);padding:0 10px;margin:0 0 6px}.site-menu a{display:block;padding:9px 10px;font-size:14px;border-radius:5px}.site-menu a:hover{background:#eef2fb}.platform-prominent{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.platform-prominent button{white-space:nowrap;min-width:0;padding:7px 9px;font-size:13px}.mode-tabs{min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.mode-tabs button{min-width:0;padding:7px 10px;font-size:13px}.toolbar{gap:12px}.toolbar>.mode-tabs{width:100%;max-width:340px}
.keyboard-bottom{display:grid;grid-template-columns:minmax(250px,1fr) auto auto;gap:14px;min-height:48px;padding:6px 22px}.keyboard-bottom .legend{gap:6px 10px;font-size:10px}.keyboard-bottom #highlight{min-width:0;font-size:12px}
.test-tips{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;height:36px}.tip-copy{min-width:0}.tip-kicker{display:block;font-size:9px;letter-spacing:.9px;line-height:12px;font-weight:700;color:var(--muted)}#tip-link{display:block;font-size:12px;line-height:20px;color:#314b83;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:underline;text-underline-offset:3px}.tip-controls{display:flex;gap:3px}.tip-controls button{display:grid;place-items:center;width:27px;height:30px;border:1px solid transparent;border-radius:4px;background:transparent;color:#4c5d78;font-size:14px}.tip-controls button:hover{background:#eef2fb}.tip-controls button:focus-visible{outline:none;border-color:var(--blue)}
@media(max-width:1190px){.toolbar>.mode-tabs{max-width:none;width:340px}.keyboard-bottom{grid-template-columns:minmax(0,1fr) auto}.keyboard-bottom .legend{display:flex;grid-column:1/-1;grid-row:2}}
@media(max-width:1050px){.header-inner{grid-template-columns:minmax(196px,1fr) auto}}
@media(max-width:750px){.header-inner{grid-template-columns:minmax(0,1fr) 110px;gap:8px}.header-inner nav.header-nav{grid-template-columns:60px 42px;gap:8px}.header-nav>.help-link{display:none}.language-control,.language-control .language-button{width:60px}.language-control .language-button{padding:0 8px;gap:4px;justify-content:center;text-align:center}.language-control .language-button .language-full{display:none}.language-control .language-button .language-short{display:inline;font-size:12px;font-weight:600}.language-button svg{width:12px;height:12px}.language-menu{right:-50px}.header-inner .brand{font-size:20px;gap:7px}.header-inner .brand-mark{width:28px;height:28px;flex:none}.platform-prominent{width:100%;height:42px}.platform-prominent button{font-size:14px;padding:6px;min-width:0;line-height:20px}.toolbar>.mode-tabs{width:100%;max-width:none;height:43px}.mode-tabs button{font-size:12px;padding:7px 3px;line-height:18px;white-space:normal;overflow-wrap:normal}.keyboard-bottom{grid-template-columns:1fr;gap:5px;min-height:127px;padding:8px 12px}.keyboard-bottom:before{grid-column:1;margin:0;font-size:10px}.test-tips{grid-column:1;height:48px}.tip-kicker{font-size:9px}#tip-link{white-space:normal;font-size:12px;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tip-controls button{width:30px;height:36px}.keyboard-bottom .legend{display:flex;font-size:9px;min-height:15px;gap:6px}.keyboard-bottom .legend>span[hidden]{display:none}.keyboard-bottom #highlight{grid-column:1;min-height:20px;font-size:12px}.summary-strip .stat-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.site-menu,.site-menu[hidden]{transition:none}}

/* Larger legends within the existing key geometry. Half-height arrows and
   multi-character JIS labels retain room around their text. */
.key-main .keycap{font-size:16px;font-weight:600;container-type:inline-size}
.key-main .keycap.small{font-size:13px}
.key-main .keycap:where(:not(.letter-key):not(.modifier-symbol):not(.wide-legend))>.key-label{font-size:min(1em,50cqi)}
.key-main .keycap.small>.key-label{font-size:min(1em,18cqi)}
.keycap .secondary{font-size:12px;line-height:1.2;margin-bottom:2px;font-weight:600}
.key-main .keycap.modifier-symbol{font-size:20px;line-height:1}
.key-main .keycap.wide-legend{font-size:12px}
.key-main .keycap.half-key{font-size:13px}
/* One clear, larger capital per letter key; key dimensions remain unchanged. */
.keycap.letter-key{font-size:clamp(1rem,1.35vw,1.25rem);font-weight:600;line-height:1.15}

/* Keywise: editorial pages retain the instrument's type and keycap vocabulary. */
.guide-hub,.guide-article{max-width:1256px;padding:26px 32px 64px}.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin:0 0 35px}.breadcrumbs a:hover{text-decoration:underline}.guide-hub-title{max-width:820px;margin-bottom:38px}.guide-hub-title h1{font-size:54px;letter-spacing:-2px;margin:0 0 16px}.guide-hub-title>p:last-child{font-size:20px;line-height:1.7;color:var(--muted);max-width:730px}.guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.guide-card{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .18s,background-color .18s}.guide-card:hover{border-color:#657ab2;background:#fafbff}.guide-category{font-size:11px;letter-spacing:1.1px;font-weight:700;color:#3d609a}.guide-card h2{font-size:23px;line-height:1.3;letter-spacing:-.5px;margin:18px 0 12px}.guide-card p{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 26px}.guide-card-link{margin-top:auto;font-size:14px;font-weight:600;color:#3157b0;display:flex;justify-content:space-between}.guide-editorial{margin-top:40px;max-width:850px;border-top:1px solid var(--line);padding-top:28px}.guide-editorial h2{font-size:27px}.guide-editorial p{font-size:16px;color:var(--muted);line-height:1.85}.guide-editorial>a{color:var(--blue);font-size:14px}.guide-article-head{max-width:930px}.guide-article-head h1{font-size:44px;line-height:1.16;letter-spacing:-1.4px;margin:0 0 20px}.guide-byline{font-size:13px;color:var(--muted)}.guide-byline a{text-decoration:underline}.guide-answer{font-size:20px;line-height:1.75;color:#40516a;max-width:870px;margin:24px 0}.guide-figure{margin:30px 0 48px}.guide-figure img{width:100%;height:auto;display:block;border-radius:14px}.guide-figure figcaption{font-size:12px;color:var(--muted);line-height:1.8;margin-top:12px;max-width:900px}.guide-figure figcaption span{display:block}.guide-figure figcaption a{color:var(--blue);text-decoration:underline}.guide-reading-grid{display:grid;grid-template-columns:240px minmax(0,760px);gap:52px}.guide-toc{align-self:start;position:sticky;top:25px}.guide-toc p{font-size:10px;letter-spacing:1.2px;color:var(--muted);font-weight:700}.guide-toc nav{display:grid;gap:12px;margin:20px 0 30px;font-size:14px;line-height:1.5}.guide-toc nav a:hover{color:var(--blue)}.guide-return{font-size:14px;color:var(--blue)}.guide-body section{margin:0 0 44px;scroll-margin-top:25px}.guide-body h2{font-size:29px;margin:0 0 20px;letter-spacing:-.65px}.guide-body p,.guide-body li{font-size:17px;line-height:1.85;color:#42516a}.guide-steps{padding-left:25px}.guide-steps li{padding-left:9px;margin:0 0 20px}.guide-steps li::marker{color:#3157b0;font-weight:700}.guide-evidence{border-left:3px solid #b4c5e9;padding:4px 0 4px 20px;margin:24px 0;background:transparent}.guide-evidence h3{font-size:13px;margin:0 0 12px;color:var(--muted)}.guide-evidence p{margin:0 0 15px;font-size:14px;line-height:1.6}.guide-evidence p:last-child{margin:0}.guide-evidence a{color:#244ba4;text-decoration:underline;text-underline-offset:3px;font-weight:500}.guide-evidence span{display:block;font-size:13px;color:var(--muted);margin-top:5px}.guide-feedback{border-top:1px solid var(--line);padding-top:18px}.guide-feedback p{font-size:14px}.guide-feedback a{font-size:14px;color:var(--blue)}.guide-related{margin-top:55px;padding-top:25px;border-top:1px solid var(--line)}.guide-related>h2{font-size:28px}.guide-related .guide-cards{grid-template-columns:1fr 1fr}
@media(max-width:900px){.guide-cards{grid-template-columns:1fr}.guide-reading-grid{grid-template-columns:1fr;gap:32px}.guide-toc{position:static}.guide-toc nav{grid-template-columns:1fr 1fr}.guide-related .guide-cards{grid-template-columns:1fr}.guide-card{padding:24px}}
@media(max-width:750px){.guide-hub,.guide-article{padding:22px 18px 45px}.breadcrumbs{font-size:11px;margin-bottom:28px}.guide-hub-title h1{font-size:38px}.guide-hub-title>p:last-child{font-size:17px}.guide-article-head h1{font-size:32px;line-height:1.2;letter-spacing:-.8px}.guide-answer{font-size:18px}.guide-byline{font-size:12px}.guide-figure{margin:24px 0 30px}.guide-toc nav{grid-template-columns:1fr}.guide-body h2{font-size:26px}.guide-body p,.guide-body li{font-size:16px}.guide-evidence p{font-size:14px}.guide-evidence span{font-size:13px}.guide-card h2{font-size:23px}}

@media(max-width:750px){.keyboard-bottom:before{grid-row:1}.test-tips{grid-row:2}.keyboard-bottom .legend{grid-row:3}.keyboard-bottom #highlight{grid-row:4}}

.mode-short{display:none}@media(max-width:750px){.mode-full{display:none}.mode-short{display:inline}.mode-tabs button{white-space:nowrap}}

/* Compact navigation and a quiet, fixed-height tip transition. */
.listening-button{padding-left:18px;padding-right:24px;grid-template-columns:6px minmax(0,1fr) 14px}.listening-button .pause-icon{margin:0;justify-self:center;line-height:1}
@media(max-width:750px){.listening-button{padding-inline:18px;grid-template-columns:14px minmax(0,1fr) 14px}.listening-button .status-dot{justify-self:center}}
.tip-heading{display:flex;align-items:center;gap:9px;height:12px}.tip-position{font-size:9px;line-height:12px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.2px;color:var(--muted);white-space:nowrap}.tip-window{height:20px;overflow:hidden}#tip-link:focus-visible{outline-offset:-2px}
.test-footnote .privacy-note{display:flex;align-items:center;flex-wrap:wrap;gap:2px 14px}.test-footnote .private-label{display:inline-flex;font-size:inherit;line-height:20px;white-space:nowrap}.privacy-detail{line-height:20px}
@media(max-width:750px){.tip-window{height:36px}.test-footnote .privacy-note{gap:0 14px}.test-footnote .private-label{width:100%}}

/* Three scan-friendly result groups, with actions separated from observations. */
.summary-strip{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,1.35fr);align-items:stretch;gap:10px;padding:10px 20px;background:#f8fafc}
.summary-card{min-width:0;border-radius:8px;padding:10px 14px;background:#fff;border:1px solid #e1e6ee}
.summary-strip .coverage-stat{background:#f0f8f3;border-color:#d6e7dc}
.summary-strip .stat-label{font-size:11px;line-height:16px;letter-spacing:.55px;min-height:16px;margin:0 0 4px;color:#536179}
.summary-strip .stat-value{font-size:26px;line-height:30px;letter-spacing:-.5px}.summary-strip .stat-denominator{font-size:15px;font-weight:500;letter-spacing:0}
.coverage-meter{display:flex;align-items:center;gap:8px;height:14px;margin-top:3px}.coverage-meter .progress-track{flex:1;margin:0;height:4px;background:#dce9e0}.coverage-meter .coverage-percent{float:none;flex:none;min-width:32px;margin:0;font:600 11px/14px var(--font);font-variant-numeric:tabular-nums;letter-spacing:0;text-align:right;color:#3e6c52}
.summary-strip .live-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:10px 0;align-items:center}.live-stats .stat{min-width:0;padding:0 14px}.live-stats .stat+.stat{border-left:1px solid #dce3ed}.live-stats .stat-value{color:#263852}
.summary-strip .last-key-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;grid-column:auto;background:#f1f4f9;border-color:#dee5ef}.last-key-detail{min-width:0}.summary-strip .last-key{grid-template-columns:minmax(60px,82px) minmax(0,1fr);gap:8px;min-height:34px}/* The extra top pixel balances the deeper bottom border around the label. */
.summary-strip .last-key kbd{display:flex;align-items:center;justify-content:center;height:34px;padding:1px 8px 0;font-size:14px;line-height:1}
#last-key-value{display:block;min-width:0;max-width:100%;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-strip .last-key>span{font-size:11px}
.summary-action{display:flex;align-items:center;padding-left:12px;border-left:1px solid #d9e1ed;align-self:stretch}.summary-strip #reset{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;width:auto;min-width:92px;padding:8px 10px;font-size:11px;font-weight:500;line-height:1.2;white-space:nowrap}
#reset .reset-icon{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#reset .reset-label{display:block;margin:0;font:inherit;line-height:1.2}
@media(min-width:751px) and (max-width:1000px){.summary-strip{padding-inline:14px;gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr)}.summary-card{padding-inline:10px}.live-stats .stat{padding-inline:10px}.summary-strip .stat-label{font-size:10px;letter-spacing:.25px}.summary-strip .last-key-stat{gap:8px}.summary-action{padding-left:8px}.summary-strip #reset{min-width:80px;padding-inline:6px}.summary-strip .last-key{grid-template-columns:60px minmax(0,1fr)}}
@media(max-width:750px){.summary-strip{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:9px;padding:10px}.summary-card{padding:10px}.summary-strip .stat-label{font-size:10px;line-height:14px;letter-spacing:.2px;min-height:28px;margin-bottom:4px}.summary-strip .stat-value{font-size:24px;line-height:28px}.summary-strip .stat-denominator{font-size:13px}.summary-strip .live-stats{padding-block:10px}.live-stats .stat{padding-inline:8px}.coverage-meter{gap:5px}.coverage-meter .coverage-percent{min-width:28px;font-size:10px}.summary-strip .last-key-stat{grid-column:1/-1;gap:10px}.last-key-detail .stat-label{min-height:14px}.summary-strip .last-key{grid-template-columns:66px minmax(0,1fr);gap:7px}.summary-strip .last-key>span{font-size:10px}.summary-action{padding-left:10px}.summary-strip #reset{min-width:82px;padding:8px 7px;font-size:10px}}

/* Brand silhouettes share one optical box and follow the selected button color. */
.platform-prominent button{gap:6px}
.platform-prominent .os-icon{display:block;flex:none;width:16px;height:16px;fill:currentColor}
@media(max-width:750px){.platform-prominent button{gap:5px;padding-inline:4px}}
@media(max-width:350px){.platform-prominent button{font-size:12px;gap:4px}}

/* Continue the ISO Enter contour inside its clipped notch. The overlays use
   the border-box geometry (1px sides, 3px base) and the key's state colors. */
.keycap.iso-enter::before,.keycap.iso-enter::after{content:"";position:absolute;inset:-1px -1px -3px;pointer-events:none;transition:background-color .12s}
.keycap.iso-enter::before{background:var(--key-depth);clip-path:polygon(0 calc(49% - 3px),20% calc(49% - 3px),20% 49%,0 49%)}
.keycap.iso-enter::after{background:var(--key-edge);clip-path:polygon(20% calc(49% - 3px),calc(20% + 1px) calc(49% - 3px),calc(20% + 1px) 100%,20% 100%)}

/* Share the keyboard's insets so the history action aligns with its key edge.
   Main-only layouts include the final key's grid gutter; auxiliary blocks do not. */
#test-panel{--keyboard-outer-inset:22px;--keyboard-inner-inset:16px;--history-key-gutter:0px}
#test-panel:has(.keyboard-case:is(.size-macbook,.size-compact)){--history-key-gutter:5px}
.keyboard-scroll{padding-inline:var(--keyboard-outer-inset)}
.keyboard-case,.keyboard-case[class*="size-"]{padding-inline:var(--keyboard-inner-inset)}
.history-bar{padding-inline:var(--keyboard-outer-inset) calc(var(--keyboard-outer-inset) + 1px + var(--keyboard-inner-inset) + var(--history-key-gutter))}
.history-bar .clear-history-button{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:6px;min-width:88px;height:36px;padding:0 12px;border:1px solid var(--ink);border-radius:7px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap;transition:background-color .16s,border-color .16s}
.clear-history-button svg{display:block;flex:none;width:16px;height:16px}
.clear-history-button span{display:block;line-height:18px}
.history-bar .clear-history-button:hover{background:#293c5c;border-color:#293c5c}
.history-bar .clear-history-button:active{background:#101b2f;border-color:#101b2f}
.history-bar .clear-history-button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:750px){#test-panel{--keyboard-outer-inset:12px;--keyboard-inner-inset:12px}}
@media(prefers-reduced-motion:reduce){.history-bar .clear-history-button{transition:none}}

/* Fade at the visible history endpoint, including the 24-entry limit.
   The outer history slot and Clear button keep their existing geometry. */
.history-track{display:flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;width:max-content;max-width:100%;height:100%;overflow:hidden}
.history-track.history-fade{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - min(64px,35%)),#0009 calc(100% - min(32px,17.5%)),#0002 calc(100% - min(12px,6.5%)),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - min(64px,35%)),#0009 calc(100% - min(32px,17.5%)),#0002 calc(100% - min(12px,6.5%)),transparent 100%)}

/* Small, semantic accents: blue for selection/observations; amber for review.
   Green checked keys and saturated blue held keys retain their meanings. */
:root{--info-soft:#edf3ff;--info-ink:#34588b;--info-line:#cbdaf3;--review-soft:#fff7e8;--review-ink:#7a4717;--review-edge:#b67c3d;--review-depth:#a66829}
.mode-tabs button[aria-selected=true]{background:var(--info-soft);color:var(--info-ink);border-color:var(--info-line);font-weight:700}
.summary-strip .last-key-stat{background:#f2f6ff;border-color:#d6e2f5}
.last-key-stat .stat-label{color:var(--info-ink)}
.last-key-stat .last-key kbd{background:var(--info-soft);border-color:#aec5e8;color:var(--info-ink)}
.live-stats #held-count{color:var(--blue)}
.keyboard-bottom #highlight{display:inline-flex;align-items:center;justify-content:center;justify-self:end;gap:6px;min-height:30px;padding:4px 8px;border:1px solid var(--review-edge);border-radius:6px;background:var(--review-soft);color:var(--review-ink);font-weight:600;line-height:20px;text-align:center;text-decoration:none;transition:background-color .16s,border-color .16s}
#highlight svg{display:block;flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#highlight .highlight-check{display:none}
#highlight[aria-pressed=true] .highlight-search{display:none}
#highlight[aria-pressed=true] .highlight-check{display:block}
.keyboard-bottom #highlight:hover{background:#ffedce;border-color:var(--review-depth)}
.keyboard-bottom #highlight[aria-pressed=true]{background:#ffedce;border-color:var(--review-depth)}
.keyboard-bottom #highlight:focus-visible{outline:none;border-color:#714212}
@media(max-width:750px){.keyboard-bottom #highlight{justify-self:start}}
@media(prefers-reduced-motion:reduce){.keyboard-bottom #highlight{transition:none}}

#test-panel:has(.keyboard-case.highlight-untested) .legend .swatch.idle{background:var(--review-soft);border-color:var(--review-edge);color:var(--review-ink)}

/* Optional Fn/Globe cannot reliably report an event: do not ask users to
   complete it. Review markers use the same hollow circle as the legend. */
.keyboard-case.highlight-untested .keycap.optional-key:not(.checked):not(.pressed){--key-edge:#cdd4df;--key-depth:#c2cbd9;border-color:var(--key-edge);border-bottom-color:var(--key-depth);color:#59677b}
.keyboard-case.highlight-untested .keycap:not(.checked):not(.excluded):not(.pressed):not(.optional-key) .key-state::before{content:"\25CB"}

/* Mac Fn/Globe: corner legends with a simple, original vector globe.
   The inset follows the key width; state marks occupy the unused top left. */
.fn-globe-key{--fn-inset:clamp(4px,9cqi,7px)}
.key-main .keycap.fn-globe-key>.fn-label{position:absolute;top:4px;right:var(--fn-inset);font-size:15px;line-height:15px;font-weight:600}
.fn-globe-key .fn-globe{position:absolute;left:var(--fn-inset);bottom:4px;width:clamp(16px,34cqi,18px);height:auto;aspect-ratio:1;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.fn-globe-key .key-state{top:4px;left:3px;right:auto;bottom:auto;font-size:clamp(8px,22cqi,10px)}
/* Lock activity is independent from the observed/pressed key colors. */
.key-main .keycap.caps-lock-key>.key-label{transform:translateY(-5px)}
.key-main .keycap.caps-lock-key>.caps-indicator{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;min-width:26px;height:12px;padding:0 4px;border-radius:3px;background:#e8edf4;color:#46536a;font:700 8px/1 var(--font);letter-spacing:.3px}
.key-main .keycap.caps-lock-key>.caps-indicator[data-state=on]{background:#1c3559;color:#fff}
.live-letter-settings{padding:14px 16px;background:var(--info-soft);border-radius:10px;margin:0 0 16px;color:var(--muted);font-size:13px}
.live-letter-settings .live-letter-toggle{display:flex;align-items:center;gap:9px;min-height:32px;color:var(--ink);font-weight:650;font-size:14px;cursor:pointer}
.live-letter-toggle input{appearance:none;display:grid;place-items:center;flex:none;width:18px;height:18px;margin:0;border:1px solid #71829d;border-radius:4px;background:#fff;cursor:pointer}
.live-letter-toggle input:checked{background:#34588b;border-color:#34588b}
.live-letter-toggle input:checked:before{content:'✓';font:700 13px/1 system-ui;color:#fff}
.live-letter-toggle input:hover{border-color:#243b62}
.live-letter-toggle input:focus-visible{outline:none;box-shadow:none;border-color:#101d36}
.live-letter-settings p{margin:5px 0 0;line-height:1.6}
.live-letter-settings .caps-observation{font-weight:650;color:var(--info-ink);min-height:21px}
#live-letters-status{min-height:42px}
.live-letter-settings .live-letter-limits{padding-top:9px;border-top:1px solid #ccd9ee;margin-top:8px}
#live-letters-storage{color:#7a4717}
@media(forced-colors:active){.live-letter-toggle input:checked:before{color:Highlight}.key-main .keycap.caps-lock-key>.caps-indicator{border:1px solid CanvasText}}

/* Shared tools: the same quiet surfaces and observation colors as the keyboard. */
.tool-navigation{display:block;margin:0;padding:0;min-width:0;font-size:14px}.tool-navigation ul{display:flex;align-items:center;gap:5px;list-style:none;margin:0;padding:0}.tool-navigation li{margin:0;padding:0}
.tool-navigation a{display:flex;align-items:center;justify-content:center;padding:7px 15px;border:1px solid transparent;border-radius:7px;color:#50627e;min-height:40px;font-weight:600;white-space:nowrap}
.tool-navigation a:hover{background:#f0f4fc;color:#294a7a}.tool-navigation a[aria-current=page]{background:#eaf1fc;border-color:#c8d8f0;color:#284e8d}
.brand-footer{margin-left:auto;text-align:right;max-width:290px;flex-shrink:0}.brand-footer p{color:#536077;font-size:12px}.brand-footer span{font-size:11px;color:#697587}
.device-page{padding-bottom:36px}.device-title{padding:25px 0 23px}.device-title .eyebrow{margin-bottom:6px}.device-title h1{font-size:34px}.device-title>p:last-child{margin:8px 0 0;font-size:16px;color:#59677e}
.device-workbench{background:#fff;border:1px solid #dce2ed;border-radius:16px;overflow:hidden}
.device-toolbar{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid #e1e6ee;min-height:78px}
.device-toolbar .reset-button{margin-left:auto;white-space:nowrap}.device-toolbar>span{font-size:14px;color:#536781;max-width:630px}
.device-primary,.device-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:7px;padding:8px 18px;font-size:14px;font-weight:600;white-space:nowrap}
.device-primary{background:#3157de;color:#fff;min-width:126px}.device-primary:hover{background:#2749bd}.device-primary[aria-pressed=true]{background:#eaf1fc;color:#284e8d;border-color:#b6c9e8}.device-primary:disabled{background:#eef0f4;color:#697587}
.device-secondary{background:#eaf1fc;color:#284e8d;border-color:#c9d9ef}.device-secondary:disabled{opacity:.6;cursor:default}
.mouse-instrument{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;padding:24px}
.mouse-reference{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.mouse-diagram{display:block;width:200px;max-width:100%;height:250px;color:#39465b}.mouse-shell{fill:#eef1f6;stroke:#c9d2df;stroke-width:2}.mouse-part{fill:#fff;stroke:#b9c5d5;stroke-width:1.5}.mouse-part.is-observed{fill:#d3f3df;stroke:#86bda0}.mouse-part.is-held{fill:#385cdb;stroke:#294cc7}
.mouse-reference figcaption{font-size:12px;color:#697587;line-height:1.5;text-align:center;max-width:225px;margin-top:8px}
.mouse-test-pad{position:relative;overflow:hidden;display:grid;place-items:center;min-height:310px;border:1px solid #b9c9e2;border-radius:13px;background:#eff4fd;cursor:crosshair;isolation:isolate;user-select:none}.mouse-test-pad:focus-visible{outline:none;border-color:#244bc4}.mouse-pad-copy{text-align:center;padding:30px;pointer-events:none;z-index:1;max-width:500px}.mouse-pad-copy h2{font-size:27px;margin:12px 0;color:#2a466e}.mouse-pad-copy p{font-size:15px;color:#556b88;line-height:1.7;margin:0}.device-kicker{font-size:11px;letter-spacing:1.2px;font-weight:700;color:#637999}.mouse-position-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#3157de;transform:translate(-50%,-50%);pointer-events:none;opacity:.75}
.device-settings{margin:0 24px 20px;padding:14px 16px;background:#f5f7fb;border-radius:9px}.device-settings label{display:flex;gap:9px;align-items:center;font-weight:600;font-size:14px;color:#344a6a}.device-settings input[type=checkbox]{appearance:none;display:grid;place-items:center;width:18px;height:18px;flex:none;background:#fff;border:1px solid #71829d;border-radius:4px;margin:0;cursor:pointer}.device-settings input:checked{background:#34588b;border-color:#34588b}.device-settings input:checked:before{content:'✓';color:white;font:700 13px/1 system-ui}.device-settings input:focus-visible{outline:none;box-shadow:none;border-color:#101d36}.device-settings p{font-size:13px;color:#627089;margin:7px 0 0;line-height:1.6}
.mouse-button-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 24px 20px}.mouse-button-result,.pad-button,.axis-card{border:1px solid #dce3ee;border-radius:10px;background:#fafbfd;padding:14px;min-width:0}.mouse-button-result>span,.pad-button>span{display:block;min-height:22px;font-size:14px;color:#536077}.mouse-button-result>strong{display:block;font:700 27px/1.5 var(--heading);font-variant-numeric:tabular-nums}.mouse-button-result>small,.pad-button>small{display:block;font-size:12px;line-height:1.5;color:#526781}.mouse-button-result.is-observed,.pad-button.is-observed{background:#eff8f2;border-color:#b9dbc7}.mouse-button-result.is-held,.pad-button.is-held{background:#e8efff;border-color:#5978d1}.is-held>strong{color:#3157de}
.device-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#e1e6ee;border-top:1px solid #e1e6ee;border-bottom:1px solid #e1e6ee}.device-stat-grid>div{padding:16px 24px;background:#f8faff;min-width:0}.device-stat-grid span{display:block;color:#596c87;font-size:13px}.device-stat-grid strong{display:block;color:#2c4e86;font:650 24px/1.5 var(--heading);font-variant-numeric:tabular-nums;white-space:nowrap}.device-observation{font-size:13px;color:#556b88;margin:14px 24px;min-height:22px}.device-notice:empty{display:none}.device-notice{margin:14px 24px;padding:12px;background:#fff4de;border-radius:7px;color:#79490f;font-size:14px}.device-report{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 24px;border-top:1px solid #e1e6ee;background:#fafbfe}.device-report p{font-size:13px;color:#627089;margin:0}.device-report button{white-space:nowrap;min-height:42px;font-size:13px}.diagram-credit{font-size:12px;line-height:1.6;color:#697587;margin:10px 0}
.device-help{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:56px;padding:44px 0}.device-help h2{font-size:23px;letter-spacing:-.6px;margin-top:0}.device-help h3{font-size:18px;margin:26px 0 12px}.device-help p{font-size:16px;line-height:1.8;color:#59677e}.device-help a{color:#30558f;text-decoration:underline;text-underline-offset:3px}.device-help aside{border-left:1px solid #dce3ee;padding-left:28px}.device-help aside h2{font-size:18px}.device-help aside p{font-size:14px;margin:6px 0 22px}
.pad-selector{margin:20px 24px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 20px}.pad-selector p{grid-column:1/-1;margin:0}.pad-selector select{width:100%;max-width:100%;font-size:14px}.pad-empty{min-height:290px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:32px;max-width:680px;margin:auto}.pad-empty h2{font-size:28px;margin:14px 0}.pad-empty p{margin:6px 0;font-size:15px;color:#5d6d87}.pad-empty[hidden]{display:none}
.pad-identity{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin:24px;padding:16px 20px;background:#f0f4fc;border-radius:9px}.pad-identity span{display:block;font-size:12px;color:#667993}.pad-identity strong{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere;color:#2e4d80}.stick-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:650px;margin:24px auto;padding:0 24px}.stick-panels[hidden]{display:none}.stick-figure{margin:0;text-align:center}.stick-figure figcaption{font-size:16px;font-weight:600;color:#344a6a}.stick-figure figcaption span{font-size:12px;font-weight:400;white-space:nowrap}.stick-figure svg{width:100%;max-width:225px;display:block;margin:6px auto 0}.stick-field{fill:#f7f9fd;stroke:#dce3ee}.stick-ring{fill:#edf3fd;stroke:#b9cbe7;stroke-width:1.5}.stick-grid{stroke:#b9cbe7;stroke-dasharray:3 4}.stick-dot{fill:#3157de;stroke:#fff;stroke-width:2}.stick-figure p{font:500 13px/1.5 var(--font);font-variant-numeric:tabular-nums;margin:0;color:#465f87}
.rest-observation{display:flex;align-items:center;gap:20px;padding:16px 20px;background:#f2f6fe;margin:20px 24px;border-radius:9px;min-height:93px}.rest-observation p{font-size:13px;color:#50688e;line-height:1.6;margin:0;max-width:630px}.instrument-heading{font-size:17px;margin:24px 24px 12px}.instrument-heading>span{color:#647894;font-size:14px;margin-left:10px}.pad-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 24px}.pad-value{font:650 22px/1.5 var(--heading);font-variant-numeric:tabular-nums;color:#34558a}.pad-button>span{min-height:42px;line-height:1.5}.pad-button meter,.axis-card meter{display:block;width:100%;height:12px;margin:4px 0;accent-color:#4975bf}.pad-axes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 24px 20px}.axis-card>span{font-size:12px;color:#647894}.axis-value{display:block;font:650 22px/1.5 var(--heading);font-variant-numeric:tabular-nums;color:#34558a}.axis-range{font-size:11px;color:#627089;display:block}.device-workbench>.diagram-credit,#pad-live>.diagram-credit{margin:12px 24px}
@media(max-width:900px){.mouse-instrument{grid-template-columns:190px minmax(0,1fr);gap:16px}.mouse-diagram{width:170px;height:225px}.mouse-pad-copy{padding:20px}.mouse-pad-copy h2{font-size:22px}.device-help{gap:28px;grid-template-columns:1fr}.device-help aside{padding:24px 0 0;border-left:0;border-top:1px solid #dce3ee}.brand-footer{max-width:none;text-align:left;margin:0}.pad-buttons,.pad-axes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.device-title{padding:20px 0}.device-title h1{font-size:28px}.device-title>p:last-child{font-size:15px}.device-toolbar{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px}.device-toolbar>span{grid-column:1/-1;grid-row:2;min-height:42px;line-height:1.5}.device-toolbar .reset-button{grid-column:2;grid-row:1}.device-primary{min-width:0;width:max-content;font-size:13px}.mouse-instrument{grid-template-columns:1fr;padding:16px;gap:14px}.mouse-reference{flex-direction:row;gap:15px}.mouse-diagram{width:112px;height:140px;flex:none}.mouse-reference figcaption{text-align:left;font-size:12px;max-width:180px}.mouse-test-pad{min-height:240px}.mouse-pad-copy h2{font-size:24px}.device-settings{margin:0 16px 16px}.mouse-button-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 16px 16px}.mouse-button-grid>div:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center}.mouse-button-grid>div:last-child small{grid-column:1;grid-row:2}.mouse-button-grid>div:last-child strong{grid-column:2;grid-row:1/3}.device-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.device-stat-grid>div{padding:14px 16px}.device-stat-grid strong{font-size:20px}.device-stat-grid span{min-height:40px;line-height:1.5}.device-report{padding:16px;align-items:flex-start;flex-direction:column}.device-help{padding-top:34px}.device-help p{font-size:15px}.pad-selector{margin:16px;grid-template-columns:1fr}.pad-selector p{grid-column:1}.pad-empty{min-height:280px;padding:24px}.pad-identity{grid-template-columns:1fr;margin:16px;padding:14px}.stick-panels{padding:0 16px;gap:8px}.stick-figure figcaption{font-size:14px}.stick-figure figcaption span{display:block}.rest-observation{margin:16px;padding:14px;flex-direction:column;align-items:flex-start}.rest-observation p{min-height:62px}.pad-buttons,.pad-axes{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 16px 20px}.instrument-heading{margin-left:16px}.pad-button,.axis-card{padding:12px}.brand-footer p{font-size:12px}.device-observation{margin:14px 16px}.device-page .brand{font-size:20px}}
@media(forced-colors:active){.mouse-part.is-held,.mouse-button-result.is-held,.pad-button.is-held{fill:Highlight;border-color:Highlight}.mouse-position-dot,.stick-dot{fill:Highlight;background:Highlight}.device-settings input:checked:before{color:Highlight}}

.mouse-diagram [data-mouse-number].is-held{fill:#fff}

/* Scroll feedback remains in the test surface so no result is hidden below it. */
.mouse-settings{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 20px;align-items:center}
.mouse-settings label{cursor:pointer;min-height:28px;font-size:15px}.mouse-settings p{grid-column:1;margin:0;font-size:14px;max-width:790px}.mouse-settings a{grid-column:2;grid-row:1/3;font-size:14px;color:#30558f;text-decoration:underline;text-underline-offset:3px}
.mouse-settings+.mouse-instrument{padding-top:0}.mouse-scroll-feedback{margin-top:20px;border-top:1px solid #cddbf0;padding-top:14px}.mouse-scroll-feedback>p:first-child{font-size:14px;font-weight:600;color:#34558a;min-height:24px;line-height:1.6}
.scroll-directions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:9px 0}.scroll-directions>span{display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;border:1px solid #c4d0e3;border-radius:7px;color:#4e6381;background:#f9fbff;font-size:13px;white-space:nowrap}.scroll-directions>span>span:first-child{font:600 19px/1 system-ui}.scroll-directions>span.is-observed{background:#dff3e8;color:#285a3e;border-color:#9fc9b1}.direction-check{font-size:12px}
.mouse-pad-copy .scroll-direction-note{font-size:12px;line-height:1.5;min-height:36px;margin-top:7px}.mouse-pad-copy{width:100%;max-width:560px}.mouse-pad-copy #mouse-pad-help{min-height:5.1em}.scroll-capture-active{border-color:#6588c5;overscroll-behavior:contain}
.optional-button{display:block;color:#68768b;font-size:12px;margin-top:2px}.mouse-button-result>span{min-height:43px}.mouse-reference figcaption{font-size:14px}
.magic-mouse-help{scroll-margin-top:90px;margin-bottom:34px}.magic-mouse-help ol{padding-left:22px}.magic-mouse-help li{margin:16px 0;line-height:1.8;color:#59677e;font-size:16px}.magic-mouse-help strong{color:#30465f}
@media(max-width:600px){.mouse-settings{margin-top:16px;grid-template-columns:1fr;gap:5px}.mouse-settings a{grid-column:1;grid-row:3;margin-top:4px;width:max-content}.mouse-pad-copy{padding:20px 14px}.mouse-pad-copy h2{font-size:23px}.mouse-pad-copy #mouse-pad-help{min-height:8.5em}.scroll-directions{grid-template-columns:repeat(2,minmax(0,1fr))}.mouse-scroll-feedback>p:first-child{min-height:44px}.mouse-pad-copy .scroll-direction-note{min-height:54px}.mouse-reference figcaption{font-size:13px}.magic-mouse-help li{font-size:15px}}
@media(forced-colors:active){.scroll-directions>span.is-observed{border-color:Highlight;color:Highlight}}

/* Test navigation belongs to the global header, leaving the instrument first. */
.header-inner{grid-template-columns:196px minmax(0,1fr) auto;gap:28px}
.header-inner>.tool-navigation{justify-self:start;margin:0}.site-menu a[aria-current=page]{background:#eaf1fc;color:#284e8d;font-weight:700}
.site-menu a[aria-current=page]::after{content:'✓';float:right;margin-left:10px}
.device-title{padding:18px 0 16px}.device-title h1{font-size:30px}.device-title>p:last-child{margin-top:6px}
@media(max-width:950px){.header-inner{grid-template-columns:minmax(0,1fr) auto;gap:16px}.header-inner>.tool-navigation{display:none}}
@media(max-width:750px){.header-inner{grid-template-columns:minmax(0,1fr) 110px;gap:8px}.device-title{padding:16px 0 14px}.device-title h1{font-size:27px}}

.scroll-setting-short{display:none}
@media(max-width:600px){
 .device-title>p:last-child{display:none}.device-title{padding:16px 0 14px}
 [data-device=mouse] .device-toolbar>span{min-height:21px}
 .scroll-setting-full{display:none}.scroll-setting-short{display:inline}
 .mouse-reference{min-height:90px}.mouse-reference .mouse-diagram{width:72px;height:90px}.mouse-reference figcaption{max-width:none;flex:1;font-size:13px;margin:0}
 .mouse-pad-copy>.device-kicker,.mouse-pad-copy>h2{display:none}.mouse-pad-copy #mouse-pad-help{min-height:5.1em}
}

/* Supplied identity: preserve the approved artwork and reserve its aspect ratio. */
.brand{min-width:0}
.brand-logo{display:block;width:196px;max-width:100%;height:auto;aspect-ratio:146.695 / 29.581;object-fit:contain;flex-shrink:1}
footer>.brand{width:196px;max-width:100%;flex-shrink:0}
/* Let translated mode labels share available mobile space by their content. */
/* Keep the full keyboard results card visible on 720 px laptop viewports. */
@media(min-width:1100px) and (max-height:800px){.summary-strip{padding-block:4px}}
@media(max-width:750px){.toolbar>.mode-tabs{display:flex}.mode-tabs button{flex:1 1 auto}}
@media(min-width:751px){
 .toolbar{display:flex;flex-wrap:wrap;align-items:center}
 .toolbar>.mode-tabs{display:flex;flex:0 0 auto;width:max-content;max-width:100%}
 .mode-tabs button{flex:1 1 auto;min-width:0;white-space:nowrap}
 .toolbar>.layout-controls{margin-left:auto}
}