body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@keyframes cofStaffSlideIn{0%{opacity:0;transform:translateX(60vw)}to{opacity:1;transform:translateX(0)}}@keyframes cofKeysFadeIn{0%{opacity:0}to{opacity:1}}.cof-staff-slide-in{animation:cofStaffSlideIn 2s ease forwards}.cof-keys-fade-in{animation:cofKeysFadeIn 2s ease forwards}@keyframes eqBar1{0%,to{height:3px}50%{height:13px}}@keyframes eqBar2{0%,to{height:11px}50%{height:3px}}@keyframes eqBar3{0%,to{height:6px}33%{height:13px}66%{height:2px}}@keyframes eqBar4{0%,to{height:9px}40%{height:2px}80%{height:12px}}.eq-bar{display:inline-block}.eq-bar-1{animation:eqBar1 .75s ease-in-out infinite}.eq-bar-2{animation:eqBar2 .75s ease-in-out .15s infinite}.eq-bar-3{animation:eqBar3 .9s ease-in-out .05s infinite}.eq-bar-4{animation:eqBar4 .8s ease-in-out .25s infinite}.song-chord-label{font-size:15px}.song-lyric-word{color:#ffffffbf;font-size:15px;transition:color .15s ease}.song-chord-plain,.song-lyric-plain{font-size:15px}@media (min-width:768px){::-webkit-scrollbar{height:0;width:6px}::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}::-webkit-scrollbar-thumb{background:#f0a040;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffb347}.song-chord-label{font-size:1.65rem}.song-lyric-word{font-size:1.5rem}.song-chord-plain{font-size:1.65rem}.song-lyric-plain{font-size:1.5rem}}@font-face{font-display:swap;font-family:Decoracha;font-style:normal;font-weight:400;src:url(/static/media/Decoracha-Regular.0d54212b6944cf9ddac4.otf) format("opentype")}@font-face{font-display:swap;font-family:Realbook;font-style:normal;font-weight:400;src:url(/static/media/realbook-webfont.95e9b077bf966484e96a.ttf) format("truetype")}@font-face{font-display:swap;font-family:"Awesomeserif";font-style:normal;font-weight:400;src:url(/static/media/AwesomeSerif-MediumTall.f7645aa0652c20a85729.otf) format("opentype")}@keyframes drawArc{0%{stroke-dashoffset:var(--arc-length)}to{stroke-dashoffset:0}}.app{font-feature-settings:"ss05" 1,"liga" 0,"clig" 0,"calt" 0,"salt" 0;-webkit-touch-callout:none;background-color:#111;display:flex;flex-direction:column;font-family:Decoracha,Times New Roman,serif;font-style:normal;font-weight:600;min-height:100vh;padding:0;-webkit-user-select:none;user-select:none}.app.show-debug>*{outline:2px dotted red!important;position:relative}.app.show-debug>:after{background:#f00c;color:#fff;content:"<unnamed section>";font-family:monospace;font-size:10px;padding:2px 6px;pointer-events:none;position:absolute;right:0;top:0;white-space:nowrap;z-index:10000}.app.show-debug .keyboard-wrapper:after,.app.show-debug .staff-container:after,.app.show-debug .ui-panel:after{display:none}.app.show-debug .bottom-menu,.app.show-debug .keyboard-wrapper,.app.show-debug .keys-group,.app.show-debug .mode-subtoggle-container,.app.show-debug .note-buttons,.app.show-debug .staff-and-mode-row,.app.show-debug .staff-panel,.app.show-debug .ui-left,.app.show-debug .ui-right,.app.show-debug .ui-row,.app.show-debug .ui-spacer{outline:2px dotted lime!important}.app.show-debug .ui-panel{outline:2px dotted blue!important}.app.show-debug .ui-main-content{outline:2px dotted pink!important}.app.show-debug .staff-container{outline:2px dotted red!important}.app.show-debug .debug-controls-wrapper{outline:2px dotted #ff0!important}.app.show-debug .bottom-menu,.app.show-debug .keyboard-wrapper,.app.show-debug .keys-group,.app.show-debug .mode-subtoggle-container,.app.show-debug .note-buttons,.app.show-debug .staff-and-mode-row,.app.show-debug .staff-container,.app.show-debug .staff-panel,.app.show-debug .ui-left,.app.show-debug .ui-main-content,.app.show-debug .ui-panel,.app.show-debug .ui-row,.app.show-debug .ui-spacer,.app.show-debug>*{background-clip:content-box!important;box-shadow:inset 0 0 0 100px #ffa50033!important}.app.show-debug .keyboard-wrapper:before{content:"keyboard-wrapper"}.app.show-debug .ui-panel:before{content:"ui-panel"}.app.show-debug .note-buttons:before{content:"note-buttons"}.app.show-debug .keys-group:before{content:"keys-group"}.app.show-debug .mode-subtoggle-container:before{content:"mode-subtoggle-container"}.app.show-debug .staff-and-mode-row:before{content:"staff-and-mode-row"}.app.show-debug .staff-container:before{content:"staff-container"}.app.show-debug .staff-panel:before{content:"staff-panel"}.app.show-debug .ui-left:before{content:"ui-left"}.app.show-debug .ui-main-content:before{content:"ui-main-content"}.app.show-debug .ui-right:before{content:"ui-right"}.app.show-debug .bottom-menu:before{content:"bottom-menu"}.app.show-debug .ui-row:before{content:"ui-row"}.app.show-debug .ui-spacer:before{content:"ui-spacer"}.app.show-debug .debug-controls-wrapper:before{content:"debug-controls-wrapper"}.app.show-debug .bottom-menu:before,.app.show-debug .debug-controls-wrapper:before,.app.show-debug .keyboard-wrapper:before,.app.show-debug .keys-group:before,.app.show-debug .mode-subtoggle-container:before,.app.show-debug .note-buttons:before,.app.show-debug .staff-and-mode-row:before,.app.show-debug .staff-container:before,.app.show-debug .staff-panel:before,.app.show-debug .ui-left:before,.app.show-debug .ui-main-content:before,.app.show-debug .ui-panel:before,.app.show-debug .ui-row:before,.app.show-debug .ui-spacer:before{background:#000c;color:lime;font-family:monospace;font-size:10px;left:0;padding:2px 6px;pointer-events:none;position:absolute;top:0;white-space:nowrap;z-index:10000}.app button,.app input,.app label,.app select,.app textarea{font-feature-settings:inherit;font-family:inherit}.keyboard-wrapper{-webkit-touch-callout:none;margin:10px auto 0;max-width:1440px;position:relative;touch-action:none;transform-origin:center center;-webkit-user-select:none;user-select:none;width:100%}.keyboard-wrapper.kb-panning{opacity:.85}.keyboard-wrapper.elements-kb{z-index:2}.keyboard-wrapper img{-webkit-user-drag:none;pointer-events:none}.keyboard-wrapper *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.keyboard-img{display:block;height:auto;pointer-events:none;width:100%}.key-stack{pointer-events:none;position:absolute;z-index:1}.kb-interactive .key-stack{cursor:pointer;pointer-events:auto;touch-action:none}.kb-interactive .key-stack,.kb-interactive .key-stack *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.key-png{display:block;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;width:auto;will-change:transform}.key-frame-overlay{left:0;position:absolute;top:0}.key-mask{height:100%;inset:0;mix-blend-mode:multiply;pointer-events:none;position:absolute;transform-origin:bottom center;width:100%;will-change:transform,opacity}.asharp4-mask,.csharp4-mask,.dsharp4-mask,.fsharp4-mask,.gsharp4-mask{z-index:2}.note-letter{height:100%;inset:0;mix-blend-mode:multiply;opacity:1;pointer-events:none;position:absolute;width:100%}.keyboard-wrapper.ls-mode .note-letter{opacity:0!important}.e3-letter,.f3-letter{transform:translateY(1px)}.overlay-color-label{color:#fff;font-family:Decoracha,serif;font-weight:600}.mode-toggle{display:flex;font-size:48px;gap:8px}.staff-container{align-items:center;display:flex;gap:40px;margin-left:auto;margin-right:auto;margin-top:-50px;width:-webkit-fit-content;width:fit-content}.inversion-controls-container{align-items:center;display:flex;flex-shrink:0;margin-right:20px}.inversion-controls{display:flex;flex-direction:column;gap:0}.mode-subtoggle-container{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;margin-left:-200px;margin-top:60px;position:relative;z-index:10}.mode-subtoggle{display:flex;flex-direction:column;gap:4px}.mode-subtoggle button{align-items:center;background:#0000;border:1px solid #ffffff4d;border-radius:8px;color:inherit;cursor:pointer;display:flex;font-size:inherit;justify-content:center;line-height:1.4;opacity:.6;padding:9px 14px 3px;pointer-events:auto;position:relative;transition:opacity .12s ease,border-color .12s ease}.mode-subtoggle button:hover{opacity:.9}.mode-subtoggle button.is-active{border-color:#fff;opacity:1}.mode-subtoggle button.is-dimmed{opacity:.25}.mode-subtoggle button.is-dimmed:hover{opacity:.7}.chord-quality-btn{background:#fff!important;border:none!important;box-shadow:inset 0 3px 2px #000000e6,inset -3px 0 2px #000000e6,inset 0 -1px 1px #000000e6,inset 1px 0 1px #00000080!important;color:#000!important;opacity:1!important;padding:10px 14px 3px!important;transition:border-color .12s ease,box-shadow .12s ease,opacity .12s ease!important}.category-label-btn{background:none!important;border:none!important;color:#fff!important;cursor:pointer;font-family:Decoracha,serif!important;font-size:33px!important;line-height:22px!important;opacity:.65;overflow:visible!important;padding:0 10px!important;transition:opacity .12s ease}.category-label-btn:hover{opacity:.9!important}.category-label-btn.is-active{opacity:1!important}.category-label-btn.is-dimmed{opacity:.25!important}.category-label-btn.is-dimmed:hover{opacity:.65!important}.chord-quality-btn:hover{border-color:var(--key-color)!important;box-shadow:0 0 0 1px var(--key-color)!important}.chord-quality-btn.is-active{background:var(--key-color)!important;border-color:var(--key-color)!important;box-shadow:inset 0 3px 2px #000000e6,inset -3px 0 2px #000000e6,inset 0 -1px 1px #000000e6,inset 1px 0 1px #00000080!important;color:#000!important}.staff-panel{--staff-dot-x:130px;--treble-line-start:154px;--bass-line-start:calc(var(--treble-line-start) + 135px);--staff-line-gap:15px;margin:-40px auto 0;overflow:visible;pointer-events:none;transform:scale(1.05);transform-origin:top center;width:507px}.staff-panel,.staff-panel img{mix-blend-mode:normal;position:relative}.staff-panel img{-webkit-clip-path:inset(0 50% 0 0);clip-path:inset(0 50% 0 0);display:block;filter:invert(1) brightness(.94) drop-shadow(1px 2px 3px rgba(0,0,0,.9));height:auto;opacity:1;width:100%;z-index:1}.staff-panel .staff-note-svg{filter:drop-shadow(1px 2px 3px rgba(0,0,0,.9));mix-blend-mode:normal}.staff-note-dot{background:#ff000059;border-radius:50%;height:16px;left:0;outline:2px solid red;position:absolute;width:16px;z-index:3}.staff-note-svg{height:100%;mix-blend-mode:overlay;opacity:1;overflow:hidden;width:100%}.staff-note-wrapper{align-items:center;display:flex;height:16px;justify-content:center;position:absolute;width:16px;z-index:3}.staff-note-wrapper[data-scale-note-idx]{transform-origin:center center}.staff-note-wrapper[data-scale-note-idx] .staff-note-svg{filter:saturate(1) drop-shadow(1px 2px 3px rgba(0,0,0,.9))}@keyframes scale-note-pulse-transform{0%{transform:scale(1)}35%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes scale-note-pulse-filter{0%{filter:saturate(1) drop-shadow(1px 2px 3px rgba(0,0,0,.9))}35%{filter:saturate(1) brightness(1.2) drop-shadow(1px 2px 3px rgba(0,0,0,.9))}80%{filter:saturate(1) brightness(1.2) drop-shadow(1px 2px 3px rgba(0,0,0,.9))}to{filter:saturate(1) drop-shadow(1px 2px 3px rgba(0,0,0,.9))}}.staff-note-wrapper.scale-note-active{animation:scale-note-pulse-transform .6s ease-in-out forwards;animation:scale-note-pulse-transform var(--note-anim-dur,.6s) ease-in-out forwards}.staff-note-wrapper.scale-note-active .staff-note-svg{animation:scale-note-pulse-filter .6s ease-in-out forwards;animation:scale-note-pulse-filter var(--note-anim-dur,.6s) ease-in-out forwards}.staff-note-wrapper[data-scale-note-idx].scale-note-hidden{opacity:0}.staff-note-wrapper[data-scale-note-idx].scale-note-next{opacity:1}.staff-note-wrapper[data-scale-note-idx].scale-note-next .staff-note-svg [fill="#000"],.staff-note-wrapper[data-scale-note-idx].scale-note-next .staff-note-svg [fill="#000000"],.staff-note-wrapper[data-scale-note-idx].scale-note-next .staff-note-svg [fill=black],.staff-note-wrapper[data-scale-note-idx].scale-note-next .staff-note-svg path:not([fill]){fill:#fff!important}.staff-note-wrapper[data-scale-note-idx].scale-note-next>div[style*="1.5px"]{background:#fff!important}@keyframes note-played-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}@keyframes note-played-ripple{0%{opacity:.45;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}.staff-note-wrapper[data-scale-note-idx].scale-note-played{animation:note-played-pop .4s ease-out forwards;opacity:1;transform-origin:50% 70%}.staff-note-wrapper[data-scale-note-idx].scale-note-played:after{animation:note-played-ripple .5s ease-out forwards;border:1px solid #ffffffb3;border:1px solid var(--played-color,#ffffffb3);border-radius:50%;content:"";height:10px;left:42%;pointer-events:none;position:absolute;top:69%;width:10px}.staff-note-glyph{height:13.5px;left:50%;transform:translate(-50%,calc(-50% + 1px)) scale(1.1);width:13.5px}.staff-accidental,.staff-note-glyph{pointer-events:none;position:absolute;top:50%}.staff-accidental{height:20px;left:-12px;opacity:1;transform:translateY(-50%) scale(1.44);width:auto}.staff-accidental.sharp{height:20px}.staff-accidental.double-sharp{height:10px;left:-16px;width:10px}.staff-accidental.flat{height:20px}.staff-accidental.double-flat,.staff-accidental.flat{transform:translateY(-50%) translateY(-7.5px) scale(1.44)}.staff-accidental.double-flat{display:flex;left:-21px;pointer-events:none;position:absolute;top:50%}.staff-accidental.double-flat svg{height:20px;margin-left:-1px;width:auto}.staff-accidental.double-flat svg:first-child{margin-left:0}.ledger-line{background-color:#fff;height:1.5px;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px}.ledger-line.ledger-above{transform:translate(-50%,-50%) translateY(-7.5px)}.ledger-line.ledger-below{transform:translate(-50%,-50%) translateY(7.5px)}.key-signature-accidental{pointer-events:none;z-index:3}.key-signature-accidental .staff-accidental{left:0;opacity:1;position:static;top:0;transform:none}.key-signature-accidental .key-sig-flat,.key-signature-accidental .key-sig-sharp{height:28px;width:auto}.staff-note-svg [fill="#000"],.staff-note-svg [fill="#000000"],.staff-note-svg [fill=black],.staff-note-svg path:not([fill]){fill:red;fill:var(--note-color,red)}.debug-controls-wrapper{background-color:#0000004d;border-radius:8px;color:#fff;display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px;padding:12px}.debug-controls-wrapper fieldset{border:1px solid #555;border-radius:6px;display:flex;flex-direction:column;gap:8px;padding:8px 12px}.debug-controls-wrapper legend{color:#aaa;padding:0 8px}.debug-slider-container{align-items:center;display:flex;gap:12px}.debug-slider-container label{-webkit-text-stroke:.6px currentColor}.debug-slider-container input[type=range]{-webkit-appearance:none;appearance:none;background:#555;border-radius:5px;height:3px;outline:none;transition:opacity .2s;width:150px}.debug-slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#f4efe6;border-radius:50%;cursor:pointer;height:14px;width:14px}.debug-slider-container input[type=range]::-moz-range-thumb{background:#f4efe6;border:none;border-radius:50%;cursor:pointer;height:14px;width:16px}.bpm-slider-vertical{-webkit-appearance:none;appearance:none;background:#0000;cursor:pointer;outline:none}.bpm-slider-vertical::-webkit-slider-runnable-track{background:#555;border-radius:2px;width:2px}.bpm-slider-vertical::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#f4efe6;border-radius:50%;cursor:pointer;height:14px;margin-left:-6px;width:14px}.bpm-slider-vertical::-moz-range-track{background:#555;border-radius:2px;width:2px}.bpm-slider-vertical::-moz-range-thumb{background:#f4efe6;border:none;border-radius:50%;cursor:pointer;height:14px;width:14px}.eq-bpm-fader{-webkit-appearance:none;appearance:none;background:#0000;cursor:grab;direction:rtl;height:260px;outline:none;padding:0;width:52px;writing-mode:vertical-lr}.eq-bpm-fader::-webkit-slider-runnable-track{background:linear-gradient(180deg,#e53935 0,#f0a040 45%,#4caf50);border:none;border-radius:6px;width:10px}.eq-bpm-fader::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(180deg,#f0f0f0,#c8c8c8);border:none;border-radius:5px;box-shadow:0 3px 10px #0000008c,inset 0 1px 0 #fff9;cursor:grab;height:22px;margin-left:-21px;width:52px}.eq-bpm-fader::-moz-range-track{background:linear-gradient(180deg,#e53935 0,#f0a040 45%,#4caf50);border:none;border-radius:6px;width:10px}.eq-bpm-fader::-moz-range-thumb{background:linear-gradient(180deg,#f0f0f0,#c8c8c8);border:none;border-radius:5px;box-shadow:0 3px 10px #0000008c;cursor:grab;height:22px;width:52px}.feel-slider{-webkit-appearance:none;appearance:none;background:#0000;cursor:grab;height:52px;outline:none;padding:0;width:100%}.feel-slider::-webkit-slider-runnable-track{background:linear-gradient(90deg,#4caf50 0,#f0a040 55%,#e53935);border:none;border-radius:6px;height:10px}.feel-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(180deg,#f0f0f0,#c8c8c8);border:none;border-radius:5px;box-shadow:0 3px 10px #0000008c,inset 0 1px 0 #fff9;cursor:grab;height:46px;margin-top:-18px;width:22px}.feel-slider::-moz-range-track{background:linear-gradient(90deg,#4caf50 0,#f0a040 55%,#e53935);border:none;border-radius:6px;height:10px}.feel-slider::-moz-range-thumb{background:linear-gradient(180deg,#f0f0f0,#c8c8c8);border:none;border-radius:5px;box-shadow:0 3px 10px #0000008c;cursor:grab;height:46px;width:22px}.debug-key-selector{align-items:center;margin-bottom:8px;width:100%}.debug-key-selector,.zoom-controls{display:flex;gap:8px}.mode-toggle button{background:none;border:none;color:inherit;font-size:inherit;line-height:.8;margin:-2px 0;opacity:.4;padding:0;transition:opacity .12s ease;white-space:nowrap}.mode-toggle button.is-active{opacity:1;text-decoration:none}.image-button{align-items:flex-end;background:#0000;border:none;box-sizing:border-box;display:flex;height:70px;justify-content:center;line-height:0;margin-left:-12px;overflow:hidden;padding:6px 0 0;transition:transform .12s ease,box-shadow .12s ease;width:70px}.image-button img{object-fit:contain}.image-button img,.image-button svg{display:block;height:80%;width:80%}.image-button:active:not(.db-button):not(.eb-button):not(.gb-button):not(.ab-button):not(.bb-button){transform:scale(.96)}.image-button.is-active:not(.db-button):not(.eb-button):not(.gb-button):not(.ab-button):not(.bb-button){animation:button-pop .16s ease-out}.kb-circle-btn{cursor:pointer;transition:transform .12s ease}.kb-circle-btn:active{transform:scale(.92)}.kb-circle-btn.kb-circle-pop{animation:button-pop .16s ease-out}@keyframes button-pop{0%{transform:scale(.92)}70%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes black-key-pop{0%{transform:translateX(-50%) scale(.736)}70%{transform:translateX(-50%) scale(.824)}to{transform:translateX(-50%) scale(.8)}}.note-buttons{align-items:flex-start;flex-wrap:wrap;margin:80px 0 60px}.keys-group,.note-buttons{display:flex;gap:0;position:relative}.keys-group{align-items:center;padding-top:40px}.db-button{left:64px;pointer-events:auto;position:absolute;top:0;transform:translateX(-50%) scale(.8);transform-origin:center center}.db-button svg{height:100%;pointer-events:none;width:100%}.db-button.is-active.image-button{animation:none}.eb-button{left:122px;pointer-events:auto;position:absolute;top:0;transform:translateX(-50%) scale(.8);transform-origin:center center}.eb-button svg{height:100%;pointer-events:none;width:100%}.eb-button.is-active.image-button{animation:none}.gb-button{left:238px;pointer-events:auto;position:absolute;top:0;transform:translateX(-50%) scale(.8);transform-origin:center center}.gb-button svg{height:100%;pointer-events:none;width:100%}.gb-button.is-active.image-button{animation:none}.ab-button{left:296px;pointer-events:auto;position:absolute;top:0;transform:translateX(-50%) scale(.8);transform-origin:center center}.ab-button svg{height:100%;pointer-events:none;width:100%}.ab-button.is-active.image-button{animation:none}.bb-button{left:353px;pointer-events:auto;position:absolute;top:0;transform:translateX(-50%) scale(.8);transform-origin:center center;z-index:10}.bb-button svg{height:100%;pointer-events:none;width:100%}.bb-button.is-active.image-button{animation:none}.ui-panel{align-items:center;background-color:#1b1b1b;border-radius:16px;box-sizing:border-box;color:#f4efe6;display:flex;flex-direction:column;font-size:22px;font-weight:400;gap:10px;margin-top:0;min-height:574px;padding:10px 20px;text-align:center;width:100%}.ui-top{align-items:start;display:grid;grid-template-columns:1fr auto 1fr;min-height:554px;position:relative;width:100%}.ui-left{align-items:flex-start;font-size:30%;gap:2px;justify-self:start;margin-left:20px;padding-top:90px}.ui-left,.ui-main-content{display:flex;flex-direction:column}.ui-main-content{align-items:center}.ui-right{align-items:flex-start;display:flex;flex-direction:column;justify-self:start;margin-left:80px}.ui-spacer{width:100%}.ui-hand-panel{align-items:center;display:flex;flex-direction:column;position:absolute;right:170px;top:90px}.ui-left .mode-toggle{align-items:flex-start;flex-direction:column;font-size:34.56px;gap:-10px}.ui-panel .overlay-color-label{color:inherit}.ui-panel button:not(.image-button){-webkit-text-stroke:.6px currentColor;background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0}.ui-panel button:not(.image-button):hover{text-decoration:underline}.ui-panel button:not(.image-button):disabled{cursor:not-allowed;opacity:.4}.ui-panel button:not(.image-button):disabled:hover{text-decoration:none}.ui-row{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.ui-row-wide{gap:24px}.bottom-menu{margin-top:100px;width:100%}.dim-slider{-webkit-appearance:none;appearance:none;background:#0000;cursor:pointer}.dim-slider::-webkit-slider-runnable-track{background:#ffffff4d;border-radius:1px;height:2px}.dim-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#f4efe6;border-radius:50%;height:10px;margin-top:-4px;width:10px}.dim-slider::-moz-range-track{background:#ffffff4d;border-radius:1px;height:2px}.dim-slider::-moz-range-thumb{background:#f4efe6;border:none;border-radius:50%;height:10px;width:10px}@keyframes kb-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.kb-pulse{animation:kb-pulse 1s ease-in-out infinite}.dim-slider-vert::-webkit-slider-runnable-track{background:#ffffff40;border-radius:1px;height:1px}.dim-slider-vert::-webkit-slider-thumb{-webkit-appearance:none;background:#f4efe6;border-radius:50%;height:6px;margin-top:-2.5px;width:6px}.dim-slider-vert::-moz-range-track{background:#ffffff40;border-radius:1px;height:1px}.dim-slider-vert::-moz-range-thumb{background:#f4efe6;border:none;border-radius:50%;height:6px;width:6px}.view2-key{transition:transform .1s ease,filter .1s ease,opacity .1s ease}.view2-key:hover{filter:brightness(1.25);opacity:1!important;transform:scale(1.08);z-index:10}@media (max-width:767px){body,html{max-width:100vw}.mobile-menu-btn,.ui-left{display:none!important}.ui-top{align-items:center!important;display:flex!important;flex-direction:column!important;grid-template-columns:none!important;min-height:0!important;min-height:auto!important;padding-top:10px}.ui-main-content,.ui-top{overflow:visible;width:100%}.ui-main-content{align-items:center;max-width:100vw}.ui-hand-panel{display:none!important}.note-buttons{display:flex;justify-content:center;margin:0 auto!important;max-width:100vw;overflow:hidden;width:100%}.keys-group{margin-bottom:-12px;margin-left:0!important;transform:scale(.72);transform-origin:top center}.staff-container{align-items:flex-start!important;flex-direction:row!important;margin-bottom:-132px!important;margin-left:0!important;overflow:visible!important;width:580px!important}.staff-container,.staff-container-scales{align-self:flex-start!important;margin-top:-20px!important}.staff-container-scales{margin-bottom:-80px!important;overflow:hidden!important;transform:scale(.67)!important}.staff-container-scales,.staff-container-scales .staff-panel{transform-origin:top left!important}.staff-container>div:first-child{flex-shrink:0!important;margin-bottom:0!important;overflow:visible!important;transform:none!important;width:320px!important}.mode-subtoggle-container{align-self:flex-start!important;flex-shrink:0!important;justify-content:center!important;margin-left:0!important;margin-top:30px;width:200px!important}.mode-subtoggle{align-items:flex-start!important;flex-direction:column!important;gap:8px!important}.chord-quality-btn{font-size:19px!important;padding:10px 6px 3px!important;text-align:center!important;width:95px!important}.keyboard-wrapper{margin-left:calc(50% - 483px)!important;margin-top:-130px!important;max-width:1094px!important;overflow:visible;width:1094px!important}.keyboard-wrapper.songs-active{margin-top:-120px!important}.app{overflow-x:clip}.mobile-hand-panel{display:flex;justify-content:center;padding:12px 0 80px;width:100%}}@media (min-width:768px){.keyboard-wrapper.songs-active{margin-top:-20px!important}}.keyboard-wrapper.song-maker-active{background:#0000;bottom:0!important;left:0!important;margin:0!important;max-width:100%!important;position:fixed!important;right:0!important;width:100%!important;z-index:50}.tp-show-layout [data-layout]{outline:2px solid;position:relative}.tp-show-layout [data-layout=title]{outline-color:#f0c040}.tp-show-layout [data-layout=score]{outline-color:#4a9eff}.tp-show-layout [data-layout=settings]{outline-color:#9f6fff}.tp-show-layout [data-layout=transport]{outline-color:#f75}.tp-show-layout [data-layout]:before{border-radius:0 0 4px 0;content:attr(data-layout);font-family:monospace;font-size:10px;font-weight:700;left:0;padding:1px 5px;pointer-events:none;position:absolute;top:0;z-index:9999}.tp-show-layout [data-layout=title]:before{background:#f0c040;color:#111}.tp-show-layout [data-layout=score]:before{background:#4a9eff;color:#fff}.tp-show-layout [data-layout=settings]:before{background:#9f6fff;color:#fff}.tp-show-layout [data-layout=transport]:before{background:#f75;color:#fff}.app.tutorial-prep-mode{position:relative}.app.tutorial-prep-mode:before{background-image:var(--tp-paper-img);background-position:50%;background-position:var(--tp-paper-pos,center);background-repeat:no-repeat;background-repeat:var(--tp-paper-repeat,no-repeat);background-size:cover;background-size:var(--tp-paper-size,cover);content:"";height:654px;height:calc(574px + var(--tp-paper-extra, 80px));left:0;mix-blend-mode:normal;mix-blend-mode:var(--tp-paper-blend,normal);pointer-events:none;position:absolute;right:0;top:0;z-index:0}.app.tutorial-prep-mode .ui-panel{background:#0000!important;height:574px;max-height:574px;overflow:hidden;position:relative;z-index:1}.app.tutorial-prep-mode .keyboard-wrapper{position:relative;z-index:1}.app.tutorial-prep-mode .ui-top{height:554px;min-height:0}.app.tutorial-prep-mode .ui-main-content{align-self:stretch;height:100%}@media (max-width:767px) and (orientation:landscape){.ui-panel.kb-landscape{min-height:0!important;padding-bottom:4px!important;padding-top:4px!important}.ui-top.kb-landscape{min-height:0!important;padding-top:0!important}}.mobile-menu-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1e1b1ceb;border:1px solid #fff3;border-radius:50%;bottom:24px;box-shadow:0 4px 20px #00000080;color:#fff;cursor:pointer;display:none;font-size:22px;height:52px;position:fixed;right:24px;width:52px;z-index:500}@media (max-width:767px){.mobile-menu-btn{align-items:center;display:flex;justify-content:center}}.mobile-menu-overlay{align-items:flex-end;background:#0009;display:flex;inset:0;position:fixed;z-index:900}.mobile-menu-panel{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#161314f7;border-radius:20px 20px 0 0;padding:24px 24px 40px;position:relative;width:100%}.mobile-menu-close{background:none;border:none;color:#ffffff80;cursor:pointer;font-size:20px;position:absolute;right:20px;top:16px}.mobile-menu-nav{display:flex;flex-direction:column;gap:4px;margin-top:8px}.mobile-menu-nav-btn{background:none;border:none;color:#ffffff80;cursor:pointer;font-family:Decoracha,serif;font-size:28px;padding:10px 0;text-align:left;transition:color .12s ease,opacity .12s ease}.mobile-menu-nav-btn.is-active{color:#fff}.mobile-menu-nav-btn:hover{color:#ffffffd9}.leadsheet-score{background:#0000}.leadsheet-score div,.leadsheet-score svg{background:#0000!important;background-color:initial!important}.leadsheet-score.dark-mode svg line,.leadsheet-score.dark-mode svg path,.leadsheet-score.dark-mode svg polygon,.leadsheet-score.dark-mode svg polyline,.leadsheet-score.dark-mode svg rect{stroke:#fff!important;fill:#fff!important}.leadsheet-score.dark-mode svg text{fill:#fff!important}.leadsheet-score.dark-mode svg rect[fill="#fff"],.leadsheet-score.dark-mode svg rect[fill="#ffffff"],.leadsheet-score.dark-mode svg rect[fill=white]{fill:#0000!important;stroke:none!important}.leadsheet-score svg line,.leadsheet-score svg path,.leadsheet-score svg polyline,.leadsheet-score svg rect,.leadsheet-score svg text{opacity:1!important;opacity:var(--score-ink-opacity,1)!important}.leadsheet-score svg .vf-slur path,.leadsheet-score svg .vf-stavetie path,.leadsheet-score svg .vf-tie path,.leadsheet-score.reveal-active .vf-ledgers line,.leadsheet-score.reveal-active .vf-ledgers path,.leadsheet-score.reveal-active .vf-slur path,.leadsheet-score.reveal-active .vf-stavetie path,.leadsheet-score.reveal-active .vf-tie path,.leadsheet-score.reveal-active [data-step-key] line,.leadsheet-score.reveal-active [data-step-key] path,.leadsheet-score.reveal-active [data-step-key] rect,.leadsheet-score.reveal-active [data-tiestop] line,.leadsheet-score.reveal-active [data-tiestop] path,.leadsheet-score.reveal-active [data-tiestop] rect{opacity:1!important}.leadsheet-score.dark-mode svg rect[fill="#fff"],.leadsheet-score.dark-mode svg rect[fill="#ffffff"],.leadsheet-score.dark-mode svg rect[fill=white]{opacity:0!important}@keyframes ls-notehead-pop{0%{transform:scale(1)}30%{transform:scale(1.22);transform:scale(var(--pop-peak,1.22))}65%{transform:scale(.94);transform:scale(var(--pop-dip,.94))}to{transform:scale(1)}}.ls-notehead-pop{animation:ls-notehead-pop .32s cubic-bezier(.34,1.56,.64,1) forwards}.leadsheet-score svg .ls-chord-symbol,.leadsheet-score svg .ls-chord-symbol text,.leadsheet-score svg .ls-chord-symbol tspan{font-feature-settings:"ss05" 1,"liga" 0,"clig" 0,"calt" 0,"salt" 0,"lnum" 1,"tnum" 1,lining-nums tabular-nums!important;fill-opacity:1!important;font-family:Decoracha,Marion,Georgia,serif!important;font-family:var(--chord-font,"Decoracha"),"Marion",Georgia,serif!important;font-variant-numeric:lining-nums tabular-nums!important;font-weight:400!important;font-weight:var(--chord-weight,400)!important;opacity:1!important}.leadsheet-score svg .vf-notehead{visibility:hidden!important}.leadsheet-score svg [data-notetype=rest] .vf-notehead{visibility:visible!important}.leadsheet-score .ls-notehead svg path:not([fill]){fill:var(--note-color)!important;stroke:none!important;opacity:1!important}.leadsheet-score .ls-notehead svg path[fill="#fff"],.leadsheet-score .ls-notehead svg path[fill=white]{fill:#fff!important;stroke:none!important;opacity:1!important}.leadsheet-score:not(.dark-mode) .ls-notehead svg path[fill="#fff"],.leadsheet-score:not(.dark-mode) .ls-notehead svg path[fill=white]{opacity:0!important}.leadsheet-score .ls-notehead .staff-note-svg{mix-blend-mode:normal;overflow:visible}.leadsheet-score .ls-notehead .staff-note-glyph{height:20px;width:20px}.leadsheet-score .ls-notehead .ls-letter-glyph path,.leadsheet-score .ls-notehead .staff-note-glyph path{fill:#000!important;stroke:#000!important;opacity:1!important}.leadsheet-score .ls-notehead .ls-letter-glyph path{fill:var(--letter-color,#000)!important;stroke:var(--letter-color,#000)!important;stroke-width:1!important;stroke-width:var(--letter-stroke,1)!important}.tp-scrub{-webkit-appearance:none;appearance:none;background:#ffffff2e;border-radius:2px;cursor:pointer;height:3px;outline:none}.tp-scrub::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:radial-gradient(circle at 38% 35%,#fff 0,#d8dde6 40%,#a0aab8 70%,#7a8799 100%);border:1px solid #64788c66;border-radius:50%;box-shadow:0 1px 4px #00000080,inset 0 1px 1px #ffffffe6;cursor:pointer;height:16px;width:16px}.tp-scrub::-moz-range-thumb{background:radial-gradient(circle at 38% 35%,#fff 0,#d8dde6 40%,#a0aab8 70%,#7a8799 100%);border:1px solid #64788c66;border-radius:50%;box-shadow:0 1px 4px #00000080,inset 0 1px 1px #ffffffe6;cursor:pointer;height:16px;width:16px}.tp-scrub::-webkit-slider-runnable-track{background:#ffffff2e;border-radius:2px;height:3px}.leadsheet-score .vf-fingering{visibility:hidden!important}.ls-vslider{-webkit-appearance:slider-vertical;appearance:slider-vertical;direction:rtl;height:120px;width:28px;writing-mode:vertical-lr}.ls-hslider,.ls-vslider{accent-color:#f0a040d9;cursor:pointer}.ls-hslider{-webkit-appearance:auto;appearance:auto;direction:ltr;height:28px;writing-mode:horizontal-tb}@keyframes ls-rotate-landscape{0%{transform:rotate(0deg)}35%{transform:rotate(-90deg)}65%{transform:rotate(-90deg)}90%{transform:rotate(0deg)}to{transform:rotate(0deg)}}.ls-phone-rotate{animation:ls-rotate-landscape 2.4s ease-in-out infinite;display:inline-block;transform-origin:center}html.tp-capturing .tp-settings-btn,html.tp-capturing [class*=layout-panel],html.tp-capturing [data-frame-overlay],html.tp-capturing [data-layout=settings],html.tp-capturing [data-render-overlay],html.tp-capturing [data-timecode],html.tp-capturing [style*="position: fixed"][style*="zIndex: 9999"],html.tp-export [data-timecode]{visibility:hidden!important}.app.elements-mode{background:#0000!important}.tp-hide-chords .ls-chord-symbol,html.tp-capturing [data-elements-checkerboard],html.tp-hide-keyboard .keyboard-wrapper{display:none!important}html.elements-active,html.elements-active .ui-panel,html.elements-active body{background:#0000!important}
/*# sourceMappingURL=main.3d699107.css.map*/