.svelte-1vsv377:export{c-bg:#001727;c-base:#1f1f1f}.keyboard.svelte-1vsv377{--key-height: 150px;position:relative;width:100%;min-width:0;box-sizing:border-box;padding-top:var(--band);padding-bottom:var(--foot);user-select:none;-webkit-user-select:none;touch-action:manipulation}.keyboard__keys.svelte-1vsv377{position:relative;height:var(--key-height)}.keyboard__overlay.svelte-1vsv377{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.key.svelte-1vsv377{position:absolute;top:0;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:0 0 10px;color:#fffc;background:#ffffff1a;border:1px solid rgba(255,255,255,.1803921569);border-radius:0 0 6px 6px;cursor:pointer;transition:background .15s linear,color .15s linear}.key.svelte-1vsv377:disabled{cursor:default;opacity:.45}.key--marked.svelte-1vsv377:disabled{opacity:1}.key.svelte-1vsv377:active:not(:disabled){background:#ffffff38}.key.svelte-1vsv377:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:-4px}.key--black.svelte-1vsv377{z-index:1;height:60%;padding-bottom:6px;background:#02080d;border-color:#ffffff47;border-radius:0 0 4px 4px}.key--marked.svelte-1vsv377,.key--marked.svelte-1vsv377:active:not(:disabled){color:#061420;background:var(--key-color);border-color:transparent}.key__name.svelte-1vsv377{font-size:13px;font-weight:700;line-height:1;letter-spacing:.02em;font-family:din-2014,sans-serif}.key__solfege.svelte-1vsv377{font-size:10px;font-weight:400;line-height:1;letter-spacing:.02em;font-family:Noto Sans JP,sans-serif;opacity:.75}.key__tag.svelte-1vsv377{font-size:10px;font-weight:700;line-height:1;letter-spacing:.02em;font-family:Noto Sans JP,sans-serif;margin-bottom:4px;padding:3px 4px;color:var(--key-color);background:#061420e6;border-radius:3px;white-space:nowrap;text-align:center}.key__tag-line.svelte-1vsv377{display:block}.key__tag-line.svelte-1vsv377+.key__tag-line:where(.svelte-1vsv377){margin-top:3px}@media screen and (min-width:840px){.key.svelte-1vsv377:not(:disabled):not(.key--marked):hover{background:#ffffff29}.key--black.svelte-1vsv377:not(:disabled):not(.key--marked):hover{background:#13222e}}@media screen and (max-width:840px){.keyboard.svelte-1vsv377{--key-height: var(--key-height-sp, 124px)}.key.svelte-1vsv377{padding-bottom:8px}.key__name.svelte-1vsv377{font-size:11px;font-weight:700;line-height:1;letter-spacing:0em}.key--solfege-auto.svelte-1vsv377 .key__solfege:where(.svelte-1vsv377){display:none}}