.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:.5rem 2rem .5rem .5rem;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)}@media (min-width: 768px){select{padding:1rem 4rem 1rem 1rem}}.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{width:100%;display:flex;flex-wrap:wrap;justify-content:space-around}.scale-row .scale-note{align-items:center;background-color:var(--color-white-1);border-radius:4px 4px 0 0;color:var(--color-dark-1);display:flex;font-size:1rem;font-weight:700;justify-content:center;width:2.5rem}.scale-row .scale-numeral{font-size:.85rem;border:2px solid var(--color-white-1);border-radius:0 0 4px 4px;border-top:none;display:flex;justify-content:center;min-height:1rem}.scale-row p{margin:0}@media (min-width: 768px){.scale-row{justify-content:space-between}.scale-row .scale-note{width:3rem;font-size:1.25rem}.scale-row .scale-numeral{font-size:.85rem}}@media (min-width: 1024px){.scale-row{gap:.5rem}.scale-row .scale-note{width:4rem;font-size:1.5rem}.scale-row .scale-numeral{font-size:1rem}}.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)}.synth-controls{--synth-conrol-color: var(--color-dark-4);width:100vw;height:12.5rem;position:absolute;bottom:0;left:0;background-color:var(--color-dark-2);border-top:2px solid var(--color-dark-4);color:var(--color-white-1)}.synth-controls .synth-controls-wrapper{display:flex;flex-direction:row;gap:1rem;padding:1rem}.synth-controls .synth-controls-wrapper .control{display:flex;flex-direction:column;align-items:center;border:2px solid var(--synth-conrol-color);border-radius:.25rem;height:100%;min-width:5rem;gap:.5rem}.synth-controls .synth-controls-wrapper .control header{width:100%;background-color:var(--synth-conrol-color);justify-content:center;padding:.25rem 0}.synth-controls .synth-controls-wrapper .control .content{flex-grow:1;padding:.5rem;justify-items:center;align-content:center}.note-button{background-color:transparent;border:2px solid var(--color-white-1);color:inherit;cursor:pointer;font:inherit;padding:.5rem 1rem;text-align:center;background-color:var(--color-white-1);border-radius:4px;color:var(--color-dark-1);font-size:1rem;font-weight:700;transition:all .1s ease-in}.note-button.selected{background-color:var(--piano-color-active);border-color:var(--color-white-2);color:var(--color-dark-1)}.note-button.selected.root{background-color:var(--piano-color-isKey)}.note-button:hover{color:var(--color-white-1);background-color:var(--color-dark-2);border-color:var(--color-white-1)}.note-button:hover.selected{background-color:var(--piano-color-active);border-color:var(--color-white-2);color:var(--color-dark-1)}.note-button:active{color:var(--color-white-1);background-color:var(--color-dark-4);border-color:var(--color-white-2)}.scales-page{display:flex;flex-direction:column}.scales-page header{display:flex;flex-direction:column;max-width:50rem;align-self:center}.scales-page .clear-button{margin:1rem 0;max-width:fit-content;align-self:flex-end}.scales-page .scales-results{padding:1rem 0;max-width:80rem}.scales-page .scales-container{display:flex;flex-wrap:wrap;gap:.25rem;overflow-y:auto}.scales-page .scale-card{display:flex;flex-direction:column;color:var(--color-white-1);background-color:var(--color-dark-2);border:1px solid var(--color-dark-3);border-radius:8px;box-shadow:var(--box-shadow);padding:1rem;flex-grow:1;gap:.25rem;text-decoration:none;transition:all .1s ease-in-out}.scales-page .scale-card:hover{background-color:var(--color-dark-3)}.mini-piano{display:flex;flex-direction:row;position:relative}.mini-piano .key{background-color:var(--color-white-1)}.mini-piano .key.white{outline:1px solid var(--color-dark-1);width:1rem;height:3rem}.mini-piano .key.black{width:.33rem;height:2rem;z-index:2;margin:0 -.15rem;outline:1px solid var(--color-dark-1);background-color:var(--color-dark-1)}.mini-piano .key[data-active=true]{background-color:var(--piano-color-active)}.mini-piano .key[data-isroot=true]{background-color:var(--piano-color-isKey)}:root{--color-white-1: #fbf3fb;--color-white-2: #f5f5f5;--color-white-3: #e0e0e0;--color-dark-1: #030103;--color-dark-2: #1a1a1a;--color-dark-3: #2b2b2b;--color-dark-4: #3c3c3c;--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: var(--color-red-4);--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}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}main{padding:2rem;justify-content:center;max-width:-webkit-fill-available;height:100%}@media screen and (max-width: 768px){main{padding:1rem}}.container{height:100%}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}.p-32{padding:2rem}.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}.width-m-40{width:40rem;max-width:40rem}@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}}