*,:after,:before{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:#000}@media (orientation:portrait) and (max-width:1024px){.app{display:none}}@media (min-width:768px){.app{background:transparent}}.choose-layout{display:none;margin-top:1rem}@media (orientation:portrait) and (max-width:1023px),(pointer:fine){.choose-layout{display:block}}.rotate-device{padding:1rem;text-align:center}@media (orientation:landscape){.rotate-device{display:none}}.piano{position:relative;width:100%;background:#111}@media (orientation:portrait) and (max-width:1023px),(pointer:fine){.piano{width:90%;padding:2rem 2rem .5rem;border-radius:30px;box-shadow:inset 0 -8px 0 0 #272222;border:1px solid;border-color:#111 #111 #272222;transform:perspective(800px) rotateX(5deg)}}@media (min-width:1366px){.piano{max-width:1280px}}.controls{display:none}@media (orientation:portrait) and (max-width:1023px),(pointer:fine){.controls{display:flex;height:180px;margin-bottom:3rem}}.speakers{flex:3 1;background:#0c0c0c;border:2px solid #272222;background:linear-gradient(transparent 70%,#272222 0),linear-gradient(90deg,transparent 70%,#272222 0),#000;background-size:1px 5px,5px 1px,100% 100%}.speakers--left{border-radius:15px 15px 75px 15px;transform:skewX(2deg)}.speakers--right{border-radius:15px 15px 15px 75px;transform:skewX(-2deg)}.knobs{flex:10 1}.keys{display:flex;overflow:hidden;height:100%;width:100%;position:fixed;top:0;right:0;bottom:0;left:0}@media (orientation:portrait) and (max-width:1023px),(pointer:fine){.keys{position:relative;border-radius:0 0 10px 10px;box-shadow:0 -3px 0 5px #272222;transform:translateY(-7px) perspective(1000px) rotateX(3deg);height:200px}}.key{display:flex;flex:1 1;flex-direction:column;position:relative;border-right:1px solid #000}.key__btn{flex:1 1;border-radius:0 0 5px 5px}.key__btn:first-of-type{display:flex;position:relative;border-left:1px solid #dec4c4;border-bottom:1px solid #dec4c4;box-shadow:inset 0 -7px 0 0 #dec4c4,inset 0 0 5px 1px #ccc;background:#fff}.key__btn:first-of-type:active{background:linear-gradient(180deg,#fff 0,#e9e9e9);box-shadow:inset 0 -5px 0 0 #dec4c4,inset 0 0 5px 1px #ccc}.key__btn:nth-of-type(2){position:absolute;height:70%;width:75%;z-index:1;right:0;transform:translateX(50%);border:1px solid #000;box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -7px 0 4px rgba(0,0,0,.6),0 0 0 0 rgba(0,0,0,.5);background:linear-gradient(45deg,#222,#555)}.key__btn:nth-of-type(2):active{box-shadow:inset -1px -1px 2px hsla(0,0%,100%,.2),inset 0 -5px 2px 4px rgba(0,0,0,.6),0 0 0 0 rgba(0,0,0,.5);background:linear-gradient(90deg,#444 0,#222)}
/*# sourceMappingURL=main.3e845da6.chunk.css.map */