:root{--gray-darker:#282828;--gray-dark:#333;--gray:#666;--white:#fff;--blue:#0291a7;--blue-light:#aceff9;--space-xxs:.4rem;--space-xs:.8rem;--space-sm:1.6rem;--space:2.4rem;--space-md:3.2rem;--space-xxlg:8.8rem;--screen-sm:768px;--piano-height:60vh;--footer-height:4rem;--zindex-piano:1;--zindex-site:10}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:clamp(8px,.232558vw + 7.02326px,10px)}body{-webkit-font-smoothing:antialiased;color:var(--gray-dark);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;overflow-x:hidden}img{max-width:100%}a{color:var(--blue);text-decoration:none}a:focus,a:hover{text-decoration:underline}.github{display:inline-block}.github:not(:last-child){margin-bottom:var(--space)}.title{font-size:6rem}.title:not(:last-child){margin-bottom:calc(var(--space-xxs) / 2)}.subtitle{color:var(--gray);font-size:3rem;font-weight:400}.subtitle:not(:last-child){margin-bottom:var(--space-sm)}.description{font-size:2rem}.description:not(:last-child){margin-bottom:var(--space-sm)}.container{max-width:var(--screen-sm);padding-left:var(--space);padding-right:var(--space);width:100%;margin-left:auto;margin-right:auto}.main{background:var(--white);min-height:calc(99vh - (var(--piano-height) + var(--footer-height)));padding-bottom:var(--space-md);padding-top:var(--space-md);z-index:var(--zindex-site);position:relative}.footer{background:var(--gray-darker);color:var(--white);height:var(--footer-height);justify-content:center;align-items:center;font-size:1.6rem;display:flex}.footer__link{color:var(--blue-light);font-weight:700;text-decoration:none}.footer__link:focus,.footer__link:hover{text-decoration:underline}.piano{border-top:var(--space-xs) var(--gray-darker) solid;box-shadow:inset 0 -1px 1px #ffffff80, inset 0 calc(-1 * var(--space-xxs)) var(--space-xxs) var(--gray-darker);background:linear-gradient(-65deg,#000,#222,#000,#666,#222 75%);justify-content:center;height:80vh;padding-bottom:5%;padding-left:2.5%;padding-right:2.5%;display:flex;overflow:hidden}@media screen and (height>=440px){.piano{height:var(--piano-height)}}.piano-key{margin:0 calc(var(--space-xxs) / 4);max-width:var(--space-xxlg);flex:1;position:relative}@media (width<380px){.piano-key:nth-child(-n+3),.piano-key:nth-child(n+11){display:none}}.piano-key__white{background:linear-gradient(-30deg,#f8f8f8,#fff);height:100%;position:relative;box-shadow:inset 0 1px #fff,inset 0 -1px #fff,inset 1px 0 #fff,inset -1px 0 #fff,0 4px 3px #000000b3,inset -1px -1px 15px #00000080,-3px 4px 6px #00000080}.piano-key__white:active,.piano-key__white.active{height:calc(100% - var(--space-xxs));top:calc(-1 * var(--space-xxs));box-shadow:inset 0 1px #fff,inset 0 -1px #fff,inset 1px 0 #fff,inset -1px 0 #fff,0 4px 3px #000000b3,inset -1px -1px 15px #000,-3px 4px 6px #00000080}.piano-key__black{border-style:solid;border-color:#666 #222 #111 #555;border-width:calc(var(--space-xxs) / 2) var(--space-xxs) calc(var(--space-xs) + var(--space-xxs));width:70%;height:60%;z-index:var(--zindex-piano);background:linear-gradient(-20deg,#222,#000,#222);position:absolute;top:0;left:100%;transform:translate(-50%);box-shadow:inset 0 -1px 2px #fff6,0 2px 3px #0006}.piano-key__black:active,.piano-key__black.active{border-bottom-width:var(--space-xxs)}