.LightMidi .canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.LightMidi .note{position:fixed;display:block;border-radius:100%;width:min(var(--width) * .02px,var(--height) * .015px);height:min(var(--width) * .02px,var(--height) * .015px);--hue: 0;--velocity: 0;outline:thin black solid;background-color:hsl(calc(360deg * var(--hue)) 10% 5%);transform:translate(-50%) translateY(-50%)}.LightMidi .note.pressed{outline:thin transparent solid;background-color:hsl(calc(1turn * var(--hue)) 100% calc(100% * var(--velocity)))}.LightMidi_notes{display:flex;flex-direction:row;flex-wrap:wrap;width:calc(19 * var(--size))}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{font-size:var(--font-md)}body{-webkit-font-smoothing:antialiased;font-family:var(--font-normal);color:var(--color-text);background-color:var(--color-bg)}code,pre{font-family:var(--font-monospace)}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}a,p,h1,h2,h3,h4,h5,h6,code{overflow-wrap:break-word}p{margin:1rem 0}#app{height:100%;isolation:isolate;background-color:var(--color-bg);color:var(--color-text)}:root{--color-text: white;--color-bg: black;--font-normal: sans-serif;--font-monospace: monospace;--font-xs: 9px;--font-sm: 12px;--font-md: 16px;--font-lg: 22px;--font-xl: 28px}html,body{height:100%}
/*# sourceMappingURL=webmidi-visualization.css.map */