:root{font-family: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}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;justify-content:center;align-items:flex-start;min-width:320px;min-height:100vh}#root{width:100%;display:flex;justify-content:center}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}}.fretboard{display:flex;gap:.5rem;background-color:#1a1a1a;padding:.5rem;border-radius:8px;max-width:fit-content;margin:0 auto}.string-labels{display:flex;flex-direction:column;justify-content:space-around;padding-right:.5rem}.string-label-container{height:40px;display:flex;align-items:center;justify-content:flex-end;padding-right:.5rem}.string-label{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;transition:all .2s ease;color:#999}.string-label.note-in-scale{background-color:#646cff;color:#fff;box-shadow:0 2px 8px #646cff66}.string-label.note-root{background-color:#ff8c42;color:#fff;border-radius:4px;box-shadow:0 2px 12px #ff8c4280;font-weight:900}.string-label.note-shared{background-color:#4caf50;color:#fff;box-shadow:0 2px 8px #4caf5066}.string-label.note-shared-root{background-color:#4caf50;color:#fff;border-radius:4px;box-shadow:0 2px 12px #4caf5080;font-weight:900}.string-label.note-root-shared{background-color:#ff8c42;color:#fff;border-radius:4px;border:2px solid #4caf50;box-shadow:0 2px 12px #ff8c4280;font-weight:900;box-sizing:border-box}.string-label.note-secondary-root-shared{background-color:#4caf50;color:#fff;border-radius:4px;border:2px solid #ff8c42;box-shadow:0 2px 12px #4caf5080;font-weight:900;box-sizing:border-box}.string-label.note-root-primary-only{background-color:#646cff;color:#fff;border-radius:4px;box-shadow:0 2px 12px #646cff99;font-weight:900}.string-label.note-secondary-root-only{background-color:transparent;border:2px solid #646cff;border-radius:4px;color:#fff;font-weight:900;box-shadow:none}.string-label.note-secondary{background-color:transparent;border:2px solid #646cff;color:#fff;box-shadow:none}.string-label.note-secondary-root{background-color:transparent;border:2px solid #ff8c42;border-radius:4px;color:#fff;font-weight:900;box-shadow:none}.fretboard-grid{position:relative;display:flex;flex-direction:column}.fret-markers{position:absolute;top:0;left:0;right:0;height:100%;display:flex;pointer-events:none;z-index:0}.fret-marker-column{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:80px}.fret-dot{width:12px;height:12px;background-color:#ffffff26;border-radius:50%}.string-row{display:flex;border-bottom:2px solid #555;position:relative;z-index:1}.string-row:last-of-type{border-bottom:none}.fret{width:60px;height:40px;border-right:3px solid #888;display:flex;align-items:center;justify-content:center;position:relative}.fret-open{border-right:4px solid #aaa;background-color:#ffffff0d}.note{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;transition:all .2s ease}.note-in-scale{background-color:#646cff;color:#fff;box-shadow:0 2px 8px #646cff66}.note-root{background-color:#ff8c42;color:#fff;border-radius:4px;box-shadow:0 2px 12px #ff8c4280;font-weight:900}.note-not-in-scale{background-color:transparent;color:transparent}.note-shared{background-color:#4caf50;color:#fff;box-shadow:0 2px 8px #4caf5066}.note-shared-root{background-color:#4caf50;color:#fff;border-radius:4px;box-shadow:0 2px 12px #4caf5080;font-weight:900}.note-root-shared{background-color:#ff8c42;color:#fff;border-radius:4px;border:2px solid #4caf50;box-shadow:0 2px 12px #ff8c4280;font-weight:900;box-sizing:border-box}.note-secondary-root-shared{background-color:#4caf50;color:#fff;border-radius:4px;border:2px solid #ff8c42;box-shadow:0 2px 12px #4caf5080;font-weight:900;box-sizing:border-box}.note-root-primary-only{background-color:#646cff;color:#fff;border-radius:4px;box-shadow:0 2px 12px #646cff99;font-weight:900}.note-secondary-root-only{background-color:transparent;border:2px solid #646cff;border-radius:4px;color:#fff;font-weight:900;box-shadow:none}.note-secondary{background-color:transparent;border:2px solid #646cff;color:#fff;box-shadow:none}.note-secondary-root{background-color:transparent;border:2px solid #ff8c42;border-radius:4px;color:#fff;font-weight:900;box-shadow:none}.fret-numbers{display:flex;padding-top:.5rem}.fret-number{width:60px;text-align:center;font-size:.8rem;color:#999;font-weight:500}@media (prefers-color-scheme: light){.fretboard{background-color:#8b6f47}.string-row{border-bottom-color:#333}.fret{border-right-color:#555}.fret-open{border-right-color:#333;background-color:#0000001a}.fret-dot{background-color:#ffffff4d}}.app{width:100%;max-width:1400px;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:2rem}header h1{margin:0;font-size:2.5rem}.controls-wrapper{display:flex;justify-content:center;gap:3rem;margin-bottom:2rem;flex-wrap:wrap;align-items:flex-start}.controls-row{display:flex;gap:2rem;align-items:flex-start}.scale-selector{display:flex;flex-direction:column;gap:1rem}.scale-selector h3{margin:0;font-size:1.2rem;font-weight:600}.scale-options{display:flex;flex-direction:column;gap:.5rem;border:2px solid rgba(100,108,255,.3);border-radius:8px;padding:.5rem;background-color:#0003;height:300px;box-sizing:border-box;overflow-y:auto}.scale-option{padding:.5rem 1.5rem;font-size:1rem;border:2px solid transparent;border-radius:4px;background-color:transparent;color:#ffffffde;cursor:pointer;transition:all .2s ease;text-align:left;font-weight:500;outline:none}.scale-option:focus{outline:none}.scale-option:hover{background-color:#646cff33}.scale-option.selected{background-color:#646cff;color:#fff}.scale-option.secondary{background-color:transparent!important;border-color:#646cff!important}.scale-option.secondary:hover{background-color:#646cff1a!important}.scale-option.selected.secondary{background-color:#4caf50!important;border-color:#4caf50!important;color:#fff!important}.key-selector-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.key-selector-container h3{margin:0;font-size:1.2rem;font-weight:600}.circle-of-fifths{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(100,108,255,.3);border-radius:50%;background-color:#0003}.circle-of-fifths:before{content:"";position:absolute;width:210px;height:210px;border:2px solid rgba(100,108,255,.3);border-radius:50%;pointer-events:none}.key-button{position:absolute;width:50px;height:50px;border-radius:50%;border:none;background-color:transparent;color:#ffffffde;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;outline:none}.key-button:focus{outline:none}.key-button.outer-ring{width:40px;height:40px;font-size:.85rem}.key-button.inner-ring{width:46px;height:46px;font-size:.85rem}.key-button.disabled{opacity:.2;cursor:not-allowed;pointer-events:none}.key-button:hover{border:2px solid #646cff;background-color:#646cff33;box-shadow:0 4px 12px #646cff66;z-index:10}.key-button.selected{border:2px solid #646cff;background-color:#646cff;box-shadow:0 4px 12px #646cff99;z-index:5}.key-button.center-key{position:static;transform:none;width:75px;height:75px;font-size:.75rem;border:none}.key-button.center-key:hover{border:2px solid #646cff;transform:scale(1.1)}.key-button.center-key.selected{border:2px solid #646cff}.key-button.secondary{background-color:transparent!important;border:2px solid #646cff;box-shadow:none!important}.key-button.secondary:hover{background-color:#646cff1a!important}.key-button.selected.secondary{background-color:#4caf50!important;border-color:#4caf50!important;box-shadow:0 4px 12px #4caf5099!important}.control-group{display:flex;align-items:center;gap:.5rem}.control-group label{font-weight:500}.control-group select{padding:.5rem 1rem;font-size:1rem;border-radius:4px;border:1px solid #ccc;background-color:#fff;color:#333;cursor:pointer}.control-group select:focus{outline:2px solid #646cff;outline-offset:2px}.control-group input[type=checkbox]{appearance:none;-webkit-appearance:none;width:44px;height:24px;background-color:#fff3;border-radius:12px;position:relative;cursor:pointer;transition:background-color .3s ease;flex-shrink:0}.control-group input[type=checkbox]:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background-color:#fff;top:3px;left:3px;transition:transform .3s ease}.control-group input[type=checkbox]:checked{background-color:#4caf50}.control-group input[type=checkbox]:checked:before{transform:translate(20px)}.display-options-wrapper{display:flex;flex-direction:column;gap:1rem}.display-options-wrapper h3{margin:0;font-size:1.2rem;font-weight:600}.display-options{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}.display-options .control-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.fretboard-container{margin-top:2rem;overflow-x:auto;display:flex;justify-content:center}@media (prefers-color-scheme: light){.key-button{color:#213547;border-color:#646cff}.scale-options{background-color:#ffffff80}.scale-option{color:#213547}.control-group input[type=checkbox]{background-color:#00000026}.control-group input[type=checkbox]:before{background-color:#fff}}@media (prefers-color-scheme: dark){.control-group select{background-color:#1a1a1a;color:#ffffffde;border-color:#555}}