:root{--white:#fff;--black:#000;--peach:#fff0d2;--fucsia:#f94f73;--gray:#333333;--light-gray:#e9e8eb;--dark-gray:#c4c1c8}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;src:local(''),url('../fonts/ibm-plex-sans-v8-latin-300.woff2') format('woff2'),url('../fonts/ibm-plex-sans-v8-latin-300.woff') format('woff')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;src:local(''),url('../fonts/ibm-plex-sans-v8-latin-regular.woff2') format('woff2'),url('../fonts/ibm-plex-sans-v8-latin-regular.woff') format('woff')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;src:local(''),url('../fonts/ibm-plex-sans-v8-latin-500.woff2') format('woff2'),url('../fonts/ibm-plex-sans-v8-latin-500.woff') format('woff')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;src:local(''),url('../fonts/ibm-plex-sans-v8-latin-700.woff2') format('woff2'),url('../fonts/ibm-plex-sans-v8-latin-700.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local(''),url('../fonts/open-sans-v18-latin-regular.woff2') format('woff2'),url('../fonts/open-sans-v18-latin-regular.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local(''),url('../fonts/open-sans-v18-latin-italic.woff2') format('woff2'),url('../fonts/open-sans-v18-latin-italic.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:local(''),url('../fonts/open-sans-v18-latin-600.woff2') format('woff2'),url('../fonts/open-sans-v18-latin-600.woff') format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local(''),url('../fonts/open-sans-v18-latin-700.woff2') format('woff2'),url('../fonts/open-sans-v18-latin-700.woff') format('woff')}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-print-color-adjust:exact !important;color-adjust:exact !important;print-color-adjust:exact !important}::selection{background:var(--fucsia)}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}h1,h2,h3,h4,p,ul,ol{display:block;font-size:inherit}img{max-width:100%;height:auto;border:0}a{color:inherit;transition:.2s;outline:0;cursor:pointer}body{font-family:'IBM Plex Sans',sans-serif;font-size:16px;line-height:24px;color:#333;font-weight:400;background:#fff;overflow-y:hidden;height:100vh}table{width:100%;border-collapse:collapse}table tr th{padding:20px;color:#fff}table tr td{padding:15px 20px}.arrow-left{transform:rotate(-180deg)}b,strong{font-weight:700}p:not(:last-child){margin-bottom:30px}.list{margin-bottom:30px}.list li{margin:0 0 0 20px}.svg-in-text{vertical-align:-6px;margin:0 3px}h1{font-family:'IBM Plex Sans',sans-serif;font-size:2.6rem;line-height:1em;font-weight:300;letter-spacing:-1px;margin:25px 0}h2{font-family:'IBM Plex Sans',sans-serif;font-size:1.6rem;line-height:1em;font-weight:400;letter-spacing:-1px;margin:20px 0;color:#67BB99}.btn{display:inline-flex;justify-content:center;align-items:center;background-color:#333;color:#fff !important;text-decoration:none;transition:.3s;cursor:pointer;outline:0;border:3px solid transparent;position:relative;overflow:hidden;font-family:inherit;font-size:1rem;line-height:15px;padding:7px 15px;border-radius:3px}.btn[disabled]{opacity:.5;pointer-events:none}.btn:hover{opacity:.6}.btn-light{border:1px solid #67BB99;border-radius:99px;background-color:transparent;color:#67BB99 !important;text-transform:uppercase;font-size:.8rem}.btn-light img{width:16px;margin-right:6px}input[type=checkbox].switch{height:0;width:0;visibility:hidden;position:absolute}input[type=checkbox].switch+label{cursor:pointer;text-indent:70px;height:30px;display:inline-block;position:relative;user-select:none;transition:.3s}input[type=checkbox].switch+label:before{content:'';cursor:pointer;text-indent:70px;width:60px;height:30px;background-color:var(--black);display:block;border-radius:100px;position:absolute;transition:.3s}input[type=checkbox].switch+label:after{content:'';position:absolute;top:3px;left:4px;width:24px;height:24px;background:#fff;border-radius:90px;transition:.3s}input[type=checkbox].switch+label:active:after{width:30px}input[type=checkbox].switch.switch-right+label{text-indent:0px}input[type=checkbox].switch.switch-right+label:after{right:calc(-28px - 16px);left:auto}input[type=checkbox].switch.switch-right+label:before{right:calc(-60px - 16px)}input[type=checkbox].switch.switch-right+label:active:after{width:30px;right:calc(-33px - 16px)}input[type=checkbox].switch:checked+label:before{background-color:var(--fucsia)}input[type=checkbox].switch:checked+label:after{left:calc(60px - 3px);transform:translateX(-100%)}input[type=checkbox].switch:checked.switch-right+label:after{right:calc(-96px);left:auto}input[type=checkbox].switch:checked.switch-right+label:active:after{right:calc(-102px)}body.modal-overflow{overflow:hidden}#modal_container{display:flex;align-items:center;justify-content:center;position:fixed;width:100%;height:100vh;top:0;left:0;background:rgba(0,0,0,0.8);z-index:1000;transition:.6s;opacity:0;visibility:hidden}#modal_container.is-visible{opacity:1;visibility:visible;transition:opacity .3s 0s,visibility 0s 0s}#modal_container.is-visible #modal_window{opacity:1;transform:translate(0, 0)}#modal_container #modal_window{border-radius:4px;background:#fff;width:100vw;max-width:300px;max-height:100vh;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);overflow:hidden;text-align:center;transform:translate(0, -20px);opacity:0;transition:opacity 0s 0s,transform .3s 0s}#modal_container #modal_content{padding:25px 25px 20px 25px;overflow-y:auto;max-height:calc(100vh - 64px);text-align:center}#modal_container #modal_actions{padding-bottom:25px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}#modal_container #modal_actions>*{margin:0 3px 5px}.t-left{text-align:left}.t-right{text-align:right}.t-center{text-align:center}.t-white{color:#fff}.t-url{line-break:anywhere;text-decoration:underline}[hidden],.hidden{display:none !important}.visible{display:block !important}[disabled],.disabled{opacity:.5;pointer-events:none}.no-select{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}::-webkit-input-placeholder{color:#ccc}:-moz-placeholder{color:#ccc}::-moz-placeholder{color:#ccc}:-ms-input-placeholder{color:#ccc}.disable-scrollbars::-webkit-scrollbar{width:0px;background:transparent}.disable-scrollbars{scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:var(--light-gray)}::-webkit-scrollbar-thumb{background:var(--fucsia)}::-webkit-scrollbar-thumb:hover{background:var(--fucsia)}input[type=range]{-webkit-appearance:none;width:100%;background:transparent}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:2px;cursor:pointer;background:var(--fucsia);border-radius:5px}input[type=range]::-moz-range-track{width:100%;height:2px;cursor:pointer;background:var(--fucsia);border:none}input[type=range]::-ms-track{width:100%;height:2px;cursor:pointer;background:transparent;border-color:transparent;border:none;color:transparent}input[type=range]::-webkit-slider-thumb{height:30px;width:10px;border-radius:8px;background:var(--fucsia);cursor:pointer;-webkit-appearance:none;margin-top:-15px;border:none}input[type=range]::-moz-range-thumb{height:30px;width:10px;border-radius:8px;background:var(--fucsia);cursor:pointer;border:none}input[type=range]::-ms-thumb{height:30px;width:10px;border-radius:8px;background:var(--fucsia);cursor:pointer;border:none}input[type=range]::-ms-fill-lower{border-radius:10px}input[type=range]::-ms-fill-upper{background:var(--fucsia);border-radius:10px}input[type=range]:focus::-ms-fill-lower{background:var(--fucsia)}.app-wrapper{height:100%;width:100%;position:relative;display:flex;justify-content:center;align-items:center;background:#f0f0f0;position:fixed;top:0}#app{display:flex;flex-direction:column;justify-content:space-between;width:1280px;min-width:1280px;max-width:1280px;height:720px;z-index:1;overflow:hidden;background-color:#fff;box-shadow:0 0 20px #d3d3d3}.top-bar{height:125px;background-color:var(--peach);border-bottom:5px solid var(--fucsia);position:relative;display:flex;justify-content:space-between}.top-bar .title{background-color:var(--white);border-radius:8px;padding:8px 16px;margin:16px;align-self:flex-start;border:none;font-family:'IBM Plex Sans';width:200px;max-width:200px;max-height:80px;height:2em}.top-bar .title:focus{outline:none}.top-bar .instruments{display:flex;padding:16px 0 20px;background-color:var(--peach)}.top-bar .instruments .instrument{transition:transform .3s cubic-bezier(.39, .57, 0, 1);margin-right:16px;will-change:transform}.top-bar .instruments .instrument:hover{transform:scale(1.1)}.top-bar .actions{display:flex;flex-wrap:wrap;width:180px;overflow:hidden}.top-bar .actions .action{width:60px;height:60px;cursor:pointer;border-left:1px solid var(--white);border-bottom:1px solid var(--white)}.top-bar .actions .action img{transition:.3s cubic-bezier(.39, .57, 0, 1);will-change:scale}.top-bar .actions .action:hover img{transform:scale(1.2)}.instrument{height:70px;width:70px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.instrument:after{content:attr(data-text);color:black;position:absolute;height:25px;bottom:-25px;text-transform:uppercase;width:100%;text-align:center;font-family:'IBM Plex Sans';font-weight:500;font-size:14px}.instrument img{height:70px !important;width:70px !important}.time-signature{position:absolute;bottom:30px;user-select:none}.time-signature select{align-self:flex-end}.time-signature .time-signature-popup{display:flex;background-color:var(--light-gray);border-radius:4px;padding:12px 16px;position:absolute;top:-100px;height:80px;left:-30px;z-index:20;visibility:hidden;opacity:0;transition:.3s cubic-bezier(.39, .57, 0, 1);transform:translateY(5px)}.time-signature .time-signature-popup.is-visible{visibility:visible;opacity:1;transform:translateY(0)}.time-signature .time-signature-popup:before{content:'';position:absolute;bottom:-30px;left:60px;z-index:1;border:solid 15px transparent;border-top-color:var(--light-gray)}.time-signature .time-signature-popup .fraction{cursor:pointer;transition:.3s cubic-bezier(.39, .57, 0, 1)}.time-signature .time-signature-popup .fraction:not(:first-child){margin-left:24px}.time-signature .time-signature-popup .fraction:hover{color:var(--fucsia)}.time-signature .time-signature-popup .fraction:hover .fraction-denominator{border-color:var(--fucsia)}.time-signature .time-signature-fraction{display:flex;align-items:center;height:90px;cursor:pointer;border:2px solid transparent;border-radius:8px;padding:4px 8px;background-color:var(--white);transition:.3s cubic-bezier(.39, .57, 0, 1)}.time-signature .time-signature-fraction:hover,.time-signature .time-signature-fraction.is-selected{border-color:var(--fucsia)}.time-signature .time-signature-fraction img{margin-right:8px;width:20px}.time-signature .time-signature-fraction .fraction{align-self:center}.time-signature.is-simplified-version .fraction-denominator{background-color:var(--gray);width:20px;height:20px;color:transparent;margin-bottom:5px;border-color:transparent}.time-signature.is-simplified-version .time-signature-popup .fraction:hover{border-color:var(--fucsia)}.time-signature.is-simplified-version .time-signature-popup .fraction:hover .fraction-denominator{background-color:var(--fucsia)}.fraction{display:inline-flex;flex-direction:column;font-size:30px;font-weight:500;align-self:flex-end}.fraction .fraction-numerator{text-align:center}.fraction .fraction-denominator{border-top:2px solid black;margin-top:6px;padding-top:4px;text-align:center}.composition{display:flex;justify-content:center;box-shadow:0 0 12px rgba(0,0,0,0.1);z-index:1;position:relative;height:375px}.composition .prev,.composition .next{width:30px;cursor:pointer;transition:transform .3s cubic-bezier(.39, .57, 0, 1);margin-bottom:96px;opacity:0;transition:opacity .3s cubic-bezier(.39, .57, 0, 1)}.composition .prev.is-visible,.composition .next.is-visible{opacity:1}.composition .prev:hover,.composition .next:hover{transform:scale(1.1)}.composition .composition-left{width:20%;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;margin-right:16px;position:relative}.composition .composition-center{padding-top:80px;margin:0 16px 60px 16px;position:relative;flex-shrink:0}.composition .composition-center .measure{height:220px;width:100%;display:flex}.composition .composition-center .measure .measure-eighth{flex-grow:1;height:20px;background-color:var(--light-gray);display:flex;justify-content:center;align-items:center;position:relative}.composition .composition-center .measure .measure-eighth.measure-quarter{background-color:var(--dark-gray)}.composition .composition-center .measure .measure-eighth.current-eighth:before{content:'';position:absolute;top:-62px;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:20px solid var(--fucsia)}.composition .composition-center .measure .measure-eighth:first-child{margin-left:0}.composition .composition-center .measure .measure-eighth:last-child{margin-right:0}.composition .composition-center .measure .measure-eighth .instrument{width:80px;position:absolute;top:-25px;margin:0}.composition .composition-center .measure .measure-eighth .instrument:after{display:none}.composition .composition-center .measure .measure-eighth .instrument img{height:100%;filter:drop-shadow(0 0 16px var(--dark-gray))}.composition .composition-center .measure .measure-eighth .measure-drag{width:100%;height:350px;position:absolute;top:-50px;bottom:0}.composition .composition-center .sheet{width:100%;position:absolute;bottom:0}.composition .composition-right{width:20%;display:flex;align-items:center;margin-left:16px}.composition .composition-right .next{margin-right:40px}.composition .composition-right .sheet-actions{display:flex;flex-direction:column}.composition .composition-right .sheet-actions .sheet-action{cursor:pointer;transition:.3s cubic-bezier(.39, .57, 0, 1);width:35px;margin-bottom:16px;will-change:transform}.composition .composition-right .sheet-actions .sheet-action:hover{transform:scale(1.2)}.thumbs{height:130px;width:100%;display:flex;background-color:var(--light-gray);overflow-x:auto;padding:0 16px;position:absolute;bottom:90px}.thumbs .thumb{height:auto !important;display:flex;flex-direction:column;cursor:pointer;padding-top:25px;position:relative}.thumbs .thumb:after{content:attr(data-measure);position:absolute;top:4px;left:12px}.thumbs .thumb .measure-drag{display:none}.thumbs .thumb.thumb-current{background-color:var(--white)}.thumbs .thumb .thumb-instruments{display:flex}.thumbs .thumb .thumb-instruments .measure-eighth{width:20px;height:20px;margin:5px;flex-grow:1;display:flex;justify-content:center}.thumbs .thumb .thumb-instruments .measure-eighth .instrument{height:80%;width:80%;display:flex;justify-content:center;align-items:center;margin:0}.thumbs .thumb:not(:last-child) .thumb-sheet:before{border-right:none}.thumbs .thumb-sheet{display:flex;position:relative;width:100%}.bottom-bar{height:90px;background-color:var(--black);display:flex;justify-content:space-between;align-items:center;position:absolute;bottom:0;width:100%}.bottom-bar .bpm{display:flex;align-items:center;margin-left:24px}.bottom-bar .bpm .metronome{height:30px;margin-right:16px}.bottom-bar .bpm .bpm-slider{margin-right:16px;width:200px}.bottom-bar .bpm .bpm-label{color:var(--white);width:50px}.bottom-bar .play{background-color:var(--fucsia);border-radius:100%;border:none;height:70px;width:70px;cursor:pointer;background-image:url(../img/icons/play.svg);background-size:20px;background-repeat:no-repeat;background-position:center;transition:.3s cubic-bezier(.39, .57, 0, 1)}.bottom-bar .play.pause{background-image:url(../img/icons/pause.svg)}.bottom-bar .play:hover{background-size:24px}.bottom-bar .logo-container{display:flex;height:100%;padding:24px 24px}.bottom-bar .logo-container .logo-title{color:var(--white);font-weight:bold;margin-right:16px;text-align:right;line-height:1em;align-self:flex-end}.bottom-bar .logo-container .logo{height:40px}.sheet{display:flex;position:relative}.sheet .current-measure{position:absolute;top:0}.sheet .sheet-note{overflow:visible;display:flex;justify-content:flex-start;position:relative}.sheet .sheet-note.end:before{content:'';height:10px;background-color:red;position:absolute;top:0;right:42%;width:100%;z-index:20}.sheet .sheet-note img{position:relative}.sheet .sheet-note.sheet-note-center{justify-content:center}.sheet:before{content:'';width:100%;position:absolute;bottom:-12%;border-left:4px solid black;left:0;height:50%;border-right:4px solid black}.sheet:after{content:'';height:2%;position:absolute;bottom:10%;width:100%;background-color:black}.options-container{width:0%;overflow:hidden;width:100%;display:block;height:100%;position:fixed;top:0;right:0;visibility:hidden;z-index:20}.options-container .options-bkg{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--black);opacity:0;transition:.6s cubic-bezier(.39, .57, 0, 1)}.options-container .options{position:absolute;top:0;right:0;height:100%;width:0%;background-color:var(--peach);padding:48px 0;transition:.6s cubic-bezier(.39, .57, 0, 1);overflow:hidden;opacity:0}.options-container .options .options-close{position:absolute;font-size:2em;right:26px;top:26px;cursor:pointer;color:var(--fucsia);font-weight:100}.options-container .options .options-title{color:var(--fucsia);font-size:1.2em;margin-bottom:40px}.options-container .options .options-subtitle{font-size:1.2em;font-weight:500;margin-bottom:16px;margin-top:40px}.options-container .options .options-text{color:var(--fucsia);font-weight:500;width:400px}.options-container .options .option{margin-bottom:16px;font-size:1.1rem}.options-container .options .zoom-container{display:flex;align-items:center;height:40px}.options-container .options .zoom-container .zoom-slider{display:inline-block;width:230px;position:relative;margin:0 16px}.options-container .options .zoom-container .zoom-label{font-size:1.4rem;line-height:1.2em;padding:0 4px;cursor:pointer;user-select:none}.options-container.is-open{visibility:visible}.options-container.is-open .options-bkg{opacity:.4}.options-container.is-open .options{width:40%;padding:48px 48px;opacity:1}.training{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--dark-gray)}.print-only{display:none}@media print{@page{size:A4 portrait}.app-wrapper{height:auto;display:block;background-color:#fff}.app-wrapper #app{width:100%;min-width:unset;max-width:none;height:auto;box-shadow:none;overflow:visible;transform:scale(1) !important}.print-only{display:block}.print-header{position:relative}.print-header .print-title{font-size:2rem;margin-bottom:40px;line-height:1.1em;padding-left:48px;display:inline-block}.print-header .print-fraction{position:absolute;left:0;bottom:-120px;font-weight:normal;z-index:10}.top-bar,.composition,.bottom-bar{display:none}.thumbs{background-color:white;width:100% !important;height:auto;overflow:none;flex-wrap:wrap;padding:0 48px 0;position:relative;overflow:visible;bottom:auto}.thumbs .thumb-sheet{width:100% !important}.thumbs[data-zoom="20"] .thumb{width:20%}.thumbs[data-zoom="25"] .thumb{width:25%}.thumbs[data-zoom="33"] .thumb{width:33.33%}.thumbs[data-zoom="50"] .thumb{width:50%}.thumbs[data-zoom="100"] .thumb{width:100%}}