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