.key-picker[data-v-7b722a1d]{flex-direction:column;gap:12px;display:flex}.modes[data-v-7b722a1d],.tonics[data-v-7b722a1d]{flex-wrap:wrap;gap:6px;display:flex}.tonics[data-v-7b722a1d]{grid-template-columns:repeat(12,1fr);display:grid}@media (width<=767px){.tonics[data-v-7b722a1d]{grid-template-columns:repeat(6,1fr)}}.tonics .chip[data-v-7b722a1d]{padding-left:2px;padding-right:2px}.chip[data-v-7b722a1d]{color:#dbe6f1;cursor:pointer;background-color:#0000;border:1px solid #dbe6f129;border-radius:8px;padding:6px 12px;font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.3;transition:background-color .15s,color .15s}.chip[data-v-7b722a1d]:hover{background-color:#7db9de26}.chip.selected[data-v-7b722a1d]{color:#f7a433;background-color:#f7a4331f;border-color:#f7a433bf}.enharmonic[data-v-7b722a1d]{color:#93a8bf;margin:0;font-size:.9rem}.enharmonic .link[data-v-7b722a1d]{color:#7db9de;font:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-weight:600}.enharmonic .link[data-v-7b722a1d]:hover{text-decoration:underline}