body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center;background:radial-gradient(circle at top,#595959 0%,#1f1f1f 55%,#111 100%);min-height:100vh}.App-header{color:#fff;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;padding:1rem .8rem;display:flex}.App-title{margin:0;font-size:clamp(1.4rem,3vw,2rem)}.App-subtitle{color:#d9d9d9;margin:0;font-size:clamp(.85rem,2.2vw,1rem)}.piano-scroll{-webkit-overflow-scrolling:touch;width:100%;padding-bottom:.5rem;overflow:auto hidden}.piano{gap:.55rem;width:max-content;margin:0 auto;display:flex}.octave{--white-key-width:clamp(2rem, 4.8vw, 2.8rem);--white-key-height:clamp(7.5rem, 18vw, 12.5rem);--black-key-width:calc(var(--white-key-width) * .62);--black-key-height:calc(var(--white-key-height) * .6);width:calc(var(--white-key-width) * 7);height:var(--white-key-height);box-sizing:border-box;flex-direction:column;margin:0 .1rem;display:flex;position:relative}.white-keys{display:flex}.black-keys{pointer-events:none;width:100%;position:absolute;top:0;left:0}.black-keys .piano-key{pointer-events:auto}.piano-key{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:1px solid #111;transition:background-color 80ms,transform 80ms}.piano-key.active,.piano-key:active{transform:translateY(2px)}.white-key{width:var(--white-key-width);height:var(--white-key-height);color:#111;z-index:1;background:linear-gradient(#fff 0%,#efefef 100%);flex-direction:column;justify-content:flex-end;align-items:center;padding:.5rem .2rem;display:flex}.white-key.active,.white-key:active{background:#d6d6d6}.black-key{width:var(--black-key-width);height:var(--black-key-height);z-index:2;background:linear-gradient(#333 0%,#0f0f0f 100%);border-color:#000;position:absolute;top:0}.black-key.active,.black-key:active{background:#444}.label{font-size:.72rem;font-weight:600}.hotkey{color:#5d5d5d;font-size:.65rem}