.fretboard-container{display:flex;justify-content:center;padding:1rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;width:95vw;max-width:95vw;overflow-x:auto;overflow-y:visible;box-sizing:border-box;margin:0 auto}.fretboard-wrapper{display:flex;flex-direction:column;min-width:fit-content}.fret-numbers-row{display:flex;align-items:center;margin-bottom:.5rem;height:30px;position:relative}.string-label-space{width:50px}.fret-number{position:absolute;text-align:center;font-weight:700;color:#333;font-size:.9rem;transform:translate(-50%);width:auto}.fretboard{display:flex;flex-direction:column;gap:0;border:2px solid #333;border-radius:4px;overflow:hidden;background-color:#d4a574}.string-container{display:flex;position:relative;height:45px;align-items:center;overflow:hidden}.string-label{width:50px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;color:#fff;background-color:#2c2c2c;height:100%;border-right:2px solid #1a1a1a}.steel-string{position:absolute;left:40px;right:0;background:linear-gradient(to bottom,#606060,#707070 20%,gray,#707070 80%,#606060);box-shadow:0 1px 1px #ffffff4d,0 -1px 1px #00000080;z-index:10;border-radius:1px}.fret{position:relative;height:100%;border-right:2px solid #333;display:flex;align-items:center;justify-content:center;min-height:100%}.fret.nut{width:20px;background-color:#2c2c2c!important;border-right:3px solid #1a1a1a}.fret:last-child{border-right:none}.fret.last-fret{width:0!important;min-width:0!important;padding:0!important;margin:0!important;overflow:hidden}.fret-wire{position:absolute;right:0;top:0;bottom:0;width:2px;background:linear-gradient(to right,#0000004d,#0009,#0000004d);box-shadow:1px 0 2px #0003}.scale-note-circle{position:absolute;width:32px;height:32px;border-radius:50%;background-color:#4a90e2;border:3px solid #2c5aa0;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #ffffff4d;z-index:20;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.scale-note-circle:hover{transform:scale(1.1);background-color:#5ba0f2;box-shadow:0 3px 6px #0006,inset 0 1px 2px #fff6}.scale-note-square{position:absolute;width:30px;height:30px;border-radius:0;background-color:#4a90e2;border:3px solid #2c5aa0;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #ffffff4d;z-index:20;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.scale-note-square:hover{transform:scale(1.1);background-color:#5ba0f2;box-shadow:0 3px 6px #0006,inset 0 1px 2px #fff6}.context-chord-note{position:absolute;width:32px;height:32px;border-radius:50%;background-color:transparent;border:3px solid white;box-shadow:0 2px 4px #0000004d;z-index:25;cursor:pointer;transition:all .2s ease}.context-chord-note:hover{transform:scale(1.1);box-shadow:0 3px 6px #0006}.context-root-note-square{position:absolute;width:30px;height:30px;border-radius:0;background-color:transparent;border:3px solid white;box-shadow:0 2px 4px #0000004d;z-index:25;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.context-root-note-square:hover{transform:scale(1.1);box-shadow:0 3px 6px #0006}.selected-chord-bubble-square{position:absolute;width:24px;height:24px;border-radius:0;background-color:#4a90e2;border:2px solid #2c5aa0;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #ffffff4d;z-index:30;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.selected-chord-bubble-square:hover{transform:scale(1.1);background-color:#5ba0f2;box-shadow:0 3px 6px #0006,inset 0 1px 2px #fff6}.selected-chord-bubble-circle{position:absolute;width:24px;height:24px;border-radius:50%;background-color:#4a90e2;border:2px solid #2c5aa0;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #ffffff4d;z-index:30;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.selected-chord-bubble-circle:hover{transform:scale(1.1);background-color:#5ba0f2;box-shadow:0 3px 6px #0006,inset 0 1px 2px #fff6}.selected-chord-label{color:#fff;font-size:.7rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);line-height:1;pointer-events:none}.scale-note-label{color:#fff;font-size:.75rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);line-height:1;pointer-events:none}.tab-position-marker{position:absolute;width:36px;height:36px;z-index:35;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;pointer-events:none;background:transparent}.tab-position-crosshair{pointer-events:none;filter:drop-shadow(0 0 1px rgba(255,71,87,1)) drop-shadow(0 0 2px rgba(255,71,87,.8))}.tab-arrow-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:34}.tiny-key-bubble{position:absolute;width:16px;height:16px;border-radius:50%;background-color:#4a90e2;border:2px solid #2c5aa0;box-shadow:0 1px 2px #0000004d,inset 0 1px 1px #ffffff4d;z-index:15;pointer-events:none}.tiny-key-bubble-context{position:absolute;width:16px;height:16px;border-radius:50%;background-color:transparent;border:2px solid white;box-shadow:0 1px 2px #0000004d;z-index:15;pointer-events:none}.tab-ribbon-container{width:100%;background:#fff;border-radius:0 0 8px 8px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.tab-ribbon-scroll{overflow-x:auto;overflow-y:hidden;padding:1rem;background-color:#1e1e1e;max-height:400px}.tab-ribbon-content{margin:0;padding:0;font-family:Courier New,Monaco,Menlo,monospace;font-size:.9rem;line-height:1.4;color:#fff;white-space:pre;display:inline-block;min-width:100%}.tab-line{display:block;white-space:pre;margin:0;padding:0}.tab-ribbon-scroll::-webkit-scrollbar{height:12px}.tab-ribbon-scroll::-webkit-scrollbar-track{background:#2d2d2d;border-radius:6px}.tab-ribbon-scroll::-webkit-scrollbar-thumb{background:#555;border-radius:6px}.tab-ribbon-scroll::-webkit-scrollbar-thumb:hover{background:#666}.tab-ribbon-content-wrapper{position:relative;display:inline-block}.tab-highlight{position:absolute;top:0;height:100%;background-color:transparent;border:2px solid rgba(255,0,0,.8);border-left:3px solid rgba(255,0,0,.8);border-right:3px solid rgba(255,0,0,.8);pointer-events:auto;z-index:10;box-shadow:0 0 4px #ff000080;-webkit-user-select:none;user-select:none}.app{display:flex;flex-direction:column;align-items:center;padding:2rem;gap:2rem;min-height:100vh;background:linear-gradient(to bottom,#f5f5f5,#e8e8e8)}.app h1{color:#333;font-size:2.5rem;margin:0;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.controls{display:flex;gap:2rem;align-items:flex-start;background:#fff;padding:1.5rem 2rem;border-radius:8px;box-shadow:0 2px 8px #0000001a}.main-controls{display:flex;flex-direction:column;gap:1.5rem}.main-controls-row{display:flex;gap:2rem;align-items:center}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group label{font-weight:600;color:#555;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.select-input{padding:.75rem 1rem;border:2px solid #ddd;border-radius:6px;font-size:1rem;background-color:#fff;color:#333;cursor:pointer;transition:all .2s ease;min-width:150px}.select-input:hover{border-color:#4a90e2}.select-input:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a}.tab-loader-section{width:95vw;max-width:95vw;margin-top:0}.tab-loader-controls{display:flex;gap:1rem;align-items:flex-end;background:#fff;padding:1.5rem 2rem;border-radius:8px;box-shadow:0 2px 8px #0000001a}.paste-input-group{flex:1;min-width:0}.paste-input{width:100%;padding:.75rem 1rem;border:2px solid #ddd;border-radius:6px;font-size:.9rem;background-color:#fff;color:#333;transition:all .2s ease;font-family:Courier New,Monaco,Menlo,monospace;resize:vertical;line-height:1.4}.paste-input:hover{border-color:#4a90e2}.paste-input:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a}.load-button{padding:.75rem 2rem;background-color:#4a90e2;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.load-button:hover:not(:disabled){background-color:#3a80d2;transform:translateY(-1px);box-shadow:0 4px 8px #4a90e24d}.load-button:active:not(:disabled){transform:translateY(0)}.load-button:disabled{background-color:#ccc;cursor:not-allowed;transform:none}.error-message{background-color:#fee;color:#c33;padding:1rem;border-radius:6px;margin-top:1rem;border:1px solid #fcc}.tab-display-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:#f5f5f5;border-bottom:1px solid #ddd;background:#fff;border-radius:8px 8px 0 0;box-shadow:0 2px 8px #0000001a}.tab-display-header h3{margin:0;color:#333;font-size:1.2rem}.tab-header-controls{display:flex;align-items:center;gap:1rem}.tab-navigation-controls{display:flex;align-items:center;justify-content:center;gap:1rem;padding:0 .5rem}.nav-button{padding:.5rem 1rem;background-color:#4a90e2;color:#fff;border:none;border-radius:6px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:40px;display:flex;align-items:center;justify-content:center}.nav-button:hover:not(:disabled){background-color:#3a80d2;transform:translateY(-1px);box-shadow:0 4px 8px #4a90e24d}.nav-button:active:not(:disabled){transform:translateY(0)}.nav-button:disabled{background-color:#ccc;cursor:not-allowed;opacity:.5}.position-indicator{font-weight:600;color:#333;font-size:.9rem;min-width:80px;text-align:center}.project-button{padding:.5rem 1rem;background-color:#4a90e2;color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.project-button:hover{background-color:#3a80d2;transform:translateY(-1px);box-shadow:0 4px 8px #4a90e24d}.project-button:active{transform:translateY(0)}.project-button.active{background-color:#2c5aa0;box-shadow:0 2px 4px #4a90e24d}.revert-button{padding:.5rem 1rem;background-color:#6c757d;color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.revert-button:hover{background-color:#5a6268;transform:translateY(-1px);box-shadow:0 4px 8px #6c757d4d}.revert-button:active{transform:translateY(0)}.context-section{display:flex;flex-direction:column;gap:1rem;padding-left:2rem;border-left:2px solid #e0e0e0}.context-header{display:flex;align-items:center;gap:1rem}.use-sevenths-label{margin-left:auto}.ios-switch-label{display:flex;align-items:center;gap:.75rem;cursor:pointer}.switch-label-text{font-weight:600;color:#555;font-size:.9rem;-webkit-user-select:none;user-select:none}.ios-switch{position:relative;width:51px;height:31px;border:none;border-radius:15.5px;cursor:pointer;padding:0;transition:background-color .3s ease;outline:none;-webkit-tap-highlight-color:transparent}.ios-switch.off{background-color:#e5e5ea}.ios-switch.on{background-color:#34c759}.ios-switch-thumb{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background-color:#fff;box-shadow:0 2px 4px #0003;transition:transform .3s cubic-bezier(.4,0,.2,1);transform:translate(0)}.ios-switch.on .ios-switch-thumb{transform:translate(20px)}.ios-switch:active .ios-switch-thumb{width:30px}.ios-switch.on:active .ios-switch-thumb{transform:translate(17px)}.ios-switch.off:active .ios-switch-thumb{transform:translate(0)}.context-chord-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.chord-button-wrapper{display:flex;flex-direction:column;align-items:center;gap:.25rem}.chord-function-label{font-style:italic;font-family:Georgia,Times New Roman,serif;font-size:.75rem;color:#666;font-weight:500}.chord-button{width:60px;height:60px;padding:0;border:2px solid #ddd;border-radius:6px;background-color:#fff;color:#333;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;text-align:center}.chord-button:hover{border-color:#4a90e2;background-color:#f0f7ff}.chord-button.selected{background-color:#4a90e2;color:#fff;border-color:#2c5aa0;box-shadow:0 2px 4px #4a90e24d}.chord-modifiers-subtitle{font-weight:600;color:#555;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;margin-top:0;margin-bottom:.5rem}.modifiers-section{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}.selected-chord-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5rem}.selected-chord-subtitle{font-weight:600;color:#555;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;align-self:flex-start}.context-modifiers{display:flex;flex-direction:row;gap:2rem;align-items:flex-start}.flavor-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.flavor-break{flex-basis:100%;height:0}.flavor-button{padding:.5rem 1rem;border:2px solid #ddd;border-radius:6px;background-color:#fff;color:#333;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.flavor-button:hover{border-color:#4a90e2;background-color:#f0f7ff}.flavor-button.selected{background-color:#4a90e2;color:#fff;border-color:#2c5aa0;box-shadow:0 2px 4px #4a90e24d}.toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.toggle-input{width:20px;height:20px;cursor:pointer;accent-color:#4a90e2}.toggle-text{font-weight:600;color:#555;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;-webkit-user-select:none;user-select:none}.flatten-root-label .toggle-text{font-weight:400;font-size:.8rem;color:#888;text-transform:none;letter-spacing:0}.chord-badge{position:relative;background-color:#4a90e2;color:#fff;padding:.5rem .75rem;border-radius:6px;box-shadow:0 2px 4px #0003;min-width:120px;text-align:center}.chord-badge-function{font-style:italic;font-family:Georgia,Times New Roman,serif;font-size:.75rem;color:#666;font-weight:500;text-align:center;min-width:120px}.chord-badge-title{font-weight:700;font-size:1rem;margin-bottom:.25rem}.chord-badge-notes{font-size:.75rem;opacity:.9;font-weight:500}.display-mode-toggle{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.display-mode-label{font-weight:600;color:#555;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.display-mode-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.display-mode-button{padding:.5rem 1rem;border:2px solid #ddd;border-radius:6px;background-color:#fff;color:#333;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.display-mode-button:hover{border-color:#4a90e2;background-color:#f0f7ff}.display-mode-button.selected{background-color:#4a90e2;color:#fff;border-color:#2c5aa0;box-shadow:0 2px 4px #4a90e24d}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}#root{width:100%;min-height:100vh}