:root{--background-color: #feda15;--text-color: #27231f;--chord-button-color: #de0001;--button-diameter: max(200px, 15vw);--button-radius: max(100px, 7.5vw);--button-v-padding: (5vh)}html{-webkit-user-select:none;user-select:none;color:var(--text-color);background-color:var(--background-color);font-family:Avenir,Arial,sans-serif}body{margin:0}.contain-all{width:100vw;height:100vh;position:relative;overflow:hidden}.button-container{position:absolute;top:calc(-1 * var(--button-radius));left:calc(-1 * var(--button-radius));z-index:3000;transform:translate(50vw,50vh)}.more-info-container{position:absolute;left:51vw;top:calc(100vh - var(--button-diameter) - var(--button-v-padding));height:var(--button-diameter);display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;font-size:max(18px,.95vw)}.piano-roll-visible .more-info-container{pointer-events:unset;animation:fade 1s ease 1s forwards}.cta-container{margin-bottom:2rem}.cta-container strong{font-weight:900}.cta-container a{color:var(--text-color);font-weight:700;transition:transform .2s;text-decoration:none;display:inline-block;transform-origin:left;touch-action:manipulation}.cta-container a:hover,.cta-container a:focus-visible{color:var(--chord-button-color);transform:scale(1.1)}.play-download-container{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5em}.basic-button{background-color:var(--background-color);border:2px solid var(--text-color);border-radius:3px;font-size:max(20px,1vw);padding:.5em 1em;cursor:pointer;transition:transform .2s;color:var(--text-color);touch-action:manipulation}.basic-button:hover,.basic-button:focus-visible{transform:scale(1.1)}.chord-button{border-radius:50%;width:var(--button-diameter);height:var(--button-diameter);border:none;color:#fff;font-weight:900;font-size:max(2rem,2.5vw);line-height:1.2;background:var(--chord-button-color);text-shadow:0 3px 1px rgba(122,17,8,.8);box-shadow:-2px 8px 0 1px #b70900,2px 15px 20px #00000059;text-transform:uppercase;transition:.2s all ease;outline:none;cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation}.chord-button.down{transform:translate(-2px,4px);box-shadow:0 4px 0 1px #b70000,0 8px 6px #00000073}.chord-button.hidden{transform:scale(.0001);opacity:0}.chord-button.grow-in{opacity:0;animation:grow .5s cubic-bezier(.47,1.64,.41,.8) .5s forwards}.emoji-container{position:absolute;top:0;left:0;transform:translate(50vw,50vh);transition:transform 3s ease}.exploji{position:absolute;font-size:max(160px,8vw);margin-left:min(-80px,-4vw);margin-top:min(-80px,-4vw);animation:explode 1s linear forwards;pointer-events:none;z-index:2000}.piano-roll-container,.piano-roll-overlay-container{position:absolute;top:0;left:0;right:0;bottom:calc(var(--button-diameter) + 2 * var(--button-v-padding))}.piano-roll-overlay-container{overflow:hidden}.piano-roll{width:100%;height:100%}.piano-roll-overlay{width:100%;height:100%;background-color:var(--background-color)}.piano-roll-visible .piano-roll-overlay{animation:wipe .5s .4s forwards}.piano-roll-visible .button-container{animation:bounce .5s cubic-bezier(.47,1.64,.41,.8) .4s forwards,slide 1s ease 1s forwards}.piano-roll-visible .emoji-container{transform:translate(calc(49vw - var(--button-radius)),calc(100vh - var(--button-radius) - var(--button-v-padding)))}@media (max-width: 600px){.more-info-container{font-size:16px;margin-right:.5em}.play-download-container{width:100%;display:grid;grid-template-columns:1fr;gap:.5em}.cta-container{margin-bottom:1rem}.more-info-container strong{display:none}.basic-button{font-size:18px}.basic-button{transform-origin:left!important}.basic-button:hover,.basic-button:focus-visible{transform:scale(1.05)}.cta-container a:hover,.cta-container a:focus-visible{transform:scale(1.05)}}@media (max-width: 450px){.piano-roll-visible .button-container{animation:bounce .5s cubic-bezier(.47,1.64,.41,.8) .4s forwards,slide-small 1s ease 1s forwards}.more-info-container{left:40vw}.piano-roll-visible .emoji-container{transform:translate(calc(40vw - .75 * var(--button-radius)),calc(100vh - var(--button-radius) - var(--button-v-padding)))}.exploji{position:absolute;font-size:18px;font-size:120px;margin-left:-60px;margin-top:-60px;animation:explode 1s linear forwards;pointer-events:none;z-index:2000}}@keyframes explode{0%{transform:translate(0);opacity:1}to{transform:translate(calc(var(--x) * 2000px),calc(var(--y) * 2000px));opacity:0}}@keyframes bounce{0%{transform:translate(50vw,50vh)}to{transform:translate(50vw,calc(100vh - var(--button-radius) - var(--button-v-padding)))}}@keyframes slide{0%{transform:translate(50vw,calc(100vh - var(--button-radius) - var(--button-v-padding)))}to{transform:translate(calc(49vw - var(--button-radius)),calc(100vh - var(--button-radius) - var(--button-v-padding)))}}@keyframes slide-small{0%{transform:translate(50vw,calc(100vh - var(--button-radius) - var(--button-v-padding)))}to{transform:translate(calc(40vw - .75 * var(--button-radius)),calc(100vh - var(--button-radius) - var(--button-v-padding))) scale(.7)}}@keyframes wipe{0%{transform:translate(0)}to{transform:translate(100vw)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes grow{0%{transform:scale(.0001);opacity:0}5%{opacity:1}to{transform:scale(1);opacity:1}}