.typing-page { max-width: 1440px; margin: 0 auto; color: #13233c; }
.typing-hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding:18px 0 24px; border-bottom:1px solid #dce5ef; }
.typing-eyebrow, .typing-section-kicker { color:#2878b9; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.typing-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.typing-dot { width:8px; height:8px; display:inline-block; border-radius:50%; background:#ef8d45; box-shadow:0 0 0 4px #fff0e4; }
.typing-hero h1 { margin:0; font-size:30px; letter-spacing:0; }
.typing-hero p { margin:8px 0 0; color:#62728a; max-width:700px; font-size:14px; }
.typing-hero-actions { display:flex; gap:8px; flex-wrap:wrap; }
.typing-layout { display:grid; grid-template-columns:230px minmax(0,1fr) 232px; gap:16px; align-items:start; padding-top:18px; }
.typing-panel, .typing-lessons, .typing-keyboard-panel { background:#fff; border:1px solid #dce5ef; border-radius:8px; box-shadow:0 8px 22px rgba(24,53,86,.05); }
.typing-lessons { padding:14px 10px 12px; }
.typing-panel-title, .typing-panel-head, .typing-keyboard-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.typing-panel-title h2, .typing-panel-head h2, .typing-keyboard-head h2 { margin:4px 0 0; font-size:17px; }
.typing-count, .typing-round, .typing-keyboard-head > span { color:#77869a; font-size:12px; }
.typing-lesson-list { display:grid; gap:5px; margin-top:14px; }
.typing-lesson { width:100%; display:grid; grid-template-columns:27px 1fr 16px; gap:8px; text-align:left; align-items:center; padding:9px 8px; border:1px solid transparent; border-radius:6px; background:#f7f9fc; color:#31445e; cursor:pointer; }
.typing-lesson:hover { border-color:#a9c9e4; background:#f1f7fc; }
.typing-lesson.is-active { color:#0f5f98; background:#eaf5fd; border-color:#9cc7e7; }
.typing-lesson-index { color:#94a3b8; font-size:11px; font-variant-numeric:tabular-nums; }
.typing-lesson.is-active .typing-lesson-index { color:#2878b9; font-weight:700; }
.typing-lesson-copy { min-width:0; display:grid; gap:3px; }
.typing-lesson-copy b { font-size:13px; }
.typing-lesson-copy small { color:#7d8da2; font-size:11px; line-height:1.35; }
.typing-lesson-arrow { font-size:20px; color:#9aabbf; text-align:right; }
.typing-local-note { display:flex; gap:7px; margin:15px 3px 1px; color:#8492a4; font-size:11px; line-height:1.5; }
.typing-workbench { min-width:0; display:grid; gap:14px; }
.typing-practice-panel { padding:18px; }
.typing-round { display:flex; gap:6px; align-items:center; padding-top:3px; white-space:nowrap; }
.typing-round-dot { color:#c0cad5; }
.typing-progress, .typing-mini-bar { height:6px; background:#edf2f7; border-radius:99px; overflow:hidden; }
.typing-progress { margin:18px 0 14px; }
.typing-progress span, .typing-mini-bar i { display:block; height:100%; width:0; background:#2878b9; border-radius:inherit; transition:width .15s ease; }
.typing-target-wrap { min-height:126px; padding:20px 18px; display:flex; align-items:center; justify-content:center; background:#f7fafc; border:1px solid #e1e9f1; border-radius:7px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(17px,2.2vw,26px); line-height:1.65; letter-spacing:.02em; word-break:break-word; text-align:center; }
.typing-char { display:inline-block; min-width:.56em; color:#8796aa; border-bottom:2px solid transparent; }
.typing-char.space { min-width:.56em; }
.typing-char.done { color:#16835a; }
.typing-char.wrong { color:#d05252; background:#fff0ef; border-radius:3px; }
.typing-char.current { color:#1c5f93; border-bottom-color:#ef8d45; background:#fff8f2; }
.typing-input-wrap { margin-top:15px; }
.typing-input-wrap label { display:block; margin-bottom:7px; color:#64748b; font-size:12px; }
#typingInput { width:100%; min-height:78px; resize:vertical; padding:14px 15px; box-sizing:border-box; border:1px solid #a9bfd3; border-radius:7px; background:#fff; color:#17304c; font:16px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; outline:none; transition:border-color .15s, box-shadow .15s; }
#typingInput:focus { border-color:#2878b9; box-shadow:0 0 0 3px #e0f0fb; }
#typingInput.is-finished { border-color:#39a276; background:#f1fbf6; }
.typing-input-meta { display:flex; justify-content:space-between; gap:8px; margin-top:6px; color:#8b99aa; font-size:11px; }
#typingStatus { color:#2878b9; font-weight:600; }
.typing-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:15px; }
.typing-keyboard-panel { padding:14px; }
.typing-keyboard-head { align-items:center; margin-bottom:12px; }
.typing-keyboard-head > span { color:#2878b9; background:#edf7fd; border-radius:99px; padding:5px 8px; }
.typing-keyboard { display:grid; gap:5px; padding:10px; border:1px solid #e0e7ef; background:#f5f7fa; border-radius:7px; }
.typing-key-row { display:flex; gap:4px; }
.typing-key-row span { flex:1; min-width:0; height:34px; display:grid; place-items:center; border:1px solid #d4dce5; border-radius:4px; background:#fff; color:#64748b; font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; transition:.1s; }
.typing-key-row span.wide { flex:1.7; font-family:inherit; font-size:10px; }
.typing-key-row span.extra-wide { flex:2.2; font-family:inherit; font-size:10px; }
.typing-key-row span.space { flex:8; font-family:inherit; font-size:10px; }
.typing-key-row span.expected { border-color:#ef8d45; color:#c76220; background:#fff2e5; box-shadow:0 2px 0 #ef8d45; transform:translateY(-1px); }
.typing-key-row span.pressed { background:#e4f1fb; border-color:#2878b9; color:#0f5f98; }
.typing-stats { display:grid; gap:14px; }
.typing-stat-panel, .typing-tip-panel { padding:15px; }
.typing-live { display:flex; align-items:center; gap:5px; color:#2d946c; font-size:10px; font-weight:800; letter-spacing:.06em; }
.typing-live i { width:6px; height:6px; border-radius:50%; background:#38a779; }
.typing-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:16px 0; border:1px solid #e1e8f0; border-radius:6px; overflow:hidden; }
.typing-stat-grid > div { min-height:76px; padding:11px 10px; display:grid; align-content:center; gap:3px; background:#f8fafc; }
.typing-stat-grid span { color:#7a899b; font-size:11px; }
.typing-stat-grid strong { color:#173b5d; font-size:24px; line-height:1; font-variant-numeric:tabular-nums; }
.typing-stat-grid small { color:#99a7b7; font-size:10px; }
.typing-stat-progress > div:first-child { display:flex; justify-content:space-between; color:#7a899b; font-size:11px; margin-bottom:6px; }
.typing-stat-progress b { color:#2878b9; }
.typing-mini-bar { height:5px; }
.typing-tip-panel ul { margin:14px 0 0; padding-left:18px; color:#697a8e; font-size:12px; line-height:1.65; }
.typing-tip-panel li + li { margin-top:8px; }
.typing-tip-icon { color:#ef8d45; font-size:18px; }
.typing-launch { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border:1px solid #a8cce7; border-left:4px solid #2878b9; border-radius:8px; background:#f2f8fd; }
.typing-launch-kicker { color:#2878b9; font-size:11px; font-weight:800; letter-spacing:.08em; }
.typing-launch h2 { margin:4px 0 2px; font-size:18px; }
.typing-launch p { margin:0; color:#63758a; font-size:13px; }
@media (max-width:1080px) { .typing-layout { grid-template-columns:210px minmax(0,1fr); } .typing-stats { grid-column:1 / -1; grid-template-columns:1fr 1fr; } }
@media (max-width:680px) { .typing-hero { display:block; } .typing-hero-actions { margin-top:14px; } .typing-layout { display:block; } .typing-lessons, .typing-stats { margin-bottom:14px; } .typing-stats { display:grid; grid-template-columns:1fr; } .typing-practice-panel { padding:13px; } .typing-target-wrap { min-height:150px; padding:16px 10px; font-size:17px; } .typing-keyboard-panel { overflow:hidden; } .typing-keyboard { min-width:540px; } .typing-keyboard-panel { overflow-x:auto; } .typing-round { display:block; text-align:right; line-height:1.5; } .typing-round-dot { display:none; } .typing-launch { align-items:flex-start; flex-direction:column; } }