.scale-diagram.svelte-177uzz0 svg{width:100%;height:auto;max-width:600px;margin:0 auto;display:block;-webkit-user-select:none;user-select:none}.scale-diagram.svelte-177uzz0 text{pointer-events:none}.scale-diagram.svelte-177uzz0 [data-scale]{transition:filter .2s,fill .2s}.scale-diagram.svelte-177uzz0 path[stroke="#000000"]{stroke:light-dark(var(--color-surface-950),var(--color-surface-50))}.piano-container.svelte-hg8qd0{display:block;width:100%;position:relative;max-width:100%}piano.svelte-hg8qd0{min-height:100px;display:block;margin:0 auto;position:relative;width:100%;pointer-events:auto;box-sizing:border-box}piano.loading.svelte-hg8qd0{opacity:.5;pointer-events:none}piano.svelte-hg8qd0 .black-keys:where(.svelte-hg8qd0){position:absolute;top:-10px;left:0;right:0;height:75px}piano.svelte-hg8qd0 .white-keys:where(.svelte-hg8qd0){position:relative;display:flex;flex-direction:row;height:100px}piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0){position:relative;flex:1 1 0;min-width:0;margin:0 1px;box-sizing:border-box;height:100%;border:1px inset rgb(156,156,156);border-radius:4px;background-color:light-dark(white,rgba(102,99,99,.43));pointer-events:auto}piano.svelte-hg8qd0 .white-key.playing:where(.svelte-hg8qd0):nth-child(7n+1),piano.svelte-hg8qd0 .white-key.playing:where(.svelte-hg8qd0):nth-child(7n+6){background-color:#efe341;box-shadow:1px 1px 15px 15px #efe34140;transform:translateY(2px)}piano.svelte-hg8qd0 .white-key.playing:where(.svelte-hg8qd0):nth-child(7n+2),piano.svelte-hg8qd0 .white-key.playing:where(.svelte-hg8qd0):nth-child(7n+4),piano.svelte-hg8qd0 .white-key.playing:where(.svelte-hg8qd0):nth-child(7n+7){background-color:#56b4e9;box-shadow:1px 1px 15px 15px #56b4e940;transform:translateY(2px)}piano.svelte-hg8qd0 .white-key.playing:where(.svelte-hg8qd0):nth-child(7n+3),piano.svelte-hg8qd0 .white-key.playing:where(.svelte-hg8qd0):nth-child(7n+5){background-color:#f0295d;box-shadow:1px 1px 15px 15px #f0295d40;transform:translateY(2px)}piano.svelte-hg8qd0 .white-key.sustained:where(.svelte-hg8qd0){background-color:#90544d}piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):hover:nth-child(7n+1),piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):hover:nth-child(7n+6){background-color:#f7f1a0}piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):hover:nth-child(7n+2),piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):hover:nth-child(7n+4),piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):hover:nth-child(7n+7){background-color:#aad9f4}piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):hover:nth-child(7n+3),piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):hover:nth-child(7n+5){background-color:#f794ab}piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):active:nth-child(7n+1),piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):active:nth-child(7n+6){background-color:#efe341;box-shadow:1px 1px 15px 15px #efe34140;transform:translateY(2px)}piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):active:nth-child(7n+2),piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):active:nth-child(7n+4),piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):active:nth-child(7n+7){background-color:#56b4e9;box-shadow:1px 1px 15px 15px #56b4e940;transform:translateY(2px)}piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):active:nth-child(7n+3),piano.svelte-hg8qd0 .white-key:where(.svelte-hg8qd0):active:nth-child(7n+5){background-color:#f0295d;box-shadow:1px 1px 15px 15px #f0295d40;transform:translateY(2px)}piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0){z-index:1;position:absolute;width:1.8%;height:100%;border:1px inset rgb(92,88,88);background:#141414;border-radius:3px;box-shadow:0 0 1px #00000078;pointer-events:auto}piano.svelte-hg8qd0 .black-key.playing:where(.svelte-hg8qd0):nth-child(5n+1),piano.svelte-hg8qd0 .black-key.playing:where(.svelte-hg8qd0):nth-child(5n+5){background-color:#f0295d;box-shadow:1px 1px 15px 15px #f0295d40;transform:translateY(2px)}piano.svelte-hg8qd0 .black-key.playing:where(.svelte-hg8qd0):nth-child(5n+2),piano.svelte-hg8qd0 .black-key.playing:where(.svelte-hg8qd0):nth-child(5n+3){background-color:#efe341;box-shadow:1px 1px 15px 15px #efe34140;transform:translateY(2px)}piano.svelte-hg8qd0 .black-key.playing:where(.svelte-hg8qd0):nth-child(5n+4){background-color:#56b4e9;box-shadow:1px 1px 15px 15px #56b4e940;transform:translateY(2px)}piano.svelte-hg8qd0 .black-key.sustained:where(.svelte-hg8qd0){background-color:#90544d}piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):hover:nth-child(5n+1),piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):hover:nth-child(5n+5){background-color:#78142f}piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):hover:nth-child(5n+2),piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):hover:nth-child(5n+3){background-color:#787121}piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):hover:nth-child(5n+4){background-color:#2b5a75}piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):active:nth-child(5n+1),piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):active:nth-child(5n+5){background-color:#f0295d;box-shadow:1px 1px 15px 15px #f0295d40;transform:translateY(2px)}piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):active:nth-child(5n+2),piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):active:nth-child(5n+3){background-color:#efe341;box-shadow:1px 1px 15px 15px #efe34140;transform:translateY(2px)}piano.svelte-hg8qd0 .black-key:where(.svelte-hg8qd0):active:nth-child(5n+4){background-color:#56b4e9;box-shadow:1px 1px 15px 15px #56b4e940;transform:translateY(2px)}.staff-notation.svelte-8cia7v svg{width:100%;max-width:100%;margin:0 auto;display:block}.staff-notation.svelte-8cia7v .abcjs-cursor-line{stroke:#f0295d;stroke-width:2;stroke-opacity:.8}