.chromatic-diagram.svelte-1s6wzfl{--cell-size: 36px;--hole-size: 34px;--gap: 3px;--note-font-size: 1rem;--hole-font-size: 1.05rem;--active-bg: #2a7a5b;--active-color: #fff;--heard-bg: #ffa726;--heard-color: #fff;--slide-in-idle: #eef2f0;--idle-bg: #f5f6f5;--hole-bg: #3a3a3a;--hole-color: #fff;--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: 24px}.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%}.row-label.svelte-1s6wzfl{display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#8a9a90;height:var(--cell-size)}.row-label.slide-label.svelte-1s6wzfl{font-size:.55rem;color:#b0b8b4}.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-radius:3px;font-size:var(--note-font-size);font-weight:700;background:var(--idle-bg);color:#6b7b70;transition:background .1s ease,color .1s ease;overflow:hidden;min-width:0}.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:#9ba8a0}.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:999px;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)}