*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:monospace}body{background-color:#1c1c1c}button{padding:.75rem .25rem;border:none;background-color:#3c3c3c;color:#fff;font-size:1.25rem}button:hover{cursor:pointer;background-color:#6c6c6c}.main{display:flex;flex-direction:column;justify-content:space-between;padding:1rem;min-height:100vh}.notation-system{display:grid;grid-template-columns:repeat(4,auto);gap:1rem}.result{text-align:center;color:#fff;margin:1rem 0}.reference-button{margin-top:1rem}.reference-image{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;max-width:calc(100% - 2rem);height:auto}.compatible-keys-header{margin-top:.5rem;font-size:1.25rem}.compatible-key{font-size:1.2rem;padding-top:.5rem}.bold{font-weight:700}.large-text{font-size:2rem}