*{box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:62.5%;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--background-color-dark: #242424;--background-color-light: #ffffff;--background-color: var(--background-color-dark);--soft-background-color-dark: rgb(42,43,53);--soft-background-color-light: rgb(250,250,252);--soft-background-color: var(--soft-background-color-dark);--link-color: #0097ee;--link-color-hover: #017ac0;--text-color: rgba(255, 255, 255, .87);--text-color-light: rgb(17, 17, 17);--100vw: calc(var(--vw, 1vw) * 100);width:100vw}body{margin:0;display:flex;flex-direction:column;place-items:center;min-width:320px;min-height:100vh;max-width:100%;overflow-x:hidden;font-size:1.8rem}header{height:10rem;margin-bottom:10rem;user-select:none;-webkit-user-select:none;width:100%;position:relative;text-align:center}main{padding:1.6rem;display:flex;flex-direction:column}section.piano{margin-bottom:15rem}section.about{max-width:55ch;user-select:none;-webkit-user-select:none;width:100%}footer{padding:1.6rem;height:10rem}hr{width:100%}.download-wrapper{position:absolute;top:1rem;right:1rem}.download-btn{display:flex;align-items:center;gap:.5ch;padding:1ch;border:1px solid rgba(0,0,0,.5);border-radius:5px;color:#242424;background-color:#f5f5f5;cursor:pointer;visibility:hidden;margin-right:1.6rem}.download-btn.--show{visibility:visible}.download-btn>span{font-weight:600;display:none}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff;--text-color: var(--text-color-light);--background-color: var(--background-color-light);--soft-background-color: var(--background-color-light)}a:hover{color:#747bff}.black-svg-icon{filter:none!important}}@media (min-width: 768px){.download-btn>span{display:inline-block}}.code{background:#fafafa;background:var(--soft-background-color);border-radius:5px;padding:.8rem;font-size:1.3rem;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace;place-items:center;white-space:nowrap;display:inline-flex;width:max-content;justify-content:center;align-items:center;border:1px solid rgba(0,0,0,.5)}.black-svg-icon{filter:invert(100%) sepia(7%) saturate(0%) hue-rotate(32deg) brightness(107%) contrast(107%)}:root{--key-size: calc(var(--100vw) * .4);--key-height: var(--key-size);--key-width: calc(var(--key-height) / 4)}section:has(.keyboard){user-select:none;-webkit-user-select:none;display:flex;flex-direction:column;align-items:center}.keyboard{width:max-content;position:relative;display:flex;flex-direction:row;gap:1px;background-color:#242424;border-radius:5px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px}.keyboard:after{content:"";position:absolute;top:0;left:-2px;width:calc(100% + 4px);z-index:999;border-top:.2rem solid rgb(0,60,0);border-bottom:.2rem solid rgb(0,70,0);border-radius:0 0 5px 5px;box-shadow:#00000017 0 2px 1px,#00000017 0 4px 2px,#00000017 0 8px 4px,#00000017 0 16px 8px,#00000017 0 32px 16px,#0000008f 0 22px 70px 4px,#0000008f 0 22px 30px 4px,#004600 0 2px 1px}div.key{position:relative}button.key{height:var(--key-height);width:var(--key-width);border-radius:0 0 5px 5px/0px 0px 5px 5px;padding:0;margin:0;cursor:pointer;border:1px solid transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation;display:flex;flex-direction:column-reverse;align-items:center}button.key.--pressed{background-color:red}.white.key{background-color:#f0f8ff;color:#000}.black.key{position:absolute;top:0;right:0;z-index:999;transform:translate(50%);width:calc(var(--key-width) * .65);height:calc(var(--key-height) * .65);background-color:#000;color:#fff;box-shadow:#0000001f 0 1px 3px,#0000003d 0 1px 2px}.white.key>span{padding-bottom:.2rem;font-size:calc(var(--key-width) * .4);font-weight:200;text-transform:uppercase}.black.key>span{padding-bottom:.3rem;font-size:calc(var(--key-width) * .25);font-weight:200;text-transform:uppercase}span.octave-prompt{color:#00f;visibility:visible;opacity:1}span.octave-prompt.--hidden{visibility:hidden;opacity:0;transition:opacity .5s,visibility .5s}.keyboard-header{position:absolute;top:0;left:0;width:100%;transform:translateY(-100%);display:flex;justify-content:space-between}.lower-octave-btn,.raise-octave-btn{cursor:pointer;height:3rem;margin-bottom:1rem;border:1px solid rgba(245,245,245,.5);border-radius:5px;color:#fff;background-color:#34b05f;background-color:#1f6c3a;display:flex;align-items:center;gap:.5ch;touch-action:manipulation}@media (min-width: 768px){:root{--key-size: calc(var(--100vw) * .3)}}@media (min-width: 1200px){:root{--key-size: calc(var(--100vw) * .2)}}