body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:#0f172a;color:#e5e7eb}.hand svg *{fill:#777}.hand svg .active-finger,.active-finger{fill:#4caf50!important;filter:drop-shadow(0 0 6px #4caf50)}.keyboard-wrapper{display:flex;justify-content:center;margin-top:24px}.keyboard{display:inline-flex;flex-direction:column;gap:10px;padding:18px;background:#111;border-radius:16px;box-shadow:0 20px 40px #0009,inset 0 1px #ffffff0d;-webkit-user-select:none;user-select:none;width:max-content;transform:scale(1.15)}.keyboard-row{display:flex;gap:8px;flex-wrap:nowrap}.key{position:relative;height:54px;min-width:48px;flex:0 0 auto;background:linear-gradient(180deg,#2a2a2a,#161616);border-radius:10px;color:#eee;font-size:14px;box-shadow:0 4px #000,0 8px 20px #00000080;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;display:flex;align-items:center;justify-content:center}.key.modifier{background:linear-gradient(180deg,#1f1f1f,#0f0f0f);color:#bbb;font-size:13px;min-width:72px}.key[style*="flex: 1.5"]{min-width:72px}.key[style*="flex: 1.75"]{min-width:84px}.key[style*="flex: 2"]{min-width:96px}.key[style*="flex: 2.25"]{min-width:110px}.key[style*="flex: 6"]{min-width:300px}.key.active{transform:translateY(4px);box-shadow:0 2px #000,0 4px 8px #0006;background:linear-gradient(180deg,#3a3a3a,#1a1a1a)}.key.expected{outline:2px solid #4caf50;box-shadow:0 0 0 2px #4caf50,0 0 14px #4caf50d9}.key.wrong{background:linear-gradient(180deg,#4a1a1a,#2a0f0f);animation:wrongFlash .2s ease}@keyframes wrongFlash{0%{box-shadow:0 0 14px #ff5050e6}to{box-shadow:none}}.key-inner{width:100%;height:100%;position:relative}.key-shift{position:absolute;top:6px;left:8px;font-size:11px;opacity:.6}.key-main{position:absolute;bottom:6px;right:8px;font-size:15px}.key .key-main:empty:after{content:"Space";opacity:.3;font-size:13px}.practice-page{min-height:calc(100vh - 60px);display:flex;justify-content:center;align-items:center}.practice-container{width:100%;max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:28px}.practice-text{font-size:24px;letter-spacing:1px;text-align:center}.practice-text .current{color:#4caf50}.practice-text .wrong{color:#ef4444}.hands-area{display:flex;gap:60px;opacity:.6;transform:scale(.85)}.mode-selector a{padding:8px 16px;border-radius:8px;color:#aaa;text-decoration:none}.mode-selector a.active{background:#4caf50;color:#000}