.tenfinger-head{gap:14px;display:grid}.tenfinger-layout .seg{max-width:420px}.tenfinger-title{letter-spacing:-.01em;font-size:18px;font-weight:700;line-height:1.2}.tenfinger-segs{gap:3px;margin-top:10px;display:flex}.tenfinger-seg{background:var(--line);border-radius:2px;flex:1;height:6px}.tenfinger-seg.is-done{background:var(--ink)}.tenfinger-seg.is-current{background:var(--accent)}@media (width>=1024px){.tenfinger-head{grid-template-columns:minmax(0,1fr) 300px;align-items:end;column-gap:32px}.tenfinger-layout{order:2}.tenfinger-title{letter-spacing:-.015em;font-size:24px}.tenfinger-segs{gap:4px;margin-top:14px}.tenfinger-seg{height:8px}}.tenfinger-list ol{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 8px;margin:0;display:grid}.tenfinger-list button{border-radius:var(--radius-sm);width:100%;min-height:44px;color:var(--ink);font:inherit;text-align:start;cursor:pointer;background:0 0;border:1px solid #0000;grid-template-columns:2.2em minmax(0,1fr) auto;align-items:center;gap:8px;padding:0 10px;font-size:15px;display:grid}.tenfinger-list button:hover:not(:disabled){background:var(--bg)}.tenfinger-list button[aria-current=true]{border-color:var(--ink);font-weight:600}.tenfinger-list button:disabled{color:var(--faint);cursor:not-allowed}.tenfinger-list-n{color:var(--muted);font-variant-numeric:tabular-nums}.tenfinger-list button:disabled .tenfinger-list-n{color:inherit}.tenfinger-list-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tenfinger-list-state{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}.tenfinger-panel{gap:10px;display:grid}.tenfinger-drill{border-radius:var(--radius-sm);cursor:default;justify-content:center;align-items:center;min-height:132px;padding:16px 4px;display:flex}.tenfinger-chars{color:var(--faint);direction:ltr;flex-wrap:wrap;justify-content:center;row-gap:8px;font-size:30px;font-weight:500;line-height:1.3;display:flex}.tenfinger-word{display:flex}.tenfinger-ch{text-align:center;border-radius:var(--radius-xs);min-width:.7em;display:block}.tenfinger-ch.is-space{min-width:.45em}.tenfinger-ch.is-ok{color:var(--ink)}.tenfinger-ch.is-bad{color:var(--accent-text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:2px}.tenfinger-ch.is-space.is-bad{box-shadow:inset 0 -3px 0 var(--accent);text-decoration:none}.tenfinger-ch.is-cur{color:var(--ink);outline:2px solid var(--accent);outline-offset:2px}.tenfinger-result{text-align:center;font-size:20px;font-weight:600}.tenfinger-kb{direction:ltr;padding:20px 16px;display:none}.tenfinger-board{--kh:40px;--kg:5px;max-width:900px;height:calc(5 * var(--kh) + 4 * var(--kg));margin:0 auto;position:relative}.tenfinger-key{border-radius:var(--radius-xs);background:var(--screen-line);color:var(--screen-ink);flex-direction:column;justify-content:center;align-items:center;font-size:16px;font-weight:500;line-height:1;display:flex;position:absolute}.tenfinger-key.is-num{font-size:14px}.tenfinger-key.is-home{background:var(--screen-line-2)}.tenfinger-key.is-mod{color:var(--screen-muted);white-space:nowrap;justify-content:flex-end;align-items:flex-start;padding:0 0 7px 9px;font-size:12px}.tenfinger-key.is-top{border-radius:var(--radius-xs) var(--radius-xs) 0 var(--radius-xs)}.tenfinger-key.is-bottom{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.tenfinger-key.is-next{background:var(--accent);color:var(--ink);font-weight:700}.tenfinger-bump{background:var(--screen-muted);border-radius:1px;width:12px;height:2px;margin-top:5px;display:block}.tenfinger-key.is-next .tenfinger-bump{background:var(--ink)}@media (width>=640px){.tenfinger-kb{display:block}}.tenfinger-fingers{direction:ltr;flex-wrap:wrap;gap:6px 20px;display:flex}.tenfinger-hand{flex:280px;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}.tenfinger-finger{border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--panel);min-height:40px;color:var(--muted);text-align:center;justify-content:center;align-items:center;padding:2px;font-size:12px;line-height:1.1;transition:background-color .15s,color .15s;display:flex}.tenfinger-finger.is-active{border-color:var(--ink);background:var(--ink);color:var(--bg);font-weight:600}.tenfinger-next{font-size:16px;line-height:1.3}.tenfinger-muted{color:var(--muted)}.tenfinger-hint{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:10px 12px;display:flex}.tenfinger-hint p{font-size:15px}.tenfinger-note{color:var(--muted);font-size:15px;display:none}@media (hover:none) and (pointer:coarse){.tenfinger-note{display:block}}@media (width>=1024px){.tenfinger-panel{gap:14px}.tenfinger-drill{min-height:150px;padding:24px 0 28px}.tenfinger-chars{font-size:34px}.tenfinger-kb{padding:28px 24px}.tenfinger-board{--kh:52px;--kg:6px}.tenfinger-key{font-size:18px}.tenfinger-key.is-num{font-size:15px}.tenfinger-key.is-mod{padding:0 0 8px 10px}.tenfinger-hand{gap:6px}.tenfinger-finger{font-size:14px}.tenfinger-next{font-size:18px}.tenfinger>.keys{justify-self:end;width:420px}}@media (prefers-reduced-motion:no-preference){.tenfinger-ch.is-cur,.tenfinger-key.is-next{animation:.2s cubic-bezier(.2,.8,.2,1) tenfinger-pop}}@keyframes tenfinger-pop{0%{transform:scale(.9)}to{transform:none}}