:root{font-family:Arial,Helvetica,sans-serif;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body,#root{margin:0;min-height:100vh;display:flex;flex-direction:column}#root{padding:0 1rem}@media screen and (max-width: 1280px){#root{margin:0 auto;width:100%}}header{display:flex;align-items:center;gap:2rem}.controls{display:flex;flex-direction:column;gap:1rem}main{flex:1;display:flex;flex-direction:column;gap:2rem;padding:1rem 0}main>*{margin:0}form{display:flex;gap:1rem}label{display:flex;align-items:center;gap:.5rem}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}.card{background-color:#fff;border-radius:.5rem;padding:2rem 0;color:#000;display:flex;gap:.5rem;flex-direction:column;justify-content:center;align-items:center}.card .note{font-size:2rem;color:#3b3b3b}.card .root{font-size:4rem;font-weight:700;color:#f0f}footer{padding:1rem}.favorites{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1rem}.backing-tracks{display:grid;grid-template-areas:"a b" "c b";grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;column-gap:2rem}.backing-tracks h2{grid-area:a;margin:0;align-self:center;justify-self:end}.backing-tracks ul{grid-area:c;margin:0;padding:0;list-style:none;display:flex;gap:1rem;align-items:center;justify-self:end}.backing-tracks .player{grid-area:b}