.tutor-main{max-width:1160px}.tutor-welcome{padding:12px 16px;border-left:4px solid #1266ff;background:#eaf2ff;color:#17365c;border-radius:8px}.tutor-profiles{margin:22px 0}.profile-fields{display:grid;grid-template-columns:1fr 1.5fr;gap:20px;align-items:end}.profile-fields form{display:flex;gap:12px;align-items:end}.profile-fields label{display:grid;gap:7px;min-width:0;flex:1;font-weight:750}.profile-fields input,.profile-fields select,.typing-input-label input{width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}.profile-fields form button{white-space:nowrap}.tutor-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}.tutor-levels{padding:20px}.tutor-levels ol{list-style:none;padding:0;margin:0;display:grid;gap:8px}.tutor-levels button{width:100%;padding:11px 12px;text-align:left;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font:700 .9rem/1.4 system-ui;cursor:pointer}.tutor-levels button[aria-current="step"]{border-color:#1266ff;background:#e9f2ff;color:#123b7a;box-shadow:inset 3px 0 #1266ff}.tutor-practice{min-width:0;display:grid;gap:24px}.tutor-practice h2{margin:6px 0 12px}.typing-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;background:#081c39;color:#fff;border-radius:12px;padding:16px;margin:20px 0}.typing-stats div{display:grid;text-align:center;gap:4px}.typing-stats strong{font-size:clamp(1.3rem,4vw,2rem);font-variant-numeric:tabular-nums}.typing-stats span{color:#b8d4ff;font-size:.8rem}.typing-legend{font-size:.85rem;color:var(--muted)}.typing-drill{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;font:600 clamp(1.1rem,3.8vw,1.45rem)/1.85 ui-monospace,Consolas,monospace;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--bg);min-height:110px}.typing-drill span{border-radius:3px}.typing-drill .typed{color:#11633c;background:#e3f5e8}.typing-drill .current{outline:2px solid #1266ff;background:#d9eaff;color:#071d3d;position:relative}.typing-drill .current.wrong{outline-color:#b22539;background:#ffe2e6;color:#761b28}.typing-input-label{display:grid;gap:8px;font-weight:750;margin-top:18px}.tutor-actions{margin-top:16px}.typing-result{padding:20px;border:1px solid #9ac9ae;border-radius:12px;background:#edf9f1;color:#163e28;margin-top:20px}.typing-result[hidden]{display:none}.typing-result h3{margin-top:0}.typing-finger{min-height:2.8em;font-weight:750;color:var(--brand)}.typing-keyboard{display:grid;gap:5px;max-width:680px;margin:auto}.keyboard-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.keyboard-row:nth-child(2){padding-left:6px}.keyboard-row:nth-child(3){padding-left:12px}.keyboard-row:nth-child(4){padding-left:18px}.keyboard-bottom{grid-template-columns:2fr 6fr 2fr}.typing-keyboard button{--finger:#c7dcff;position:relative;min-width:0;min-height:42px;padding:4px 0;border:1px solid #59677a;border-bottom-width:4px;border-radius:7px;color:#071225;background:var(--finger);font:800 .95rem system-ui;cursor:pointer;touch-action:manipulation}.typing-keyboard [data-key="f"]::after,.typing-keyboard [data-key="j"]::after{content:"";position:absolute;width:10px;height:2px;background:currentColor;bottom:5px;left:calc(50% - 5px)}
.finger-guide [data-finger="lp"],.finger-guide [data-finger="rp"]{--finger:#f4c6dc}.finger-guide [data-finger="lr"],.finger-guide [data-finger="rr"]{--finger:#d9caf6}.finger-guide [data-finger="lm"],.finger-guide [data-finger="rm"]{--finger:#ffe0a3}.finger-guide [data-finger="li"]{--finger:#b1e3d4}.finger-guide [data-finger="ri"]{--finger:#addcf7}.finger-guide [data-finger="thumb"]{--finger:#c8d3df}.typing-keyboard button.next-key{outline:3px solid #1266ff;outline-offset:1px;z-index:1}.typing-keyboard button.pressed-good{background:#187b43;color:white;box-shadow:0 0 0 3px #6bda98;transform:translateY(2px)}.typing-keyboard button.pressed-bad{background:#b22539;color:white;box-shadow:0 0 0 3px #f69aab;transform:translateY(2px)}.typing-keyboard button[aria-pressed="true"]{background:#1266ff;color:#fff}.typing-hands{max-width:420px;margin:10px auto 0}.typing-hands svg{display:block;width:100%;height:auto}.typing-hands .hand-palm{fill:#e4eaf3;stroke:#6e7c90;stroke-width:2}.typing-hands [data-finger] rect{fill:var(--finger);stroke:#6e7c90;stroke-width:1.5}.typing-hands [data-finger] circle{fill:#fff9}.typing-hands .next-finger rect{stroke:#1266ff;stroke-width:4}.typing-hands text{fill:var(--text);font:600 13px system-ui}.tutor-history{margin-top:24px}.tutor-history ol{padding-left:22px}.tutor-history li{padding:8px 0;border-bottom:1px solid var(--line)}
@media(max-width:900px){.tutor-workspace{grid-template-columns:1fr}.tutor-levels ol{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-fields{grid-template-columns:1fr}}
@media(max-width:480px){.tutor-levels{padding:16px}.tutor-levels button{font-size:.8rem;padding:8px}.profile-fields form{flex-wrap:wrap}.profile-fields form label{flex-basis:100%}.profile-fields form button{width:100%}.typing-keyboard,.keyboard-row{gap:3px}.typing-keyboard button{min-height:34px;font-size:.75rem;border-radius:5px}.keyboard-row:nth-child(n){padding-left:0}.keyboard-bottom button{font-size:.7rem}.typing-drill{padding:12px}.typing-stats{padding:12px 6px}.tutor-actions{gap:8px}.tutor-actions .tool-button{padding-inline:10px}.typing-finger{font-size:.9rem}}
/* Keep the letter, keyboard, and hands together during practice. */
.tutor-practice .finger-guide{border:0;box-shadow:none;padding:0;margin:18px 0;background:transparent}.finger-guide h2{font-size:1.1rem}.typing-finger{min-height:0;margin:8px 0 12px}.guide-visuals{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:14px;align-items:center}.typing-hands{width:100%;margin:0 auto}.typing-keyboard{width:100%;min-width:0}.typing-drill{min-height:80px;scroll-margin-top:155px}.tutor-levels li{margin:0}.tutor-levels button:disabled{opacity:.75}
@media(max-width:1100px){.typing-drill{scroll-margin-top:90px}}
@media(max-width:650px){.guide-visuals{grid-template-columns:1fr}.typing-hands{max-width:210px}.finger-guide .tool-note{font-size:.8rem}.typing-drill{line-height:1.65}}