:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%;width:100%;margin:0;padding:0;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}div{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.auto-rotate{transform:rotate(var(--app-rotation))}.grantophone{height:var(--app-height);flex-direction:column}.preset-bar{width:var(--app-width);height:40px}.preset-button{height:100%;background-color:#1a1a1a}.keyboard{width:var(--app-width);display:grid;grid-template-columns:repeat(var(--octaves),1fr);flex-grow:1}.key{flex:1;transition:background-color .1s ease}