:root{--center-size: 100px;--orbit-size: 64px;--orbit-radius: 86px}.circle-container.svelte-1sbme36{position:relative;width:calc(var(--orbit-radius) * 2 + var(--orbit-size));height:calc(var(--orbit-radius) * 2 + var(--orbit-size));margin:0 auto}.center-circle.svelte-1sbme36{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--center-size);height:var(--center-size);border-radius:50%;background:linear-gradient(135deg,oklch(var(--p) / .3),oklch(var(--p) / .15));border:3px solid oklch(var(--p));display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;box-shadow:0 4px 20px oklch(var(--p) / .3)}.root-note.svelte-1sbme36{font-size:1.5rem;font-weight:800;line-height:1;color:oklch(var(--p))}.scale-name.svelte-1sbme36{font-size:.6rem;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}.orbit-circle.svelte-1sbme36{position:absolute;width:var(--orbit-size);height:var(--orbit-size);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;transition:all .2s ease;left:calc(50% + var(--orbit-radius) * cos(var(--angle)) - var(--orbit-size) / 2);top:calc(50% + var(--orbit-radius) * sin(var(--angle)) - var(--orbit-size) / 2)}.orbit-circle.svelte-1sbme36:hover{left:calc(50% + calc(var(--orbit-radius) + 4px) * cos(var(--angle)) - var(--orbit-size) / 2);top:calc(50% + calc(var(--orbit-radius) + 4px) * sin(var(--angle)) - var(--orbit-size) / 2);box-shadow:0 4px 12px #0000004d}.orbit-circle.expanded.svelte-1sbme36{border-color:oklch(var(--bc));box-shadow:0 0 0 3px oklch(var(--p) / .5)}.orbit-circle.playing.svelte-1sbme36{animation:svelte-1sbme36-chord-pulse .4s ease-out}@keyframes svelte-1sbme36-chord-pulse{0%{transform:scale(1);box-shadow:0 0 oklch(var(--p) / .7)}50%{transform:scale(1.15);box-shadow:0 0 20px 10px oklch(var(--p) / .3)}to{transform:scale(1);box-shadow:0 0 oklch(var(--p) / 0)}}.orbit-circle.major.svelte-1sbme36{background:linear-gradient(135deg,oklch(var(--su) / .9),oklch(var(--su) / .7));border-color:oklch(var(--su))}.orbit-circle.minor.svelte-1sbme36{background:linear-gradient(135deg,oklch(var(--in) / .9),oklch(var(--in) / .7));border-color:oklch(var(--in))}.orbit-circle.diminished.svelte-1sbme36{background:linear-gradient(135deg,oklch(var(--wa) / .9),oklch(var(--wa) / .7));border-color:oklch(var(--wa))}.orbit-circle.augmented.svelte-1sbme36{background:linear-gradient(135deg,oklch(var(--s) / .9),oklch(var(--s) / .7));border-color:oklch(var(--s))}.orbit-circle.svelte-1sbme36 .chord-name:where(.svelte-1sbme36){font-size:.85rem;font-weight:700;line-height:1;color:oklch(var(--b1));text-shadow:0 1px 2px rgba(0,0,0,.2)}.orbit-circle.svelte-1sbme36 .numeral:where(.svelte-1sbme36){font-size:.6rem;font-weight:600;opacity:.9;color:oklch(var(--b1));text-shadow:0 1px 2px rgba(0,0,0,.2)}.orbit-circle.svelte-1sbme36 .chord-notes-inner:where(.svelte-1sbme36){display:flex;flex-direction:column;align-items:center;gap:.125rem}.orbit-circle.svelte-1sbme36 .chord-notes-inner:where(.svelte-1sbme36) span:where(.svelte-1sbme36){font-size:.7rem;font-weight:600;color:oklch(var(--b1));text-shadow:0 1px 2px rgba(0,0,0,.2);line-height:1.1}@media(min-width:480px){:root{--center-size: 120px;--orbit-size: 76px;--orbit-radius: 102px}.root-note.svelte-1sbme36{font-size:1.75rem}.scale-name.svelte-1sbme36{font-size:.7rem}.orbit-circle.svelte-1sbme36 .chord-name:where(.svelte-1sbme36){font-size:1rem}.orbit-circle.svelte-1sbme36 .numeral:where(.svelte-1sbme36){font-size:.7rem}.orbit-circle.svelte-1sbme36 .chord-notes-inner:where(.svelte-1sbme36) span:where(.svelte-1sbme36){font-size:.8rem}}@media(min-width:640px){:root{--center-size: 140px;--orbit-size: 88px;--orbit-radius: 118px}.root-note.svelte-1sbme36{font-size:2rem}.scale-name.svelte-1sbme36{font-size:.75rem}.orbit-circle.svelte-1sbme36 .chord-name:where(.svelte-1sbme36){font-size:1.15rem}.orbit-circle.svelte-1sbme36 .numeral:where(.svelte-1sbme36){font-size:.8rem}.orbit-circle.svelte-1sbme36 .chord-notes-inner:where(.svelte-1sbme36) span:where(.svelte-1sbme36){font-size:.85rem}}@media(min-width:768px){:root{--center-size: 160px;--orbit-size: 100px;--orbit-radius: 134px}.root-note.svelte-1sbme36{font-size:2.25rem}.orbit-circle.svelte-1sbme36 .chord-name:where(.svelte-1sbme36){font-size:1.25rem}.orbit-circle.svelte-1sbme36 .numeral:where(.svelte-1sbme36){font-size:.85rem}.orbit-circle.svelte-1sbme36 .chord-notes-inner:where(.svelte-1sbme36) span:where(.svelte-1sbme36){font-size:.95rem}}