.training-keyboard,.hand-guide,.finger-guide-reference{--wf-finger-left-pinky-fill:light-dark(#efe4ed,#302431);--wf-finger-right-pinky-fill:light-dark(#e9dce8,#372a39);--wf-finger-left-pinky-accent:light-dark(#805477,#c59abd);--wf-finger-right-pinky-accent:light-dark(#764a71,#cda4c7);--wf-finger-left-ring-fill:light-dark(#e9e6f3,#29283d);--wf-finger-right-ring-fill:light-dark(#e1def0,#303047);--wf-finger-left-ring-accent:light-dark(#64588a,#aaa3d6);--wf-finger-right-ring-accent:light-dark(#594e80,#b6afe1);--wf-finger-left-middle-fill:light-dark(#e2edf7,#202f3e);--wf-finger-right-middle-fill:light-dark(#dbe8f4,#263748);--wf-finger-left-middle-accent:light-dark(#496e91,#8bb6db);--wf-finger-right-middle-accent:light-dark(#3f6388,#9ac3e5);--wf-finger-left-index-fill:light-dark(#e0efee,#1c3335);--wf-finger-right-index-fill:light-dark(#d6eae8,#223d3f);--wf-finger-left-index-accent:light-dark(#3a7376,#88babc);--wf-finger-right-index-accent:light-dark(#32686d,#98c6c7);--wf-finger-left-thumb-fill:light-dark(#e6eaf0,#2a303a);--wf-finger-right-thumb-fill:var(--wf-finger-left-thumb-fill);--wf-finger-left-thumb-accent:light-dark(#606d80,#a7b2c3);--wf-finger-right-thumb-accent:var(--wf-finger-left-thumb-accent);--wf-finger-boundary:light-dark(#647084,#8290a4)}.training-guides{gap:var(--wf-space-4);grid-template-columns:minmax(0,2fr) minmax(18rem,1fr);align-items:stretch;display:grid}.training-guides[data-single-visual=true]{grid-template-columns:1fr}.training-keyboard,.training-hand-panel{border:1px solid var(--wf-border-strong);border-radius:var(--wf-radius-card);background:var(--wf-surface-sunken);min-width:0}.training-keyboard{padding:clamp(6px,1vw,14px);container-type:inline-size}.training-keyboard__caption{height:28px;color:var(--wf-text-primary);justify-content:space-between;align-items:center;gap:4px;margin-block-end:6px;font-size:.8rem;display:flex}.training-keyboard__row{justify-content:center;gap:clamp(2px,.6cqi,5px);margin-block-end:clamp(3px,.65cqi,6px);display:flex}.training-keyboard__row:last-child{margin-block-end:0}.training-key{--finger-fill:var(--wf-surface-raised);--finger-accent:var(--wf-finger-boundary);--finger-text:var(--wf-text-primary);--finger-boundary:var(--wf-finger-boundary);flex:var(--key-width) 1 0;border:1px solid var(--finger-boundary);background:var(--finger-fill);min-width:0;height:54px;color:var(--finger-text);font-family:var(--wf-font-typing);border-radius:clamp(3px,.8cqi,7px);place-items:center;font-size:clamp(.75rem,2.2cqi,.94rem);font-weight:750;display:grid;position:relative}.training-key--utility,.training-key--modifier{font-family:var(--wf-font-ui);font-size:clamp(.625rem,1.5cqi,.75rem)}.training-key--modifier{border-style:dashed}.training-key__label{line-height:1}.training-key__shift{color:var(--finger-text);font-size:.6875rem;line-height:1;position:absolute;inset-block-start:3px;inset-inline-start:5px}.training-key__zone{background:var(--finger-accent);border-radius:2px;height:3px;position:absolute;inset:auto 3px 2px}.training-key[data-zone=neutral] .training-key__zone{visibility:hidden}.training-key__marker{background:currentColor;width:25%;height:2px;position:absolute;inset-block-end:8px}.training-key__expected-mark,.training-key__error-mark{color:var(--wf-text-primary);font-family:var(--wf-font-ui);font-size:.5625rem;font-weight:800;line-height:1;position:absolute;inset-block-start:3px;inset-inline-end:3px}.training-key__error-mark{color:var(--wf-danger);font-size:.875rem;inset-block:auto 6px}.training-key--expected{z-index:1;outline:2px solid var(--wf-brand);outline-offset:1px}.training-key[data-guidance=hold]{outline-style:dashed}.training-key--pressed:before{content:"";border:1px solid var(--wf-text-primary);border-radius:2px;position:absolute;inset:2px}.training-key--correct:after{color:var(--wf-success);background:var(--wf-success-surface);content:"✓";border-radius:2px;font-size:.75rem;line-height:1;position:absolute;inset:auto 3px 6px auto}.training-key--incorrect{border-color:var(--wf-danger);background:var(--wf-danger-surface);border-style:double}.training-key--incorrect:after{content:"";border:1px solid var(--wf-danger);border-radius:2px;position:absolute;inset:2px}.training-hand-panel{align-content:center;gap:10px;padding:12px;display:grid}.hand-guide-diagram{width:100%;max-width:370px;margin-inline:auto}.hand-guide{aspect-ratio:540/290;width:100%;height:auto;display:block}.hand-guide__labels{text-align:center;color:var(--wf-text-primary);grid-template-columns:1fr 1fr;font-size:.8125rem;display:grid}.hand-guide__palm{fill:var(--wf-surface-raised);stroke:var(--wf-finger-boundary);stroke-width:3px}.hand-guide__region{fill:var(--finger-fill);stroke:var(--finger-boundary);stroke-width:2.5px}.hand-guide__accent{fill:none;stroke:var(--finger-accent);stroke-width:5px;stroke-linecap:round}.hand-guide__target,.hand-guide__tip{fill:none;stroke:var(--wf-brand);stroke-width:4.5px;stroke-linejoin:round;stroke-linecap:round;visibility:hidden}.hand-guide__finger--active .hand-guide__target,.hand-guide__finger--active .hand-guide__tip{visibility:visible}.hand-guide__finger[data-guidance=hold] .hand-guide__target{stroke-dasharray:7 4}.hand-guide__wrist{fill:none;stroke:var(--wf-finger-boundary);stroke-width:2.5px;stroke-linecap:round}.training-hand-panel p{color:var(--wf-text-secondary);text-align:center;justify-items:center;gap:4px;font-size:.875rem;line-height:1.45;display:grid}.training-hand-panel strong{color:var(--wf-text-primary)}.training-hand-panel__shift-slot{min-width:0;display:grid}.training-hand-panel__shift-slot>*{grid-area:1/1}.finger-guide-reference{min-width:0;color:var(--wf-text-primary);font-size:.8125rem}.finger-legend{flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex}.finger-legend__item{align-items:center;gap:6px;display:inline-flex}.finger-legend__pair{gap:2px;display:inline-flex}.finger-legend__pair i,.finger-mapping__swatch{background:var(--finger-accent);border:1px solid var(--finger-boundary);border-radius:2px;width:9px;height:12px;display:inline-block}.finger-legend__next{color:var(--wf-text-secondary);margin-inline-start:auto}.finger-mapping{margin-block-start:6px}.finger-mapping summary{cursor:pointer;align-items:center;gap:8px;width:fit-content;min-height:44px;font-weight:700;display:flex}.finger-mapping summary:before{content:"▸"}.finger-mapping[open] summary:before{content:"▾"}.finger-mapping p{color:var(--wf-text-secondary);max-width:80ch}.finger-mapping__hands{grid-template-columns:1fr 1fr;gap:24px;margin-block:16px;display:grid}.finger-mapping h3{margin-block-end:12px;font-size:1rem}.finger-mapping dl{gap:12px;display:grid}.finger-mapping dt{align-items:center;gap:8px;font-weight:700;display:flex}.finger-mapping dd{margin:4px 0 0 17px;line-height:1.7}.training-settings .toggle-row{min-height:44px}[data-finger-colors=false] .training-key,[data-finger-colors=false] .hand-guide__finger,[data-finger-colors=false] [data-zone],[data-finger-colors=false] [data-mapping-finger]{--finger-fill:var(--wf-surface-raised)!important;--finger-accent:var(--wf-finger-boundary)!important}@container (width<=34rem){.training-key--utility .training-key__label,.training-key--modifier .training-key__label{font-size:0}.training-key--utility .training-key__label:after,.training-key--modifier .training-key__label:after{content:attr(data-compact-label);font-size:.625rem}.training-key__expected-mark{text-align:center;font-size:0;inset:auto 0 6px}.training-key__expected-mark:after{content:attr(data-compact-mark);font-size:.75rem}.training-key--expected .training-key__marker{inset-block-end:19px}.training-key__shift{text-align:center;inset-inline:0}.training-key__error-mark{inset-inline-end:0}}@media (width<=70rem){.training-guides{grid-template-columns:1fr}}@media (width<=36rem){.finger-legend{gap:8px 12px}.finger-legend__next{width:100%;margin-inline-start:0}.finger-mapping__hands{grid-template-columns:1fr}}@media (forced-colors:active){.training-keyboard,.hand-guide,.finger-guide-reference{--wf-finger-boundary:CanvasText}.training-key,.hand-guide__region,.hand-guide__palm{fill:canvas;color:canvastext;stroke:canvastext;background:canvas;border-color:canvastext}.training-key__zone,.finger-legend__pair i,.finger-mapping__swatch{background:canvastext}.training-key--expected{outline:2px solid highlight}.training-key[data-guidance=hold]{outline-style:dashed}.training-key--incorrect,.training-key--incorrect:after{border-style:double;border-color:canvastext}.hand-guide__target,.hand-guide__tip{stroke:highlight}.hand-guide__accent,.hand-guide__wrist{stroke:canvastext}}