body,html{margin:0;padding:0;height:100vh;width:100vw;font-family:sans-serif;touch-action:none}*,:after,:before{box-sizing:border-box}#root{height:100vh;width:100vw}#root,.app{touch-action:manipulation}.app{width:100%;height:100%}.instrument-active{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10}.ui{z-index:100;color:#fff;position:absolute;top:0;left:0}.xylophone{height:100%}.ui{position:fixed;top:0;left:0;width:100%;height:0;overflow:visible}.ui-header{height:0;display:flex;justify-content:flex-end}.ui-header h3{font-weight:400;font-size:2.8rem;padding:1.5rem 2rem 1rem 1rem;border-radius:.25rem;margin:0;display:inline-block;text-shadow:2px 3px 2px #de3249;user-select:none}.ui-footer{position:fixed;bottom:0;width:100%;overflow:visible}.ui-footer .action-links{float:right}@media (orientation:landscape){.ui-portrait-mode{display:none;visibility:hidden}}@media (orientation:portrait){.ui-portrait-mode{display:flex;visibility:visible}}.ui-portrait-mode{background:#061639;z-index:1000;position:fixed;top:0;right:0;left:0;bottom:0;color:#fff;display:flex;flex-direction:column}.ui-portrait-mode .text-prompt{padding:2rem 1rem 1rem;text-align:center;opacity:.8}.ui-portrait-mode .text-prompt h2{padding-bottom:0;margin-bottom:1rem}.ui-portrait-mode .text-prompt small{opacity:.6;display:block}.ui-portrait-mode .device-wrapper{display:flex;align-items:center;justify-content:center;flex:1}@keyframes rotateElement{0%{transform:rotate(0deg)}25%{transform:rotate(0deg)}75%{transform:rotate(-90deg)}to{transform:rotate(-90deg)}}.ui-portrait-mode .device-wrapper svg{width:60%;animation-duration:1s;animation-name:rotateElement;animation-iteration-count:infinite;animation-direction:alternate}.ui-overlay{position:fixed;top:0;right:0;left:0;bottom:0;z-index:500}.ui-overlay .ui-overlay__window{background:#fff;position:absolute;top:2rem;right:2rem;bottom:2rem;left:2rem;border-radius:.25rem;box-shadow:10px 10px 1rem #000;display:flex;flex-direction:column;color:#000}.ui-overlay .ui-overlay__background{position:absolute;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,.5)}.ui-overlay .ui-overlay__actions{position:absolute;top:0;right:0;padding:1rem}.ui-overlay .ui-overlay__actions .action-link{display:inline-block;min-width:2rem}.ui-overlay .ui-overlay__header h2{padding:0 1.5rem;font-weight:400}.ui-overlay .ui-overlay__body{flex:1;padding:0 1.5rem}ul.action-links{list-style-type:none;padding:1.45rem 0 0;position:relative;display:flex;color:#fff}ul.action-links li{padding-right:1rem}ul.action-links li a{position:relative;display:inline-block;color:hsla(0,0%,100%,.3)}ul.action-links li a:hover{color:hsla(0,0%,100%,.6)}ul.action-links li a svg{width:2rem;height:2rem;display:inline-block}ul.action-links li a span{position:absolute;bottom:-1em;left:0;display:inline-block;visibility:hidden}.modal-share .qr-code-wrapper{text-align:center}.modal-share canvas{margin:auto}.state-viewer{display:flex;padding-left:4.5rem;background:hsla(0,0%,100%,.233)}.state-viewer .state-viewer-toggle{height:4rem;width:4rem;display:inline-block;cursor:pointer;position:absolute;bottom:0;left:0}
/*# sourceMappingURL=/main.d3208a88.css.map */