.glockenspiel{display:flex;justify-content:space-between;align-items:center}.glockenspiel-bar-container{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;width:100%;height:100%;margin:0 3px;padding:8px 0;-webkit-user-select:none;user-select:none;touch-action:none}.glockenspiel-bar-container:first-of-type{margin-left:0}.glockenspiel-bar{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border-radius:1px;border:1px solid rgba(0,0,0,.2);box-shadow:0 4px 8px #00000026;transition:filter .15s ease;cursor:pointer}.glockenspiel-bar-label-container{width:100%;max-width:40px;display:flex;justify-content:center;align-items:center}.glockenspiel-bar-label{text-align:center;font-weight:700;font-size:1.2rem;transform-origin:center center;white-space:nowrap;will-change:transform;width:max-content;height:max-content}.enharmonic-container{display:flex;flex-direction:column;align-items:center;line-height:1.1;width:100%}.enharmonic-primary,.enharmonic-secondary{width:100%;white-space:nowrap;text-overflow:ellipsis}.enharmonic-primary{font-weight:700}.enharmonic-primary,.enharmonic-secondary{font-size:inherit}.glockenspiel-bar-shortcut{text-align:center;font-size:1.2rem;margin-top:18px;color:#555}.glockenspiel-bar-wooden{color:#000000b3;opacity:.7;background-color:#b9bbbd;background-size:cover;background-position:center;filter:brightness(.9);transition:filter .35s ease}.glockenspiel-bar-wooden:hover{filter:brightness(1.1)}.glockenspiel-bar-wooden.glockenspiel-note-0{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-1.png)}.glockenspiel-bar-wooden.glockenspiel-note-1{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-2.png)}.glockenspiel-bar-wooden.glockenspiel-note-2{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-3.png)}.glockenspiel-bar-wooden.glockenspiel-note-3{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-4.png)}.glockenspiel-bar-wooden.glockenspiel-note-4{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-5.png)}.glockenspiel-bar-wooden.glockenspiel-note-5{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-1.png)}.glockenspiel-bar-wooden.glockenspiel-note-6{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-2.png)}.glockenspiel-bar-wooden.glockenspiel-note-7{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-3.png)}.glockenspiel-bar-wooden.glockenspiel-note-8{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-4.png)}.glockenspiel-bar-wooden.glockenspiel-note-9{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-5.png)}.glockenspiel-bar-wooden.glockenspiel-note-10{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-1.png)}.glockenspiel-bar-wooden.glockenspiel-note-11{background-image:url(/files/scripts/glockenspiel/samples/textures/bar-2.png)}.glockenspiel-bar-colored{color:#fff;transition:filter .35s ease}.glockenspiel-bar-colored:hover{filter:brightness(.9)}.glockenspiel-bar-colored.glockenspiel-note-0{background-color:#f44336}.glockenspiel-bar-colored.glockenspiel-note-1{background-color:#fa6e1b}.glockenspiel-bar-colored.glockenspiel-note-2{background-color:#ff9800}.glockenspiel-bar-colored.glockenspiel-note-3{background-color:#ffad04}.glockenspiel-bar-colored.glockenspiel-note-4{background-color:#ffc107}.glockenspiel-bar-colored.glockenspiel-note-5{background-color:#4caf50}.glockenspiel-bar-colored.glockenspiel-note-6{background-color:#26a36c}.glockenspiel-bar-colored.glockenspiel-note-7{background-color:#009688}.glockenspiel-bar-colored.glockenspiel-note-8{background-color:#02a0be}.glockenspiel-bar-colored.glockenspiel-note-9{background-color:#03a9f4}.glockenspiel-bar-colored.glockenspiel-note-10{background-color:#3572d6}.glockenspiel-bar-colored.glockenspiel-note-11{background-color:#673ab7}@keyframes shake{0%{transform:translateY(0)}20%{transform:translateY(-2px)}40%{transform:translateY(2px)}60%{transform:translateY(-1px)}80%{transform:translateY(1px)}to{transform:translateY(0)}}.glockenspiel-bar-shake{animation:shake .3s ease-in-out}@media screen and (max-width: 480px){.glockenspiel .glockenspiel-bar-shortcut,.glockenspiel .glockenspiel-bar-container:nth-child(9),.glockenspiel .glockenspiel-bar-container:nth-child(10),.glockenspiel .glockenspiel-bar-container:nth-child(11),.glockenspiel .glockenspiel-bar-container:nth-child(12),.glockenspiel .glockenspiel-bar-container:nth-child(13){display:none}.glockenspiel.chromatic .glockenspiel-bar-container:nth-child(8),.glockenspiel.chromatic .glockenspiel-bar-container:nth-child(9),.glockenspiel.chromatic .glockenspiel-bar-container:nth-child(10){display:block}}.controls-container{display:flex;align-items:center;padding-bottom:22px}button{font-family:Open Sans,sans-serif;font-size:14px;background:#f8f8f8;border-radius:4px;border:1px solid #eee;color:#000;transition:.25s ease;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;margin-right:8px;padding:8px 14px;height:37px}button.active{background-color:#e4e4e4;border-color:#dadada}button:hover{border-color:#dadada;box-shadow:0 5px 10px #0003}.drop-down{position:relative}.drop-down *{-webkit-user-select:none;user-select:none}.drop-down ul{min-width:90px;position:absolute;display:none;z-index:11;left:1px;padding-bottom:0;background-color:#fff;border-radius:4px;box-shadow:0 8px 16px #0003;overflow-y:auto}.drop-down ul.active{display:block}.drop-down ul li:first-child{border-radius:4px 4px 0 0}.drop-down ul li:last-child{border-radius:0 0 4px 4px}.drop-down ul li{font-size:13px;font-family:Open Sans,sans-serif;padding:10px 14px;cursor:pointer;text-align:left;white-space:nowrap}.drop-down .drop-down-scales li:hover,.drop-down .drop-down-colors li:hover{background-color:#e1e1e1}.drop-down .drop-down-root span:hover{background-color:#e4e4e4;transition:all .25s ease}.drop-down ul li.active{background-color:#eee}.drop-down .drop-down-root li:nth-child(2),.drop-down .drop-down-root li:nth-child(4),.drop-down .drop-down-root li:nth-child(7),.drop-down .drop-down-root li:nth-child(9),.drop-down .drop-down-root li:nth-child(11){background-color:#f5f2f2}.drop-down .drop-down-root li:nth-child(2) span:first-child,.drop-down .drop-down-root li:nth-child(4) span:first-child,.drop-down .drop-down-root li:nth-child(7) span:first-child,.drop-down .drop-down-root li:nth-child(9) span:first-child{border-right:1px solid #e9e9e9}.drop-down .drop-down-root li{display:flex;align-items:center;justify-content:space-between;padding:0}.drop-down .drop-down-root span{width:100%;text-align:center;padding:7px 0}@font-face{font-family:Bravura;src:url(/files/fonts/Bravura.woff2) format("woff2"),url(/files/fonts/Bravura.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}.accidental{font-family:Bravura;font-style:normal;font-weight:400;font-size:18px;vertical-align:middle;margin-left:1px;line-height:0;top:-1px;position:relative}.glockenspiel-bar-label .accidental-flat{font-size:2.5rem;top:1px}.glockenspiel-bar-label .accidental{font-size:1.5rem}.glockenspiel-bar-label .accidental-double-sharp{font-size:2.5rem}.accidental-triple-flat,.accidental-double-flat{top:2.5px}.accidental-flat{font-size:1rem;top:1.5px}