.piano-container.svelte-1wpzza9{display:flex;justify-content:center;margin-top:2rem;padding:0 1rem}.piano.svelte-1wpzza9{position:relative;--key-width: 3.5rem;--black-key-width: 2.2rem;--body-padding: 1.5rem;width:calc(14 * var(--key-width) + (2 * var(--body-padding)));height:13rem;background:var(--bg-3);border:1px solid var(--txt-3);padding:var(--body-padding);display:flex;flex-direction:column;touch-action:manipulation}.white-keys.svelte-1wpzza9{display:flex;gap:0;height:100%;position:relative;z-index:1;width:calc(14 * var(--key-width))}.black-keys.svelte-1wpzza9{position:absolute;top:var(--body-padding);left:var(--body-padding);width:calc(14 * var(--key-width));height:7rem}.key.svelte-1wpzza9{border:1px solid var(--txt-3);cursor:pointer;font-family:Space Mono,monospace;font-size:.75rem;font-weight:400;transition:all .1s ease;user-select:none;-webkit-user-select:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;touch-action:manipulation;box-sizing:border-box}.white-key.svelte-1wpzza9{flex:1;background:var(--bg-2);color:var(--txt-2);border-right:none}.white-key.svelte-1wpzza9:last-child{border-right:1px solid var(--txt-3)}.white-key.svelte-1wpzza9:hover{background:var(--bg-3);color:var(--txt)}.white-key.active.svelte-1wpzza9{background:var(--key-color);color:var(--bg);border-color:var(--key-color)}.black-key.svelte-1wpzza9{position:absolute;width:var(--black-key-width);height:100%;background:var(--bg);color:var(--txt-2);border:1px solid var(--txt-3);z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.4rem}.black-key.svelte-1wpzza9:hover{background:var(--bg-2);color:var(--txt)}.black-key.active.svelte-1wpzza9{background:var(--key-color);color:var(--bg);border-color:var(--key-color)}.key.svelte-1wpzza9 span:where(.svelte-1wpzza9){font-size:.65rem;opacity:.7}.black-key.svelte-1wpzza9 span:where(.svelte-1wpzza9){opacity:.8}@media(max-width:768px){.piano.svelte-1wpzza9{--key-width: 2.5rem;--body-padding: 1rem;height:10rem}.key.svelte-1wpzza9{font-size:.65rem;padding-bottom:.3rem}.black-key.svelte-1wpzza9{padding-bottom:.3rem}}@media(max-width:480px){.piano.svelte-1wpzza9{--key-width: 2rem;--black-key-width: 1.6rem;height:8rem;--body-padding: .75rem}.key.svelte-1wpzza9{font-size:.55rem;padding-bottom:.2rem}.black-key.svelte-1wpzza9{padding-bottom:.2rem}.key.svelte-1wpzza9 span:where(.svelte-1wpzza9){font-size:.55rem}}