.keyboard-layout{display:grid;gap:10px;grid-template-columns:repeat(15,minmax(0,1fr))}.keyboard-row{display:contents}.key{min-height:64px;padding:12px;border-radius:18px;background:#94a3b814;border:1px solid var(--border);display:grid;place-items:center;transition:transform var(--transition),background-color var(--transition),border-color var(--transition),color var(--transition);font-family:var(--font-mono);font-size:.95rem;position:relative}.key.large{grid-column:span 2}.key.xlarge{grid-column:span 3}.key.highlight-current{background:var(--accent-soft);border-color:var(--accent)}.key.highlight-pressed{background:linear-gradient(135deg,#22c55e,#0ea5e9);color:#fff;transform:translateY(1px)}.key.finger-1{background:#3b82f61f}.key.finger-2{background:#0ea5e91f}.key.finger-3{background:#22c55e1f}.key.finger-4{background:#f973161f}.key.finger-5{background:#f43f5e1f}.key span{display:block}.key .finger-label{position:absolute;top:8px;right:10px;font-size:.65rem;color:var(--text-muted)}.caps-warning{display:flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:16px;background:#ef44441f;color:#f87171;margin-top:16px;font-size:.95rem}@media (max-width: 1200px){.main-grid{grid-template-columns:1fr}.lesson-panel{grid-column:auto}}@media (max-width: 900px){.app-shell{padding:20px}.app-header,.card-panel{padding:18px}.typing-chars{gap:8px;max-height:280px}.char-box{display:flex;justify-content:center;align-items:center;width:34px;height:42px;border-radius:8px;background:transparent;color:var(--text);transition:.15s}.typing-input-wrapper{gap:12px}.stats-grid{grid-template-columns:1fr 1fr}}@media (max-width: 700px){.app-shell{padding:16px}.app-header{flex-direction:column;align-items:flex-start}.lesson-controls,.typing-actions,.settings-buttons{width:100%;justify-content:stretch}.lesson-controls button,.typing-actions button,.settings-buttons button{flex:1}.typing-chars{max-height:220px}.keyboard-layout{grid-template-columns:repeat(10,minmax(0,1fr))}}@media (max-width: 540px){.panel-header,.typing-header,.settings-header{flex-direction:column;align-items:stretch}.keyboard-layout{gap:8px}.key{min-height:52px}#typing-input{min-height:150px}}@media (max-width:1200px){.main-grid{display:flex;flex-direction:column;gap:16px}.stats-panel,.typing-panel,.lesson-panel,.keyboard-panel{width:100%}}@media (max-width:900px){.header-actions{width:100%;display:flex;justify-content:flex-end;flex-wrap:wrap}.typing-chars{gap:6px;padding:12px}.char-box{width:32px;height:40px;font-size:.95rem}}@media (max-width:700px){.app-header{flex-direction:column;align-items:flex-start}.lesson-controls,.typing-actions,.settings-buttons{display:grid;grid-template-columns:repeat(2,1fr)}.lesson-controls button,.typing-actions button,.settings-buttons button{width:100%;min-width:140px}#keyboard-layout{grid-template-columns:repeat(10,minmax(0,1fr))}}@media (max-width:540px){.stats-grid{grid-template-columns:1fr}.popup-actions{flex-direction:column}.popup-actions>*{width:100%}#typing-input,.custom-lesson-panel textarea{min-height:100px}}.primary-button,.secondary-button,.icon-button,.settings-option,.lesson-card,.key{transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}.lesson-card,.popup-card,.settings-card,.stats-panel,.keyboard-panel,.typing-panel{animation:fadeInUp .4s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.char-box{animation:fadeInChar .22s ease}@keyframes fadeInChar{0%{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}.popup-card,.settings-card{animation:popIn .28s ease}@keyframes popIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.progress-bar{transition:width .3s ease}