:root{--color-1: #ffd8be;--color-2: #ffeedd;--color-3: #f8f7ff;--color-4: #b8b8ff;--color-5: #9381ff;--standard-hover: .1s ease background-color;--background: #000000;--background-text: #e7e7e7;--s1-background: #333333;--s1-text: #ffffff;--s2-background: #777777;--s2-background-hover: #708d71;--s2-text: #ffffff;--s2-text-disabled: #c7c7c7;--s3-background: #979797;--s3-text: #ffffff;--s3-text-disabled: #c7c7c7;--a1-background: #9381ff;--a1-text: #ffffff;--highlight-1: #8cb990;--highlight-2: #dbcd7c;--highlight-2-subtle: #a8a06e;--highlight-3: #9381ff;--highlight-3-subtle: #736e92;--fretboard-strings: #beb16b;--fretboard-lines: #8c8c8c}#root{max-width:95vw;margin:0 auto;padding:2rem;text-align:center}body{background-color:var(--background);color:var(--background-text)}.section{background-color:var(--s1-background);padding:20px;border-radius:20px;margin:5px;color:var(--s1-text);width:auto;max-width:calc(100vw - 128px)}select{background-color:var(--a1-background);color:var(--a1-text);padding:7px;border-radius:50px;outline:none;border:none}.scale-selector .scale-container{display:flex;justify-content:center;gap:10px}.scale-selector .scale-container .tonic-dropdown{width:60px;height:33px}.scale-selector .scale-container .mode-dropdown{width:125px;height:33px}.scale-selector .sharp-checkbox{height:15px;width:15px;color:var(--a1-background)}.scaleinfo-container .responsive-switch-container{display:flex;flex-direction:row;justify-content:space-evenly;gap:40px;max-width:100%}.scaleinfo-container .responsive-switch-container .switch-col-1{width:50%;min-width:475px;display:flex;flex-direction:column;justify-content:space-between}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords{overflow-x:auto;overflow-y:hidden}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-label{margin-top:20px;display:flex;padding:0 10px;align-items:end}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-label .chord-name-label{margin-left:50px;margin-right:auto;font-size:20px}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-label .chord-note-label{width:15px;padding:0 12px;margin-left:20px;display:flex;justify-content:center;font-size:13px}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-label .chord-note-label span{font-size:20px}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container{margin-top:10px;background-color:var(--s2-background);color:var(--s2-text);border-radius:10px}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row{width:100%;font-size:23px;cursor:pointer;transition:.1s ease background-color scale}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row:first-child{border-radius:10px 10px 0 0}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row:last-child{border-radius:0 0 10px 10px}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row:hover .content>.chord-note:not(:last-child){box-shadow:inset 0 0 0 3.5px var(--highlight-1)}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row:hover .content>.chord-name{scale:110%}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row.highlighted{background-color:var(--s2-background-hover)}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content{min-width:440px;justify-content:center;display:flex;align-items:center;padding:5px 10px}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content .chord-num{width:50px;text-align:left;font-size:28px;font-weight:500}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content .chord-name{margin-right:auto;display:flex;justify-content:flex-start;align-items:center;transition:.1s ease scale}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content .chord-name .chord-tonic{width:35px;text-align:left}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content .chord-note{padding:12px;background-color:var(--s3-background);color:var(--s3-text);border-radius:50px;width:15px;height:15px;font-size:25px;font-weight:500;margin-left:20px;cursor:pointer;transition:.1s ease background-color,.1s ease scale,.1s ease box-shadow}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content .chord-note.out-of-scale{color:var(--s3-text-disabled);cursor:not-allowed}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content .chord-note:hover:not(.out-of-scale){scale:110%}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content .chord-note.highlighted{background-color:var(--highlight-1)}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content .chord-note:active{scale:100%}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-chords .scale-chords-container .chord-row .content .chord-note *{display:flex;align-items:center;justify-content:center;transform:translateY(-12px)}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-summary .scale-name{font-size:20px;font-weight:700}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-summary .scale-notes-container{display:flex;flex-direction:row;justify-content:center;margin-top:10px;gap:5px}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-summary .scale-notes-container .scale-note{padding:10px;background-color:var(--s2-background);color:var(--s2-text);border-radius:50px;width:25px;height:25px;font-size:25px;font-weight:500;cursor:pointer;transition:.1s ease background-color,.1s ease scale}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-summary .scale-notes-container .scale-note:hover{scale:110%}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-summary .scale-notes-container .scale-note.highlighted{background-color:var(--s2-background-hover)}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-summary .scale-notes-container .scale-note:active{scale:100%}.scaleinfo-container .responsive-switch-container .switch-col-1 .scale-summary .scale-notes-container .scale-note *{transform:translateY(-7.5px);display:flex;align-items:center;justify-content:center}.scaleinfo-container .responsive-switch-container .switch-col-2{width:50%;min-width:435px}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns{width:auto}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .title{font-size:24px}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container{display:flex;flex-direction:column;gap:5px;background-color:var(--s2-background);border-radius:10px;padding:10px;margin-top:10px}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .unavailable{color:var(--s2-text-disabled)}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row{display:flex;justify-content:center;background-color:var(--s3-background);padding:5px;border-radius:10px}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord{width:85px;display:flex;flex-direction:column;justify-content:space-between;align-items:space-between;height:auto;width:100%;cursor:pointer;transition:.1s ease background-color}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord>*{transition:.1s ease scale}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord:hover>*,.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord:focus>*{scale:110%}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord:active>*{scale:105%}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord.highlighted{background-color:var(--highlight-1)}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord:first-child{border-radius:10px 0 0 10px}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord:last-child{border-radius:0 10px 10px 0}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord .chord-numeral{display:flex;justify-content:center;height:24px}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord .chord-letter{font-size:40px;text-align:center;line-height:40px;height:fit-content}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .row-chord .chord-type{font-size:12px}.scaleinfo-container .responsive-switch-container .switch-col-2 .scale-chord-patterns .progression_container .prog-row .divider{width:6px;background-color:var(--s3-text)}@media (max-width: 1065px){.scaleinfo-container .responsive-switch-container{display:flex;flex-direction:column;width:100%}.scaleinfo-container .responsive-switch-container .switch-col-1,.scaleinfo-container .responsive-switch-container .switch-col-2{min-width:auto;width:auto}.scaleinfo-container .responsive-switch-container .switch-col-2{margin-top:20px}}.guitarchart-container{display:flex;flex-direction:column;align-items:center}.guitarchart-container .fretboard-container{padding:10px 0;max-width:100%;width:fit-content;background-color:var(--s2-background);border-radius:10px;overflow-y:hidden;overflow-x:auto}.guitarchart-container .fretboard-container .fretboard{padding:10px}.guitarchart-container .fretboard-container .fretboard .string{display:flex;width:max-content}.guitarchart-container .fretboard-container .fretboard .string:first-child>.note-container:not(:first-child){border-top:2.5px solid var(--fretboard-lines)}.guitarchart-container .fretboard-container .fretboard .string:nth-last-child(2)>.note-container:not(:first-child){border-bottom:2.5px solid var(--fretboard-lines)}.guitarchart-container .fretboard-container .fretboard .string .note-container{border-right:2.5px solid var(--fretboard-lines)}.guitarchart-container .fretboard-container .fretboard .string .note-container .note{z-index:2;margin:2px 10px;background-color:var(--s3-background);width:35px;height:35px;border-radius:100px;display:flex;justify-content:center;align-items:center;font-size:20px;position:relative;box-sizing:border-box}.guitarchart-container .fretboard-container .fretboard .string .note-container .note:not(.not-in-scale){transition:.1s ease background-color,.1s ease scale,.1s ease border;cursor:pointer}.guitarchart-container .fretboard-container .fretboard .string .note-container .note:not(.not-in-scale).highlighted{background-color:var(--highlight-1)}.guitarchart-container .fretboard-container .fretboard .string .note-container .note:not(.not-in-scale).highlighted.focused-tonic{background-color:var(--highlight-2)}.guitarchart-container .fretboard-container .fretboard .string .note-container .note:not(.not-in-scale).highlighted.significant{background-color:var(--highlight-3)}.guitarchart-container .fretboard-container .fretboard .string .note-container .note:not(.not-in-scale).focused-tonic{border:3px solid var(--highlight-2)}.guitarchart-container .fretboard-container .fretboard .string .note-container .note:not(.not-in-scale).significant{border:3px solid var(--highlight-3)}.guitarchart-container .fretboard-container .fretboard .string .note-container .note.not-in-scale.open-note{color:var(--s3-text-disabled);cursor:not-allowed}.guitarchart-container .fretboard-container .fretboard .string .note-container .note.not-in-scale.open-note:hover{scale:100%}.guitarchart-container .fretboard-container .fretboard .string .note-container .note.not-in-scale:not(.open-note){background-color:#0000;color:#0000}.guitarchart-container .fretboard-container .fretboard .string .note-container .note .note-text{transform:translateY(-1px);user-select:none}.guitarchart-container .fretboard-container .fretboard .string .note-container .note:hover{scale:110%}.guitarchart-container .fretboard-container .fretboard .string .note-container .note-string-display{background-color:var(--fretboard-strings);height:2.5px;width:56.6px;transform:translateY(-20px)}.guitarchart-container .fretboard-container .fretboard .string .note-container:not(:first-child):not(:nth-child(2)):not(:last-child)>.note-string-display{transform:translateY(-20px) scaleX(1.1)}.guitarchart-container .fretboard-container .fretboard .string .note-container:first-child>.note-string-display{background-color:transparent}.guitarchart-container .fretboard-container .fretboard .fret-labels{display:flex;width:max-content}.guitarchart-container .fretboard-container .fretboard .fret-labels .label{width:56.6px;margin-left:2.13333px;display:flex;align-items:center;justify-content:center;transform:translate(-2px)}.guitarchart-container .fretboardcontrol-container{width:fit-content}.guitarchart-container .fretboardcontrol-container .col-split{display:flex;gap:20px}.guitarchart-container .fretboardcontrol-container .col-split h3{margin:0 0 5px}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control{display:flex;flex-direction:column}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .tuning-select{width:210px}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container{background-color:var(--s2-background);margin-top:10px;padding:10px;border-radius:10px;display:flex;flex-direction:column;width:190px;gap:5px}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring{display:flex;align-items:center;background-color:var(--s3-background);border-radius:10px;padding:5px 10px;width:170px}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-num{width:50px;text-align:left;font-size:20px}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select{display:flex;align-items:center;justify-content:space-between}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select .current-note{width:40px;font-size:24px}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select .back-arrow,.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select .forward-arrow{font-size:20px;cursor:pointer;transition:.1s ease scale;user-select:none}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select .back-arrow:hover,.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select .back-arrow:focus,.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select .forward-arrow:hover,.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select .forward-arrow:focus{scale:110%}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select .back-arrow:active,.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-note-select .forward-arrow:active{scale:105%}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-delete{margin-left:30px;font-size:20px;cursor:pointer;transition:.1s ease scale;user-select:none}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-delete:hover,.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-delete:focus{scale:110%}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .openstring .string-delete:active{scale:105%}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .new-openstring{margin-top:10px;display:flex;align-items:center;width:100%;justify-content:center;gap:20px;background-color:var(--s3-background);border-radius:10px;cursor:pointer;transition:.1s ease scale}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .new-openstring:hover,.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .new-openstring:focus{scale:108%}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .new-openstring:active{scale:105%}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .new-openstring .icon{font-size:32px;font-weight:500;margin-left:10px;transform:translateY(-3px)}.guitarchart-container .fretboardcontrol-container .col-split .tuning-control .openstring-container .new-openstring .text{margin-right:10px}.guitarchart-container .fretboardcontrol-container .col-split .string-length-control{display:flex;flex-direction:column;align-items:center;width:100%}.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .length-select{width:210px}.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container{background-color:var(--s2-background);margin-top:10px;padding:10px;border-radius:10px;width:190px;gap:5px}.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length{display:flex;align-items:center;justify-content:center;background-color:var(--s3-background);border-radius:10px;padding:5px 10px;width:170px}.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .forward-arrow,.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .back-arrow{cursor:pointer;transition:.1s ease scale;user-select:none;font-size:20px}.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .forward-arrow:hover:not(.disabled),.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .forward-arrow:focus:not(.disabled),.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .back-arrow:hover:not(.disabled),.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .back-arrow:focus:not(.disabled){scale:110%}.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .forward-arrow:active,.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .back-arrow:active{scale:105%}.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .forward-arrow.disabled,.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .back-arrow.disabled{color:var(--s3-text-disabled);cursor:not-allowed}.guitarchart-container .fretboardcontrol-container .col-split .string-length-control .custom-length-container .custom-length .current-length{width:80px;font-size:24px}.guitarchart-container .legend .legend-container{display:flex}.guitarchart-container .legend .legend-container .row{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.guitarchart-container .legend .legend-container .row .note{height:35px;width:35px;border-radius:50px;display:flex;justify-content:center;align-items:center;font-size:20px;user-select:none}.guitarchart-container .legend .legend-container .row .note.tonic{background-color:var(--highlight-2)}.guitarchart-container .legend .legend-container .row .note.significant{background-color:var(--highlight-3)}.guitarchart-container .legend .legend-container .row .note .note-text{transform:translateY(-1px)}.guitarchart-container .legend .legend-container .row .label{width:200px;text-align:center;margin-top:10px;margin-bottom:10px}.rotate-phone-warning{position:fixed;top:0;left:0;height:100vh;width:100%;padding:0 100px;box-sizing:border-box;z-index:100;background-color:var(--background);display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 470px){.rotate-phone-warning{display:none}}.rotate-phone-warning .svg-container{animation:rotation 6s infinite}.rotate-phone-warning .svg-container svg{width:200px;height:200px}@keyframes rotation{0%,25%{transform:rotate(0)}50%{transform:rotate(-90deg)}95%{transform:rotate(-90deg)}to{transform:rotate(0)}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}