*{padding:0;margin:0;box-sizing:border-box}:root{touch-action:pan-x pan-y;height:100%}html,body{font-family:sans-serif;background-color:#000;color:#fff;display:flex;justify-content:center;align-items:center;width:100%;height:100%}main{width:100vw;max-width:131.6vh;height:100vh;max-height:76vw;margin:auto;position:absolute;top:0;right:0;bottom:0;left:0;container-type:size;display:grid;grid-template-areas:"h h h" "v v v" "a0 b0 c0" "a1 b1 c1" "d0 e0 f0" "d1 e1 f1" "g0 g0 g0" "g1 g1 g1";grid-template-columns:1fr 1fr 1fr;grid-template-rows:8% 2% 2% 1fr 3% 1fr 3% 1fr}.title{text-align:center;font-size:2cqh}.title.small{padding-left:1em}#notes-title{grid-area:a0}#degrees-title{grid-area:c0}#chord1-title{grid-area:b0}#chord2-title{grid-area:d0}#chord3-title{grid-area:e0}#chord4-title{grid-area:f0}#scale-title{grid-area:g0}#notes-chart>*{grid-area:a1}#degrees-chart>*{grid-area:c1}#chord1-chart>*{grid-area:b1}#chord2-chart>*{grid-area:d1}#chord3-chart>*{grid-area:e1}#chord4-chart>*{grid-area:f1}#scale-chart>*{grid-area:g1}#notes-chart,#degrees-chart,#chord1-chart,#chord2-chart,#chord3-chart,#chord4-chart,#scale-chart{display:contents}#keyboard{grid-area:h}#keyboard{width:100%;position:relative;display:flex;overflow:hidden;justify-content:center;align-content:center}#keyboard>*{display:flex}