svg.svelte-2r1kbk{fill:#000}rect.svelte-2r1kbk,text.svelte-2r1kbk{transition:fill .5s ease}text.svelte-2r1kbk{text-anchor:middle;font-size:10px;pointer-events:none;font-family:var(--music-font)}h2.svelte-18hx0qy{line-height:1;font-family:var(--text-font)}p.svelte-18hx0qy{line-height:1;font-size:16px;font-family:var(--text-font),sans-serif}.box.svelte-18hx0qy{height:80vh;place-self:center;display:grid;grid-template-rows:min-content 1fr min-content;grid-template-columns:1fr 1fr;grid-auto-flow:column}@media screen and (orientation:portrait){.box.svelte-18hx0qy{width:90vw;height:auto}}.circle.svelte-18hx0qy{grid-row:1 / 3;grid-column:1 / 2;width:calc(300px + (500 - 300) * ((100vw - 300px) / (1600 - 300)));height:auto;z-index:3}@media screen and (orientation:portrait){.circle.svelte-18hx0qy{width:90vw;height:auto}}.info-box.svelte-18hx0qy{grid-row:1 / 3;grid-column:2 / 3;display:grid;align-items:center;align-self:center;height:min-content;row-gap:1rem}.info.svelte-18hx0qy{width:100%;height:fit-content;display:grid;row-gap:.5rem}.accidentals-box.svelte-18hx0qy{font-family:var(--text-font),sans-serif;display:grid;row-gap:16px;height:fit-content;width:fit-content;padding-top:2rem}.accidentals.svelte-18hx0qy{display:grid;grid-auto-flow:column;width:fit-content;column-gap:8px}.note.svelte-18hx0qy{width:48px;height:48px;display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;column-gap:2px;border:1px solid var(--border-4);background-color:var(--bg-2);border-radius:8px;align-items:center;transition:all .5s ease}.highlighted.svelte-18hx0qy{background-color:#fff;border:1px solid white;color:#000}.letter.svelte-18hx0qy{display:grid;align-items:center;justify-items:end;font-family:var(--music-font);font-size:20px;line-height:1;margin-bottom:-4px}.symbol.svelte-18hx0qy{display:grid;align-items:center;font-family:var(--music-font);font-size:20px;line-height:1;margin-bottom:-4px}.flats-title.svelte-18hx0qy{justify-self:end}.overlay-box.svelte-18hx0qy{grid-row:2 / 3;grid-column:2 / 3;width:128px;height:auto}.keyboard.svelte-18hx0qy{grid-row:3 / 4;grid-column:1 / 3;width:100%;height:100%;display:grid;z-index:1}.scrim.svelte-18hx0qy{grid-row:3 / 4;grid-column:1 / 3;width:100%;height:100%;display:grid;z-index:2;background:linear-gradient(0deg,#0000,#121214);pointer-events:none}@media screen and (orientation:portrait){.info-box.svelte-18hx0qy,.keyboard.svelte-18hx0qy{display:none}}button.svelte-18hx0qy{width:64px;height:32px;border-radius:8px;grid-row:1/2;grid-column:1/2;z-index:5;justify-self:end;margin:16px 32px 16px 16px;font-family:var(--music-font)}