style.css

:root{--bg: #fff;--fg: #000}@media(prefers-color-scheme: dark){:root{--bg: #000;--fg: #fff}}html{background-color:var(--bg);color:var(--fg)}body{margin:0;box-sizing:border-box}*{color:inherit;background-color:inherit;border-color:inherit}*,*::before,*::after{box-sizing:inherit}.octicon{fill:currentColor;width:1em;height:1em;position:relative;top:4px}.notes{display:grid;align-items:flex-start;flex-wrap:wrap;gap:5px;--columns: 8;grid-template-columns:repeat(var(--columns), min-content)}.note{width:50px;height:50px;border:1px solid var(--fg);display:flex;align-items:center;justify-content:center}.note.active{background-color:red}.app{position:relative;display:flex;flex-direction:column;height:100vh}.toolbar{position:sticky;top:0;padding:.5rem 0;background-color:var(--bg)}.editor{display:flex;width:100%;gap:1rem;align-items:stretch;flex-grow:1}.song{resize:none}.notesContainer{overflow-x:auto;overflow-y:hidden}.song,.notesContainer{flex:1 0 0px}/*# sourceMappingURL=style.css.map */