/* TypingKeyboards interactive keyboard and mouse tester, scoped styles */
.kt-section{width:min(calc(100% - 52px),1480px);margin:0 auto;padding:8px 0 105px;color:var(--text)}
.kt-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin:0 0 28px}
.kt-intro h2{font-size:clamp(1.9rem,3.4vw,3.25rem);letter-spacing:-.058em;margin:0 0 14px}
.kt-intro p{max-width:720px;line-height:1.7;margin:0}
.kt-intro .eyebrow{margin-bottom:12px}
.kt-intro-cta{font-size:.8rem;font-weight:680;color:var(--text);border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:9px 14px;white-space:nowrap}
.kt-intro-divider{color:var(--muted);margin:0 4px}.kt-online-indicator{display:inline-block;width:8px;height:8px;background:#2cbb76;border-radius:50%;margin-right:7px;box-shadow:0 0 0 3px rgba(44,187,118,.12)}
.kt-toolbar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:0 auto 25px;padding:13px 20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 50px rgba(0,0,0,.025);width:max-content;max-width:100%;min-height:66px}
.kt-os-switch{padding:4px;border:1px solid var(--border);border-radius:8px;display:flex;gap:2px;margin:0;min-width:0}
.kt-os-switch label{position:relative;display:block;cursor:pointer}
.kt-os-switch input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0}
.kt-os-switch span{display:block;padding:6px 13px;border-radius:5px;color:var(--muted);font-size:.78rem;font-weight:720;line-height:1.3}
.kt-os-switch input:checked+span{background:var(--accent);color:#fff}
.kt-os-switch input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.kt-toolbar-divider{width:1px;height:28px;background:var(--border)}
.kt-sound-toggle{display:flex;align-items:center;gap:9px;color:var(--text);font-size:.79rem;font-weight:600;cursor:pointer;white-space:nowrap}
.kt-sound-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.kt-switch-track{width:36px;height:20px;border-radius:20px;background:var(--border);position:relative;transition:background .2s}
.kt-switch-track::before{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0004;transition:transform .2s}
.kt-sound-toggle input:checked+.kt-switch-track{background:var(--accent)}
.kt-sound-toggle input:checked+.kt-switch-track::before{transform:translateX(16px)}
.kt-sound-toggle input:focus-visible+.kt-switch-track{outline:3px solid var(--accent);outline-offset:3px}
.kt-setting-label{display:flex;align-items:center;gap:8px;font-size:.71rem;text-transform:uppercase;letter-spacing:.05em;font-weight:740;color:var(--muted)}
.kt-setting-label select{font-size:.8rem;text-transform:none;letter-spacing:0;color:var(--text);background:var(--surface-alt);border:1px solid var(--border);border-radius:6px;padding:8px 12px;min-width:123px}
.kt-setting-label input[type=range]{width:86px;accent-color:var(--accent)}
.kt-reset{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:7px;padding:9px 12px;background:var(--surface-alt);color:var(--text);font-size:.79rem;font-weight:700;white-space:nowrap}
.kt-reset:hover{border-color:var(--accent);color:var(--accent)}
.kt-reset svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kt-stage{color:#e9ecf2;background:#11171f;border:1px solid #26303c;border-radius:17px;padding:27px clamp(16px,2.7vw,40px) 19px;box-shadow:0 32px 75px rgba(8,14,22,.18);outline-offset:5px}
.kt-stage:focus-visible{outline:3px solid var(--accent)}
.kt-stage-top{min-height:64px;background:#171f29;border:1px solid #32404f;border-radius:9px;display:flex;align-items:center;justify-content:space-between;padding:13px 20px;gap:12px;margin-bottom:24px}
.kt-stage-top>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kt-stage-kicker{font-size:.64rem;color:#ff986b;letter-spacing:.12em;font-weight:780}
.kt-stage-top strong{font-size:.95rem;color:#f1f4f8;font-weight:620}
.kt-stage-top-right{display:flex;align-items:center;gap:8px;color:#a6b4c6;font-size:.74rem;white-space:nowrap}
.kt-state-dot{width:7px;height:7px;background:#35c993;box-shadow:0 0 0 3px #35c9931d;border-radius:50%}
.kt-keyboard-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:5px;scrollbar-width:thin;scrollbar-color:#536070 #151d27}
.kt-keyboard-body{min-width:1070px;max-width:1390px;margin-inline:auto}
.kt-functional-area{display:flex;align-items:stretch;gap:13px;margin-bottom:15px}
.kt-function-row{display:flex;flex:1;gap:5px}
.kt-function-side{display:flex;gap:5px;width:188px}
.kt-keyboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 168px 223px;gap:13px}
.kt-main-keys{display:flex;flex-direction:column;gap:8px;min-width:0}
.kt-main-row{display:flex;gap:6px;width:100%;flex:1}
.kt-key{height:51px;display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;flex:var(--u,1) 1 0;background:linear-gradient(180deg,#28313e 0%,#1c2430 100%);border:1px solid #374353;border-bottom:3px solid #111824;border-radius:7px;box-shadow:0 3px 0 rgba(0,0,0,.27);color:#e9eef6;transition:background .08s,border-color .08s,box-shadow .08s,transform .08s;user-select:none;-webkit-user-select:none}
.kt-key-label{font-size:clamp(.66rem,1vw,.93rem);font-weight:550;line-height:1.16;overflow-wrap:anywhere;padding:0 3px}
.kt-key-small{height:38px}.kt-key-small .kt-key-label,.kt-key-compact .kt-key-label{font-size:.67rem}
.kt-key.is-tested{background:linear-gradient(180deg,#b85722,#963f1f);border-color:#ec8b54;color:#fff;box-shadow:0 2px 0 #642e1b,0 0 12px #ff6a2a15}
.kt-key.is-pressed{background:linear-gradient(180deg,#ff9e60,#ff6328);border-color:#ffd0a7;color:#161d27;transform:translateY(2px);box-shadow:0 0 0 2px #ff6b3099,0 0 22px #ff6b304a}
.kt-navigation-block{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.kt-navigation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kt-navigation-grid .kt-key{height:51px;min-width:0}
.kt-arrows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,51px);gap:6px;align-items:stretch}
.kt-arrows .kt-key{height:auto}
.kt-arrows [data-code=ArrowUp]{grid-column:2;grid-row:1}
.kt-arrows [data-code=ArrowLeft]{grid-column:1;grid-row:2}
.kt-arrows [data-code=ArrowDown]{grid-column:2;grid-row:2}
.kt-arrows [data-code=ArrowRight]{grid-column:3;grid-row:2}
.kt-numpad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(5,51px);gap:8px;min-width:0}
.kt-numpad .kt-key{height:auto}
.kt-numpad .kt-tall{grid-row:span 2}
.kt-numpad .kt-wide{grid-column:span 2}
.kt-lower{border-top:1px solid #2b3541;margin-top:34px;padding-top:29px;display:flex;align-items:center;justify-content:space-between;gap:38px;flex-wrap:wrap}
.kt-mouse-area{display:flex;align-items:center;gap:19px}
.kt-mouse-graphic{height:102px;width:72px;flex:none;border:1px solid #3f4c5d;border-radius:36px 36px 24px 24px;background:#222d39;position:relative;cursor:crosshair;overflow:hidden;touch-action:pan-y}
.kt-mouse-left,.kt-mouse-right{position:absolute;top:0;left:0;width:50%;height:51%;border-bottom:1px solid #536071;background:linear-gradient(180deg,#283544,#222d39)}
.kt-mouse-left{border-right:1px solid #475567;border-radius:36px 0 0 0}
.kt-mouse-right{left:50%;border-radius:0 36px 0 0}
.kt-mouse-wheel{position:absolute;z-index:2;width:12px;height:31px;left:calc(50% - 6px);top:11px;border-radius:8px;background:#151f2a;border:1px solid #67758a;box-shadow:0 1px 5px #0007}
.kt-mouse-left.is-active,.kt-mouse-right.is-active,.kt-mouse-wheel.is-active{background:#ff7740;box-shadow:0 0 15px #ff774077}
.kt-mouse-helper{display:grid;gap:5px}.kt-mouse-helper strong{font-size:.93rem;color:#fff;font-weight:680}.kt-mouse-helper span{font-size:.77rem;color:#a3b0c0;max-width:175px;line-height:1.4}
.kt-readouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;flex:1;max-width:790px}
.kt-readouts>div{border-left:1px solid #34404e;padding-left:18px;min-width:0}
.kt-readouts small{display:block;font-weight:720;letter-spacing:.07em;color:#9eaaba;font-size:.6rem;margin-bottom:10px}
.kt-readouts strong{display:block;font-size:clamp(.84rem,1.3vw,1.21rem);font-weight:630;color:#f6f7f9;line-height:1.3;overflow-wrap:anywhere}
.kt-readouts>div:first-child strong{font-size:1.65rem;color:#ff914d}.kt-readout-sub{font-size:.76rem;color:#9eaaba;font-weight:500}
.kt-stage-note{margin:29px 0 0;padding-top:15px;border-top:1px solid #2b3541;font-size:.71rem;line-height:1.65;color:#91a0b2;text-align:center}
.kt-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:25px 0 75px}
.kt-info-grid article{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:28px}
.kt-info-number{color:var(--accent);font-size:.69rem;font-weight:780;letter-spacing:.08em}
.kt-info-grid h3{font-size:1.12rem;margin:12px 0 12px}.kt-info-grid p{font-size:.85rem;line-height:1.72;margin:0}
.kt-how-to{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;padding:60px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.kt-how-to h2{font-size:clamp(1.8rem,3vw,2.7rem)}.kt-how-to ol{margin:0;padding-left:28px}.kt-how-to li{color:var(--muted);padding:0 0 17px;font-size:.95rem;line-height:1.8}.kt-how-to strong{color:var(--text)}
.kt-faqs{padding:70px 0 0;max-width:1000px;margin:auto}.kt-faqs h2{font-size:clamp(2rem,3vw,2.7rem);margin-bottom:25px}.kt-faq-list{display:grid;gap:10px}.kt-faq-list details{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:17px 21px}.kt-faq-list summary{font-size:.97rem;font-weight:680;cursor:pointer;padding-right:24px}.kt-faq-list details[open]{border-color:var(--accent)}.kt-faq-list p{margin:12px 0 0;font-size:.86rem;line-height:1.8}
@media(max-width:1270px){.kt-keyboard-body{min-width:1060px}.kt-stage{padding-inline:22px}.kt-readouts{gap:13px}.kt-key-label{font-size:.77rem}}
@media(max-width:900px){.kt-section{width:calc(100% - 32px)}.kt-intro{align-items:flex-start;flex-direction:column;gap:15px}.kt-stage{padding:18px 14px}.kt-keyboard-scroll{position:relative}.kt-lower{align-items:flex-start}.kt-readouts{max-width:none;width:100%}}
@media(max-width:650px){.kt-intro h2{font-size:2.15rem}.kt-intro-cta{font-size:.72rem}.kt-toolbar{justify-content:flex-start;width:100%;gap:11px;padding:13px}.kt-toolbar-divider{display:none}.kt-volume-label{flex:1}.kt-volume-label input{width:100%;min-width:60px}.kt-reset{flex:1;justify-content:center}.kt-stage-top{align-items:flex-start;flex-direction:column}.kt-stage-top strong{font-size:.83rem}.kt-readouts{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.kt-lower{gap:20px}.kt-info-grid{grid-template-columns:1fr}.kt-how-to{grid-template-columns:1fr;gap:16px;padding:42px 0}.kt-faqs{padding-top:42px}}
@media(prefers-reduced-motion:reduce){.kt-key,.kt-switch-track,.kt-switch-track::before{transition:none}}
@media(max-width:650px){.kt-lower{flex-direction:column;align-items:stretch}.kt-readouts{flex:none;width:100%;min-width:0}.kt-readouts>div{min-width:0}.kt-readouts strong{overflow-wrap:anywhere}}

.kt-scroll-hint{display:none;color:#dca17c;font-size:.76rem;margin:0 0 11px;font-weight:560}
@media(max-width:1210px){.kt-scroll-hint{display:block}}