/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:root{--color-background: #ebe7dd;--color-surface: #e3ded3;--color-border: #3d3530;--color-border-light: #d8d0c5;--color-border-piano: #3d3530;--color-focus: #3d3530;--color-text: #2d2520;--color-text-secondary: #6b5d52;--color-text-secondary-selected: #2d2520;--color-button-base: #f7f5f0;--color-button-selected: #e07858;--color-button-highlighted: #eca088;--color-modal-overlay: rgba(45, 37, 32, .5);--color-modal-bg: #f7f5f0;--color-shortcut-bg: #3d3530;--color-shortcut-text: #f7f5f0;--piano-key-diatonic-fill: #f7f5f0;--piano-key-diatonic-stroke: #c0b8b0;--piano-key-diatonic-highlighted-fill: #eca088;--piano-key-diatonic-highlighted-stroke: #b8624c;--piano-key-diatonic-pressed-fill: #e07858;--piano-key-diatonic-pressed-stroke: #3d3530;--piano-key-chromatic-fill: #4a423c;--piano-key-chromatic-stroke: #4a423c;--piano-key-chromatic-highlighted-fill: #b86850;--piano-key-chromatic-highlighted-stroke: #503028;--piano-key-chromatic-pressed-fill: #c04838;--piano-key-chromatic-pressed-stroke: #2d2520;--piano-key-stroke-width: 2}[data-theme=dark]{--color-background: #2d2a28;--color-surface: #38342f;--color-surface-hover: #3f3a35;--color-modal-bg: #38342f;--color-modal-overlay: rgba(0, 0, 0, .75);--color-border: #5a544e;--color-border-light: #4a4540;--color-border-piano: #1f1d1b;--color-focus: #a05848;--color-text: #e8e6e3;--color-text-secondary: #2d2520;--color-text-secondary-selected: #0a0908;--color-button-base: #c5bdb5;--color-button-selected: #a05848;--color-button-highlighted: #b88070;--color-shortcut-bg: #4c4844;--color-shortcut-text: #ebeae9;--piano-key-diatonic-fill: #c5bdb5;--piano-key-diatonic-stroke: #5a544e;--piano-key-diatonic-highlighted-fill: #b88070;--piano-key-diatonic-highlighted-stroke: #906050;--piano-key-diatonic-pressed-fill: #a05848;--piano-key-diatonic-pressed-stroke: #0a0908;--piano-key-chromatic-fill: #1f1d1b;--piano-key-chromatic-stroke: #38342f;--piano-key-chromatic-highlighted-fill: #704838;--piano-key-chromatic-highlighted-stroke: #0f0e0d;--piano-key-chromatic-pressed-fill: #883828;--piano-key-chromatic-pressed-stroke: #0a0908}body{background-color:var(--color-background);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1rem;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-size:1rem;font-weight:400;margin:0}ul,ol{list-style:none;margin:0;padding:0}footer{font-size:.9rem;line-height:2.5rem;margin:10px auto auto;max-width:350px;text-align:center}footer a{color:var(--color-text)}footer svg{height:.9rem;margin-right:5px;vertical-align:-.1rem}.diatonic-piano-key{cursor:pointer;transition:fill .15s ease,stroke .15s ease,stroke-width .15s ease}.diatonic-piano-key[data-key-type=diatonic]{fill:var(--piano-key-diatonic-fill, #fff);stroke:var(--piano-key-diatonic-stroke, #000);stroke-width:var(--piano-key-stroke-width, 4)}.diatonic-piano-key[data-key-type=diatonic][data-pressed=true]{fill:var(--piano-key-diatonic-pressed-fill, #e84855);stroke:var( --piano-key-diatonic-pressed-stroke, var(--piano-key-diatonic-stroke, #000) );stroke-width:var(--piano-key-stroke-width, 4)}.diatonic-piano-key[data-key-type=diatonic][data-highlighted=true]{fill:var(--piano-key-diatonic-highlighted-fill, #f2929a);stroke:var( --piano-key-diatonic-highlighted-stroke, var(--piano-key-diatonic-stroke, #000) );stroke-width:var(--piano-key-stroke-width, 4)}.diatonic-piano-key[data-key-type=chromatic]{fill:var(--piano-key-chromatic-fill, #000);stroke:var(--piano-key-chromatic-stroke, #000);stroke-width:var(--piano-key-stroke-width, 4)}.diatonic-piano-key[data-key-type=chromatic][data-pressed=true]{fill:var(--piano-key-chromatic-pressed-fill, #e84855);stroke:var( --piano-key-chromatic-pressed-stroke, var(--piano-key-chromatic-stroke, #000) );stroke-width:var(--piano-key-stroke-width, 4)}.diatonic-piano-key[data-key-type=chromatic][data-highlighted=true]{fill:var(--piano-key-chromatic-highlighted-fill, #f2929a);stroke:var( --piano-key-chromatic-highlighted-stroke, var(--piano-key-chromatic-stroke, #000) );stroke-width:var(--piano-key-stroke-width, 4)}._app_fbo13_1{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;max-width:780px;margin:auto}._nav_fbo13_10{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px 10px 0;max-width:780px;width:100%}._navButtons_fbo13_19{display:flex;justify-content:flex-end}._navButton_fbo13_19{background:none;border:none;cursor:pointer;display:flex;color:var(--color-text);fill:var(--color-text);font-size:.9rem;margin:5px 0 5px 5px;padding:3px;vertical-align:middle}._navButton_fbo13_19:hover{text-decoration:underline}._navButton_fbo13_19:focus{outline:2px solid var(--color-focus)}._navButton_fbo13_19 svg{width:1rem;height:1rem;margin-right:5px}._piano_fbo13_51{border-top:3px solid var(--color-border-piano);margin:0 10px 20px;max-width:780px;width:100%;overflow:hidden}._piano_fbo13_51 svg{margin-top:-1px}._controls_12ljw_1{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;max-width:660px}@media only screen and (max-width:650px){._controls_12ljw_1{justify-content:center}}._heading_12ljw_15{border-bottom:1px solid var(--color-border);margin-bottom:10px;padding-bottom:5px;font-weight:600;text-align:center;width:100%}@media only screen and (max-width:650px){._heading_12ljw_15{max-width:350px}}._patternColumn_12ljw_30{margin-bottom:20px;width:310px}._modal_tl4cy_1{background-color:var(--color-modal-overlay);position:fixed;height:100%;width:100%;z-index:1000}._hidden_tl4cy_9{display:none}._modal_tl4cy_1 section{background-color:var(--color-modal-bg);box-shadow:0 0 5px 2px var(--color-border);border-radius:5px;overflow-y:scroll;margin:50px auto 10%;padding:30px;max-height:80%;width:70%;max-width:500px}._close_tl4cy_26{float:right;background:none;border:0;margin:0;padding:0}._heading_tl4cy_34{font-size:1.6rem;margin-bottom:1.6rem}._subheading_tl4cy_39{border-bottom:1px solid var(--color-border);margin-bottom:10px;padding-bottom:5px;font-weight:600;text-align:center;width:100%;margin-top:1.4rem}._paragraph_tl4cy_49{line-height:1.4rem;margin-bottom:1.4rem;margin-top:.5rem}._strong_tl4cy_55{font-weight:600}._shortcut_tl4cy_59{background-color:var(--color-shortcut-bg);border-radius:5px;color:var(--color-shortcut-text);display:inline-block;fill:var(--color-shortcut-text);font-size:.9rem;min-height:15px;min-width:15px;padding:5px;text-align:center}._tableCell_tl4cy_72{padding:5px}._choice_p5z3s_1{background:var(--color-button-base);cursor:pointer;display:inline-block;height:40px;padding:10px;position:relative}._choice_p5z3s_1._selected_p5z3s_10{background:var(--color-button-selected)}._choice_p5z3s_1._highlighted_p5z3s_14{background:var(--color-button-highlighted)}._choice_p5z3s_1:focus{outline:none}._choice_p5z3s_1:focus-visible{background:var(--color-button-highlighted);box-shadow:0 0 0 2px var(--color-focus);outline:none;z-index:1}._text_p5z3s_29{float:left;max-width:100%}._name_p5z3s_34{color:var(--color-text-secondary);font-size:.7rem}._selected_p5z3s_10 ._name_p5z3s_34{color:var(--color-text-secondary-selected)}._options_18gbo_1{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:3px;width:100%}._options_18gbo_1 button{border:1px solid var(--color-border-light);border-radius:5px;font-size:.9rem;margin:5px;height:50px;padding:5px 10px;text-align:left;width:145px}._rootNote_1ehhy_1{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;width:100%}._buttonGroup_1ehhy_9{margin:0 5px 20px}._buttonGroup_1ehhy_9 li{display:inline-block}._buttonGroup_1ehhy_9 button{border-right:1px solid var(--color-border-light);border-top:1px solid var(--color-border-light);border-bottom:1px solid var(--color-border-light);border-left:0;box-sizing:border-box;font-size:1rem;margin:0;padding:0;height:50px;width:50px;text-align:center;vertical-align:middle}._buttonGroup_1ehhy_9 li:first-child button{border-radius:10px 0 0 10px;border-left:1px solid var(--color-border-light)}._buttonGroup_1ehhy_9 li:last-child button{border-right:1px solid var(--color-border-light);border-radius:0 10px 10px 0}._buttonGroup_1ehhy_9 button:focus{z-index:1}@media only screen and (max-width:650px){._buttonGroup_1ehhy_9{margin:0 0 20px}._buttonGroup_1ehhy_9 button{width:44px;height:44px}}._search_3ydof_1{text-align:center;max-width:100%;width:100%}._heading_3ydof_7{border-bottom:1px solid var(--color-border);margin-bottom:10px;padding-bottom:5px;font-weight:600;text-align:center;width:100%}@media only screen and (max-width:650px){._search_3ydof_1{width:310px}}._search_3ydof_1 input{border:1px solid var(--color-border-light);border-radius:5px;font-size:1.2rem;height:40px;padding:5px;margin:0 5px;width:95%;background:var(--color-button-base);color:var(--color-text-secondary)}._search_3ydof_1 input:focus{outline:2px solid var(--color-focus)}._tabs_128sh_1{display:flex;flex-direction:column;justify-content:center;margin-bottom:10px;width:310px;border-bottom:2px solid var(--color-border-light)}._tabList_128sh_10{display:flex;justify-content:space-between}._tabList_128sh_10 button{background-color:transparent;border:0;border-bottom:2px solid transparent;color:var(--color-text);cursor:pointer;font-size:1rem;padding:8px 12px;width:100%}._tabList_128sh_10 button:hover{text-decoration:underline}._selected_128sh_30{background-color:var(--color-button-selected);border-bottom-color:var(--color-button-selected);font-weight:600}