#keyboard-ninja-v6{max-width:1100px;margin:30px auto;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033}
#keyboard-ninja-v6 *{box-sizing:border-box}.kn6-hidden{display:none!important}.kn6-app{background:#f5f7fb;border-radius:24px;padding:22px}
.kn6-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.kn6-brand{font-size:30px;font-weight:800}.kn6-tagline{color:#64748b;margin-top:4px}
.kn6-langs{display:flex;gap:6px}.kn6-langs button,.kn6-auth-tabs button{border:1px solid #d7ddea;background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:700}.kn6-langs button.active,.kn6-auth-tabs button.active{background:#172033;color:#fff}
.kn6-card{background:#fff;border:1px solid #e4e8f0;border-radius:18px;padding:24px;box-shadow:0 5px 20px rgba(20,30,50,.05)}
.kn6-auth-tabs{display:flex;gap:8px;margin-bottom:22px}.kn6-form{max-width:560px;margin:auto}.kn6-form h2{margin:0 0 7px}.kn6-muted,.kn6-small{color:#64748b}.kn6-form label{display:block;font-weight:700;margin:14px 0 6px}.kn6-form input,.kn6-form select{width:100%;padding:12px 13px;border:1px solid #ccd3df;border-radius:10px;font-size:16px;background:#fff}
.kn6-primary{margin-top:20px;width:100%;padding:13px 16px;border:0;border-radius:11px;background:#172033;color:#fff;font-size:16px;font-weight:800;cursor:pointer}.kn6-primary:disabled{opacity:.55}
.kn6-message{margin-top:12px;min-height:20px;font-weight:600}.kn6-forgot{display:block;margin-top:12px;text-align:center;color:#334155}.kn6-profile{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.kn6-profile h2{margin:4px 0}.kn6-logout{white-space:nowrap}.kn6-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:25px}.kn6-stats>div{background:#fff;border:1px solid #e4e8f0;border-radius:15px;padding:16px}.kn6-stats span{display:block;color:#64748b;font-size:13px}.kn6-stats strong{display:block;font-size:27px;margin-top:5px}.kn6-section-title{margin:25px 0 12px}.kn6-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kn6-level{background:#fff;border:1px solid #e4e8f0;border-radius:16px;padding:17px;min-height:160px;display:flex;flex-direction:column}.kn6-level.done{border-color:#94a3b8}.kn6-level .num{font-size:13px;color:#64748b}.kn6-level h3{margin:7px 0}.kn6-level p{font-size:13px;color:#64748b;flex:1}.kn6-level button{padding:10px;border:0;border-radius:9px;background:#172033;color:#fff;font-weight:800;cursor:pointer}.kn6-level button:disabled{opacity:.55}.kn6-board{margin-top:28px}.kn6-board-head{display:flex;justify-content:space-between;gap:15px;align-items:baseline}.kn6-board-head h2{margin:0}.kn6-board-head span{font-size:12px;color:#64748b}.kn6-board-wrap{overflow:auto;margin-top:15px}.kn6-board table{width:100%;border-collapse:collapse;min-width:760px}.kn6-board th,.kn6-board td{padding:11px 8px;border-bottom:1px solid #edf0f5;text-align:left}.kn6-board th{font-size:12px;color:#64748b}.kn6-toast{position:fixed;right:20px;bottom:20px;background:#172033;color:#fff;padding:12px 16px;border-radius:12px;display:none;z-index:99999}
@media(max-width:800px){.kn6-levels{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.kn6-app{padding:14px}.kn6-top{align-items:flex-start}.kn6-brand{font-size:24px}.kn6-stats{grid-template-columns:1fr}.kn6-levels{grid-template-columns:1fr}.kn6-profile{align-items:flex-start;flex-direction:column}}

/* Level 1 game */
.kn6-game-overlay{position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:999999;display:flex;align-items:center;justify-content:center;padding:16px}
.kn6-game-modal{width:min(1000px,100%);max-height:94vh;overflow:auto;background:#fff;border-radius:24px;padding:22px;box-shadow:0 25px 80px rgba(0,0,0,.25)}
.kn6-game-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.kn6-game-head h2{margin:3px 0 0}.kn6-game-close{border:0;background:#eef2f7;border-radius:50%;width:40px;height:40px;font-size:28px;cursor:pointer}
.kn6-game-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0}.kn6-game-stats span{background:#f5f7fb;border-radius:11px;padding:10px;text-align:center;font-weight:800}
.kn6-target-label{text-align:center;color:#64748b;margin-top:12px}.kn6-target{font-size:76px;line-height:1;font-weight:900;text-align:center;margin:8px 0 4px;letter-spacing:2px}.kn6-feedback{text-align:center;min-height:28px;font-weight:800}
.kn6-keyboard{width:100%;max-width:1120px;margin:18px auto 8px;display:flex;flex-direction:column;gap:7px;padding:10px 8px 12px;background:#eef1f5;border:1px solid #d7dce5;border-radius:18px;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}.kn6-key-row{display:flex;gap:5px;align-items:stretch}.kn6-key{height:48px;flex:1 1 0;min-width:0;padding:0 6px;border:1px solid #cbd3df;background:#f8fafc;border-radius:8px;font-weight:800;font-size:14px;line-height:1.05;box-shadow:0 2px 0 #c7cfdb;cursor:default}.kn6-key.symbol{font-size:12px;font-weight:700;line-height:1.05}.kn6-key.special{flex:0 0 58px}.kn6-key.backspace{flex:1.7 1 0}.kn6-key.tab{flex:1.35 1 0}.kn6-key.caps{flex:1.6 1 0}.kn6-key.enter{flex:1.65 1 0}.kn6-key.shift{flex:2.05 1 0}.kn6-key.ctrl{flex:1.15 1 0}.kn6-key.space{flex:5.2 1 0}.kn6-row-1{padding-left:4.3%}.kn6-row-2{padding-left:7.2%}.kn6-row-3{padding-left:10.2%}.kn6-row-4{padding-left:6.2%;padding-right:6.2%}.kn6-key.home-dot-key{position:relative}.kn6-key.home-dot-key::after{content:"";position:absolute;left:50%;bottom:7px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#172033}.kn6-key.target{outline:4px solid #64748b;transform:translateY(-2px);z-index:2}.kn6-key.correct{outline:4px solid #334155}.kn6-key:disabled{opacity:1}.kn6-game-help{text-align:center;color:#64748b;font-size:13px;margin-top:14px}
@media(max-width:900px){.kn6-key{height:44px;font-size:12px}.kn6-key.special{flex-basis:48px}.kn6-row-1{padding-left:3%}.kn6-row-2{padding-left:5%}.kn6-row-3{padding-left:7%}.kn6-row-4{padding-left:4%;padding-right:4%}}
@media(max-width:700px){.kn6-game-stats{grid-template-columns:repeat(2,1fr)}.kn6-keyboard{padding:7px 4px 9px;gap:4px}.kn6-key-row{gap:3px}.kn6-key{height:37px;padding:0 3px;font-size:10px;border-radius:6px}.kn6-key.symbol{font-size:8px}.kn6-key.special{flex-basis:38px}.kn6-row-1{padding-left:2%}.kn6-row-2{padding-left:3%}.kn6-row-3{padding-left:4%}.kn6-row-4{padding-left:2%;padding-right:2%}.kn6-key.home-dot-key::after{width:5px;height:5px;margin-left:-2.5px;bottom:5px}.kn6-target{font-size:60px}}

.kn6-keyboard-note{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;color:#64748b;font-size:11px;margin-top:8px}.kn6-keyboard-note span{background:#fff;border:1px solid #e1e5ec;border-radius:999px;padding:5px 9px}
.kn6-stage-info{text-align:center;font-size:13px;color:#64748b;margin:5px 0 10px}.kn6-stage-label{font-weight:800}

.kn6-finger{text-align:center;min-height:32px;font-weight:800;margin:6px 0 12px}.kn6-finger .hand{font-size:20px}
.kn6-finger .hint{font-size:13px;color:#64748b;margin-left:6px}

.kn6-part{text-align:center;font-size:13px;font-weight:800;color:#64748b;margin:3px 0 10px}

/* V6.4.2 visual learning UI */
.kn6-instruction-panel{max-width:1120px;margin:12px auto 16px;display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:stretch}
.kn6-instruction-copy{background:#fff;border:1px solid #e2e7ef;border-radius:18px;padding:18px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:155px}
.kn6-instruction-label{font-size:18px;color:#334155;margin-bottom:2px}
.kn6-target-large{font-size:68px;font-weight:900;line-height:1.05;color:#172033;min-height:70px}
.kn6-remaining{font-size:13px;color:#64748b;margin-top:3px}
.kn6-finger-card{background:#fff0f5;border:1px solid #f1ccd9;border-radius:18px;padding:12px 18px;display:grid;grid-template-columns:108px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.kn6-finger-title{font-weight:900;font-size:18px;color:#172033;grid-column:2;grid-row:1}
.kn6-hand-wrap{grid-column:1;grid-row:1 / span 2;display:flex;align-items:center;justify-content:center}
.kn6-hand-svg{width:105px;height:120px}
.kn6-hand-outline{fill:#ffe1c7;stroke:#172033;stroke-width:4;stroke-linejoin:round}
.kn6-finger-highlight{fill:#f06b82;stroke:#172033;stroke-width:3}
.kn6-palm-line{fill:none;stroke:#b77b68;stroke-width:2.5;stroke-linecap:round;opacity:.65}
.kn6-finger-use{font-size:13px;line-height:1.35;color:#475569;grid-column:2;grid-row:2}
.kn6-keyboard-legend{max-width:1120px;margin:8px auto 0;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;align-items:center;color:#475569;font-size:12px}
.kn6-keyboard-legend>span{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e1e5ec;border-radius:999px;padding:5px 9px}
.kn6-legend-dot{width:12px;height:12px;border-radius:4px;display:inline-block;border:1px solid rgba(0,0,0,.08)}
.kn6-blue{background:#bde7ff}.kn6-green{background:#baf2bd}.kn6-pink{background:#f6bfd7}.kn6-gray{background:#dfe4eb}
.kn6-fj-demo{border:1px solid #94a3b8;border-radius:6px;padding:2px 5px;font-weight:900;background:#f8fafc}
.kn6-keyboard .kn6-key.zone-top{background:#bde7ff;border-color:#86cfee}
.kn6-keyboard .kn6-key.zone-home{background:#baf2bd;border-color:#7edc84}
.kn6-keyboard .kn6-key.zone-bottom{background:#f6bfd7;border-color:#e7a1bf}
.kn6-keyboard .kn6-key.zone-other{background:#f8fafc;border-color:#cbd3df}
.kn6-keyboard .kn6-key.home-dot-key::after{background:#172033}
.kn6-keyboard .kn6-key.target{box-shadow:0 0 0 3px #f3c74f inset,0 2px 0 #d0a92d}
@media(max-width:800px){
 .kn6-instruction-panel{grid-template-columns:1fr}
 .kn6-finger-card{min-height:130px}
}

.kn6-game-help{display:none!important}