: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;--sidebar-width: 15rem;--accent-color: fuchsia;--note-font-size: 2rem;--root-note-font-size: calc(var(--note-font-size) * 2)}*{box-sizing:border-box;margin:0;padding:0}body,#root{min-height:100vh;display:flex;flex-direction:column}@media screen and (max-width: 1280px){#root{margin:0 auto;width:100%}}a{color:var(--accent-color)}a:hover{color:#fff}.app{flex:1;display:flex}.app main>header{display:flex;gap:1rem;justify-content:space-between;align-items:center}.app main>header .actions{display:flex;gap:1rem}.app main>header button{padding:0 .5rem;line-height:1.5rem;font-size:.8rem}@media screen and (max-width: 640px){.app .show-shortcuts,.app .toggle-zen-mode{display:none}}.app.isZenMode{--note-font-size: 2.5rem;--root-note-font-size: 5rem}.app.isZenMode main>header h1,.app.isZenMode .backing-tracks{display:none}.app.isZenMode .cards{flex:1}.app.isZenMode .cards .card.hasSixth .note{--note-font-size: 2.5rem}.app .sidebar{padding:1rem;width:var(--sidebar-width);height:100vh;background-color:#111;display:flex;flex-direction:column;gap:1rem}.app .sidebar .presets{display:flex;flex-direction:column;gap:1rem}.app .sidebar .presets ul{list-style:none;display:flex;flex-direction:column;gap:1rem}.app .sidebar .presets ul li button{width:100%;font-size:.8rem;line-height:1.2rem}.app .sidebar .controls{flex:1;display:flex;flex-direction:column;gap:1.5rem}.app .sidebar .controls form{display:flex;flex-direction:column;gap:2rem}.app .sidebar .controls form fieldset{border:none;display:flex;gap:.5rem}.app .sidebar .controls form fieldset legend{font-weight:700;margin-bottom:.5rem}.app .sidebar .controls form fieldset.vertical{flex-direction:column}.app .sidebar .controls form label{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.app .sidebar footer{font-size:.9rem;margin-top:auto}.app main{padding:1rem;flex:1;display:flex;flex-direction:column;gap:1rem;height:100vh;overflow-y:auto;position:relative}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}.cards .card{background-color:#fff;border-radius:.5rem;padding:2rem 1rem;color:#000;display:flex;gap:.5rem;flex-direction:column;justify-content:center;align-items:center;box-shadow:#ccdbe8 3px 3px 6px inset,#ffffff80 -3px -3px 6px 1px inset}.cards .card.hasSixth{padding:1rem}.cards .card.hasSixth .note{--note-font-size: 1.75rem}.cards .card .note{font-size:var(--note-font-size);color:#3b3b3b}.cards .card .root{font-size:var(--root-note-font-size);font-weight:700;color:var(--accent-color)}@media screen and (max-width: 640px){.cards{grid-template-columns:1fr}.cards .card{flex-direction:row;gap:2rem}.cards .card .root{font-size:2rem}}.backing-tracks{display:flex;gap:1rem;padding-top:1rem}@media screen and (max-width: 640px){.backing-tracks{flex-direction:column}}.backing-tracks header{display:flex;flex-direction:column;gap:1rem;width:15rem}@media screen and (max-width: 640px){.backing-tracks header{width:auto}}.backing-tracks .player{flex:1}.backing-tracks fieldset{border:none;display:flex;flex-direction:column;gap:1rem}.backing-tracks label{flex:1;display:flex;align-items:center;gap:.5rem}.backing-tracks label select{height:2rem;flex:1}.modal{width:min(30rem,90vw);top:20%;left:50%;translate:-50%;padding:2rem;flex-direction:column;gap:1rem;border:none;border-radius:.5rem;box-shadow:#00000059 0 5px 15px}.modal[open]{display:flex}.modal button{padding:0 .5rem;line-height:1.5rem;font-size:.8rem}.modal dl{display:grid;grid-gap:.5rem .5rem;grid-template-columns:max-content}.modal dt{font-weight:700}.modal dd{margin:0;grid-column-start:2;font-size:.9rem;line-height:1.5rem}.modal kbd{display:flex;align-items:center;justify-content:center;background-color:#ffffff4d;width:1.5rem;height:1.5rem;border-radius:.25rem}.modal::backdrop{background:#00000080}