.typing-root{font-family:var(--font-body);color:var(--color-ink);min-width:0;width:100%;box-sizing:border-box;scrollbar-color:var(--color-rule-2) var(--color-paper)}
.typing-root *{box-sizing:border-box}
.typing-root [hidden]{display:none!important}
.typing-root h1,.typing-root h2,.typing-root h3{font-family:var(--font-display);font-style:normal;color:var(--color-ink);margin:0}
.typing-root h1{font-size:2rem;font-weight:600;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.typing-root h2{font-size:1.5rem;font-weight:600;line-height:1.25;letter-spacing:-.015em;text-wrap:balance}
.typing-root h3{font-size:1.375rem;font-weight:600;line-height:1.3}
.typing-root p{line-height:1.55;margin:.5rem 0}
.typing-root a{color:var(--color-accent);overflow-wrap:anywhere;text-underline-offset:.2em}
.typing-heading{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.typing-heading p{color:var(--color-muted);max-width:65ch;margin:.5rem 0 0}
.typing-root select,.typing-root button,.typing-input{font:inherit;border:1px solid var(--color-rule-2);border-radius:var(--radius-input);background:var(--color-card);color:var(--color-ink);min-height:44px;box-shadow:none}
.typing-root select{width:100%;padding:.6rem .7rem;margin-top:.35rem;min-width:0}
.typing-root button{padding:.6rem .9rem;cursor:pointer;font-weight:600;transition:background-color var(--dur-micro),border-color var(--dur-micro)}
.typing-root button:hover:not(:disabled){background:var(--color-accent-paper);border-color:var(--color-accent-rule)}
.typing-root button:active:not(:disabled){background:var(--color-paper-3)}
.typing-root button:disabled{cursor:default;color:var(--color-muted);background:var(--color-paper-2);border-color:var(--color-rule);opacity:1}
.typing-root :focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.typing-session-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.5fr);gap:.75rem;align-items:start}
.typing-session-controls label,.typing-keyboard-heading label{display:block;font-size:.875rem;color:var(--color-ink-2);font-weight:600;min-width:0}
.typing-root details{border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:0 1rem;margin-top:1rem;background:var(--color-card);min-width:0}
.typing-root summary{cursor:pointer;min-height:44px;padding:.6rem 0;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.typing-root details p{font-size:.875rem;color:var(--color-ink-2)}
.typing-root details[open]{padding-bottom:.8rem}
.typing-root .typing-settings{margin-top:1.6rem;border-color:var(--color-rule-2);border-radius:var(--radius-md);font-size:.875rem}
.typing-controls{display:grid;gap:1rem;padding:.5rem 0}
.typing-save-note,.typing-input-help,.typing-timing-note,.typing-keyboard-help{font-size:.8125rem;color:var(--color-muted)}
.typing-help-panel .typing-instruction{font-weight:600}
.typing-practice,.typing-keyboard-panel{background:var(--color-card);border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:1.25rem;margin-top:1rem}
.typing-lesson-header{display:flex;gap:1rem;justify-content:space-between;align-items:start}
.typing-subtitle{font-size:.875rem;color:var(--color-muted)}
.typing-progress{font-size:.8125rem;color:var(--color-muted);text-align:end;max-width:12rem;line-height:1.55}
.typing-target-label,.typing-input-label{display:block;font-size:.8125rem;font-weight:600;margin:.75rem 0 .35rem;color:var(--color-ink-2)}
.typing-target{font:2.4rem/1.9 var(--font-syriac);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-md);padding:.5rem 1rem;overflow-wrap:anywhere;white-space:pre-wrap;min-height:96px;unicode-bidi:plaintext}
.typing-cluster{border-bottom:2px solid transparent}
.typing-correct{color:var(--color-success)}
.typing-wrong{color:var(--color-error);background:var(--color-error-paper);border-bottom-style:wavy;border-bottom-color:var(--color-error)}
.typing-pending{background:var(--color-warning-paper);border-bottom-color:var(--color-warning)}
.typing-remaining{color:var(--color-ink)}
.typing-input{display:block;width:100%;font:2.1rem/1.7 var(--font-syriac);padding:.5rem 1rem;resize:vertical;min-height:110px;max-height:350px;unicode-bidi:plaintext;caret-color:var(--color-accent);scroll-margin-block-end:1rem}
.typing-feedback{min-height:1.5em;color:var(--color-success);font-size:.875rem}
.typing-feedback-error{color:var(--color-error)}
.typing-metrics{display:flex;flex-wrap:wrap;gap:.75rem 2rem;border-top:1px solid var(--color-rule);margin-top:1rem;padding-top:1rem}
.typing-metrics>div{display:flex;gap:.5rem;align-items:baseline}
.typing-metrics strong{font-size:1.125rem;font-variant-numeric:tabular-nums}
.typing-metrics span{font-size:.8125rem;color:var(--color-muted)}
.typing-actions,.typing-edit-keys{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem}
.typing-root .typing-next:not(:disabled),.typing-root .typing-start{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}
.typing-root .typing-next:hover:not(:disabled),.typing-root button.typing-start:hover:not(:disabled){background:var(--color-accent-hover);color:var(--color-accent-ink);border-color:var(--color-accent-hover)}
.typing-start{flex-shrink:0}
.typing-keyboard-heading{display:flex;gap:1rem;justify-content:space-between;align-items:center}
.typing-keyboard-heading label{max-width:260px}
.typing-key-hint{color:var(--color-teal);font-size:.875rem;font-weight:600;min-height:1.6em}
.typing-hint-glyph{display:inline-block;font:2rem/1.2 var(--font-syriac);vertical-align:middle}
.typing-entry-block{scroll-margin-block-start:88px}
.typing-coach{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin:.65rem 0;padding:.7rem .9rem;background:var(--color-teal-paper);border-radius:var(--radius-input);color:var(--color-teal)}
.typing-entry-block .typing-key-hint{display:flex;align-items:center;gap:.8rem;min-width:0;margin:0;color:inherit;font-weight:400;line-height:1.45}
.typing-key-hint .typing-hint-glyph{font-size:3rem;line-height:1.2;min-width:2.4rem;text-align:center;flex-shrink:0}
.typing-key-hint .typing-hint-space{font-size:.8125rem;font-weight:600;border:1px solid currentColor;padding:.25rem;border-radius:4px}
.typing-key-hint p{margin:.15rem 0 0;line-height:1.5}
.typing-character-name{font-weight:600}
.typing-key-hint kbd{font:600 .875rem var(--font-body);white-space:normal;unicode-bidi:isolate}
.typing-key-hint small{display:block;font-size:.75rem;line-height:1.4;margin-top:.3rem}
.typing-finger-hint{white-space:normal}
.typing-upcoming{flex-shrink:0;max-width:40%;font-size:.75rem}
.typing-upcoming-characters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:flex-start;margin-top:.15rem;min-width:0;max-width:100%}
.typing-upcoming-characters span{font:1.6rem/1.4 var(--font-syriac)}
.typing-upcoming-characters .typing-upcoming-space{font:.65rem var(--font-body);border-bottom:1px solid currentColor;min-width:1.2rem;text-align:center}
.typing-current{background:var(--color-teal-paper);text-decoration:underline;text-decoration-color:var(--color-teal);text-underline-offset:.17em;text-decoration-thickness:3px}
.typing-current.typing-wrong{background:var(--color-error-paper);text-decoration-color:var(--color-error)}
.typing-lesson-progress{display:flex;align-items:center;gap:.65rem;margin-top:.65rem;color:var(--color-muted);font-size:.75rem;font-variant-numeric:tabular-nums}
.typing-drill-progress{appearance:none;flex:1;min-width:3rem;height:6px;border:0;border-radius:8px;overflow:hidden;background:var(--color-paper-3);color:var(--color-success)}
.typing-drill-progress::-webkit-progress-bar{background:var(--color-paper-3)}
.typing-drill-progress::-webkit-progress-value{background:var(--color-success);border-radius:8px}
.typing-drill-progress::-moz-progress-bar{background:var(--color-success)}
.typing-result{display:flex;gap:1rem;align-items:center;margin-top:1rem;padding:1rem 0;border-block:1px solid var(--color-success-rule);color:var(--color-success)}
.typing-result h3{color:inherit;font-size:1.25rem}
.typing-result p{font-size:.875rem;margin:.3rem 0 0}
.typing-result .typing-result-criteria{font-size:.75rem}
.typing-result-stars{display:flex;gap:.15rem;flex-shrink:0;direction:ltr}
.typing-result-stars svg{width:1.7rem;height:1.7rem;fill:none;stroke:currentColor;stroke-width:1.4}
.typing-result-stars .typing-star-earned{fill:currentColor}
.typing-touch-panel{border-top:1px solid var(--color-rule);padding-top:1rem;margin-top:1rem}
.typing-touch-heading{display:flex;align-items:baseline;gap:.65rem;justify-content:space-between}
.typing-touch-heading h3{font-family:var(--font-body);font-size:.9375rem;font-weight:600}
.typing-touch-heading>span,.typing-touch-panel>p{font-size:.75rem;color:var(--color-muted)}
.typing-touch-panel>p{margin:.3rem 0 .65rem;max-width:65ch}
.typing-lesson-keys{display:flex;flex-wrap:wrap;gap:.4rem;direction:rtl}
.typing-root .typing-lesson-key{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:48px;min-height:66px;padding:.2rem .45rem;gap:.1rem;font-size:.6875rem;font-weight:500}
.typing-touch-glyph{font:2rem/1.25 var(--font-syriac)}
.typing-touch-space{font-size:.75rem;min-width:3rem}
.typing-hand-guide{display:flex;flex-wrap:wrap;direction:ltr;justify-content:center;gap:1.5rem;margin:1rem 0 0}
.typing-hand{text-align:center;color:var(--color-muted);font-size:.75rem}
.typing-fingers{display:flex;gap:.35rem;align-items:end;margin:.3rem 0 0}
.typing-finger{min-width:2rem;padding:.6rem .3rem;border:1px solid var(--color-rule-2);border-radius:6px;color:var(--color-ink-2);font-size:.75rem}
.typing-thumb{font-size:.625rem;padding-block:.35rem}
.typing-finger-active{background:var(--color-teal-paper);border:2px solid var(--color-teal);color:var(--color-teal);font-weight:600}
.typing-keyboard-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:var(--color-rule-2) var(--color-paper);padding:.2rem;direction:ltr}
.typing-keyboard-scroll-note{display:none;font-size:.75rem;color:var(--color-muted)}
.typing-keyboard{display:flex;flex-direction:column;gap:.4rem;direction:ltr;margin-top:1rem}
.typing-key-row{display:flex;gap:.35rem;justify-content:center}
[dir=rtl] .typing-key-row::before{direction:rtl}
.typing-root .typing-key{display:flex;flex:1;min-width:0;max-width:70px;flex-direction:column;align-items:center;justify-content:center;min-height:68px;padding:.2rem .15rem;position:relative}
.typing-key-output{font:2rem/1.4 var(--font-syriac);white-space:nowrap}
.typing-key-labels{font-size:.65rem;color:var(--color-muted);font-weight:500;white-space:nowrap}
.typing-key[data-code=Space]{max-width:310px;min-height:50px}
.typing-key[data-code=Space] .typing-key-output{font:.9rem var(--font-body)}
.typing-key-home::after{content:'';width:12px;height:2px;background:var(--color-ink-2);position:absolute;bottom:2px}
.typing-root .typing-key-next{border:2px solid var(--color-teal);background:var(--color-teal-paper);color:var(--color-teal)}
.typing-vowels section{margin:1.1rem 0}
.typing-vowel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:.6rem}
.typing-root .typing-vowel{display:flex;gap:.8rem;align-items:center;text-align:start;font-size:.8125rem;font-weight:500;overflow-wrap:anywhere;border-radius:var(--radius-md)}
.typing-vowel-glyph{font:2rem var(--font-syriac);min-width:2rem}
.typing-details .typing-reset{margin-top:.6rem}
.typing-root [lang=ar]{font-family:var(--font-body),'Segoe UI',sans-serif}
.typing-root .typing-key-control{font:.8rem var(--font-body)}
.typing-root ::selection{background:var(--color-highlight);color:var(--color-ink)}
.typing-curriculum{margin-block:1.5rem 1.75rem;min-width:0;container-type:inline-size;container-name:typing-course}
.typing-course-heading{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.typing-course-heading>div{min-width:0;max-width:66ch}
.typing-course-intro{font-size:.9375rem;color:var(--color-ink-2);text-wrap:pretty}
.typing-root .typing-start{min-height:48px;max-width:100%;white-space:normal;overflow-wrap:anywhere;flex:0 1 15rem}
.typing-course-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;margin-top:.75rem;font-size:.875rem}
.typing-course-count{font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums}
.typing-course-layout{color:var(--color-ink-2)}
.typing-root .typing-course-save{color:var(--color-muted);font-size:.8125rem;margin:.3rem 0 1rem}
.typing-root .typing-stage{margin:0;border:0;border-top:1px solid var(--color-rule-2);border-radius:0;padding:0;background:transparent}
.typing-root .typing-stage:last-child{border-bottom:1px solid var(--color-rule-2)}
.typing-root .typing-stage[open]{padding-bottom:1rem}
.typing-root .typing-stage>summary{display:flex;align-items:center;gap:.75rem;min-height:64px;padding:.75rem .3rem;list-style:none}
.typing-stage>summary::-webkit-details-marker{display:none}
.typing-stage>summary::after{content:'';width:.5rem;height:.5rem;flex:0 0 .5rem;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-inline:.4rem .2rem}
.typing-stage[open]>summary::after{transform:rotate(225deg)}
.typing-stage>summary:hover{color:var(--color-accent)}
.typing-stage-number{display:flex;align-items:center;justify-content:center;inline-size:2rem;min-block-size:2rem;flex:0 0 2rem;border:1px solid var(--color-rule-2);border-radius:50%;font-size:.875rem;font-variant-numeric:tabular-nums}
.typing-stage-heading{display:flex;align-items:baseline;justify-content:space-between;flex:1;gap:.4rem 1rem;min-width:0}
.typing-stage-heading strong{font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
.typing-stage-count{font-size:.8125rem;color:var(--color-muted);font-weight:400;font-variant-numeric:tabular-nums;flex-shrink:0}
.typing-root .typing-stage-note{margin:0 0 .75rem;font-size:.875rem;color:var(--color-ink-2)}
.typing-course-lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none}
.typing-course-lessons>li{min-width:0;display:flex}
.typing-root .typing-course-lesson{display:flex;align-items:center;gap:.75rem;text-align:start;width:100%;min-width:0;min-height:78px;padding:.65rem .75rem;background:var(--color-card);border-color:var(--color-rule);border-radius:var(--radius-input);font-weight:400}
.typing-root .typing-course-lesson[aria-current=step]{background:var(--color-accent-paper);border-color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent)}
.typing-root .typing-course-lesson:hover{background:var(--color-accent-paper);border-color:var(--color-accent)}
.typing-course-ordinal{font-variant-numeric:tabular-nums;color:var(--color-muted);flex:0 0 1.25rem;text-align:center;font-size:.8125rem}
.typing-course-lesson-body{display:block;flex:1;min-width:0}
.typing-course-lesson-body strong{display:block;font-weight:600;line-height:1.5;font-size:.9375rem;overflow-wrap:anywhere}
.typing-course-meta{display:block;color:var(--color-muted);font-size:.75rem;line-height:1.5;margin-top:.2rem;overflow-wrap:anywhere}
.typing-course-lesson[data-completed=true] .typing-course-meta{color:var(--color-success)}
.typing-course-action{font-size:.8125rem;font-weight:600;color:var(--color-accent);line-height:1.5;max-width:6.5rem;overflow-wrap:anywhere}
.typing-actions>button{min-height:48px;flex:1 1 10rem;white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){.typing-course-heading{align-items:start;gap:.75rem;flex-direction:column}.typing-root .typing-start{flex:auto;min-width:12rem}.typing-stage-heading{flex-direction:column;gap:.15rem}.typing-stage-count{flex-shrink:1}.typing-course-lessons{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.typing-root .typing-course-lesson{gap:.5rem;padding:.6rem .5rem}.typing-course-action{max-width:4.5rem}.typing-course-ordinal{flex-basis:1rem}.typing-root .typing-start{width:100%;min-width:0}.typing-course-summary{gap:.25rem}.typing-course-summary>*{width:100%}}
@media(max-width:760px){.typing-vowel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.typing-keyboard-panel{padding:1rem .65rem}.typing-key-row{gap:.2rem}.typing-root .typing-key{min-height:62px}.typing-key-labels{font-size:.55rem}.typing-key-output{font-size:2rem}.typing-progress{max-width:120px}}
@media(max-width:760px){.typing-keyboard{min-width:680px}.typing-keyboard-scroll-note{display:block}.typing-root .typing-key{min-height:66px}.typing-hand-guide{gap:1rem}.typing-finger{min-width:1.65rem}.typing-upcoming{max-width:35%}}
@media(max-width:480px){.typing-heading{align-items:start;flex-direction:column;gap:.8rem;margin-bottom:1rem}.typing-session-controls{grid-template-columns:minmax(0,1fr);gap:.6rem}.typing-root .typing-settings{margin-top:0}.typing-practice{padding:1rem .75rem}.typing-lesson-header{display:block}.typing-progress{display:block;text-align:start;max-width:none;margin-top:.25rem}.typing-target{font-size:2rem;padding:.5rem .7rem}.typing-input{font-size:2rem;padding:.5rem .7rem;min-height:100px}.typing-metrics{gap:.65rem 1rem}.typing-metrics>div{flex:1 1 42%;flex-direction:column;gap:.15rem}.typing-keyboard-heading{display:block}.typing-keyboard-heading label{display:block;margin-top:.6rem;max-width:none}.typing-keyboard{gap:.4rem}.typing-key-row{flex-wrap:nowrap;gap:.35rem}.typing-key-labels{font-size:.7rem}.typing-key-output{font-size:2rem}.typing-vowel-grid{grid-template-columns:1fr}.typing-root .typing-vowel{min-height:60px}.typing-actions button,.typing-edit-keys button{flex:1 1 auto}.typing-root select{font-size:.9rem}.typing-coach{display:block;padding:.65rem .7rem}.typing-upcoming{display:flex;align-items:center;gap:.7rem;max-width:none;margin-top:.4rem;border-top:1px solid var(--color-teal-rule);padding-top:.3rem}.typing-upcoming-characters{margin:0}.typing-upcoming-characters span{font-size:1.35rem}.typing-result{align-items:start;flex-direction:column;gap:.5rem}.typing-hand-guide{gap:.7rem}.typing-fingers{gap:.2rem}.typing-finger{min-width:1.3rem;padding-inline:.2rem}.typing-thumb{max-width:2.6rem;overflow-wrap:anywhere}.typing-drill-count{max-width:70%;text-align:end}.typing-touch-heading>span{display:none}}
@media(prefers-reduced-motion:reduce){.typing-root *{scroll-behavior:auto;transition:none!important;animation:none!important}}

@media(max-width:480px){.typing-upcoming{flex-wrap:wrap;row-gap:.2rem}}

/* Focused lesson screen. The course and practice never compete for attention. */
.typing-workspace{scroll-margin-block-start:88px;min-width:0}
.typing-practice-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
.typing-position{font-size:.875rem;color:var(--color-muted);text-align:end;font-variant-numeric:tabular-nums}
.typing-root .typing-practice{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(17rem,1fr);gap:.65rem 1.5rem;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.typing-practice>.typing-lesson-header,.typing-practice>.typing-lesson-progress,.typing-practice>.typing-result,.typing-practice>.typing-actions{grid-column:1/-1}
.typing-lesson-header h2{font-family:var(--font-body);font-size:1.375rem;font-weight:600;letter-spacing:normal;line-height:1.4}
.typing-practice .typing-lesson-progress{margin:0 0 .4rem}
.typing-practice .typing-entry-block{min-width:0}
.typing-practice .typing-target{font-size:2rem;line-height:1.7;min-height:72px;padding:.45rem .8rem}
.typing-practice .typing-input{font-size:2rem;line-height:1.6;min-height:76px;height:76px;padding:.4rem .8rem;max-height:240px}
.typing-practice .typing-target-label{margin-top:0}
.typing-practice .typing-feedback{font-size:.8125rem;margin:.4rem 0 0}
.typing-guidance{min-width:0}
.typing-guidance .typing-coach{margin:0;padding:.65rem .8rem;display:block}
.typing-guidance .typing-upcoming{display:none}
.typing-guidance .typing-key-hint{display:flex;align-items:center;gap:.65rem}
.typing-guidance .typing-hint-glyph{font-size:2.4rem}
.typing-guidance .typing-key-hint p{margin:.15rem 0 0}
.typing-guidance .typing-hand-guide{gap:.8rem;margin:.6rem 0;flex-wrap:wrap}
.typing-guidance .typing-hand{min-width:0;flex:1 1 8rem}
.typing-guidance .typing-fingers{justify-content:center;gap:.2rem}
.typing-guidance .typing-finger{min-width:1.5rem;padding:.35rem .2rem;line-height:1.4}
.typing-guidance .typing-thumb{overflow-wrap:anywhere;max-width:3.5rem;min-width:0}
.typing-guidance .typing-touch-panel{margin:.5rem 0 0;padding:.5rem 0 0}
.typing-guidance .typing-touch-panel>p,.typing-guidance .typing-touch-heading>span{display:none}
.typing-guidance .typing-touch-heading{margin-bottom:.4rem}
.typing-guidance .typing-lesson-key{min-height:54px;min-width:48px;padding:.15rem .4rem}
.typing-guidance .typing-touch-glyph{font-size:1.6rem}
.typing-touch-controls{display:flex;align-items:flex-end;justify-content:space-between;gap:.65rem;min-width:0}
.typing-touch-controls .typing-lesson-keys{flex:1;min-width:0}
.typing-root .typing-erase{display:flex;align-items:center;justify-content:center;flex:0 0 48px;min-width:48px;min-height:48px;padding:.65rem}
.typing-erase svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.typing-workspace[data-complete=true] .typing-guidance{display:none}
.typing-workspace[data-complete=true] .typing-result{grid-column:2;grid-row:3;align-self:center;margin:0;padding:.75rem;border:0;background:var(--color-success-paper);border-radius:var(--radius-md)}
.typing-practice .typing-actions{margin:.3rem 0;justify-content:flex-end}
.typing-practice .typing-actions>button{flex:0 1 13rem}
.typing-practice .typing-result{margin:.2rem 0;padding:.8rem 0}
.typing-root .typing-full-keyboard{margin:.6rem 0 0;padding:0;border:0;border-top:1px solid var(--color-rule);border-radius:0;background:transparent}
.typing-full-keyboard>summary{font-size:.875rem}
.typing-root .typing-full-keyboard .typing-keyboard-panel{margin:0;padding:0;border:0;background:transparent}
.typing-full-keyboard .typing-keyboard-heading h2,.typing-full-keyboard .typing-keyboard-help{display:none}
.typing-full-keyboard .typing-keyboard-heading{justify-content:flex-end}
.typing-full-keyboard .typing-keyboard-heading label{display:flex;align-items:center;gap:.6rem;font-size:.75rem;max-width:none;margin:0}
.typing-full-keyboard .typing-layer{width:auto;min-width:12rem;min-height:40px;padding-block:.3rem}
.typing-full-keyboard .typing-keyboard{margin:.5rem 0 0;gap:.25rem}
.typing-full-keyboard .typing-key{min-height:53px}
.typing-full-keyboard .typing-key-output{font-size:2rem;line-height:1.15}
.typing-full-keyboard .typing-key-control{font:.8rem var(--font-body)}
.typing-full-keyboard .typing-key[data-code=Space]{min-height:40px}
.typing-extras{margin-top:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.65rem 1rem;align-items:start}
.typing-root .typing-extras>details{margin:0;font-size:.875rem}
.typing-extras>.typing-save-note{grid-column:1/-1;margin:0}
.typing-root .typing-options{padding:0;border:0;background:transparent}
.typing-root .typing-options[open]{padding-bottom:var(--space-md)}
.typing-options>summary{min-height:var(--size-control);padding:.75rem 0}
.typing-options .typing-session-controls{grid-template-columns:minmax(0,1fr);margin:0;padding-top:var(--space-xs);gap:var(--space-sm)}
.typing-root .typing-options .typing-settings{margin:0;padding:0;border:0;background:transparent}
.typing-options .typing-settings>summary{min-height:var(--size-control);padding:.75rem 0;font-weight:500}
.typing-options .typing-controls{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--space-md);padding:var(--space-xs) 0}
.typing-root .typing-options select{min-height:var(--size-control);margin-top:var(--space-xs);padding:.6rem .75rem;border-color:transparent;border-radius:var(--radius-control);background:var(--color-control)}
.typing-root .typing-options select:hover{border-color:transparent;background:var(--color-control-hover)}
.typing-root :is(.typing-actions button,.typing-locate,.typing-reset,.typing-result-practice,.typing-adaptive-start):not(.typing-next){background:var(--color-control);border-color:transparent;border-radius:var(--radius-control)}
.typing-root :is(.typing-actions button,.typing-locate,.typing-reset,.typing-result-practice,.typing-adaptive-start):not(.typing-next):hover:not(:disabled){background:var(--color-control-hover);border-color:transparent}
.typing-root .typing-extras>details{border:0;background:transparent;padding:0}
.typing-options .typing-keyboard-heading{margin-top:.7rem}
.typing-options .typing-keyboard-heading h2{display:none}
.typing-options .typing-keyboard-heading label{max-width:none;width:100%}
.typing-workspace .typing-subtitle{margin:.1rem 0!important}
.typing-workspace .typing-progress{display:none}
.typing-attempt-details .typing-metrics{margin:0;padding:0;border:0}
.typing-overview>.typing-options{max-width:42rem;margin-top:0}
[dir=rtl] .typing-workspace h2{font-family:var(--font-body);letter-spacing:normal}
@media(max-width:760px){
 .typing-root .typing-practice{grid-template-columns:minmax(0,1fr);gap:.5rem}
 .typing-practice-nav{margin-bottom:.6rem;gap:.5rem}
 .typing-position{font-size:.8125rem}
 .typing-lesson-header{display:block}
 .typing-lesson-header h2{font-size:1.125rem}
 .typing-subtitle{margin:.2rem 0!important;font-size:.8125rem}
 .typing-practice .typing-progress{display:none}
 .typing-practice .typing-target{font-size:2rem;min-height:58px;line-height:1.6;padding:.3rem .65rem}
 .typing-practice .typing-input{font-size:2rem;min-height:64px;height:64px;line-height:1.5;padding:.3rem .65rem}
 .typing-practice .typing-target-label,.typing-practice .typing-input-label{margin:.25rem 0;font-size:.75rem}
 .typing-guidance .typing-coach{padding:.45rem .65rem}
 .typing-guidance .typing-key-hint{font-size:.8125rem}
 .typing-guidance .typing-hand-guide{margin:.4rem 0;gap:.6rem}
 .typing-guidance .typing-finger{font-size:.6875rem;min-width:1.4rem;padding:.25rem .15rem}
 .typing-guidance .typing-thumb{font-size:.6rem;max-width:3rem}
 .typing-guidance .typing-hand{font-size:.6875rem}
 .typing-guidance .typing-touch-heading h3{font-size:.8125rem}
 .typing-practice .typing-actions>button{flex:1 1 0;min-width:0}
 .typing-workspace[data-complete=true] .typing-result{grid-column:1;grid-row:auto;padding:.6rem .75rem;gap:.25rem}
 .typing-workspace[data-complete=true] .typing-result h3{font-size:1.125rem}
 .typing-workspace[data-complete=true] .typing-result p{font-size:.8125rem;margin:.2rem 0 0}
 .typing-workspace[data-complete=true] .typing-result .typing-result-criteria{font-size:.6875rem}
 .typing-root .typing-full-keyboard{margin-top:.5rem}
 .typing-full-keyboard .typing-keyboard-heading label{display:block;width:100%}
 .typing-full-keyboard .typing-layer{width:100%;min-width:0}
 .typing-extras{grid-template-columns:minmax(0,1fr)}
 .typing-guidance .typing-fingers{gap:.15rem}
}
@media(max-width:360px){.typing-guidance .typing-hand-guide{flex-wrap:wrap}.typing-guidance .typing-hand{flex-basis:100%}.typing-practice-nav{flex-wrap:wrap}.typing-position{flex:1}}

/* A single trail connects real lesson positions, including across topic markers. */
.typing-stage-list{position:relative;max-width:42rem;margin:1.5rem auto 0}
.typing-trail-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.typing-trail-line path{fill:none;stroke:var(--color-rule-2);stroke-width:5;stroke-linecap:round}
.typing-trail-line .typing-trail-done{stroke:var(--color-success)}
.typing-trail{position:relative;list-style:none;margin:0;padding:0}
.typing-trail-step{display:flex;flex-direction:column;align-items:center;padding-bottom:1.75rem;min-width:0}
.typing-root .typing-stage{width:100%;position:relative;margin:.5rem 0 1.5rem;padding:.8rem 1rem;background:var(--color-paper);border:0;border-block:1px solid var(--color-rule);text-align:center}
.typing-stage h3{font:600 1rem/1.5 var(--font-body)}
.typing-stage-count{display:block;margin-top:.2rem}
.typing-root .typing-course-lesson{position:relative;flex-direction:column;width:min(12rem,60%);min-height:0;gap:.35rem;padding:.4rem .25rem;border:0;background:transparent;box-shadow:none;text-align:center}
.typing-root .typing-course-lesson[aria-current=step],.typing-root .typing-course-lesson:hover{background:transparent;box-shadow:none;border:0}
.typing-trail-step[data-bend="1"]>.typing-course-lesson{align-self:flex-start;margin-inline-start:8%}
.typing-trail-step[data-bend="3"]>.typing-course-lesson{align-self:flex-end;margin-inline-end:8%}
.typing-course-ordinal{display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto;inline-size:4.25rem;block-size:4.25rem;border:2px solid var(--color-rule-2);border-radius:50%;background:var(--color-card);color:var(--color-ink);font:600 1.4rem var(--font-body);box-shadow:0 4px 0 var(--color-rule-2);margin-bottom:.5rem}
.typing-course-lesson[aria-current=step] .typing-course-ordinal{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent);outline:2px solid var(--color-accent);outline-offset:5px}
.typing-course-lesson[data-completed=true] .typing-course-ordinal{background:var(--color-success-paper);color:var(--color-success);border-color:var(--color-success);box-shadow:0 4px 0 var(--color-success)}
.typing-course-ordinal svg{position:absolute;width:1.25rem;height:1.25rem;inset-inline-end:-.4rem;bottom:-.2rem;background:var(--color-success);color:var(--color-card);border-radius:50%;fill:none;stroke:currentColor;stroke-width:2.5;padding:2px}
.typing-course-lesson-body{flex:none;max-width:100%;background:var(--color-paper);padding:.1rem .35rem;border-radius:4px}
.typing-course-lesson-body strong{font-size:.9375rem}
.typing-course-meta{font-size:.75rem}
.typing-course-action{background:var(--color-paper);padding:0 .4rem;max-width:none;font-size:.8125rem}
.typing-root .typing-locate{margin-top:.25rem}
.typing-course-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem}
.typing-course-heading>div{grid-column:1/-1}
.typing-root .typing-course-heading>.typing-start{width:auto;min-width:0;min-height:48px}
.typing-root .typing-locate{min-height:48px;margin:0}
@container typing-course (min-width:48em){
 .typing-course-heading{grid-template-columns:minmax(0,1fr) minmax(10rem,12rem) minmax(8rem,10rem);align-items:center;gap:var(--space-sm)}
 .typing-course-heading>div{grid-column:auto}
}

