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}.App{--bg-intensity:40;--bg-intensity-low:0;--glow-size:0;--glow-size-hover:0;--glow-size-component:0;--hover-alpha:.1;--hover-alpha-strong:.3;bottom:0;color:#fff;display:flex;flex-direction:column;left:0;overflow:hidden;position:fixed;right:0;text-align:center;top:0}.App>.split-container{height:100%}.App.led-on{--glow-size:3px;--glow-size-hover:6px;--glow-size-component:.5em}.App.light{--bg-intensity:240;--bg-intensity-low:210;color:#000}.App.light .views label{color:#006400}.App.light .toolbar button svg{fill:#000;color:#000}.App.Red{--glow-color:red;--hover-color:rgba(255,0,0,var(--hover-alpha));--hover-color-strong:rgba(255,0,0,var(--hover-alpha-strong))}.App.Yellow{--glow-color:#ff0;--hover-color:rgba(255,255,0,var(--hover-alpha));--hover-color-strong:rgba(255,255,0,var(--hover-alpha-strong))}.App.Green{--glow-color:#0f0;--hover-color:rgba(0,255,0,var(--hover-alpha));--hover-color-strong:rgba(0,255,0,var(--hover-alpha-strong))}.App,.App.Cyan{--glow-color:#0ff;--hover-color:rgba(0,255,255,var(--hover-alpha));--hover-color-strong:rgba(0,255,255,var(--hover-alpha-strong))}.App.Blue{--glow-color:#00f;--hover-color:rgba(0,0,255,var(--hover-alpha));--hover-color-strong:rgba(0,0,255,var(--hover-alpha-strong))}.App.Magenta{--glow-color:#f0f;--hover-color:rgba(255,0,255,var(--hover-alpha));--hover-color-strong:rgba(255,0,255,var(--hover-alpha-strong))}.App.White{--glow-color:#fff;--hover-color:rgba(255,255,255,var(--hover-alpha));--hover-color-strong:rgba(255,255,255,var(--hover-alpha-strong))}.App.Black{--glow-color:#000;--hover-color:rgba(0,0,0,var(--hover-alpha));--hover-color-strong:rgba(0,0,0,var(--hover-alpha-strong))}.App.None{--glow-color:initial;--hover-color:#0000;--hover-color-strong:#0000}.App.bgRed{background:rgb(var(--bg-intensity),var(--bg-intensity-low),var(--bg-intensity-low))}.App.bgYellow{background:rgb(var(--bg-intensity),var(--bg-intensity),var(--bg-intensity-low))}.App.bgGreen{background:rgb(var(--bg-intensity-low),var(--bg-intensity),var(--bg-intensity-low))}.App.bgCyan{background:rgb(var(--bg-intensity-low),var(--bg-intensity),var(--bg-intensity))}.App,.App.bgBlue{background:rgb(var(--bg-intensity-low),var(--bg-intensity-low),var(--bg-intensity))}.App.bgMagenta{background:rgb(var(--bg-intensity),var(--bg-intensity-low),var(--bg-intensity))}.App.bgGray{background:rgb(var(--bg-intensity),var(--bg-intensity),var(--bg-intensity))}.App.bgWhite{background:#fff}.App.bgBlack{background:#000}.privacy-policy{background-color:#222;color:#f5f5f5;font-size:110%;padding:.5em 2em;text-align:left}.privacy-policy .left{align-items:center;display:flex}.privacy-policy button{background-color:#0000;border:2px solid #ff0;color:#ff0;cursor:pointer;font-size:100%;font-weight:700;padding:.5em}.error{color:red}.views{height:100%;overflow:auto;transition:all .15s}.views button{background-color:#00000080;border:1px solid var(--glow-color);border-radius:.25em;box-shadow:0 0 var(--glow-size) var(--glow-color);color:#dcdcdc;cursor:pointer;font-size:100%;vertical-align:middle}.views button:hover{box-shadow:0 0 var(--glow-size-hover) var(--glow-color)}.views button:focus{outline:0}.views button.unbuttoned{background-color:#0000;border:none;box-shadow:none}.views label{color:#32cd32;margin-right:.1em}.views input{border:1px solid var(--glow-color);box-shadow:0 0 var(--glow-size) var(--glow-color)}.views .toolbar button svg{fill:#fff;color:#fff}.square-icon,.triangle-icon{fill:#f5f5f5;height:.7em;width:.7em}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes slideDownAnimation{0%{top:-3em}to{top:0}}nav{background:#000;color:#f5f5f5;height:100%;padding-top:1em;position:relative;transition:all .15s;width:3em}nav.expanded{width:9em}nav.expanded a label{display:inline-block}nav.expanded button{transform:rotate(180deg)}nav a{align-items:center;background:#0000;border:#0000;color:#f5f5f5;cursor:pointer;display:flex;height:2.5em;margin:.1em;overflow:hidden;padding:0;text-align:left;text-decoration:none;transition:all .15s;white-space:nowrap}nav a:hover{border-left:.15em solid #0000}nav a label,nav a svg{cursor:pointer;display:inline-block;margin:0 .25em}nav a svg{fill:#ccc;font-size:1.5em;text-align:center;width:1.1em}nav a.active{border-left:.15em solid var(--glow-color)}nav a.active label,nav a.active svg,nav a:hover svg{fill:#f5f5f5;color:#f5f5f5}nav a label{color:#ffdead;display:none;font-size:.9em}nav button{align-items:center;background-color:#ccc;border:none;border-radius:50%;bottom:1.5em;color:var(--glow-color);display:flex;font-size:1em;height:2em;justify-content:center;position:absolute;right:-.4em;transition:transform .15s;width:2em}nav button svg{fill:#000;width:1.2em}nav button:hover{background-color:#ddd;box-shadow:0 0 var(--glow-size-hover) #fff;box-shadow:0 0 var(--glow-size-hover) var(--glow-color,#fff);cursor:pointer}.help-view header{margin:.5em;text-align:center}.help-view svg.powerchord{fill:#f5f5f5;width:500px}.help-view svg.logo{fill:#000;background-color:#f5f5f5;width:80px}.help-view svg.new-window{fill:var(--glow-color);display:inline-block;height:.8em;vertical-align:middle;width:.8em}.help-view section{font-size:1em;text-align:center}.help-view a,.help-view a:visited{color:var(--glow-color)}.help-view .help{font-size:1.2em}.popup-menu-button{display:inline-block;position:relative}.popup-menu-button>button,.popup-menu-button>select{background-color:#00000080;height:1.5em;margin:0 .1em;min-width:2em;transition:all .15s}.popup-menu-button>select{border:1.5px solid var(--glow-color);border-radius:.25em;box-shadow:0 0 var(--glow-size) var(--glow-color);color:#dcdcdc;font-size:1em}.popup-menu-button .popup{background-color:#000;border:1.5px solid var(--glow-color);box-shadow:0 0 12px var(--glow-color);left:3em;padding:0 .25em;position:absolute;top:0;white-space:nowrap;z-index:1}.popup-menu-button .popup>div{display:flex}.popup-menu-button .popup>div button,.popup-menu-button .popup>div span{flex:1 1;margin:0 1em;text-align:left}.popup-menu-button .popup button,.popup-menu-button .popup span{background-color:#0000;border:none;box-shadow:none;margin:0;min-width:1.5em;padding:3px 6px;vertical-align:initial;width:auto}.popup-menu-button .popup button:hover{background-color:var(--hover-color-strong);box-shadow:0 0 10px var(--glow-color)}.popup-menu-button .popup .newline{display:block;padding:0}.modal{align-items:center;background-color:#0000004d;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.modal .content{background-color:#f5f5f5;border:1px solid #000;border-radius:.25em;box-shadow:0 0 8px #000;display:inline-block;padding:1em;position:relative}.modal .content button.close{background-color:#0000;border:none;box-shadow:none;color:red;font-size:1.2em;font-weight:700;position:absolute;right:0;top:0}.modal .content button.close:hover{background-color:silver}.share-link{background-color:#f5f5f5;margin:.5em;text-align:left}.share-link input{font-size:1em;margin-right:.5em;padding:.25em;width:20em}.share-link button,.share-link input{border:1px solid gray;box-shadow:none}.share-link button{background-color:#0000;color:#000;width:4em}.react-toggle{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;background-color:initial;border:0;cursor:pointer;display:inline-block;padding:0;position:relative;touch-action:pan-x;-webkit-user-select:none;user-select:none}.react-toggle-screenreader-only{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.react-toggle--disabled{cursor:not-allowed;opacity:.5;transition:opacity .25s}.react-toggle-track{background-color:#4d4d4d;border-radius:30px;height:24px;padding:0;transition:all .2s ease;width:50px}.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track{background-color:#000}.react-toggle--checked .react-toggle-track{background-color:#19ab27}.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track{background-color:#128d15}.react-toggle-track-check{bottom:0;height:10px;left:8px;line-height:0;margin-bottom:auto;margin-top:auto;opacity:0;position:absolute;top:0;transition:opacity .25s ease;width:14px}.react-toggle--checked .react-toggle-track-check,.react-toggle-track-x{opacity:1;transition:opacity .25s ease}.react-toggle-track-x{bottom:0;height:10px;line-height:0;margin-bottom:auto;margin-top:auto;position:absolute;right:10px;top:0;width:10px}.react-toggle--checked .react-toggle-track-x{opacity:0}.react-toggle-thumb{background-color:#fafafa;border:1px solid #4d4d4d;border-radius:50%;box-sizing:border-box;height:22px;left:1px;position:absolute;top:1px;transition:all .5s cubic-bezier(.23,1,.32,1) 0ms;transition:all .25s ease;width:22px}.react-toggle--checked .react-toggle-thumb{border-color:#19ab27;left:27px}.react-toggle--focus .react-toggle-thumb{box-shadow:0 0 2px 3px #0099e0}.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb{box-shadow:0 0 5px 5px #0099e0}.react-toggle.toggle-switch{margin-left:.25em;vertical-align:middle}.react-toggle.toggle-switch .react-toggle-track-check{height:14px;width:14px}.react-toggle.toggle-switch:hover:not(.react-toggle--disabled) .react-toggle-track{background-color:#4d4d4d}.react-toggle.toggle-switch.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track{background-color:#19ab27}.controls .split-container{flex-wrap:nowrap}.controls section{text-align:left}.controls section.section-1{margin-right:2em;text-align:right}.controls section>div{margin-top:.5em}.controls section div.large{font-size:1.2em;margin-top:.2em}.controls section div.large span{color:#ffbf49;font-weight:700}.controls section>div.sound{margin-top:3em}.controls section input[type=checkbox]{font-size:100%;height:1em;vertical-align:middle;width:1em}.controls .sustain{margin-left:1em}.controls .sustain>span{margin-left:.2em}.controls .share{position:relative}.controls .share select{width:4em}.chord-selection>div{display:block}.guitar-view{margin-top:1em}.guitar-view canvas{border:.2em solid #000;box-shadow:0 0 var(--glow-size-component) var(--glow-color);cursor:pointer}.guitar-view .chord-view section{text-align:right}.guitar-view .chord-view button{border-radius:0 0 .5em .25em;box-shadow:none;font-size:.7em;vertical-align:top}.guitar-view .chord-view button.selected{background-color:#ffffffe6;color:gray;font-weight:700}.guitar-view .chord-view canvas{box-shadow:none;vertical-align:bottom}.guitar-view .chord-selection{margin-bottom:.25em}.guitar-view .control-container{display:inline-block;margin:.25em auto;text-align:left;width:1000px}.guitar-view .control-container .string-fret-note span{display:inline-block;width:3em}.guitar-view .share{position:relative}.guitar-view .share select{width:4em}.keyboard-view .keyboard{background-image:linear-gradient(#000,#333);border:.2em solid #000;border-radius:0 0 .5em .5em;box-shadow:0 0 var(--glow-size-component) var(--glow-color);display:inline-block;padding:.5em 1em;position:relative}.keyboard-view .keyboard *{vertical-align:top}.keyboard-view .keyboard .backboard{background-color:#222;box-shadow:0 3px 8px #111;height:1em;left:0;position:absolute;right:0;top:0}.keyboard-view .keyboard canvas{cursor:pointer;touch-action:none}.keyboard-view .control-container{display:inline-block;margin:.25em auto;text-align:left;width:1000px}.keyboard-view .share{position:relative}.keyboard-view .share select{width:4em}.keyboard-view .share-link{background-color:#f5f5f5;margin:.5em;text-align:left}.keyboard-view .share-link input{border:1px solid gray;box-shadow:none;font-size:1em;margin-right:.5em;padding:.25em;width:20em}.keyboard-view .share-link button{background-color:#0000;border:1px solid gray;box-shadow:none;color:#000;width:4em}@media only screen and (max-height:680px){.keyboard-view{margin-top:-8em}}@media only screen and (max-height:550px){.keyboard-view{margin-top:-11em}}@media only screen and (max-width:1200px){.keyboard{padding:.25em}}.landing{background-color:#f5f5f5;bottom:0;color:#333;font-family:Lato,Helvetica Neue,Helvetica,sans-serif;left:0;overflow:auto;position:fixed;right:0;scroll-behavior:smooth;top:0;transition:all .2s}.landing .button,.landing button{background-color:#0000;border:none;border-radius:.25em;box-shadow:none;cursor:pointer;display:inline-block;font-size:1em;transition:all .2s}.landing svg.arrows{fill:#ddd;vertical-align:text-top;width:1em}.landing .top-nav{background-color:#2c2c2c;box-shadow:0 0 2px #000;color:silver;height:3em;left:0;position:fixed;right:0;text-align:center;top:0}.landing .top-nav button.start{margin:.25em}.landing .top-nav .logo{fill:#ddd;float:left;margin:.25em;width:2.5em}.landing .splash{background-image:url(/static/media/promo.e175d7f49b33ce0d20e3.jpg);background-position:50%;background-size:cover;display:flex;height:99%;justify-content:center;position:relative;width:100%}.landing .splash .content{margin:auto;width:50%}.landing .splash .content .powerchord{fill:#114;fill:#f5f5f5;margin-top:-6em}.landing .splash .content .tagline{color:#f5f5f5;font-size:2em;margin-top:-.75em;text-align:right}@media only screen and (max-width:113em){.landing .splash .content .tagline{font-size:1.5em}}@media only screen and (max-width:68em){.landing .splash .content .tagline{font-size:1em}}@media only screen and (max-width:45em){.landing .splash .content .tagline{font-size:.75em}}.landing .splash .footer{bottom:1em;font-size:1.5em;position:absolute}.landing .splash .footer svg{fill:#f5f5f5;transform:rotate(90deg);width:1em}.landing .splash .footer .button{border-radius:50%;display:flex;height:1.5em;justify-content:center;padding:.25em;width:1.5em}.landing .splash .footer .button:hover{background-color:#fff3}.landing .row{display:flex;margin:2em auto;text-align:center;width:60em}.landing .row h1{border-bottom:1px solid silver;color:#333;display:inline-block;padding:.5em 1em}.landing .row p{font-size:1em;line-height:1.5;margin:auto;max-width:30em;text-align:left}.landing .row .column img{width:360px}.landing button.start{background-color:#070;color:#ddd;font-size:1.25em;margin:auto;padding:.35em .5em;text-transform:uppercase}.landing button.start:hover{background-color:#080;color:#f5f5f5}.landing .video{background-color:#fff;margin-top:3em;padding:2em 0 4em;text-align:center}.landing .call-to-action{background-color:#7fffd4;padding:1em;text-align:center}.landing .call-to-action>*{margin:1em auto;max-width:40em}.landing .call-to-action .logo{margin-top:1em;width:8em}.landing .bottom-footer{background-color:#424242;color:silver;font-size:1em;margin-top:0;padding:.5em;text-align:center}.landing .bottom-footer p{margin:1em}.landing .bottom-footer a{color:silver;text-decoration:none}.landing .bottom-footer .logo{fill:silver;float:left;width:5em}.file-picker{animation:fadeInAnimation .2s,slideDownAnimation .2s;background-color:#ffffff80;bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:1}.file-picker .content{background-color:silver;border:1px solid gray;border-radius:.25em;box-shadow:0 0 1em dimgray;margin:auto;padding:0 .5em .5em;width:30em}.file-picker .content header{color:#444;font-weight:700;padding-bottom:.25em}.file-picker .content ul{background-color:#f8f8ff;color:#000;height:6em;list-style:none;margin:0;overflow:auto;padding:0 .5em}.file-picker .content ul li{cursor:pointer;text-align:left}.file-picker .content ul li:hover{background-color:var(--hover-color-strong)}.file-picker .content label{color:#333;display:block;font-size:1em;font-weight:400;margin-top:.25em;text-align:left}.file-picker .content .description{color:#333;font-style:italic;font-weight:400}.file-picker .content input{border:1px solid dimgray;font-size:1em;padding:.2em;width:99%}.file-picker .content .buttons{margin-top:.5em}.file-picker .content button{background-color:dimgray;border:none;margin:0 .5em;opacity:.8;padding:.25em .5em}.file-picker .content button.ok{background-color:green}.file-picker .content button:hover{opacity:1}.progression-view{margin:0 1em;text-align:left}.progression-view .builder{color:gray}.progression-view .chord-list{display:block;font-size:125%;margin:.5em}.progression-view .chord-list>ol{margin:.5em 0;padding:0}.progression-view .chord-list li{background-color:#ffffff80;border-left:2px solid #000;color:#000;display:inline-block;font-size:1.1em;font-weight:700;min-width:1em;position:relative;text-align:center;vertical-align:initial}.progression-view .chord-list li>span{display:inline-block;padding:.25em .5em}.progression-view .chord-list li>span>sup{font-size:.5em}.progression-view .chord-list li>div.beats{border-top:1px solid #000;display:flex}.progression-view .chord-list li>div.beats>span{background-color:#fff9;border:1px solid #222;border-right:none;color:#0000;cursor:pointer;display:inline-block;flex-grow:1;font-size:.75em;min-width:1.2em}.progression-view .chord-list li>div.beats>span:nth-child(odd){background-color:#ffffff80}.progression-view .chord-list li>div.beats>span:last-child{color:#666}.progression-view .chord-list li>div.beats>span:hover{color:#222}.progression-view .chord-list li>button.delete{background-color:#0000;border:none;box-shadow:none;color:#555;font-size:.5em;font-weight:700;padding:0 2px;position:absolute;right:0;top:0}.progression-view .chord-list li:hover>button{color:#222}.progression-view .chord-list li:first-of-type{border-radius:10% 0 0 10%}.progression-view .chord-list li:last-of-type{border-radius:0 10% 10% 0}.progression-view .chord-list li.selected{background-color:#fffc}.progression-view .chord-list li.summary{background-color:#0000}.progression-view .chord-list li.summary button{background-color:#0000;border:none;box-shadow:none;color:gray;display:block;padding:0;transition:color .25s}.progression-view .chord-list li.summary button:hover{color:silver}.progression-view .chord-list li.summary span{color:silver;font-size:.6em}.progression-view span.message{background-color:#0000;border:none;box-shadow:none;color:gray}.progression-view .chord-selector{display:inline-block;margin:.75em;text-align:left}.progression-view .chord-selector label{vertical-align:top}.progression-view .chord-selector .chords-in-key label,.progression-view .chord-selector .other-chords label{display:inline-block;margin-right:.25em;text-align:right;vertical-align:initial;width:3em}.progression-view .chord-selector .chords-in-key button{font-size:110%;margin:.2em;min-width:2.25em}.progression-view .chord-selector .chords-in-key button.not-suggested{opacity:.5}.progression-view .chord-selector .chords-in-key button .chord-number{border-top:1px solid gray;color:#ffbf49;display:block;font-size:.8em}.progression-view .chord-selector .chords-in-key label.beats{margin-left:1em;white-space:nowrap}.progression-view .chord-selector .chords-in-key label.beats input{display:inline-block;width:2em}.progression-view .chord-selector .other-chords{margin-top:.25em}.progression-view .chord-selector .other-chords button{height:1.75em}.progression-view .chord-selector .other-chords>button{margin-left:.5em}.progression-view progress{width:6em}.progression-view .controls{display:block}.progression-view .controls section{font-size:1em;margin:.5em}.progression-view .controls section label{display:inline-block;margin-right:.5em}.progression-view .controls section input{vertical-align:text-bottom}.progression-view .controls section input[type=number]{margin-left:.5em;width:3em}.progression-view .controls section button{margin:0 1em 0 0}.progression-view .controls section .key-selector{display:inline-block}.progression-view .controls .toolbar{background-color:#0000;display:block;font-size:1em;margin:0;padding:.25em}.progression-view .controls .toolbar button{background-color:#0000;border:none;box-shadow:none;display:inline-block;height:2em;margin:0;width:2em}.progression-view .controls .toolbar button:hover{background-color:var(--hover-color);box-shadow:0 0 var(--glow-size) var(--glow-color)}.progression-view .controls .toolbar button.redo{transform:scaleX(-1)}.progression-view .controls .toolbar button.disabled{opacity:.5}.rhythm-view{margin-left:1em}.rhythm-view .react-toggle svg{transform:scaleX(-1)}.rhythm-view h2{text-align:left}.rhythm-view .grid{margin-top:0}.rhythm-view table{background-color:gray;border:.1em solid gray;border-collapse:collapse;box-shadow:0 0 var(--glow-size-component) var(--glow-color)}.rhythm-view table td,.rhythm-view table th{background-color:#000;border:1px solid gray;font-weight:400;height:1.5em;min-width:1.5em;padding:.2em;text-align:center}.rhythm-view table td{border-radius:.5em;cursor:pointer}.rhythm-view table td span{border-radius:50%;display:flex;height:100%;width:100%}.rhythm-view table th{background-color:#0009;font-size:.9em}.rhythm-view table tbody th{text-align:left}.rhythm-view table tbody tr{transition:all .25s}.rhythm-view table td.hilite{border-color:var(--glow-color)}.rhythm-view table .red{background-color:red}.rhythm-view table .yellow{background-color:#ff0}.rhythm-view table .green{background-color:green}.rhythm-view table .cyan{background-color:aqua}.rhythm-view table .blue{background-color:blue}.rhythm-view table .magenta{background-color:#f0f}.rhythm-view table .orange{background-color:orange}.rhythm-view table .limegreen{background-color:#32cd32}.rhythm-view table .teal{background-color:teal}.rhythm-view table .royalblue{background-color:#4169e1}.rhythm-view table .purple{background-color:purple}.rhythm-view table .olive{background-color:olive}.rhythm-view table .popup-menu-button>button{border:none;color:inherit}.rhythm-view table .delete-button{color:#000;cursor:pointer;font-weight:700;margin:.2em}.rhythm-view .controls{display:block}.rhythm-view .controls section{font-size:1em;margin:.5em}.rhythm-view .controls section label{display:inline-block;margin-right:.75em}.rhythm-view .controls section input{vertical-align:text-bottom}.rhythm-view .controls section input[type=number]{width:3em}.rhythm-view .controls section input,.rhythm-view .controls section select{margin-left:.5em}.rhythm-view .controls section button{margin:0 1em 0 0;width:4em}.rhythm-view .controls section button svg{fill:#fff;color:#fff}.rhythm-view .controls .toolbar{background-color:#0000;display:block;font-size:1em;margin:0;padding:.25em}.rhythm-view .controls .toolbar button{background-color:#0000;border:none;box-shadow:none;display:inline-block;height:2em;margin:0;width:2em}.rhythm-view .controls .toolbar button:hover{background-color:var(--hover-color);box-shadow:0 0 var(--glow-size) var(--glow-color)}.rhythm-view .controls .toolbar button.redo{transform:scaleX(-1)}.rhythm-view .controls .toolbar button.disabled{opacity:.5}.settingsView{margin:0 2em;text-align:left}.settingsView section{font-size:125%;margin:1em;text-align:left}.settingsView label{display:inline-block;margin-right:.5em;min-width:5.5em;text-align:right}.settingsView section>div{margin-top:.5em}.theory-view{margin:0 2em;text-align:left}.theory-view>div{display:inline-block;vertical-align:top}.theory-view section{font-size:125%;margin:.75em 2em;text-align:left}.theory-view section.selectKey{justify-content:center;margin-bottom:1em}.theory-view .notesInKey{display:table}.theory-view .notesInKey>div{border:1px solid var(--glow-color);border-radius:.25em;box-shadow:0 0 var(--glow-size-component) var(--glow-color);margin-bottom:1em;padding:.25em 1em .5em}.theory-view .notesInKey ol{border-radius:.25em;margin:.5em 0;padding:0}.theory-view .notesInKey li{cursor:default;display:inline-block;font-weight:700;padding:0 .5em;text-align:center;width:2.3em}.theory-view .notesInKey li span{border-top:1px solid gray;color:silver;display:block;font-size:.9em;font-weight:400}.theory-view .notesInKey .note-names li,.theory-view .notesInKey .triad-names li{background-color:#fff3;color:#f5f5f5;cursor:pointer;margin:0 1px}.theory-view .notesInKey .note-names li:hover,.theory-view .notesInKey .triad-names li:hover{background-color:#ffffff40}.theory-view .notesInKey .note-names li.tonic,.theory-view .notesInKey .triad-names li.tonic{color:#d90}.theory-view .notesInKey .note-names li.major,.theory-view .notesInKey .triad-names li.major{color:#090}.theory-view .notesInKey .note-names li.minor,.theory-view .notesInKey .triad-names li.minor{color:#0bb}.theory-view .notesInKey .note-names li.dim,.theory-view .notesInKey .triad-names li.dim{color:#099}.theory-view .notesInKey .note-names li.selected,.theory-view .notesInKey .triad-names li.selected{background-color:#ffffff4d}.theory-view .notesInKey .note-names li:first-of-type,.theory-view .notesInKey .triad-names li:first-of-type{border-radius:.25em 0 0 .25em}.theory-view .notesInKey .note-names li:last-of-type,.theory-view .notesInKey .triad-names li:last-of-type{border-radius:0 10% 10% 0}.theory-view .notesInKey .signatureCanvas{border:none;box-shadow:none;margin-left:1em;text-align:center}.theory-view .notesInKey .signatureCanvas canvas{display:block;margin:0 auto}.theory-view .circleOfFifths{margin:1em}.theory-view .circleOfFifths canvas{border:1px solid var(--glow-color);border-radius:50%;box-shadow:0 0 var(--glow-size-component) var(--glow-color)}@media only screen and (max-height:750px){.theory-view .circleOfFifths canvas{height:75%;width:75%}}@media only screen and (max-height:600px){.theory-view .circleOfFifths canvas{height:50%;width:50%}}.vocals-view{height:100%;margin-left:1em;text-align:left}.vocals-view .canvas-container,.vocals-view .split-container,.vocals-view .tab-container{height:100%}.vocals-view .vocal-range header{font-size:1.2em;font-weight:700}.vocals-view .vocal-range button.toggle{background-color:#0000;border:none;box-shadow:none;font-size:.8em}.vocals-view .vocal-range .note{border:1px dashed #d3d3d3;padding:0 4px}.vocals-view .vocal-range .test-range{margin:.5em 2em}.vocals-view .vocal-range .test-range>label{display:inline-block;margin-right:.5em;text-align:right}.vocals-view .vocal-range .test-range span{display:inline-block;margin-right:.5em}.vocals-view .vocal-range .test-range .range-note{text-align:center;width:3em}.vocals-view .vocal-range .test-range .range-note.true{background-color:green}.vocals-view .vocal-range .test-range .current-note{background-color:red;text-align:center;width:3em}.vocals-view .vocal-range .test-range button{margin-left:.5em}.vocals-view .vocal-range .test-range button.cancel{background-color:#0000;border:none;box-shadow:none;color:gray;font-size:.9em}.vocals-view .audio-visualizer,.vocals-view .scales,.vocals-view .tune-capture{height:100%}.vocals-view .audio-visualizer .canvas-container,.vocals-view .scales .canvas-container,.vocals-view .tune-capture .canvas-container{overflow:hidden;position:relative;transition:none}.vocals-view .audio-visualizer .canvas-container canvas,.vocals-view .scales .canvas-container canvas,.vocals-view .tune-capture .canvas-container canvas{background-color:#000;border:1px solid gray;border-radius:.25em;box-shadow:0 0 var(--glow-size-component) var(--glow-color)}.vocals-view .audio-visualizer .canvas-container span,.vocals-view .scales .canvas-container span,.vocals-view .tune-capture .canvas-container span{background-color:#fffc;color:#000;cursor:default;display:block;height:1.5em;padding:0 .25em;position:absolute}.vocals-view .actions{margin-bottom:.5em}.vocals-view .actions label{margin-left:.5em}.vocals-view .actions input{width:2em}.vocals-view .actions .reset-range{margin-left:.5em}.vocals-view .tab-container .tab-list{border-bottom:1px solid gray;margin-bottom:.5em}.vocals-view .tab-container .tab-list>span{color:gray;cursor:pointer;display:inline-block;padding:.2em .5em}.vocals-view .tab-container .tab-list>span.active{border-bottom:3px solid var(--glow-color);color:inherit}.vocals-view .tab-container .tab-list>span:hover{color:inherit}.App.light .canvas-container>canvas{background-color:#fff}
/*# sourceMappingURL=main.c5211136.css.map*/