.typing-page {max-width: 1180px;margin: 0 auto;padding: 32px 20px 60px;font-family: Arial, sans-serif;color: #003c35;}.typing-hero {background: #e9f5ef;border-radius: 18px;padding: 36px 28px;text-align: center;margin-bottom: 24px;border: 1px solid #d7eadf;}.typing-hero h1 {margin: 0 0 12px;font-size: 34px;color: #003c35;}.typing-hero p {max-width: 780px;margin: 0 auto;line-height: 1.7;color: #345f56;font-size: 16px;}.typing-guide {background: #ffffff;border: 1px solid #e1ebe6;border-radius: 18px;padding: 24px;margin-bottom: 24px;box-shadow: 0 8px 24px rgba(0, 60, 53, 0.05);}.typing-guide h2 {margin: 0 0 18px;color: #003c35;font-size: 24px;}.guide-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 14px;}.guide-card {background: #f6fbf8;border: 1px solid #dcebe3;border-radius: 14px;padding: 16px;}.guide-card h3 {margin: 0 0 8px;color: #003c35;font-size: 17px;}.guide-card p {margin: 0;color: #48665f;line-height: 1.7;font-size: 15px;}.finger-guide {margin-top: 16px;background: #e9f5ef;border: 1px solid #cfe4d9;border-radius: 14px;padding: 14px;display: flex;flex-wrap: wrap;gap: 10px;align-items: center;color: #003c35;}.finger-guide span {background: #ffffff;border: 1px solid #cfe4d9;border-radius: 999px;padding: 7px 12px;font-size: 14px;font-weight: 600;}.typing-tabs {display: flex;flex-wrap: wrap;gap: 10px;margin: 24px 0;}.typing-tab {border: 1px solid #cfe4d9;background: #ffffff;color: #003c35;padding: 10px 16px;border-radius: 999px;cursor: pointer;font-weight: 600;}.typing-tab.active {background: #003c35;color: #ffffff;}.typing-layout {display: grid;grid-template-columns: 280px 1fr;gap: 20px;}.lesson-list {background: #ffffff;border: 1px solid #e1ebe6;border-radius: 16px;padding: 14px;box-shadow: 0 8px 24px rgba(0, 60, 53, 0.06);}.lesson-item {padding: 12px;border-radius: 12px;cursor: pointer;margin-bottom: 8px;border: 1px solid transparent;}.lesson-item:hover {background: #f3faf6;}.lesson-item.active {background: #e9f5ef;border-color: #b7d8c7;}.lesson-item strong {display: block;margin-bottom: 4px;color: #003c35;}.lesson-item span {font-size: 13px;color: #55756e;}.typing-card {background: #ffffff;border: 1px solid #e1ebe6;border-radius: 18px;padding: 24px;box-shadow: 0 8px 24px rgba(0, 60, 53, 0.06);}.typing-toolbar {display: flex;flex-wrap: wrap;gap: 14px;justify-content: space-between;align-items: center;margin-bottom: 20px;}.typing-stats {display: flex;flex-wrap: wrap;gap: 12px;}.stat-box {background: #f6fbf8;border: 1px solid #dcebe3;border-radius: 12px;padding: 10px 14px;min-width: 105px;text-align: center;}.stat-label {display: block;font-size: 12px;color: #638078;margin-bottom: 4px;}.stat-value {font-size: 22px;font-weight: 700;color: #003c35;}.typing-actions {display: flex;gap: 10px;}.typing-btn {border: none;background: #003c35;color: #fff;padding: 11px 18px;border-radius: 10px;font-weight: 700;cursor: pointer;}.typing-btn.secondary {background: #e9f5ef;color: #003c35;}.lesson-title {margin: 0 0 8px;font-size: 24px;color: #003c35;}.lesson-desc {margin: 0 0 18px;color: #5c756f;line-height: 1.6;}.typing-text {background: #fbfdfc;border: 1px solid #e1ebe6;border-radius: 14px;padding: 22px;font-size: 24px;line-height: 1.9;color: #a7a7a7;min-height: 210px;white-space: pre-wrap;font-family: "Courier New", monospace;}.typing-text .correct {color: #2f80ed;}.typing-text .wrong {color: #d93025;background: #ffe1df;border-radius: 3px;}.typing-text .current {background: #d8ebff;border-radius: 3px;}.typing-input {width: 100%;min-height: 150px;margin-top: 18px;padding: 16px;border: 1px solid #cfded8;border-radius: 14px;font-size: 18px;line-height: 1.7;outline: none;resize: vertical;}.typing-input:focus {border-color: #003c35;box-shadow: 0 0 0 3px rgba(0, 60, 53, 0.08);}.typing-result {display: none;margin-top: 18px;padding: 16px;background: #e9f5ef;border-radius: 14px;color: #003c35;font-weight: 600;}@media (max-width: 850px) {.typing-layout {grid-template-columns: 1fr;}.typing-hero h1 {font-size: 26px;}.typing-text {font-size: 20px;}.typing-toolbar {align-items: flex-start;}.typing-actions {width: 100%;}.typing-btn {flex: 1;}.guide-grid {grid-template-columns: 1fr;}}