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}@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;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}.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{margin:10px auto 0;max-width:1440px;position:relative;transform-origin:center center;width:100%}.keyboard-img{display:block;height:auto;width:100%}.key-stack{pointer-events:none;position:absolute;z-index:1}.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%}.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;display:flex;flex-shrink:0;margin-left:-200px;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:1px solid #00000026!important;color:#000!important;opacity:1!important;transition:border-color .12s ease,box-shadow .12s ease!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:none!important;color:#fff!important}.staff-panel{--staff-dot-x:130px;--treble-line-start:154px;--bass-line-start:calc(var(--treble-line-start) + 135px);--staff-line-gap:15px;isolation:isolate;margin:-20px auto 0;overflow:visible;position:relative;transform:scale(1.05);transform-origin:top center;width:507px}.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);height:auto;mix-blend-mode:screen;opacity:1;position:relative;width:100%;z-index:1}.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)}@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)}35%{filter:saturate(1) brightness(1.2)}80%{filter:saturate(1) brightness(1.2)}to{filter:saturate(1)}}.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-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}.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}@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}.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}
/*# sourceMappingURL=main.3def13b4.css.map*/