.lesson-path{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 18px;margin-bottom:22px}.path-title{display:flex;justify-content:space-between;margin-bottom:12px;font-size:11px}.path-title strong{color:var(--ink)}.path-title span{color:var(--green);font-weight:700}.lesson-levels{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}.level{min-height:48px;border:1px solid #dce9e2;background:white;border-radius:6px;color:#82968c;padding:5px 3px;font-size:9px;text-align:center}.level b{display:block;font-size:13px;margin-bottom:3px}.level:hover,.level.active{color:var(--green);border-color:var(--green);background:#e9f7df}.level.complete:after{content:'✓';font-weight:800;color:var(--green);margin-left:2px}.keyboard-lab{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:29px 31px;display:grid;grid-template-columns:230px 1fr;gap:28px}.keyboard-copy h3{font-size:20px;letter-spacing:-.8px;margin-bottom:10px}.keyboard-copy>p:not(.eyebrow){font-size:12px;color:var(--muted);line-height:1.7}.finger-legend{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px}.finger-legend span{font-size:9px;padding:4px 7px;border-radius:4px;color:#234438}.pinky{background:#f5d8d8}.ring{background:#ffe9bd}.middle{background:#dcedbe}.index{background:#cbece4}.thumb{background:#dcd8f4}.keyboard-demo{min-width:0}.hand-row{display:flex;justify-content:space-between;gap:20px;margin:0 24px 12px}.hand{display:flex;align-items:flex-end;gap:3px;position:relative;padding-bottom:18px}.hand b{display:grid;place-items:center;width:27px;border-radius:13px 13px 5px 5px;background:#d9e7e0;height:44px;font-size:7px;color:#5d7469;font-weight:700}.hand b:nth-child(1){height:31px}.hand b:nth-child(2){height:43px}.hand b:nth-child(3){height:52px}.hand b:nth-child(4){height:45px}.hand b:nth-child(5){height:28px;transform:rotate(25deg);transform-origin:bottom}.right-hand b:nth-child(5){transform:rotate(-25deg)}.hand span{position:absolute;bottom:0;width:100%;text-align:center;font-size:8px;color:#8ba097}.hand b.active-finger{background:var(--lime);color:var(--green);box-shadow:0 0 0 3px #c8f05a55}.keyboard{display:grid;gap:4px;padding:10px;background:#edf4f0;border-radius:8px;overflow:auto}.key-row{display:flex;gap:4px;justify-content:center;min-width:480px}.key{height:28px;min-width:27px;padding:0 5px;display:grid;place-items:center;border:1px solid #d0dfd7;border-bottom-width:2px;border-radius:4px;background:white;color:#607a6e;font:10px "DM Mono",monospace}.key.wide{min-width:48px}.key.space{min-width:170px}.key.active-key{color:var(--green);border-color:var(--green);background:var(--lime);box-shadow:0 0 0 2px #c8f05a66}.key.home{border-bottom-color:var(--green)}@media(max-width:750px){.lesson-levels{grid-template-columns:repeat(5,1fr)}.keyboard-lab{grid-template-columns:1fr;padding:23px 18px}.hand-row{margin:0 5px 12px}.keyboard-copy h3{font-size:19px}}
.next-lesson{display:none;margin-top:14px;border:0;border-radius:6px;padding:10px 14px;background:var(--green);color:#fff;font-size:12px;font-weight:700}.lesson-finished .prompt,.lesson-finished .typing-label,.lesson-finished textarea{display:none}.lesson-finished .next-lesson{display:inline-block}.lesson-finished .feedback{margin-top:24px;color:var(--green);font-weight:700;font-size:12px}
.retry-lesson{display:none;margin:14px 0 0 7px;border:1px solid #cfe1d8;border-radius:6px;padding:9px 12px;background:#fff;color:var(--green);font-size:12px;font-weight:700}.lesson-finished .retry-lesson{display:inline-block}.typing-card.free-mode>#retry-lesson{display:none}
.brand{color:#157a55}.brand span{color:#91bd35}
.prompt{white-space:pre-wrap}
.enter-cue{display:inline-flex;align-items:center;gap:5px;margin:3px 0;padding:3px 8px;border:1px solid #b7d9ca;border-radius:5px;background:#e8f6ed;color:var(--green);font:700 11px "Be Vietnam Pro",sans-serif;letter-spacing:0}.prompt .current.enter-cue{background:var(--lime);border-color:#a9cf38}.prompt .wrong.enter-cue{color:#a23d3d;border-color:#e3aaaa;background:#fff1f1}
.header-actions{display:flex;align-items:center;gap:8px}.language-select select{max-width:150px;border:1px solid #cde0d7;border-radius:8px;background:#fff;color:var(--green);padding:10px 28px 10px 10px;font:700 11px "Be Vietnam Pro",sans-serif;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html[dir="rtl"] .topbar,html[dir="rtl"] .hero,html[dir="rtl"] .section-heading,html[dir="rtl"] .results-heading{direction:rtl}@media(max-width:750px){.language-select select{max-width:74px;padding:9px 4px}.header-actions{gap:5px}.login{padding:9px 8px}}
.practice-grid{grid-template-columns:minmax(0,1fr) 265px}.typing-card,.free-practice{min-width:0}.free-sample{max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.free-practice textarea{max-width:100%;overflow-wrap:anywhere}@media(max-width:750px){.practice-grid{grid-template-columns:1fr}}
.keyboard-lab{grid-template-columns:minmax(0,1fr) 230px}.keyboard-demo{order:1}.keyboard-copy{order:2}@media(max-width:750px){.keyboard-lab{grid-template-columns:1fr}.keyboard-demo{order:1}.keyboard-copy{order:2}}
.free-practice #free-feedback{display:none}
.hand-row{margin-top:8px;margin-bottom:18px}.hand{height:94px;min-width:178px;align-items:flex-end;gap:4px;padding:6px 17px 30px;isolation:isolate}.hand:before{content:"";position:absolute;z-index:-1;left:8px;right:8px;bottom:20px;height:47px;border:1px solid #a6d5c1;border-radius:23px 23px 16px 16px;background:linear-gradient(145deg,#d8f3e5,#b9e4d0);box-shadow:inset 0 -6px 0 #a6d9c1,0 5px 9px #2b785319}.hand b{position:relative;z-index:1;width:23px;height:51px!important;border:1px solid #9ed2bc;border-bottom:0;border-radius:14px 14px 7px 7px;background:linear-gradient(90deg,#bee9d5,#e2f8ec);box-shadow:inset -4px 0 0 #a9dcc5;font-size:0}.hand b:after{content:"";position:absolute;top:5px;left:5px;width:11px;height:7px;border-radius:6px;background:#ecfff5;border:1px solid #b8dfcc}.hand b:nth-child(1){height:35px!important}.hand b:nth-child(2){height:50px!important}.hand b:nth-child(3){height:61px!important}.hand b:nth-child(4){height:55px!important}.hand b:nth-child(5){height:34px!important;margin:0 -7px 2px 0;transform:rotate(34deg)!important}.right-hand b:nth-child(1){margin:0 0 2px -7px;transform:rotate(-34deg)!important}.right-hand b:nth-child(2){height:55px!important}.right-hand b:nth-child(3){height:61px!important}.right-hand b:nth-child(4){height:50px!important}.right-hand b:nth-child(5){height:35px!important;margin:0;transform:none!important}.hand span{z-index:2;bottom:0;font-weight:700;color:#67887a}.hand b.active-finger{border-color:#8daf1e;background:linear-gradient(90deg,#d9fb7c,#bfe649);box-shadow:inset -4px 0 0 #a5cd35,0 0 0 4px #c8f05a55}.hand b.active-finger:after{background:#f6ffe1;border-color:#b8dc5c}
.free-practice{display:none}.typing-card.free-mode>.stats,.typing-card.free-mode>.lesson-label,.typing-card.free-mode>.prompt,.typing-card.free-mode>label,.typing-card.free-mode>#typing-input,.typing-card.free-mode>#feedback,.typing-card.free-mode>#next-lesson{display:none}.typing-card.free-mode .free-practice{display:block}.free-intro{margin:2px 0 15px}.free-intro strong{display:block;font-size:16px;margin-bottom:4px}.free-intro span{font-size:11px;color:var(--muted)}.free-practice textarea{font:13px "DM Mono",monospace}.free-actions{display:flex;gap:8px;margin:8px 0 17px}.free-actions button{border-radius:6px;padding:8px 10px;font-size:11px;font-weight:700}.use-text{background:var(--green);color:#fff;border:1px solid var(--green)}.random-text{color:var(--green);background:#fff;border:1px solid #cfe1d8}.free-stats{display:flex;gap:17px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 0;margin-bottom:14px}.free-stats span{color:#7a8e85;font-size:10px}.free-stats b{display:block;font-size:13px;color:var(--ink);margin-top:3px}.free-sample{font:14px/1.8 "DM Mono",monospace;min-height:50px;margin:0;color:var(--ink)}.free-sample .current{background:#dff5d5;color:var(--green)}.free-sample .wrong{color:#d35757;text-decoration:underline}@media(max-width:500px){.free-stats{gap:10px}.free-actions{flex-direction:column}}
.results{max-width:1068px;margin:0 auto;padding:84px 0}.results-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.results-heading .eyebrow{margin-bottom:10px}.results-heading p:not(.eyebrow){font-size:12px;color:var(--muted);margin:9px 0 0}.clear-results{border:1px solid #d5e5dd;border-radius:6px;background:#fff;color:#698178;padding:8px 11px;font-size:11px;font-weight:700}.results-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.results-summary div{border:1px solid var(--line);border-radius:8px;padding:14px 16px;background:#f8fcf9}.results-summary span{display:block;color:#7d9188;font-size:10px;margin-bottom:5px}.results-summary strong{font-size:18px}.results-table-wrap{max-height:400px;overflow:auto;border:1px solid var(--line);border-radius:8px}.results-table{width:100%;border-collapse:collapse;font-size:12px}.results-table th{position:sticky;top:0;background:#edf7ef;color:#5f786d;font-size:10px;text-align:left;padding:12px 15px}.results-table td{padding:12px 15px;border-top:1px solid var(--line)}.results-table td:first-child{font-weight:700}.results-table .empty{color:#9aaba3}@media(max-width:750px){.results{padding:60px 24px}.results-heading{align-items:flex-start;gap:16px}.results-summary{grid-template-columns:1fr}.results-table{min-width:620px}}