main{padding:2rem;justify-content:center;max-width:-webkit-fill-available}@media screen and (max-width: 768px){main{padding:1rem}}.scale-name{text-transform:capitalize;display:inline-flex;white-space:pre;align-items:center;flex-direction:row;font-size:1.25rem;flex-wrap:wrap;justify-content:center}:root{--arrow-bg: rgba(255, 255, 255, .3);--arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);--option-bg: var(--color-dark-1);--select-bg: rgba(255, 255, 255, .2);--colorDark: #4c0000;--colorDark: var(--color-red-1)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:0;font:inherit;text-transform:capitalize;padding:1rem 4rem 1rem 1rem;background:var(--arrow-icon) no-repeat right .8em center / 1.4em,linear-gradient(#000 90%,var(--colorDark) 10%);color:#fff;color:#f4f4f4;cursor:pointer;border-radius:.5em;border:2px solid var(--colorDark)}select::-ms-expand{display:none}select:focus{outline:none}select option{color:inherit;background-color:var(--option-bg)}.piano-keys{display:flex;justify-content:center;list-style:none;margin:0;padding:0}.piano-keys .key{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;text-transform:uppercase}.piano-keys .black{z-index:2;width:44px;height:140px;margin:0 -22px;border-radius:0 0 5px 5px;background:linear-gradient(#333,#000)}.piano-keys .black:active{box-shadow:inset -5px -10px 10px #ffffff1a;background:linear-gradient(to bottom,#000,#434343)}.piano-keys .key.black[data-active=true]:active{background:linear-gradient(to bottom,var(--piano-color-active) 0%,#eee 100%)}.piano-keys .white{height:230px;width:70px;border-radius:8px;border:1px solid #000;background:linear-gradient(var(--color-white-1) 96%,#eee 4%);color:#000}.piano-keys .white:active{box-shadow:inset -5px 5px 20px #0003;background:linear-gradient(to bottom,#fff,#eee)}.piano-keys .key.white[data-active=true]:active{background:linear-gradient(to bottom,var(--piano-color-active) 0%,#eee 100%)}.piano-keys .key span{position:absolute;bottom:20px;width:100%;font-size:var(--piano-key-font-size);text-align:center}.piano-keys .key.hide span{display:none}.piano-keys .white span{color:var(--color-dark-1)}.piano-keys .black span{bottom:13px;color:var(--piano-color-primary)}.piano-keys .key[data-active=true]{background:var(--piano-color-active);box-shadow:#0000001f 0 1px 3px,#0000003d 0 1px 2px;color:var(--piano-color-secondary)}.piano-keys .key[data-active=true] span{color:var(--piano-color-secondary)}.piano-keys .key[data-iskey=true]{background:var(--piano-color-isKey);text-decoration:underline}@media screen and (max-width: 815px){.wrapper{padding:25px}header{flex-direction:column}header :where(h2,.column){margin-bottom:13px}.volume-slider input{max-width:100px}.piano-keys{margin-top:20px}.piano-keys .key:where(:nth-child(9),:nth-child(10)){display:none}.piano-keys .black{height:100px;width:40px;margin:0 -20px}.piano-keys .white{height:180px;width:60px}}@media screen and (max-width: 767px){.piano-keys .white{width:50px}}@media screen and (max-width: 375px){.piano-keys .white,.piano-keys .black{width:40px}}.scale-row{flex-wrap:wrap;justify-content:center}.scale-row .scale-note{align-items:center;background-color:var(--color-white-1);border-radius:8px 8px 0 0;color:var(--color-dark-1);display:flex;font-size:2rem;font-weight:700;min-height:2rem;justify-content:center;width:5rem}.scale-row .scale-numeral{border:4px solid var(--color-white-1);border-radius:0 0 8px 8px;border-top:none;display:flex;justify-content:center;min-height:1rem}.scale-row p{margin:0}.copy-button{background:none;border:none;cursor:pointer;color:var(--color-white-1);display:flex;flex-direction:column;justify-content:center;align-items:center;transition:.1s ease-in-out}.copy-button[data-copied=true]{color:var(--color-green-4)}:root{--color-white-1: #fbf3fb;--color-dark-1: #030103;--color-purple-1: #522258;--color-red-1: #8C3061;--color-red-2: #C63C51;--color-red-3: #D95F59;--color-red-4: #e79b97;--color-green-4: #97e79b;--piano-color-primary: #f5f5f5;--piano-color-secondary: #373737;--piano-color-active: #e7c8c8;--piano-color-active: var(--color-red-4);--piano-color-isKey: #c47575;--piano-color-isKey: var(--color-red-3)}html,body,#root{height:100%;margin:0;padding:0;width:100%;align-items:center;display:flex;flex-direction:column;justify-content:center}body{background:var(--color-dark-1);color:var(--color-white-1);font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;display:flex}h1,h2,h3,h4,h5,h6{font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;margin:0}p{margin:0}.p-16{padding:1rem}.flex{display:flex}.flex-column{flex-direction:column}.flex-center{align-items:center;justify-content:center}.flex-start{align-items:flex-start;justify-content:flex-start}.flex-wrap{flex-wrap:wrap}.gap-4{gap:.25rem}.gap-8{gap:.5rem}.gap-16{gap:1rem}.gap-32{gap:2rem}@media (min-width: 768px){.md-justify-center{justify-content:center}.md-justify-start{justify-content:flex-start}.md-align-center{align-items:center}.md-flex-center{align-items:center;justify-content:center}.md-gap-4{gap:.25rem}.md-gap-8{gap:.5rem}.md-gap-16{gap:1rem}.md-gap-32{gap:2rem}}