.piano-container.svelte-1569eu9 {
    height: 100%;
    display: flex;
    justify-content: center
}

.piano.svelte-1569eu9 {
    display: flex
}

.white.svelte-1569eu9 {
    --width: var(--white-key-width);
    background-color: #fff;
    color: #333
}

.black.svelte-1569eu9 {
    --width: calc(var(--white-key-width) / 1.67);
    color: #ccc;
    background-color: #1a1a1a;
    margin-left: calc(var(--width) / -2);
    margin-right: calc(var(--width) / -2);
    z-index: 2
}

.key.svelte-1569eu9 {
    border: 1px solid #222;
    height: calc(var(--width) * 6);
    width: var(--width);
    border-radius: 0 0 4px 4px;
    --shadow-height: calc(var(--width) / 14);
    box-shadow: 0 var(--shadow-height) 1px #20202033;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: calc(var(--width) / 8);
    font-size: calc(var(--width) / 1.5)
}

.black.svelte-1569eu9:hover {
    background-color: #333
}

.white.svelte-1569eu9:hover {
    background-color: #e6e6e6
}

.pressed.svelte-1569eu9 {
    background-color: hsl(var(--color-hue), 60%, 50%) !important;
    border: hsl(var(--color-hue), 60%, 40%) solid 2px !important;
    transform: translateY(var(--shadow-height));
    box-shadow: 0 0 1px #20202033
}

div.svelte-1owab3p>div.svelte-1owab3p {
    margin-top: .2rem
}

span.svelte-1owab3p.svelte-1owab3p {
    margin-right: .3rem
}

.option-list.svelte-1ue5508>div.svelte-1ue5508 {
    padding-bottom: .2rem;
    display: flex
}

.option-list.svelte-1ue5508 span.svelte-1ue5508 {
    width: 7rem
}

.option-list.svelte-1ue5508.svelte-1ue5508 {
    margin-right: 2rem
}

.error.svelte-ye3hvw {
    color: #fe3c3c
}

.icon.svelte-ye3hvw {
    display: inline-block;
    background-color: hsl(var(--color-hue), 60%, 50%);
    border: hsl(var(--color-hue), 60%, 40%) solid 2px;
    width: 1rem;
    height: 1rem;
    margin-bottom: -5px
}

.control-panel.svelte-b9289n {
    background-color: #000;
    color: #fff;
    padding: .5rem
}

.row.svelte-b9289n {
    margin-bottom: 1rem;
    display: flex
}

*,
*:before,
*:after {
    box-sizing: border-box
}

body,
html {
    height: 100%
}

body {
    touch-action: none;
    background-color: #98babf;
    margin: 0;
    overscroll-behavior: none;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif
}

main {
    height: 100%;
    display: flex;
    flex-flow: column
}

p {
    margin-bottom: .6rem;
    margin-top: 0
}

input {
    margin-right: .4em;
    -webkit-user-select: none;
    user-select: none
}

input[type=number] {
    width: 3rem
}

input[type=range] {
    width: 12rem;
    vertical-align: middle
}

img {
    margin-left: .2rem;
    width: 1rem
}

span {
    margin-bottom: auto;
    margin-top: auto
}