.lesson-card{background:#fff;border-radius:10px;padding:15px;box-shadow:0 4px 20px #0003;transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden}.lesson-card:not(.locked):hover{transform:translateY(-4px);box-shadow:0 8px 30px #0000004d}.lesson-card.locked{opacity:.6;cursor:not-allowed}.lesson-card.completed{border:2px solid #28c840}.lock-overlay{position:absolute;top:10px;right:10px;font-size:1em;opacity:.5}.completion-badge{position:absolute;top:10px;right:10px;width:24px;height:24px;background:#28c840;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9em}.lesson-icon{font-size:2em;margin-bottom:6px}.lesson-title{font-size:1.1em;color:#333;margin-bottom:6px}.lesson-description{color:#666;line-height:1.3;margin-bottom:10px;min-height:36px;font-size:.85em}.lesson-meta{display:flex;gap:10px;margin-bottom:12px;font-size:.75em}.difficulty{padding:2px 8px;border-radius:10px;font-weight:600;text-transform:uppercase;font-size:.65em;letter-spacing:.5px}.difficulty.beginner{background:#e3f2fd;color:#1976d2}.difficulty.intermediate{background:#fff3e0;color:#f57c00}.difficulty.advanced{background:#fce4ec;color:#c2185b}.duration{color:#666;display:flex;align-items:center;gap:4px}.start-button{width:100%;padding:8px 16px;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:.9em;font-weight:600;cursor:pointer;transition:all .2s}.start-button:hover{background:#5568d3;transform:translateY(-2px)}.start-button:active{transform:translateY(0)}.lesson-card.locked .start-button{display:none}.homepage{max-width:1200px;margin:0 auto;padding:10px}.hero{text-align:center;margin-bottom:15px}.hero-title{font-size:2.5em;color:#fff;margin-bottom:3px;text-shadow:0 4px 20px rgba(0,0,0,.3)}.hero-subtitle{font-size:1em;color:#ffffffe6;margin-bottom:5px;font-weight:500}.hero-description{font-size:.85em;color:#fffc;max-width:600px;margin:0 auto;line-height:1.4}.lessons-section{margin-bottom:15px}.section-title{font-size:1.3em;color:#fff;margin-bottom:12px;text-align:center}.lessons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:900px;margin:0 auto}.homepage-footer{text-align:center;padding:15px;border-top:1px solid rgba(255,255,255,.2)}.homepage-footer p{color:#ffffffb3;font-size:.8em}.homepage-footer a{color:#fff;text-decoration:none;font-weight:500;transition:color .2s}.homepage-footer a:hover{color:#fff;text-decoration:underline}@media (max-width: 768px){.hero-title{font-size:2em}.lessons-grid{grid-template-columns:1fr}}.tutorial-panel{background:#fff;border-radius:12px;padding:30px;box-shadow:0 20px 60px #0000004d;position:sticky;top:20px}.tutorial-panel h1{font-size:2.5em;color:#667eea;margin-bottom:5px}.subtitle{color:#666;margin-bottom:30px;font-size:.9em}.tutorial-content h2{color:#333;margin-bottom:15px;font-size:1.3em}.tutorial-content p{color:#555;line-height:1.6;margin-bottom:15px}.btn-primary{background:#667eea;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:1em;cursor:pointer;transition:all .2s;width:100%;margin-top:10px}.btn-primary:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-primary:active{transform:translateY(0)}.hotkey{background:#f0f0f0;padding:4px 8px;border-radius:4px;font-family:Monaco,Courier New,monospace;font-weight:700;color:#667eea;border:1px solid #ddd}@media (max-width: 1024px){.tutorial-panel{position:relative;top:0}}.window{position:absolute;background:#2d2d3d;border-radius:8px;box-shadow:0 4px 20px #00000080;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.window.focused{border:2px solid #667eea;box-shadow:0 0 0 3px #667eea4d,0 4px 20px #00000080}.window-titlebar{background:#3d3d4d;padding:10px 15px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #4d4d5d}.window-buttons{display:flex;gap:6px}.window-button{width:12px;height:12px;border-radius:50%}.window-button.close{background:#ff5f57}.window-button.minimize{background:#febc2e}.window-button.maximize{background:#28c840}.window-title{color:#fff;font-size:.85em;flex:1}.window-content{padding:20px;color:#aaa;font-size:.9em}.desktop{background:#1e1e2e;border-radius:12px;min-height:600px;min-width:900px;box-shadow:0 20px 60px #0000004d;position:relative;overflow:hidden}.workspace-indicator{position:absolute;top:15px;right:15px;background:#ffffff1a;padding:8px 16px;border-radius:20px;display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.workspace-label{color:#888;font-size:.85em}.workspace-name{color:#fff;font-weight:700;font-size:1.1em}.windows-container{position:relative;width:100%;height:600px;padding:20px}.keyboard-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;padding:30px 50px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;transition:opacity .3s}.keyboard-hint.hidden{opacity:0;pointer-events:none}.key-display{font-size:2em;color:#667eea;font-weight:700;text-align:center}@media (max-width: 1024px){.desktop{min-width:100%}.windows-container{height:500px}}.progress-bar{background:#fff3;border-radius:10px;height:8px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-top:20px}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);width:0%;transition:width .5s ease}.lesson-container{max-width:1400px;width:100%;margin:0 auto;padding:20px}.back-button{background:#fff3;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:1em;cursor:pointer;transition:all .2s;margin-bottom:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-button:hover{background:#ffffff4d;transform:translate(-4px)}.lesson-content{display:grid;grid-template-columns:350px 1fr;gap:20px;align-items:start}@media (max-width: 1024px){.lesson-content{grid-template-columns:1fr}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}#root{min-height:100vh;display:flex;align-items:center;justify-content:center}body{margin:0;padding:0}