/* The compact practice surface keeps the physical map and both hands in view. */
.typing-practice-nav{margin-bottom:.4rem}
.typing-root .typing-practice{gap:.4rem 1.25rem}
.typing-practice>.typing-full-keyboard{grid-column:1/-1}
.typing-root .typing-full-keyboard{border:0;margin:0;padding:0!important}
.typing-full-keyboard>summary,.typing-keyboard-scroll-note,.typing-keyboard-panel>.typing-edit-keys{display:none}
.typing-full-keyboard .typing-keyboard{min-width:0;margin:0;gap:3px}
.typing-keyboard-scroll{overflow-x:auto;padding:0}
.typing-key-row{gap:3px}
.typing-full-keyboard .typing-key{min-width:1.3rem;min-height:48px;max-width:64px;padding:0 1px;border-radius:5px}
.typing-full-keyboard .typing-key-output{font-size:2rem;line-height:1.05}
.typing-full-keyboard .typing-key-labels{font-size:.6rem;line-height:1}
.typing-full-keyboard .typing-key-control{font:.6rem/1 var(--font-body);white-space:normal;overflow-wrap:anywhere}
.typing-full-keyboard .typing-key[data-code=Space]{max-width:280px;min-height:36px}
.typing-key[data-code=Space] .typing-key-labels{display:none}
.typing-guidance{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.typing-guidance .typing-coach{flex:1 1 10rem;background:transparent;padding:0;margin:0}
.typing-guidance .typing-key-hint{font-size:.8125rem;line-height:1.35}
.typing-guidance .typing-key-hint p{line-height:1.4}
.typing-guidance .typing-key-hint small{font-size:.7rem;margin-top:.1rem}
.typing-guidance .typing-upcoming{display:none}
.typing-guidance .typing-hand-guide{flex:1 0 180px;flex-wrap:nowrap;gap:8px;margin:0;align-items:end}
.typing-guidance .typing-hand{flex:0 1 90px;font-size:.65rem;color:var(--color-ink-2)}
.typing-hand svg{width:100%;height:96px;display:block;overflow:visible}
.typing-hand path{fill:var(--color-paper-3);stroke:var(--color-ink-2);stroke-width:1.7;stroke-linejoin:round}
.typing-hand path[data-use=type]{fill:var(--color-teal);stroke:var(--color-teal);stroke-width:3}
.typing-hand path[data-use=modifier]{fill:var(--color-warning-paper);stroke:var(--color-ink);stroke-width:3;stroke-dasharray:4 2}
.typing-input-row{display:flex;gap:.4rem;align-items:stretch;min-width:0}
.typing-practice .typing-input{height:60px;min-height:60px;resize:none;padding:.2rem .6rem;line-height:1.5}
.typing-input-row .typing-erase{flex:0 0 44px;min-width:44px;min-height:44px;padding:.6rem}
.typing-input-row .typing-correct-error{flex:0 0 auto;min-width:44px;padding:.35rem .5rem;font-size:.8125rem;margin:0}
.typing-input-row .typing-input{min-width:0;flex:1 1 0}
.typing-erase svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
.typing-practice .typing-target{min-height:60px;height:60px;max-height:60px;overflow:auto;line-height:1.5;padding:.2rem .6rem;scrollbar-width:thin}
.typing-practice .typing-target-label,.typing-practice .typing-input-label{font-size:.75rem;margin:.2rem 0}
.typing-practice .typing-feedback{font-size:.75rem;line-height:1.4;margin:.25rem 0 0}
.typing-practice .typing-actions{margin:.25rem 0 0}
.typing-follow-label{display:flex;gap:.5rem;align-items:center;min-height:44px;font-size:.875rem}
.typing-follow-key{width:20px;height:20px;accent-color:var(--color-accent);flex:0 0 20px}
.typing-root .typing-help-panel .typing-touch-panel{margin-top:.5rem}
@media(max-width:760px){
 .typing-heading p,.typing-course-layout,.typing-course-save{display:none}
 .typing-root .typing-course-title{font-size:1.25rem}
 .typing-root .typing-course-intro{font-size:.875rem;margin:.3rem 0 0}
 .typing-curriculum{margin-block:1rem}
 .typing-stage-list{margin-top:.75rem}
 .typing-root .typing-course-heading>.typing-start,.typing-root .typing-locate{font-size:.8125rem;padding:.5rem .65rem}
 .typing-workspace{scroll-margin-block-start:72px}
 .typing-root .typing-practice{gap:.25rem}
 .typing-lesson-header h2{font-size:1rem}
 .typing-workspace .typing-subtitle{display:none}
 .typing-position{font-size:.75rem}
 .typing-practice .typing-lesson-progress{margin:0}
 .typing-guidance{flex-wrap:nowrap;min-height:98px}
 .typing-guidance .typing-coach{flex:1 1 0;min-width:0}
 .typing-key-hint .typing-hint-glyph{font-size:2rem;min-width:1.5rem}
 .typing-guidance .typing-key-hint{gap:.35rem;font-size:.75rem}
 .typing-guidance .typing-hand-guide{flex:0 0 132px;gap:4px;flex-wrap:nowrap}
 .typing-guidance .typing-hand{flex:1 1 64px;font-size:.6rem}
 .typing-hand svg{height:72px}
 .typing-full-keyboard .typing-key{min-height:44px;max-width:none}
 .typing-full-keyboard .typing-key-labels{font-size:.5rem}
 .typing-full-keyboard .typing-key[data-code=Space]{min-height:32px;max-width:180px}
 .typing-full-keyboard .typing-keyboard,.typing-key-row{gap:2px}
 .typing-full-keyboard{margin-inline:-10px!important}
 .typing-practice .typing-actions>button{min-height:44px;font-size:.8125rem}
 .typing-practice-nav{gap:.35rem;flex-wrap:nowrap}
 .typing-root .typing-back-course{font-size:.8125rem;padding:.35rem .6rem}
 .typing-practice .typing-input-label{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden}
 .typing-input-row{margin-top:.3rem}
 .typing-practice .typing-input{height:52px;min-height:52px}
}
@media(max-width:360px){
 .typing-guidance .typing-hand-guide{flex-basis:118px}
 .typing-guidance .typing-key-hint{font-size:.6875rem}
 .typing-guidance .typing-hand{flex-basis:57px}
 .typing-trail-step[data-bend="1"]>.typing-course-lesson{margin-inline-start:0}
 .typing-trail-step[data-bend="3"]>.typing-course-lesson{margin-inline-end:0}
}
@media(max-width:760px) and (max-height:740px){
 .typing-guidance{min-height:78px}
 .typing-hand svg{height:60px}
 .typing-practice .typing-target{height:52px;min-height:52px;max-height:52px}
 .typing-practice .typing-input{height:48px;min-height:48px}
}


/* Evidence stays in the course; the active keyboard keeps its compact layout. */
.typing-adaptive{margin-block:1rem 1.5rem;padding-block:1rem;border-block:1px solid var(--color-rule);min-width:0}
.typing-adaptive h3{font:600 1rem/1.4 var(--font-body);margin:0 0 .35rem}
.typing-adaptive p{font-size:.875rem;line-height:1.65;max-width:70ch;margin:.35rem 0 .75rem}
.typing-adaptive bdi{font-variant-numeric:tabular-nums;white-space:nowrap}
.typing-root .typing-history{margin-top:1rem;min-width:0;padding:0;border:0;border-block-start:1px solid var(--color-rule);border-radius:0;background:transparent}
.typing-history>summary{font-weight:500;min-height:44px;cursor:pointer;padding-block:.65rem}
.typing-history-content{padding-block:.5rem}
.typing-history-chart{display:block;width:100%;max-width:650px;height:auto;margin-block:.75rem;direction:ltr;overflow:visible;color:var(--color-ink)}
.typing-history-chart text{fill:currentColor;font:12px var(--font-body)}
.typing-history-chart .typing-chart-label{font-size:13px;font-weight:500}
.typing-chart-axis{fill:none;stroke:var(--color-ink-2);stroke-width:1}
.typing-chart-line{fill:none;stroke:var(--color-teal);stroke-width:2.5}
.typing-chart-dot{fill:var(--color-teal)}
.typing-history-table{overflow-x:auto;max-width:100%;scrollbar-color:var(--color-ink-2) var(--color-paper);font-size:.8125rem}
.typing-history table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;text-align:start}
.typing-history caption{text-align:start;font-weight:500;margin-bottom:.6rem}
.typing-history th,.typing-history td{padding:.6rem .5rem;border-bottom:1px solid var(--color-rule);text-align:start}
.typing-history th{font-weight:500}
.typing-history-local{color:var(--color-ink-2)}
.typing-result-history{font-size:.8125rem;font-variant-numeric:tabular-nums;margin:.35rem 0 0}
.typing-result-practice{grid-column:1/-1;justify-self:start;font-size:.8125rem}
@media(max-width:760px){.typing-adaptive{margin-block:.75rem 1rem}.typing-adaptive p{font-size:.8125rem}.typing-result-history{font-size:.75rem}.typing-result-practice{min-height:44px}}
@media(max-width:760px){
 .typing-workspace[data-complete=true] .typing-actions{grid-row:5}
 .typing-workspace[data-complete=true] .typing-full-keyboard{grid-row:6}
}
.typing-history>summary{min-height:48px}
.typing-history-chart text{stroke:none}
@media(max-width:760px){.typing-history-chart text{font-size:24px}.typing-history-chart .typing-chart-label{font-size:24px}}