.kb-hero{padding:120px 0 60px;text-align:center}.kb-sec-label{margin-bottom:16px}.kb-sec-dot{background:var(--green);box-shadow:0 0 8px var(--green)}.kb-title{margin-bottom:16px}.kb-sub{margin:0 auto 40px}.kb-hero-box{border-color:#00c85333}.kb-hero-icon{background:#00c85314;border-color:#00c85333;color:var(--green)}.kb-hero-h2{font-size:22px;font-weight:700;margin-bottom:12px;color:var(--text-primary)}.kb-warning-box{background:#00c8530d;border:1px solid rgba(0,200,83,.15);border-radius:12px;padding:16px;margin:0 auto 32px;max-width:480px;text-align:left}.kb-warning-text{font-size:13.5px;color:var(--text-secondary);line-height:1.6}.kb-start-btn{font-size:16px;padding:16px 40px;background:var(--green);color:#000;font-weight:800;border-color:var(--green);box-shadow:0 0 20px #00c85366}.kb-overlay{background-color:var(--surface-1);touch-action:none;flex-direction:column;padding:20px;overflow:hidden;justify-content:flex-start}.kb-topbar{width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;z-index:10;gap:16px;flex-wrap:wrap}.kb-topbar-left{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.kb-kro-group{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.kb-kro-card{background:var(--surface-2);border:1px solid var(--border-bright);padding:12px 24px;border-radius:12px;text-align:center}.kb-kro-label{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);text-transform:uppercase}.kb-kro-value{font-family:var(--font-display);font-size:32px;font-weight:900;line-height:1}.kb-kro-value-current{color:var(--green)}.kb-kro-value-max{color:var(--text-primary)}.kb-layout-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.kb-control-box{background:var(--surface-2);border:1px solid var(--border-bright);padding:10px 12px;border-radius:12px}.kb-control-label{display:block;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-transform:uppercase;margin-bottom:6px}.kb-select{width:170px;padding:10px;border-radius:10px;border:1px solid var(--border-bright);background:var(--surface-3);color:var(--text-primary);font-family:var(--font-display);outline:none}.kb-toggle-box{background:var(--surface-2);border:1px solid var(--border-bright);padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:10px}.kb-toggle-input{width:18px;height:18px;accent-color:var(--green)}.kb-toggle-label{font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--text-primary)}.kb-mobile-warning{display:none;color:var(--amber);background:#ff8c001a;padding:10px 20px;border-radius:8px;font-weight:700;font-size:14px;border:1px solid rgba(255,140,0,.3)}.kb-exit-btn{background:var(--rose);color:#fff;border:none;padding:12px 32px;border-radius:99px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 4px 16px #ff17444d}.kb-body{width:100%;max-width:1200px;display:flex;gap:20px;flex:1;min-height:0}.kb-keyboard-panel{flex:3;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:16px;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 4px 20px #0003}.kb-log-panel{flex:1;background:#0a0a0a;border:1px solid var(--border-bright);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;min-width:250px}.kb-log-header{padding:12px 16px;background:var(--surface-3);font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text-secondary);border-bottom:1px solid var(--border-bright)}.kb-log-body{flex:1;padding:12px;overflow-y:auto;font-family:var(--font-mono);font-size:12px;color:#a0a0a0;display:flex;flex-direction:column;gap:6px}.kb-log-footer{padding:8px;text-align:center;border-top:1px solid var(--border-bright)}.kb-reset-btn{background:transparent;border:1px solid var(--text-muted);color:var(--text-secondary);padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;font-family:var(--font-display)}.kb-row{display:flex;gap:6px;justify-content:center}.kb-key{background:var(--surface-3);border:1px solid var(--border-bright);border-radius:6px;color:var(--text-secondary);font-family:var(--font-mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;height:48px;min-width:48px;transition:all .1s;user-select:none;box-shadow:0 4px 6px #0003}.kb-key.tested{background:#00c85326;border-color:#00c85366;color:var(--green)}.kb-key.active{background:var(--green);border-color:var(--green);color:#000;transform:translateY(2px);box-shadow:0 0 16px #00c85399;z-index:2}.kb-spacer{width:24px}.k-tab{width:72px}.k-caps{width:84px}.k-shift-l{width:108px}.k-shift-r{width:130px}.k-ctrl{width:64px}.k-space{width:300px}.k-enter{width:108px}.k-backspace{width:96px}.kb-wrap{display:flex;gap:16px;justify-content:center;align-items:flex-start}.kb-main{flex:1;min-width:0}.kb-numpad{width:260px}.kb-numpad .kb-row{justify-content:center}.k-np0{width:104px}.k-np-enter{width:84px}.kb-seo{padding-top:80px;border-top:1px solid var(--border-subtle)}@media (max-width: 768px),(pointer: coarse){.kb-overlay.kb-mobile .kb-keyboard-panel{display:none!important}.kb-overlay.kb-mobile.kb-show-kbd .kb-keyboard-panel{display:flex!important}.kb-overlay.kb-mobile .kb-body{gap:0!important}.kb-overlay.kb-mobile .kb-log-panel{flex:1!important;min-width:0!important}.kb-overlay.kb-mobile .kb-layout-controls{display:none!important}.kb-overlay.kb-mobile.kb-show-kbd .kb-layout-controls{display:flex!important}}