@keyframes dash{0%{stroke-dashoffset:120}50%{stroke-dashoffset:30;transform:rotate(240deg)}100%{stroke-dashoffset:120;transform:rotate(720deg)}}@keyframes dash{0%{stroke-dashoffset:120}50%{stroke-dashoffset:30;transform:rotate(240deg)}100%{stroke-dashoffset:120;transform:rotate(720deg)}}.range-cover{overflow:visible}.range-cover [type=range]{margin:-5px 0 0 0;padding:0;width:calc(100% + 32px);height:60px;position:absolute;left:-16px;opacity:0;top:-12px;cursor:pointer}.range-cover [type=range],.range-cover [type=range]::-webkit-slider-thumb{-webkit-appearance:none}@media(max-width: 767px){.range-cover [type=range]{left:-10px;width:calc(100% + 18px);margin:-5px 0 0 0}}.range-cover [type=range]::-webkit-slider-runnable-track{box-sizing:border-box;border:none;width:100%;height:60px;background:#666}.range-cover [type=range]::-moz-range-track{box-sizing:border-box;border:none;width:100%;height:60px;background:#666}.range-cover [type=range]::-ms-track{box-sizing:border-box;border:none;width:100%;height:60px;background:#666}.range-cover [type=range]::-webkit-slider-thumb{margin-top:0px;box-sizing:border-box;border:none;width:60px;height:60px;border-radius:50%;background:#16a8f0}.range-cover [type=range]::-moz-range-thumb{box-sizing:border-box;border:none;width:60px;height:60px;border-radius:50%;background:#16a8f0}.range-cover [type=range]::-ms-thumb{margin-top:0;box-sizing:border-box;border:none;width:60px;height:60px;border-radius:50%;background:#16a8f0}.range-cover .range-dupe{position:absolute;left:0;top:10px;bottom:10px;width:50%;pointer-events:none;background-color:#16a8f0;overflow:visible;border-radius:4px;z-index:1}.range-cover .range-dupe::before{position:absolute;right:-16px;width:32px;height:32px;border-radius:16px;background:#16a8f0;content:"\a";top:-12px}.range-cover::before{position:absolute;width:100%;content:"\a";height:8px;background:#f5f5f5;top:10px;border-radius:4px;left:0;cursor:pointer}@media(max-width: 767px){.range-cover{width:23px;padding-left:0}.range-cover .range-dupe::before{position:absolute;right:-9px;width:18px;height:18px;border-radius:9px;top:-5px}}*{box-sizing:border-box}body,html{width:100%;min-height:100%;margin:0px;line-height:1.89;font-family:"Quicksand",sans-serif}body{overflow-x:hidden;overflow-y:auto}body.embed-only,html body.embed-only{height:100%;overflow:hidden}body button,html button{cursor:pointer;border:none;font-family:"Quicksand",sans-serif}body input,html input{font-family:"Quicksand",sans-serif}body:not(.user-is-tabbing) button:focus,body:not(.user-is-tabbing) input:focus,body:not(.user-is-tabbing) select:focus,body:not(.user-is-tabbing) textarea:focus,body:not(.user-is-tabbing) *[tabindex]{outline:none}body.embed-only #tempo-slider,body.embed-only #bottom-right,body.embed-only #toplinks,body.embed-only #header-tools,body.embed-only #gamepad,body.embed-only #bottom-left button:not(#play-button),body.embed-only #bottom-left::after,body.embed-only #topbar{display:none}body.embed-only #grid-container>canvas{pointer-events:none}body.embed-only #grid-container{height:calc(100% - 51px);top:0}@media(max-width: 767px){body.embed-only #grid-container{height:calc(100% - 51px);top:0}}body.embed-only #bottom{height:51px}body.embed-only #bottom #bottom-left{position:absolute;top:50%;transform:translateY(-50%);width:44px;left:16px}body.embed-only #bottom #bottom-left #play-button{display:block;margin:0;height:44px;width:44px;min-width:0;padding:0;font-size:0}body.embed-only #bottom #bottom-left #play-button.playing:before{background-image:url(/images/icon-stop.svg)}body.embed-only #bottom #bottom-left #play-button:before{background-color:#16a8f0;background-image:url(/images/icon-play.svg);background-position:55% center;background-size:34%;width:44px;height:44px;border-radius:50%}body.embed-only #bottom #bottom-left #play-button:hover:before{background-color:#57c1f9}@media(max-width: 767px){body.embed-only #bottom #bottom-left{position:absolute;top:50%;transform:translateY(-50%);left:16px}body.embed-only #bottom #bottom-left #play-button{text-indent:0;top:0;left:0}}
#songmaker-app{position:relative;height:100vh;min-height:520px;overflow:hidden;background:#fff;z-index:1}#seo-content,#song-content{background:#fff;color:#1f2933;font-family:"Quicksand",sans-serif;line-height:1.65}.seo-section{border-top:1px solid #e5e7eb;padding:56px 24px}.seo-inner{max-width:1040px;margin:0 auto}.seo-kicker{margin:0 0 10px;color:#16a8f0;font-size:14px;font-weight:700;letter-spacing:0;text-transform:uppercase}#seo-content h1,#seo-content h2,#seo-content h3,#song-content h1,#song-content h2,#song-content h3{margin:0 0 16px;color:#111827;font-family:"Quicksand",sans-serif;letter-spacing:0;line-height:1.15}#seo-content h1,#song-content h1{font-size:42px}#seo-content h2,#song-content h2{font-size:28px}#seo-content h3,#song-content h3{margin-bottom:8px;font-size:20px}#seo-content p,#song-content p{margin:0;font-size:18px}.seo-lede{max-width:760px}.seo-grid{display:grid;gap:36px;grid-template-columns:repeat(2, minmax(0, 1fr))}.seo-feature-grid{display:grid;gap:28px 36px;grid-template-columns:repeat(2, minmax(0, 1fr))}.seo-feature-grid p{font-size:16px}.seo-faq{display:grid;gap:12px}.seo-faq details{border:1px solid #d9dee7;border-radius:8px;background:#fff}.seo-faq summary{cursor:pointer;padding:18px 20px;color:#111827;font-size:18px;font-weight:700}.seo-faq p{padding:0 20px 20px;font-size:16px}body.tools-drawer-open{overflow:hidden}.tools-drawer-backdrop{position:fixed;z-index:9998;inset:0;background:rgba(17,24,39,.42)}.tools-drawer-backdrop[hidden]{display:none}.tools-drawer{position:fixed;z-index:9999;top:0;bottom:0;left:0;box-sizing:border-box;width:380px;max-width:calc(100vw - 32px);padding:24px;overflow-y:auto;transform:translateX(-100%);transition:transform 180ms ease;border-right:1px solid #d9dee7;background:#fff;box-shadow:18px 0 42px rgba(17,24,39,.18)}.tools-drawer[aria-hidden=false]{transform:translateX(0)}.tools-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}#seo-content .tools-drawer h2,.tools-drawer h2{margin:0;font-size:26px}.tools-drawer-close{flex:0 0 auto;width:40px;height:40px;padding:0;border:0;border-radius:50%;background-color:transparent;background-image:url(/images/icon-x.svg);background-position:center;background-repeat:no-repeat;background-size:16px;cursor:pointer}.tools-drawer-close:hover{background-color:#f3f1ec}.tools-drawer-grid{display:grid;gap:10px;grid-template-columns:repeat(2, minmax(0, 1fr))}.tools-drawer-card{display:grid;gap:4px;overflow:hidden;border:1px solid #d9dee7;border-radius:8px;background:#fff;color:#111827;text-decoration:none}.tools-drawer-card:hover{border-color:#b8c2d2}.tools-drawer-card img{display:block;width:56%;margin:8px auto 0;aspect-ratio:1/1;object-fit:cover;border-radius:6px;background:#f8fafc}.tools-drawer-card span{display:flex;align-items:center;justify-content:center;min-height:38px;padding:6px 12px;border-top:1px solid #e5e7eb;background:#f8fafc;font-size:16px;font-weight:700;line-height:1.25;text-align:center}.tools-drawer-card small{display:none;padding:0 12px 12px;color:#52616f;font-size:13px;line-height:1.45}.tool-page-songmaker .tools-drawer-card[data-tool-page=songmaker],.tool-page-spectrogram .tools-drawer-card[data-tool-page=spectrogram],.tool-page-rhythm .tools-drawer-card[data-tool-page=rhythm],.tool-page-melody-maker .tools-drawer-card[data-tool-page=melody-maker],.tool-page-chords .tools-drawer-card[data-tool-page=chords],.tool-page-arpeggios .tools-drawer-card[data-tool-page=arpeggios],.tool-page-piano-roll .tools-drawer-card[data-tool-page=piano-roll],.tool-page-kandinsky .tools-drawer-card[data-tool-page=kandinsky],.tool-page-oscillators .tools-drawer-card[data-tool-page=oscillators],.tool-page-sound-waves .tools-drawer-card[data-tool-page=sound-waves],.tool-page-harmonics .tools-drawer-card[data-tool-page=harmonics],.tool-page-strings .tools-drawer-card[data-tool-page=strings],.tool-page-voice-spinner .tools-drawer-card[data-tool-page=voice-spinner],.tool-page-shared-piano .tools-drawer-card[data-tool-page=shared-piano]{display:none}.explore-tools-grid{display:grid;gap:18px;grid-template-columns:repeat(4, minmax(0, 1fr))}.explore-tool-card{display:block;overflow:hidden;border:1px solid #d9dee7;border-radius:8px;background:#fff;color:#111827;text-decoration:none}.explore-tool-card:hover{border-color:#b8c2d2}.explore-tool-media{position:relative;overflow:hidden}.explore-tool-media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#f8fafc}.explore-tool-media small{position:absolute;right:0;bottom:0;left:0;display:block;padding:30px 12px 10px;background:linear-gradient(to top, rgba(17, 24, 39, 0.76), rgba(17, 24, 39, 0));color:#fff;font-size:13px;font-weight:600;line-height:1.35;text-align:center}.explore-tool-card span{display:block;padding:8px 16px 10px;border-top:1px solid #e5e7eb;background:#f8fafc;font-size:18px;font-weight:700;line-height:1.25;text-align:center}.tool-page-songmaker .explore-tool-card[data-tool-page=songmaker],.tool-page-spectrogram .explore-tool-card[data-tool-page=spectrogram],.tool-page-rhythm .explore-tool-card[data-tool-page=rhythm],.tool-page-melody-maker .explore-tool-card[data-tool-page=melody-maker],.tool-page-chords .explore-tool-card[data-tool-page=chords],.tool-page-arpeggios .explore-tool-card[data-tool-page=arpeggios],.tool-page-piano-roll .explore-tool-card[data-tool-page=piano-roll],.tool-page-kandinsky .explore-tool-card[data-tool-page=kandinsky],.tool-page-oscillators .explore-tool-card[data-tool-page=oscillators],.tool-page-sound-waves .explore-tool-card[data-tool-page=sound-waves],.tool-page-harmonics .explore-tool-card[data-tool-page=harmonics],.tool-page-strings .explore-tool-card[data-tool-page=strings],.tool-page-voice-spinner .explore-tool-card[data-tool-page=voice-spinner],.tool-page-shared-piano .explore-tool-card[data-tool-page=shared-piano]{display:none}@media(min-width: 768px)and (max-width: 1023px){.explore-tools-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media(max-width: 767px){#songmaker-app{min-height:520px}.seo-section{padding:40px 18px}#seo-content h1,#song-content h1{font-size:34px}#seo-content h2,#song-content h2{font-size:24px}#seo-content h3,#song-content h3{font-size:19px}#seo-content p,#song-content p{font-size:16px}.seo-grid,.seo-feature-grid{grid-template-columns:1fr}.explore-tools-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.explore-tool-card span{padding:12px;font-size:16px}.explore-tool-media small{display:none}.tools-drawer{width:min(360px, 100vw);max-width:100vw;padding:20px}}
.site-footer{border-top:1px solid #d9dee7;background:#f7f9fc;color:#1f2933;font-family:"Quicksand",sans-serif;line-height:1.65;padding:36px 24px}.site-footer-inner{display:grid;gap:32px;grid-template-columns:minmax(0, 1fr) minmax(280px, 0.9fr);max-width:1040px;margin:0 auto}.site-footer-brand strong{display:block;margin:0 0 8px;color:#111827;font-size:20px}.site-footer-brand p{max-width:520px;margin:0;color:#4b5563;font-size:16px}.site-footer-links{display:grid;gap:24px;grid-template-columns:repeat(2, minmax(0, 1fr))}.site-footer-heading{margin:0 0 16px;color:#111827;font-family:"Quicksand",sans-serif;font-size:16px;letter-spacing:0;line-height:1.15}.site-footer-links ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}.site-footer-links a{display:inline-flex;align-items:center;min-height:24px;border-radius:4px;color:#4b5563;font-size:15px;font-weight:500;text-decoration:none;text-underline-offset:3px;transition:background-color 120ms ease,color 120ms ease}.site-footer-links a:hover,.site-footer-links a:focus{color:#111827;text-decoration:none}.site-footer-links a:focus{outline:2px solid rgba(31,171,245,.45);outline-offset:3px}.site-footer-copy{max-width:1040px;margin:28px auto 0;color:#6b7280;font-size:13px}@media(max-width: 767px){.site-footer{padding:32px 18px}.site-footer-inner,.site-footer-links{grid-template-columns:1fr}}
:root{--site-promo-banner-height: 42px}.site-promo-banner{position:relative;min-height:var(--site-promo-banner-height);border-bottom:1px solid #cfe8f6;background:#eff9ff;color:#1f2933;font-family:"Quicksand",sans-serif;line-height:1.35}.site-promo-dismissed .site-promo-banner{display:none}.site-promo-banner+#app-shell,.site-promo-banner+#app-shell #songmaker-app{min-height:calc(100vh - var(--site-promo-banner-height))}.site-promo-banner+#app-shell #songmaker-app{height:calc(100vh - var(--site-promo-banner-height))}.site-promo-dismissed .site-promo-banner+#app-shell,.site-promo-dismissed .site-promo-banner+#app-shell #songmaker-app{min-height:100vh}.site-promo-dismissed .site-promo-banner+#app-shell #songmaker-app{height:100vh}.site-promo-banner-inner{display:flex;align-items:center;justify-content:center;gap:10px;max-width:1040px;min-height:var(--site-promo-banner-height);margin:0 auto;padding:5px 60px}.site-promo-banner p{margin:0;color:#1f2933;font-size:15px;font-weight:700;letter-spacing:0}.site-promo-banner-link{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;border-radius:999px;background:#16a8f0;color:#fff;font-size:14px;font-weight:700;letter-spacing:0;text-decoration:none;transition:background-color 120ms ease,color 120ms ease}.site-promo-banner-link:hover,.site-promo-banner-link:focus{background:#57c1f9;color:#fff;text-decoration:none}.site-promo-banner-link:focus,.site-promo-banner-close:focus{outline:2px solid rgba(31,171,245,.45);outline-offset:3px}.site-promo-banner-close{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:transparent;color:#4b5563;font-size:22px;line-height:1;padding:0}.site-promo-banner-close:hover,.site-promo-banner-close:focus{background:rgba(17,24,39,.06);color:#111827}@media(max-width: 767px){:root{--site-promo-banner-height: 64px}.site-promo-banner-inner{flex-wrap:wrap;gap:6px 10px;padding:8px 50px 8px 18px}.site-promo-banner p{font-size:14px}.site-promo-banner-link{min-height:30px;padding:0 12px;font-size:13px}.site-promo-banner-close{right:12px}}
.inner-tool-shell{min-height:520px;background:#fff}.inner-tool-header{position:relative;box-sizing:border-box;height:81px;border-bottom:1px solid #e6e2dc;box-shadow:1px 1px 1px 1px rgba(0,0,0,.02);background:#fff}.inner-tool-menu{position:absolute;left:20px;top:50%;width:40px;height:40px;padding:0;transform:translate(0, -50%);border:0;border-radius:50%;background-color:transparent;background-image:url(/images/icon-tools.svg);background-position:center;background-repeat:no-repeat;background-size:contain;cursor:pointer}.inner-tool-menu:hover{background-color:#f3f1ec}.inner-tool-title{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);font-family:"Quicksand",sans-serif;font-size:20px;font-weight:700;letter-spacing:2px;line-height:1.2;text-align:center;text-transform:uppercase;white-space:nowrap}.iframe-tool{height:calc(100vh - 81px);min-height:439px;background:#fff}.tool-frame{display:block;width:100%;height:100%;border:0;background:#fff}.site-promo-banner+.inner-tool-shell{min-height:calc(520px - var(--site-promo-banner-height))}.site-promo-banner+.inner-tool-shell .iframe-tool{height:calc(100vh - var(--site-promo-banner-height) - 81px);min-height:calc(520px - var(--site-promo-banner-height) - 81px)}.site-promo-dismissed .site-promo-banner+.inner-tool-shell{min-height:520px}.site-promo-dismissed .site-promo-banner+.inner-tool-shell .iframe-tool{height:calc(100vh - 81px);min-height:439px}.tool-page-shared-piano .inner-tool-header{display:none}.tool-page-shared-piano .iframe-tool{height:100vh;min-height:520px}.tool-page-shared-piano .site-promo-banner+.inner-tool-shell .iframe-tool{height:calc(100vh - var(--site-promo-banner-height));min-height:calc(520px - var(--site-promo-banner-height))}.site-promo-dismissed .tool-page-shared-piano .site-promo-banner+.inner-tool-shell .iframe-tool{height:100vh;min-height:520px}@media(max-width: 767px){.inner-tool-header{height:60px}.inner-tool-menu{left:16px}.inner-tool-title{font-size:17px}.iframe-tool{height:calc(100vh - 60px);min-height:460px}.site-promo-banner+.inner-tool-shell .iframe-tool{height:calc(100vh - var(--site-promo-banner-height) - 60px);min-height:calc(520px - var(--site-promo-banner-height) - 60px)}.site-promo-dismissed .site-promo-banner+.inner-tool-shell .iframe-tool{height:calc(100vh - 60px);min-height:460px}}
.modal .big-button{font-size:40px;line-height:125px;height:125px;text-transform:uppercase;border-radius:62.5px;background-color:#16a8f0;color:#fff;cursor:pointer;display:inline-block;padding:0 62.5px;box-shadow:1px 1px 1px 1px rgba(0,0,0,.2)}@media(max-width: 767px){.modal .big-button{font-size:16px;line-height:50px;height:50px;text-transform:uppercase;border-radius:25px;background-color:#16a8f0;color:#fff;cursor:pointer;display:inline-block;padding:0 25px}}#about-modal .footnote,#settings-modal .select-wrap .dupe,#settings-modal .setting-group select,#settings-modal .quantity-cover,.modal{font-family:"Poppins",sans-serif;letter-spacing:.1ex}#loading-modal .circular-loader{height:100%;width:100%;position:absolute;top:0;left:0;transition:all .1s linear}#loading-modal .circular-loader .loader-path{stroke:#16a8f0;stroke-dasharray:120;animation:dash 1.5s linear 0s infinite;animation-fill-mode:both;stroke-linecap:round;transform-origin:center center}@keyframes dash{0%{stroke-dashoffset:120}50%{stroke-dashoffset:30;transform:rotate(240deg)}100%{stroke-dashoffset:120;transform:rotate(720deg)}}.modal{position:absolute;top:0;left:0;height:100%;width:100%;text-align:center;font-size:21px;overflow:auto;background-color:#fff;z-index:100;opacity:0;pointer-events:none}.modal.visible{opacity:1;pointer-events:initial}.modal .text{width:100%;padding:20px;text-align:center;margin-bottom:30px;margin-top:80px;font-size:20px}.modal.open-midi,.modal.open-pitch{transition:opacity .3s;height:calc(100% - 190px);top:81px}@media(max-width: 767px){.modal.open-midi,.modal.open-pitch{height:calc(100% - 60px - 80px);top:60px}}@media(max-width: 495px){.modal.open-midi,.modal.open-pitch{height:calc(100% - 60px - 125px)}}.modal .medium-button{font-size:24px;line-height:60px;height:60px;text-transform:uppercase;border-radius:30px;background-color:#16a8f0;color:#fff;cursor:pointer;display:inline-block;padding:0 30px;text-transform:none;box-shadow:1px 2px 4px 1px #f5f5f5}.modal .medium-button:before{width:24px;height:24px;content:"\a";display:inline-block;vertical-align:top;background-repeat:no-repeat;transform:translateY(18px)}.modal .medium-button:after{margin-left:11px}@media(max-width: 767px){.modal .medium-button{font-size:14px;line-height:40px;height:40px;text-transform:uppercase;border-radius:20px;background-color:#16a8f0;color:#fff;cursor:pointer;display:inline-block;padding:0 20px;text-transform:none}.modal .medium-button:after{margin-left:10px}.modal .medium-button:before{transform:translateY(12px);background-size:contain;width:15px;height:15px}}.modal .big-button{margin-top:80px;clear:both}.modal .big-button:before{width:45px;height:45px;content:"\a";display:inline-block;vertical-align:top;background-repeat:no-repeat}.modal .big-button:after{margin-left:30px}@media(max-width: 767px){.modal .big-button:after{margin-left:12px}.modal .big-button:before{background-size:contain;width:15px;height:15px}}.modal #submit{position:relative;width:0}.modal #submit:before,.modal #submit:after{display:none}.modal #submit svg{left:50%;top:50%;transform:translate(-50%, -50%);position:absolute;position:absolute;width:48%;margin-left:3px}@media(max-width: 767px){.modal #submit svg{margin-left:1px}}.modal #cancel{width:60px;height:60px;border-radius:30px;background:#fff;cursor:pointer;display:inline-block;position:relative;box-shadow:1px 1px 1px 1px rgba(0,0,0,.2);position:absolute;top:20px;right:20px;z-index:1}.modal #cancel img{width:100%;height:100%}.modal #cancel img{left:50%;top:50%;transform:translate(-50%, -50%);position:absolute;max-width:40%;max-height:40%}.modal.start-song #expand-button{font-size:16px;margin-bottom:20px}.modal.start-song .expandable{text-align:center;padding-top:80px}@media(max-width: 767px){.modal.start-song .expandable{padding-top:70px}}.modal .expandable{position:relative}.modal .expandable-inner{max-width:1100px;margin:0 auto;padding:0 30px}.modal .expandable-inner:after{content:"";display:table;clear:both}.modal.fadeout{transition:opacity 1s;opacity:0}@media(max-width: 767px){.modal{font-size:15px}.modal .text{margin-bottom:10px;margin-top:60px}.modal #cancel{width:40px;height:40px;border-radius:20px;background:#fff;cursor:pointer;display:inline-block;position:relative;box-shadow:1px 1px 1px 1px rgba(0,0,0,.2);position:absolute;top:20px;right:20px}.modal #cancel img{width:100%;height:100%}.modal #cancel img{left:50%;top:50%;transform:translate(-50%, -50%);position:absolute;max-width:40%;max-height:40%}.modal #submit{margin-top:30px;margin-bottom:30px}.modal #submit:after{margin-left:10px}.modal .expandable-inner{padding:0 20px}}#loading-modal{display:flex;align-items:center;justify-content:center;position:relative;height:100%;flex-direction:column}#loading-modal img{display:block;max-width:336px;max-height:calc(70% - 100px);width:70%}#loading-modal .circle{width:10vw;height:10vw;position:relative;margin-top:3vw;min-height:60px;min-width:60px;max-height:120px;max-width:120px}#loading-modal .circular-loader .loader-path{stroke:#f5f5f5}#settings-modal{display:flex;align-items:center;min-height:100vh}#settings-modal .quantity{height:35px;overflow:hidden}#settings-modal .quantity input:not(.quantity-cover){visibility:hidden;height:1px;width:1px;z-index:-1;position:absolute}#settings-modal .quantity-button{width:30px;height:30px;border-radius:15px;background:#fff;cursor:pointer;display:inline-block;position:relative;float:right;margin-left:10px}#settings-modal .quantity-button img{width:100%;height:100%}#settings-modal .quantity-label{display:inline-block;line-height:35px;float:right;margin-right:10px;color:#16a8f0}#settings-modal .quantity-cover{display:inline-block;line-height:35px;float:right;color:#16a8f0;font-size:21px;padding:0 8px;width:3em;border:0;text-align:right;margin:0}@media(max-width: 767px){#settings-modal .quantity-cover{font-size:15px}}#settings-modal .setting-group{border-bottom:1px #f5f5f5 solid;padding:30px 0;position:relative;height:96px}#settings-modal .setting-group:after{content:"";display:table;clear:both}#settings-modal .setting-group .quantity{float:right}#settings-modal .setting-group label{float:left;line-height:35px;color:#666}#settings-modal .setting-group select{background:transparent;border:none;height:29px;color:#16a8f0;font-size:21px;margin-left:20px;width:calc(100% + 20px);-webkit-appearance:none;transition:opacity .2s}#settings-modal .setting-group select#rootPitch{margin-left:17px}#settings-modal .expandable-inner{width:100%}#settings-modal .setting-column{width:46%}#settings-modal .setting-column--left{float:left}#settings-modal .setting-column--right{float:right}#settings-modal .select-wrap{display:inline-block;float:right;position:relative;overflow:hidden;background:url(/images/icon-down-caret.svg) no-repeat right center;padding-right:24px;top:-2px}#settings-modal .select-wrap .dupe{font-size:21px;white-space:nowrap;position:absolute;opacity:0;pointer-events:none}@media(max-width: 767px){#settings-modal .setting-column{width:100%}#settings-modal .setting-group{height:auto;padding:20px 0}#settings-modal .setting-group select{font-size:15px}#settings-modal .setting-column--left,#settings-modal .setting-column--right{float:none}#settings-modal .select-wrap{top:2px}#settings-modal .select-wrap .dupe{font-size:15px}}@media(max-width: 495px){#settings-modal .setting-group{padding:8px 0}#settings-modal .setting-group select,#settings-modal .setting-group label{font-size:14px}#settings-modal .select-wrap .dupe{font-size:15px}}#reset-song-options{display:block;margin-top:1em;text-align:center;cursor:pointer;font-size:18px;text-transform:uppercase;color:#666;margin-top:46px}@media(max-width: 767px){#reset-song-options{margin-top:28px;font-size:14px}}#midi-modal,#pitch-modal{text-align:center;top:0;height:100%;position:absolute;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column}#midi-modal img,#pitch-modal img{margin:0 auto;display:block;max-width:384px;max-height:calc(70% - 100px);width:70%}#midi-modal h2,#pitch-modal h2{color:#666;font-weight:400;text-align:center;padding:0 30px;margin-top:4rem;font-size:20px}#about-modal h3{font-family:"Quicksand",sans-serif;font-size:23px;text-transform:uppercase;color:#9e9e9e;letter-spacing:.1ch}#about-modal h3 strong{color:#000}@media(max-width: 495px){#about-modal h3{line-height:1.4}#about-modal h3 strong{display:block}}#about-modal p{font-size:18px;color:#000;letter-spacing:0}#about-modal #about-top{background-color:#f4f2ef;padding:40px 0 20px}#about-modal .expandable-inner{padding-top:40px;padding-bottom:60px;text-align:left;max-width:740px}#about-modal .expandable-inner a{color:#f4a806}@media(max-width: 767px){#about-modal .expandable-inner{padding-top:30px;padding-bottom:30px}}#about-modal .footnote{font-size:18px;color:#000;background:#fff}#about-modal .footnote a{color:#f4a806;text-decoration:none}#about-modal .chrome-experiment{background-image:url(/images/chrome_experiment.svg);width:125px;height:120px;background-repeat:no-repeat;background-position:left center;background-size:100%}#incompatible{width:100%;height:calc(100vh - 81px);position:absolute;top:81px;left:0;z-index:101;background:#fff;display:block;display:flex;justify-items:center;align-items:center;justify-content:center;font-size:30px;line-height:1.4}#incompatible p{text-align:center;color:#666}#incompatible img{margin-bottom:5vh;max-width:70%}@media(max-width: 767px){#incompatible{top:60px;height:calc(100vh - 60px)}}@media(max-width: 767px){#incompatible{font-size:24px}}.modal.open-back.visible{background-color:transparent}.modal.open-back.visible #back-modal{padding:18px;text-align:left;width:273px;height:157px;left:30px;position:fixed;top:70px;box-shadow:1px 1px 1px 1px rgba(0,0,0,.2);border:1px solid #f5f5f5;font-size:15px;color:#666;overflow:hidden;background-color:#fff}.modal.open-back.visible #back-modal img{display:block;margin:0 auto}.modal.open-back.visible #back-modal h5{color:#000;font-size:18px;margin:0}.modal.open-back.visible #back-modal p{margin:15px 0;line-height:20px;white-space:nowrap}.modal.open-back.visible #back-modal a{display:inline-block;cursor:pointer}@media(max-width: 767px){.modal.open-back.visible #back-modal{top:55px}}@media(max-width: 495px){.modal.open-back.visible #back-modal{padding:15px 10px;width:300px;height:192px;left:10px}}.modal.open-back.visible #back-modal #back-modal-cancel,.modal.open-back.visible #back-modal #back-modal-confirm{color:#16a8f0;margin-left:20px}.modal.open-back.visible #back-modal .links{text-align:right}
@keyframes dash{0%{stroke-dashoffset:120}50%{stroke-dashoffset:30;transform:rotate(240deg)}100%{stroke-dashoffset:120;transform:rotate(720deg)}}#grid-container{height:calc(100% - 190px);width:100%;position:absolute;top:81px;overflow:hidden;background-color:#fff}@media(max-width: 767px){#grid-container{height:calc(100% - 140px);top:60px}}@media(max-width: 495px){#grid-container{height:calc(100% - 185px)}}#instrument-canvas{position:absolute;top:0;left:0}#percussion-canvas{position:absolute;bottom:0;left:0}#canvas-container{height:calc(100% - 190px);width:100%;position:absolute;top:81px;overflow:auto;background-color:#fff}#canvas-container.zoomed #scroll-container{height:100% !important}#canvas-container.zoomed #record-indicator{opacity:.2}@media(max-width: 767px){#canvas-container{top:60px;height:calc(100% - 140px)}}@media(max-width: 495px){#canvas-container{height:calc(100% - 185px)}}#canvas-container #record-indicator{position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:red;pointer-events:none;z-index:10;opacity:0}#canvas-container #scroll-container{position:absolute;top:0px;left:0px;width:100%;height:100%;cursor:pointer}#canvas-container #scroll-container canvas{position:absolute;top:0px;left:0px;width:100%;height:100%}#canvas-container #scroll-container #instrument{position:absolute;top:0px;left:0px;width:100%;height:100%;height:100%}#canvas-container #scroll-container #percussion{border-top:1px solid #f5f5f5;position:absolute;top:0px;left:0px;width:100%;height:100%;min-height:60px;max-height:90px;height:15%;top:calc(100% - 60px);background-color:#fff;box-sizing:border-box}#canvas-container #scroll-container .touch-grid{position:absolute;top:0px;left:0px;width:100%;height:100%}#canvas-container #scroll-container #indicator{pointer-events:none}

@keyframes dash{0%{stroke-dashoffset:120}50%{stroke-dashoffset:30;transform:rotate(240deg)}100%{stroke-dashoffset:120;transform:rotate(720deg)}}.scrollbar{position:absolute;background:#fff}.scrollbar .scrollbar-track{position:absolute;border-radius:20px;background:#f5f5f5;border:1px solid #f5f5f5}.scrollbar .scrollbar-thumb{position:absolute;top:0;left:0;cursor:pointer}.scrollbar .scrollbar-thumb:after{content:"";display:block;width:100%;height:100%;background:#16a8f0;border-radius:20px}.scrollbar .scrollbar-thumb:hover:after{background:#57c1f9}.scrollbar-horizontal{bottom:0;left:0;right:41px;height:41px;border-top:1px solid #f5f5f5}.scrollbar-horizontal.scrollbar-full{right:0}.scrollbar-horizontal .scrollbar-track{top:8px;right:12px;bottom:8px;left:12px}.scrollbar-horizontal .scrollbar-thumb{min-width:100px;height:100%;padding:9px 13px}.scrollbar-vertical{top:0;right:0;height:100%;width:41px;border-left:1px solid #f5f5f5}.scrollbar-vertical .scrollbar-track{top:12px;right:8px;bottom:12px;left:8px}.scrollbar-vertical .scrollbar-thumb{width:100%;min-height:100px;padding:13px 9px}
#header-tools,#topbar .header-link{font-family:"Poppins",sans-serif;letter-spacing:.1ex}@keyframes dash{0%{stroke-dashoffset:120}50%{stroke-dashoffset:30;transform:rotate(240deg)}100%{stroke-dashoffset:120;transform:rotate(720deg)}}#topbar{position:absolute;left:0px;width:100%;height:81px;top:0px;box-sizing:border-box;border-bottom:1px solid #f5f5f5;box-shadow:1px 1px 1px 1px rgba(0,0,0,.02)}#topbar .header-link{position:relative;display:inline-block;font-size:18px;color:#666;padding-left:35px;cursor:pointer;background:transparent}#topbar .header-link::before{top:50%;transform:translate(0, -50%);position:absolute;display:block;content:"\a";width:23px;height:24px;background-size:contain;background-repeat:no-repeat;background-position:center;left:0}@media(max-width: 767px){#topbar .header-link{overflow:hidden;text-indent:150%;white-space:nowrap;width:20px;padding-left:0;padding-right:0}#topbar .header-link::before{width:20px;height:20px}}@media(max-width: 495px){#topbar #header-settings{display:none}}@media(max-width: 767px){#topbar{height:60px}}#header-settings::before{background-image:url(/images/icon-startover-small.svg)}#header-about::before{background-image:url(/images/icon-about-small.svg)}#toplinks{top:50%;transform:translate(0, -50%);position:absolute;right:20px}#toplinks>button,#toplinks>div{margin-left:30px}@media(max-width: 767px){#toplinks>button,#toplinks>div{margin-left:15px}}@media(max-width: 767px){#toplinks{height:34px}}#header-tools{position:absolute;left:20px;top:50%;width:40px;height:40px;padding:0;overflow:hidden;transform:translate(0, -50%);border:0;border-radius:50%;background-color:transparent;background-image:url(/images/icon-tools.svg);background-position:center;background-repeat:no-repeat;background-size:contain;color:transparent;cursor:pointer;font-size:0}#header-tools:hover{background-color:#f5f5f5}#header-tools[disabled]{opacity:.3}#header-tools[disabled]:hover{background-color:transparent}@media(max-width: 767px){#header-tools{left:16px}}#header-tools.fade{opacity:.2}#header-logo{left:50%;top:50%;transform:translate(-50%, -50%);position:absolute;font-family:"Quicksand",sans-serif;text-transform:uppercase;font-weight:700;text-align:center;font-size:20px;letter-spacing:2px}@media(max-width: 767px){#header-logo{font-size:17px}}
#share-modal #share-saved .short-url,#share-modal #share-embed textarea{font-family:"Poppins",sans-serif;letter-spacing:.1ex}.open-share.modal .circular-loader{height:100%;width:100%;position:absolute;top:0;left:0;transition:all .1s linear}.open-share.modal .circular-loader .loader-path{stroke:#16a8f0;stroke-dasharray:120;animation:dash 1.5s linear 0s infinite;animation-fill-mode:both;stroke-linecap:round;transform-origin:center center}@keyframes dash{0%{stroke-dashoffset:120}50%{stroke-dashoffset:30;transform:rotate(240deg)}100%{stroke-dashoffset:120;transform:rotate(720deg)}}#share-modal .share-footer{color:#666;font-size:18px;text-transform:uppercase;margin-top:60px}#share-modal .share-footer>div{display:inline-block;margin:0 10px;cursor:pointer}@media(max-width: 767px){#share-modal .share-footer{display:none}}#share-modal #share-embed{display:none;padding:50px 0;color:#666}#share-modal #share-embed h3{font-weight:400}#share-modal #share-embed .expandable-inner{text-align:left}#share-modal #share-embed textarea{border:2px #f5f5f5 solid;width:100%;height:110px;padding:15px;color:#666;font-size:14px;line-height:1.7;max-width:450px}#share-modal #share-embed p{font-size:18px}#share-modal #share-saved{padding:100px 0;color:#666}#share-modal #share-saved .short-url{color:#666;font-size:32px;width:500px;padding:36px 48px;text-align:center;border:2px #f5f5f5 solid}@media(max-width: 767px){#share-modal #share-saved .short-url{font-size:18px;line-height:32px;padding:10px;max-width:450px;width:100%;text-align:center}}#share-modal.show-embed #share-embed{display:block}#share-modal.show-embed #toggle-share-embed span{transform:rotate(180deg)}#share-modal .saved-text{display:block;margin-bottom:40px;font-size:32px;line-height:1.4}@media(max-width: 767px){#share-modal .saved-text{font-size:18px;margin-bottom:20px}}#share-modal #copy-link{color:#16a8f0;font-size:24px;display:block;margin:15px auto 37px;cursor:pointer}@media(max-width: 767px){#share-modal #copy-link{font-size:18px}}#share-modal #share-facebook{margin-right:30px}#share-modal #share-facebook:before{background-image:url(/images/icon-round-facebook.svg)}#share-modal #share-facebook:after{content:"Facebook"}@media(max-width: 767px){#share-modal #share-facebook{margin-top:20px;margin-right:10px}}#share-modal #share-twitter:before{background-image:url(/images/icon-round-twitter.svg)}#share-modal #share-twitter:after{content:"Twitter"}@media(max-width: 767px){#share-modal #share-twitter{margin-top:20px}}#share-modal #toggle-share-embed span{background:url(/images/icon-down-caret.svg) no-repeat right center;display:inline-block;width:13px;height:8px;top:-2px;position:relative;margin-left:8px}@media(max-width: 767px){#share-modal #toggle-share-embed span{top:-2px;margin-left:8px}}#share-modal #iframe-code{width:450px}@media(max-width: 767px){#share-modal #iframe-code{width:auto}}#share-modal #copy-iframe{color:#16a8f0;cursor:pointer}#share-modal .share-center{font-size:18px;letter-spacing:0;margin-top:30px;text-align:center;line-height:1.5}.open-share.modal{background:transparent;transition:background-color .3s}.open-share.modal .saved-circle{position:absolute;width:80px;height:80px;bottom:28px;right:20px}@media(min-width: 768px)and (max-width: 959px){.open-share.modal .saved-circle{width:60px;height:60px;bottom:34px;right:21px}}@media(max-width: 767px){.open-share.modal .saved-circle{width:54px;bottom:18px;height:54px;left:78.5vw;transform:translateX(-50%)}}@media(max-width: 495px){.open-share.modal .saved-circle{bottom:11px;left:70vw}}.open-share.modal #cancel{display:none}.open-share.modal #share-modal{transition:opacity .3s;opacity:0;pointer-events:none}@media(max-width: 767px){.open-share.modal.bottom-expanded .saved-circle{bottom:79px}}.open-share.modal.data-loaded{background:#fff;display:flex;align-items:center;justify-items:center;justify-content:center}.open-share.modal.data-loaded .saved-circle{display:none}.open-share.modal.data-loaded #share-modal{opacity:1;pointer-events:auto}.open-share.modal.data-loaded #cancel{display:block}body.touch-device #share-modal .share-footer{display:none}
@keyframes dash{0%{stroke-dashoffset:120}50%{stroke-dashoffset:30;transform:rotate(240deg)}100%{stroke-dashoffset:120;transform:rotate(720deg)}}#gamepad{position:absolute;height:48px;padding:7px 9px;border-radius:24px;z-index:1;left:65px;top:14px}#gamepad .button{height:34px;width:34px;padding-top:34px;overflow:hidden;display:none;background:transparent;position:relative;margin-left:9px;float:left}#gamepad .button:before{background-image:url(/images/gamepad/left.svg);content:"\a";position:absolute;height:32px;width:32px;display:block;top:1px;left:1px;background-position:center;background-repeat:no-repeat;background-size:contain}#gamepad::before{content:"\a"}#gamepad #gamepad-toggle-button{display:inline-block;margin-left:0}#gamepad #gamepad-toggle-button::before{background-image:url(/images/icon-gamepad.svg);background-size:83%;background-color:transparent;border-radius:0}#gamepad #gamepad-up-button::before{background-image:url(/images/gamepad/up.svg)}#gamepad #gamepad-down-button::before{background-image:url(/images/gamepad/down.svg)}#gamepad #gamepad-right-button::before{background-image:url(/images/gamepad/right.svg)}#gamepad #gamepad-return-button{width:65px}#gamepad #gamepad-return-button::before{width:63px;background-image:url(/images/gamepad/return.svg)}#gamepad.expand{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.03)}#gamepad.expand .button{display:inline-block}#gamepad.expand #gamepad-toggle-button::before{background-image:url(/images/icon-x.svg);background-size:67%;border:1px transparent solid}@media(max-width: 767px){#gamepad{display:none}}
#tempo-slider input.input-number,#tempo-slider,#reset-button,#play-button,#bottom .clear-button,#bottom .button{font-family:"Poppins",sans-serif;letter-spacing:.1ex}@keyframes dash{0%{stroke-dashoffset:120}50%{stroke-dashoffset:30;transform:rotate(240deg)}100%{stroke-dashoffset:120;transform:rotate(720deg)}}#bottom{border-top:1px solid #f5f5f5;position:absolute;left:0px;bottom:0px;width:100%;height:109px;font-size:12px;text-align:center;background:#fff}#bottom .button{background:transparent;cursor:pointer;position:relative;overflow:hidden;padding-left:0;padding-right:0;min-width:62px;padding-top:65px;font-size:15px;color:#666;width:9.5ch;display:inline-block;margin-left:8px}#bottom .button::selection{background:none}#bottom .button:hover:before{background-color:#f5f5f5}#bottom .button[disabled]{opacity:.3}#bottom .button[disabled]:hover:before{background-color:transparent}#bottom .button:before{content:"\a";position:absolute;background-position:center;background-repeat:no-repeat;top:0;border-radius:50%;background-size:contain}#bottom .button:before{left:50%;transform:translate(-50%, 0);position:absolute;width:60px;height:60px;line-height:60px}@media(max-width: 767px){#bottom .button{font-size:10px;min-width:42px;width:54px;padding-top:42px;height:calc(1.6em + 40px)}#bottom .button:before{width:40px;height:40px;line-height:40px}#bottom .button span{display:none}}@media(min-width: 768px)and (max-width: 959px){#bottom .button{min-width:46px;padding-top:46px;font-size:12px}#bottom .button:before{width:44px;height:44px;line-height:44px}}#bottom .button:before{border:1px solid rgba(0,0,0,.1)}@media(min-width: 768px)and (max-width: 959px){#bottom .button{margin-left:4px}}@media(max-width: 767px){#bottom .button{display:block;position:absolute;margin-left:0px;transform:translateX(-50%)}}#bottom .clear-button{background:transparent;cursor:pointer;position:relative;overflow:hidden;padding-left:0;padding-right:0;min-width:62px;padding-top:65px;font-size:15px;color:#666;display:inline-block}#bottom .clear-button::selection{background:none}#bottom .clear-button:hover:before{background-color:#f5f5f5}#bottom .clear-button[disabled]{opacity:.3}#bottom .clear-button[disabled]:hover:before{background-color:transparent}#bottom .clear-button:before{content:"\a";position:absolute;background-position:center;background-repeat:no-repeat;top:0;border-radius:50%;background-size:contain}#bottom .clear-button:before{left:50%;transform:translate(-50%, 0);position:absolute;width:60px;height:60px;line-height:60px}@media(max-width: 767px){#bottom .clear-button{font-size:10px;min-width:42px;width:54px;padding-top:42px;height:calc(1.6em + 40px)}#bottom .clear-button:before{width:40px;height:40px;line-height:40px}#bottom .clear-button span{display:none}}@media(min-width: 768px)and (max-width: 959px){#bottom .clear-button{min-width:46px;padding-top:46px;font-size:12px}#bottom .clear-button:before{width:44px;height:44px;line-height:44px}}#bottom .clear-button:hover::before{background-color:transparent}#bottom #bottom-expand-button{display:none}@media(max-width: 767px){#bottom #bottom-expand-button{display:block;position:absolute;right:16px;top:15px}}#bottom #meter-button{display:none}#bottom #meter-button::before{background-image:url(/images/icon-meter.svg)}@media(max-width: 767px){#bottom #meter-button{display:block;top:13px;left:45.5vw;z-index:4}}@media(max-width: 495px){#bottom #meter-button{top:5px;left:70vw}}#bottom #meter-button.expand.button:before{border-color:transparent}#bottom #meter-button.expand.button:hover:before{background-color:transparent}#bottom #bottom-left .button,#bottom #bottom-left #play-button{float:left}@media(max-width: 767px){#bottom #bottom-left .button,#bottom #bottom-left #play-button{float:none}}#bottom #bottom-right .button{width:8.5ch}@media(max-width: 767px){#bottom{height:80px}}@media(max-width: 495px){#bottom{height:125px}}#bottom-left{top:50%;transform:translate(0, -50%);position:absolute;left:20px}@media(max-width: 767px){#bottom-left{position:static;top:0;transform:none}#bottom-left::after{position:absolute;width:1px;content:"\a";background-color:#f5f5f5;height:60px;left:17vw;top:10px}}@media(max-width: 495px){#bottom-left::after{height:100px;left:26vw;top:13px}}#bottom-right{top:50%;transform:translate(0, -50%);position:absolute;right:20px}@media(max-width: 767px){#bottom-right{position:static;top:0;transform:none}#bottom-right::after{position:absolute;width:1px;content:"\a";background-color:#f5f5f5;height:60px;left:85vw;top:10px}}@media(max-width: 495px){#bottom-right::after{display:none}}#play-button{background:transparent;cursor:pointer;position:relative;overflow:hidden;padding-left:0;padding-right:0;height:80px;width:80px;display:inline-block;margin-right:20px}#play-button::selection{background:none}#play-button:hover:before{background-color:#f5f5f5}#play-button[disabled]{opacity:.3}#play-button[disabled]:hover:before{background-color:transparent}#play-button:before{content:"\a";position:absolute;background-position:center;background-repeat:no-repeat;top:0;border-radius:50%;background-size:contain}#play-button:before{left:0;width:80px;height:80px;line-height:80px}@media(max-width: 767px){#play-button{width:60px;height:60px}#play-button:before{width:60px;height:60px;line-height:60px}}@media(min-width: 768px)and (max-width: 959px){#play-button{min-width:64px;width:64px;padding-top:64px;height:64px}#play-button:before{width:64px;height:64px;line-height:64px}}#play-button.playing:before{background-image:url(/images/icon-stop.svg);background-position:center}#play-button:before{background-color:#16a8f0;background-image:url(/images/icon-play.svg);background-position:55%;background-size:34%;text-align:center;text-transform:uppercase}#play-button:hover{margin-right:20px}#play-button:hover:before{background-color:#57c1f9}@media(min-width: 768px)and (max-width: 959px){#play-button{margin-right:16px}#play-button:hover{margin-right:16px}}@media(max-width: 767px){#play-button{position:absolute;left:8vw;top:10px;transform:translateX(-50%)}}@media(max-width: 495px){#play-button{left:13vw;top:31px}}#instrument-toggle-button{width:9.6ch}#instrument-toggle-button.instrument-piano::before{background-image:url(/images/instruments/tonal-piano.svg)}#instrument-toggle-button.instrument-woodwind::before{background-image:url(/images/instruments/tonal-woodwind.svg)}#instrument-toggle-button.instrument-strings::before{background-image:url(/images/instruments/tonal-violin.svg)}#instrument-toggle-button.instrument-marimba::before{background-image:url(/images/instruments/tonal-marimba.svg)}#instrument-toggle-button.instrument-synth::before{background-image:url(/images/instruments/tonal-synth.svg)}@media(max-width: 767px){#instrument-toggle-button{top:13px;left:23.5vw}}@media(max-width: 495px){#instrument-toggle-button{top:5px;left:36vw}}#percussion-toggle-button{width:9ch;margin-left:8px}#percussion-toggle-button.instrument-conga::before{background-image:url(/images/instruments/perc-conga.svg)}#percussion-toggle-button.instrument-electronic::before{background-image:url(/images/instruments/perc-drum-machine.svg)}#percussion-toggle-button.instrument-kit::before{background-image:url(/images/instruments/perc-snare-drum.svg)}#percussion-toggle-button.instrument-blocks::before{background-image:url(/images/instruments/perc-woodblock.svg)}@media(max-width: 767px){#percussion-toggle-button{top:13px;left:34.5vw}}@media(max-width: 495px){#percussion-toggle-button{top:5px;left:53vw}}#undo-button::before{background-image:url(/images/icon-undo.svg)}@media(max-width: 767px){#undo-button{top:13px;left:67.5vw}}@media(max-width: 495px){#undo-button{top:65px;left:53vw}}#reset-button{background:transparent;cursor:pointer;position:relative;overflow:hidden;padding-left:0;padding-right:0;min-width:62px;padding-top:65px;font-size:15px;color:#666;display:none}#reset-button::selection{background:none}#reset-button:hover:before{background-color:#f5f5f5}#reset-button[disabled]{opacity:.3}#reset-button[disabled]:hover:before{background-color:transparent}#reset-button:before{content:"\a";position:absolute;background-position:center;background-repeat:no-repeat;top:0;border-radius:50%;background-size:contain}#reset-button:before{left:50%;transform:translate(-50%, 0);position:absolute;width:60px;height:60px;line-height:60px}@media(max-width: 767px){#reset-button{font-size:10px;min-width:42px;width:54px;padding-top:42px;height:calc(1.6em + 40px)}#reset-button:before{width:40px;height:40px;line-height:40px}#reset-button span{display:none}}@media(min-width: 768px)and (max-width: 959px){#reset-button{min-width:46px;padding-top:46px;font-size:12px}#reset-button:before{width:44px;height:44px;line-height:44px}}#bottom #reset-button{display:none}#bottom #reset-button::before{background-image:url(/images/icon-startover-small.svg)}#bottom #reset-button:hover:before{background-color:#57c1f9}@media(max-width: 767px){#bottom #reset-button{display:none}}@media(max-width: 495px){#bottom #reset-button{display:inline-block}}@media(max-width: 495px){#reset-button{top:65px;left:87vw}}#bottom #settings-button::before{background-image:url(/images/icon-settings-gray.svg)}@media(max-width: 767px){#bottom #settings-button{display:inline-block}}@media(max-width: 767px){#settings-button{top:13px;left:56.5vw}}@media(max-width: 495px){#settings-button{top:65px;left:36vw}}#save-button::before{background-image:url(/images/icon-save.svg)}@media(max-width: 767px){#save-button{top:13px;left:78.5vw}}@media(max-width: 495px){#save-button{top:65px;left:70vw}}#bottom #midi-button.button{transition:opacity .1s;pointer-events:initial;display:none}#bottom #midi-button.button.visible{display:inline-block}#bottom #midi-button.button.recording{color:"red"}#bottom #midi-button.button.recording::before{background-color:"red";border:1px solid "red"}#bottom #midi-button.button.recording:hover::before{background-color:"red"}@media(max-width: 767px){#bottom #midi-button.button{display:none;opacity:0;pointer-events:none}}#bottom #mic-button{display:none}#bottom #mic-button.visible{display:inline-block}#mic-button{opacity:1;pointer-events:initial}#mic-button::before{background-image:url(/images/icon-mic.svg)}#mic-button #level{position:absolute;top:0px;left:0px;width:100%;height:100%;border:1px solid "red";pointer-events:none;border-radius:50%;box-sizing:border-box;opacity:0;width:100px;height:100px;left:-20px;top:-19px}#mic-button.recording{color:"red"}#mic-button.recording #level{opacity:1}#mic-button.recording::before{background-color:"red";background-image:url(/images/icon-mic-white.svg);border:1px solid "red"}#mic-button.recording:hover::before{background-color:"red"}@media(max-width: 767px){#mic-button{right:auto;width:42px;top:13px;left:92vw}#mic-button.mobile-pointer-none{pointer-events:none}}@media(max-width: 495px){#mic-button{top:5px;left:87vw}}#tempo-slider{left:50%;transform:translate(-50%, 0);position:absolute;left:calc(50% - 31px);top:calc(50% - 15px);text-align:center;min-width:200px;width:calc(100% - 780px);max-width:450px}@media(min-width: 768px){#tempo-slider.has-midi{left:calc(50% - 57px)}}@media(min-width: 768px)and (max-width: 959px){#tempo-slider.has-midi{left:calc(50% - 49px)}}#tempo-slider .range-cover{display:inline-block;left:calc(60px + 16px);height:28px;position:absolute;width:calc(100% - 120px - 26px)}#tempo-slider input.input-number{margin-left:10px;color:#16a8f0;font-size:15px;border:none;float:right;margin-top:2px;width:40px;padding:0}#tempo-slider label{color:#666;float:left;font-size:15px;display:block;line-height:25px;margin-right:10px}@media(min-width: 768px)and (max-width: 959px){#tempo-slider{width:calc(100% - 660px);left:calc(50% - 13px)}#tempo-slider .range-cover{left:calc(60px + 5px);width:calc(100% - 120px - 6px)}}@media(max-width: 767px){#tempo-slider{border:1px solid #f5f5f5;height:250px;width:43px;top:-196px;transform:translateX(-50%);border-radius:24px;left:45.5vw;display:none;background:#fff;min-width:0}#tempo-slider label{display:none}#tempo-slider.show{overflow:visible;display:block}#tempo-slider .range-cover{transform:rotate(270deg) translate(-108px, -133px);width:calc(172px - 18px);margin:0}#tempo-slider input.input-number{margin-top:-10px;float:none;position:absolute;top:22px;left:3px;margin-left:0;text-align:center;width:38px;pointer-events:none}}@media(max-width: 495px){#tempo-slider{top:-203px;left:70vw}}