.note-groups.svelte-gknayu{row-gap:4px;display:grid;grid-template-rows:min-content 1fr;width:min-content;justify-items:center;height:100%}.selector-title.svelte-gknayu{font-family:var(--music-font);font-size:10px;line-height:1}.root-selector.svelte-gknayu{padding:8px;background-color:var(--bg-1);border:1px solid var(--border-3);border-radius:10px;display:grid;grid-auto-flow:row;align-content:space-between;height:100%}.active.svelte-gknayu{background-color:var(--bg-8);border:1px solid #aaa;color:#fff}.root-button.svelte-gknayu{height:24px;border-radius:6px;font-family:var(--music-font);font-size:12px}.button-box.svelte-gknayu{display:grid;grid-auto-flow:column}.single.svelte-gknayu{width:96px}.double.svelte-gknayu{width:48px}.left.svelte-gknayu{border-radius:6px 0 0 6px}.right.svelte-gknayu{border-radius:0 6px 6px 0}.container.svelte-1vp9cii{grid-column:1 / 4;height:min-content;width:100%;height:100%;display:grid;grid-template-rows:1fr;grid-template-columns:1fr;align-items:center;justify-items:center}@media screen and (orientation:landscape){.container.svelte-1vp9cii{margin:0}}.full.svelte-1vp9cii{grid-column:1 / 4}.center.svelte-1vp9cii{grid-column:2 / 3}.scroll.svelte-1vp9cii{padding:0 1rem}.grid.svelte-1vp9cii{padding:8px;display:grid;grid-template-rows:repeat(3,min-content);grid-template-columns:repeat(2,min-content);gap:8px;border:1px solid var(--border-4);border-radius:16px;background:var(--bg-4);box-shadow:var(--box-shadow-4)}@media screen and (orientation:portrait){.grid.svelte-1vp9cii{grid-template-rows:min-content;grid-template-columns:100%;border-radius:0;border-left:none;border-right:none;width:100vw}}.banner.svelte-1vp9cii{grid-row:1 / 2;grid-column:1 / 3;padding:12px;width:100%;height:min-content;justify-content:space-evenly;background:var(--bg-3);border:1px solid var(--border-4);border-radius:12px;box-shadow:var(--inset-box-shadow-4);display:grid;align-items:center;font-size:calc(8px + (16 - 8) * ((100vw - 300px) / (1600 - 300)))}@media screen and (orientation:portrait){.banner.svelte-1vp9cii{padding:16px 8px 8px}}.note-groups.svelte-1vp9cii{padding:8px;grid-row:2 / 3;grid-column:1 / 2;background:var(--bg-3);border:1px solid var(--border-4);border-radius:12px;box-shadow:var(--inset-box-shadow-4);overflow-y:scroll;height:400px}.keyboard.svelte-1vp9cii{width:100%;grid-row:3 / 4;grid-column:1 / 3}.play-button.svelte-1vp9cii{grid-row:1 / 2;grid-column:1 / 2;width:48px;height:48px;border-radius:48px;display:flex;align-items:center;justify-content:center;transition:all .1s ease-in-out;cursor:pointer}.play-button.svelte-1vp9cii{width:28px;height:28px;margin:0}.title.svelte-1vp9cii{justify-self:center;font-family:var(--subtitle-font);color:var(--text-color);line-height:1;font-size:calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)))}.switches.svelte-1vp9cii{display:grid;grid-auto-flow:row;justify-content:space-evenly;column-gap:16px;grid-auto-flow:column;align-items:center;font-family:var(--music-font)}@media screen and (orientation:portrait){.switches.svelte-1vp9cii{overflow-x:auto;justify-content:start;justify-items:start;border:1px solid var(--border-2);background-color:var(--bg-2);border-radius:12px;padding:8px;box-shadow:var(--inset-box-shadow-4)}}.switch.svelte-1vp9cii{display:grid;grid-auto-flow:row;justify-items:center;align-items:center;row-gap:4px;font-size:12px}.switch-title.svelte-1vp9cii{font-size:10px}.sequencer.svelte-1vp9cii{grid-row:2 / 3;grid-column:2 / 3;padding:6px;display:grid;grid-template-rows:min-content;grid-template-columns:min-content min-content;background:var(--sequencer-bg);border:1px solid var(--border-4);border-radius:12px;gap:4px}@media screen and (orientation:portrait){.sequencer.svelte-1vp9cii{overflow-x:auto;width:100%}}.mode-names.svelte-1vp9cii{grid-row:1 / 2;grid-column:1 / 2;display:grid;grid-template-rows:repeat(var(--rows),52px);grid-template-columns:min-content;grid-auto-flow:row;grid-gap:4px;white-space:nowrap;justify-content:start}@media screen and (orientation:portrait){.mode-names.svelte-1vp9cii{grid-template-rows:repeat(var(--rows),48px)}}.mode-name.svelte-1vp9cii{padding:0 16px 0 8px;width:100%;height:100%;display:grid;justify-content:start;align-items:center;background:var(--bg-3);font-family:var(--text-font);font-size:calc(10px + (14 - 10) * ((100vw - 300px) / (1600 - 300)));font-size:12px;z-index:2;grid-auto-flow:column;column-gap:8px;will-change:transform}@media screen and (orientation:portrait){.mode-name.svelte-1vp9cii{font-size:12px}}.mode-name-text.svelte-1vp9cii{display:grid;justify-content:start;grid-auto-flow:column;align-items:center;column-gap:4px;width:120px}.root-name-span.svelte-1vp9cii{width:28px;height:28px;background-color:var(--bg-2);border:1px solid var(--border-3);border-radius:8px;display:grid;place-content:center;grid-row:1 / 2;grid-column:1 / 2}.root-letter.svelte-1vp9cii{font-family:var(--music-font);font-weight:700;font-size:12px;line-height:1;margin-top:1px}.mode-name-span.svelte-1vp9cii{width:80px;margin-top:2px;grid-row:1 / 2;grid-column:2 / 3}.top-right.svelte-1vp9cii{border-radius:0 6px 0 0}.bottom-right.svelte-1vp9cii{border-radius:0 0 6px}.top-left.svelte-1vp9cii{border-radius:6px 0 0}.bottom-left.svelte-1vp9cii{border-radius:0 0 0 6px}.mode-blocks.svelte-1vp9cii{grid-row:1 / 2;grid-column:2 / 3;background:var(--sequencer-bg);display:grid;grid-template-rows:repeat(var(--rows),52px);grid-template-columns:repeat(var(--columns),52px);grid-gap:4px}@media screen and (orientation:portrait){.mode-blocks.svelte-1vp9cii{grid-template-rows:repeat(var(--rows),48px);grid-template-columns:repeat(var(--columns),48px)}}@media screen and (orientation:portrait){.fit.svelte-1vp9cii{width:calc(100vw - 2rem)}.scroll.svelte-1vp9cii{margin:0 1rem}}.empty.svelte-1vp9cii{width:100%;height:100%;background-color:var(--sequencer-empty);color:var(--text-color);line-height:1;z-index:0;display:grid;place-items:center;min-width:8px}.playing-border.svelte-1vp9cii{border:1px solid hsl(0,0%,100%)}.playing-background.svelte-1vp9cii{background-color:var(--play-button-fill-playing)}.lydian.svelte-1vp9cii{font-weight:700;background:#fd3;background:linear-gradient(0deg,#ca0,#ffe666);background-size:100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.major.svelte-1vp9cii{font-weight:700;background:#c60;background:linear-gradient(0deg,#c60,#ffbe33);background-size:100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.mixolydian.svelte-1vp9cii{font-weight:700;background:#ff4000;background:linear-gradient(0deg,hsla(15,100%,50%,1) 0%,hsla(15,100%,70%) 100%,1);background-size:100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.dorian.svelte-1vp9cii{font-weight:700;background:#0af;background:linear-gradient(0deg,#0af,#9df);background-size:100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.minor.svelte-1vp9cii{font-weight:700;background:#004d99;background:linear-gradient(0deg,#06c,#66b3ff);background-size:100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.phrygian.svelte-1vp9cii{font-weight:700;background:#002bff;background:linear-gradient(0deg,#35f,#9af);background-size:100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.locrian.svelte-1vp9cii{font-weight:700;background:#50f;background:linear-gradient(0deg,#73f,#b9f);background-size:100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}.cell.svelte-k20rkq{width:100%;height:100%;place-content:center;font-family:var(--music-font);background-color:#666;z-index:10;font-size:14px;color:#fff;line-height:1;z-index:3;background:hsla(var(--note-hue),var(--note-saturation),var(--note-lightness),var(--vel));border:none;box-shadow:inset 0 0 0 1px var(--note-inset);display:grid;grid-template-rows:1fr;grid-template-columns:1fr;align-items:center;justify-items:center;transition:background-color 3s ease,box-shadow 3s ease,color 3s ease,border-radius 3s ease;will-change:transform}.grey-1.svelte-k20rkq{background-color:#ccc;box-shadow:inset 0 0 0 1px #fff;font-size:14px;color:#000}.grey-2.svelte-k20rkq{background-color:#666;box-shadow:inset 0 0 0 1px #999;font-size:14px;color:#fff}.grey-3.svelte-k20rkq{background-color:#333;box-shadow:inset 0 0 0 1px #666;font-size:14px;color:#fff}.augmented.svelte-k20rkq{background-color:#806a00;box-shadow:inset 0 0 0 1px #ffd500}.perfect.svelte-k20rkq,.dom.svelte-k20rkq{background-color:maroon;box-shadow:inset 0 0 0 1px red}.major.svelte-k20rkq{background-color:#803500;box-shadow:inset 0 0 0 1px #f83}.minor.svelte-k20rkq{background-color:#009;box-shadow:inset 0 0 0 1px #33f}.half-diminished.svelte-k20rkq{background-color:#309;box-shadow:inset 0 0 0 1px #73f}.diminished.svelte-k20rkq{background-color:#4d004d;box-shadow:inset 0 0 0 1px #c0c}.top-right.svelte-k20rkq{border-radius:0 6px 0 0}.bottom-right.svelte-k20rkq{border-radius:0 0 6px}.start.svelte-k20rkq{justify-items:start}.center.svelte-k20rkq{justify-items:center}.end.svelte-k20rkq{justify-items:end}.note.svelte-k20rkq{grid-row:1/ 2;grid-column:1 / 2;display:grid;align-self:center;justify-self:center}.info.svelte-k20rkq{grid-row:2 / 3;grid-column:1 / 2;display:grid;grid-auto-flow:column;align-self:center;justify-self:center;margin-bottom:-2px;will-change:opacity;grid-template-rows:1fr;grid-template-columns:1fr}.info-text.svelte-k20rkq{grid-row:1 / 2;grid-column:1 / 2;z-index:1;align-self:center;justify-self:center;will-change:opacity}.chord.svelte-k20rkq{font-size:14px;font-family:serif}.info.svelte-k20rkq sup{font-size:9px;margin-top:-1px;margin-left:1px}.info.svelte-k20rkq .flat{font-size:10px;transform:translate(1.75px,2.25px)}.info.svelte-k20rkq .sharp{font-size:10px;transform:translate(1px,3px)}.stack.svelte-k20rkq{width:100%;grid-row:1 / 2;grid-column:1 / 2;align-self:center;justify-self:center;display:grid;grid-auto-flow:row;height:min-content;row-gap:3px}