.chromatic-diagram.svelte-1s6wzfl{--cell-size: 36px;--hole-size: 34px;--gap: 3px;--note-font-size: 1rem;--hole-font-size: 1.05rem;--active-bg: var(--color-pitch-good);--active-color: var(--color-text-on-accent);--heard-bg: var(--color-pitch-warning);--heard-color: var(--color-text-on-warning);--slide-in-idle: var(--color-bg-muted);--idle-bg: var(--color-bg-surface-subtle);--hole-bg: var(--color-text-primary);--hole-color: var(--color-text-on-accent);--label-w: 26px;font-family:var(--font-mono, "JetBrains Mono", monospace);width:100%;overflow-x:auto}.chromatic-diagram.compact.svelte-1s6wzfl{--cell-size: 30px;--hole-size: 30px;--gap: 3px;--note-font-size: .88rem;--hole-font-size: 1rem;--label-w: 0px}.grid-wrapper.svelte-1s6wzfl{display:grid;grid-template-columns:var(--label-w) 1fr;gap:var(--gap) 0;align-items:stretch;width:max-content;min-width:100%}.chromatic-diagram.compact.svelte-1s6wzfl .grid-wrapper:where(.svelte-1s6wzfl){grid-template-columns:1fr}.chromatic-diagram.compact.svelte-1s6wzfl .row-label:where(.svelte-1s6wzfl){display:none}.row-label.svelte-1s6wzfl{display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--color-text-muted);height:var(--cell-size)}.row-label.slide-label.svelte-1s6wzfl{font-size:.55rem;color:color-mix(in srgb,var(--color-text-muted) 58%,transparent)}.row-label.hole-row-label.svelte-1s6wzfl{height:var(--hole-size)}.note-row.svelte-1s6wzfl{display:grid;grid-template-columns:repeat(var(--hole-count),var(--cell-size));justify-content:center;gap:var(--gap);height:var(--cell-size)}.note-row.hole-numbers.svelte-1s6wzfl{grid-template-columns:repeat(var(--hole-count),var(--cell-size));height:var(--hole-size)}.cell.svelte-1s6wzfl{display:flex;align-items:center;justify-content:center;position:relative;width:var(--cell-size);height:var(--cell-size);box-sizing:border-box;padding:0;border:0;border-radius:0;font:inherit;font-size:var(--note-font-size);font-weight:700;background:var(--idle-bg);color:var(--color-text-muted);transition:background .1s ease,color .1s ease,transform .06s ease;overflow:hidden;min-width:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}button.cell.svelte-1s6wzfl:disabled{cursor:default}button.cell.svelte-1s6wzfl:not(:disabled):active{transform:scale(.94)}button.cell.svelte-1s6wzfl:focus-visible{outline:2px solid var(--color-pitch-good);outline-offset:-2px}.note-token.svelte-1s6wzfl{display:inline-flex;align-items:flex-start;justify-content:center;line-height:1;min-width:0}.note-pitch.svelte-1s6wzfl{line-height:1}.note-octave.svelte-1s6wzfl{font-size:.5em;font-weight:800;line-height:1;margin-left:1px;transform:translateY(-.38em)}.cell.slide-in.svelte-1s6wzfl{background:var(--slide-in-idle);color:color-mix(in srgb,var(--color-text-muted) 72%,transparent)}.cell.active.svelte-1s6wzfl{background:var(--active-bg);color:var(--active-color)}.cell.heard.svelte-1s6wzfl{background:var(--heard-bg);color:var(--heard-color)}.hole-label.svelte-1s6wzfl{width:var(--hole-size);height:var(--hole-size);justify-self:center;align-self:center;border-radius:0;background:var(--hole-bg);color:var(--hole-color);font-weight:800;font-size:var(--hole-font-size)}.compact.svelte-1s6wzfl .note-octave:where(.svelte-1s6wzfl){font-size:.52em;transform:translateY(-.34em)}@media(max-width:640px){.chromatic-diagram.compact.svelte-1s6wzfl{--cell-size: 22px;--hole-size: 22px;--gap: 2px;--note-font-size: .72rem;--hole-font-size: .78rem;--label-w: 18px}}