*{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:75%;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}.key-label{bottom:.5rem;color:#333;font-size:.9rem;font-weight:700;left:50%;pointer-events:none;position:absolute;transform:translate(-50%);-webkit-user-select:none;-moz-user-select:none;user-select:none}.piano-key__black .key-label{bottom:.3rem;color:#dedede;font-size:.8rem}body.landscape-mode .key-label{font-size:1.2rem}body.landscape-mode .piano-key__black .key-label{font-size:1rem}.sheet-music{background:linear-gradient(180deg,#fffffff2 0,#ffffffd9 80%,#fff0);height:35%;left:0;overflow:visible;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.sheet-music-track{height:100%;overflow:hidden;position:relative;scrollbar-width:none;width:100%}.sheet-music-track::-webkit-scrollbar{display:none}.sheet-music-content{align-items:center;animation:scroll-notes-vertical linear infinite;animation-duration:20s;border:0;display:flex;flex-direction:column;gap:1rem;padding:0}.note-row{display:flex;flex-shrink:0;gap:1rem}.sheet-music-content .note{align-items:center;background:#000c;border-radius:50%;box-shadow:0 2px 8px #0000004d;color:#fff;display:inline-flex;flex-shrink:0;font-size:1.4rem;font-weight:700;height:40px;justify-content:center;position:relative;width:40px}.note .dot-top:before{background:#fff;border-radius:50%;content:"";height:6px;top:4px;width:6px}.note .dot-bottom,.note .dot-top:before{left:50%;position:absolute;transform:translate(-50%)}.note .dot-bottom{bottom:2px;font-size:.6rem;line-height:1}body.landscape-mode .sheet-music{height:25%;z-index:50}body.landscape-mode .sheet-music-content .note{font-size:2.2rem;height:60px;width:60px}@keyframes scroll-notes-vertical{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.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:.9rem;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}#piano-container{background:#333;box-shadow:0 -2px 10px #0000001a;width:100%}body.landscape-mode #piano-container{height:100vw;left:calc(50vw - 50vh);position:fixed;top:calc(50vh - 50vw);transform:rotate(90deg);transform-origin:50% 50%;width:100vh;z-index:1000}body.landscape-mode .main{display:none}body.landscape-mode .landscape-btn:not(.in-landscape),body.landscape-mode .sound-selector:not(.in-landscape){display:none!important}body.landscape-mode .landscape-controls{display:flex;justify-content:space-between;left:0;padding:0 1rem;position:absolute;right:0;top:1rem;z-index:100}body.landscape-mode .landscape-controls .landscape-btn,body.landscape-mode .landscape-controls .sound-selector{display:flex;position:static}body.landscape-mode .landscape-controls button{font-size:.9rem;padding:.6rem 1rem}