.key-picker[data-v-f30caebc]{display:flex;flex-direction:column;gap:12px}.modes[data-v-f30caebc],.tonics[data-v-f30caebc]{display:flex;flex-wrap:wrap;gap:6px}.tonics[data-v-f30caebc]{display:grid;grid-template-columns:repeat(12,1fr)}@media (max-width:767px){.tonics[data-v-f30caebc]{grid-template-columns:repeat(6,1fr)}}.tonics .chip[data-v-f30caebc]{padding-left:2px;padding-right:2px}.chip[data-v-f30caebc]{background-color:transparent;border:1px solid rgba(39,193,232,.45);border-radius:8px;color:#dbe6f1;cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.3;padding:6px 12px;transition:background-color .15s ease,color .15s ease}.chip[data-v-f30caebc]:hover{background-color:#27c1e826}.chip.selected[data-v-f30caebc]{background-color:#f7a433;border-color:#f7a433;color:#11243a}.enharmonic[data-v-f30caebc]{color:#93a8bf;font-size:.9rem;margin:0}.enharmonic .link[data-v-f30caebc]{background:none;border:none;color:#27c1e8;cursor:pointer;font:inherit;font-weight:600;padding:0}.enharmonic .link[data-v-f30caebc]:hover{text-decoration:underline}