.main-content{background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.typewrite-card{background:var(--bi-surface);border-radius:12px;box-shadow:0 4px 20px #0000001a;overflow:hidden}.typewrite-tabs{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-strong) 100%);border-bottom:none;padding:0 1rem}.typewrite-tabs .nav-link{color:#fffc;border:none;padding:1rem 1.5rem;font-weight:500;transition:all .3s ease}.typewrite-tabs .nav-link:hover{color:#fff;background:#ffffff1a}.typewrite-tabs .nav-link.active{color:var(--brand);background:var(--bi-surface);border-radius:8px 8px 0 0}.typewrite-content{padding:2rem;min-height:600px}.letter-practice{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:500px;background:radial-gradient(circle,#444,#000);border-radius:12px;padding:3rem}.letter-display{font-size:200px;font-weight:700;color:#90ee90;text-shadow:0 0 50px rgba(144,238,144,.5);transition:all .2s ease;line-height:1;margin-bottom:2rem}.letter-display.error{color:#ff6b6b;text-shadow:0 0 50px rgba(255,107,107,.5);animation:shake .3s ease}.letter-display.success{color:#51cf66;text-shadow:0 0 50px rgba(81,207,102,.5);animation:pulse .3s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.letter-hint{font-size:1.2rem;color:#888;margin-bottom:2rem}.letter-stats{display:flex;gap:2rem;margin-bottom:2rem}.stat-item{font-size:1.1rem;color:#fff;background:#ffffff1a;padding:.5rem 1rem;border-radius:20px}.keyboard-training{display:flex;flex-direction:column;gap:1.5rem}.prompt-area{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-strong) 100%);padding:1.5rem;border-radius:12px;text-align:center}.prompt-text{color:#fff;font-size:1.3rem;font-weight:500}.prompt-area.keyboard-prompt{background:linear-gradient(135deg,#2d3436,#636e72);padding:1rem 2rem;display:flex;align-items:center;justify-content:center;gap:1.5rem}.prompt-label{color:#b2bec3;font-size:1.1rem;font-weight:500}.prompt-key-display{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-strong) 100%);color:#fff;font-size:2.5rem;font-weight:700;min-width:80px;min-height:80px;display:flex;align-items:center;justify-content:center;border-radius:12px;box-shadow:0 4px 15px rgba(var(--brand-rgb),.4);text-transform:uppercase;animation:key-pulse 1.5s infinite}@keyframes key-pulse{0%,to{transform:scale(1);box-shadow:0 4px 15px rgba(var(--brand-rgb),.4)}50%{transform:scale(1.05);box-shadow:0 6px 25px rgba(var(--brand-rgb),.6)}}.prompt-text span{font-size:1.5rem;font-weight:700;letter-spacing:.5rem;background:#fff3;padding:.5rem 1rem;border-radius:8px}.stats-area{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.stat-box{background:var(--bi-surface-2);padding:1rem 1.5rem;border-radius:10px;text-align:center;min-width:120px}.stat-label{display:block;font-size:.875rem;color:var(--bi-text-muted);margin-bottom:.25rem}.stat-value{display:block;font-size:1.25rem;font-weight:600;color:var(--brand)}.keyboard-area{background:#2d2d2d;padding:1.5rem;border-radius:12px;display:flex;flex-direction:column;gap:.5rem;box-shadow:0 10px 30px #0000004d}.keyboard-row{display:flex;justify-content:center;gap:.4rem}.key{width:50px;height:50px;background:linear-gradient(180deg,#4a4a4a,#3a3a3a);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .1s ease;box-shadow:0 4px #1a1a1a,0 5px 10px #0000004d;position:relative}.key:hover{background:linear-gradient(180deg,#5a5a5a,#4a4a4a)}.key:active,.key.active{transform:translateY(4px);box-shadow:0 0 #1a1a1a,0 1px 5px #0000004d}.key .shift{font-size:.625rem;color:#aaa}.key .main{font-size:1rem}.key-backspace{width:90px}.key-tab{width:70px}.key-caps{width:80px}.key-enter{width:90px}.key-shift-left{width:100px}.key-shift-right{width:120px}.key-ctrl,.key-win,.key-alt{width:60px}.key-space{width:320px}.key-menu{width:60px}.key.finger1{border-bottom:3px solid #ff6b6b}.key.finger2{border-bottom:3px solid #ffd93d}.key.finger3{border-bottom:3px solid #6bcf7f}.key.finger4{border-bottom:3px solid #4d96ff}.key.finger5{border-bottom:3px solid #9b59b6}.key.hint{animation:hint-pulse 1s infinite}@keyframes hint-pulse{0%,to{box-shadow:0 4px #1a1a1a,0 0 20px rgba(var(--brand-rgb),.5);border-color:var(--brand)}50%{box-shadow:0 4px #1a1a1a,0 0 40px rgba(var(--brand-rgb),.8);border-color:var(--brand-strong)}}.key.correct{background:linear-gradient(180deg,#51cf66,#40c057)}.key.wrong{background:linear-gradient(180deg,#ff6b6b,#fa5252);animation:shake .3s ease}.practice-text-area{background:var(--bi-surface-2);padding:1.5rem;border-radius:12px;min-height:100px}.practice-text{font-family:Courier New,monospace;font-size:1.5rem;line-height:2;text-align:center;letter-spacing:.1rem}.practice-text .char{padding:.25rem .5rem;border-radius:4px;transition:all .2s ease}.practice-text .char.correct{background:#d3f9d8;color:#2b8a3e}.practice-text .char.wrong{background:#ffe3e3;color:#c92a2a}.practice-text .char.current{background:var(--brand);color:#fff;animation:cursor-blink 1s infinite}@keyframes cursor-blink{0%,to{opacity:1}50%{opacity:.5}}.typing-game{position:relative}.game-container{background:linear-gradient(180deg,#1a1a2e,#16213e);border-radius:12px;height:500px;position:relative;overflow:hidden}.game-letters{position:absolute;inset:0}.game-letter{position:absolute;font-size:2rem;font-weight:700;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.5);animation:fall linear}.game-letter.speed-slow{color:#69db7c;text-shadow:0 0 15px rgba(105,219,124,.8),0 0 30px rgba(105,219,124,.4)}.game-letter.speed-medium{color:#ffd43b;text-shadow:0 0 15px rgba(255,212,59,.8),0 0 30px rgba(255,212,59,.4)}.game-letter.speed-fast{color:#ff922b;text-shadow:0 0 15px rgba(255,146,43,.8),0 0 30px rgba(255,146,43,.4)}.game-letter.speed-extreme{color:#ff6b6b;text-shadow:0 0 20px rgba(255,107,107,1),0 0 40px rgba(255,107,107,.6)}@keyframes fall{0%{transform:translateY(-50px)}to{transform:translateY(550px)}}.game-board{position:absolute;bottom:20px;left:20px;background:#00000080;padding:1rem 1.5rem;border-radius:10px}.score-display{display:flex;flex-direction:column;align-items:center}.score-label{font-size:.875rem;color:#aaa}.score-value{font-size:2rem;font-weight:700;color:#ffd93d}.game-over{position:absolute;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;border-radius:12px}.game-over-content{text-align:center;color:#fff}.game-over-content h2{font-size:2.5rem;margin-bottom:1rem}.game-over-content p{font-size:1.5rem;margin-bottom:2rem}.game-controls{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1.5rem}.game-hint{color:var(--bi-text-muted);font-size:.95rem}@media (max-width: 1200px){.key{width:45px;height:45px;font-size:.8rem}.key-space{width:280px}}@media (max-width: 992px){.typewrite-content{padding:1rem}.letter-display{font-size:150px}.keyboard-area{padding:1rem;overflow-x:auto}.keyboard-row{min-width:800px}.key{width:40px;height:40px;font-size:.75rem}.key-space{width:200px}.key-shift-left{width:80px}.key-shift-right{width:100px}}@media (max-width: 576px){.letter-display{font-size:100px}.letter-stats{flex-direction:column;gap:.5rem}.stats-area{flex-direction:column;align-items:stretch}.stat-box{display:flex;justify-content:space-between;align-items:center}}html[data-theme=dark] .main-content{background:linear-gradient(135deg,#0f172a,#1b2438)}