*{margin:0;padding:0}*,:after,:before{box-sizing:border-box}html{font-size:10px}body{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow-x:hidden;visibility:visible}img{max-width:100%}a{color:#0291a7;text-decoration:none}a:focus,a:hover{text-decoration:underline}.github{display:inline-block}.github:not(:last-child){margin-bottom:2.4rem}.title{font-size:6rem}.title:not(:last-child){margin-bottom:.2rem}.subtitle{color:#666;font-size:3rem;font-weight:400}.subtitle:not(:last-child){margin-bottom:1.6rem}.description{font-size:2rem}.description:not(:last-child){margin-bottom:1.6rem}.container{margin-left:auto;margin-right:auto;max-width:768px;padding-left:2.4rem;padding-right:2.4rem;width:100%}.main{background:#fff;min-height:35vh;padding-bottom:3.2rem;padding-top:3.2rem;position:relative;z-index:10}.piano{background:linear-gradient(-65deg,#000,#222,#000,#666,#222 75%);border-top:.8rem solid #282828;box-shadow:inset 0 -1px 1px #ffffff80,inset -.4rem .4rem #282828;display:flex;height:80vh;justify-content:center;overflow:hidden;padding-bottom:5%;padding-left:2.5%;padding-right:2.5%}@media screen and (min-height:440px){.piano{height:60vh}}.piano-key{flex:1;margin:0 .1rem;max-width:8.8rem;position:relative}@media screen and (max-width:379px){.piano-key:first-child,.piano-key:nth-child(11),.piano-key:nth-child(12),.piano-key:nth-child(13),.piano-key:nth-child(14),.piano-key:nth-child(2),.piano-key:nth-child(3){display:none}}.piano-key__white{background:linear-gradient(-30deg,#f8f8f8,#fff);box-shadow:inset 0 1px #fff,inset 0 -1px #fff,inset 1px 0 #fff,inset -1px 0 #fff,0 4px 3px #000000b3,inset 0 -1px #fff,inset 1px 0 #fff,inset -1px -1px 15px #00000080,-3px 4px 6px #00000080;height:100%;position:relative}.piano-key__white.active,.piano-key__white:active{box-shadow:inset 0 1px #fff,inset 0 -1px #fff,inset 1px 0 #fff,inset -1px 0 #fff,0 4px 3px #000000b3,inset 0 -1px #fff,inset 1px 0 #fff,inset -1px -1px 15px #000,-3px 4px 6px #00000080;height:99.6%;position:relative;top:-.4rem}.piano-key__black{background:linear-gradient(-20deg,#222,#000,#222);border-color:#666 #222 #111 #555;border-style:solid;border-width:.2rem .4rem 1.2rem;box-shadow:inset 0 -1px 2px #fff6,0 2px 3px #0006;height:60%;left:100%;position:absolute;top:0;transform:translate(-50%);width:70%;z-index:1}.piano-key__black.active,.piano-key__black:active{border-bottom-width:.4rem}.sound-selector{display:flex;flex-wrap:wrap;gap:.5rem;left:1rem;max-width:200px;position:fixed;top:1rem;z-index:100}.sound-selector button{background:#fff;border:1px solid #aaa;border-radius:4px;color:#333;cursor:pointer;font-size:.75rem;padding:.4rem .8rem;transition:all .2s ease}.sound-selector button:hover{background:#dedede;border-color:#333}.sound-selector button.active{background:#333;border-color:#333;color:#fff}.landscape-btn{align-items:center;background:#fff;border:1px solid #aaa;border-radius:4px;color:#333;cursor:pointer;display:flex;font-size:.8rem;gap:.4rem;padding:.5rem 1rem;position:fixed;right:1rem;top:1rem;transition:all .2s ease;z-index:100}.landscape-btn svg{height:18px;width:18px}.landscape-btn:hover{background:#dedede;border-color:#333}@media (min-width:768px){.landscape-btn{display:none}}body.landscape-mode{background:#333;height:100vh;left:0;overflow:hidden;position:fixed;top:0;transform:rotate(90deg);transform-origin:left top;width:100vw}body.landscape-mode .content,body.landscape-mode .main{display:none}body.landscape-mode .header{height:auto;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100vh}body.landscape-mode .piano{box-sizing:border-box;height:calc(100vw - 2rem);max-height:100vh;max-width:100vw;padding:.5rem;width:calc(100vh - 2rem)}body.landscape-mode .sound-selector{left:10px;position:absolute;top:10px;transform:none}body.landscape-mode .landscape-btn{position:absolute;right:10px;top:10px;transform:none}