*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--bg-color);transition:background-color .3s ease,color .3s ease}.container{max-width:900px;margin:0 auto;padding:20px}h1{text-align:center;margin-bottom:20px;color:var(--text-color)}.language-selector{display:flex;justify-content:center;margin-bottom:20px}.language-selector a{padding:8px 16px;margin:0 5px;text-decoration:none;color:var(--primary-color);border-radius:4px;transition:background-color .3s}.language-selector a:hover{background-color:var(--lighter-bg)}.language-selector a.active{background-color:var(--primary-color);color:#fff}.setup-panel{background-color:var(--card-bg);border-radius:5px;padding:20px;box-shadow:var(--card-shadow);margin-bottom:20px}.form-group{margin-bottom:15px}.checkbox-group{display:flex;align-items:center;margin-bottom:10px}.checkbox-group input[type=checkbox]{margin-right:10px;width:18px;height:18px;cursor:pointer}.checkbox-group label{display:inline;cursor:pointer;font-weight:400;color:var(--text-color)}label{display:block;margin-bottom:5px;font-weight:600;color:var(--text-color)}select{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:4px;font-size:16px;background-color:var(--bg-color);color:var(--text-color)}button{background-color:var(--primary-color);color:#fff;border:none;padding:10px 15px;font-size:16px;border-radius:4px;cursor:pointer;transition:background-color .3s}button:hover{background-color:var(--primary-hover)}#generate-btn{width:100%;margin-top:10px;background-color:var(--success-color)}#generate-btn:hover{background-color:var(--success-hover)}.hidden{display:none}#loading{text-align:center;padding:30px;color:var(--text-color)}.spinner{border:4px solid var(--spinner-border);border-radius:50%;border-top:4px solid var(--primary-color);width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 15px}.progress-bar{height:10px;background-color:var(--light-bg);border-radius:5px;margin-bottom:20px;overflow:hidden}#progress-indicator{height:100%;background-color:var(--primary-color);width:0%;transition:width .3s}#exercise-title{margin-bottom:10px;color:var(--text-color)}#exercise-description{background-color:var(--card-bg);padding:15px;border-radius:5px;margin-bottom:15px;box-shadow:var(--card-shadow);color:var(--text-color)}.editor-container{margin-bottom:15px}#code-editor{border-radius:5px;border:1px solid var(--border-color)}.button-group{display:flex;gap:10px;margin-bottom:15px}#run-btn{background-color:var(--info-color)}#run-btn:hover{background-color:var(--info-color);opacity:.9}#check-btn{background-color:var(--warning-color)}#check-btn:hover{background-color:var(--warning-color);opacity:.9}#next-btn{background-color:var(--success-color)}#next-btn:hover{background-color:var(--success-hover)}#console-output{background-color:var(--code-bg);color:var(--text-color);padding:15px;border-radius:5px;margin-bottom:15px;border:1px solid var(--border-color)}#output{font-family:monospace;white-space:pre-wrap}#feedback{padding:15px;border-radius:5px;margin-bottom:15px;background-color:var(--light-bg)}#results{text-align:center;background-color:var(--card-bg);padding:20px;border-radius:5px;box-shadow:var(--card-shadow);color:var(--text-color)}#score{font-size:18px;margin-bottom:15px;color:var(--text-color)}#restart-btn{background-color:var(--danger-color)}#restart-btn:hover{background-color:var(--danger-color);opacity:.9}.typing-trainer{width:100%;max-width:900px;margin:0 auto}.typing-trainer .description{margin-bottom:20px;line-height:1.5;color:var(--text-color)}.typing-trainer .start-btn{width:100%;margin-top:15px;background-color:var(--success-color)}.typing-trainer .start-btn:hover{background-color:var(--success-hover)}.typing-trainer .start-btn:disabled{background-color:var(--secondary-color);cursor:not-allowed}.typing-example-panel{background-color:var(--card-bg);border-radius:5px;padding:20px;box-shadow:var(--card-shadow);margin-bottom:20px}.example-description{background-color:var(--light-bg);padding:15px;border-radius:5px;margin-bottom:20px;color:var(--text-color)}.code-example-container,.user-input-container{margin-bottom:20px}.code-example-container h3,.user-input-container h3{margin-bottom:10px;color:var(--text-color)}.code-example-editor,.user-input-editor{border-radius:5px;border:1px solid var(--border-color);margin-bottom:15px}.typing-stats{background-color:var(--light-bg);padding:15px;border-radius:5px;margin-bottom:20px}.typing-stats h3{margin-top:0;margin-bottom:15px;color:var(--text-color)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.stat-item{display:flex;flex-direction:column}.stat-label{font-size:14px;color:var(--secondary-color);margin-bottom:5px}.stat-value{font-size:18px;font-weight:700;color:var(--text-color)}.typing-controls{display:flex;flex-direction:column;align-items:center}.completion-message{text-align:center;margin-bottom:20px}.completion-message h3{color:var(--success-color);margin-bottom:10px}.next-example-btn,.restart-btn{padding:10px 20px;font-size:16px;border-radius:4px;cursor:pointer;transition:background-color .3s}.next-example-btn{background-color:var(--success-color);color:#fff}.next-example-btn:hover{background-color:var(--success-hover)}.restart-btn{background-color:var(--warning-color);color:#212529}.restart-btn:hover{background-color:var(--warning-color);opacity:.9}.char-correct{color:var(--success-color)}.char-error{color:var(--danger-color);text-decoration:underline}.char-pending{color:var(--text-color);opacity:.5}:root{--bg-color: #ffffff;--text-color: #333333;--border-color: #dddddd;--primary-color: #007bff;--primary-hover: #0056b3;--secondary-color: #6c757d;--success-color: #28a745;--success-hover: #218838;--info-color: #17a2b8;--warning-color: #ffc107;--danger-color: #dc3545;--light-bg: #f8f9fa;--lighter-bg: #f0f0f0;--card-bg: #ffffff;--card-shadow: 0 2px 4px rgba(0, 0, 0, .1);--card-hover-shadow: 0 5px 15px rgba(0, 0, 0, .1);--tag-bg: #f0f0f0;--tag-color: #666666;--spinner-border: rgba(0, 0, 0, .1);--code-bg: #f8f9fa;--table-header-bg: #f2f2f2;--table-border: #dddddd;--table-even-row: #f8f9fa}[data-theme=dark]{--bg-color: #1e1e1e;--text-color: #e0e0e0;--border-color: #444444;--primary-color: #0d6efd;--primary-hover: #0b5ed7;--secondary-color: #6c757d;--success-color: #198754;--success-hover: #157347;--info-color: #0dcaf0;--warning-color: #ffc107;--danger-color: #dc3545;--light-bg: #2d2d2d;--lighter-bg: #383838;--card-bg: #2d2d2d;--card-shadow: 0 2px 4px rgba(0, 0, 0, .3);--card-hover-shadow: 0 5px 15px rgba(0, 0, 0, .5);--tag-bg: #444444;--tag-color: #e0e0e0;--spinner-border: rgba(255, 255, 255, .1);--code-bg: #2d2d2d;--table-header-bg: #383838;--table-border: #444444;--table-even-row: #333333}.container{background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}h1,h2,h3,h4,h5,h6,.form-group label{color:var(--text-color)}.form-group select,.form-group input[type=text],.form-group input[type=number]{background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color)}.setup-panel{background-color:var(--card-bg);border-radius:8px;padding:20px;box-shadow:var(--card-shadow);margin-bottom:20px}#generate-btn{background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;padding:10px 20px;cursor:pointer;transition:background-color .3s ease}#generate-btn:hover{background-color:var(--primary-hover)}.progress-bar{background-color:var(--light-bg);border-radius:4px;height:10px;margin-bottom:20px;overflow:hidden}#progress-indicator{background-color:var(--primary-color);height:100%;transition:width .3s ease}.button-group{display:flex;gap:10px;margin:15px 0}.button-group button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease}#run-btn{background-color:var(--info-color);color:#fff}#check-btn{background-color:var(--primary-color);color:#fff}#next-btn{background-color:var(--success-color);color:#fff}#restart-btn{background-color:var(--primary-color);color:#fff;padding:10px 20px;border:none;border-radius:4px;cursor:pointer}#console-output,#feedback{background-color:var(--light-bg);border-radius:8px;padding:15px;margin-top:15px}#console-output h3,#feedback h3{margin-top:0}#output{background-color:var(--code-bg);padding:10px;border-radius:4px;font-family:monospace;white-space:pre-wrap;overflow-x:auto}#feedback.success{background-color:#1987541a;border-left:4px solid var(--success-color)}#feedback.error{background-color:#dc35451a;border-left:4px solid var(--danger-color)}#results{text-align:center;padding:30px;background-color:var(--card-bg);border-radius:8px;box-shadow:var(--card-shadow)}#score{font-size:18px;margin-bottom:20px}.theme-switcher{display:flex;align-items:center;margin-left:15px}.theme-switcher button{background:none;border:none;cursor:pointer;font-size:20px;color:var(--text-color);padding:5px;transition:transform .3s ease}.theme-switcher button:hover{transform:rotate(30deg)}.mode-switcher{display:flex;justify-content:center;margin-bottom:20px;border-bottom:1px solid var(--border-color);padding-bottom:10px}.mode-switcher button{padding:8px 16px;margin:0 5px;background-color:var(--lighter-bg);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;font-size:14px;color:var(--text-color);transition:all .3s ease}.mode-switcher button.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-hover)}.mode-switcher button:hover:not(.active){background-color:var(--light-bg)}.exercise-manager{width:100%;max-width:1200px;margin:0 auto;color:var(--text-color)}.exercise-manager .controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap}.exercise-manager .filters{display:flex;gap:15px;flex-wrap:wrap}.exercise-manager .create-btn{padding:8px 16px;background-color:var(--success-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.exercise-manager .create-btn:hover{background-color:var(--success-hover)}.exercise-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:20px}.exercise-card,.exercise-item{border:1px solid var(--border-color);border-radius:8px;padding:15px;background-color:var(--card-bg);box-shadow:var(--card-shadow);transition:transform .3s ease,box-shadow .3s ease}.exercise-card:hover,.exercise-item:hover{transform:translateY(-5px);box-shadow:var(--card-hover-shadow)}.exercise-card h3,.exercise-item h3,.exercise-header h3{margin-top:0;margin-bottom:10px;font-size:18px;color:var(--text-color)}.exercise-card .tags,.exercise-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:15px}.exercise-card .tag,.tag{background-color:var(--tag-bg);color:var(--tag-color);padding:3px 8px;border-radius:12px;font-size:12px}.exercise-card .actions,.exercise-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px;margin-top:10px}.exercise-card .actions button,.exercise-actions button{flex:1;padding:5px 10px;border:none;border-radius:4px;cursor:pointer;font-size:13px;transition:background-color .3s ease}.exercise-card .actions button:nth-child(1),.exercise-actions button:nth-child(1),.button-primary{background-color:var(--info-color);color:#fff}.exercise-card .actions button:nth-child(2),.exercise-actions button:nth-child(2),.button-danger{background-color:var(--danger-color);color:#fff}.exercise-card .actions button:nth-child(3),.exercise-actions button:nth-child(3),.button-secondary{background-color:var(--secondary-color);color:#fff}.exercise-card .actions button:nth-child(4),.exercise-actions button:nth-child(4){background-color:var(--success-color);color:#fff}.exercise-card .actions button:hover,.exercise-actions button:hover{opacity:.9}.exercise-header{margin-bottom:10px}.exercise-content{margin:10px 0}.exercise-code{background-color:var(--code-bg);padding:10px;border-radius:4px;overflow-x:auto}.exercise-code pre{margin:0;white-space:pre-wrap;font-family:monospace}.exercise-code code{font-family:monospace}.exercise-edit-form,.exercise-create-form{background-color:var(--card-bg);border-radius:8px;padding:15px;margin-bottom:20px;box-shadow:var(--card-shadow)}.exercise-edit-form h3,.exercise-create-form h3{margin-top:0;margin-bottom:15px;color:var(--text-color)}.code-editor{font-family:monospace;background-color:var(--code-bg);color:var(--text-color)}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}.button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.button:hover{opacity:.9}.button:disabled{opacity:.5;cursor:not-allowed}.no-exercises{text-align:center;padding:30px;background-color:var(--light-bg);border-radius:8px;color:var(--secondary-color);font-style:italic}.exercise-viewer{background-color:var(--card-bg);border-radius:8px;padding:20px;box-shadow:var(--card-shadow);color:var(--text-color)}.exercise-viewer .viewer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}.exercise-viewer .viewer-header h2{margin:0;color:var(--text-color)}.exercise-viewer .actions{display:flex;gap:10px}.exercise-viewer .actions button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.exercise-viewer .back-btn{background-color:var(--secondary-color);color:#fff}.exercise-viewer .edit-btn{background-color:var(--warning-color);color:#212529}.exercise-viewer .practice-btn{background-color:var(--success-color);color:#fff}.exercise-viewer .actions button:hover{opacity:.9}.exercise-viewer .metadata{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:20px;background-color:var(--light-bg);padding:15px;border-radius:8px}.exercise-viewer .metadata-item{display:flex;flex-direction:column}.exercise-viewer .label{font-weight:700;color:var(--secondary-color);font-size:12px}.exercise-viewer .value{color:var(--text-color)}.exercise-viewer .tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:20px}.exercise-viewer .tag{background-color:var(--tag-bg);color:var(--tag-color);padding:3px 8px;border-radius:12px;font-size:12px}.exercise-viewer h3{margin-top:25px;margin-bottom:10px;color:var(--text-color);border-bottom:1px solid var(--border-color);padding-bottom:5px}.exercise-viewer .description-content{line-height:1.6}.exercise-viewer .code-block{background-color:var(--code-bg);padding:15px;border-radius:8px;overflow-x:auto;font-family:monospace;white-space:pre-wrap;margin:0}.exercise-viewer .test-cases-table{width:100%;border-collapse:collapse;margin-top:10px}.exercise-viewer .test-cases-table th,.exercise-viewer .test-cases-table td{border:1px solid var(--table-border);padding:8px 12px;text-align:left}.exercise-viewer .test-cases-table th{background-color:var(--table-header-bg);font-weight:700}.exercise-viewer .test-cases-table tr:nth-child(2n){background-color:var(--table-even-row)}.exercise-editor-container{background-color:var(--card-bg);border-radius:8px;padding:20px;box-shadow:var(--card-shadow);color:var(--text-color)}.exercise-editor-container h2{margin-top:0;margin-bottom:20px;color:var(--text-color);text-align:center}.exercise-editor{display:flex;flex-direction:column;gap:15px}.exercise-editor .form-group{display:flex;flex-direction:column}.exercise-editor label{margin-bottom:5px;font-weight:700;color:var(--text-color)}.exercise-editor input,.exercise-editor textarea,.exercise-editor select{padding:8px 12px;border:1px solid var(--border-color);border-radius:4px;font-size:14px;background-color:var(--bg-color);color:var(--text-color)}.exercise-editor textarea{resize:vertical;min-height:100px}.exercise-editor .description-container{display:flex;flex-direction:column;gap:10px}.exercise-editor .preview-btn{align-self:flex-start;padding:5px 10px;background-color:var(--secondary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px}.exercise-editor .description-preview{padding:15px;background-color:var(--light-bg);border:1px solid var(--border-color);border-radius:4px;margin-top:10px}.exercise-editor .code-editor{border:1px solid var(--border-color);border-radius:4px}.exercise-editor .test-case{display:flex;gap:10px;margin-bottom:10px;align-items:flex-end}.exercise-editor .test-input,.exercise-editor .test-output{flex:1}.exercise-editor .remove-test-btn{padding:8px 12px;background-color:var(--danger-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;height:36px}.exercise-editor .add-test-btn{padding:8px 12px;background-color:var(--info-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;margin-top:10px}.exercise-editor .form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.exercise-editor .save-btn{padding:10px 20px;background-color:var(--success-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.exercise-editor .cancel-btn{padding:10px 20px;background-color:var(--secondary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.exercise-editor button:hover{opacity:.9}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;color:var(--text-color)}.spinner{border:4px solid var(--spinner-border);border-radius:50%;border-top:4px solid var(--primary-color);width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.exercise-manager .controls{flex-direction:column;align-items:stretch;gap:15px}.exercise-manager .filters{flex-direction:column}.exercise-viewer .viewer-header{flex-direction:column;align-items:flex-start}.exercise-viewer .actions{width:100%;justify-content:space-between}.exercise-editor .test-case{flex-direction:column;align-items:stretch}.exercise-editor .remove-test-btn{width:100%;margin-top:5px}}.typing-trainer{display:flex;flex-direction:column;gap:1rem;padding:1rem;border-radius:8px;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-family, "Roboto Mono", monospace);max-width:1000px;margin:0 auto}.typing-trainer.dark{--bg-color: #1e1e1e;--text-color: #e0e0e0;--border-color: #444;--correct-color: #4caf50;--incorrect-color: #f44336;--remaining-color: #888;--button-bg: #333;--button-hover-bg: #444;--button-text: #fff;--input-bg: #2d2d2d;--input-border: #555;--stats-bg: #333}.typing-trainer.light{--bg-color: #f5f5f5;--text-color: #333;--border-color: #ddd;--correct-color: #4caf50;--incorrect-color: #f44336;--remaining-color: #888;--button-bg: #e0e0e0;--button-hover-bg: #d0d0d0;--button-text: #333;--input-bg: #fff;--input-border: #ccc;--stats-bg: #e9e9e9}.typing-header{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.typing-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.typing-header h2{margin:0;font-size:1.5rem;color:var(--text-color)}.typing-example-info{display:flex;flex-direction:column;gap:.25rem}.typing-example-number{font-size:.9rem;color:var(--text-color);opacity:.8}.typing-example-description{font-size:1.1rem;font-weight:500;color:var(--text-color)}.typing-actions{display:flex;gap:1rem;justify-content:center}.typing-button{padding:.75rem 1.5rem;border:none;border-radius:6px;background-color:var(--button-bg);color:var(--button-text);font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}.typing-button:hover{background-color:var(--button-hover-bg)}.typing-button:disabled{opacity:.7;cursor:not-allowed}.typing-button-next{background-color:#007bff;color:#fff}.typing-button-next:hover{background-color:#0069d9}.typing-button-restart{background-color:#6c757d;color:#fff}.typing-button-restart:hover{background-color:#5a6268}.typing-button-generate{background-color:#28a745;color:#fff}.typing-button-generate:hover{background-color:#218838}.typing-button-retry{background-color:#dc3545;color:#fff}.typing-button-retry:hover{background-color:#c82333}.typing-loading,.typing-error{text-align:center;padding:2rem;background-color:var(--stats-bg);border-radius:6px}.typing-loading-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:1rem;padding:1rem;background-color:var(--stats-bg);border-radius:6px}.typing-loading-inline p{margin-top:.5rem;margin-bottom:0;color:var(--text-color)}.typing-loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:var(--text-color);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.typing-error p{margin-bottom:1.5rem;color:var(--incorrect-color)}.typing-trainer .setup-panel{background-color:var(--stats-bg);border-radius:8px;padding:1.5rem;margin:1rem 0;max-width:500px;margin-left:auto;margin-right:auto}.typing-trainer .form-group{margin-bottom:1rem}.typing-trainer .form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-color)}.typing-trainer .form-group select{width:100%;padding:.5rem;border-radius:4px;border:1px solid var(--input-border);background-color:var(--input-bg);color:var(--text-color);font-size:1rem}.typing-trainer .checkbox-group{display:flex;align-items:center;gap:.5rem}.typing-trainer .checkbox-group input[type=checkbox]{margin:0}.typing-trainer .checkbox-group label{margin-bottom:0}.typing-trainer .checkbox-group label.disabled{opacity:.6;font-style:italic}.typing-trainer .radio-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.typing-trainer .radio-option{display:flex;align-items:center;gap:.5rem}.typing-trainer .radio-option input[type=radio]{margin:0}.typing-trainer .radio-option label{margin-bottom:0;cursor:pointer}.percentage-slider{width:100%;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000001a;border-radius:4px;outline:none}.typing-trainer.dark .percentage-slider{background:#fff3}.percentage-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#007bff;cursor:pointer}.percentage-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#007bff;cursor:pointer;border:none}.typing-button-start{background-color:#28a745;color:#fff;width:100%;margin-top:1rem}.typing-button-start:hover{background-color:#218838}.typing-button-back{background-color:#6c757d;color:#fff}.typing-button-back:hover{background-color:#5a6268}.mode-specific-settings{background-color:#00000008;padding:.75rem;border-radius:4px;margin-top:-.5rem;margin-bottom:1rem;border:1px solid rgba(0,0,0,.05)}.typing-trainer.dark .mode-specific-settings{background-color:#ffffff08;border:1px solid rgba(255,255,255,.05)}.setup-slider-container{display:flex;align-items:center;gap:1rem}.setup-slider{flex:1}.setup-slider-value{min-width:3rem;text-align:right}.typing-workspace{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.typing-code-display{background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:6px;padding:1rem;max-height:300px;overflow-y:auto;font-family:Roboto Mono,monospace;font-size:1rem;line-height:1.5;white-space:pre-wrap}.typing-code-display pre{margin:0}.typing-code-display code{font-family:inherit}.typing-code-hidden{display:flex;align-items:center;justify-content:center;min-height:150px;text-align:center;color:var(--text-color);opacity:.7;border:1px dashed var(--input-border)}.typing-input{background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:6px;padding:1rem;font-family:Roboto Mono,monospace;font-size:1rem;line-height:1.5;min-height:150px;resize:vertical;color:var(--text-color)}.typing-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.code-with-highlighting{font-family:Roboto Mono,monospace;line-height:1.5;white-space:pre-wrap}.code-line{height:1.5em;white-space:pre;padding:1px 0;position:relative;transition:background-color .2s ease}.typing-correct{color:var(--correct-color, #4caf50)}.typing-incorrect{color:#fff;background-color:#f44336;border-radius:2px;padding:0 2px;margin:0 -2px;position:relative}@keyframes errorPulse{0%{box-shadow:0 0 #f4433666}70%{box-shadow:0 0 0 5px #f4433600}to{box-shadow:0 0 #f4433600}}.typing-incorrect:after{content:"";position:absolute;inset:0;border-radius:2px;animation:errorPulse 1s ease-out}.typing-remaining{color:var(--remaining-color, #888)}.typing-hidden{color:#888;font-style:italic;opacity:.7;background-color:#0000000d;padding:0 4px;border-radius:2px}.typing-trainer.dark .typing-hidden{background-color:#ffffff0d}.code-line.completed-line{background-color:#4caf5014;border-radius:3px;border-left:3px solid var(--correct-color, #4caf50);padding-left:3px;margin-left:-3px}.code-line.partially-completed{position:relative}.code-line.partially-completed:after{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--correct-color, #4caf50);border-radius:0 2px 2px 0}@keyframes revealLine{0%{background-color:#007bff1a;transform:translateY(-2px)}to{background-color:transparent;transform:translateY(0)}}.code-line.newly-revealed{animation:revealLine .5s ease-out}.hints-mode{position:relative;margin-bottom:1.5rem}.hints-mode-description{margin-bottom:1rem;padding:.75rem;background-color:#ffffdce6;border-left:4px solid #f0c040;border-radius:4px;font-style:italic}.hints-mode .code-line{position:relative;font-family:Fira Code,monospace;white-space:pre-wrap;line-height:1.5}.hints-mode .code-line:has(.typing-correct){background-color:#00ff000d}.code-with-highlighting.hints-mode pre{position:relative;background-color:#f0f8ff0d;border-radius:4px;padding:1rem}@keyframes hints-pulse{0%{background-color:#ffff001a}50%{background-color:#ff03}to{background-color:#ffff001a}}.dark .hints-mode-description{background-color:#32320acc;border-left-color:#d0a020;color:#e0e0e0}.dark .hints-mode .code-line:has(.typing-correct){background-color:#00ff001a}.fill-blanks-mode{position:relative;margin-bottom:1.5rem}.fill-blanks-description{margin-bottom:1rem;padding:.75rem;background-color:#f0f8ffe6;border-left:4px solid #4080c0;border-radius:4px;font-style:italic}.fill-blanks-mode .code-line{position:relative;font-family:Fira Code,monospace;white-space:pre-wrap;line-height:1.5}.fill-blanks-mode .code-line:has(span){background-color:#f0f8ff0d}.fill-blanks-mode .___{text-decoration:underline;text-decoration-style:dotted;text-decoration-color:#666;color:#888}.fill-blanks-mode .code-line:has(.typing-correct){background-color:#00ff000d}@keyframes blank-correct{0%{background-color:#0f03}to{background-color:transparent}}.fill-blanks-mode .typing-correct-blank{animation:blank-correct 1s ease-out}.dark .fill-blanks-description{background-color:#14283ccc;border-left-color:#4080c0;color:#e0e0e0}.dark .fill-blanks-mode .code-line:has(.typing-correct){background-color:#00ff001a}.dark .fill-blanks-mode .___{text-decoration-color:#888;color:#aaa}.typing-mode-selector{display:flex;align-items:center;gap:.5rem}.typing-mode-selector label{font-size:.9rem;color:var(--text-color)}.typing-mode-selector select{padding:.25rem .5rem;border-radius:4px;border:1px solid var(--input-border);background-color:var(--input-bg);color:var(--text-color);font-size:.9rem}.partial-mode-message{background-color:#ffc10726;border-radius:6px;padding:.75rem;margin:.5rem 0;font-size:.9rem;text-align:center;font-weight:500;color:var(--text-color);border:1px solid rgba(255,193,7,.3)}.typing-trainer.light .partial-mode-message{border-color:#ffc10780;color:#664d00}.partial-mode-progress{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:.5rem;font-size:.8rem;color:var(--text-color);opacity:.8}.progress-dot{width:8px;height:8px;border-radius:50%;background-color:var(--input-border)}.progress-dot.active{background-color:var(--correct-color)}@keyframes fadeInHighlight{0%{background-color:#4caf5033}to{background-color:transparent}}.memory-timer{background-color:#007bff1a;border-radius:6px;padding:.75rem;margin:.5rem 0;font-size:.9rem;text-align:center;font-weight:500;color:var(--text-color)}.typing-trainer.dark .memory-timer{border:1px solid rgba(0,123,255,.3)}.typing-trainer.light .memory-timer{border:1px solid rgba(0,123,255,.5);color:#004085}.implementation-description{background-color:#007bff1a;border-radius:6px;padding:1rem;margin:.5rem 0 1rem}.typing-trainer.dark .implementation-description{border:1px solid rgba(0,123,255,.3)}.typing-trainer.light .implementation-description{border:1px solid rgba(0,123,255,.5);color:#004085}.implementation-description h3{margin-top:0;margin-bottom:.75rem;font-size:1.1rem;font-weight:600}.implementation-description p{margin:0;font-size:.95rem;line-height:1.5}.exercise-mode-filter{position:relative;width:100%;margin-bottom:1rem}.exercise-mode-filter .form-group-label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-color)}.exercise-mode-selected{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;border-radius:4px;border:1px solid var(--input-border);background-color:var(--input-bg);color:var(--text-color);cursor:pointer;transition:border-color .2s;height:40px;font-size:1rem}.exercise-mode-selected:hover,.exercise-mode-selected.active{border-color:#007bff}.dropdown-arrow{font-size:.8rem;transition:transform .2s}.exercise-mode-dropdown{position:absolute;width:100%;top:calc(100% + 4px);left:0;z-index:100;border-radius:4px;overflow-y:auto;max-height:280px;background-color:var(--input-bg);border:1px solid var(--input-border);box-shadow:0 2px 6px #00000026}.exercise-mode-option{display:flex;align-items:flex-start;padding:.75rem;cursor:pointer;transition:background-color .15s}.exercise-mode-option:hover{background-color:var(--button-hover-bg)}.exercise-mode-option.selected{background-color:#007bff1a}.exercise-mode-option-check{width:20px;margin-right:.5rem;color:#007bff;font-weight:700}.exercise-mode-option-content{flex:1}.exercise-mode-option-label{margin-bottom:.25rem;font-weight:500}.exercise-mode-option-description{font-size:.9rem;opacity:.8}@media(max-width:768px){.exercise-mode-dropdown{position:fixed;top:auto;bottom:0;left:0;width:100%;z-index:1000;border-radius:8px 8px 0 0;max-height:70vh;overflow-y:auto;box-shadow:0 -2px 10px #0003;animation:slideUp .2s ease-out}.exercise-mode-option{padding:1rem}.exercise-mode-option-label{font-size:1rem;margin-bottom:.5rem}.exercise-mode-option-description{font-size:.9rem}.dropdown-backdrop{position:fixed;inset:0;background-color:#00000080;z-index:999}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.typing-stats-bar{display:flex;justify-content:space-between;background-color:var(--stats-bg);padding:.75rem;border-radius:6px;margin-bottom:1rem}.typing-stat{display:flex;flex-direction:column;align-items:center;gap:.25rem}.typing-stat-label{font-size:.8rem;color:var(--text-color);opacity:.8}.typing-stat-value{font-size:1.1rem;font-weight:600;color:var(--text-color)}.typing-results{background-color:var(--stats-bg);border-radius:6px;padding:1rem;margin-bottom:1rem}.typing-results h3{margin-top:0;margin-bottom:1rem;font-size:1.2rem;color:var(--text-color)}.typing-results .typing-stats{display:flex;justify-content:space-between;margin-bottom:1.5rem}.typing-result-details{background-color:#00000008;padding:1rem;border-radius:4px;margin-bottom:1rem}.typing-trainer.dark .typing-result-details{background-color:#ffffff08}.typing-result-details h4{margin-top:0;margin-bottom:.75rem;font-size:1rem}.typing-result-details table{width:100%;border-collapse:collapse}.typing-result-details th,.typing-result-details td{padding:.5rem;text-align:left;border-bottom:1px solid var(--border-color)}.typing-result-details th{font-weight:600;opacity:.8}.typing-result-rating{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.rating-excellent{color:#4caf50}.rating-good{color:#2196f3}.rating-average{color:#ff9800}.rating-needs-practice{color:#f44336}.completion-progress{height:8px;background-color:#0000001a;border-radius:4px;overflow:hidden;margin:.5rem 0 1rem}.typing-trainer.dark .completion-progress{background-color:#ffffff1a}.progress-fill{height:100%;background-color:#4caf50;border-radius:4px;transition:width .3s ease}@media(max-width:768px){.typing-trainer{padding:.75rem;gap:.75rem}.typing-header-top{flex-direction:column;align-items:flex-start;gap:.5rem}.typing-mode-selector{width:100%;justify-content:space-between}.typing-mode-selector select{flex:1}.typing-stats-bar{flex-direction:column;gap:.5rem}.typing-stat{flex-direction:row;justify-content:space-between;width:100%}.typing-results .typing-stats,.typing-actions{flex-direction:column;gap:.5rem}.typing-button{width:100%}}@media(max-width:480px){.typing-trainer{padding:.5rem;gap:.5rem}.typing-code-display{padding:.75rem;max-height:250px;font-size:.9rem}.typing-input{padding:.75rem;min-height:120px;font-size:.9rem}.typing-header h2{font-size:1.3rem}.typing-example-description{font-size:1rem}.setup-panel{padding:1rem}}@media(min-width:769px)and (max-width:1024px){.typing-trainer{max-width:90%}}@media(min-width:1200px){.typing-code-display{max-height:400px}.typing-input{min-height:180px}}@media(min-resolution:192dpi){.typing-code-display,.typing-input{font-size:1.05rem}}@media(prefers-color-scheme:dark){.typing-trainer:not(.light):not(.dark){--bg-color: #1e1e1e;--text-color: #e0e0e0;--border-color: #444;--correct-color: #4caf50;--incorrect-color: #f44336;--remaining-color: #888;--button-bg: #333;--button-hover-bg: #444;--button-text: #fff;--input-bg: #2d2d2d;--input-border: #555;--stats-bg: #333}}@media print{.typing-trainer{background-color:#fff;color:#000;padding:0;max-width:100%}.typing-input,.typing-button,.typing-actions{display:none}.typing-code-display{border:1px solid #ddd;max-height:none;overflow:visible}.typing-stats-bar{border:1px solid #ddd;background-color:#f9f9f9}}.typing-input-wrapper{position:relative;margin-bottom:.5rem}.typing-input{background-color:var(--input-bg, #2d2d2d);border:1px solid var(--input-border, #555);border-radius:6px;padding:1rem;font-family:Roboto Mono,monospace;font-size:1rem;line-height:1.5;min-height:150px;width:100%;resize:vertical;color:var(--text-color, #e0e0e0);outline:none}.typing-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.typing-input:disabled{opacity:.7;cursor:not-allowed}.typing-input-actions{position:absolute;bottom:10px;right:10px;display:flex;gap:5px}.typing-input-action{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:4px;background-color:#007bff1a;border:1px solid rgba(0,123,255,.2);color:var(--text-color, #e0e0e0);cursor:pointer;font-size:18px;transition:all .2s ease;padding:0}.typing-input-action-icon{line-height:1}.typing-input-clear{background-color:#dc35451a;border:1px solid rgba(220,53,69,.2)}.typing-input-clear:hover{background-color:#dc354533}.typing-input-action:disabled{opacity:.3;cursor:not-allowed}.typing-input-action:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 2px 4px #0003}.typing-input-action:not(:disabled):active{transform:translateY(0);box-shadow:none}@media(max-width:768px){.typing-input-action{width:36px;height:36px}}