*,:before,:after{box-sizing:border-box}:root{--key-white-width:2rem;--key-black-width:1.25rem;--key-white-height:8rem;--key-black-height:5rem;--key-white-bg:#fff;--key-white-border:#bbb;--key-white-hover:#f0f0f0;--key-black-bg:#222;--key-black-hover:#444;--key-highlight-white:#93c5fd;--key-highlight-black:#2563eb;--key-active-white:#f59e0b;--key-active-black:#d97706;--key-label-white:#666;--key-label-black:#ccc;--finger-1:#e53935;--finger-2:#fb8c00;--finger-3:#43a047;--finger-4:#1e88e5;--finger-5:#8e24aa;--finger-badge-white-size:1rem;--finger-badge-black-size:.85rem;--finger-badge-text:#fff;--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px / 145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}._white_kr93l_1{width:var(--key-white-width);height:var(--key-white-height);background:var(--key-white-bg);border:1px solid var(--key-white-border);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:0 0 4px 4px;flex-shrink:0;justify-content:center;align-items:flex-end;padding-bottom:4px;transition:background .1s;display:flex;position:relative}._white_kr93l_1:hover{background:var(--key-white-hover)}._black_kr93l_23{width:var(--key-black-width);height:var(--key-black-height);background:var(--key-black-bg);cursor:pointer;z-index:1;-webkit-user-select:none;user-select:none;border-radius:0 0 3px 3px;justify-content:center;align-items:flex-end;padding-bottom:4px;transition:background .1s;display:flex;position:relative}._black_kr93l_23:hover{background:var(--key-black-hover)}._highlighted_kr93l_43._white_kr93l_1{background:var(--key-highlight-white)}._highlighted_kr93l_43._black_kr93l_23{background:var(--key-highlight-black)}._active_kr93l_51._white_kr93l_1{background:var(--key-active-white);box-shadow:0 0 .75rem color-mix(in srgb, var(--key-active-white) 70%, transparent)}._active_kr93l_51._black_kr93l_23{background:var(--key-active-black);box-shadow:0 0 .75rem color-mix(in srgb, var(--key-active-black) 80%, transparent)}._label_kr93l_61{color:var(--key-label-white);pointer-events:none;white-space:nowrap;font-size:.6rem;position:absolute;top:4px;left:50%;transform:translate(-50%)}._black_kr93l_23 ._label_kr93l_61{color:var(--key-label-black);font-size:.5rem}._fingerBadge_kr93l_77{color:var(--finger-badge-text);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;font-size:.6rem;font-weight:700;line-height:1;display:flex;position:absolute;bottom:.375rem}._white_kr93l_1 ._fingerBadge_kr93l_77{width:var(--finger-badge-white-size);height:var(--finger-badge-white-size)}._black_kr93l_23 ._fingerBadge_kr93l_77{width:var(--finger-badge-black-size);height:var(--finger-badge-black-size)}._fingerBadge_kr93l_77[data-finger="1"]{background:var(--finger-1)}._fingerBadge_kr93l_77[data-finger="2"]{background:var(--finger-2)}._fingerBadge_kr93l_77[data-finger="3"]{background:var(--finger-3)}._fingerBadge_kr93l_77[data-finger="4"]{background:var(--finger-4)}._fingerBadge_kr93l_77[data-finger="5"]{background:var(--finger-5)}._container_jglfv_1{position:relative}._wrapper_jglfv_5{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border) transparent;padding-bottom:.5rem;overflow:auto hidden}._wrapper_jglfv_5::-webkit-scrollbar{height:.5rem}._wrapper_jglfv_5::-webkit-scrollbar-track{background:0 0}._wrapper_jglfv_5::-webkit-scrollbar-thumb{background:var(--border);border-radius:.25rem}._wrapper_jglfv_5::-webkit-scrollbar-thumb:hover{background:var(--text)}._octaveLabels_jglfv_31{height:1.2rem;position:relative}._octaveLabel_jglfv_31{color:var(--text-muted,var(--text));opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:.65rem;position:absolute}._keyboard_jglfv_45{height:var(--key-white-height);flex-direction:row;width:max-content;display:flex;position:relative}._container_jglfv_1:before,._container_jglfv_1:after{content:"";pointer-events:none;opacity:0;z-index:2;width:2.5rem;transition:opacity .15s ease-out;position:absolute;top:0;bottom:.5rem}._container_jglfv_1:before{background:linear-gradient(to right, var(--bg), transparent);left:0}._container_jglfv_1:after{background:linear-gradient(to left, var(--bg), transparent);right:0}._container_jglfv_1._fadeLeft_jglfv_76:before,._container_jglfv_1._fadeRight_jglfv_80:after{opacity:1}._container_hqg6k_1{--step-size:3rem;--handle-size:1.5rem;--inset:calc(var(--handle-size) / 2);--step:var(--step-size);--width:calc((var(--n) - 1) * var(--step) + var(--handle-size));box-sizing:border-box;grid-template-rows:auto auto;align-items:center;row-gap:.5rem;display:inline-grid}._input_hqg6k_14{opacity:0;pointer-events:none;width:0;height:0;position:absolute}._labels_hqg6k_22{width:var(--width);height:.9rem;position:relative}._label_hqg6k_22{left:calc(var(--inset) + var(--idx) * var(--step));color:var(--text);opacity:.55;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;font-size:.75rem;font-weight:500;line-height:1;transition:color .2s,opacity .2s;position:absolute;transform:translate(-50%)}._label_hqg6k_22:hover{opacity:.85}._edgeLabels_hqg6k_49 ._label_hqg6k_22:first-of-type{left:0;transform:translate(0)}._edgeLabels_hqg6k_49 ._label_hqg6k_22:last-of-type{left:var(--width);transform:translate(-100%)}._labelActive_hqg6k_59{color:var(--text-h);opacity:1;font-weight:500}._labelDisabled_hqg6k_65,._labelDisabled_hqg6k_65:hover{cursor:not-allowed;opacity:.3}._trackWrapper_hqg6k_71{height:var(--handle-size);position:relative}._track_hqg6k_71{top:50%;left:var(--inset);width:calc((var(--n) - 1) * var(--step));background:var(--code-bg);height:.375rem;box-shadow:inset 0 0 0 1px var(--border);border-radius:.25rem;position:absolute;transform:translateY(-50%)}._dot_hqg6k_88{top:50%;left:calc(var(--idx) * var(--step));background:var(--code-bg);width:.75rem;height:.75rem;box-shadow:inset 0 0 0 1px var(--border);cursor:pointer;z-index:0;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}._dotDisabled_hqg6k_102{cursor:not-allowed;opacity:.4}._handle_hqg6k_107{z-index:1;width:var(--handle-size);height:var(--handle-size);transform:translate(-50%, -50%) translateX(calc(var(--i) * var(--step)));box-shadow:0 0 0 2px var(--border), inset 0 1px 2px #ffffff4d, 0 2px 6px #00000080;pointer-events:none;background-image:radial-gradient(circle at 45% 35%,#fff9 0%,#ffffff0d 45%,#0000 70%),conic-gradient(#4a4a4a 0deg,#c8c8c8 30deg,#f0f0f0 60deg,#e0e0e0 90deg,#aaa 120deg,#888 150deg,silver 180deg,#e8e8e8 210deg,#f5f5f5 240deg,#d0d0d0 270deg,#909090 300deg,#c8c8c8 330deg,#4a4a4a 360deg);border-radius:50%;transition:transform .25s;position:absolute;top:50%;left:0}._handle_hqg6k_107:before{content:"";background-color:#555;border-radius:50%;width:.375rem;height:.375rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px 1px #000,0 1px 1px #ffffff26}._field_39edo_1{flex-direction:column;align-items:flex-start;gap:.375rem;display:flex}._label_39edo_8{text-transform:uppercase;letter-spacing:.04em;color:var(--text);font-size:.75rem;font-weight:500}._button_egcpc_1{appearance:none;font:inherit;cursor:pointer;color:#222;text-shadow:0 1px 2px #ffffff80;background-image:radial-gradient(at 50% 20%,#ffffffa0 0%,#fff0 55%),conic-gradient(#4a4a4a 0deg,#c8c8c8 30deg,#f0f0f0 60deg,#e0e0e0 90deg,#aaa 120deg,#888 150deg,silver 180deg,#e8e8e8 210deg,#f5f5f5 240deg,#d0d0d0 270deg,#909090 300deg,#c8c8c8 330deg,#4a4a4a 360deg);border:none;border-radius:.5rem;min-width:6rem;padding:.55rem 1rem;font-size:.875rem;font-weight:500;line-height:1;transition:opacity .15s,transform .15s;box-shadow:0 0 0 2px #888,inset 0 1px 2px #ffffff4d,0 2px 6px #00000080}._button_egcpc_1:hover:not(:disabled){opacity:.9}._button_egcpc_1:focus-visible{outline:2px solid var(--accent);outline-offset:2px}._button_egcpc_1:disabled{opacity:.55;cursor:not-allowed}.app{text-align:left;min-width:375px;max-width:860px;margin:0 auto;padding:1.5rem;position:relative;overflow:hidden}.app__title{margin:0 0 1rem;font-size:2rem}.app__controls{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.app__row{flex-wrap:wrap;gap:1.25rem;display:flex}.app__toggle{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;font-size:.9rem;display:flex}.app__notes{color:var(--text);font-size:.9rem;font-family:var(--mono);margin-top:1rem}@media (width<=640px){.app{padding:1rem}.app__title{font-size:1.5rem}}