:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;color:#ffffffde;background-color:#242424}*{box-sizing:border-box}body{margin:0;background:#080a0d;color:#f1f5f9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.keyboard-tester{min-height:100vh;padding:48px;outline:none;background:radial-gradient(circle at 50% 0%,rgba(70,82,105,.16),transparent 40%),#080a0d}.tester-header{max-width:1500px;margin:0 auto 28px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.title-line{display:flex;align-items:center;gap:8px}.eyebrow{color:#717b8c;font-size:11px;font-weight:700;letter-spacing:.16em}.status-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#64748b;box-shadow:0 0 12px #94a3b880;transition:background .2s ease,box-shadow .2s ease}.status-dot.active{background:#4ade80;box-shadow:0 0 12px #4ade80cc}.testing-badge{margin-left:8px;padding:4px 8px;border-radius:5px;font-size:9px;font-weight:800;letter-spacing:.08em;transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}.testing-badge.active{border:1px solid #285c3c;background:#10281a;color:#63c985;box-shadow:0 0 10px #4ade800f}.testing-badge.inactive{border:1px solid #63333b;background:#241216;color:#e27785;box-shadow:0 0 10px #ef44440f}.tester-header h1{margin:10px 0 7px;font-size:36px;line-height:1;letter-spacing:-.04em}.tester-header p{margin:0;color:#788394;font-size:14px}.tester-header strong{color:#aeb7c5}.header-actions{display:flex;align-items:center;gap:9px}.start-button,.stop-button,.reset-button{border-radius:9px;padding:11px 18px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}.start-button{border:1px solid #386b4b;background:#173420;color:#86dda1;box-shadow:0 0 20px #4ade800d}.start-button:hover{border-color:#4a9965;background:#1d4329;color:#a5edb8}.button-icon{margin-right:6px;font-size:10px}.stop-button{border:1px solid #5b3940;background:#211317;color:#d9949f}.stop-button:hover{border-color:#814b55;background:#2b171c}.reset-button{border:1px solid #29313d;background:#11151a;color:#b8c1ce}.reset-button:hover{border-color:#475467;background:#181d24}.start-button:active,.stop-button:active,.reset-button:active{transform:translateY(1px)}.progress-panel{max-width:1500px;margin:0 auto 28px;padding:18px 20px;border:1px solid #1c222b;border-radius:12px;background:#0d1014}.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;color:#6f7a8a;font-size:12px;font-weight:600}.progress-info strong{color:#c8d0db}.progress-bar{height:5px;overflow:hidden;border-radius:10px;background:#191e25}.progress-fill{height:100%;border-radius:inherit;background:#5d6a7c;transition:width .35s ease}.progress-percent{display:block;margin-top:8px;color:#566171;font-size:11px;text-align:right}.start-info{max-width:1500px;margin:0 auto 20px;padding:18px 20px;display:flex;align-items:flex-start;gap:15px;border:1px solid #202832;border-radius:11px;background:#0e1217}.start-info-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #2b3440;border-radius:8px;background:#151a20;color:#9ba7b8;font-size:18px}.start-info-content{flex:1}.start-info-content>strong{color:#cbd3de;font-size:13px}.start-info-content>p{margin:4px 0 16px;color:#697587;font-size:12px}.keyboard-size-selector{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.selector-label{color:#818c9c;font-size:11px;font-weight:700}.size-options{display:flex;gap:5px;padding:3px;border:1px solid #252d37;border-radius:8px;background:#090c10}.size-button{min-width:54px;padding:7px 10px;border:1px solid transparent;border-radius:5px;background:transparent;color:#687485;font-size:11px;font-weight:700;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}.size-button:hover{color:#b5bfcc;background:#171c23}.size-button.selected{border-color:#374250;background:#222933;color:#e0e6ed;box-shadow:0 1px 5px #0000004d}.selected-layout-info{margin-top:12px;display:flex;align-items:center;gap:7px;color:#5e6a7a;font-size:10px}.selected-layout-info strong{color:#9da9b8}.layout-divider{color:#3f4956;margin:0 3px}.keyboard-wrapper{max-width:1500px;margin:0 auto;padding:30px;overflow-x:auto;border:1px solid #1d232c;border-radius:16px;background:#0c0f13;box-shadow:0 25px 80px #00000073,inset 0 1px #ffffff06}.keyboard{width:100%;min-width:1000px;display:flex;flex-direction:column;gap:7px}.keyboard-row{display:flex;gap:7px}.key{position:relative;flex:1 1 0;min-width:45px;height:57px;display:flex;align-items:center;justify-content:center;border:1px solid #2a3039;border-radius:7px;background:linear-gradient(180deg,#1a1f26,#15191f);box-shadow:0 3px #090b0e,0 5px 8px #00000040;color:#8f99a8;font-size:13px;font-weight:600;cursor:default;-webkit-user-select:none;user-select:none;transition:transform .08s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease}.key.disabled{opacity:.72}.key:hover{border-color:#3b4350;color:#b0bac8}.key.pressed{transform:translateY(3px) scale(.97);border-color:#738095;background:#252c35;color:#f1f5f9;box-shadow:0 0 #090b0e,0 0 18px #94a3b838}.key.tested{border-color:#285c3c;background:linear-gradient(180deg,#163521,#10281a);color:#79d99a;box-shadow:0 3px #07120b,0 0 13px #4ade8014}.key.tested.pressed{transform:translateY(3px) scale(.97);border-color:#43a968;background:#1b4729;color:#a3f2b9;box-shadow:0 0 #07120b,0 0 20px #4ade802e}.key-count{position:absolute;right:5px;bottom:4px;color:#596575;font-size:8px;font-weight:700}.check{position:absolute;right:6px;bottom:4px;color:#4ade80;font-size:10px;font-weight:800}.key-label{line-height:1;white-space:nowrap}.function{height:45px;margin-bottom:12px;font-size:11px}.esc{margin-right:12px}.utility{font-size:10px}.backspace{flex:1.9}.tab{flex:1.45}.backslash{flex:1.5}.caps{flex:1.7}.enter{flex:2.1}.shift-left{flex:2.25}.shift-right{flex:2.6}.modifier{flex:1.35;font-size:10px}.space{flex:6.8}.arrow{flex:.9;min-width:48px;font-size:18px}.numpad{flex:1}.tall{align-self:stretch}.numpad-zero{flex:2.05}.row-0 .key:nth-child(2),.row-0 .key:nth-child(6),.row-0 .key:nth-child(10){margin-left:14px}.nav-key{margin-left:4px}.numpad-key{margin-left:0}.keyboard-size-60{min-width:760px}.keyboard-size-60 .keyboard-row{gap:5px}.keyboard-size-60 .key{min-width:42px;height:53px}.keyboard-size-60 .function{height:43px}.keyboard-size-65{min-width:820px}.keyboard-size-65 .keyboard-row{gap:5px}.keyboard-size-65 .key{min-width:43px;height:54px}.keyboard-size-75{min-width:950px}.keyboard-size-75 .key{min-width:43px}.keyboard-size-75 .function{height:44px}.keyboard-size-80{min-width:1050px}.keyboard-size-80 .key{min-width:45px}.keyboard-size-100{min-width:1250px}.keyboard-size-100 .key{min-width:45px}.legend{max-width:1500px;margin:20px auto 0;display:flex;justify-content:flex-end;gap:22px}.legend-item{display:flex;align-items:center;gap:7px;color:#596575;font-size:11px}.legend-key{width:10px;height:10px;display:inline-block;border:1px solid #303844;border-radius:3px;background:#1a1f26}.legend-key.active{border-color:#738095;background:#252c35;box-shadow:0 0 8px #94a3b840}.legend-key.tested{border-color:#285c3c;background:#163521}.legend-key.untouched{background:#11151a}@media(max-width:900px){.keyboard-tester{padding:25px 15px}.tester-header{align-items:flex-start;flex-direction:column}.tester-header h1{font-size:30px}.header-actions{width:100%;flex-wrap:wrap}.start-info{align-items:flex-start}.keyboard-size-selector{align-items:flex-start;flex-direction:column;gap:8px}.size-options{width:100%;justify-content:space-between}.size-button{flex:1}.selected-layout-info{flex-wrap:wrap}.keyboard-wrapper{padding:18px}.legend{justify-content:flex-start;flex-wrap:wrap}}.success-title{color:#79d99a!important}.start-info-icon{transition:color .2s ease,border-color .2s ease,background .2s ease}.start-info:has(.success-title) .start-info-icon{border-color:#285c3c;background:#10281a;color:#4ade80}.seo-content{max-width:1500px;margin:46px auto 0;padding:0 0 60px}.seo-content-inner{padding:42px;border:1px solid #1c222b;border-radius:16px;background:radial-gradient(circle at 20% 0%,rgba(70,82,105,.08),transparent 35%),#0c0f13;box-shadow:0 20px 60px #0003}.seo-intro{max-width:900px;margin-bottom:38px}.seo-eyebrow{color:#667386;font-size:10px;font-weight:800;letter-spacing:.16em}.seo-intro h2{margin:10px 0 15px;color:#dce3eb;font-size:30px;line-height:1.15;letter-spacing:-.035em}.seo-lead{margin:0;color:#788494;font-size:14px;line-height:1.8}.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:42px}.seo-card{min-height:100%;padding:23px;border:1px solid #1c232c;border-radius:11px;background:#0f1318;transition:border-color .2s ease,background .2s ease,transform .2s ease}.seo-card:hover{border-color:#2a333f;background:#11161c;transform:translateY(-2px)}.seo-card h3{margin:0 0 10px;color:#bfc8d4;font-size:14px;font-weight:700;letter-spacing:-.01em}.seo-card p{margin:0;color:#687586;font-size:12px;line-height:1.8}.seo-story{max-width:1100px;padding-top:36px;border-top:1px solid #1c232c}.seo-story h3{margin:0 0 18px;color:#cbd3de;font-size:20px;letter-spacing:-.025em}.seo-story p{margin:0 0 17px;color:#697686;font-size:12px;line-height:1.9}.seo-story p:last-child{margin-bottom:0}.seo-keywords{display:flex;flex-wrap:wrap;gap:7px;margin-top:36px;padding-top:25px;border-top:1px solid #1c232c}.seo-keywords span{padding:6px 9px;border:1px solid #202832;border-radius:5px;background:#0b0e12;color:#4f5b6b;font-size:9px;font-weight:600}@media(max-width:1100px){.seo-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.seo-content{margin-top:30px;padding:0 15px 40px}.seo-content-inner{padding:25px 20px}.seo-intro h2{font-size:24px}.seo-grid{grid-template-columns:1fr}.seo-card{padding:20px}.seo-lead{font-size:13px}}