.finger-guide-page .typing-tools-hero{background:linear-gradient(125deg,#183ec9,#6545d9);color:#fff;border:0}.finger-guide-page .typing-tools-hero h1,.finger-guide-page .typing-tools-hero p,.finger-guide-page .typing-tools-eyebrow{color:inherit}.finger-guide-page .typing-tools-hero-badge{background:#ffffff20;color:white;border-color:#ffffff40}.finger-guide-page .finger-workspace{padding:clamp(20px,3vw,40px)}.finger-guide-page .finger-instruction{max-width:850px;line-height:1.7;color:var(--text-secondary,#475569)}.finger-guide-page .finger-interactive-status{justify-content:flex-start;max-width:none;margin:20px 0}.finger-guide-page .finger-legend{grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin:24px 0}.finger-guide-page .keyboard-visual{max-width:1120px;margin:20px auto;padding:12px;gap:10px}.finger-guide-page .keyboard-row{min-width:740px;gap:8px;justify-content:center}.finger-guide-page .keyboard-key{flex:1;min-width:46px;height:64px;max-width:76px;font:800 20px/1 system-ui;color:#172554;border:1px solid #aebed2;border-bottom-width:3px}.finger-guide-page .keyboard-key.wide{max-width:130px}.finger-guide-page .keyboard-key.space{max-width:560px;flex:6}.finger-guide-page .finger-legend>div{color:#172554;border:1px solid #aebed2;font-size:12px;padding:12px 5px}.finger-guide-page .finger-lp{background:#fee2e2}.finger-guide-page .finger-lr{background:#ffedd5}.finger-guide-page .finger-lm{background:#fef3c7}.finger-guide-page .finger-li{background:#dbeafe}.finger-guide-page .finger-ri{background:#ccfbf1}.finger-guide-page .finger-rm{background:#dcfce7}.finger-guide-page .finger-rr{background:#f3e8ff}.finger-guide-page .finger-rp{background:#fce7f3}.finger-guide-page .finger-thumb{background:#e0e7ff}.finger-guide-page .keyboard-key.home{text-decoration:underline;text-underline-offset:8px}.finger-guide-page .finger-chart-actions{justify-content:flex-start;margin-top:22px}.finger-guide-page .keyboard-key:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}.finger-guide-page .finger-workspace .section-heading h2{font-size:clamp(24px,3vw,34px)}@media(max-width:1000px){.finger-guide-page .finger-legend{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.finger-guide-page .keyboard-key{height:52px}.finger-guide-page .finger-interactive-status strong{font-size:15px}.finger-guide-page .keyboard-visual{padding:10px 5px}.finger-guide-page .finger-legend{gap:6px}}@media(prefers-reduced-motion:reduce){.finger-guide-page .keyboard-key{transition:none}}@media print{body.print-finger-chart .finger-guide-page .finger-workspace{display:block!important}body.print-finger-chart .finger-workspace>*{display:none!important}body.print-finger-chart .finger-workspace .section-heading,body.print-finger-chart .finger-workspace .finger-legend,body.print-finger-chart .finger-workspace .keyboard-visual,body.print-finger-chart .finger-workspace .callout{display:block!important}.finger-guide-page .keyboard-row{min-width:0}.finger-guide-page .keyboard-key{min-width:30px;height:40px}.finger-guide-page .finger-legend{display:grid!important}}

/* v17.10.286: downloadable vector chart preview below the interactive workspace. */
.finger-guide-page .finger-download-section{scroll-margin-top:96px}
.finger-guide-page .finger-printable-figure{max-width:1040px;margin:22px auto 18px}
.finger-guide-page .finger-printable-figure>a{display:block;overflow:hidden;border:1px solid #d0dced;border-radius:15px;background:#f7faff}
.finger-guide-page .finger-printable-figure img{display:block;width:100%;height:auto}
.finger-guide-page .finger-printable-figure figcaption{padding:11px 3px;color:var(--text-secondary,#475569);font-size:14px;line-height:1.65}
html[data-theme="dark"] .finger-guide-page .finger-printable-figure>a{border-color:#3a516c}
@media print{body.print-finger-chart .finger-download-section{display:none!important}}