.finger-guide{--finger-pinky:#9163d5;--finger-ring:#0486d3;--finger-middle:#009c8f;--finger-index:#df911a;--finger-thumb:#768193;--finger-tint:16%;--finger-active-text:#fff}@supports (color:lab(0% 0 0)){.finger-guide{--finger-pinky:lab(51.0214% 36.9749 -52.6699);--finger-ring:lab(53.0938% -9.07362 -48.6581);--finger-middle:lab(57.482% -45.3187 -4.53639);--finger-index:lab(67.1959% 24.4167 67.5432);--finger-thumb:lab(53.4835% -1.19191 -11.0275);--finger-active-text:lab(100% 0 0)}}.dark .finger-guide{--finger-pinky:#ad87ed;--finger-ring:#4fa6e9;--finger-middle:#26bdae;--finger-index:#f2af48;--finger-thumb:#949fb2;--finger-tint:24%;--finger-active-text:var(--background)}@supports (color:lab(0% 0 0)){.dark .finger-guide{--finger-pinky:lab(63.1007% 30.9343 -46.8099);--finger-ring:lab(64.9018% -10.7799 -42.587);--finger-middle:lab(68.9627% -41.4963 -4.22177);--finger-index:lab(76.7033% 18.106 60.6421);--finger-thumb:lab(65.0872% -1.25876 -11.0566)}}.finger-guide [data-finger-type=pinky]{--finger:var(--finger-pinky)}.finger-guide [data-finger-type=ring]{--finger:var(--finger-ring)}.finger-guide [data-finger-type=middle]{--finger:var(--finger-middle)}.finger-guide [data-finger-type=index]{--finger:var(--finger-index)}.finger-guide [data-finger-type=thumb]{--finger:var(--finger-thumb)}.fg-keyboard{-webkit-user-select:none;user-select:none;flex-direction:column;gap:.25rem;display:flex}.fg-row{gap:.25rem;display:flex}.fg-key{border-radius:calc(var(--radius-control) - 2px);border:1px solid var(--border);background:color-mix(in oklch,var(--finger)var(--finger-tint),var(--background));min-width:0;height:2.5rem;color:var(--foreground);font-family:var(--font-mono,ui-monospace,monospace);justify-content:center;align-items:center;font-size:.8rem;line-height:1;transition:background-color .12s ease-out,transform .12s ease-out,box-shadow .12s ease-out;display:flex;position:relative}.fg-key[data-modifier=true]{color:color-mix(in oklch,var(--muted-foreground)75%,var(--foreground));font-family:inherit;font-size:.7rem}.fg-key[data-active=true]{background:var(--finger);color:var(--finger-active-text);border-color:var(--finger);box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--finger);z-index:1;transform:translateY(-1px)}.fg-key[data-highlight=true]:not([data-active=true]){border-color:var(--finger);border-width:2px}.fg-key[data-bump=true]:after{content:"";opacity:.6;background:currentColor;border-radius:1px;width:.6rem;height:2px;position:absolute;bottom:.3rem}.fg-keyboard[data-mode=heatmap] .fg-key{background:color-mix(in oklch,var(--primary)calc(var(--heat,0)*var(--heat-max)),var(--muted))}.fg-keyboard[data-compact=true] .fg-key{height:2rem;font-size:.7rem}.fg-hands{width:100%;max-width:26rem;margin:0 auto;display:block}@media (max-height:860px){.fg-hands{max-width:14rem}}.fg-hands .fg-palm{fill:var(--background);stroke:var(--border)}.fg-hands .fg-finger{fill:color-mix(in oklch,var(--finger)var(--finger-tint),var(--background));stroke:var(--border);transition:fill .12s ease-out}.fg-hands .fg-finger[data-active=true]{fill:var(--finger);stroke:var(--finger)}@media (prefers-reduced-motion:reduce){.fg-key,.fg-hands .fg-finger{transition:none}.fg-key[data-active=true]{transform:none}}