@keyframes svelte-13h5q3k-settle-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.recorder.svelte-13h5q3k{--_bg: hsl(from var(--theme-base) h s l / 50%);--_color: var(--theme-subtext01);position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;border:var(--border-width) solid transparent;border-radius:var(--border-radius-small);background:var(--_bg);color:var(--_color);padding:0 .2rem;height:.8rem;font-size:.6rem;font-weight:100;font-family:var(--font-mono);line-height:1;cursor:pointer;width:fit-content;min-width:4rem;transition:border-color var(--motion-duration-base) ease,background-color var(--motion-duration-base) ease}.recorder.recording.svelte-13h5q3k{border-color:var(--theme-success);--_bg: hsl(from var(--theme-base) h s l / 70%)}.recorder.conflicting.svelte-13h5q3k{border-color:var(--theme-error);--_bg: hsl(from var(--theme-error) h s l / 15%)}.recorder.empty.svelte-13h5q3k{--_color: var(--theme-overlay02)}.recorder.svelte-13h5q3k:hover:not(.recording):not(:disabled){border-color:var(--theme-overlay01)}.recorder.svelte-13h5q3k .icon{--icon-stroke-color: var(--_color) !important;--icon-stroke-width: 1px}.timer-fill.svelte-13h5q3k{position:absolute;top:0;left:0;width:100%;height:100%;background-color:hsl(from var(--theme-success) h s l/20%);transform:scaleX(0);transform-origin:left;will-change:transform;pointer-events:none}.settling.svelte-13h5q3k .timer-fill:where(.svelte-13h5q3k){animation:svelte-13h5q3k-settle-fill var(--settle-duration) linear forwards}.content.svelte-13h5q3k{position:relative;display:inline-flex;flex-direction:row;align-items:center;gap:var(--gap-small);white-space:nowrap;z-index:1}.chord.svelte-13h5q3k{display:flex;flex-direction:row;align-items:center;gap:var(--gap-tiny)}.key.svelte-13h5q3k{display:flex;flex-direction:row;align-items:center}.ellipsis.svelte-13h5q3k{opacity:.5}.placeholder-text.svelte-13h5q3k{font-style:italic;opacity:.6}