.key-group.svelte-lmigcl{flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;margin-bottom:1.5rem;display:flex}.key-btn.svelte-lmigcl{appearance:none;border:1px solid var(--color-border-subtle);width:3rem;height:3rem;color:var(--color-text-primary);background:#ffffff0a;border-radius:10px;flex-shrink:0;margin:0;font-size:1rem;font-weight:700;transition:all .2s}.key-btn.sharp.svelte-lmigcl{width:2.4rem;height:2.4rem;color:var(--color-text-secondary);align-self:center;font-size:.8rem}.key-btn.svelte-lmigcl:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent);color:var(--color-text-primary);transform:translateY(-2px)}.key-btn.pressed.svelte-lmigcl{background:color-mix(in srgb, var(--color-accent) 20%, transparent);border-color:color-mix(in srgb, var(--color-accent) 50%, transparent);color:var(--color-accent-secondary);box-shadow:0 0 10px color-mix(in srgb, var(--color-accent) 20%, transparent)}.key-btn.pressed.svelte-lmigcl:hover{background:color-mix(in srgb, var(--color-accent) 30%, transparent)}@media (width<=500px){.key-btn.svelte-lmigcl{width:2.6rem;height:2.6rem;font-size:.9rem}.key-btn.sharp.svelte-lmigcl{width:2.1rem;height:2.1rem;font-size:.7rem}}.mode-group.svelte-1pvbgsd{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.mode-btn.svelte-1pvbgsd{appearance:none;border:1px solid var(--color-border-subtle);width:fit-content;height:fit-content;color:var(--color-text-secondary);background:#ffffff0a;border-radius:9999px;flex-shrink:0;margin:0;padding:.6rem 1.1rem;font-size:.85rem;font-weight:700;transition:all .2s}.mode-btn.svelte-1pvbgsd:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent);color:var(--color-text-primary);transform:translateY(-2px)}.mode-btn.pressed.svelte-1pvbgsd{background:color-mix(in srgb, var(--color-accent) 20%, transparent);border-color:color-mix(in srgb, var(--color-accent) 50%, transparent);color:var(--color-accent-secondary);box-shadow:0 0 10px color-mix(in srgb, var(--color-accent) 20%, transparent)}.mode-btn.pressed.svelte-1pvbgsd:hover{background:color-mix(in srgb, var(--color-accent) 30%, transparent)}@media (width<=500px){.mode-btn.svelte-1pvbgsd{padding:.5rem .85rem;font-size:.78rem}}.scale-table-wrapper.svelte-1wny355{justify-content:center;margin-top:1.5rem;display:flex;overflow-x:auto}.scale-table.svelte-1wny355{border-collapse:separate;border-spacing:.35rem}.interval-cell.svelte-1wny355,.note-cell.svelte-1wny355{text-align:center;border:1px solid var(--color-border-subtle);background:#ffffff0a;border-radius:8px;min-width:2.4rem;padding:.4rem .5rem}.interval-cell.svelte-1wny355{color:var(--color-text-secondary);font-size:.75rem;font-weight:600}.note-cell.svelte-1wny355{color:var(--color-accent-secondary);font-size:.95rem;font-weight:700}.form-grid.svelte-19i4qfe{grid-template-columns:max-content max-content;justify-content:center;align-items:center;gap:1.25rem 2rem;margin:0 auto;display:grid}.control-label.svelte-19i4qfe{text-align:right;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:0;font-size:.85rem;font-weight:600}.control-wrapper.svelte-19i4qfe{justify-content:flex-start;align-items:center;display:flex}.switch.svelte-19i4qfe{width:3rem;height:1.6rem;display:inline-block;position:relative}.switch.svelte-19i4qfe input:where(.svelte-19i4qfe){z-index:1;opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.slider.svelte-19i4qfe{cursor:pointer;background-color:var(--color-surface-overlay);border:1px solid var(--color-border-subtle);border-radius:34px;transition:all .3s;position:absolute;inset:0}.slider.svelte-19i4qfe:before{content:"";background-color:#fff;border-radius:50%;width:1.2rem;height:1.2rem;transition:all .3s;position:absolute;bottom:.13rem;left:.18rem;box-shadow:0 2px 4px #0000004d}.switch.svelte-19i4qfe input:where(.svelte-19i4qfe):checked+.slider:where(.svelte-19i4qfe){background-color:var(--color-accent);box-shadow:0 0 8px color-mix(in srgb, var(--color-accent) 50%, transparent)}.switch.svelte-19i4qfe input:where(.svelte-19i4qfe):checked+.slider:where(.svelte-19i4qfe):before{transform:translate(1.4rem)}@media (width<=500px){.form-grid.svelte-19i4qfe{grid-template-columns:1fr;justify-items:start}.control-label.svelte-19i4qfe{text-align:left}}
