@font-face{font-display:swap;font-family:Poppins;font-style:normal;font-weight:400;src:url(/assets/poppins-v20-latin-400-7d93459d.woff2) format("woff2"),url(/assets/poppins-v20-latin-400-49f0742d.woff) format("woff")}:root{--font-main: "Poppins", Avenir, Helvetica, Arial, sans-serif;--cyan-050: #ecfeff;--cyan-100: #cffafe;--cyan-200: #a5f3fc;--cyan-300: #67e8f9;--cyan-400: #22d3ee;--cyan-500: #06b6d4;--cyan-600: #0891b2;--cyan-700: #0e7490;--cyan-800: #155e75;--cyan-900: #164e63;--white-rich: #fff;--white: #f3f3f5;--gray-050: #ededf0;--gray-100: #e1e1e6;--gray-150: #d2d2da;--gray-200: #c3c3ce;--gray-300: #a4a6b5;--gray-400: #86889d;--gray-500: #686a84;--gray-600: #585a70;--gray-650: #515266;--gray-700: #494a5c;--gray-750: #414253;--gray-800: #393a49;--gray-850: #31323f;--gray-900: #2a2a35;--gray-950: #22222b;--black: #15151a;--black-rich: #000}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,pre,blockquote,figure,hr{margin:0;padding:0}::selection{color:var(--white);background:var(--cyan-600)}a{color:var(--cyan-600);transition:color .32s,outline .32s;outline:1px dotted transparent}a:focus,a:hover{color:var(--emerald-500)}a:focus-visible{outline:1px dotted currentColor}input,textarea,select,button{color:inherit;font:inherit;letter-spacing:inherit}input,textarea,button{border:1px solid gray}button{border-radius:0;padding:.75em 1em;background-color:transparent}button *{pointer-events:none}embed,iframe,img,object,video{display:block;max-width:100%}table{table-layout:fixed;width:100%}body{font-family:var(--font-main);font-size:1rem;color:var(--gray-600);background-color:var(--gray-100);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;display:flex;justify-content:center}.app{display:flex;flex-direction:column;min-height:100vh}.key.svelte-okc3ub{--white-key-width:4rem;--black-key-width:calc(var(--white-key-width) / 8 * 5);--key-border-radius:.375rem;display:flex;justify-content:center;align-items:end;padding:1rem 0;border:none;border-radius:var(--key-border-radius);outline:.1875rem solid transparent;transform:translateZ(0);cursor:pointer}.key__letter.svelte-okc3ub{color:inherit;z-index:1}.key.svelte-okc3ub:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(100% 100% at 100% 0%,rgba(255,255,255,.75) 0%,rgba(0,0,0,0) 100%);border-radius:var(--key-border-radius);mix-blend-mode:overlay}.key.svelte-okc3ub:focus-visible{outline-color:var(--cyan-500)}.key--white.svelte-okc3ub{--box-shadow-height:1rem;--box-shadow-height--pressed:.25rem;width:var(--white-key-width);background:var(--gray-050);box-shadow:0 var(--box-shadow-height) 0 var(--gray-200),0 -.0625rem .25rem #2d23421f,0 calc(var(--box-shadow-height) + .125rem) .125rem #2d23421f,0 calc(var(--box-shadow-height) + .25rem) .25rem #2d23421f,0 calc(var(--box-shadow-height) + .5rem) .5rem #2d23421f,0 calc(var(--box-shadow-height) + 1rem) 1rem #2d23421f,0 calc(var(--box-shadow-height) + 2rem) 2rem #2d23421f;color:var(--gray-800);text-shadow:0 1px 1px rgba(45,35,66,.16)}.key--white.is-active.svelte-okc3ub{background:var(--cyan-100);box-shadow:0 var(--box-shadow-height--pressed) 0 var(--cyan-300),0 -.0625rem .25rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .0625rem) .0625rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .1875rem) .125rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .25rem) .25rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .375rem) .5rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .875rem) 1rem #2d23421f;transform:translate3d(0,calc(var(--box-shadow-height) - var(--box-shadow-height--pressed)),0)}.key--black.svelte-okc3ub{--box-shadow-height:.75rem;--box-shadow-height--pressed:.25rem;width:var(--black-key-width);height:60%;margin:-1.5rem calc((var(--black-key-width) / 2 + var(--keys-gap) / 2) * -1) 0;background:var(--gray-700);box-shadow:0 var(--box-shadow-height) 0 var(--gray-800),0 -.0625rem .25rem #2d23421f,0 calc(var(--box-shadow-height) + .125rem) .125rem #2d23421f,0 calc(var(--box-shadow-height) + .25rem) .25rem #2d23421f,0 calc(var(--box-shadow-height) + .5rem) .5rem #2d23421f,0 calc(var(--box-shadow-height) + 1rem) 1rem #2d23421f,0 calc(var(--box-shadow-height) + 2rem) 2rem #2d23421f;color:var(--gray-050);text-shadow:0 1px 1px rgba(45,35,66,.32);z-index:10}.key--black.is-active.svelte-okc3ub{background-color:var(--cyan-700);box-shadow:0 var(--box-shadow-height--pressed) 0 var(--cyan-800),0 -.0625rem .25rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .0625rem) .0625rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .1875rem) .125rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .25rem) .25rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .375rem) .5rem #2d23421f,0 calc(var(--box-shadow-height--pressed) + .875rem) 1rem #2d23421f;transform:translate3d(0,calc(var(--box-shadow-height) - var(--box-shadow-height--pressed)),0)}.keys.svelte-ooz853{--keys-gap:.5rem;display:flex;gap:var(--keys-gap);height:14rem}@media (min-height: 27.5em){.keys.svelte-ooz853{height:16rem}}@media (min-height: 32.5em){.keys.svelte-ooz853{height:18rem}}@media (min-height: 43.75em){.keys.svelte-ooz853{height:20rem}}.container.svelte-cnl0xx.svelte-cnl0xx{max-width:54rem;margin:0 auto;padding:1rem;position:relative}.app-main.svelte-cnl0xx.svelte-cnl0xx{margin-top:12vh}.orientation-message.svelte-cnl0xx.svelte-cnl0xx{display:none;gap:.5rem;justify-content:center;align-items:center;margin-bottom:3rem}.orientation-message__icon.svelte-cnl0xx.svelte-cnl0xx{width:auto;height:1rem}.app-footer.svelte-cnl0xx.svelte-cnl0xx{font-size:.875rem;text-align:center;margin-top:auto}.app-footer.svelte-cnl0xx .container.svelte-cnl0xx{display:flex;justify-content:center;padding:1rem 0}.app-footer.svelte-cnl0xx a.svelte-cnl0xx{color:var(--gray-400);text-decoration:none;transition:color .24s}.app-footer.svelte-cnl0xx a.svelte-cnl0xx:focus,.app-footer.svelte-cnl0xx a.svelte-cnl0xx:hover{color:var(--gray-600)}.app-footer.svelte-cnl0xx img.svelte-cnl0xx{height:1.25rem;width:auto;vertical-align:middle;margin:0 .25rem;display:inline-block}@media (max-width: 33em) and (orientation: portrait){.orientation-message.svelte-cnl0xx.svelte-cnl0xx{display:flex}}@media (min-height: 27.5em){.app-main.svelte-cnl0xx.svelte-cnl0xx{margin-top:16vh}}@media (min-height: 32.5em){.app-main.svelte-cnl0xx.svelte-cnl0xx{margin-top:18vh}}@media (min-height: 43.75em){.app-main.svelte-cnl0xx.svelte-cnl0xx{margin-top:24vh}}