.key-natural.svelte-14eim5l{background:linear-gradient(180deg, var(--ctp-surface1) 0%, var(--ctp-surface0) 100%);box-shadow:inset 0 1px 1px color-mix(in srgb, var(--ctp-text) 8%, transparent);border-right:1px solid color-mix(in srgb, var(--ctp-crust) 45%, var(--ctp-surface0));border-bottom:1px solid color-mix(in srgb, var(--ctp-crust) 35%, var(--ctp-surface0));color:var(--ctp-overlay1);transition:box-shadow 50ms,border-color 50ms,color 50ms}.key-natural.active.svelte-14eim5l{border-bottom:2px solid var(--ctp-mauve);box-shadow:inset 0 1px 1px color-mix(in srgb, var(--ctp-text) 10%, transparent), inset 0 -15px 25px color-mix(in srgb, var(--ctp-mauve) 25%, transparent);color:var(--ctp-text)}.key-accidental.svelte-14eim5l{background:linear-gradient(180deg, color-mix(in srgb, var(--ctp-key-black) 92%, var(--ctp-surface0) 8%) 0%, var(--ctp-key-black) 100%);box-shadow:inset 0 1px 1px color-mix(in srgb, var(--ctp-text) 6%, transparent), 0 6px 14px color-mix(in srgb, var(--ctp-crust) 90%, transparent);border:1px solid color-mix(in srgb, var(--ctp-crust) 85%, var(--ctp-key-black));color:var(--ctp-key-black-text);z-index:10}.key-accidental.active.svelte-14eim5l{border-bottom:2px solid var(--ctp-mauve);box-shadow:inset 0 1px 1px color-mix(in srgb, var(--ctp-text) 8%, transparent), inset 0 -15px 25px color-mix(in srgb, var(--ctp-mauve) 18%, transparent), 0 6px 14px color-mix(in srgb, var(--ctp-crust) 90%, transparent);color:var(--ctp-text)}