*,: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{--width-app-max: 780px;--width-control-wide: 650px;--width-control-narrow: 350px;--spacing-gap-wide: 20px;--spacing-gap-narrow: 10px;--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: #b8624c;--piano-key-chromatic-fill: #4a423c;--piano-key-chromatic-stroke: #4a423c;--piano-key-chromatic-highlighted-fill: #b86850;--piano-key-chromatic-highlighted-stroke: #4a423c;--piano-key-chromatic-pressed-fill: #c04838;--piano-key-chromatic-pressed-stroke: #4a423c;--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: #5a544e;--piano-key-diatonic-pressed-fill: #a05848;--piano-key-diatonic-pressed-stroke: #5a544e;--piano-key-chromatic-fill: #1f1d1b;--piano-key-chromatic-stroke: #38342f;--piano-key-chromatic-highlighted-fill: #704838;--piano-key-chromatic-highlighted-stroke: #38342f;--piano-key-chromatic-pressed-fill: #883828;--piano-key-chromatic-pressed-stroke: #38342f}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, #f7f5f0);stroke:var(--piano-key-diatonic-stroke, #c0b8b0);stroke-width:var(--piano-key-stroke-width, 2)}.diatonic-piano-key[data-key-type=diatonic][data-highlighted=true]{fill:var(--piano-key-diatonic-highlighted-fill, #eca088);stroke:var( --piano-key-diatonic-highlighted-stroke, var(--piano-key-diatonic-stroke, #b8624c) );stroke-width:var(--piano-key-stroke-width, 2)}.diatonic-piano-key[data-key-type=diatonic][data-pressed=true]{fill:var(--piano-key-diatonic-pressed-fill, #e07858);stroke:var( --piano-key-diatonic-pressed-stroke, var(--piano-key-diatonic-stroke, #b8624c) );stroke-width:var(--piano-key-stroke-width, 2)}.diatonic-piano-key[data-key-type=chromatic]{fill:var(--piano-key-chromatic-fill, #4a423c);stroke:var(--piano-key-chromatic-stroke, #4a423c);stroke-width:var(--piano-key-stroke-width, 2)}.diatonic-piano-key[data-key-type=chromatic][data-highlighted=true]{fill:var(--piano-key-chromatic-highlighted-fill, #b86850);stroke:var( --piano-key-chromatic-highlighted-stroke, var(--piano-key-chromatic-stroke, #4a423c) );stroke-width:var(--piano-key-stroke-width, 2)}.diatonic-piano-key[data-key-type=chromatic][data-pressed=true]{fill:var(--piano-key-chromatic-pressed-fill, #c04838);stroke:var( --piano-key-chromatic-pressed-stroke, var(--piano-key-chromatic-stroke, #4a423c) );stroke-width:var(--piano-key-stroke-width, 2)}._app_17r63_1{display:flex;flex-wrap:wrap;justify-content:space-evenly;max-width:var(--width-app-max);margin:auto}._nav_17r63_9{display:flex;flex-wrap:wrap;justify-content:space-between;margin:10px 10px 0;max-width:var(--width-app-max);width:100%}._navButtons_17r63_18{display:flex;justify-content:flex-end}._navButton_17r63_18{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_17r63_18:hover{text-decoration:underline}._navButton_17r63_18:focus-visible{outline:2px solid var(--color-focus)}._navButton_17r63_18 svg{width:1rem;height:1rem;margin-right:5px}._piano_17r63_50{border-top:3px solid var(--color-border-piano);margin:0 10px 20px;max-width:var(--width-app-max);width:100%;overflow:hidden}._piano_17r63_50 svg{margin-top:-1px}._controls_17r63_62{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-gap-wide);max-width:var(--width-control-wide)}@media only screen and (max-width:680px){._controls_17r63_62{max-width:var(--width-control-narrow)}}._patternRow_17r63_76{display:flex;gap:var(--spacing-gap-wide);width:100%}@media only screen and (max-width:680px){._patternRow_17r63_76{gap:var(--spacing-gap-narrow)}}._patternColumn_17r63_88{flex:1;display:flex;flex-direction:column;align-items:center}._columnHeader_17r63_95{border-bottom:1px solid var(--color-border);margin-bottom:10px;padding-bottom:5px;font-weight:600;text-align:center;width:100%}._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_1ozcc_1{background:var(--color-button-base);border:none;cursor:pointer;display:inline-block;height:40px;padding:10px;position:relative}._choice_1ozcc_1._selected_1ozcc_11{background:var(--color-button-selected)}._choice_1ozcc_1._highlighted_1ozcc_15{background:var(--color-button-highlighted)}._choice_1ozcc_1:focus-visible{background:var(--color-button-highlighted);box-shadow:0 0 0 2px var(--color-focus);z-index:1}._text_1ozcc_25{float:left;max-width:100%}._name_1ozcc_30{color:var(--color-text-secondary);font-size:.7rem}._selected_1ozcc_11 ._name_1ozcc_30{color:var(--color-text-secondary-selected)}._options_j5ys7_1{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-gap-narrow);margin-top:3px;width:100%}._options_j5ys7_1 button{border:1px solid var(--color-border-light);border-radius:5px;font-size:.9rem;height:50px;padding:5px 10px;text-align:left;width:145px}._options_j5ys7_1 button:focus-visible{box-shadow:0 0 0 2px var(--color-focus);outline:none;z-index:1}._rootNote_xqb5h_1{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;max-width:var(--width-control-wide)}@media only screen and (max-width:680px){._rootNote_xqb5h_1{max-width:var(--width-control-narrow)}}._buttonGroup_xqb5h_15{margin:0 0 20px}._buttonGroup_xqb5h_15 li{display:inline-block}._buttonGroup_xqb5h_15 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_xqb5h_15 li:first-child button{border-radius:10px 0 0 10px;border-left:1px solid var(--color-border-light)}._buttonGroup_xqb5h_15 li:last-child button{border-right:1px solid var(--color-border-light);border-radius:0 10px 10px 0}._buttonGroup_xqb5h_15 button:focus-visible{box-shadow:0 0 0 2px var(--color-focus);outline:none;z-index:1}._search_a24qy_1{text-align:center;width:100%;max-width:var(--width-control-wide)}@media only screen and (max-width:680px){._search_a24qy_1{max-width:var(--width-control-narrow)}}._heading_a24qy_13{border-bottom:1px solid var(--color-border);margin-bottom:10px;padding-bottom:5px;font-weight:600;text-align:center;width:100%}._search_a24qy_1 input{border:1px solid var(--color-border-light);border-radius:5px;font-size:1.2rem;height:40px;padding:5px;margin:0;width:100%;box-sizing:border-box;background:var(--color-button-base);color:var(--color-text-secondary)}._search_a24qy_1 input:focus{outline:2px solid var(--color-focus)}