@import"https://fonts.googleapis.com/css2?family=Indie+Flower&family=Montserrat&display=swap";.edit-mode .sheet{box-shadow:0 0 20px #000;margin-top:30px}.sheet{width:100%;height:29.7cm;padding:15px;background-color:#fff}.sheet:empty{display:none}@media screen and (max-width: 830px){.edit-mode .sheet{height:max-content;margin-top:0}}.full-score{position:relative;display:flex;padding-left:30px;margin-top:40px}.full-score.multi-instruments:before{content:"";position:absolute;left:10px;top:39px;width:10px;height:calc(100% - 52px);border:2px solid #777777;border-right:none}.human-bar-number{position:absolute;left:5px;top:-5px;font-size:20px}@media screen and (max-width: 830px){.edit-mode .full-score{padding-left:0}.edit-mode .full-score.multi-instruments:before{left:-10px}}.beat-columns{display:flex;flex-direction:column}.beat{position:relative;display:flex;align-items:flex-start;margin-top:50px}.beat:first-child{margin-top:30px}.beat[beat-type=triplet]:after{content:"3";font-size:15px;position:absolute;left:30px;top:-40px}.note{position:relative;width:20px;height:20px;cursor:pointer;box-sizing:content-box;margin-right:10px;background-size:16px 16px;background-repeat:no-repeat;background-position:center}.note img{-webkit-user-select:none;user-select:none;position:absolute;width:16px;height:16px;top:2px;left:2px}.note:before{content:"";position:absolute;left:50%;bottom:20px;height:17px;border-left:1px solid #777777;border-top:3px solid #777777}.note.selected{background-color:#a5cfac}.note:last-child:before{border-top:none}.beat[beat-type=single] .note:before{height:20px}.beat[beat-type=double] .note{margin-right:7px}.beat[beat-type=double] .note:before{width:27px}.beat[beat-type=triplet] .note{margin-right:3px}.beat[beat-type=triplet] .note:before{width:23px}.beat[beat-type=quartet] .note{margin-right:0}.beat[beat-type=quartet] .note:before{width:20px}.beat[beat-type=quartet] .note:after{content:"";position:absolute;left:50%;bottom:20px;height:12px;width:20px;border-top:3px solid #777777}.beat[beat-type=quartet] .note:last-child:after{display:none}.beat[beat-type=grace] .note:nth-of-type(1){left:16%;top:0;width:50%;height:50%}.bar{position:relative;display:flex;justify-content:flex-start;padding-left:10px}.bar:hover{background-color:#a5e7e8ac}.bar:after{content:"";margin-left:5px;border-right:2px solid #666}.bar.playing{background-color:#e2a8ff}.inject-bar-btn{position:absolute;right:-9px;bottom:0;width:20px;height:calc(100% + 17px);background-size:contain;background-repeat:no-repeat;cursor:pointer;z-index:10}.inject-bar-btn:hover{background-color:#78d18165;background-image:url(assets/svg/ui/plus-circle.svg)}.full-score>.inject-bar-btn{left:20px}.full-score>.inject-bar-btn:after{position:absolute;content:"";left:4px;bottom:0;height:calc(100% - 17px);margin-left:5px;border-right:2px dashed #666}@media screen and (max-width: 830px){.edit-mode .full-score>.inject-bar-btn{left:-5px}}.bar .delete-bar-btn{display:none}.delete-bar-btn{position:absolute;left:50%;top:-20px;min-width:0;width:30px;height:30px;background-image:url(assets/svg/ui/trash.svg);background-size:cover;cursor:pointer;border-radius:3px;transform:translate(-50%);background-color:#ffffff93;transition:background-color .1s}.bar:hover .delete-bar-btn{display:block}.delete-bar-btn:hover{background-color:#e47575}.title *{text-align:center;font-size:32px;font-weight:700}.input-label-container{position:relative;margin-top:0}.input-label-container input{position:absolute;left:0;top:0;width:100%;height:100%;font-family:Montserrat,sans-serif;display:none}.sheet .input-label-container input{font-family:Indie Flower,cursive}.input-label-container input.visible{display:block}.tempo{margin-left:40px}.tempo *{font-size:18px}.create-first-bar-btn{position:relative;background-color:#fff;color:#333;border:1px solid #333;padding-left:50px;margin-left:30px;height:50px}.create-first-bar-btn:before{content:"";background-image:url(assets/svg/ui/plus-circle.svg);background-size:contain;display:block;position:absolute;left:10px;width:30px;height:30px}@media screen and (max-width: 830px){.create-first-bar-btn{margin-left:0}}.sheets-container{width:21cm;min-height:29.7cm;margin:auto;font-family:Indie Flower,cursive;font-size:24px}@media screen and (max-width: 830px){.sheets-container.edit-mode{width:100%;min-height:0;height:max-content}}.editor{background-color:#48404d;padding-top:80px;padding-bottom:100px;font-size:24px}@media screen and (max-width: 830px){.editor{padding-top:50px;min-height:100vh}}.export-section{width:100%;max-width:350px;height:100%;margin:30px auto}.modal-wrapper{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000060;z-index:200}.modal-wrapper.modal-visible{display:block}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;overflow:auto;background-color:#fff;border-radius:3px;padding:20px;display:flex;flex-direction:column}.modal h2{text-align:center}.modal p{font-size:18px;margin-top:10px}.modal .buttons-section{display:flex;justify-content:flex-end;width:100%;margin-top:auto;gap:10px 5px}@media screen and (max-width: 700px){.modal-wrapper>.modal{width:100%;height:100vh;top:0;bottom:0;left:0;transform:none}}@media screen and (max-width: 430px){.buttons-section{flex-direction:column-reverse;gap:10px}}.create-rhythm-modal{height:350px}.preset-selection-container{display:flex;justify-content:center;align-items:center;margin-top:20px}.preset-selection-container label{width:100px;margin:7px;padding:10px 0;background-color:#dde7f8;cursor:pointer;text-align:center}.preset-selection-container input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.preset-selection-container input[type=radio]:checked+label{background-color:#528cf0}.bars-in-full-score-section{width:100%;max-width:300px;margin:10px auto}.bars-in-full-score-input{font-size:20px;padding:5px;width:100%}@media screen and (max-width: 500px){.preset-selection-container{flex-wrap:wrap}}.top-panel{width:100%;height:50px;padding:0 20px;background-color:#fff;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;z-index:150;border-bottom:1px solid #333}.top-panel>div{width:100%}.label-button{display:inline-block;min-width:40px;width:40px;height:40px}.rhythm-management{display:flex;justify-content:center;align-items:center}.rhythm-management>*{margin-right:10px}.rhythm-management .input-label-container{min-height:24px;min-width:200px;overflow:hidden;font-size:22px;border:none;border-bottom:1px solid #000}.rhythm-management .input-label-container input{min-height:30px;width:100%;padding:2px 3px;font-size:22px}.sharing-section{display:flex;justify-content:flex-end}@media screen and (max-width: 830px){.top-panel{width:100%;height:max-content;flex-direction:column;padding:0;box-shadow:0 0 5px #666;overflow:auto;max-height:100vh}.top-bar{display:flex;width:100%;min-height:50px;padding:0 20px;justify-content:space-between;align-items:center}.title-edit{width:100%;text-align:center}.title-edit input{text-align:center}.hamburger-menu{display:none;flex-direction:column;gap:5px;width:100%;background-color:#fff;padding:10px 20px}.top-panel.menu-visible .hamburger-menu{display:flex}.hamburger-menu label{display:flex;align-items:center;width:100%}.dark-background{position:fixed;left:0;right:0;top:0;bottom:0;background-color:#00000060;z-index:125}}@media screen and (max-width: 320px){.top-bar{padding:0 5px}.hamburger-menu{padding:10px 5px}}.play-container{display:flex;justify-content:center;align-items:center}.tips-panel{height:500px;width:340px;position:-webkit-sticky;position:fixed;bottom:0;background-color:#fff;border-radius:0 3px 0 0;box-shadow:0 0 20px #000;z-index:50}.tips-panel.hidden{display:none}.tips-panel-hide-btn{position:absolute;bottom:100%;left:10px;min-width:70px;padding:5px 10px;font-size:12px;text-align:center;cursor:pointer;border-radius:3px 3px 0 0}.key-tips-container{padding:10px;width:100%}.key-tips-container h4{font-size:16px;margin-bottom:5px}.key-tips-container section{margin-bottom:20px}.tips-list{display:flex;flex-wrap:wrap}.key-tip{position:relative;width:max-content;min-width:50px;height:50px;border:1px solid #000;margin-right:15px;margin-bottom:15px;padding:2px 5px;font-size:20px}.key-tip:last-child{margin:0}.key-tip img{position:absolute;width:30px;height:30px;top:50%;left:60%}.key-tip.double img{left:60%}.key-tip.double img:nth-of-type(1){left:25%}.key-tip.triplet img{width:25px;top:45%;left:72%}.key-tip.triplet img:nth-of-type(1){left:8%}.key-tip.triplet img:nth-of-type(2){left:40%}.key-tip.quartet img{width:20px;top:45%;left:0}.key-tip.quartet img:nth-of-type(2){left:25%}.key-tip.quartet img:nth-of-type(3){left:50%}.key-tip.quartet img:nth-of-type(4){left:75%}.key-tip p{font-size:14px;padding-left:3px}.control-panel,.bottom-panel{width:100%;height:50px;position:fixed;bottom:0;left:0;padding:0 20px;background-color:#fff;border-top:1px solid #333;display:flex;justify-content:space-between;align-items:center;z-index:100}.control-panel>*,.bottom-panel>*{width:100%;display:flex;align-items:center}.copy-paste-section,.undo-redo-section,.control-panel{display:none}.exporting-section{justify-content:flex-end}@media screen and (max-width: 830px){.control-panel>*,.bottom-panel>*{width:auto}.exporting-section{display:none}.bottom-panel{border-top:none}.control-panel{display:flex;bottom:50px}.control-panel.disabled:after{content:"";display:block;background-color:#fff;opacity:.5;position:absolute;left:0;right:0;top:0;bottom:0}.beat-type-counter{font-size:32px;width:22px;text-align:center}.copy-paste-section,.undo-redo-section{display:flex}}@media screen and (max-width: 320px){.control-panel,.bottom-panel{padding:0 5px}}.rhythm-settings-modal{min-height:500px}.rhythm-settings-modal>section{margin-bottom:30px}.beat-type-selection-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.beat-type-selection-container label{width:100px;margin:7px;padding:10px 0;background-color:#dde7f8;cursor:pointer;text-align:center}.choose-beat-type-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none}.beat-type-selection-container input[type=radio]:checked+label{background-color:#528cf0}.beats-in-bar-input{max-width:60px}.draggable-instrument-row{display:flex}.sign-in-up-page-container{margin:0;background-color:#fff;color:#333;padding-top:50px}.sign-in-up-page-container h1{font-size:50px;text-align:center}.choose-container{display:flex;margin:60px auto;width:min-content;justify-content:space-between}.choose-box{width:400px;border:1px solid #333;border-radius:3px;padding:20px;color:#333;font-style:normal;text-decoration:none}.choose-box h2{margin-bottom:25px}.choose-box p{margin:5px 0}.choose-container .or{display:flex;font-size:30px;width:100px;justify-content:stretch;align-items:center}.choose-container .or p{width:100%;text-align:center}.choose-box form{display:flex;flex-direction:column;margin-bottom:30px}.choose-box label,.choose-box form button{margin-top:15px}.choose-box .forgot-password{text-align:right}.choose-box a{font-weight:700;color:#3a581b}@media screen and (max-width: 920px){.sign-in-up-page-container h1{font-size:40px}.choose-box{width:350px}.choose-container .or{font-size:24px;width:60px}}@media screen and (max-width: 770px){.choose-container{flex-direction:column}.choose-box{width:400px}.choose-container .or{font-size:24px;width:100%;height:60px}}@media screen and (max-width: 500px){.choose-container,.choose-box{width:100%}}.choose-offline{position:relative;transition:transform .3s}.choose-offline:hover{box-shadow:0 2px 6px #333;cursor:pointer;transform:translateY(-5px)}.choose-box .offline-img{width:50%;display:block;margin:80px auto auto;filter:invert(.6)}.choose-box .enter-img{position:absolute;height:40px;right:10px;bottom:10px}.page-not-found-container{color:#333;text-align:center;padding-top:70px}.page-not-found-container h1{font-size:80px}.page-not-found-container p{margin:30px 0}.page-not-found-container a{color:#3a581b}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:Montserrat,sans-serif}.button,button{min-width:180px;background-color:#09a66f;color:#eee;padding:5px 10px;border:none;border-radius:3px;cursor:pointer;font-family:Montserrat,sans-serif;font-size:24px;text-align:center;-webkit-user-select:none;user-select:none;text-decoration:none;transition:background-color .1s}.button:hover,button:hover{background-color:#10b750}button.cancel{background-color:#a60923}button.cancel:hover{background-color:#b71034}.icon-btn{min-width:40px;width:40px;height:40px;padding:5px;cursor:pointer;border-radius:3px;background:none;border:1px solid transparent}.icon-btn img{width:100%;height:100%}.icon-btn:hover{background:none;border:1px solid #333}.icon-btn.pressed{background-color:#70be5f;border:1px solid #333}.warning{color:#b71034;font-weight:700;text-transform:uppercase}.label-button input{display:none}input[type=text],input[type=password],input[type=email],input[type=number]{width:100%;font-size:24px;padding:3px 5px;border:1px solid #777;border-radius:3px}.flip-h{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}h3{font-size:22px;font-weight:400}@media screen and (min-width: 831px){.mobile-only{display:none}}