@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/8d697b304b401681-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/ba015fad6dcf6784-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/569ce4b8f30dc480-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Geist Fallback;src:local("Arial");ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.00%;size-adjust:104.76%}.__className_5cfdac{font-family:Geist,Geist Fallback;font-style:normal}.__variable_5cfdac{--font-geist-sans:"Geist","Geist Fallback"}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/9610d9e46709d722-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/747892c23ea88013-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/93f479601ee12b01-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Geist Mono Fallback;src:local("Arial");ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.00%;size-adjust:134.59%}.__className_9a8899{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.__variable_9a8899{--font-geist-mono:"Geist Mono","Geist Mono Fallback"}:is(.key-base,.key-base path){cursor:pointer;border-width:1px;border-style:solid}:is(.key-base.disabled,.key-base.disabled path){cursor:not-allowed;pointer-events:none;opacity:1}.scale-boundary-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}.scale-boundary{stroke:rgb(60,60,60)}.scale-boundary.linear{stroke-width:2;vector-effect:non-scaling-stroke}.scale-boundary.circular{stroke-width:2}:root{--h2wratio:0.25;--white-keys-per-2-octaves:14;--white-key-width:calc(100% / var(--white-keys-per-2-octaves));--black-key-width:calc(var(--white-key-width) * 0.7);--keyboard-padding:5px}.keyboardlinear{position:relative;width:100%;max-width:var(--keyboardlinear-max-width);max-height:100%;aspect-ratio:calc(1 / var(--h2wratio));padding:var(--keyboard-padding);container-type:inline-size}.keyboardlinear,.piano-key{display:flex;box-sizing:border-box}.piano-key{font-weight:700;position:absolute;width:var(--white-key-width);height:100%;padding:0 5px;border:1px solid rgb(110,110,110);align-items:flex-end;justify-content:center;cursor:pointer;z-index:1}.piano-key.short{font-weight:400;align-items:center;width:var(--black-key-width);height:60%;justify-content:center;opacity:1;transform:translateX(-50%);z-index:2}@container (min-width: 300px){.piano-key{font-size:1rem}.piano-key.short{font-size:.7rem}}@container (min-width: 600px){.piano-key{font-size:2rem}.piano-key.short{font-size:1.4rem}}@container (min-width: 900px){.piano-key{font-size:3rem}.piano-key.short{font-size:2.1rem}}.keyboard-inner{position:relative;width:100%;height:100%}.svg-container{display:flex;width:100%;height:100%;aspect-ratio:1;padding:5px;grid-area:circular-keyboard;justify-self:center;align-self:center;justify-content:center;align-items:center;container-type:inline-size}.pie-slice-key{cursor:pointer}.pie-slice-key:hover path{opacity:.8}.pie-slice-key text{font-weight:700;text-anchor:middle;dominant-baseline:middle;pointer-events:none}@container (min-width: 200px){.pie-slice-key text{font-size:.625rem}}@container (min-width: 400px){.pie-slice-key text{font-size:.75rem}}@container (min-width: 600px){.pie-slice-key text{font-size:.875rem}}@container (min-width: 800px){.pie-slice-key text{font-size:1rem}}