g.note.playing{fill:#00f}g.rest.playing{fill:#00f}g.note:hover,g.rest:hover{fill:green;stroke:green;cursor:pointer}:root,[data-theme=light]{--primary-main: #2d728f;--primary-dark: #1f5064;--primary-contrast: #fff;--secondary-main: #3b8ea5;--secondary-dark: #296373;--error-main: #ff1744;--success-main: #2e7d32;--success-dark: #1b5e20;--bg-default: #fbfbfb;--bg-paper: #fff;--text-primary: rgba(0, 0, 0, .87);--text-secondary: rgba(0, 0, 0, .6);--text-disabled: rgba(0, 0, 0, .38);--divider: rgba(0, 0, 0, .12);--action-active: rgba(0, 0, 0, .54);--action-hover: rgba(0, 0, 0, .04);--action-selected: rgba(0, 0, 0, .08);--action-disabled: rgba(0, 0, 0, .26);--input-border: rgba(0, 0, 0, .23)}[data-theme=dark]{--primary-main: #2d728f;--primary-dark: #1f5064;--primary-contrast: #fff;--secondary-main: #3b8ea5;--secondary-dark: #296373;--error-main: #ff1744;--success-main: #66bb6a;--success-dark: #388e3c;--bg-default: #393a3d;--bg-paper: #292a2d;--text-primary: #fff;--text-secondary: rgba(255, 255, 255, .7);--text-disabled: rgba(255, 255, 255, .5);--divider: rgba(255, 255, 255, .12);--action-active: #fff;--action-hover: rgba(255, 255, 255, .08);--action-selected: rgba(255, 255, 255, .16);--action-disabled: rgba(255, 255, 255, .3);--input-border: rgba(255, 255, 255, .23)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;color:var(--text-primary);background-color:var(--bg-default);font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-size:1rem;line-height:1.5;letter-spacing:.00938em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.t-h5{margin:0;font-size:1.5rem;font-weight:400;line-height:1.334;letter-spacing:0}.t-h6{margin:0;font-size:1.25rem;font-weight:500;line-height:1.6;letter-spacing:.0075em}.t-body1{margin:0;font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:.00938em}.t-body2{margin:0;font-size:.875rem;font-weight:400;line-height:1.43;letter-spacing:.01071em}.t-button{font-size:.875rem;font-weight:500;line-height:1.75;letter-spacing:.02857em;text-transform:uppercase}.text-secondary{color:var(--text-secondary)}.icon{width:1em;height:1em;font-size:1.5rem;fill:currentColor;display:inline-block;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:fill .2s cubic-bezier(.4,0,.2,1)}.icon-action{color:var(--action-active)}.icon-disabled{color:var(--action-disabled)}.btn{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;min-width:64px;padding:6px 8px;border:0;border-radius:4px;margin:0;background-color:transparent;color:var(--primary-main);font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.75;letter-spacing:.02857em;text-transform:uppercase;text-decoration:none;cursor:pointer;outline:0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}.btn:hover{background-color:#2d728f0a}.btn-contained{padding:6px 16px;background-color:var(--primary-main);color:var(--primary-contrast);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.btn-contained:hover{background-color:var(--primary-dark);box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.btn-outlined{padding:5px 15px;border:1px solid rgba(45,114,143,.5)}.btn-outlined:hover{border-color:var(--primary-main);background-color:#2d728f0a}.btn-small{padding:4px 10px;font-size:.8125rem}.btn-outlined.btn-small{padding:3px 9px}.btn-secondary{color:var(--secondary-main)}.btn-outlined.btn-secondary{border-color:#3b8ea580}.btn-outlined.btn-secondary:hover{border-color:var(--secondary-main);background-color:#3b8ea50a}.btn-success{color:var(--success-main)}.btn-outlined.btn-success{border-color:color-mix(in srgb,var(--success-main) 50%,transparent)}.btn-outlined.btn-success:hover{border-color:var(--success-main);background-color:color-mix(in srgb,var(--success-main) 4%,transparent)}.btn-start-icon{display:inherit;margin-right:8px;margin-left:-4px}.btn-start-icon .icon{font-size:1.25rem}.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:8px;border:0;border-radius:50%;margin:0;background-color:transparent;color:var(--action-active);font-size:1.5rem;text-align:center;cursor:pointer;outline:0;overflow:visible;-webkit-tap-highlight-color:transparent;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.icon-btn:hover{background-color:var(--action-hover)}.icon-btn-small{padding:5px;font-size:1.25rem}.icon-btn-small .icon{font-size:1.25rem}.fab{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background-color:var(--primary-main);color:var(--primary-contrast);font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.75;letter-spacing:.02857em;text-transform:uppercase;cursor:pointer;outline:0;-webkit-user-select:none;user-select:none;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1)}.fab:hover{background-color:var(--primary-dark);box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.paper-outlined{background-color:var(--bg-paper);color:var(--text-primary);border:1px solid var(--divider);border-radius:4px}.btn-group{display:inline-flex;align-items:center;border-radius:4px}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1300;display:flex;align-items:center;justify-content:center;background-color:#00000080;-webkit-tap-highlight-color:transparent}.dialog-paper{display:flex;flex-direction:column;position:relative;margin:32px;max-height:calc(100% - 64px);overflow-y:auto;background-color:var(--bg-paper);color:var(--text-primary);border-radius:4px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}.dialog-paper-sm{max-width:600px}.dialog-paper-md{max-width:900px}.dialog-paper-full-width{width:calc(100% - 64px)}.dialog-title{flex:0 0 auto;padding:16px 24px;margin:0;font-size:1.25rem;font-weight:500;line-height:1.6;letter-spacing:.0075em}.dialog-content{flex:1 1 auto;padding:0 24px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch}.dialog-content-text{margin:0;color:var(--text-secondary);font-size:1rem;line-height:1.5;letter-spacing:.00938em}.dialog-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;padding:8px}.dialog-actions>:not(:first-child){margin-left:8px}.outlined-input{display:inline-flex;align-items:center;position:relative;box-sizing:border-box;background-color:transparent;color:var(--text-primary);font-size:1rem;line-height:1.4375em;letter-spacing:.00938em;border:1px solid var(--input-border);border-radius:4px;padding-right:14px;cursor:text}.outlined-input:hover{border-color:var(--text-primary)}.outlined-input:focus-within{border:2px solid var(--primary-main)}.outlined-input input{flex:1 1 auto;width:100%;min-width:0;padding:8.5px 0 8.5px 14px;border:0;margin:0;background:none;color:currentColor;font:inherit;letter-spacing:inherit;outline:0;box-sizing:content-box}.outlined-input:focus-within input{padding-left:13px}.input-adornment{display:flex;align-items:center;height:.01em;max-height:2em;margin-left:8px;white-space:nowrap;color:var(--text-secondary);font-size:1rem;line-height:1.5}.tabs{display:flex;min-height:48px;overflow:hidden;position:relative}.tabs-indicator{position:absolute;bottom:0;height:2px;background-color:var(--primary-main);transition:all .3s cubic-bezier(.4,0,.2,1)}.tab{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-sizing:border-box;min-width:90px;min-height:48px;max-width:360px;padding:12px 16px;border:0;background-color:transparent;color:var(--text-secondary);font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.25;letter-spacing:.02857em;text-transform:uppercase;white-space:normal;cursor:pointer;outline:0;-webkit-tap-highlight-color:transparent}.tab.tab-selected{color:var(--primary-main)}.tab.tab-selected:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--primary-main)}.link{position:relative;padding:0;border:0;border-radius:0;margin:0;background-color:transparent;color:var(--primary-main);font-family:inherit;text-decoration:underline;text-decoration-color:#2d728f66;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;-webkit-tap-highlight-color:transparent}.link:hover{text-decoration-color:inherit}.radio-group-row{display:flex;flex-direction:row;flex-wrap:wrap}.form-control-label{display:inline-flex;align-items:center;vertical-align:middle;margin-left:-11px;margin-right:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}.form-control-label .label-text{font-size:1rem;line-height:1.5;letter-spacing:.00938em}.radio{display:inline-flex;align-items:center;justify-content:center;padding:9px;border-radius:50%;color:var(--text-secondary);transition:background-color .15s cubic-bezier(.4,0,.2,1)}.form-control-label:hover .radio{background-color:var(--action-hover)}.radio input[type=radio]{width:20px;height:20px;margin:0;accent-color:var(--primary-main);cursor:pointer}.slider{display:inline-block;position:relative;box-sizing:content-box;width:100%;height:2px;padding:13px 0;color:var(--primary-main);cursor:pointer;touch-action:none}.slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:2px;margin:0;padding:0;background:transparent;cursor:pointer}.slider input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:currentColor;opacity:.38}.slider input[type=range]::-moz-range-track{height:2px;border-radius:1px;background:currentColor;opacity:.38}.slider input[type=range]::-moz-range-progress{height:2px;border-radius:1px;background:currentColor}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;margin-top:-9px;border:0;border-radius:50%;background-color:currentColor;box-shadow:none;transition:box-shadow .15s cubic-bezier(.4,0,.2,1),width .15s cubic-bezier(.4,0,.2,1),height .15s cubic-bezier(.4,0,.2,1)}.slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background-color:currentColor}.slider input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px #2d728f29}.slider input[type=range]:hover::-moz-range-thumb{box-shadow:0 0 0 8px #2d728f29}.slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 8px #2d728f29}.list{list-style:none;padding:8px 0;margin:0;position:relative}.list-item{display:flex;align-items:center;position:relative;width:100%;padding:0;box-sizing:border-box;text-align:left}.list-item-button{display:flex;flex-grow:1;align-items:center;justify-content:flex-start;position:relative;box-sizing:border-box;width:100%;padding:8px 16px;border:0;margin:0;background-color:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;outline:0;-webkit-tap-highlight-color:transparent;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.list-item-button:hover{background-color:var(--action-hover)}.list-item-button.selected{background-color:#2d728f14}.list-item-button.selected:hover{background-color:#2d728f1f}.list-item-text{flex:1 1 auto;min-width:0;margin-top:4px;margin-bottom:4px}.list-item-text .primary{margin:0;font-size:1rem;line-height:1.5;letter-spacing:.00938em}.list-item-text .secondary{margin:0;color:var(--text-secondary);font-size:.875rem;line-height:1.43;letter-spacing:.01071em}.badge{display:inline-flex;position:relative;vertical-align:middle;flex-shrink:0}.badge-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;min-width:8px;padding:0;border-radius:4px;background-color:var(--success-main);transform:scale(1) translate(50%,-50%);transform-origin:100% 0%;transition:transform 225ms cubic-bezier(.4,0,.2,1);z-index:1}.badge-dot.invisible{transform:scale(0) translate(50%,-50%)}.tooltip-wrapper{display:inline-flex;position:relative}.tooltip-wrapper>.tooltip-text{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:14px;padding:4px 8px;border-radius:4px;background-color:#616161eb;color:#fff;font-size:.6875rem;font-weight:500;line-height:1.4;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.4,0,.2,1);z-index:1500}.tooltip-wrapper:hover>.tooltip-text{opacity:1}html,body,#root{height:100%}body{margin:0;min-width:320px}