body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;background-color:var(--background-color);color:#111;color:var(--text-color);margin:0;transition:background-color .5s ease}:root{--background-color:#fff;--text-color:#111;--primary-color:#07f}[data-theme=dark]{--background-color:#121212;--text-color:#fff;--primary-color:#66b3ff}button{cursor:pointer}.top-bar{align-items:center;display:grid;grid-template-columns:auto 1fr auto;margin:5px;padding:5px}.app-logo{height:40px;width:40px}.mytitle{color:teal;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-size:1.6rem;justify-self:start;padding:0 10px}.top-bar .theme-toggle{justify-self:end}.title-row{background-color:teal;bottom:0;height:60px;position:fixed;width:100%}.tool-buttons{display:grid;grid-template-columns:repeat(5,1fr);margin:auto 15px}.tool-button{background-color:teal;border:none;color:#000;font-size:18px;height:60px}.tool-button:hover{color:crimson}.tool-button.selected{color:#fff;font-weight:700}.main-content{display:flex;flex-direction:row}.pane-1{padding-bottom:130px}.pane-2{background:crimson;height:200px;position:fixed;right:0}@media (max-width:830px){.main-content{flex-direction:column;padding-bottom:200px}.pane-1{margin-bottom:200px;width:100%}.pane-2{bottom:60px;left:0;margin-right:5px;position:fixed;right:0;width:100%;z-index:1000}}@media (min-width:830px){.pane-1,.pane-2{width:49%}.pane-2{top:0}.top-bar{width:48%}}.nav-button{background:#fff;border:none;color:crimson;padding:10px}.nav-button.selected,.nav-button:hover{background:crimson;color:#fff}#menuBtn{background-color:crimson;border:none;bottom:13px;font-size:20px;left:21px;position:fixed}.version{color:crimson;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12px;margin-top:-6px;text-align:center}.container{font-size:large;margin:5px}.circle-svg{display:block;flex-direction:row;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-weight:700;height:auto;margin:0 auto;max-width:500px;position:relative;top:-75px;transition:transform 4s ease-in-out;width:100%}.major-ring,.minor-ring{transform-origin:380px 380px;transition:transform 4s ease-in-out}.major-ring g:hover circle,.minor-ring g:hover circle{fill:green}.glow{animation:pulse 1.5s infinite}@keyframes pulse{0%,98%{filter:drop-shadow(0 0 6px white)}49%{filter:drop-shadow(0 0 20px green)}}circle{transform:translateZ(0)}.diminished-display circle{transition:fill .4s ease}.diminished-display text{font-size:xx-large;font-weight:700;pointer-events:none}.three-columns-grid{display:grid;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;grid-auto-rows:1fr;grid-template-columns:1fr 1fr 1fr;grid-template-columns:33.3% 33.3% 33.3%;height:60px}.three-columns-grid span{font-size:small;font-weight:700}.relative{background-color:var(--background-color);color:var(--text-color);font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.tonic{background-color:green;border:2px solid;color:#fff}.subdominant{background-color:blue;color:#fff}.dominant{background-color:red;color:#fff}.submediant{background-color:#ff4500;color:#fff}.supertonic{background-color:teal;color:#fff}.mediant{background-color:purple;color:#fff}.subtonic{background-color:#8b4513;color:#fff;height:-webkit-fit-content;height:fit-content}.cof-roman{background-color:#ff0;border-radius:12px;bottom:3px;color:#000;margin-left:15px;padding:3px 10px}.secondary-dominants{background-color:var(--background-color);color:var(--text-color);font-family:Times New Roman,Times,serif}.secondary-dominants span{font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:small;font-weight:700;text-align:center}.secondary-dominants ul{font-size:small;list-style:none;margin:0;padding:5px 0 0}.three-columns-grid button{border-color:#000;border-radius:12px;color:blue;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:18px;margin-bottom:2px;padding:4px 10px}.three-columns-grid button:active,.three-columns-grid button:focus,.three-columns-grid button:hover{background-color:orange;color:#000}.keySig{color:#000;font-family:Times New Roman,Times,serif;font-size:18px;margin-top:2px;overflow:hidden;padding-left:10px;padding-top:5px;text-align:left}.stave{margin-top:-20px}.pane1{margin-bottom:-90px}.substitution{margin:0;padding:0}.substitution fieldset{border-radius:12px;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:16px}.substitution legend{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:14px;letter-spacing:2px;padding:2px 10px}.substitution div{font-size:15px}.substitution button{border-color:#000;border-radius:12px;color:blue;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:18px;margin:0 10px 2px 15px;padding:4px 10px}.substitution button:active,.substitution button:focus,.substitution button:hover{background-color:orange}.stave-container{background-color:wheat;border-radius:12px;height:110px;margin-left:5px;max-width:221px}.stave{margin-left:-10px}.modeTitle{font-size:14px;padding:5px 0}.chord-chart{flex-wrap:wrap;margin:5px}.tool-title{font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:x-large;font-weight:700;margin-bottom:8px;margin-left:5px;text-align:left}.piano-layout{display:flex;margin:auto;max-width:500px}.black-note{background-color:#000;border-radius:12px;color:#fff;font-size:15px;height:50px}.black-note,.white-note{flex:1 1;margin:2px;width:auto}.white-note{border-color:#000;border-radius:12px;color:#000;font-size:x-large;font-weight:700;height:40px}.black-note:hover,.chord-type:hover,.white-note:hover{background-color:teal;color:#000}.half-gap{width:25px}.full-gap{flex:1 1;width:100%}.mode-list{margin-bottom:15px;margin-top:10px}.mode-list button{margin:3px;padding:3px 7px}.chord-type{border-color:#000;border-radius:12px;color:blue;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:20px;height:35px;margin:4px;padding:0 10px}.chord-type:hover{background-color:orange}.modeChord{border-color:#000;border-radius:12px;color:blue;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:18px;margin-bottom:2px;padding:4px 10px}.modeChord:active,.modeChord:focus,.modeChord:hover{background-color:orange}.cof-roman{font-family:Times New Roman,Times,serif;margin:0 5px;position:relative;top:0}.chord-type:focus{background-color:orange;color:#000}.selected-note{background-color:teal!important;color:#fff!important}.selected-type{background-color:orange!important;color:#000!important}.borrowed-chords{margin-top:0}.borrowed-chords h4{background-color:#b5c1c2;clear:both;color:#000;display:flex;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:medium;padding:5px 0 6px 15px;position:relative;text-align:left}.minor{background-color:#b5c1c2!important}.dorian{background-color:#5dade2!important}.phrygian{background-color:#cb7065!important}.lydian{background-color:#48c9b0!important}.borrowed-chords button{margin:5px}.chord-wrap{float:left}.toggle-row{border-bottom:1px solid}.toggle-row button{border-radius:12px 12px 0 0;color:#000;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:18px;margin:20px 3px -1px;padding:5px 10px}.toggle-row .selected-view,.toggle-row button:hover{background-color:blue;color:#fff}.mode-list div{color:#000;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;padding:5px 15px 6px;text-align:left}.Ionian{background-color:#f9dc5c}.Dorian{background-color:#5dade2}.Phrygian{background-color:#cb7065}.Lydian{background-color:#48c9b0}.Mixolydian{background-color:#f39c12}.Aeolian{background-color:#b5c1c2}.Locrian{background-color:#d4ac0d}.Harmonic-Minor,.Melodic-Minor{background-color:#fff}.chord-sub-wrap{grid-gap:15px;display:grid;gap:15px;grid-template-columns:auto auto}.chord-sub-wrap button{width:70px}.chord-sub-wrap span{margin-top:12px;text-align:right}.chord-sub-wrap span,.substitution-block h4{font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.substitution-block h4{background-color:#b5c1c2;clear:both;color:#000;font-size:medium;padding:5px 0 6px 15px;text-align:left}.sub-description{font-weight:100}.sub-row{float:left;margin:9px 10px 10px 19px}.sub-row button{border-color:#000;border-radius:12px;color:#000;font-size:18px;padding:5px 10px}.three-columns-grid{height:-webkit-fit-content;height:fit-content;vertical-align:middle}.three-columns-grid>div{padding:0 2px 5px}.seventh-tick{margin:10px;text-align:center}.selected{background-color:teal!important;color:#fff!important}.chord-types{margin:10px 0}.chord-types button{margin:3px;padding:3px 7px}.chord-group-title{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:14px;letter-spacing:2px;padding:2px 10px}.chord-group{border-radius:12px;margin:0;padding:0}.modeTitle{color:blue;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-weight:700;margin-top:-22px;text-align:center}.tabs-container{padding:5px}.edit-mode{align-items:center;display:flex;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:18px;justify-content:space-between;margin-bottom:10px;margin-right:4px}.song-select{background:crimson;border:1px solid #ccc;border-radius:12px;color:#eee;display:block;font-size:15px;height:35px;margin:0 auto;padding-left:10px;width:90%}.song-display{display:block;margin:10px 30px 0 10px;white-space:pre-wrap}.song-display input,textarea{background:#d3d3d3;border:1px solid #ccc;border-radius:10px;color:#333;font-family:Arial,Helvetica,sans-serif;font-size:18px;margin-bottom:10px;outline:none;padding:5px 10px;transition:all .2s ease;width:100%}.song-composer,.song-lyrics,.song-title{font-family:Arial,Helvetica,sans-serif;font-size:18px;margin:6px 0 6px 11px}.song-title{color:teal;font-weight:700}.song-composer{color:crimson;margin-bottom:10px}.song-display textarea,.song-lyrics{font-family:monospace,Courier New,Courier;white-space:pre-wrap}.song-lyrics{line-height:1.2;white-space:pre-wrap}.saved-message{color:green;font-size:14px;text-align:center;width:35%}.bracket-tag,.saved-message{font-family:Arial,Helvetica,sans-serif}.bracket-tag{background-color:var(--text-color);border-radius:6px;color:var(--background-color);font-size:18px;font-weight:700;margin:0;padding:5px 10px}.chord-tag{background-color:#d3d3d3;border:1px solid #bbb;border-radius:10px;color:blue;cursor:pointer;display:inline-block;font-family:monospace,Courier New,Courier;font-size:17px;margin:-5px;padding:3px 5px;vertical-align:initial}.chord-tag:hover{background-color:orange}.song-total{color:grey;font-size:17px;font-style:oblique;margin:0;padding:0}.editbuts{background-color:#add8e6;border:none;border-radius:12px;color:blue;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:14px;margin:10px 0 0 5px;padding:8px 15px;transition:all .2s ease;width:30%}.editbuts:hover{background-color:#00bfff;box-shadow:0 4px 10px #0003;color:#fff;transform:translateY(-2px)}.meta-tag{align-items:center;background-color:gray;border:none;border-radius:6px;display:inline-flex;font-family:Arial,Helvetica,sans-serif;font-size:14px;margin:-10px 0;padding:5px 10px;position:relative}.meta-label{color:#fc6;font-weight:700;margin-right:5px;text-transform:uppercase}.meta-value{color:#66d9ef}.song-para{border-radius:6px;margin:10px -15px;padding:0 10px}.song-para:hover{background-color:#ffffff0f}.selected-line{background-color:#00bfff2e;border:1px solid #00bfff73;overflow:hidden;padding:5px 5px 5px 10px;position:relative}.line-progress{animation-fill-mode:forwards;animation-name:growLine;animation-timing-function:linear;background-color:#00bfff;border-radius:0 3px 3px 0;bottom:0;height:3px;left:0;position:absolute;width:0}@keyframes growLine{0%{width:0}to{width:100%}}.play-controls{align-items:center;background-color:#fc6;border:3px solid #777;border-radius:18px;bottom:145px;height:90px;left:50%;padding:5px 0;position:fixed;text-align:center;transform:translateX(-50%);width:150px;z-index:1000000}@media (min-width:830px){.play-controls{left:75%;transform:translateX(-75%)}}.play-button{border:1px solid #333;border-radius:12px;font-size:18px;margin:0 3px;min-height:35px;padding:0;width:93%}.play-button.start-mode{background-color:#90ee90;border:1px solid #333;color:#141}.play-button.stop-mode{background-color:crimson;border:1px solid #333;color:#fff}.play-button:hover{border:1px solid #333;filter:brightness(1.05)}.speed-button{border:1px solid #333;border-radius:12px;color:#333;font-size:18px;height:50px;margin:5px 3px;padding:0;width:66px}.speed-button.active-speed{background-color:#00bfff;color:#fff}.speed-button:hover:not(.active-speed){background-color:#eee}.media-option{align-items:center;background-color:#fc6;border:3px solid #777;border-radius:18px;margin:10px;padding:5px 0 0;position:fixed;text-align:center;top:5px;width:80%;z-index:1000000}.media-option button{background-color:#eee;border:1px solid #333;border-radius:12px;color:#333;cursor:pointer;font-family:Arial,Helvetica,sans-serif;font-size:14px;margin:5px;padding:5px 10px;transition:all .15s ease}.media-option button:hover:not(.active){background-color:#ddd}.media-option button.active{background-color:#00bfff;box-shadow:inset 0 2px 5px #0006;color:#fff;transform:translateY(1px)}.media-option button:active{box-shadow:inset 0 3px 6px #00000080;transform:translateY(2px)}@media (min-width:830px){.media-option{right:5px;top:205px;width:46%}}.chord-container{color:#fff;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;overflow:hidden}.chord-info{text-wrap:nowrap;font-size:x-large;margin-left:10px;margin-top:5px;text-align:left}.chord-notes{color:#ff0;font-size:14px;font-weight:700;margin-left:2px}.inversion{color:#d3d3d3;font-size:medium;font-weight:700;margin-left:10px}.inversion span{color:lime;font-size:14px;margin-left:10px}.inversion button{border:1px solid #000;border-radius:15px;color:#000;font-size:large;height:28px;margin-left:5px;min-width:38px}.inversion button:hover{background-color:teal;color:#fff}.inversion button:sel{background-color:teal;color:#fff}.insight-buttons{float:right;position:relative;text-align:right;width:105px}.insight-buttons button{border:1px solid #000;border-radius:12px;font-size:x-large;height:45px;margin:3px;padding:5px;width:45px}.insight-buttons button:hover{background-color:#ff0}.insight-buttons button.selected{background-color:teal}.piano-container{display:flex;justify-content:center}.in-piano{clear:both;display:flex;flex-wrap:nowrap;height:82px;position:relative}@media (max-width:600px){.in-piano{height:auto;width:95vw}}.key{align-items:flex-end;border:1px solid #333;display:flex;justify-content:center;margin-top:8px;position:relative;transition:all .1s ease-in}.white{background:#fff;height:70px;width:40px;z-index:1}.black{background:#000;height:40px;margin-left:-12px;margin-right:-12px;position:relative;width:24px;z-index:2}.active.white{background:#d1e8ff}.active.black{background:#3b83f6}.active.black,.active.white{box-shadow:inset 0 4px 8px #0000004d;transform:translateY(2px);transition:all .1s ease-in}.finger-dot{background:crimson;border-radius:50%;height:15px;margin-bottom:10px;width:15px}.greenOn{background-color:green;font-weight:700;padding:0 0 3px}.w3switch{font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:18px;margin-bottom:-4px;margin-left:10px;margin-top:3px}.switch{display:inline-block;height:28px;margin-left:10px;position:relative;top:-4px;width:55px}.switch input{height:0;opacity:0;width:0}.slider{background-color:#666;border-radius:34px;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{background-color:#fff;border-radius:49%;bottom:4px;content:"";height:20px;left:4px;width:20px}input:checked+.slider{background-color:teal}input:focus+.slider{box-shadow:0 0 1px teal}input:checked+.slider:before{transform:translateX(26px)}.chord-shape-block{background-color:#fff;border-radius:12px;float:left;margin:5px;padding:0;width:110px}.chord-shape-block div{margin:0 0 5px;padding:0}.guitar-fretboard:after{content:"";display:table}.chord-overlay{text-align:center}.chord-overlay span{color:#2e8b57;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:12px;font-weight:700;width:100%;word-spacing:-1px}.overlay-cell{bottom:5px;padding:0 3px;position:relative}.fret-pos{color:crimson;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:large;font-weight:700;position:relative;text-align:center;top:8px}.variant-navigation{bottom:15px;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;height:70px;margin:0;padding:0;position:absolute;right:15px;width:75px}.variant-navigation button{border-radius:12px;font-size:medium;margin:0;padding:0;width:80px}.progressions{font-family:Times New Roman,Times,serif;font-weight:700;margin:5px;text-align:left}.progression-header{display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:center}.progression-header select{border-radius:12px;color:#000;font-size:large;padding:0 10px;width:80px}.progression-list{display:flex;flex-direction:column;gap:8px}.progression-row{align-items:center;background-color:var(--background-color);border:1px solid var(--text-color);border-radius:12px;color:var(--text-color);display:grid;grid-template-columns:1fr 1fr;padding:6px 10px}.progression-row.selected{background-color:var(--text-color);color:var(--background-color)}.progression-row.selected button{border:1px solid var(--background-color)}.prog-roman{display:flex;font-family:Times New Roman,Times,serif;font-weight:700;gap:4px}.prog-chords{display:flex;flex-wrap:wrap;gap:8px}.prog-chord-button{border:1px solid var(--text-color);border-radius:12px;color:#000;color:blue;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:18px;min-width:25px;padding:2px 8px}.prog-chord-button:hover{background-color:orange;color:#000}.prog-chord-button:active,.prog-chord-button:focus{background-color:orange!important;color:#000}.progression-info{color:#000;font-style:italic}.theme-toggle{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff14;border:none;border-radius:20%;box-shadow:0 4px 12px #0003;color:#fff;cursor:pointer;display:flex;font-size:1.6rem;height:40px;justify-content:center;transition:all .25s ease;width:40px}
/*# sourceMappingURL=main.d44e1a5d.css.map*/