#metronomeDenominatorSelect[type=number]::-webkit-inner-spin-button,#metronomeDenominatorSelect[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#metronomeDenominatorSelect[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;vertical-align:middle;display:flex;align-items:center;justify-content:center;text-align:center}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}html{overflow-x:hidden}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#2c3e50,#3498db);min-height:100vh;color:#333;position:relative}.container{max-width:1400px;margin:0 auto;padding:20px}.page-logo{display:flex;margin:16px auto;height:62px;width:100%;max-width:1400px;z-index:1000;pointer-events:none}.top-toolbar{display:flex;gap:16px;align-items:stretch}.tuning-tooltip-wrap{position:relative;display:inline-block}.tuning-tooltip{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border:1px solid #d8e8f4;border-radius:12px;box-shadow:0 6px 24px #00000021;padding:10px 14px;z-index:200;white-space:nowrap;display:flex;flex-direction:column;gap:6px;align-items:center;animation:tuning-tooltip-in .14s ease;pointer-events:none}.tuning-tooltip:before,.tuning-tooltip:after{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:6px solid transparent}.tuning-tooltip:before{border-bottom-color:#d8e8f4}.tuning-tooltip:after{border:5px solid transparent;border-bottom-color:#fff;margin-bottom:-1px}@keyframes tuning-tooltip-in{0%{opacity:0;transform:translate(-50%) translateY(-6px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.tuning-tooltip-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8098b0}.tuning-tooltip-bubbles{display:flex;gap:4px;align-items:center}.tuning-note-bubble{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;font-weight:600;font-size:10px;box-shadow:0 2px 6px #0000002e;border:2px solid rgba(255,255,255,.9)}.toolbar-btn-group{display:inline-flex;align-items:center;gap:5px}.toolbar-btn-group button{border-radius:0;margin:0;border-right-width:0}.toolbar-btn-group button:first-child{border-radius:6px 0 0 6px}.toolbar-btn-group button:last-child{border-radius:0 6px 6px 0;border-right-width:1px}.page-logo-float{position:fixed;top:14px;left:14px;height:62px;width:auto;z-index:1000;pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));opacity:.92}h1{text-align:center;margin-bottom:30px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5);font-size:2.5rem}.controls{background:#fff;justify-content:space-between;padding:16px;border-radius:12px;box-shadow:0 8px 25px #00000026;margin-bottom:0;display:flex;gap:16px;align-items:center;flex-wrap:wrap;flex:1}.tuning-controls{display:flex;gap:16px;width:100%}.toolbar-utility-panel{display:flex;flex-direction:row;gap:16px;align-items:center}.top-actions{background:#fff;border-radius:12px;box-shadow:0 8px 25px #00000026;display:flex;flex-direction:column;gap:10px;height:100%;justify-content:center}.top-actions #exportPDF,.top-actions #chordBagToggleBtn,.top-actions .notation-toggle-btn{height:100%}.notation-toggle-btn{display:flex;align-items:center;justify-content:center;gap:0;padding:8px 12px;background:#f5f6fa;border:1.5px solid #dde1ea;border-radius:8px;color:#7a8496;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.notation-toggle-btn:hover{background:#eaf2fb;border-color:#90bfe8;color:#2980b9}.notation-toggle-btn.active{background:#eaf2fb;border-color:#3498db;color:#1a6fa8}.notation-toggle-btn.active #notationToggleChevron{transform:rotate(180deg)}.arp-toolbar-group{display:flex;flex-direction:column;align-items:stretch;align-self:stretch;background:#fff;border-radius:12px;box-shadow:0 8px 25px #00000026;overflow:hidden;min-width:100px}.arp-toolbar-toggle{border-radius:0!important;box-shadow:none!important;flex:1;flex-direction:column;gap:6px;padding:10px 12px;font-size:.72em}.arp-toolbar-toggle svg{width:44px;height:44px;flex-shrink:0}.arp-toolbar-mini-controls{display:flex;align-items:stretch;border-top:1px solid rgba(0,0,0,.08);flex-shrink:0}.arp-toolbar-mini-btn{flex:1;padding:3px 2px;font-size:.64em;font-weight:600;background:transparent;color:#4a5568;border:none;border-right:1px solid rgba(0,0,0,.08);cursor:pointer;white-space:nowrap;line-height:1;transition:background .15s,color .15s}.arp-toolbar-mini-btn:last-child{border-right:none}.arp-toolbar-mini-sep{width:1px;align-self:stretch;background:#00000026;flex-shrink:0;margin:2px 0}.arp-toolbar-mini-btn:hover{background:#0000000f;color:#1a202c}.arpeggiator-section--minimized{display:none!important}.music-circle-panel{position:fixed;top:120px;right:24px;display:flex;flex-direction:column;background:#1e2230;border:1.5px solid #3a405a;border-radius:14px;box-shadow:0 8px 32px #0000008c,0 2px 8px #0000004d;z-index:9000;overflow:hidden;min-width:300px;-webkit-user-select:none;user-select:none}#circleOfFifthsPanel{top:160px;right:64px}@media (max-width: 768px){.music-circle-panel:not(.music-circle-panel--docked){min-width:0;border-radius:10px}.music-circle-body{padding:8px;overflow-x:auto}#chromaticCircleSvg,#circleOfFifthsSvg{max-width:100%;height:auto;display:block;margin:0 auto}}.music-circles-panels:has(.music-circle-panel--docked[style*=flex]){display:flex;flex-direction:row;gap:8px;margin-top:8px}.circles-arp-row{display:flex;align-items:flex-start;gap:8px}.circles-arp-row .music-circles-panels{flex:0 0 auto;min-width:0}.circles-arp-row .music-circles-panels:has(.music-circle-panel--docked[style*=flex]){flex:2;margin-top:0}.circles-arp-row .arpeggiator-section{flex:1;min-width:0}@media (max-width: 768px){.circles-arp-row{flex-direction:column}}.music-circle-panel--docked{position:relative!important;flex:1;min-width:0;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;border-radius:10px;box-shadow:0 4px 20px #00000073}.music-circle-panel--docked .music-circle-drag-handle{cursor:default}.music-circle-panel--docked .music-circle-body{padding:8px;overflow-x:auto}.app-body{display:flex;flex-direction:column}.app-main{min-width:0}.app-sidebar{display:flex;flex-direction:column;gap:8px;order:-1;margin-top:8px;margin-bottom:8px}.app-sidebar .music-circles-panels:has(.music-circle-panel--docked[style*=flex]){margin-top:0}.app-sidebar .arp-panel{margin-top:0}@media (min-width: 600px) and (max-width: 1599px){.app-sidebar{margin-top:16px;margin-bottom:16px}.app-sidebar:has(.music-circle-panel--docked[style*=flex]){flex-direction:row;align-items:stretch;gap:16px}.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .arpeggiator-section{flex:1 1 0;min-width:220px;display:flex;flex-direction:column}.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .arpeggiator-layout{flex:1}.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .music-circles-panels{flex:0 1 auto;max-width:55%;display:flex;flex-direction:row!important;align-items:stretch;gap:16px;margin-top:0}.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .music-circle-panel--docked{flex:1 1 0;min-width:0;max-width:260px;display:flex;flex-direction:column}.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .music-circle-panel--docked .music-circle-body{flex:1;display:flex;align-items:center;justify-content:center}}@media (min-width: 1600px){.container,.page-logo{max-width:unset}.top-toolbar{gap:16px}.tuning-controls{flex:1 1 0;min-width:0}.toolbar-utility-panel{flex:0 0 auto;justify-content:flex-start;gap:16px}.app-body{flex-direction:row;align-items:flex-start;gap:16px;margin-top:16px}.app-main{flex:1 1 0}.app-sidebar{flex:0 0 370px;width:370px;position:sticky;top:16px;order:0;gap:16px}.app-sidebar .arpeggiator-section{padding-top:0}.app-sidebar .music-circle-panel--docked{width:100%;flex:0 0 auto}.app-sidebar .music-circles-panels,.app-sidebar .music-circles-panels:has(.music-circle-panel--docked[style*=flex]){display:flex;flex-direction:column;gap:16px;margin-top:0}.app-sidebar .music-circles-panels:not(:has(.music-circle-panel--docked[style*=flex])){display:none}.app-sidebar .music-circle-close,.app-sidebar .music-circle-dock-btn{display:none}}.music-circle-panel--docked .music-circle-body svg{width:100%;height:auto;display:block;margin:0 auto}.music-circle-header-actions{display:flex;align-items:center;gap:2px}.music-circle-dock-btn{background:none;border:none;color:#778;padding:2px 4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;line-height:1;transition:color .15s,background .15s}.music-circle-dock-btn svg{width:13px;height:13px}.music-circle-dock-btn:hover{color:#e8eaf0;background:#ffffff14}.music-circle-drag-handle{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#272d42;border-bottom:1px solid #3a405a;cursor:move;font-size:12px;font-weight:600;color:#9aa0b8;letter-spacing:.03em}.music-circle-close{background:none;border:none;color:#778;font-size:18px;line-height:1;padding:0 2px;cursor:pointer;border-radius:4px;transition:color .15s,background .15s}.music-circle-close:hover{color:#e8eaf0;background:#ffffff14}.music-circle-body{padding:12px;display:flex;align-items:center;justify-content:center}.playback-utility-group{display:flex;gap:16px;align-items:stretch}.playback-utility-group .tempo-section{margin:0;align-self:center}.playback-utility-group .arpeggiator-section{margin:0;flex:1;min-width:0}.controls label{font-weight:700;color:#2c3e50}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.controls select{padding:8px 12px;border:2px solid #ddd;border-radius:6px;font-size:16px;background:#fff;transition:border-color .3s}.controls select:focus{outline:none;border-color:#3498db}#saveTuning{background:#3498db;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s;display:none}#saveTuning:hover{background:#2980b9}#savePreset{background:#9b59b6;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s}#savePreset:hover{background:#8e44ad}.preset-controls{display:flex;gap:8px;flex-wrap:wrap}.fret-range-controls{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.fret-range-inputs{display:flex;align-items:center;gap:6px}.fret-range-controls label{font-weight:700;color:#2c3e50;white-space:nowrap}.fret-range-controls input[type=number]{width:40px;padding:3px 2px;text-align:center;font-size:1rem;font-weight:700;background:#fff;border:1.5px solid #6a6a6ab7;border-radius:5px;color:#6a6a6ab7;box-shadow:0 1px 6px #3498db0f;cursor:pointer;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;vertical-align:middle}.fret-range-controls input[type=number]::-webkit-inner-spin-button,.fret-range-controls input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fret-range-controls input[type=number]:focus{outline:none;border-color:#5a6f87;background:#f3f6fa;color:#5a6f87}.fret-range-controls span{color:#666;font-size:16px}.fret-action-buttons{display:flex;align-items:center;gap:6px;flex-wrap:wrap}#savePreset{background:#27ae60;color:#fff;border:none;padding:10px 16px;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s}#savePreset:hover:not(:disabled){background:#229954}#savePreset:disabled{background:#95a5a6;cursor:not-allowed}#saveAsPreset{background:#9b59b6;color:#fff;border:none;padding:10px 16px;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s}#saveAsPreset:hover{background:#8e44ad}#deletePreset{background:#e74c3c;color:#fff;border:none;padding:10px 16px;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s}#deletePreset:hover:not(:disabled){background:#c0392b}#deletePreset:disabled{background:#95a5a6;cursor:not-allowed}#exportPDF{background:#27ae60;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s}#exportPDF:hover{background:#229954}#exportPDF:disabled{background:#95a5a6;cursor:not-allowed}#undoBtn,#redoBtn{background:#566573;color:#fff;border:none;width:38px;height:34px;padding:0;border-radius:6px;font-size:18px;line-height:1;cursor:pointer;transition:background .3s}#undoBtn:hover:not(:disabled),#redoBtn:hover:not(:disabled){background:#2e4053}#undoBtn:disabled,#redoBtn:disabled{background:#95a5a6;cursor:not-allowed}#fretboardSettingsBtn{background:none;border:none;cursor:pointer;padding:8px 9px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;line-height:0;transition:background .2s,border-color .2s,transform .25s}#fretboardSettingsBtn svg{width:24px;height:24px}#fretboardSettingsBtn:hover{transform:rotate(45deg)}#fretboardSettingsModal,#arpSettingsModal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:9999;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}#arpSettingsModal .settings-modal-panel{max-height:82vh;min-width:300px;max-width:440px}#arpSettingsModal .settings-modal-body{max-height:calc(82vh - 56px);padding:14px 18px;gap:10px}.settings-modal-panel{background:#fff;border-radius:14px;min-width:340px;max-width:90vw;box-shadow:0 12px 40px #0006;overflow:hidden;animation:settingsIn .18s ease}@keyframes settingsIn{0%{opacity:0;transform:scale(.94) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.settings-modal-header{background:linear-gradient(130deg,#2c3e50,#3d5168);color:#fff;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;font-size:1rem;font-weight:700;letter-spacing:.5px}.settings-close-btn{background:none;border:none;color:#fff9;font-size:1.05rem;cursor:pointer;padding:2px 8px;border-radius:5px;line-height:1.5;transition:background .15s,color .15s}.settings-close-btn:hover{background:#ffffff2e;color:#fff}.settings-modal-body{padding:18px 22px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:calc(90vh - 60px)}.settings-row{display:flex;flex-direction:column;gap:5px}.settings-row label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#7a90a0}.settings-row select{width:100%;padding:8px 10px;border:1.5px solid #e0e4e8;border-radius:7px;font-size:.93rem;background:#f7f9fc;color:#333;cursor:pointer;transition:border-color .15s,box-shadow .15s;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.settings-row select:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db26}.settings-modal-footer{padding:12px 22px 16px;display:flex;justify-content:flex-start;border-top:1px solid #f0f2f4}.settings-btn{padding:9px 22px;border:none;border-radius:7px;font-size:.9rem;font-weight:700;cursor:pointer;letter-spacing:.2px;transition:filter .15s,transform .1s}.settings-btn:active{transform:scale(.97)}.settings-btn-primary{background:linear-gradient(135deg,#3498db,#2880c8);color:#fff;box-shadow:0 2px 8px #3498db59}.settings-btn-primary:hover{filter:brightness(1.1)}.settings-color-row{display:flex;gap:14px;flex-wrap:wrap}.settings-color-item{display:flex;align-items:center;gap:5px;font-size:.78rem;color:#5a7080}.settings-color-item--wide{flex:1}.settings-section{display:flex;flex-direction:column;gap:7px}.settings-section+.settings-section{border-top:1px solid #e0e4e8;padding-top:10px;margin-top:3px}.settings-section-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#d47a1a}.settings-inline-row{display:flex;align-items:center;gap:8px}.settings-inline-row>label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#7a90a0;white-space:nowrap;flex-shrink:0;min-width:52px}.settings-inline-row>select{flex:1;min-width:0;padding:6px 8px;border:1.5px solid #e0e4e8;border-radius:7px;font-size:.85rem;background:#f7f9fc;color:#333;cursor:pointer;transition:border-color .15s,box-shadow .15s;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.settings-inline-row>select:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db26}.settings-inline-row>.settings-color-row{flex:1}.settings-toggle-row{justify-content:space-between}.settings-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}.settings-slider-wrap{display:flex;align-items:center;gap:8px;flex:1}.settings-slider-wrap input[type=range]{flex:1}.settings-slider-value{width:34px;text-align:right;font-size:.75rem;color:#7a90a0;flex-shrink:0}.settings-color-item input[type=color]{width:32px;height:26px;border:1.5px solid #e0e4e8;border-radius:5px;padding:2px;cursor:pointer;background:#f7f9fc}.settings-btn-reset{background:none;border:1.5px solid #d9dee6;color:#8a9ab0;cursor:pointer;font-size:13px;font-weight:600;padding:7px 16px;border-radius:6px;line-height:1;letter-spacing:.02em;transition:color .15s,background .15s,border-color .15s}.settings-btn-reset:hover{color:#e74c3c;border-color:#e74c3c80;background:#e74c3c0f}.settings-shape-select{flex:1;padding:5px 7px;border:1.5px solid #e0e4e8;border-radius:6px;font-size:.8rem;background:#f7f9fc;color:#333;cursor:pointer}.settings-synth-panel{background:#f3f7fb;border:1.5px solid #e0e4e8;border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;margin-bottom:6px}.settings-synth-panel .settings-row{margin:0;padding:0;background:none;border:none}.settings-synth-adsr{display:flex;flex-direction:column;gap:6px}.settings-synth-row{display:flex;align-items:center;gap:8px}.settings-synth-row label{width:14px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#7a90a0;flex-shrink:0}.settings-synth-row input[type=range]{flex:1;accent-color:#3498db}.settings-synth-row span{width:42px;text-align:right;font-size:.8rem;color:#5a7080;font-variant-numeric:tabular-nums;flex-shrink:0}.settings-row--reverb{flex-direction:row;align-items:center;justify-content:space-between}.settings-reverb-toggle{padding:5px 18px;border:1.5px solid #e0e4e8;border-radius:20px;font-size:.82rem;font-weight:700;background:#f0f2f5;color:#7a90a0;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;letter-spacing:.4px}.settings-reverb-toggle.active{background:#2ecc71;color:#fff;border-color:#27ae60;box-shadow:0 0 8px #2ecc7173}.settings-reverb-panel{background:#f3f7fb;border:1.5px solid #e0e4e8;border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:10px;margin-top:2px}.settings-reverb-row{display:flex;flex-direction:column;gap:4px}.settings-reverb-row label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#7a90a0}.settings-reverb-slider-wrap{display:flex;align-items:center;gap:8px}.settings-reverb-slider-wrap input[type=range]{flex:1;accent-color:#3498db}.settings-reverb-slider-wrap span{width:38px;text-align:right;font-size:.8rem;color:#5a7080;font-variant-numeric:tabular-nums}.delay-mode-row{display:flex;gap:6px;margin-bottom:2px}.delay-mode-btn{flex:1;padding:5px 10px;border:1.5px solid #e0e4e8;border-radius:6px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:#f0f2f5;color:#7a90a0;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.delay-mode-btn.active{background:#3498db;color:#fff;border-color:#2980b9}.delay-time-ms-input{width:72px;padding:4px 6px;border:1.5px solid #dde3e9;border-radius:6px;font-size:.85rem;text-align:center}.fret-position.note-shape-ring{background:transparent!important;box-shadow:none!important;border-width:3px!important;width:26px!important;height:26px!important}.fret-position.note-shape-ring-square{background:transparent!important;box-shadow:none!important;border-width:3px!important;border-radius:4px!important;width:26px!important;height:26px!important}.fret-position.note-shape-ring-triangle{background:transparent!important;box-shadow:none!important;border:none!important;border-radius:0!important;width:24px!important;height:24px!important}.fret-position.note-shape-ring-triangle:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;clip-path:path("M 12 0 L 24 24 L 0 24 Z M 12 5 L 4 21 L 20 21 Z");background:var(--note-ring-color, #fff);pointer-events:none;z-index:0}.fret-position.note-shape-ring-triangle .note-name{top:64%}.fret-position.note-shape-ring-diamond{background:transparent!important;box-shadow:none!important;border:none!important;border-radius:0!important;width:24px!important;height:24px!important}.fret-position.note-shape-ring-diamond:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;clip-path:path("M 12 0 L 24 12 L 12 24 L 0 12 Z M 12 4 L 4 12 L 12 20 L 20 12 Z");background:var(--note-ring-color, #fff);pointer-events:none;z-index:0}.fret-position.note-shape-square{border-radius:3px!important}.fret-position.note-shape-triangle{clip-path:polygon(50% 0%,0% 100%,100% 100%);border-radius:0!important;width:24px!important;height:24px!important}.fret-position.note-shape-triangle .note-name{top:64%}.fret-position.note-shape-diamond{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);border-radius:0!important}.fretboard-container{position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 25px #00000026;padding:16px;overflow-x:auto}.fret-numbers{position:relative;height:25px;margin-top:6px}.fret-number{position:absolute;width:60px;text-align:center;font-weight:700;color:#7f8c8d;font-size:14px;transform:translate(-50%)}.fretboard{position:relative;border-radius:8px;border:3px solid #654321;min-height:200px;margin-left:0;isolation:isolate}.fretboard:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;pointer-events:none;background:var(--fretboard-bg-full, #fab888);opacity:var(--fretboard-bg-opacity, 1)}.string-labels{position:absolute;left:-60px;top:0;height:calc(100% - 10px);width:50px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;z-index:3}@media (max-width: 920px){.fretboard-container{padding-left:60px}.string-labels{left:-50px}}@media (max-width: 768px){.string-labels{left:-60px;width:50px}.string-note-label,.sn-face{font-size:10px}}.string-note-label{position:relative;display:flex;align-items:center;justify-content:center;gap:3px;width:auto;height:30px;min-width:unset;min-height:unset;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;background:transparent;touch-action:none;overflow:visible;flex-shrink:0;padding:0}.string-note-label.locked-note .sn-face{background:radial-gradient(circle at 30% 30%,#ffe8a3,#ffc857 55%,#e59f00)!important;border:2px solid #6a4300!important;box-shadow:0 0 0 2px #ffe6968c,0 0 16px #ffbe28d9!important;color:#2f1900!important;text-shadow:0 1px 1px rgba(255,245,220,.65)}.string-note-label.selected .sn-face{border-color:gold!important;box-shadow:0 0 12px #ffd700cc;animation:selectedPulse 2s infinite}.string-note-label.scale-audition .sn-face{animation:scalePulse .25s ease-out forwards}.string-note-label.scale-audition-exact .sn-face{outline:3px solid #2ecc71;outline-offset:2px;box-shadow:0 0 10px #2ecc71d9}.sn-face{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;border:2.5px solid #ccc;background:#ffffffe6;box-shadow:0 2px 5px #00000026;font-size:11px;font-weight:700;white-space:nowrap;color:#555;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}.sn-face:hover{border-color:#3498db;box-shadow:0 2px 8px #3498db4d}.sn-prev,.sn-next{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;background:#ffffffb3;border:1px solid #ddd;border-radius:3px;font-size:7px;color:#bbb;cursor:pointer;line-height:1;transition:color .15s,background .15s,border-color .15s;flex-shrink:0;opacity:0;transition:opacity .15s,color .15s,background .15s}.string-note-label:hover .sn-prev,.string-note-label:hover .sn-next{opacity:1}.sn-prev:hover,.sn-next:hover{color:#3498db;background:#3498db1a;border-color:#3498db66}.sn-list{display:none;position:fixed;transform:translate(-50%);background:#fff;border:1px solid #bbb;border-radius:5px;box-shadow:0 6px 18px #00000038;z-index:9999;min-width:56px;max-height:220px;overflow-y:auto}.sn-option{font-size:12px;font-weight:700;padding:5px 10px;text-align:center;cursor:pointer;color:#333;transition:filter .1s}.sn-option:hover{filter:brightness(.88)}.sn-option.selected{box-shadow:inset 0 0 0 2px #ffffffa6}.string-note-label.sn-shape-ring .sn-face{background:transparent!important}.sn-face.note-shape-ring{background:transparent!important;border-width:3px!important}.sn-face.note-shape-ring-square{background:transparent!important;border-width:3px!important;border-radius:4px!important}.sn-face.note-shape-ring-triangle{background:transparent!important;border:none!important;border-radius:0!important;position:relative}.sn-face.note-shape-ring-triangle:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;clip-path:path("M 15 0 L 30 30 L 0 30 Z M 15 6 L 5 26 L 25 26 Z");background:var(--note-ring-color, #fff);pointer-events:none;z-index:0}.sn-face.note-shape-ring-diamond{background:transparent!important;border:none!important;border-radius:0!important;position:relative}.sn-face.note-shape-ring-diamond:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;clip-path:path("M 15 0 L 30 15 L 15 30 L 0 15 Z M 15 5 L 25 15 L 15 25 L 5 15 Z");background:var(--note-ring-color, #fff);pointer-events:none;z-index:0}.sn-face.note-shape-square{border-radius:3px!important}.sn-face.note-shape-triangle{clip-path:polygon(50% 0%,0% 100%,100% 100%);border-radius:0!important}.sn-face.note-shape-diamond{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);border-radius:0!important}.fret-line{position:absolute;background:silver;width:4px;height:100%;border-radius:2px;box-shadow:1px 0 3px #ffffffa6,-1px 0 3px #00000059,0 0 5px #0000002e;z-index:2}.fret-line.nut{background:wheat;width:8px;box-shadow:2px 0 5px #ffffff8c,-2px 0 4px #0000004d,0 0 8px #0003}.fret-line.mid-neck-start{background:#8a8a8a;width:3px}.string{position:absolute;width:100%;height:2px;background:silver;border-radius:1px;box-shadow:0 1px 2px #0003;z-index:2}.fret-position{position:absolute;width:24px;height:24px;border:2px solid transparent;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:transform .15s,border-color .15s;z-index:5}.fret-position:hover{background:#3498db4d;border-color:#36dfeb;transform:translate(-50%,-50%) scale(1.2)}.fret-position.marked{background:#e74d3c38;box-shadow:0 0 15px #e74d3c5a;opacity:var(--note-opacity, 1)}.fret-position.marked:hover{background:#c0392b;transform:translate(-50%,-50%) scale(1.3)}.fret-position.selected{background:#ffd70099!important;border-color:gold!important;border-width:3px!important;box-shadow:0 0 20px #ffd700cc!important;animation:selectedPulse 2s infinite}.fret-position.selected:hover{background:#ffd700cc!important;transform:translate(-50%,-50%) scale(1.3)}@keyframes selectedPulse{0%,to{opacity:1}50%{opacity:.7}}.selection-box{position:absolute;border:2px dashed #ffd700;background:#ffd70026;pointer-events:none;z-index:1000;border-radius:4px;animation:selectionBoxPulse 1.5s infinite}@keyframes selectionBoxPulse{0%,to{opacity:.8}50%{opacity:.4}}.shift-selection-box{position:fixed;border:2px solid rgba(66,135,245,.9);background:#4287f526;pointer-events:none;z-index:9999;border-radius:3px}.shift-selection-box.deselect-mode{border-color:#f55042e6;background:#f5504226}.note-name{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;color:#fff;padding:2px 4px;border-radius:3px;font-size:10px;font-weight:700;white-space:nowrap;pointer-events:none;z-index:10;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.interval-dot{position:absolute;width:75%;height:75%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:6}.fret-marker{position:absolute;width:18px;height:18px;background:#eee;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:1;border:2px solid #6d6d6d}.fret-marker.dot-3,.fret-marker.dot-5,.fret-marker.dot-7,.fret-marker.dot-9,.fret-marker.dot-15,.fret-marker.dot-17,.fret-marker.dot-19,.fret-marker.dot-21{top:25%}.fret-marker.double-12-top{top:60%}.fret-marker.double-12-bottom{top:80%}.fret-marker.double-24-top{top:20%}.fret-marker.double-24-bottom{top:40%}svg.fret-marker{background:none!important;border:none!important;border-radius:0!important}.fret-position.chord-shape{border-width:3px;box-shadow:0 0 10px #3498db66}.fret-position.locked-note{background:radial-gradient(circle at 30% 30%,#ffe8a3,#ffc857 55%,#e59f00)!important;border:2px solid #6a4300!important;box-shadow:0 0 0 2px #ffe6968c,0 0 16px #ffbe28d9!important}.fret-position.locked-note .note-name{color:#2f1900;text-shadow:0 1px 1px rgba(255,245,220,.65)}.info{text-align:center;margin-top:20px;color:#fff;font-size:18px;opacity:.9}.scales-section{background:#fff;padding:18px;border-radius:12px;box-shadow:0 8px 25px #00000026;margin-top:16px}.arpeggiator-section{border-radius:12px}.arpeggiator-layout{display:flex;gap:16px;align-items:stretch}.arpeggiator-main{flex:1;min-width:0;display:flex;flex-direction:column}.utility-panel{max-width:32vw;background:linear-gradient(160deg,#f7fbff,#eff5fb);border:1px solid #d9e5f2;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:8px}.utility-panel-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5a6f87}.utility-panel .fret-range-controls{justify-content:space-between;background:#fff;border:1px solid #dbe6f3;border-radius:6px;padding:6px;gap:4px}.utility-panel .fret-range-controls label{font-size:12px}.utility-panel .fret-range-controls input[type=number]{width:46px;padding:3px 2px;font-size:.85rem}.utility-panel .toggle-container{background:#fff;border:1px solid #dbe6f3;border-radius:6px;padding:6px;justify-content:center}.utility-panel .toggle-text{font-size:12px;padding:6px 10px;width:68px}.utility-panel .toggle-slider{width:68px;top:5px;left:5px;height:calc(100% - 10px)}.arpeggiator-section .arp-panel{margin-top:0;flex:1}.tempo-section{display:flex;background:#fff;border:1px solid rgba(74,144,226,.18);border-radius:10px;height:100%}.tempo-layout{display:flex;align-items:center;gap:8px;padding:8px}.tempo-group{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:8px;box-shadow:0 2px 12px #3498db12}.tempo-group-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#5a6f87;white-space:nowrap;text-shadow:none}.tempo-sep{width:1px;height:44px;background:#4a90e226;flex-shrink:0}.tempo-bpm-input{width:68px;padding:5px 4px;text-align:center;font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;background:#ffffff0f;border:1px solid rgba(74,144,226,.28);border-radius:7px;color:#6a6a6ab7;-moz-appearance:textfield}.tempo-bpm-input::-webkit-inner-spin-button,.tempo-bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo-bpm-input:focus{outline:none;border-color:#4a90e299;background:#ffffff17}.tempo-metro-controls{display:flex;flex-direction:column;align-items:center;gap:6px}.tempo-metro-vol-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;margin-left:auto}.tempo-metro-speaker{opacity:.55;flex-shrink:0}.tempo-metro-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:42px;border-radius:6px;background:#ffffff0f;border:1.5px solid #5a6f87;color:#5a6f87;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.tempo-metro-btn.enabled{border-color:#4a90e28c;color:#b0ccdf;background:#4a90e21a}.tempo-metro-btn.active{background:#3498db38;color:#c8e4ff;border-color:#3498dba6;animation:metro-pulse var(--metro-beat-dur, .5s) ease-in-out infinite}.tempo-metro-btn:hover:not(.active){background:#ffffff1a;border-color:#4a90e280;color:#c8d8e8}@keyframes metro-pulse{0%,to{box-shadow:0 0 #3498db8c}50%{box-shadow:0 0 0 8px #3498db00}}.tempo-metro-vol{writing-mode:vertical-lr;direction:rtl;-moz-appearance:slider-vertical;appearance:slider-vertical;-webkit-appearance:slider-vertical;width:4px;height:60px;accent-color:#3498db;cursor:pointer;border-radius:2px}.tempo-timesig-frac{display:flex;flex-direction:column;align-items:center;gap:2.5px}.tempo-timesig-sel{width:52px;padding:3px 2px;text-align:center;font-size:1rem;font-weight:700;background:#fff;border:1.5px solid #6a6a6ab7;border-radius:5px;color:#6a6a6ab7;box-shadow:0 1px 6px #3498db0f;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;display:flex;align-items:center;justify-content:center}#metronomeNumeratorSelect[type=number]::-webkit-inner-spin-button,#metronomeNumeratorSelect[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#metronomeNumeratorSelect[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;vertical-align:middle;display:flex;align-items:center;justify-content:center}.tempo-timesig-sel:focus{outline:none;border-color:#5a6f87;background:#f3f6fa;color:#5a6f87}.tempo-timesig-bar{width:44px;height:2px;background:#5a6f87;border-radius:1px}@media (max-width: 920px){.playback-utility-group{flex-direction:column}.playback-utility-group .tempo-section{flex:1 1 auto}.arpeggiator-layout{flex-direction:column}.utility-panel{width:100%;max-width:none}}.scales-section h3{color:#2c3e50;margin-bottom:15px;font-size:1.5rem}.scale-controls{display:flex;align-items:center;flex-wrap:wrap}.scale-controls label{font-weight:700;color:#2c3e50}.scale-controls select{padding:8px 12px;border:2px solid #ddd;border-radius:6px;font-size:16px;background:#fff;transition:border-color .3s}.scale-controls select:focus{outline:none;border-color:#3498db}#showScale{background:#3498db;color:#fff;border:none;padding:10px;border-radius:6px;font-size:12px;cursor:pointer;transition:background .3s}#showScale:hover{background:#2980b9}#showChord{background:#3498db;color:#fff;border:none;padding:10px;border-radius:6px;font-size:12px;cursor:pointer;transition:background .3s}#showChord:hover{background:#2980b9}#addShapesToBagBtn{background:linear-gradient(135deg,#27ae60,#1e8449);color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,box-shadow .2s,transform .1s;letter-spacing:.02em;box-shadow:0 2px 6px #27ae6059}#addShapesToBagBtn:hover{background:linear-gradient(135deg,#2ecc71,#27ae60);box-shadow:0 3px 10px #27ae6080}#addShapesToBagBtn:active{transform:scale(.97);box-shadow:0 1px 3px #27ae604d}#playScaleBtn{background:#27ae60;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s}#playScaleBtn:hover{background:#219a52}#playScaleBtn.playing{background:#e74c3c}#playScaleBtn.playing:hover{background:#c0392b}#playChordArpBtn{background:#27ae60;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s}#playChordArpBtn:hover{background:#219a52}#playChordArpBtn.playing{background:#e74c3c}#playChordArpBtn.playing:hover{background:#c0392b}.arp-pattern-row{align-items:center;flex-wrap:nowrap}.arp-pattern-picker{display:flex;flex-wrap:wrap;gap:3px;flex:1;min-width:0}.arp-pattern-btn{display:flex;align-items:center;justify-content:center;width:28px;height:22px;padding:3px 4px;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:#ffffff0d;color:#ffffff80;cursor:pointer;transition:background .15s,color .15s,border-color .15s;flex-shrink:0}.arp-pattern-btn:hover{background:#ffffff1f;color:#ffffffd9;border-color:#ffffff59}.arp-pattern-btn.active{background:#27ae6040;color:#2ecc71;border-color:#27ae60}.arp-pattern-btn svg{display:block}#pauseScaleBtn{background:#2980b9;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background .3s}#pauseScaleBtn:hover{background:#2471a3}.playback-label{font-size:13px;color:#555;font-weight:500;vertical-align:middle;margin-left:4px}.playback-bpm-input{width:52px;padding:3px 2px;text-align:center;font-size:1rem;font-weight:700;background:#fff;border:1.5px solid #6a6a6ab7;border-radius:5px;color:#6a6a6ab7;box-shadow:0 1px 6px #3498db0f;cursor:pointer;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;vertical-align:middle}.playback-bpm-input::-webkit-inner-spin-button,.playback-bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.playback-bpm-input:focus{outline:none;border-color:#5a6f87;background:#f3f6fa;color:#5a6f87}.arp-toggle-btn{background:linear-gradient(135deg,#1a3a5c,#2471a3);color:#dff0fe;border:none;font-size:13px;font-weight:700;padding:8px 18px;border-radius:22px;letter-spacing:.5px;box-shadow:0 2px 8px #1a527666;cursor:pointer;transition:background .15s,box-shadow .15s,transform .1s}.arp-toggle-btn:hover{background:linear-gradient(135deg,#2471a3,#1f7abf);box-shadow:0 3px 12px #1a52768c;transform:translateY(-1px)}.arp-toggle-btn.open{background:linear-gradient(135deg,#154360,#1a5276);box-shadow:inset 0 2px 5px #00000040;transform:translateY(0)}.arp-panel{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 24px;align-items:center;background:#f3f7fb;border:1.5px solid #d0d9e3;border-radius:10px;padding:10px 16px 12px;margin-top:6px}.arp-panel-header{width:100%;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#7a90a0;padding-bottom:7px;border-bottom:1.5px solid #d0d9e3;margin-bottom:2px}.arp-panel-row{display:flex;align-items:center;gap:6px}.chord-arp-mode-toggle,.arp-mode-toggle{display:flex;gap:6px;min-width:132px}.chord-arp-mode-toggle .delay-mode-btn,.arp-mode-toggle .delay-mode-btn{min-width:60px;padding:4px 10px}.arp-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#7a90a0;white-space:nowrap}.arp-panel{flex-direction:column;align-items:stretch;gap:6px}.arp-panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:#7a90a0;padding-bottom:7px;border-bottom:1.5px solid #d0d9e3;margin-bottom:0}.arp-transport-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.arp-btn-secondary{font-size:.76em!important;padding:4px 9px!important;opacity:.75}.arp-param-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}.arp-param-cell{display:flex;align-items:center;gap:5px;min-width:0}.arp-param-cell .arp-label{min-width:44px}.arp-param-cell select,.arp-param-cell input[type=number]{flex:1;min-width:0;width:0}.arp-toggle-strip{display:flex;flex-direction:row;align-items:center;gap:6px}.arp-toggle-cell{display:flex;flex-direction:row;align-items:center;gap:4px;flex-shrink:0}.arp-toggle-cell .arp-label{font-size:10px;white-space:nowrap}.arp-toggle-cell button{padding:3px 7px;font-size:.76em}.arp-toggle-sep{width:1px;height:14px;background:#d0d9e3;flex-shrink:0}.arp-divider{height:1px;background:#d0d9e3;margin:1px 0;border:none;align-self:stretch}.arp-three-col{display:grid;grid-template-columns:30% 30% 1fr;gap:5px 8px;align-items:start}.arp-col{display:flex;flex-direction:column;gap:5px;min-width:0;overflow:hidden}.arp-col .arp-param-cell select,.arp-col .arp-param-cell input[type=number]{width:100%;min-width:0;flex:1}.arp-col--sliders{gap:4px}.arp-col--sliders .arp-label{min-width:26px}.arp-slider-val{font-size:.73em;min-width:3.8em;text-align:right;color:#7a90a0;white-space:nowrap}.arp-params-strip{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0}.arp-params-col{display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden}.arp-params-col--toggles{flex:0 0 auto;gap:3px}.arp-params-col--toggles .arp-param-cell{gap:4px}.arp-params-col--toggles .arp-label{min-width:30px;font-size:10px}.arp-params-col--toggles button{padding:3px 7px;font-size:.74em}.arp-params-col--selects{flex:1 1 56px;min-width:0}.arp-params-col--selects .arp-label{min-width:34px;font-size:10px}.arp-params-col--selects .arp-param-cell select{width:100%;flex:1;min-width:0}.arp-params-col--selects .playback-bpm-input{width:44px}.arp-params-col--sliders{flex:0 0 100%;gap:3px;border-top:1px solid var(--border, #d0d9e3);padding-top:6px;margin-top:2px}.arp-params-col--sliders .arp-label{min-width:28px}.arp-params-col--sliders select{flex:1;min-width:0}.arp-params-sep{flex:0 0 1px;align-self:stretch;background:#d0d9e3;margin:0 8px;border:none}.arp-params-sep:last-of-type{display:none}.arp-panel select{padding:4px 8px;border:1.5px solid #d0d9e3;border-radius:6px;background:#fff;font-size:.82rem;color:#2c3e50;cursor:pointer;transition:border-color .15s}.arp-panel select:focus{outline:none;border-color:#3498db}.arp-panel .show-button{padding:5px 14px;border:1.5px solid #27ae60;border-radius:20px;font-size:.82rem;font-weight:700;background:#2ecc71;color:#fff;cursor:pointer;transition:background .15s,box-shadow .15s;letter-spacing:.4px;box-shadow:0 1px 5px #2ecc7159}.arp-panel .show-button:hover{background:#27ae60;box-shadow:0 2px 8px #2ecc718c}#pauseScaleBtn.show-button{background:#f39c12;border-color:#d68910;box-shadow:0 1px 5px #f39c1259}#pauseScaleBtn.show-button:hover{background:#d68910;box-shadow:0 2px 8px #f39c128c}.arp-panel .show-button.playing{background:#e74c3c;border-color:#c0392b;box-shadow:0 1px 5px #e74c3c59}.arp-panel .show-button.playing:hover{background:#c0392b}#clearScale{background:#95a5a6;color:#fff;border:none;padding:10px;border-radius:6px;font-size:12px;cursor:pointer;transition:background .3s}#clearScale:hover{background:#7f8c8d}#unlockNotesBtn{background:#95a5a6;color:#fff;border:none;padding:10px;border-radius:6px;font-size:12px;cursor:pointer;transition:background .3s;display:inline-flex;align-items:center;justify-content:center;line-height:1}#unlockNotesBtn:hover{background:#7f8c8d}#unlockNotesBtn svg{display:block;fill:currentColor}.fret-position.scale-audition{animation:scalePulse .25s ease-out forwards;z-index:10}.fret-position.scale-audition-exact{outline:3px solid #2ecc71;outline-offset:2px;box-shadow:0 0 10px #2ecc71d9;z-index:11}@keyframes scalePulse{0%{filter:brightness(1)}40%{filter:brightness(1.9) drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(52,152,219,.9))}to{filter:brightness(1.4) drop-shadow(0 0 5px rgba(52,152,219,.7))}}.toggle-container{display:flex;align-items:flex-end;padding-bottom:10px;gap:8px}.fret-position.diatonic-chord-highlight{filter:brightness(1.3);z-index:9;transition:filter .15s ease-out}.fret-position.diatonic-scale-dim,.string-note-label.diatonic-scale-dim .sn-face{opacity:var(--diatonic-dim-opacity, .35);filter:brightness(var(--diatonic-dim-brightness, 1));transition:opacity .15s ease-out,filter .15s ease-out}.string-note-label.diatonic-chord-highlight .sn-face{filter:brightness(1.3);transition:filter .15s ease-out}.toggle-container>label{font-weight:700;color:#2c3e50;margin:0}.toggle-switch{position:relative;display:inline-block}.toggle-input{opacity:0;width:0;height:0;position:absolute}.toggle-label{display:flex;align-items:center;cursor:pointer;background:#ecf0f1;border-radius:25px;padding:6px;transition:all .3s;border:2px solid #ddd;font-weight:400!important;position:relative;overflow:hidden}.toggle-text{font-size:14px;padding:8px 16px;transition:all .3s;white-space:nowrap;position:relative;z-index:2;border-radius:20px;flex:1;text-align:center;width:80px}.toggle-slider{position:absolute;height:calc(100% - 12px);background:#3498db;border-radius:20px;transition:all .3s;top:6px;left:6px;z-index:1;width:80px}.toggle-switch.fretboard-label-3way{width:150px;position:absolute;margin:0 auto;top:28px;left:50%;display:flex;justify-content:center}.toggle-label.toggle-label-3way{width:150px;min-width:150px;padding:0;display:flex;align-items:stretch;position:relative;background:#dde3ea;border:2px solid #c5cdd6;border-radius:16px;overflow:hidden;box-sizing:content-box}.toggle-text.toggle-text-3way{flex:1;min-width:50px;font-size:12px;font-weight:500;line-height:32px;padding:0;text-align:center;z-index:2;cursor:pointer;-webkit-user-select:none;user-select:none;color:#7f8c8d;transition:color .22s ease,font-weight .22s ease}.toggle-slider.toggle-slider-3way{position:absolute;top:3px;left:1px;width:calc((100% / 3) - 1px);height:calc(100% - 6px);background:#3498db;border-radius:16px;z-index:1;pointer-events:none}.toggle-switch.fretboard-label-3way .toggle-input{display:none}.toggle-switch.fretboard-label-3way #noteLabelModeNote:checked~.toggle-label-3way .toggle-slider-3way{left:1px}.toggle-switch.fretboard-label-3way #noteLabelModeDigit:checked~.toggle-label-3way .toggle-slider-3way{left:calc((100% / 3) + 1px)}.toggle-switch.fretboard-label-3way #noteLabelModeRoman:checked~.toggle-label-3way .toggle-slider-3way{left:calc((100% / 3) + 1px)}.toggle-switch.fretboard-label-3way #noteLabelModeNote:checked~.toggle-label-3way .toggle-text-3way:nth-child(1),.toggle-switch.fretboard-label-3way #noteLabelModeDigit:checked~.toggle-label-3way .toggle-text-3way:nth-child(2),.toggle-switch.fretboard-label-3way #noteLabelModeRoman:checked~.toggle-label-3way .toggle-text-3way:nth-child(3){color:#fff;font-weight:700}.toggle-switch.fretboard-label-3way #noteLabelModeNote:checked~.toggle-label-3way .toggle-text-3way:nth-child(2),.toggle-switch.fretboard-label-3way #noteLabelModeNote:checked~.toggle-label-3way .toggle-text-3way:nth-child(3),.toggle-switch.fretboard-label-3way #noteLabelModeDigit:checked~.toggle-label-3way .toggle-text-3way:nth-child(1),.toggle-switch.fretboard-label-3way #noteLabelModeDigit:checked~.toggle-label-3way .toggle-text-3way:nth-child(3),.toggle-switch.fretboard-label-3way #noteLabelModeRoman:checked~.toggle-label-3way .toggle-text-3way:nth-child(1),.toggle-switch.fretboard-label-3way #noteLabelModeRoman:checked~.toggle-label-3way .toggle-text-3way:nth-child(2){color:#8a99a8;font-weight:500}.toggle-input:checked+.toggle-label{background:#ecf0f1;border-color:#3498db}.toggle-input:checked+.toggle-label .toggle-slider{transform:translate(100%)}.toggle-input:checked+.toggle-label .toggle-text:first-child{color:#7f8c8d;font-weight:400}.toggle-input:checked+.toggle-label .toggle-text:last-child{color:#fff;font-weight:700}.toggle-input:not(:checked)+.toggle-label .toggle-text:first-child{color:#fff;font-weight:700}.toggle-input:not(:checked)+.toggle-label .toggle-text:last-child{color:#7f8c8d;font-weight:400}.note-colors-section{margin-top:20px;padding-top:20px;border-top:2px solid #ecf0f1}.note-colors-section h4{color:#2c3e50;margin-bottom:15px;font-size:1.2rem}.note-colors-container{display:flex;gap:15px;flex-wrap:wrap;align-items:center}.note-color-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f8f9fa;border-radius:6px;border:1px solid #ddd;cursor:pointer;transition:all .2s}.note-color-item:hover{background:#e9ecef;border-color:#3498db;transform:translateY(-1px)}.note-color-item.highlighted{border-color:#3498db;background:#dbeeff;box-shadow:0 0 0 2px #3498db59;transform:translateY(-1px)}.note-color-item .note-name{font-weight:700;color:#2c3e50;font-size:14px;background:none;text-shadow:none;position:static;transform:none;padding:0;pointer-events:auto}.note-color-preview{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px #0003;cursor:pointer}.color-picker-input{position:absolute;opacity:0;pointer-events:none}@media (max-width: 1095px){.top-toolbar{flex-direction:column;gap:8px}.controls,.tuning-controls{gap:8px}.scales-section{margin-top:8px}.toolbar-utility-panel{width:100%;align-items:stretch;gap:8px}.toolbar-utility-panel .tempo-section,.toolbar-utility-panel .music-circles-actions,.toolbar-utility-panel .top-actions{height:auto;min-height:80px;box-sizing:border-box}.top-actions{flex-direction:row;flex-wrap:wrap;justify-content:stretch}.top-actions #exportPDF,.top-actions #chordBagToggleBtn{flex:1}.scale-type-section{flex-shrink:1;min-width:0}}@media (max-width: 768px){.container{padding:10px}h1{font-size:2rem}.top-toolbar{flex-direction:column;gap:8px}.controls,.tuning-controls{gap:8px}.top-actions{flex-direction:row;flex-wrap:wrap;justify-content:stretch}.top-actions #exportPDF,.top-actions #chordBagToggleBtn{flex:1}.fretboard-container{padding:16px}.scale-type-section{flex-shrink:1;min-width:0}}.mode-toggle{display:flex;gap:0;margin-bottom:20px;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a}.mode-button{flex:1;padding:12px 20px;border:none;background:#f8f9fa;color:#2c3e50;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;position:relative}.mode-button:hover{background:#e9ecef}.mode-button.active{background:#3498db;color:#fff;box-shadow:inset 0 2px 4px #0000001a}.mode-button:focus{outline:none;box-shadow:0 0 0 3px #3498db4d}.shell-button{padding:12px 20px;border:none;background:#f8f9fa;color:#2c3e50;font-size:16px;font-weight:500;cursor:pointer;border-radius:8px;transition:all .3s ease;margin-left:10px;box-shadow:0 2px 8px #0000001a}.shell-button:hover{background:#e9ecef;box-shadow:0 2px 12px #00000026}.shell-button.active{background:#3498db;color:#fff;box-shadow:inset 0 2px 4px #0000001a}.shell-button:focus{outline:none;box-shadow:0 0 0 3px #3498db4d}.inversion-show-all-btn{background:#eaf3fb;color:#2471a3;border:1.5px solid #aed6f1;font-size:.78rem;font-weight:700;letter-spacing:.4px;padding:3px 10px;margin-left:4px}.inversion-show-all-btn:hover{background:#d0eaf8;border-color:#3498db;color:#1a5276}.inversion-show-all-btn.active{background:#3498db;color:#fff;border-color:#2471a3;box-shadow:inset 0 2px 4px #0000001f}.pitch-class-btn{padding:8px 16px;border:none;background:#3498db;color:#fff;font-size:14px;font-weight:500;cursor:pointer;border-radius:6px;transition:all .3s ease;margin-left:10px}.pitch-class-btn:hover{background:#2980b9}.pitch-class-btn:focus{outline:none;box-shadow:0 0 0 3px #3498db4d}.pitch-class-toggle-container{margin:15px 0 5px;padding:10px 0;width:100%;border-top:1px solid #eee;text-align:center}.pitch-class-grid{display:flex;gap:15px;flex-wrap:wrap;align-items:center;justify-content:center;margin:20px 0;max-width:100%}.pitch-class-item{position:relative;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.pitch-class-item:not(.selected){flex-direction:column;gap:5px;padding:8px;background:#f8f9fa;border-radius:8px;border:1px solid #ddd}.pitch-class-item:not(.selected):hover{background:#e9ecef;border-color:#3498db;transform:translateY(-1px)}.pitch-class-item:not(.selected) .pitch-class-preview{background-color:#bdc3c7!important;border-color:#95a5a6}.pitch-class-item:not(.selected) .pitch-class-name{display:block;font-size:12px;color:#7f8c8d}.pitch-class-item.selected{flex-direction:column;gap:5px;padding:8px;background:#3498db1a;border-radius:8px;border:1px solid #3498db}.pitch-class-item.selected .pitch-class-preview{width:36px;height:36px;border:3px solid #fff;box-shadow:0 3px 8px #0000004d}.pitch-class-item.selected .pitch-class-name{display:block;font-size:12px;color:#2c3e50;font-weight:700}.pitch-class-name{font-weight:700;color:#2c3e50;font-size:14px;background:none;text-shadow:none;position:static;transform:none;padding:0;pointer-events:none;text-align:center}.pitch-class-preview{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px #0003;cursor:pointer;transition:all .2s}.chord-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0;background:#00000005;border-radius:6px}.chord-controls>label{font-size:.9rem}.chord-control-pair{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.detected-chord-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:20px;border:1px solid #3a8fd4;background:#3a8fd414;font-size:.72em;font-weight:600;letter-spacing:.03em;color:#3a8fd4;white-space:nowrap;cursor:pointer;transition:background .15s,box-shadow .15s}.detected-chord-badge:hover{background:#3a8fd433;box-shadow:0 0 0 2px #3a8fd440}.detected-chord-badge:before{content:"→";font-size:.9em;opacity:.7}.chord-controls.arpeggio-mode .chord-control-pair:nth-of-type(2),.chord-controls.arpeggio-mode .spread-voicing-section,.chord-controls.arpeggio-mode .drop-voicing-section,.chord-controls.arpeggio-mode .shell-voicing-section,.chord-controls.arpeggio-mode .chord-inversion-nav,.chord-controls.arpeggio-mode .chord-fingering-nav{display:none!important}.arp-mode-controls{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.arp-trigger-row{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap}.arp-omit-row{display:flex;flex-direction:row;align-items:center;gap:5px;flex-wrap:wrap;margin-top:2px}.arp-omit-btn{background:#f7f7f7;color:#555;border:1.5px solid #c0c8d0;font-size:11px;font-weight:600;padding:5px 8px;border-radius:5px}.arp-omit-btn:hover{background:#e8eef5;border-color:#8aadcc}.arp-omit-btn.active{background:#e05050;color:#fff;border-color:#c03030}.arp212-trigger-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:36px;min-height:36px;padding:5px;background:var(--panel-2, #f0f4ff);color:var(--text-2, #2c3e50);border:1.5px solid var(--border, #b0c4de);border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:background .15s,color .15s,border-color .15s}.arp212-trigger-btn svg{width:24px;height:24px;flex-shrink:0;transition:transform .3s ease}.arp212-trigger-btn:hover{background:#3a8fd41a;border-color:var(--blue, #3498db);color:var(--blue, #3498db)}.arp212-trigger-btn:hover svg{transform:scale(1.1)}@keyframes arp-trace-draw{0%{stroke-dashoffset:1;opacity:0}15%{opacity:.6}to{stroke-dashoffset:0;opacity:.6}}@keyframes arp-trace-end-pop{0%{opacity:0;r:1.8;filter:none}60%{opacity:0}75%{opacity:1;r:2.6}to{opacity:.85;r:2.2}}.arp212-trigger-btn .arp-trace,.arp-toolbar-toggle .arp-trace{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 2px rgba(255,255,255,.7)) drop-shadow(0 0 4px rgba(180,220,255,.45))}.arp212-trigger-btn .arp-trace-end,.arp-toolbar-toggle .arp-trace-end{opacity:0;filter:drop-shadow(0 0 4px rgba(255,255,255,1)) drop-shadow(0 0 8px rgba(180,220,255,.8))}.arp212-trigger-btn:hover .arp-trace,.arp-toolbar-toggle:hover .arp-trace{animation:arp-trace-draw .3s ease-in-out forwards}.arp212-trigger-btn:hover .arp-trace-end,.arp-toolbar-toggle:hover .arp-trace-end{animation:arp-trace-end-pop .4s ease-out forwards}@keyframes chord-dot-glow{0%,to{filter:none;opacity:1}50%{filter:brightness(3) drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px rgba(52,152,219,.6));opacity:1}}.arp-toolbar-toggle:hover .chord-icon-dot{animation:chord-dot-glow 1.2s ease-in-out infinite}@keyframes music-circle-flash{0%{filter:none}40%{filter:brightness(2.5) drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px rgba(52,152,219,.5))}to{filter:none}}@keyframes music-circle-spin-full{0%{transform:rotate(0)}99%{transform:rotate(359deg)}to{transform:rotate(0)}}@keyframes fifths-enter{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes fifths-exit{0%{transform:rotate(270deg)}to{transform:rotate(0)}}@keyframes chromatic-exit{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.music-circle-panel-btn svg{transform-box:view-box;transform-origin:50% 50%}.fifths-enter svg{animation:fifths-enter .65s cubic-bezier(.37,0,.63,1) forwards,music-circle-flash .65s ease-out forwards}.fifths-exit svg{animation:fifths-exit .5s cubic-bezier(.37,0,.63,1) forwards}.chromatic-enter svg{animation:music-circle-spin-full .65s cubic-bezier(.37,0,.63,1) forwards,music-circle-flash .65s ease-out forwards}.chromatic-exit svg{animation:chromatic-exit .7s cubic-bezier(.2,0,.3,1) forwards}.arp212-trigger-btn.active{background:#3498db26;border-color:var(--blue, #3498db);color:var(--blue, #3498db)}.arp212-nav{display:inline-flex;align-items:center;gap:6px;border-radius:7px;padding:5px}.arp212-index{min-width:155px;text-align:center;font-size:.82rem;font-weight:700;color:#365071;white-space:nowrap}.arp212-var-nav,.arp212-cat-nav{display:inline-flex;align-items:center;gap:6px}.arp212-cat-index{min-width:64px;text-align:center;font-size:.78rem;font-weight:700;color:#4f6f90;white-space:nowrap}.arp212-nav-sep{color:#b0c4de;font-weight:400;padding:0 2px;-webkit-user-select:none;user-select:none}.arp212-var-index{min-width:52px;text-align:center;font-size:.78rem;font-weight:600;color:#5a7a99;white-space:nowrap}.sweep-arp-nav{display:inline-flex;align-items:center;gap:6px;border-radius:7px}.sweep-arp-index{min-width:36px;text-align:center;font-size:.82rem;font-weight:700;color:#5a3671;white-space:nowrap}.all-arp-trigger-btn{background:#f0fff4;color:#2c3e50;border:1.5px solid #a8d5b5;font-size:.85rem;font-weight:700;letter-spacing:.5px;padding:3px 10px}.all-arp-trigger-btn:hover{background:#d5f0dc;border-color:#5ca870}.all-arp-trigger-btn.active{background:#27ae60;color:#fff;border-color:#1e8449}.all-arp-nav{display:inline-flex;align-items:center;gap:6px;border-radius:7px}.all-arp-index{min-width:36px;text-align:center;font-size:.82rem;font-weight:700;color:#1e6636;white-space:nowrap}.chord-controls>select{padding:6px 10px;font-size:14px;max-width:150px}.chord-controls .root-string-section,.chord-controls .spread-voicing-section,.chord-controls .drop-voicing-section,.chord-controls .shell-voicing-section{gap:6px}.chord-controls .chord-inversion-nav{display:inline-flex;align-items:center;gap:6px;border-radius:7px}.chord-controls .chord-fingering-nav,.chord-controls .chord-lock-nav{display:inline-flex;min-width:60px;align-items:center;gap:6px;border-radius:7px}.chord-inversion-index{min-width:180px;text-align:center;font-size:.82rem;font-weight:700;color:#365071;white-space:nowrap}.chord-fingering-index{min-width:180px;text-align:center;font-size:.8rem;font-weight:700;color:#365071;white-space:nowrap}.chord-lock-index{min-width:220px;text-align:center;font-size:.8rem;font-weight:700;color:#365071;white-space:nowrap}.chord-lock-section-label{font-size:.72rem;font-weight:700;color:#365071;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.chord-lock-root-label,.chord-lock-quality-label{min-width:80px;text-align:center;font-size:.8rem;font-weight:700;color:#365071;white-space:nowrap}.chord-lock-nav-sep{color:#8eaac8;font-size:.9rem;padding:0 2px}.inversion-nav-btn,.fingering-nav-btn{padding:8px;font-size:.8rem;min-width:28px}.chord-info-panel{flex-basis:100%;background:linear-gradient(135deg,#f0f4ff,#f8f5ff);border:1.5px solid #c8d4f0;border-radius:10px;padding:10px 14px 12px;margin-top:2px}.chord-info-title{font-size:.82rem;font-weight:700;color:#5a6a85;letter-spacing:.4px;margin-bottom:8px}.chord-info-grid{display:flex;flex-direction:column;gap:2px}.chord-info-formula,.chord-info-notes{display:flex}.chord-info-formula span,.chord-info-notes span{flex:1;text-align:center;min-width:32px}.chord-info-formula span{font-size:.72rem;font-weight:600;color:#8a99b5;letter-spacing:.2px;padding-bottom:1px}.chord-info-notes span{font-size:1.05rem;font-weight:700;color:#2c3e50}.chord-info-notes .info-note-chip,.scale-info-notes .info-note-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:color .15s ease,text-shadow .15s ease}.chord-info-notes .info-note-chip:before,.scale-info-notes .info-note-chip:before{content:"";width:11px;height:11px;border-radius:50%;background:var(--note-splash, #8aa0b8);box-shadow:0 0 0 1px #0000001f;flex:0 0 auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,width .2s ease,height .2s ease}.chord-info-notes .info-note-chip.info-note-chip-playing,.scale-info-notes .info-note-chip.info-note-chip-playing{color:#1f5f3c;text-shadow:0 0 8px rgba(46,204,113,.42)}.chord-info-notes .info-note-chip.info-note-chip-playing:before,.scale-info-notes .info-note-chip.info-note-chip-playing:before{background:#2ecc71;width:20px;height:20px;animation:chipGlow .85s ease-in-out infinite alternate}@keyframes chipGlow{0%{box-shadow:0 0 0 2px #2ecc71d9,0 0 10px #2ecc71bf}to{box-shadow:0 0 0 3px #2ecc71,0 0 24px #2ecc71}}.info-note-chip.info-note-chip-on-fretboard{text-decoration:underline;text-decoration-color:#2ecc71;text-decoration-thickness:2px;text-underline-offset:3px}.info-note-chip.info-note-chip-on-fretboard:before{transform:scale(1.28);box-shadow:0 0 0 2px #2ecc718c,0 0 9px #2ecc7180}.chord-info-desc{margin-top:8px;padding-top:7px;border-top:1px solid #d4dcf0;font-size:.74rem;color:#6a7a95;font-style:italic;line-height:1.45}.chord-info-detected{margin-top:8px;padding-top:7px;border-top:1px dashed #d4dcf0;font-size:.72rem;color:#4d638f;line-height:1.45}.chord-info-alt-prefix{font-weight:600;margin-right:4px}.chord-info-alt-btn{display:inline-flex;align-items:center;padding:2px 8px;margin:2px 3px 2px 0;background:#eef3fb;border:1px solid #c0cfe8;border-radius:12px;font-size:.7rem;font-weight:600;color:#3a5a9a;cursor:pointer;transition:background .15s,border-color .15s;vertical-align:middle}.chord-info-alt-btn:hover{background:#3498db;border-color:#2980b9;color:#fff}.chord-info-alt-label{display:inline-block;font-style:italic;color:#7a8aaa;margin-right:4px}.chord-info-fit,.scale-info-fit{margin-top:8px;padding-top:7px;border-top:1px dashed #cfd8ee;font-size:.72rem;color:#4a5f86;line-height:1.45}.chord-info-fit .fit-label,.scale-info-fit .fit-label{font-weight:700;margin-right:6px}.chord-info-fit .fit-notes,.scale-info-fit .fit-notes{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}.chord-info-scales{margin-top:8px;padding-top:7px;border-top:1px dashed #d4dcf0;display:flex;flex-wrap:wrap;align-items:center;gap:5px}.chord-info-scales-label{font-size:.72rem;font-weight:700;color:#5a6a85;white-space:nowrap;margin-right:2px}.chord-info-scale-chip{display:inline-flex;align-items:center;gap:4px;background:#5c678714;border:1px solid rgba(92,103,135,.2);border-radius:12px;padding:2px 8px 2px 7px;font-size:.7rem;color:#3d5080;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.chord-info-scale-chip:hover{background:#7a5fb5;border-color:#6a4fa5;color:#fff}.chord-info-scale-chip:hover .chord-info-scale-degree{color:#e8d8ff}.chord-info-scale-degree{font-style:normal;font-weight:700;color:#7a5fb5;font-size:.68rem}.chord-info-next{margin-top:9px;border-top:1px solid #e4ecf8;padding-top:8px}.chord-info-next-label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#8a98b0;margin-bottom:6px}.chord-info-next-row{display:grid;grid-template-columns:46px 1fr 56px 28px;align-items:center;gap:8px;padding:3px 5px;border-radius:5px;cursor:pointer;transition:background .12s;margin-bottom:2px}.chord-info-next-row:hover{background:#3498db14}.chord-info-next-row:hover .chord-info-next-name{color:#1a56db}.chord-info-next-roman{font-size:.69rem;font-weight:700;color:#7a5fb5;font-style:italic}.chord-info-next-name{font-size:.72rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s}.chord-info-next-bar-wrap{height:5px;background:#e4ecf8;border-radius:3px;overflow:hidden}.chord-info-next-bar{height:100%;background:linear-gradient(to right,#3498db,#5b9cf6);border-radius:3px;transition:width .3s ease}.chord-info-next-pct{font-size:.64rem;color:#8a98b0;text-align:right;font-family:monospace}.chord-info-header{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px}.chord-info-header .chord-info-title{margin-bottom:0;flex:1 1 auto}.chord-info-replace-btn{flex:0 0 auto;padding:3px 10px;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#7a5fb5;background:#7a5fb51a;border:1px solid rgba(122,95,181,.35);border-radius:5px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.chord-info-replace-btn:hover{background:#7a5fb538;color:#5a3f99}.chord-explorer-modal{max-width:600px}.chord-explorer-section-label{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#8a98b0;margin:0 0 8px}.chord-explorer-family,.chord-explorer-voicings{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.chord-explorer-notes{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px;min-height:26px}.chord-explorer-chip{padding:5px 12px;border-radius:20px;border:1.5px solid #d0d8e8;background:#f5f8fc;color:#3d5080;font-size:.75rem;font-weight:600;cursor:pointer;transition:border-color .13s,background .13s,color .13s;line-height:1.3}.chord-explorer-chip:hover{border-color:#3498db;background:#3498db17;color:#1a56db}.chord-explorer-chip.active{border-color:#3498db;background:#3498db;color:#fff}.modal-btn.secondary{background:#f0f4fb;color:#3d5080;border:1.5px solid #d0d8e8}.modal-btn.secondary:hover{background:#e0eaf5;border-color:#3498db;color:#1a56db}.scale-info-panel{flex-basis:100%;background:linear-gradient(135deg,#f0f7f4,#f5f8f0);border:1.5px solid #b8d4c0;border-radius:10px;padding:10px 14px 12px;margin-top:6px}.scale-info-title{font-size:.82rem;font-weight:700;color:#4a6a58;letter-spacing:.4px;margin-bottom:8px}.scale-info-intervals,.scale-info-notes{display:flex;flex-wrap:wrap}.scale-info-intervals span,.scale-info-notes span{flex:1;text-align:center;min-width:28px}.scale-info-intervals span{font-size:.68rem;font-weight:600;color:#7a9985;letter-spacing:.2px;padding-bottom:1px}.scale-info-notes span{font-size:1rem;font-weight:700}.scale-info-desc{margin-top:8px;padding-top:7px;border-top:1px solid #c8ddd0;font-size:.74rem;color:#5a7a68;font-style:italic;line-height:1.45}.scale-info-detected{margin-top:8px;padding-top:7px;border-top:1px dashed #c8ddd0;font-size:.72rem;color:#3f6c57;line-height:1.45;display:flex;flex-wrap:wrap;align-items:center;gap:5px}.scale-alt-label{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#8aa090;flex-shrink:0}.scale-alt-chip{display:inline-flex;align-items:center;background:#3f6c5712;border:1px solid rgba(63,108,87,.22);border-radius:11px;padding:2px 9px;font-size:.68rem;color:#2f5a47;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}.scale-alt-chip:hover{background:#3f6c572e;border-color:#3f6c5780;color:#1a3d2f}.scale-alt-chip-primary{background:#3f6c5724;border-color:#3f6c5766;font-weight:600}.scale-alt-chip-primary:hover{background:#3f6c573d}.scale-type-section{display:flex;gap:8px;align-items:center}.root-note-section,.root-string-section,.spread-voicing-section,.drop-voicing-section{display:flex;gap:8px;align-items:center;flex-shrink:0}.chord-controls>label,.scale-type-section label,.root-note-section label,.root-string-section label,.spread-voicing-section label,.drop-voicing-section label{font-weight:700;color:#2c3e50;white-space:nowrap;flex-shrink:0}.chord-controls>select,.scale-type-section select,.root-note-section select,.root-string-section select,.spread-voicing-section select,.drop-voicing-section select{padding:8px 12px;border:2px solid #ddd;border-radius:6px;font-size:16px;background:#fff;transition:border-color .3s ease;flex-shrink:0}.chord-controls>select:focus,.scale-type-section select:focus,.root-note-section select:focus,.root-string-section select:focus,.spread-voicing-section select:focus,.drop-voicing-section select:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.scale-controls{display:flex;flex-direction:row;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.toggle-switch.vertical{display:inline-flex;flex-direction:column;align-items:center;gap:3px}.toggle-switch.vertical .toggle-input{display:none}.toggle-switch.vertical .toggle-option{font-size:12px;font-weight:700;line-height:1;color:#8a9bb0;letter-spacing:.02em;-webkit-user-select:none;user-select:none;transition:color .22s ease}.toggle-switch.vertical .toggle-label{display:block;width:30px;height:44px;background:#dce6f0;border-radius:15px;position:relative;cursor:pointer;transition:border-color .22s ease,box-shadow .22s ease;border:2px solid #b5c8da;box-shadow:inset 0 2px 4px #0000001a}.toggle-switch.vertical .shift-knob{position:absolute;top:3px;left:50%;transform:translate(-50%);width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 2px 5px #0003,0 0 0 2px #3498db4d;transition:top .26s cubic-bezier(.34,1.45,.64,1)}.toggle-switch.vertical .shift-knob:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:2px;border-radius:1px;background:#3498db;opacity:.75}.toggle-switch.vertical .toggle-input:checked+.toggle-label{border-color:#3498db;box-shadow:inset 0 2px 4px #3498db26}.toggle-switch.vertical .toggle-input:checked+.toggle-label .shift-knob{top:calc(100% - 23px)}.toggle-switch.vertical .toggle-option.top{color:#3498db}.toggle-switch.vertical .toggle-input:checked~.toggle-option.top{color:#8a9bb0}.toggle-switch.vertical .toggle-input:checked~.toggle-option.bottom{color:#3498db}.toggle-switch.vertical .toggle-label:hover{border-color:#7ab3d9;box-shadow:inset 0 2px 4px #00000014,0 0 0 3px #3498db1a}.chord-controls .toggle-switch.vertical .toggle-label{width:26px;height:38px;border-radius:13px}.chord-controls .toggle-switch.vertical .shift-knob{width:17px;height:17px;top:3px}.chord-controls .toggle-switch.vertical .toggle-input:checked+.toggle-label .shift-knob{top:calc(100% - 20px)}.context-menu{position:fixed;background:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:1000;min-width:180px;width:220px;padding:4px 0}.context-menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:14px;background:transparent;border:none;width:100%;text-align:left}.context-menu-item:hover{background:#f0f0f0}.context-menu-item:active{background:#e0e0e0}#noteColorPicker{width:24px;height:24px;border:none;border-radius:4px;cursor:pointer}#contextNoteName{font-weight:700;color:#3498db}@media (max-width: 768px){.chord-controls{flex-direction:row;width:100%;gap:10px}.chord-controls>select,.scale-type-section select,.root-note-section select,.root-string-section select,.spread-voicing-section select,.drop-voicing-section select{max-width:100%;width:auto}.spread-voicing-section,.drop-voicing-section,.root-string-section{justify-content:flex-start}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:center;z-index:10000;opacity:0;transition:opacity .3s ease}.modal-overlay.show{opacity:1}.modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;min-width:400px;max-width:500px;width:90%;transition:transform .3s ease}.modal-overlay.show .modal{transform:translateY(0)}.modal-header{padding:24px 24px 16px;border-bottom:1px solid #eee}.modal-header h3{margin:0;color:#2c3e50;font-size:18px}.modal-body{padding:24px}.modal-body p{margin:0 0 16px;color:#444;line-height:1.5}.modal-body input{width:100%;padding:12px 16px;border:2px solid #ddd;border-radius:8px;font-size:16px;transition:border-color .3s}.modal-body input:focus{outline:none;border-color:#3498db}.modal-footer{padding:16px 24px 24px;display:flex;gap:12px;justify-content:flex-end}.modal-btn{padding:10px 24px;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:all .3s;font-weight:500}.modal-btn.cancel{background:#95a5a6;color:#fff}.modal-btn.cancel:hover{background:#7f8c8d}.modal-btn.confirm{background:#3498db;color:#fff}.modal-btn.confirm:hover{background:#2980b9}.context-menu-separator{height:1px;background:#eee;margin:4px 0}#chordBagToggleBtn{background:transparent;color:#fff;border:none;padding:4px;border-radius:6px;font-size:14px;cursor:pointer;transition:filter .2s;white-space:nowrap;line-height:1}#chordBagToggleBtn.active .bag-body{fill:#2e4053}.bag-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.bag-svg{width:54px;display:block;overflow:visible}.bag-body{fill:#566573;transition:fill .2s}.bag-count{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;color:#191919bf;line-height:1;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.2)}.chord-bag-sidebar{position:fixed;right:0;top:0;bottom:0;width:320px;background:#fff;box-shadow:-4px 0 24px #00000038;z-index:9500;display:flex;flex-direction:column;transform:translate(100%);transition:transform .3s ease;overflow:hidden}.chord-bag-sidebar.open{transform:translate(0)}.chord-bag-header{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#2c3e50;color:#fff;flex-shrink:0}.chord-bag-header h3{flex:1;margin:0;font-size:14px;color:#fff}.chord-bag-count{background:#3498db;color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700}.chord-bag-export-btn{background:#27ae60;color:#fff;border:none;border-radius:4px;padding:5px 9px;font-size:11px;cursor:pointer;transition:background .2s;white-space:nowrap}.chord-bag-export-btn:hover{background:#1e8449}.chord-bag-close{background:none;border:none;color:#fffc;cursor:pointer;font-size:16px;line-height:1;padding:0;transition:color .2s}.chord-bag-close:hover{color:#fff}.chord-bag-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}.chord-bag-empty{text-align:center;color:#aaa;font-size:13px;padding:24px 10px;line-height:1.6}.chord-thumbnail{position:relative;background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;padding:8px 8px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;transition:box-shadow .2s}.chord-thumbnail.dragging{opacity:.55;cursor:grabbing}.chord-bag-drop-line{width:100%;height:3px;background:#3498db;border-radius:2px;pointer-events:none;flex-shrink:0}#fretboard.bag-drop-target{outline:2px dashed rgba(66,184,131,.9);outline-offset:3px}#notationCanvasWrapper.bag-seq-drop-target{outline:2px dashed rgba(54,132,220,.9);outline-offset:2px;border-radius:8px}.chord-thumbnail:hover{box-shadow:0 2px 10px #0000001f}.chord-thumbnail-delete{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:#e74c3c;color:#fff;border:none;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;padding:0;line-height:1}.chord-thumbnail:hover .chord-thumbnail-delete{opacity:1}.chord-thumbnail-svg{width:100%;display:flex;justify-content:center;overflow:hidden}.chord-thumbnail-svg svg{max-width:100%;height:auto;display:block}.chord-thumbnail-title{font-size:12px;color:#444;text-align:center;width:100%;border:1px solid transparent;border-radius:4px;padding:2px 5px;min-height:20px;outline:none;transition:border-color .2s,background .2s;word-break:break-word}.chord-thumbnail-title:focus{border-color:#3498db;background:#fff}.chord-thumbnail-title:empty:before{content:attr(data-placeholder);color:#bbb;pointer-events:none}.chord-thumbnail-seq-btn{border:1px solid #d1dbe3;background:#f3f7fb;color:#2b4f67;font-size:11px;line-height:1;border-radius:6px;padding:4px 8px;cursor:pointer}.chord-thumbnail-seq-btn:hover{background:#e7f0f8;border-color:#b7cad8}.chord-export-dialog{background:#1a1f2e;border-radius:12px;box-shadow:0 20px 60px #0009;width:96vw;max-width:1400px;height:94vh;max-height:94vh;display:flex;flex-direction:column;overflow:hidden;color:#c8d4e0}.chord-export-dialog .modal-header{background:#1a1f2e;border-bottom:1px solid #2d3448;padding:14px 20px}.chord-export-dialog .modal-header h3{color:#c8d4e0}.chord-export-dialog .modal-footer{background:#1a1f2e;border-top:1px solid #2d3448;padding:12px 20px}.chord-export-close{background:none;border:none;font-size:20px;cursor:pointer;color:#8a98b0;padding:0;line-height:1;transition:color .2s}.chord-export-close:hover{color:#e74c3c}.chord-export-grid{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;min-height:80px;width:100%}.chord-export-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;background:#fff;border-radius:4px;cursor:grab;outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s,opacity .2s;-webkit-user-select:none;user-select:none}.chord-export-card:hover{outline-color:#bdc3c7}.chord-export-card.dragging{opacity:.35;cursor:grabbing}.chord-export-card.drag-over{outline-color:#3498db;background:#eaf4fc}.chord-export-title{font-size:12px;font-weight:600;color:#333;text-align:center;word-break:break-word;min-height:18px;width:100%;padding:2px 4px;border-radius:3px;border:1px solid transparent;outline:none;cursor:text;transition:border-color .15s,background .15s;box-sizing:border-box}.chord-export-title:hover{border-color:#bdc3c7;background:#f8f9fa}.chord-export-title:focus{border-color:#3498db;background:#fff}.chord-export-title:empty:before{content:attr(data-placeholder);color:#aaa;font-weight:400;pointer-events:none}.chord-export-title-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.chord-export-title-row label{font-size:14px;font-weight:600;color:#2c3e50;white-space:nowrap}.chord-export-title-input{flex:1;padding:7px 12px;border:2px solid #ddd;border-radius:6px;font-size:15px;transition:border-color .2s}.chord-export-title-input:focus{outline:none;border-color:#3498db}.chord-export-modal-body{display:flex;flex-direction:column;padding:6px 0 0;flex:1;min-height:0;overflow:hidden}.chord-export-controls-row{display:flex;align-items:center;gap:10px;padding:8px 16px 10px;border-bottom:1px solid #2d3448;margin-bottom:10px;background:#1a1f2e;flex-wrap:wrap}.chord-export-controls-label{font-size:13px;font-weight:600;color:#8a98b0;white-space:nowrap}.chord-export-col-select{display:flex;border:1.5px solid #3a4258;border-radius:5px;overflow:hidden}.chord-export-col-btn{background:#242b3d;border:none;border-right:1px solid #3a4258;padding:4px 14px;font-size:13px;font-weight:600;cursor:pointer;color:#8a98b0;transition:background .12s,color .12s;font-family:Arial,sans-serif}.chord-export-col-btn:last-child{border-right:none}.chord-export-col-btn:hover{background:#2e3a52;color:#3498db}.chord-export-col-btn.active{background:#3498db;color:#fff}.chord-export-controls-hint{font-size:12px;color:#5a6478;margin-left:auto;font-style:italic}.chord-export-relative-label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#2c3e50;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none}.chord-export-toggle-track{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;background:#bdc3c7;border-radius:10px;transition:background .2s;flex-shrink:0}.chord-export-toggle-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.chord-export-toggle-thumb{position:absolute;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #00000040;transition:left .2s,background .2s;pointer-events:none}.chord-export-toggle-input:checked~.chord-export-toggle-thumb{left:19px}.chord-export-toggle-track:has(.chord-export-toggle-input:checked){background:#3498db}.chord-export-page-wrap{background:#0f1119;border-radius:0;padding:28px 20px;overflow:auto;flex:1;min-height:0}.chord-export-page{background:#fff;width:800px;padding:20px;box-sizing:content-box;box-shadow:0 2px 12px #0000002e;margin:0 auto;position:relative;min-height:1148px}.chord-export-page-header{font-size:16px;font-weight:700;color:#2c3e50;text-align:center;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid #eee;outline:none;border-radius:3px;transition:background .15s}.chord-export-page-header[contenteditable]:hover{background:#f8f9fa;cursor:text}.chord-export-page-header[contenteditable]:focus{background:#fff;box-shadow:0 0 0 2px #3498db40}.chord-export-text-layer{position:absolute;top:0;left:0;right:0;bottom:auto;pointer-events:none;overflow:visible}.chord-export-float-item{position:absolute;pointer-events:all;z-index:5}.chord-export-float-box{position:relative;width:100%;height:100%;border:1.5px dashed transparent;border-radius:2px;box-sizing:border-box;transition:border-color .12s}.chord-export-float-item:hover .chord-export-float-box,.chord-export-float-item.active .chord-export-float-box{border-color:#3498db}.chord-export-float-text{font-family:Arial,sans-serif;color:#333;white-space:pre;min-width:20px;min-height:1em;outline:none;line-height:1.3;display:block;width:100%;height:100%;box-sizing:border-box;padding:2px 4px;overflow:visible;word-break:break-word}.cef-handle{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid #3498db;border-radius:50%;box-sizing:border-box;z-index:10;display:none;pointer-events:all}.chord-export-float-item.active .cef-handle{display:block}.cef-handle[data-dir=nw]{top:-5px;left:-5px;cursor:nw-resize}.cef-handle[data-dir=n]{top:-5px;left:calc(50% - 4px);cursor:n-resize}.cef-handle[data-dir=ne]{top:-5px;right:-5px;cursor:ne-resize}.cef-handle[data-dir=e]{top:calc(50% - 4px);right:-5px;cursor:e-resize}.cef-handle[data-dir=se]{bottom:-5px;right:-5px;cursor:se-resize}.cef-handle[data-dir=s]{bottom:-5px;left:calc(50% - 4px);cursor:s-resize}.cef-handle[data-dir=sw]{bottom:-5px;left:-5px;cursor:sw-resize}.cef-handle[data-dir=w]{top:calc(50% - 4px);left:-5px;cursor:w-resize}.cef-rotate-handle{position:absolute;top:-28px;left:calc(50% - 8px);width:16px;height:16px;background:#fff;border:1.5px solid #3498db;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:11px;color:#3498db;cursor:grab;z-index:10;-webkit-user-select:none;user-select:none;pointer-events:all}.chord-export-float-item.active .cef-rotate-handle{display:flex}.cef-rotate-handle:active{cursor:grabbing}.cef-rotate-handle:after{content:"";position:absolute;bottom:-11px;left:50%;transform:translate(-50%);width:1px;height:10px;background:#3498db}.chord-export-float-toolbar{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 3px 12px #00000029;padding:4px 8px;align-items:center;gap:6px;white-space:nowrap;z-index:20;pointer-events:all}.chord-export-float-item.active .chord-export-float-toolbar{display:flex}.chord-export-float-size-btn{background:none;border:1px solid #ddd;border-radius:3px;width:20px;height:20px;font-size:15px;cursor:pointer;color:#555;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;flex-shrink:0}.chord-export-float-size-btn:hover{border-color:#3498db;color:#3498db}.chord-export-float-size-val{font-size:11px;color:#555;min-width:26px;text-align:center;font-family:Arial,sans-serif}.chord-export-float-sep{width:1px;height:16px;background:#ddd;flex-shrink:0}.chord-export-float-fmt-btn{background:none;border:1px solid #ddd;border-radius:3px;min-width:26px;height:20px;font-size:11px;cursor:pointer;color:#555;padding:0 5px;transition:background .1s,border-color .1s,color .1s;line-height:1;font-family:Arial,sans-serif;font-weight:600}.chord-export-float-fmt-btn:hover{border-color:#3498db;color:#3498db}.chord-export-float-fmt-btn.active{background:#3498db;border-color:#3498db;color:#fff}.cef-font-select{height:22px;font-size:11px;border:1px solid #ddd;border-radius:3px;padding:0 4px;color:#555;cursor:pointer;background:#fff;max-width:130px}.cef-font-select:focus{outline:none;border-color:#3498db}.cef-angle-val{font-size:11px;color:#555;min-width:30px;text-align:left;font-family:Arial,sans-serif}.chord-export-float-delete{background:none;border:none;color:#e74c3c;cursor:pointer;font-size:14px;padding:2px 4px;opacity:.45;transition:opacity .15s;flex-shrink:0}.chord-export-float-delete:hover{opacity:1}.cef-corner-delete{position:absolute;top:-9px;right:-9px;width:18px;height:18px;background:#e74c3c;border:none;border-radius:50%;color:#fff;font-size:10px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;z-index:15;pointer-events:all;font-weight:700;transition:background .12s}.cef-corner-delete:hover{background:#c0392b}.chord-export-float-item:hover .cef-corner-delete,.chord-export-float-item.active .cef-corner-delete{display:flex}.chord-export-card svg{max-width:100%;height:auto;display:block}.chord-export-add-text-btn{font-size:12px;padding:3px 10px;background:none;border:1.5px dashed #3a4258;border-radius:4px;color:#8a98b0;cursor:pointer;transition:border-color .15s,color .15s,background .15s;white-space:nowrap}.chord-export-add-text-btn:hover{border-color:#3498db;color:#3498db}.chord-export-add-text-btn.active,.chord-export-fret-nums-btn.active{border-color:#f39c12;color:#f39c12;background:#f39c1214}.chord-bag-clear-btn{background:#e74c3cd9;color:#fff;border:none;border-radius:4px;padding:5px 9px;font-size:11px;cursor:pointer;transition:background .2s;white-space:nowrap}.chord-bag-clear-btn:hover{background:#c0392b}.chord-bag-undo-bar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;background:#fef9e7;border:1px solid #f0d060;border-radius:6px;font-size:12px;color:#7d6608;flex-shrink:0}.chord-bag-undo-btn{background:#f39c12;color:#fff;border:none;border-radius:4px;padding:3px 10px;font-size:11px;cursor:pointer;font-weight:600;transition:background .2s;white-space:nowrap}.chord-bag-undo-btn:hover{background:#d68910}.mobile-context-menu{position:fixed!important;min-width:250px;padding:15px;border-radius:12px;box-shadow:0 8px 25px #00000040;background:#fff;border:1px solid #ddd;z-index:10000}.mobile-context-menu button,.mobile-context-menu input{min-height:44px;padding:12px 16px;font-size:16px;border-radius:8px;border:1px solid #ddd;margin:4px 0;width:100%;background:#fff;cursor:pointer;transition:background-color .2s}.mobile-context-menu button:hover,.mobile-context-menu button:active{background-color:#f0f0f0}.mobile-context-menu input[type='"color"']{height:35px;width:70px;border-radius:6px;border:2px solid #3498db;cursor:pointer;background:#fff;box-shadow:0 2px 8px #00000026;margin:8px auto;display:block;transition:all .2s ease}.mobile-context-menu input[type='"color"']:hover{border-color:#2980b9;box-shadow:0 4px 12px #0003;transform:translateY(-1px)}.fret-position.mobile-selected{box-shadow:0 0 0 3px #3498db99;border-radius:50%}.fretboard-container.mobile-selection-mode{border:3px solid rgba(52,152,219,.4);box-shadow:0 8px 25px #00000026,inset 0 0 0 2px #3498db1a}.fretboard-container.mobile-selection-mode:after{content:"Selection Mode - Long press selected notes for menu, tap empty area to exit";position:absolute;top:-25px;left:50%;transform:translate(-50%);background:#3498dbe6;color:#fff;padding:4px 12px;border-radius:15px;font-size:12px;white-space:nowrap;z-index:1000}@media (max-width: 768px){.fretboard-container.mobile-selection-mode:after{content:"Selection Mode";top:-20px;font-size:11px;padding:2px 8px}}@keyframes longPressIndicator{0%{transform:scale(1);opacity:.7}to{transform:scale(1.3);opacity:0}}.fret-position:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;background-color:#3498db4d;opacity:0;pointer-events:none}.fret-position.long-press-feedback:after{animation:longPressIndicator .5s ease-out}@media (max-width: 768px){.fret-position{width:22px;height:22px;touch-action:none}.note-context-menu,.mobile-context-menu{max-width:calc(100vw - 40px)}.string-note-label.mobile-selected{box-shadow:0 0 0 4px #3498dbcc;border-radius:8px}.fret-position.mobile-selected{box-shadow:0 0 0 4px #3498dbcc}}.context-color-wheel{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px 15px;margin:10px 0}.context-color-wheel canvas{cursor:pointer;border-radius:50%;box-shadow:0 3px 12px #0003;transition:transform .1s ease}.context-color-wheel canvas:active{transform:scale(.98)}.standalone-color-wheel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10000;background:#fff;padding:20px;border-radius:20px;box-shadow:0 8px 32px #0000004d;display:flex;flex-direction:column;align-items:center}.standalone-color-wheel canvas{cursor:pointer;border-radius:50%;box-shadow:0 4px 16px #0003;background:#fff;transition:transform .1s ease}.standalone-color-wheel canvas:active{transform:scale(.98)}.color-pick-chip{width:80px;height:26px;border-radius:6px;border:2px solid rgba(0,0,0,.18);box-shadow:inset 0 1px 3px #00000026,0 2px 6px #0000001f;transition:background .05s;flex-shrink:0}@media (max-width: 564px){.container{padding:8px}.modal{min-width:0;width:95vw;max-width:95vw}.fretboard-container{padding:10px 8px 10px 60px}.string-labels{left:-52px;width:44px}.string-note-label{font-size:10px}.sn-face{width:26px;height:26px;font-size:10px}.sn-prev,.sn-next{width:12px;height:12px;font-size:6px}.arp-panel{flex-direction:row;align-items:flex-end;gap:8px 0}.arp-panel-row{flex-wrap:wrap;padding:0 6px 0 0}.chord-arp-mode-toggle,.arp-mode-toggle{min-width:0}.scale-controls select,#scaleFamily,#scaleType,.chord-controls>select,.scale-type-section select,.root-note-section select,.root-string-section select,.spread-voicing-section select,.drop-voicing-section select{font-size:15px;padding:6px 8px}.scale-type-section{flex-wrap:wrap}.scale-controls{gap:10px}.scales-section h3{font-size:1.2rem;margin-bottom:10px}.fret-position{width:20px;height:20px}.toolbar-utility-panel{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:8px;align-items:stretch;width:100%}.toolbar-utility-panel .music-circles-actions,.toolbar-utility-panel .top-actions{grid-column:span 1}.tempo-section{height:auto;min-height:0;overflow:visible;justify-content:center}.tempo-layout{gap:4px;padding:6px 4px;align-content:center}.tempo-sep{display:none}.tempo-group{padding:4px 4px 5px}.tempo-bpm-input{width:50px;font-size:1rem;padding:4px 2px}.tempo-timesig-sel{width:42px;font-size:.88rem;padding:2px}.toggle-container{align-items:flex-end}.toggle-switch.fretboard-label-3way{min-width:0}.toggle-label.toggle-label-3way{width:100%;min-width:0;box-sizing:border-box}.controls{padding:8px 10px;gap:6px}.tuning-controls{gap:6px}.controls select,.tuning-selector-row select,.string-count-group select{font-size:13px;padding:5px 6px}.preset-trigger{font-size:13px;padding:5px 8px}.preset-saveas-btn{width:28px;height:28px}.preset-custom-label,.string-count-group,.tuning-group{font-size:12px}.tuning-controls .save-tuning-btn{font-size:12px;padding:6px 10px}.tuning-controls{flex-wrap:wrap}.tuning-controls>.controls{flex:0 0 100%;min-width:0}.fretboard-controls-bar{height:auto;min-height:44px;flex-wrap:wrap;padding:6px 8px;gap:6px;align-content:center}.fcb-left{order:1;flex-shrink:1;min-width:0}.fcb-right{order:2;flex-shrink:1;min-width:0}.fcb-center{order:3;flex:0 0 100%;justify-content:flex-start}}@media (max-width: 470px){.fcb-right{flex:0 0 100%;order:2;justify-content:flex-start}.fcb-left{flex:0 0 100%;order:1}.fcb-center{order:3}.fret-range-controls input[type=number]{width:38px;padding:4px;font-size:13px}.fretboard-controls-bar .show-button{padding:5px 12px;font-size:13px}}@media (max-width: 360px){.container{padding:6px}.fretboard-container{padding:8px 6px 8px 8px}.string-labels{left:-44px;width:37px}.string-note-label{font-size:9px}.sn-face{width:23px;height:23px;font-size:9px}.sn-prev,.sn-next{width:10px;height:10px;font-size:5px}.modal{width:98vw;max-width:98vw}}.fretboard-container.lefty{padding-left:28px;padding-right:88px}.fretboard-container.lefty .string-labels{left:auto;right:-60px}@media (max-width: 920px){.fretboard-container.lefty{padding-left:20px;padding-right:80px}.fretboard-container.lefty .string-labels{right:-70px}}@media (max-width: 768px){.fretboard-container.lefty{padding-left:30px;padding-right:70px}.fretboard-container.lefty .string-labels{right:-60px}}@media (max-width: 480px){.fretboard-container.lefty{padding-left:8px;padding-right:60px}.fretboard-container.lefty .string-labels{right:-52px}}@media (max-width: 360px){.fretboard-container.lefty{padding-left:6px;padding-right:52px}.fretboard-container.lefty .string-labels{right:-44px}}.preset-custom-select{position:relative;display:flex;align-items:center;gap:6px;flex:1}.preset-custom-label{font-size:14px;color:#555;white-space:nowrap}.preset-strings-stack{display:flex;flex-direction:column;gap:6px;width:100%}.preset-group{display:flex;align-items:center;gap:6px;width:100%}.string-count-group{display:flex;align-items:center;gap:6px;font-size:14px;color:#555;width:100%}.string-count-group select{flex:1}.tuning-group{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:14px;color:#555;width:100%}.tuning-selector-row{display:flex;align-items:center;gap:6px;width:100%}.tuning-selector-row select{flex:1}.tuning-notes-display{display:flex;margin-bottom:6px;flex-direction:column;gap:4px;align-items:center;width:100%}.preset-trigger{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border:2px solid #ddd;border-radius:6px;font-size:15px;color:#333;cursor:pointer;transition:border-color .2s;text-align:left}.preset-trigger:hover,.preset-trigger.open{border-color:#3498db}.preset-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-chevron{flex-shrink:0;transition:transform .2s;color:#888}.preset-trigger.open .preset-chevron{transform:rotate(180deg)}.preset-trigger.dirty:after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#e67e22;flex-shrink:0}.preset-dropdown-panel{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:500;min-width:240px;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 16px #00000026;overflow:hidden}.preset-dropdown-panel.open{display:block}.preset-dropdown-list{max-height:260px;overflow-y:auto}.preset-dropdown-row{display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:pointer;transition:background .15s}.preset-dropdown-row:hover{background:#f0f4ff}.preset-dropdown-row.selected{background:#e8f4fd;font-weight:600}.preset-row-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.preset-row-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:26px;height:26px;padding:0;background:transparent;border:1px solid transparent;border-radius:4px;color:#ccc;cursor:pointer;transition:color .15s,background .15s,border-color .15s}.preset-dropdown-row:hover .preset-row-btn{color:#aaa}.preset-row-save:hover{color:#3498db;background:#e8f4fd;border-color:#b3d7f0}.preset-row-save.dirty{opacity:1;color:#e67e22}.preset-row-save.dirty:hover{color:#d35400;background:#fef5ec;border-color:#f5c07a}.preset-row-delete:hover{color:#e74c3c;background:#fdecea;border-color:#f5b8b8}.preset-empty{padding:14px 12px;font-size:13px;color:#aaa;text-align:center}.preset-saveas-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;background:#fff;border:2px solid #ddd;border-radius:6px;color:#555;cursor:pointer;transition:border-color .2s,color .2s,background .2s;flex-shrink:0}.preset-saveas-btn:hover{border-color:#9b59b6;color:#9b59b6;background:#f8f4fc}.fretboard-settings-cog{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;background:transparent;border:1.5px solid transparent;border-radius:6px;color:#aab8c4;cursor:pointer;z-index:10;transition:color .2s,background .2s,border-color .2s,transform .3s}.fretboard-settings-cog:hover{color:#3498db;background:#3498db14;border-color:#3498db4d;transform:rotate(30deg)}.arp-panel-header{display:flex;align-items:center;justify-content:space-between}.arp-settings-cog{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:1px solid transparent;border-radius:4px;color:#b0bec5;cursor:pointer;transition:color .2s,background .2s,border-color .2s,transform .3s;flex-shrink:0}.arp-settings-cog:hover{color:#3498db;transform:rotate(30deg)}.notation-panel{background:linear-gradient(135deg,#f7f9fc,#eef2f8);border:1px solid #d4dcef;border-radius:10px;margin-top:10px;padding:10px 12px 8px;overflow:hidden}.notation-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.notation-panel-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#4a5568}.riff-play-btn{display:none;align-items:center;gap:5px;padding:5px 14px;font-size:.82rem;font-weight:700;border:1.5px solid #27ae60;border-radius:20px;background:#2ecc71;color:#fff;cursor:pointer;transition:background .15s,box-shadow .15s;letter-spacing:.4px;box-shadow:0 1px 5px #2ecc7159}.riff-play-btn:hover{background:#27ae60;border-color:#219a52;box-shadow:0 2px 8px #2ecc718c}.riff-play-btn.playing{background:#e74c3c;border-color:#c0392b;box-shadow:0 1px 5px #e74c3c59}.riff-clear-btn{display:none;align-items:center;gap:5px;padding:5px 12px;font-size:.82rem;font-weight:700;border:1.5px solid #c0392b;border-radius:20px;background:transparent;color:#e74c3c;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;letter-spacing:.4px}.riff-clear-btn:hover{background:#e74c3c;color:#fff;border-color:#c0392b;box-shadow:0 1px 5px #e74c3c59}.notation-canvas-wrapper{position:relative}.riff-transport-bar{display:none;align-items:center;gap:6px;padding:5px 10px 7px;border-bottom:1px solid #cdd8ee;background:linear-gradient(to bottom,#edf2fb,#e4ecf7);margin-bottom:2px;box-shadow:0 1px 4px #1e326412}.riff-transport-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;font-size:1rem;border:1.5px solid #c5d1e8;border-radius:5px;background:#ffffffd9;color:#4a5568;cursor:pointer;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;flex-shrink:0}.riff-transport-btn:hover{background:#eef3fb;border-color:#8ea9d4;color:#1a56db;box-shadow:0 1px 4px #1e50b41a}.riff-transport-btn:active{background:#dde8f8;box-shadow:inset 0 1px 2px #1e50b41f}.riff-ctrl-group{display:inline-flex;align-items:center;gap:2px;background:#0000000e;border-radius:7px;padding:2px}.riff-ctrl-group .riff-transport-btn{border-color:transparent;background:transparent}.riff-ctrl-group .riff-transport-btn:hover{background:#ffffffe6;border-color:#b5c8e4;box-shadow:0 1px 3px #1e50b414}.riff-transport-sep{display:inline-block;width:1px;height:18px;background:linear-gradient(to bottom,transparent,#c8d4e8,transparent);margin:0 3px;flex-shrink:0}.riff-transport-spacer{flex:1}.riff-play-btn{width:auto;padding:0 12px;gap:5px;font-weight:600;font-size:.82rem;letter-spacing:.02em}.riff-clear-btn{width:auto;padding:0 10px;gap:4px;border-color:#f5c6c6;background:#fff5f5;color:#c53030;font-weight:600;font-size:.78rem;letter-spacing:.02em}.riff-clear-btn:hover{background:#fde8e8;border-color:#e53e3e;color:#9b2c2c}.riff-pdf-btn{width:auto;padding:0 10px;gap:4px;border-color:#b3c8f0;background:#eef4ff;color:#1a56db;font-weight:600;font-size:.78rem;letter-spacing:.02em}.riff-pdf-btn:hover{background:#dbeafe;border-color:#3b82f6;color:#1e40af}.riff-seq-export-btn,.riff-seq-import-btn{width:auto;padding:0 10px;gap:4px;border-color:#a3cfbe;background:#f0faf6;color:#1a6b4a;font-weight:600;font-size:.78rem;letter-spacing:.02em}.riff-seq-export-btn:hover,.riff-seq-import-btn:hover{background:#d4f0e5;border-color:#2da870;color:#145236}.riff-position-display{display:inline-flex;align-items:center;font-size:.73rem;font-weight:700;font-family:monospace;color:#c8d8f0;background:#1b2840;letter-spacing:.04em;white-space:nowrap;min-width:160px;padding:3px 10px;border-radius:5px;box-shadow:inset 0 1px 3px #00000040;-webkit-user-select:none;user-select:none}.riff-pos-field{cursor:text;padding:1px 4px;border-radius:3px;border:1px solid transparent;min-width:18px;text-align:center;transition:background .1s,border-color .1s}.riff-pos-field:hover{background:#ffffff1f;border-color:#ffffff40}.riff-pos-field:focus{outline:none;background:#ffffff2e;border-color:#5b9cf6;color:#fff}.riff-pos-sep{opacity:.45;font-size:.85em}.riff-ts-group{display:inline-flex;align-items:center;gap:2px;background:#fff9;border:1.5px solid #c5d1e8;border-radius:5px;padding:2px 5px;height:28px;flex-shrink:0}.riff-ts-sel{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;font-size:.82rem;font-weight:600;color:#34496e;cursor:pointer;text-align:center;width:28px;padding:0;outline:none}.riff-ts-sel:focus{color:#1a56db}.riff-ts-slash{font-weight:700;font-size:.9rem;color:#7a90b0;line-height:1;-webkit-user-select:none;user-select:none}.riff-ts-group.riff-ts-override{border-color:#e07a20;background:#ffb43c1f}.riff-ts-group.riff-ts-override .riff-ts-sel,.riff-ts-group.riff-ts-override .riff-ts-slash{color:#b85a00}.riff-ks-group{display:inline-flex;align-items:center;gap:2px;background:#fff9;border:1.5px solid #c5d1e8;border-radius:4px;padding:2px 5px;height:28px;flex-shrink:0}.riff-ks-sel{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;font-size:.82rem;color:#2c3e50;cursor:pointer;padding:0;outline:none}.riff-ks-sel:first-child{width:42px}.riff-ks-sel:last-child{width:32px}.riff-ks-sel:focus{color:#1a56db}.riff-ks-lock-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid rgba(0,0,0,.15);border-radius:4px;background:transparent;color:inherit;cursor:pointer;opacity:.45;flex-shrink:0;transition:opacity .15s,color .15s,background .15s}.riff-ks-lock-btn:hover:not(:disabled){opacity:.75;background:#0000000f}.riff-ks-lock-btn.active{opacity:1;color:#1a56db;background:#1a56db1a;border-color:#1a56db59}.riff-ks-lock-btn:disabled{opacity:.2;cursor:default}.riff-bpm-input{width:46px;height:28px;padding:0 4px;border:1.5px solid #c5d1e8;border-radius:5px;background:#ffffffd9;font-size:.82rem;font-weight:600;color:#34496e;text-align:center;outline:none;flex-shrink:0}.riff-bpm-input:focus{border-color:#5b9cf6;background:#fff}.riff-bpm-input::-webkit-inner-spin-button,.riff-bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.riff-bpm-input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.riff-bpm-label{font-size:.72rem;font-weight:600;color:#7a90b0;letter-spacing:.03em;flex-shrink:0}.riff-metro-btn{width:30px;font-size:1.05rem;color:#7a90b0;transition:background .12s,border-color .12s,color .12s}.riff-metro-btn.enabled{color:#1a56db;border-color:#5b9cf6;background:#5b9cf61a}.riff-metro-btn.active{color:#fff;background:#1a56db;border-color:#1a56db}.riff-ctx-menu{position:fixed;z-index:1200;background:#fff;border:1px solid #d0d8e8;border-radius:7px;box-shadow:0 4px 16px #1e32642e;padding:4px 0;min-width:120px}.riff-ctx-item{display:block;width:100%;padding:7px 18px;font-size:.82rem;font-weight:600;background:none;border:none;text-align:left;cursor:pointer;color:#2d3748;transition:background .1s}.riff-ctx-item:hover:not(:disabled){background:#ebf0fb;color:#1a56db}.riff-ctx-item:disabled{opacity:.35;cursor:default}.riff-ctx-delete{color:#e74c3c}.riff-ctx-delete:hover:not(:disabled){background:#fdf0ef;color:#c0392b}.riff-ctx-sep{height:1px;background:#e8eef8;margin:3px 6px}.riff-ctx-revoice{color:#1a6acc}.riff-ctx-revoice:hover:not(:disabled){background:#eef4ff;color:#0b4db0}.riff-revoice-modal{min-width:340px;max-width:420px}.riff-revoice-header-row{display:flex;align-items:baseline;gap:12px}.riff-revoice-count{font-size:.78rem;font-weight:500;color:#7a90b0}.riff-revoice-info{font-size:.82rem;font-weight:600;color:#3a4a6a;margin-bottom:12px!important;letter-spacing:.03em}.riff-revoice-diagram{background:#f5f8ff;border:1px solid #d8e4f5;border-radius:8px;padding:10px 16px}.riff-revoice-table{width:100%;border-collapse:collapse;font-family:monospace;font-size:.88rem}.riff-revoice-table td{padding:4px 8px;color:#7a90b0}.riff-revoice-row--active td{color:#1a2a4a;font-weight:700}.riff-revoice-str{width:28px;text-align:center;font-weight:600;font-size:.78rem;color:#8090a0!important;padding-right:4px!important}.riff-revoice-fret{width:36px;text-align:center;font-size:1rem;background:#3498db1a;border-radius:4px}.riff-revoice-row--active .riff-revoice-fret{background:#3498db38;color:#2266c0}.riff-revoice-note{padding-left:10px!important;font-size:.82rem;color:#5a7090!important}.riff-revoice-row--active .riff-revoice-note{color:#2c4a80!important}.riff-revoice-footer{flex-wrap:wrap;gap:10px}.riff-revoice-nav{display:flex;align-items:center;gap:8px;flex:1}.riff-revoice-idx{font-size:.82rem;font-weight:600;color:#5a7090;min-width:48px;text-align:center}.riff-revoice-actions{display:flex;gap:10px}.modal-btn.secondary{background:#e8eef8;color:#2c4a80;padding:7px 16px;font-size:14px}.modal-btn.secondary:hover:not(:disabled){background:#d0dcf0}.modal-btn.secondary:disabled{opacity:.35;cursor:default}.riff-note-editor{position:absolute;z-index:10;pointer-events:all}.riff-note-editor input{width:44px;padding:2px 4px;font-size:.9rem;font-weight:700;border:2px solid #3498db;border-radius:4px;background:#fff;color:#1a2a4a;text-align:center;outline:none;box-shadow:0 2px 6px #3498db38}.notation-view-toggle{display:flex;gap:4px}.notation-view-btn{padding:3px 10px;font-size:.72rem;font-weight:600;border:1px solid #bcc8de;border-radius:5px;background:#fff;color:#5a6a85;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.notation-view-btn:hover{background:#3498db14;border-color:#3498db66;color:#2980b9}.notation-view-btn.active{background:#3498db;border-color:#2980b9;color:#fff}.notation-scroll-row{display:flex;align-items:center;gap:4px;width:100%}.notation-scroll-btn{flex-shrink:0;width:24px;height:32px;background:#3498db14;border:1px solid rgba(52,152,219,.3);border-radius:5px;color:#3498db;font-size:1.1rem;line-height:1;cursor:pointer;transition:background .15s,color .15s;display:flex;align-items:center;justify-content:center;padding:0}.notation-scroll-btn:hover{background:#3498db2e;color:#2980b9}.notation-canvas-wrapper{position:relative;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;min-height:60px;border-radius:6px;background:#fff;border:1px solid #e4eaf4}.notation-canvas-wrapper::-webkit-scrollbar{display:none}.notation-beat-cursor{position:absolute;top:0;left:0;width:3px!important;min-width:3px;max-width:3px;height:100%;background:#e67e22;border-radius:1.5px;box-shadow:0 0 4px 1px #e67e2240;pointer-events:none;display:none;z-index:10;transition:left .08s cubic-bezier(.4,1.2,.6,1),box-shadow .18s}.notation-canvas-wrapper canvas{display:block;max-width:none}.notation-empty-msg{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#9aabbb;font-style:italic;pointer-events:none}.seq-dur-bar{display:none;flex-wrap:wrap;gap:3px;padding:4px 8px 6px;background:#f8faffeb;border-bottom:1px solid #e4eaf4;align-items:center}.seq-dur-btn{padding:2px 7px;font-size:.68rem;font-weight:700;border:1px solid #bcc8de;border-radius:4px;background:#fff;color:#5a6a85;cursor:pointer;transition:background .1s,color .1s}.seq-dur-btn:hover{background:#eef3fb}.seq-dur-btn.active{background:#3498db;border-color:#2980b9;color:#fff}.seq-rest-btn{font-style:italic;font-weight:700;color:#64748b;border-color:#c8d8ee;background:#f0f4fb}.seq-rest-btn:hover{background:#e2e8f5;color:#3a4a6a}.fret-position.seq-cursor{box-shadow:none!important;z-index:4!important;transform:translate(-50%,-50%)!important;transition:none!important;outline:none!important}.fret-position.seq-playing{box-shadow:0 0 0 3px #2ecc71e6,0 0 14px #2ecc718c!important;z-index:5!important;transform:translate(-50%,-50%) scale(1.15)!important;transition:none!important;outline:none!important}.fret-position.seq-selected{outline:2px solid #3af!important;outline-offset:2px;box-shadow:0 0 8px #3af9;z-index:6!important}.fret-position.riff-drop-target{background:#ffc83266!important;outline:2px dashed #ffc832!important;outline-offset:2px;z-index:6!important}#fretboard[data-riff-editable] .fret-position:not(.seq-cursor):not(.seq-playing):hover{box-shadow:0 0 0 2.5px #fb923cd9,0 0 12px #fb923c61!important;z-index:3!important;transform:translate(-50%,-50%) scale(1.08)!important;cursor:pointer}.riff-str-selector{display:flex;gap:2px;margin-bottom:4px}.riff-str-btn{padding:1px 5px;font-size:.65rem;font-weight:700;border:1px solid #bcc8de;border-radius:3px;background:#fff;color:#5a6a85;cursor:pointer}.riff-str-btn.active{background:#3498db;border-color:#2980b9;color:#fff}.riff-str-btn.has-note{background:#e8f4e8;border-color:#6ab56a;color:#2e6b2e}.notation-panel{background:linear-gradient(180deg,#f8faff,#f0f4fc);border:1px solid #dce5f5;border-radius:8px}.notation-panel-header{background:#ffffffb3;border-bottom:1px solid #e4eaf4;border-radius:8px 8px 0 0}.seq-dur-sep{display:inline-block;width:1px;height:14px;background:#ccd6e8;margin:0 4px;vertical-align:middle}.seq-tech-btn{padding:2px 7px;font-size:.72rem;font-weight:700;border:1px solid #b8cce4;border-radius:4px;background:#fff;color:#6b7fa0;cursor:pointer;transition:background .1s,color .1s;font-style:italic}.seq-tech-btn:hover{background:#eef3fb}.seq-tech-btn.active{background:#27ae60;border-color:#1e8449;color:#fff}.seq-arc-btn{padding:2px 8px;font-size:1.05rem;line-height:1;border:1px solid #b8cce4;border-radius:4px;background:#fff;color:#6b7fa0;cursor:pointer;transition:background .1s,color .1s}.seq-arc-btn:hover{background:#eef3fb}.seq-arc-btn.active{background:#8e44ad;border-color:#6c3483;color:#fff}.notation-export-btn{display:none;padding:2px 8px;font-size:.68rem;font-weight:700;border:1px solid #bcc8de;border-radius:4px;background:#fff;color:#5a6a85;cursor:pointer;margin-left:4px;transition:background .1s,color .1s;align-items:center;gap:3px}.notation-export-btn:hover{background:#eef3fb}.midi-export-overlay{opacity:1}.midi-export-modal{min-width:560px;max-width:90vw;width:auto;background:#131720;color:#c0cce0;border:1px solid #1e2a3a}.midi-export-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1e2a3a}.midi-export-header h3{color:#e0e8f0;font-size:15px}.midi-close-btn{background:none;border:none;color:#5a7090;font-size:16px;cursor:pointer;padding:2px 6px}.midi-close-btn:hover{color:#e0e8f0}.midi-global-bar{display:flex;align-items:center;gap:10px;background:#0d1117;border-bottom:1px solid #1e2a3a;padding:8px 16px;flex-wrap:wrap}.midi-global-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#3a5070;margin-right:4px}.midi-global-field{display:flex;align-items:center;gap:5px;font-size:10px;color:#5a7090}.midi-global-field input,.midi-global-field select{background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;color:#4a9eff;font-size:10px;padding:2px 5px;width:48px}.midi-global-field select{width:62px}.midi-track-lane{padding:10px 16px 0;min-height:90px}.midi-track-label{font-size:8px;text-transform:uppercase;letter-spacing:.8px;color:#2a3a4a;margin-bottom:6px}.midi-clips-row{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;align-items:flex-start}.midi-clip-wrapper{display:flex;flex-direction:column;flex-shrink:0;position:relative}.midi-clip-delete{position:absolute;top:2px;right:2px;background:none;border:none;color:transparent;font-size:12px;line-height:1;padding:0 2px;cursor:pointer;z-index:1;transition:color .1s}.midi-clip-wrapper:hover .midi-clip-delete{color:#3a5070}.midi-clip-delete:hover{color:#e05050!important}.midi-clip-block{background:#1a3a5a;border:1px solid #2a5a7a;border-radius:3px;padding:5px 8px;min-width:72px;max-width:120px;display:flex;flex-direction:column;gap:3px;cursor:grab;text-align:left;transition:border-color .15s,background .15s}.midi-clip-block:active{cursor:grabbing}.midi-clip-block.selected{border-color:#4a9eff;background:#1e3560;border-bottom-left-radius:0;border-bottom-right-radius:0}.midi-clip-block.playing{border-color:#4da;box-shadow:0 0 0 2px #44ddaa40}.midi-clip-title{font-size:9px;font-weight:600;color:#8cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}.midi-clip-bars{display:flex;align-items:flex-end;gap:1px;height:14px}.midi-clip-bar{background:#4a8abb;width:4px;border-radius:1px 1px 0 0;min-height:3px}.midi-clip-chord-hint{height:3px;background:#2a6090;border-radius:1px;width:100%}.midi-clip-chord-hint.strum{background:linear-gradient(90deg,#2a5090,#4a8abb)}.midi-clip-type{font-size:8px;color:#2a5a7a}.midi-empty-lane{font-size:11px;color:#3a5070;padding:8px 0}.midi-clip-popover{background:#1a2540;border:1px solid #4a7acc;border-top:none;border-radius:0 0 4px 4px;padding:8px 10px;min-width:180px;font-size:10px}.midi-popover-title{font-size:8px;text-transform:uppercase;letter-spacing:.8px;color:#3a5070;margin-bottom:6px}.midi-popover-field{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:6px}.midi-popover-key{color:#4a6070;font-size:9px;min-width:40px}.midi-popover-val{display:flex;align-items:center;gap:3px;flex:1}.midi-popover-val.from-global input,.midi-popover-val.from-global select{font-style:italic;color:#4a9eff}.midi-popover-val.overridden input,.midi-popover-val.overridden select{font-style:normal;color:#8cf;border-color:#3a5a7a}.midi-popover-val input,.midi-popover-val select{background:#1a3a5a;border:1px solid #2a4a6a;border-radius:2px;color:#4a9eff;font-size:10px;padding:2px 4px;width:56px}.midi-popover-val select{width:80px}.midi-popover-clear{background:none;border:none;color:#3a5070;cursor:pointer;font-size:12px;padding:0 2px;line-height:1}.midi-popover-clear:hover{color:#e05050}.midi-popover-hint{font-size:8px;color:#2a3a4a;margin-top:6px;border-top:1px solid #1e2a3a;padding-top:4px}.midi-export-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 16px;border-top:1px solid #1e2a3a;gap:8px;flex-wrap:wrap}.midi-playback-controls{display:flex;align-items:center;gap:6px}.midi-play-btn,.midi-loop-btn{background:#1a2a3a;border:1px solid #2a3a4a;border-radius:3px;color:#7a9ab0;font-size:11px;padding:5px 10px;cursor:pointer;transition:background .15s,color .15s}.midi-play-btn:hover,.midi-loop-btn:hover{background:#1e3a5a;color:#8cf}.midi-play-btn.active,.midi-loop-btn.active{background:#1a3060;color:#4a9eff;border-color:#2a5090}.midi-play-btn:disabled{opacity:.4;cursor:not-allowed}.midi-bar-estimate{font-size:9px;color:#2a4060}.midi-export-actions{display:flex;gap:6px}:root{--bg: #0a0c11;--panel: #111520;--panel-2: #161c28;--border: #1e2840;--border-2: #243354;--text-1: #dde6f0;--text-2: #6e88a8;--text-3: rgba(221, 230, 240, .6);--amber: #e8922a;--amber-glow: rgba(232, 146, 42, .18);--blue: #3a8fd4;--green: #22c55e;--red: #e74c3c;--font-ui: "Barlow", system-ui, sans-serif;--font-cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}body{font-family:var(--font-ui);background:var(--bg);color:var(--text-1)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(30,40,64,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(30,40,64,.18) 1px,transparent 1px);background-size:32px 32px}.container{padding-top:8px}.page-logo{filter:drop-shadow(0 2px 16px rgba(0,0,0,.9));margin-bottom:4px}.controls{background:var(--panel);border:1px solid var(--border);box-shadow:0 4px 20px #00000073;color:var(--text-1)}.controls label{color:var(--text-2);font-family:var(--font-cond);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.controls select{background:var(--panel-2);border:1px solid var(--border);color:var(--text-1);font-family:var(--font-ui)}.controls select:focus{border-color:var(--blue);box-shadow:0 0 0 2px #3a8fd433;outline:none}.save-tuning-btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--border);color:var(--text-2);font-family:var(--font-cond);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:7px;cursor:pointer;white-space:nowrap}.save-tuning-btn:hover{border-color:var(--blue);color:var(--blue);background:#3a8fd41a}.top-actions{background:var(--panel);border:1px solid var(--border);box-shadow:0 4px 20px #00000073}#undoBtn,#redoBtn{background:var(--panel-2);border:1px solid var(--border);color:var(--text-2)}#undoBtn:hover:not(:disabled),#redoBtn:hover:not(:disabled){background:var(--border);border-color:var(--border-2);color:var(--text-1)}#undoBtn:disabled,#redoBtn:disabled{background:var(--panel);color:var(--text-3)}#saveTuning{background:var(--amber);border:none;color:#0a0c11;font-family:var(--font-cond);font-weight:700;letter-spacing:.04em}#saveTuning:hover{background:#d07a1e}.tuning-tooltip-label{color:var(--text-3);font-family:var(--font-cond);letter-spacing:.08em}.preset-custom-label{color:var(--text-2);font-family:var(--font-cond);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.preset-trigger{background:var(--panel-2);border:1px solid var(--border);color:var(--text-1);font-family:var(--font-ui);border-radius:6px}.preset-trigger:hover,.preset-trigger.open{border-color:var(--blue);background:var(--border)}.preset-chevron{color:var(--text-3)}.preset-saveas-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text-2)}.preset-saveas-btn:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-glow)}.preset-dropdown-panel{background:var(--panel);border:1px solid var(--border-2);box-shadow:0 12px 36px #000000a6}.preset-dropdown-row{color:var(--text-1);font-family:var(--font-ui)}.preset-dropdown-row:hover{background:var(--border)}.preset-dropdown-row.selected{background:var(--panel-2);color:var(--amber)}.fret-range-controls label,.string-count-group label{color:var(--text-2);font-family:var(--font-cond);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.fret-range-controls input[type=number]{background:var(--panel-2);border-color:var(--border);color:var(--text-1);font-family:var(--font-mono)}.fret-range-controls input[type=number]:focus{border-color:var(--blue);background:var(--border);color:var(--text-1)}.fret-range-controls span{color:var(--text-3)}.tempo-section{background:var(--panel);border:1px solid var(--border);box-shadow:0 4px 20px #00000073}.tempo-group{background:transparent}.tempo-group-label{color:var(--text-3);font-family:var(--font-cond);font-size:10px;font-weight:600;letter-spacing:.1em}.tempo-bpm-input{background:var(--panel-2);border-color:var(--border-2);color:var(--text-1);font-family:var(--font-mono);font-weight:600}.tempo-bpm-input:focus{border-color:var(--blue);background:var(--border)}.tempo-sep{background:var(--border)}.fretboard-container{background:var(--panel);border:1px solid var(--border);box-shadow:0 8px 32px #0000008c;padding-top:58px;padding-right:32px;padding-left:60px}.sn-face{background:var(--panel-2);border-color:var(--border-2);color:var(--text-1)}.sn-face:hover{border-color:var(--blue);background:var(--border);box-shadow:0 2px 8px #3a8fd44d}.sn-prev,.sn-next{background:var(--panel-2);border-color:var(--border);color:var(--text-2)}.sn-prev:hover,.sn-next:hover{color:var(--blue);background:#3a8fd41a;border-color:#3a8fd466}.sn-list{background:var(--panel-2);border-color:var(--border-2);box-shadow:0 6px 18px #0009}.sn-option{color:var(--text-1)}.sn-option:hover{background:var(--border)}.fret-number{color:var(--text-3);font-family:var(--font-mono);font-size:12px}#fretboardSettingsBtn{color:var(--text-3)}#fretboardSettingsBtn:hover{color:var(--amber)}#fretboardSettingsBtn svg{width:20px;height:20px}.label-mode-toggle-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text-2);font-family:var(--font-cond)}.label-mode-toggle-btn.active,.label-mode-toggle-btn:hover{background:var(--border);border-color:var(--amber);color:var(--amber)}.arp-panel{background:var(--panel);border:1px solid var(--border);position:relative}.arp-panel-header{color:var(--text-3);border-bottom-color:var(--border);font-family:var(--font-cond);font-size:11px;font-weight:700;letter-spacing:.1em}.arp-label{color:var(--text-2);font-family:var(--font-cond);font-size:11px;font-weight:600;letter-spacing:.07em}.arp-panel select{background:var(--panel-2);border:1px solid var(--border);color:var(--text-1);font-family:var(--font-ui)}.arp-panel select:focus{border-color:var(--blue);outline:none}.playback-bpm-input{background:var(--panel-2);border:1px solid var(--border);color:var(--text-1);font-family:var(--font-mono)}.arp-panel .show-button{background:transparent;border:1.5px solid var(--amber);color:var(--amber);font-family:var(--font-cond);font-weight:700;letter-spacing:.05em;box-shadow:none;transition:background .15s,box-shadow .15s}.arp-panel .show-button:hover{background:var(--amber-glow);box-shadow:0 0 10px var(--amber-glow)}#pauseScaleBtn.show-button{background:var(--amber-glow);border-color:var(--amber);color:var(--amber);box-shadow:none}#pauseScaleBtn.show-button:hover{background:#e8922a47;box-shadow:0 0 10px var(--amber-glow)}#playChordArpBtn{background:#27ae60;color:#fff;border-color:#27ae60;box-shadow:none}#playChordArpBtn:hover{background:#219a52;border-color:#219a52;box-shadow:none}.arp-panel .show-button.playing{background:transparent;border-color:var(--red);color:var(--red);box-shadow:none}.arp-panel .show-button.playing:hover{background:#e74c3c26}.delay-mode-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text-2);font-family:var(--font-cond);font-weight:700;letter-spacing:.05em}.delay-mode-btn.active{background:#3a8fd42e;border-color:var(--blue);color:var(--blue)}.settings-reverb-toggle{background:var(--panel-2);border:1px solid var(--border);color:var(--text-2);font-family:var(--font-cond);font-weight:700}.settings-reverb-toggle.active{background:#22c55e2e;border-color:var(--green);color:var(--green);box-shadow:0 0 8px #22c55e33}.arp-toolbar-group{background:var(--panel);box-shadow:var(--shadow-panel, 0 8px 25px rgba(0,0,0,.35))}.arp-toolbar-mini-controls{border-top-color:var(--border)}.arp-toolbar-mini-btn{background:transparent;border-right-color:var(--border);color:var(--text-2)}.arp-toolbar-mini-btn:hover{background:var(--panel-2);color:var(--text-1)}.arp-settings-cog{color:var(--text-3);background:none;border:none;cursor:pointer;padding:3px;border-radius:4px;transition:color .15s}.arp-settings-cog:hover{color:var(--amber)}.arp-divider,.arp-toggle-sep,.arp-params-sep{background:var(--border)}.arp-slider-val{color:var(--text-2);font-family:var(--font-mono)}.arp-settings-cog--inline{position:absolute;top:6px;right:8px;left:auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;background:transparent;border:1.5px solid transparent;border-radius:6px;color:var(--text-3, #aab8c4);cursor:pointer;z-index:10;transition:color .2s,background .2s,border-color .2s,transform .3s}.arp-settings-cog--inline:hover{color:var(--amber, #f39c12);background:transparent;border-color:transparent;transform:rotate(30deg)}.utility-panel{background:var(--panel-2);border:1px solid var(--border)}.utility-panel-title{color:var(--text-3);font-family:var(--font-cond);letter-spacing:.08em}.utility-panel .fret-range-controls,.utility-panel .toggle-container{background:var(--panel);border:1px solid var(--border)}.scales-section{background:var(--panel);border:1px solid var(--border);box-shadow:0 4px 20px #0006}.scales-section h3{color:var(--text-1);font-family:var(--font-cond);font-weight:700;letter-spacing:.03em}.scale-controls label{color:var(--text-2);font-family:var(--font-cond);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.scale-controls select{background:var(--panel-2);border:2px solid var(--border);color:var(--text-1);font-family:var(--font-ui)}.scale-controls select:focus{border-color:var(--blue);outline:none}#showScale,#showChord,#clearScale,.scale-btn,.chord-btn{background:transparent;border:1.5px solid var(--amber);color:var(--amber);font-family:var(--font-cond);font-weight:700;letter-spacing:.05em;border-radius:20px}#showScale:hover,#showChord:hover{background:var(--amber-glow)}#clearScale{border-color:var(--text-3);color:var(--text-3)}#clearScale:hover{border-color:var(--red);color:var(--red);background:transparent}.notation-panel{background:var(--panel);border:1px solid var(--border)}.notation-panel-title{color:var(--text-3);font-family:var(--font-cond);font-size:11px;font-weight:700;letter-spacing:.1em}.notation-toggle-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text-2);font-family:var(--font-cond);font-weight:600}.notation-toggle-btn:hover{background:var(--border);border-color:var(--blue);color:var(--blue)}.notation-toggle-btn.active{background:#3a8fd426;border-color:var(--blue);color:var(--blue)}@keyframes bag-bounce{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-4deg)}50%{transform:translateY(-2px) rotate(3deg)}75%{transform:translateY(-5px) rotate(-2deg)}to{transform:translateY(0) rotate(0)}}#chordBagToggleBtn{background:var(--panel);border:1px solid var(--border);color:var(--text-2);transition:background .15s,border-color .15s,color .15s}#chordBagToggleBtn:hover{background:var(--border);border-color:var(--blue);color:var(--text-1)}#chordBagToggleBtn:hover .bag-svg{animation:bag-bounce .45s ease-in-out}.bag-svg path{fill:currentColor}.bag-count{color:var(--amber);font-family:var(--font-mono);font-weight:600}.music-circle-panel{background:var(--panel);border:1px solid var(--border-2);box-shadow:0 12px 40px #000000b3}.music-circle-drag-handle{background:var(--panel-2);border-bottom-color:var(--border);color:var(--text-2);font-family:var(--font-cond);letter-spacing:.06em}.music-circle-dock-btn{color:var(--text-3)}.music-circle-dock-btn:hover{color:var(--text-1);background:#ffffff0f}.music-circle-panel--docked{box-shadow:0 4px 20px #0009}.modal{background:var(--panel);border:1px solid var(--border-2);box-shadow:0 24px 64px #000000b3;color:var(--text-1)}.modal-header{border-bottom-color:var(--border);padding:20px 24px 14px}.modal-header h3{color:var(--text-1);font-family:var(--font-cond);font-size:16px;font-weight:700;letter-spacing:.04em}.modal-body p{color:var(--text-2)}.modal-body input{background:var(--panel-2);border:1.5px solid var(--border);color:var(--text-1);font-family:var(--font-ui)}.modal-body input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3a8fd426;outline:none}.modal-footer{border-top:1px solid var(--border);background:var(--panel);padding:14px 24px 20px}.modal-btn{font-family:var(--font-cond);font-weight:700;letter-spacing:.06em;border-radius:6px}.modal-btn.cancel{background:var(--panel-2);border:1px solid var(--border);color:var(--text-2)}.modal-btn.cancel:hover{background:var(--border);color:var(--text-1)}.modal-btn.confirm{background:var(--blue);border:none;color:#fff;box-shadow:0 2px 10px #3a8fd459}.modal-btn.confirm:hover{filter:brightness(1.12)}.modal-btn.secondary{background:transparent;border:1.5px solid var(--border-2);color:var(--text-2)}.modal-btn.secondary:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-glow)}.settings-modal-panel{background:var(--panel);border:1px solid var(--border-2)}.settings-modal-header{background:var(--panel-2);border-bottom:1px solid var(--border);font-family:var(--font-cond);letter-spacing:.06em}.settings-modal-body{background:var(--panel)}.settings-row label{color:var(--text-3);font-family:var(--font-cond);letter-spacing:.08em}.settings-row select,.settings-shape-select{background:var(--panel-2);border:1.5px solid var(--border);color:var(--text-1);font-family:var(--font-ui)}.settings-row select:focus,.settings-shape-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3a8fd426;outline:none}.settings-synth-panel,.settings-reverb-panel{background:var(--panel-2);border:1px solid var(--border)}.settings-synth-row label,.settings-reverb-row label{color:var(--text-3)}.settings-synth-row span,.settings-reverb-slider-wrap span{color:var(--text-2);font-family:var(--font-mono)}.settings-modal-footer{border-top:1px solid var(--border);background:var(--panel)}.settings-btn-primary{background:linear-gradient(135deg,var(--blue) 0%,#2870b8 100%);font-family:var(--font-cond);font-weight:700;letter-spacing:.06em}.settings-color-item{color:var(--text-2)}.settings-color-item input[type=color]{border-color:var(--border);background:var(--panel-2)}.settings-btn-reset{color:var(--text-3);border:1.5px solid var(--border)}.settings-btn-reset:hover{color:#e74c3c;border-color:#e74c3c80;background:#e74c3c14}.settings-section+.settings-section{border-top-color:var(--border)}.settings-section-label{color:var(--amber);font-family:var(--font-cond)}.settings-inline-row>label{color:var(--text-3);font-family:var(--font-cond)}.settings-inline-row>select{background:var(--panel-2);border-color:var(--border);color:var(--text-1);font-family:var(--font-ui)}.settings-inline-row>select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3a8fd426}.settings-slider-value{color:var(--text-2);font-family:var(--font-mono)}.music-circles-actions{display:flex;flex-direction:column;gap:10px;min-width:140px;height:120px;justify-content:center;background:var(--panel);padding:16px;border-radius:12px;border:1px solid var(--border);box-shadow:0 4px 20px #00000073}.music-circle-panel-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;min-height:80px;padding:14px 8px;border-radius:12px;font-family:var(--font-cond);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.music-circle-panel-btn svg{width:70px;flex-shrink:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}#toggleChromaticCircle:hover svg{transform:rotate(60deg)}#toggleCircleOfFifths:hover svg{transform:rotate(135deg)}#toggleCirclesBoth:hover svg{transform:rotate(90deg)}@media (min-width: 1600px){#toggleChromaticCircle,#toggleCircleOfFifths,#toggleCirclesBoth{display:none}}#toggleCirclesBoth{display:none}@media (max-width: 564px){#toggleChromaticCircle,#toggleCircleOfFifths{display:none}#toggleCirclesBoth{display:flex}}.music-circle-trigger-btn,.music-circles-toolbar button{background:var(--panel-2);border:1px solid var(--border);color:var(--text-2)}.music-circle-trigger-btn:hover,.music-circles-toolbar button:hover{border-color:var(--blue);color:var(--blue);background:#3a8fd41a}.music-circle-trigger-btn.active,.music-circles-toolbar button.active,#toggleCircleOfFifths.active,#toggleChromaticCircle.active,#toggleCirclesBoth.active{border-color:var(--blue);color:var(--blue);background:#3a8fd426}.tuning-tooltip{background:var(--panel-2);border:1px solid var(--border-2);box-shadow:0 8px 28px #0009}.tuning-tooltip:before{border-bottom-color:var(--border-2)}.tuning-tooltip:after{border-bottom-color:var(--panel-2)}.mobile-context-menu{background:var(--panel);border:1px solid var(--border-2);box-shadow:0 12px 36px #000000b3}.mobile-context-menu button{color:var(--text-1);border-bottom:1px solid var(--border);font-family:var(--font-ui)}.mobile-context-menu button:hover,.mobile-context-menu button:active{background:var(--border);color:var(--amber)}.context-menu{background:var(--panel-2);border-color:var(--border-2);box-shadow:0 8px 24px #0009}.context-menu-item{color:var(--text-1)}.context-menu-item:hover{background:var(--border);color:var(--text-1)}.context-menu-item:active{background:var(--border-2)}input[type=range]{accent-color:var(--amber)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--panel-2)}::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}.fretboard-rotate-wrap{position:relative;width:100%}.fretboard-controls-bar{display:flex;align-items:center;padding:0 16px;height:52px;background:var(--panel);border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;box-shadow:0 8px 32px #0000008c;gap:12px;box-sizing:border-box;position:relative;z-index:1}.fcb-left{display:flex;align-items:center;gap:8px;flex-shrink:0}.fcb-center{flex:1;display:flex;align-items:center;justify-content:center}.fcb-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.fretboard-controls-bar .toggle-switch.fretboard-label-3way{position:static!important;left:auto!important;top:auto!important;margin:0!important}.mode-toggle{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;box-shadow:none;padding:3px;gap:2px;margin-bottom:16px}.mode-button{background:transparent;color:var(--text-2);font-family:var(--font-cond);font-size:14px;font-weight:700;letter-spacing:.07em;border-radius:7px;padding:9px 20px;transition:background .15s,color .15s;position:relative}.mode-button:hover{background:var(--border);color:var(--text-1)}.mode-button.active{background:var(--panel);color:var(--amber);border:1px solid var(--border-2);box-shadow:0 1px 8px #00000059}.mode-button:focus{box-shadow:none;outline:none}.detected-chord-badge-label{color:var(--text-2);font-family:var(--font-cond);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.detected-chord-badge{border-color:var(--blue);background:#3a8fd41f;color:var(--blue);font-family:var(--font-cond);font-weight:600;letter-spacing:.04em}.shell-button{background:var(--panel-2);border:1px solid var(--border);color:var(--text-2);font-family:var(--font-ui);font-size:13px;font-weight:500;border-radius:6px;box-shadow:none;margin-left:4px;padding:6px 14px;transition:background .15s,color .15s,border-color .15s}.shell-button:hover{background:var(--border);color:var(--text-1);border-color:var(--border-2);box-shadow:none}.shell-button.active{background:#3a8fd426;border-color:var(--blue);color:var(--blue);box-shadow:none}.shell-button:focus{outline:none;box-shadow:none}.inversion-show-all-btn{background:#3a8fd41a;color:var(--blue);border:1px solid rgba(58,143,212,.3)}.inversion-show-all-btn:hover{background:#3a8fd433;border-color:var(--blue)}.arp212-nav-sep,.chord-lock-nav-sep{color:var(--border-2)}.chord-inversion-index,.chord-fingering-index,.chord-lock-index,.arp212-index,.arp212-var-index,.arp212-cat-index,.chord-lock-root-label,.chord-lock-quality-label{color:var(--text-2);font-family:var(--font-mono);font-size:12px}.chord-lock-section-label{color:var(--text-2);font-family:var(--font-cond);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.pitch-class-btn{background:transparent;border:1.5px solid var(--border-2);color:var(--text-2);font-family:var(--font-cond);font-weight:700;letter-spacing:.05em;font-size:13px;margin-left:6px;border-radius:6px;padding:6px 14px;transition:background .15s,color .15s,border-color .15s}.pitch-class-btn:hover{border-color:var(--blue);color:var(--blue);background:#3a8fd41a}.pitch-class-btn:focus{outline:none;box-shadow:none}.pitch-class-toggle-container{border-top:1px solid var(--border)}#addShapesToBagBtn{background:transparent;border:1.5px solid var(--amber);color:var(--amber);font-family:var(--font-cond);font-weight:700;letter-spacing:.05em;border-radius:20px;padding:5px 14px;box-shadow:none;font-size:.82rem}#addShapesToBagBtn:hover{background:var(--amber-glow)}.chord-info-panel{background:var(--panel-2);border:1px solid var(--border);border-radius:10px}.scale-info-panel{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px 14px 12px}.chord-info-title,.scale-info-title{color:var(--text-2);font-family:var(--font-cond);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.chord-info-formula span{color:var(--text-3);font-family:var(--font-mono)}.chord-info-notes span{color:var(--text-1);font-family:var(--font-mono);font-weight:600}.chord-info-desc,.scale-info-desc,.scale-info-intervals,.chord-info-detected,.scale-info-detected{color:var(--text-2);font-size:12px}.chord-info-notes .info-note-chip.info-note-chip-playing,.scale-info-notes .info-note-chip.info-note-chip-playing{color:var(--green);text-shadow:0 0 8px rgba(34,197,94,.35)}.chord-info-scale-chip{background:var(--panel);border:1px solid var(--border);color:var(--text-2)}.chord-info-scale-chip:hover{background:var(--border);border-color:var(--blue);color:var(--blue)}.chord-info-scale-degree{color:var(--text-3)}.chord-info-next-row{color:var(--text-2)}.chord-info-next-row:hover{background:var(--border);color:var(--text-1)}.chord-info-next-label,.chord-info-scales-label{color:var(--text-3);font-family:var(--font-cond);letter-spacing:.06em}.chord-info-replace-btn{background:transparent;border:1px solid var(--border-2);color:var(--text-2);font-family:var(--font-cond);font-weight:700;font-size:11px;border-radius:5px;padding:3px 10px;cursor:pointer;transition:border-color .15s,color .15s}.chord-info-replace-btn:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-glow)}.chord-info-fit .fit-label,.scale-info-fit .fit-label{color:var(--text-3);font-family:var(--font-cond)}.chord-info-fit .fit-notes,.scale-info-fit .fit-notes{color:var(--text-2)}.chord-bag-sidebar{background:var(--panel);box-shadow:-4px 0 32px #000000a6}.chord-bag-header{background:var(--panel-2);border-bottom:1px solid var(--border)}.chord-bag-header h3{color:var(--text-1);font-family:var(--font-cond);font-weight:700;letter-spacing:.04em}.chord-bag-count{background:var(--amber);color:#0a0c11;font-family:var(--font-mono);font-weight:600}.chord-bag-export-btn{background:transparent;border:1px solid var(--border-2);color:var(--text-2);font-family:var(--font-cond);font-weight:700;font-size:10px;letter-spacing:.04em;border-radius:5px;transition:border-color .15s,color .15s,background .15s}.chord-bag-export-btn:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-glow)}.chord-bag-clear-btn{background:transparent;border:1px solid rgba(231,76,60,.4);color:#e74c3cb3;font-family:var(--font-cond);font-weight:700;font-size:10px;letter-spacing:.04em;border-radius:5px;transition:border-color .15s,color .15s,background .15s}.chord-bag-clear-btn:hover{background:#e74c3c1f;border-color:var(--red);color:var(--red)}.chord-bag-close{color:var(--text-3)}.chord-bag-close:hover{color:var(--text-1)}.chord-bag-list{overflow-y:auto}.chord-bag-empty{color:var(--text-3);font-family:var(--font-ui)}.chord-bag-undo-bar{background:var(--panel-2);border:1px solid var(--border-2);color:var(--text-2)}.chord-thumbnail{background:var(--panel-2);border:1px solid var(--border)}.info p{color:var(--text-3);font-family:var(--font-ui);font-size:12px}.tempo-timesig-sel{background:var(--panel-2);border:1.5px solid var(--border-2);color:var(--text-1);font-family:var(--font-mono);font-weight:600;box-shadow:none}.tempo-timesig-sel:focus{border-color:var(--blue);background:var(--border);color:var(--text-1);outline:none}.tempo-timesig-bar{background:var(--border-2)}.toggle-container>label{color:var(--text-2);font-family:var(--font-cond);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}.toggle-label{background:var(--panel-2);border:1.5px solid var(--border)}.toggle-input:checked+.toggle-label{background:var(--panel-2);border-color:var(--border-2)}.toggle-slider{background:var(--blue)}.toggle-input:not(:checked)+.toggle-label .toggle-text:first-child,.toggle-input:checked+.toggle-label .toggle-text:last-child{color:var(--text-1);font-weight:600}.toggle-input:not(:checked)+.toggle-label .toggle-text:last-child,.toggle-input:checked+.toggle-label .toggle-text:first-child{color:var(--text-3);font-weight:400}.toggle-label.toggle-label-3way{background:var(--panel-2);border:1.5px solid var(--border)}.toggle-slider.toggle-slider-3way{background:var(--blue)}.toggle-text.toggle-text-3way{color:var(--text-2);font-family:var(--font-cond);font-weight:600;letter-spacing:.04em}.toggle-switch.fretboard-label-3way #noteLabelModeNote:checked~.toggle-label-3way .toggle-text-3way:nth-child(1),.toggle-switch.fretboard-label-3way #noteLabelModeDigit:checked~.toggle-label-3way .toggle-text-3way:nth-child(2),.toggle-switch.fretboard-label-3way #noteLabelModeRoman:checked~.toggle-label-3way .toggle-text-3way:nth-child(3){color:var(--text-1);font-weight:700}.toggle-switch.fretboard-label-3way #noteLabelModeNote:checked~.toggle-label-3way .toggle-text-3way:nth-child(2),.toggle-switch.fretboard-label-3way #noteLabelModeNote:checked~.toggle-label-3way .toggle-text-3way:nth-child(3),.toggle-switch.fretboard-label-3way #noteLabelModeDigit:checked~.toggle-label-3way .toggle-text-3way:nth-child(1),.toggle-switch.fretboard-label-3way #noteLabelModeDigit:checked~.toggle-label-3way .toggle-text-3way:nth-child(3),.toggle-switch.fretboard-label-3way #noteLabelModeRoman:checked~.toggle-label-3way .toggle-text-3way:nth-child(1),.toggle-switch.fretboard-label-3way #noteLabelModeRoman:checked~.toggle-label-3way .toggle-text-3way:nth-child(2){color:var(--text-3);font-weight:500}.fretboard-expand-btn{position:absolute;top:10px;right:56px;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;background:transparent;border:1.5px solid transparent;border-radius:6px;color:var(--text-3);cursor:pointer;z-index:10;transition:color .2s,background .2s,border-color .2s}.fretboard-expand-btn svg{width:16px;height:16px}.fretboard-expand-btn:hover{color:var(--amber);background:var(--amber-glow);border-color:#e8922a4d}@media (max-width: 480px) and (orientation: landscape){.fretboard-rotate-wrap{margin-left:-8px;margin-right:-8px;width:calc(100% + 16px)}}.fretboard-rotate-wrap.fretboard-fullscreen{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100dvw!important;height:100dvh!important;margin:0!important;z-index:8000;background:var(--bg);display:flex!important;flex-direction:column!important;overflow:hidden;padding:0;border-radius:0;border-top:2px solid var(--amber)}.fretboard-rotate-wrap.fretboard-fullscreen .fretboard-container{position:static!important;transform:none!important;width:100%!important;flex:1!important;min-height:0!important;height:auto!important;overflow-x:auto!important;overflow-y:hidden!important;border-radius:0;margin:0;box-sizing:border-box;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:stretch!important}.fretboard-rotate-wrap.fretboard-fullscreen .fretboard-controls-bar{flex-shrink:0;border-radius:0;border-left:none;border-right:none;border-bottom:none;border-top:1px solid var(--border);box-shadow:none;z-index:8001}.fretboard-rotate-wrap.fretboard-fullscreen .fretboard-settings-cog{position:absolute;top:10px;right:12px;z-index:8002}.fretboard-rotate-wrap.fretboard-fullscreen .fretboard-expand-btn{position:absolute;top:10px;right:56px;color:var(--amber);border-color:#e8922a66;background:var(--panel-2);z-index:8002}.fretboard-rotate-wrap.fretboard-fullscreen .fret-numbers{display:block!important}.fretboard-rotate-wrap.fretboard-fullscreen .fretboard-expand-btn{color:var(--amber);border-color:#e8922a66;background:var(--panel-2);z-index:8002}@media (max-width: 600px){.scale-controls{flex-direction:column;align-items:stretch;gap:6px;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.root-note-section,.root-string-section{display:flex;align-items:center;gap:8px}.root-note-section select,.root-string-section select{flex:1;min-width:0}.scale-type-section{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}.scale-type-section label{white-space:nowrap}.scale-type-section select{width:100%;min-width:0;max-width:100%;box-sizing:border-box;flex-shrink:1}.scale-type-section .pitch-class-btn{grid-column:1 / -1}.chord-controls{flex-direction:column;align-items:stretch;gap:6px}.chord-control-pair{display:flex;align-items:center;gap:8px}.chord-control-pair label{white-space:nowrap;min-width:3.5em}.chord-control-pair select{flex:1;min-width:0}.chord-inversion-nav,.chord-fingering-nav,.chord-lock-nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.mode-button{padding:7px 10px;font-size:12px}}@media (orientation: portrait){.fretboard-rotate-wrap.fretboard-fullscreen{display:block!important;overflow:hidden!important;padding:0!important}.fretboard-rotate-wrap.fretboard-fullscreen .fretboard-container{position:absolute!important;top:0!important;left:0!important;transform:rotate(90deg) translateY(-100%)!important;transform-origin:top left!important;width:100dvh!important;height:calc(100dvw - 52px)!important;overflow-x:auto!important;overflow-y:hidden!important;border-radius:0!important;box-sizing:border-box!important;display:block!important;justify-content:unset!important;align-items:unset!important}.fretboard-rotate-wrap.fretboard-fullscreen .fret-numbers{display:none!important}.fretboard-rotate-wrap.fretboard-fullscreen .fretboard-controls-bar{position:absolute!important;bottom:0!important;left:0!important;right:0!important;height:52px!important;flex-shrink:0;border-radius:0!important;border-left:none!important;border-right:none!important;border-bottom:none!important;border-top:1px solid var(--border)!important;box-shadow:none!important;z-index:8001!important}.fretboard-rotate-wrap.fretboard-fullscreen .fretboard-settings-cog{position:absolute!important;top:10px!important;right:12px!important;z-index:8002!important}.fretboard-rotate-wrap.fretboard-fullscreen .fretboard-expand-btn{position:absolute!important;top:10px!important;right:56px!important;z-index:8002!important;color:var(--amber)!important;border-color:#e8922a66!important;background:var(--panel-2)!important}}.wt-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#060a1a99;z-index:9997;animation:wtFadeIn .3s ease forwards}.wt-spotlight{animation:wtSpotGlow 2.2s ease-in-out infinite}@keyframes wtSpotGlow{0%,to{box-shadow:0 0 0 9999px #060a1a99,0 0 #00e5ff00}50%{box-shadow:0 0 0 9999px #060a1a99,0 0 18px 4px #00e5ff73}}.wt-card{position:fixed;width:min(360px,calc(100vw - 32px));background:#0c1528;border:1px solid rgba(0,229,255,.35);border-radius:14px;padding:0;z-index:9999;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.4,.64,1);box-shadow:0 0 0 1px #00e5ff1a,0 24px 64px #0009,0 0 40px #00e5ff14;font-family:Barlow,Arial,sans-serif}.wt-card--visible{opacity:1;transform:translateY(0) scale(1)}.wt-card-topbar{display:flex;align-items:center;gap:10px;padding:12px 16px 0}.wt-step-id{font-family:JetBrains Mono,monospace;font-size:11px;font-weight:600;color:#00e5ffb3;letter-spacing:.08em;flex-shrink:0;min-width:22px}.wt-progress{display:flex;gap:4px;flex:1;align-items:center;justify-content:center;overflow:hidden}.wt-dot{width:5px;height:5px;border-radius:50%;background:#ffffff2e;transition:background .25s,transform .25s,width .25s;flex-shrink:0}.wt-dot--done{background:#00e5ff66}.wt-dot--active{background:#00e5ff;width:16px;border-radius:3px;box-shadow:0 0 6px #00e5ff99}.wt-skip{background:transparent;border:none;color:#ffffff59;font-family:Barlow,Arial,sans-serif;font-size:12px;cursor:pointer;padding:2px 4px;transition:color .15s;flex-shrink:0}.wt-skip:hover{color:#ffffffa6}.wt-card-body{padding:16px 20px 12px;text-align:center}.wt-icon{font-size:28px;line-height:1;margin-bottom:10px;filter:drop-shadow(0 0 8px rgba(0,229,255,.3))}.wt-title{font-family:Barlow Condensed,Barlow,Arial,sans-serif;font-size:20px;font-weight:700;color:#e8f4ff;margin:0 0 8px;letter-spacing:.01em;line-height:1.2}.wt-desc{font-size:13.5px;font-weight:400;color:#c8dcf0d1;line-height:1.6;margin:0}.wt-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px 16px;border-top:1px solid rgba(0,229,255,.1)}.wt-btn{font-family:Barlow,Arial,sans-serif;font-size:13px;font-weight:600;border-radius:8px;padding:8px 18px;cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .1s;line-height:1;border:1px solid transparent}.wt-btn:active{transform:scale(.96)}.wt-btn--ghost{background:transparent;color:#c8dcf099;border-color:#c8dcf033}.wt-btn--ghost:hover{background:#ffffff0f;color:#c8dcf0e6;border-color:#c8dcf059}.wt-btn--primary{background:#00e5ff1f;color:#00e5ff;border-color:#00e5ff80}.wt-btn--primary:hover{background:#00e5ff38;box-shadow:0 0 12px #00e5ff33;border-color:#00e5ffcc}@keyframes wtFadeIn{0%{opacity:0}to{opacity:1}}.wt-help-trigger{position:fixed;bottom:20px;right:20px;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(0,229,255,.4);background:#00e5ff14;color:#00e5ffb3;font-family:JetBrains Mono,monospace;font-size:14px;font-weight:600;cursor:pointer;z-index:9000;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .1s;line-height:1}.wt-help-trigger:hover{background:#00e5ff2e;border-color:#00e5ffbf;color:#00e5ff;box-shadow:0 0 12px #00e5ff40;transform:scale(1.08)}.wt-help-trigger:active{transform:scale(.94)}@media (max-width: 400px){.wt-nav{flex-direction:column-reverse;align-items:stretch}.wt-btn{text-align:center}}