#keyboard[data-v-f0a3ebe3]{height:100%;width:40%;display:flex;justify-content:center;padding:0;position:relative;border:1px solid var(--keyboard-border);border-radius:1rem;background-color:var(--keyboard);box-shadow:0 0 50px var(--black-50) inset,0 1px var(--keyboard-shadow) inset,0 5px 15px var(--black-50)}.white[data-v-f0a3ebe3],.black[data-v-f0a3ebe3]{position:relative;float:left;display:flex;justify-content:center;align-items:flex-end;padding:.5rem 0;user-select:none;cursor:pointer;top:20%}#keyboard li[data-v-f0a3ebe3]:first-child{border-radius:5px 0 5px 5px}#keyboard li[data-v-f0a3ebe3]:last-child{border-radius:0 5px 5px}.white[data-v-f0a3ebe3]{height:70%;width:8%;z-index:1;border-left:1px solid hsl(0,0%,73%);border-bottom:1px solid hsl(0,0%,73%);border-radius:0 0 5px 5px;box-shadow:-1px 0 0 var(--white-80) inset,0 0 5px #ccc inset,0 0 3px var(--black-20);background:linear-gradient(to bottom,hsl(0,0%,93%) 0%,white 100%);color:var(--black-30)}.black[data-v-f0a3ebe3]{height:45%;width:5%;margin:0 0 0 -2.5%;z-index:2;border:1px solid black;border-radius:0 0 3px 3px;box-shadow:-1px -1px 2px var(--white-20) inset,0 -5px 2px 3px var(--black-60) inset,0 2px 4px var(--black-50);background:linear-gradient(45deg,hsl(0,0%,13%) 0%,hsl(0,0%,33%) 100%);color:var(--white-50)}.white.pressed[data-v-f0a3ebe3]{border-top:1px solid hsl(0,0%,47%);border-left:1px solid hsl(0,0%,60%);border-bottom:1px solid hsl(0,0%,60%);box-shadow:2px 0 3px var(--black-10) inset,-5px 5px 20px var(--black-20) inset,0 0 3px var(--black-20);background:linear-gradient(to bottom,white 0%,hsl(0,0%,91%) 100%);outline:none}.black.pressed[data-v-f0a3ebe3]{box-shadow:-1px -1px 2px var(--white-20) inset,0 -2px 2px 3px var(--black-60) inset,0 1px 2px var(--black-50);background:linear-gradient(to right,hsl(0,0%,40%) 0%,hsl(0,0%,28%) 100%);outline:none}.offset[data-v-f0a3ebe3]{margin:0 0 0 -2.5%}.container[data-v-7cf89d43]{cursor:pointer;display:flex;align-items:center}.label[data-v-7cf89d43]{margin-left:12px;color:#1a202c}.input[data-v-7cf89d43]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.switch[data-v-7cf89d43]{--switch-container-width: 50px;--switch-size: calc(var(--switch-container-width) / 2);min-width:50px;display:flex;align-items:center;position:relative;height:var(--switch-size);flex-basis:var(--switch-container-width);border-radius:var(--switch-size);background-color:#e2e8f0;transition:background-color .25s ease-in-out}.switch[data-v-7cf89d43]:before{content:"";position:absolute;left:1px;height:calc(var(--switch-size) - 4px);width:calc(var(--switch-size) - 4px);border-radius:9999px;background-color:#fff;transition:transform .375s ease-in-out}.input:checked+.switch[data-v-7cf89d43]{background-color:var(--keyboard)}.input:checked+.switch[data-v-7cf89d43]:before{border-color:var(--keyboard);transform:translate(calc(var(--switch-container-width) - var(--switch-size)))}.controls{display:flex;height:20vh;justify-content:space-around;margin-bottom:5vh;margin-top:2.5vh}.minipiano{display:flex;justify-content:flex-start}.pad{min-height:70vh;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}@media (min-width: 750px){.pad-key{padding:12px}}@media (max-width: 750px){.pad-key{padding:5px}}.pad-key{height:30%;width:30%}.pad-key>button{height:100%;width:100%}.pad-button{cursor:pointer;touch-action:manipulation;border-right:2px solid hsl(0,0%,73%);border-bottom:2px solid hsl(0,0%,73%);border-radius:10px;box-shadow:0 3px 1px -2px #0000000f,0 2px 2px #00000024,0 1px 5px #0000001f}.pad-button-0{background:radial-gradient(ellipse,hsl(360,80%,50%) 0%,hsl(360,20%,70%) 140%)}.pad-button-0:hover,.pad-button-0:active{background:radial-gradient(ellipse,hsl(360,100%,50%) 0%,hsl(360,30%,70%) 90%)}.pad-button-1{background:radial-gradient(ellipse,hsl(320,80%,50%) 0%,hsl(315,20%,70%) 140%)}.pad-button-1:hover,.pad-button-1:active{background:radial-gradient(ellipse,hsl(320,100%,50%) 0%,hsl(320,30%,70%) 90%)}.pad-button-2{background:radial-gradient(ellipse,hsl(280,80%,50%) 0%,hsl(280,20%,70%) 140%)}.pad-button-2:hover,.pad-button-2:active{background:radial-gradient(ellipse,hsl(280,100%,50%) 0%,hsl(280,30%,70%) 90%)}.pad-button-3{background:radial-gradient(ellipse,hsl(240,80%,50%) 0%,hsl(240,20%,70%) 140%)}.pad-button-3:hover,.pad-button-3:active{background:radial-gradient(ellipse,hsl(240,100%,50%) 0%,hsl(240,30%,70%) 90%)}.pad-button-4{background:radial-gradient(ellipse,hsl(200,80%,50%) 0%,hsl(200,20%,70%) 140%)}.pad-button-4:hover,.pad-button-4:active{background:radial-gradient(ellipse,hsl(200,100%,50%) 0%,hsl(200,30%,70%) 90%)}.pad-button-5{background:radial-gradient(ellipse,hsl(170,80%,50%) 0%,hsl(170,20%,70%) 140%)}.pad-button-5:hover,.pad-button-5:active{background:radial-gradient(ellipse,hsl(170,100%,50%) 0%,hsl(170,30%,70%) 90%)}.pad-button-6{background:radial-gradient(ellipse,hsl(110,80%,50%) 0%,hsl(110,20%,70%) 140%)}.pad-button-6:hover,.pad-button-6:active{background:radial-gradient(ellipse,hsl(110,100%,50%) 0%,hsl(110,30%,70%) 90%)}.pad-button-7{background:radial-gradient(ellipse,hsl(60,80%,50%) 0%,hsl(60,20%,70%) 140%)}.pad-button-7:hover,.pad-button-7:active{background:radial-gradient(ellipse,hsl(60,100%,50%) 0%,hsl(60,30%,70%) 90%)}.pad-button-8{background:radial-gradient(ellipse,hsl(40,80%,50%) 0%,hsl(40,20%,70%) 140%)}.pad-button-8:hover,.pad-button-8:active{background:radial-gradient(ellipse,hsl(40,100%,50%) 0%,hsl(40,30%,70%) 90%)}.pad-button:active{box-shadow:-1px 0 #eeb9ee inset,0 0 5px #ccc inset,0 0 3px #160e16}:root{--keyboard: hsl(300, 80%, 10%);--keyboard-shadow: hsla(19, 50%, 66%, .2);--keyboard-border: hsl(20, 91%, 5%);--black-10: hsla(0, 0%, 0%, .1);--black-20: hsla(0, 0%, 0%, .2);--black-30: hsla(0, 0%, 0%, .3);--black-50: hsla(0, 0%, 0%, .5);--black-60: hsla(0, 0%, 0%, .6);--white-20: hsla(0, 0%, 100%, .2);--white-50: hsla(0, 0%, 100%, .5);--white-80: hsla(0, 0%, 100%, .8);--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-divider-dark-1: rgba(84, 84, 84, .65);--vt-c-divider-dark-2: rgba(84, 84, 84, .48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, .64)}:root{--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1);--section-gap: 160px}@media (prefers-color-scheme: dark){:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2)}}*,*:before,*:after{box-sizing:border-box;margin:0;position:relative;font-weight:400}body{min-height:100vh;color:var(--color-text);background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(to bottom left,var(--black-10) aliceblue,var(--white-20))}#app{max-width:1280px;width:100vw;height:100vh;margin:0 auto;padding:2rem;display:flex;flex-direction:column;font-weight:400}a,.green{text-decoration:none;color:#00bd7e;transition:.4s}@media (hover: hover){a:hover{background-color:#00bd7e33}}@media (min-width: 1024px){body{display:flex;place-items:center}#app{padding:0 2rem}}