#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;align-items:center;justify-content:space-between;margin:16px auto;height:62px;width:100%;max-width:1400px;position:relative;z-index:9500;pointer-events:none}.page-logo-static{height:100%;width:auto}.page-logo .account-menu{pointer-events:auto}.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:20px;height:20px;border-radius:50%;font-weight:600;font-size:9px;box-shadow:0 2px 6px #0000002e;border:1.5px 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:10px 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%}.icon-toolbar-row{width:100%;margin-bottom:16px}.icon-toolbar{display:flex;flex-direction:row;align-items:stretch;flex:1;background:var(--panel-2, #161c28);border:1px solid var(--border, #1e2840);border-radius:12px;box-shadow:0 8px 25px #00000026;overflow:hidden}.icon-toolbar>*{flex:1;min-width:0;border-right:1px solid var(--border, #1e2840)}.icon-toolbar>*:last-child{border-right:none}.icon-toolbar .arp-toolbar-group,.icon-toolbar .top-actions,.icon-toolbar .tempo-metro-card,.icon-toolbar .tempo-section{background:transparent;border:none;border-radius:0;box-shadow:none;height:100%;min-width:0}.icon-toolbar .tempo-layout{padding:0}.icon-toolbar .notation-toggle-btn{background:transparent;border:none;border-radius:0;box-shadow:none}.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:76px}.arp-toolbar-toggle{border-radius:0!important;box-shadow:none!important;flex:1;flex-direction:column;gap:4px;padding:8px 10px;font-size:.72em}.arp-toolbar-toggle svg{width:32px;height:32px;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:320px;-webkit-user-select:none;user-select:none}.music-circle-panel:not(.music-circle-panel--docked){resize:both;overflow:auto;min-height:260px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px)}.music-circle-panel:not(.music-circle-panel--docked) .music-circle-body{flex:1;min-height:0}#circleOfFifthsPanel.music-circle-panel--detached,#chromaticCirclePanel.music-circle-panel--detached{position:static;width:100%;height:100vh;min-width:0;max-width:none;max-height:none;border-radius:0;border:none;box-shadow:none;resize:none;overflow:auto}.music-circle-panel--detached .music-circle-body{flex:1;min-height:0}.music-circle-drag-handle.music-circle-drag-handle--detached{cursor:default}#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{width:100%;height:100%;object-fit:contain;display:block;margin: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;z-index:1}.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}.reorderable-panel--dragging{position:relative;z-index:30;opacity:.85}.chord-tree-panel-header.draggable,.arp-panel-header.draggable,.music-circle-drag-handle.draggable{cursor:grab;touch-action:none}.chord-tree-panel-header.draggable:active,.arp-panel-header.draggable:active,.music-circle-drag-handle.draggable:active{cursor:grabbing}.fretboard-drag-handle-btn{position:absolute;top:10px;right:144px;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:grab;touch-action:none;z-index:10;transition:color .2s,background .2s,border-color .2s}.fretboard-drag-handle-btn:hover{color:var(--amber);background:var(--amber-glow);border-color:#e8922a4d}.fretboard-drag-handle-btn:active{cursor:grabbing}.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}.app-sidebar .tuner-panel{margin: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;max-width:300px;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}.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .tuner-panel{flex:1 1 0;min-width:0}.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .tuner-panel:not(:has(.tuner-body)){align-self:flex-start}.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .tuner-panel .tuner-mini-meter,.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .tuner-panel .song-drag-grip{display:none}.app-sidebar:has(.music-circle-panel--docked[style*=flex]) .tuner-panel .tuner-panel-header{gap:4px;padding-left:8px;padding-right:8px}}@media (min-width: 1600px){.container,.page-logo{max-width:unset}.top-toolbar{gap:16px}.tuning-controls{flex:1 1 0;min-width:0}.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:has(.tuner-panel,.practice-panel):not(.app-sidebar--dragging){max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-width:thin}.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:contents}}.music-circle-body svg{width:100%;height:100%;object-fit:contain;display:block;margin:auto}.music-circle-header-actions{display:flex;align-items:center;gap:2px}.music-circle-dock-btn,.music-circle-settings-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,.music-circle-settings-btn svg{width:13px;height:13px}.music-circle-dock-btn:hover,.music-circle-settings-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:6px 10px;border:2px solid #ddd;border-radius:6px;font-size:14px;background:#fff;transition:border-color .3s}.controls select:focus{outline:none;border-color:#3498db}#saveTuning{background:#3498db;color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:13px;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,.settings-row input[type=number]{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,.settings-row input[type=number]: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;overflow-y:hidden}.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)}@keyframes chord-marker-enter{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.fret-position.chord-marker-enter{animation:chord-marker-enter .28s cubic-bezier(.34,1.56,.64,1)}.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;flex:1;width:100%;align-items:center;justify-content:center;gap:6px;padding:6px}.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:34px;background:#4a90e226;flex-shrink:0}.tempo-bpm-input{width:52px;padding:3px 4px;text-align:center;font-size:1rem;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}#rhythmPanel:focus{outline:none}.tempo-metro-card{display:flex;flex-direction:column;align-items:stretch;align-self:stretch;width:100%;border-radius:12px;overflow:hidden;min-width:76px}.tempo-metro-toggle{border-radius:0!important;box-shadow:none!important;flex:1;flex-direction:column;gap:4px;padding:8px 10px;font-family:var(--font-cond);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.tempo-metro-toggle svg{width:32px;height:32px;flex-shrink:0}.tempo-metro-toggle.enabled{border-color:#4a90e28c;color:#2980b9;background:#4a90e21a}.tempo-metro-toggle.active{background:#3498db38;color:#1a6fa8;animation:metro-pulse var(--metro-beat-dur, .5s) ease-in-out infinite}.tempo-metro-toggle.groove-standby{outline:1px dashed currentColor;outline-offset:2px}@keyframes metro-pulse{0%,to{box-shadow:0 0 #3498db8c}50%{box-shadow:0 0 0 8px #3498db00}}.metro-mini-controls .metro-mini-play{flex:0 0 auto;min-width:20px}.metro-mini-controls .metro-mini-play.playing{color:#1a6fa8;background:#3498db2e}.metro-mini-controls .metro-mini-play.groove-standby{outline:1px dashed currentColor;outline-offset:-2px}.metro-mini-controls .metro-mini-bpm,.metro-mini-controls .metro-mini-timesig input,.metro-mini-controls .metro-mini-timesig select{font:inherit;font-size:.64em;font-weight:600;line-height:1;color:inherit;background:transparent;border:none;padding:3px 0;margin:0;text-align:center;min-width:0;-moz-appearance:textfield;-webkit-appearance:none;appearance:none}.metro-mini-controls .metro-mini-bpm{flex:1 1 0;width:0;border-right:1px solid rgba(0,0,0,.08)}.metro-mini-controls .metro-mini-bpm:focus,.metro-mini-controls .metro-mini-timesig input:focus,.metro-mini-controls .metro-mini-timesig select:focus{outline:1px solid #3498db;outline-offset:-1px}.metro-mini-controls .metro-mini-timesig{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-width:0;font-size:.64em;font-weight:600}.metro-mini-controls .metro-mini-timesig input{width:2ch;font-size:1em}.metro-mini-controls .metro-mini-timesig select{width:2.4ch;font-size:1em;cursor:pointer}.metro-mini-controls .metro-mini-timesig input::-webkit-inner-spin-button,.metro-mini-controls .metro-mini-timesig input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo-metro-toggle[aria-expanded=true]:not(.active){background:#eaf2fb;color:#1a6fa8}.tempo-bpm-group,.tempo-bpm-sep,.tempo-timesig-group,.tempo-timesig-sep{display:none}.tempo-timesig-frac{display:flex;flex-direction:column;align-items:center;gap:2.5px}.tempo-timesig-sel{width:40px;padding:2px;text-align:center;font-size:.85rem;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:34px;height:2px;background:#5a6f87;border-radius:1px}@media (min-width: 821px){.icon-toolbar .tempo-group{background:transparent;box-shadow:none}.icon-toolbar .tempo-group-label{display:none}.icon-toolbar .tempo-bpm-input{width:34px;padding:2px;font-size:.8rem}.icon-toolbar .tempo-sep{height:24px}}@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: 1300px){.top-toolbar{flex-direction:column;gap:8px}.tuning-controls{display:grid;grid-template-columns:1fr 1fr}.controls-tuning{grid-column:1 / -1}}@media (max-width: 1095px){.top-toolbar{flex-direction:column;gap:8px}.controls,.tuning-controls{gap:8px}.scales-section{margin-top:8px}.icon-toolbar .music-circle-panel-btn{padding-left:4px;padding-right:4px}.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: 820px){.icon-toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.icon-toolbar>*{border-right:none;box-shadow:1px 0 0 var(--border, #1e2840),0 1px 0 var(--border, #1e2840)}.icon-toolbar>.listen-toolbar{align-self:stretch}.icon-toolbar .music-circle-panel-btn{justify-content:flex-start}}@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 .diatonic-run-section,.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}#tunerPanelToggleBtn:hover svg,#toggleChordTree:hover svg,#standardsPanelToggleBtn:hover svg,#practicePanelToggleBtn:hover svg,#accountMenuBtn:hover svg{animation:chord-dot-glow 1.2s ease-in-out infinite}.progression-icon-trace{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px rgba(52,152,219,.8))}@keyframes progression-trace-draw{0%{stroke-dashoffset:1;opacity:1}70%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:0;opacity:0}}#toggleChordTree:hover .progression-icon-trace-1{animation:progression-trace-draw 1.2s ease-out 0s infinite}#toggleChordTree:hover .progression-icon-trace-2{animation:progression-trace-draw 1.2s ease-out .15s infinite}#toggleChordTree:hover .progression-icon-trace-3{animation:progression-trace-draw 1.2s ease-out .3s infinite}@keyframes tuner-needle-swing{0%,to{transform:rotate(0)}50%{transform:rotate(34deg)}}.tuner-icon-needle{transform-box:fill-box;transform-origin:100% 100%}#tunerPanelToggleBtn:hover .tuner-icon-needle{animation:tuner-needle-swing 1.2s ease-in-out infinite}@keyframes song-whole-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}#songPanelToggleBtn:hover svg{animation:song-whole-bounce .5s ease-in-out infinite,chord-dot-glow 1.2s ease-in-out infinite}@keyframes practice-bullseye-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}.practice-icon-bullseye{transform-box:fill-box;transform-origin:50% 50%}#practicePanelToggleBtn:hover .practice-icon-bullseye{animation:practice-bullseye-pulse .6s ease-in-out infinite}.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:16px;height:16px;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-info-add-progression-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-add-progression-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}.bag-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}#chordBagToggleBtn .bag-svg{width:38px;height:32px;display:block;overflow:visible}.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}.music-circle-panel-btn{min-height:40px;padding:6px 8px;gap:3px;font-size:10px}.music-circle-panel-btn svg{width:24px}.icon-toolbar{grid-template-columns:repeat(5,minmax(0,1fr))}.icon-toolbar .music-circle-panel-btn{letter-spacing:.02em}.icon-toolbar .music-circle-panel-btn>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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}.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}}@media (max-width: 470px){.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:4px;flex-direction:column;gap:3px;align-items:center;width:100%}.preset-trigger{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#fff;border:2px solid #ddd;border-radius:6px;font-size:14px;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;--purple: #9b6bdb;--teal: #2dbfa7;--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)}.metro-mini-controls .metro-mini-bpm,.metro-mini-controls .metro-mini-timesig{color:var(--text-2)}.metro-mini-controls .metro-mini-bpm{border-right-color:var(--border)}.metro-mini-controls .metro-mini-timesig select option{background:var(--panel);color:var(--text-1)}.metro-mini-controls .metro-mini-play.playing{color:var(--blue);background:#3a8fd42e}.tempo-metro-toggle[aria-expanded=true]:not(.active){background:#3a8fd426;color:var(--blue)}.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: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-row input[type=number],.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-row input[type=number]: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)}.tuner-settings-slider-row{display:flex;flex-direction:column;gap:4px;margin-top:10px}.tuner-settings-slider-row:first-child{margin-top:0}.tuner-settings-slider-row label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-family:var(--font-cond)}.tuner-settings-slider-wrap{display:flex;align-items:center;gap:8px}.tuner-settings-slider-wrap input[type=range]{flex:1;accent-color:var(--blue)}.tuner-settings-slider-wrap span{width:48px;text-align:right;font-size:.8rem;color:var(--text-2);font-variant-numeric:tabular-nums;font-family:var(--font-mono);flex-shrink:0}.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:4px;width:100%;height:100%;min-height:56px;padding:8px;border-radius:12px;font-family:var(--font-cond);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.music-circle-panel-btn svg{width:32px;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}@media (max-width: 564px){.fretboard-controls-bar{height:auto;min-height:44px;flex-wrap:wrap;padding:6px 8px;gap:8px 6px}.fcb-left,.fcb-right{min-width:0}.fcb-center{flex:0 0 auto;margin-left:auto}.fretboard-controls-bar .fret-range-controls label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.fretboard-controls-bar .fret-range-inputs{gap:4px}.fretboard-controls-bar .fret-range-controls input[type=number]{width:34px;padding:4px 2px;font-size:13px}.fretboard-controls-bar .fret-action-buttons button{padding:5px 10px;font-size:12px}.fretboard-controls-bar .toggle-switch.fretboard-label-3way{width:auto}.fretboard-controls-bar .toggle-label.toggle-label-3way{width:120px;min-width:0}.fretboard-controls-bar .toggle-text.toggle-text-3way{min-width:0;font-size:11px;line-height:28px}}.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-add-progression-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,background .15s}.chord-info-add-progression-btn:hover{border-color:var(--blue);color:var(--blue);background:#3a8fd41f}.chord-info-add-progression-btn.added{border-color:var(--blue);color:#fff;background:var(--blue)}.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}.fretboard-float-btn{position:absolute;top:10px;right:100px;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-float-btn svg{width:16px;height:16px}.fretboard-float-btn:hover{color:var(--amber);background:var(--amber-glow);border-color:#e8922a4d}.fretboard-rotate-wrap.fretboard-detached{position:static;width:100%;height:100vh;max-width:none;max-height:none;border-radius:0;border:none;box-shadow:none;display:flex;flex-direction:column}.fretboard-rotate-wrap.fretboard-detached .fretboard-container{resize:none;min-width:0;min-height:0;max-width:none;max-height:none;flex:1;margin:0}.fretboard-rotate-wrap.fretboard-floating{position:fixed;top:80px;left:80px;width:auto;z-index:8000;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);background:var(--bg);border-radius:12px;border:1.5px solid var(--border-2);box-shadow:0 12px 40px #000000b3,0 2px 8px #0000004d;display:flex;flex-direction:column;overflow:visible}.fretboard-float-handle{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--panel-2);border-bottom:1px solid var(--border);border-radius:10px 10px 0 0;cursor:move;font-family:var(--font-cond);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--text-2);-webkit-user-select:none;user-select:none}.fretboard-float-dock-btn{background:none;border:none;color:var(--text-3);padding:2px 4px;cursor:pointer;border-radius:4px;display:inline-flex;align-items:center;line-height:1;transition:color .15s,background .15s}.fretboard-float-dock-btn svg{width:13px;height:13px}.fretboard-float-dock-btn:hover{color:var(--text-1);background:#ffffff0f}.fretboard-rotate-wrap.fretboard-floating .fretboard-settings-cog,.fretboard-rotate-wrap.fretboard-floating .fretboard-expand-btn{top:48px}.fretboard-rotate-wrap.fretboard-floating .fretboard-container{resize:both;overflow:auto;min-width:380px;min-height:200px;max-width:calc(100vw - 64px);max-height:calc(100vh - 160px);margin:0}@media (max-width: 480px){.fretboard-rotate-wrap.fretboard-floating{left:8px;top:60px}.fretboard-rotate-wrap.fretboard-floating .fretboard-container{min-width:0}}@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}}#chordType option.chord-quality-non-diatonic{color:#7c8698}.chord-quality-scale-only{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none}.chord-quality-scale-only input{margin:0;cursor:pointer}.lock-toggle,.lock-toggle-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border-radius:6px;background:var(--panel-2, #161c28);border:1px solid var(--border, #1e2840);cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0;transition:background .15s,border-color .15s}.lock-toggle:hover,.lock-toggle-btn:hover{border-color:var(--border-2, #243354)}.lock-toggle input[type=checkbox]{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}.lock-icon{width:14px;height:14px;overflow:visible}.lock-icon-shackle{stroke:#c8d2ffa6;stroke-width:1.4;stroke-linecap:round;transition:stroke .15s}.lock-icon-body{fill:var(--bg, #0a0c11);stroke:#c8d2ffa6;stroke-width:1.2;transition:fill .15s,stroke .15s}.lock-icon-keyhole{fill:var(--bg, #0a0c11);opacity:0;transition:opacity .15s}.lock-toggle:has(input:checked),.lock-toggle-btn.active{background:#3a8fd426;border-color:var(--blue, #3a8fd4)}.lock-toggle input:checked~.lock-icon .lock-icon-shackle,.lock-toggle-btn.active .lock-icon-shackle{stroke:var(--blue, #3a8fd4)}.lock-toggle input:checked~.lock-icon .lock-icon-body,.lock-toggle-btn.active .lock-icon-body{fill:var(--blue, #3a8fd4);stroke:var(--blue, #3a8fd4)}.lock-toggle input:checked~.lock-icon .lock-icon-keyhole,.lock-toggle-btn.active .lock-icon-keyhole{opacity:1}.chord-info-diatonic{display:none}.chord-info-panel--diatonic-run .chord-info-diatonic{display:block}.chord-info-panel--diatonic-run .chord-info-grid,.chord-info-panel--diatonic-run .chord-info-detected,.chord-info-panel--diatonic-run .chord-info-fit,.chord-info-panel--diatonic-run .chord-info-desc,.chord-info-panel--diatonic-run .chord-info-scales,.chord-info-panel--diatonic-run .chord-info-next,.chord-info-panel--diatonic-run #chordInfoReplaceBtn{display:none!important}.chord-info-diatonic-list{display:flex;flex-wrap:wrap;gap:6px}.chord-info-diatonic-row{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;row-gap:2px;flex:1 1 auto;padding:6px 9px;border-radius:6px;border:1px solid var(--border, #c8d4f0);cursor:pointer;color:var(--text-2, #5a6a85);transition:background .12s,border-color .12s,color .12s}.chord-info-diatonic-row:hover{background:var(--border, rgba(52, 152, 219, .08));color:var(--text-1, #1a56db)}.chord-info-diatonic-row:focus-visible{outline:2px solid var(--amber, #e8922a);outline-offset:1px}.chord-info-diatonic-row[aria-selected=true]{background:var(--amber-glow, rgba(232, 146, 42, .18));border-color:var(--amber, #e8922a);color:var(--text-1, #1a2540)}.chord-info-diatonic-chip{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px #00000040}.chord-info-diatonic-roman{font-size:.72rem;font-weight:700;font-style:italic;color:#7a5fb5}.chord-info-diatonic-name{grid-column:1 / -1;font-size:.78rem;font-weight:600;white-space:nowrap}.chord-info-diatonic-notes{grid-column:1 / -1;font-size:.68rem;letter-spacing:.04em;white-space:nowrap;color:var(--text-3, #8a98b0)}.chord-info-diatonic-row[aria-selected=true] .chord-info-diatonic-notes{color:var(--text-2, #5a6a85)}.chord-info-diatonic-hint{margin-top:6px;font-size:.64rem;color:var(--text-3, #8a98b0)}.fret-position.diatonic-run-dim,.string-note-label.diatonic-run-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}.shell-button.derived-readout{cursor:default}.shell-button.derived-readout:hover{background:var(--panel-2);border-color:var(--border);color:var(--text-2)}.shell-button.derived-readout:not(.derived-on){background:var(--panel-2);border-color:var(--border);color:var(--text-2);opacity:.6}.shell-button.derived-readout.derived-on,.shell-button.derived-readout.derived-on:hover{background:#3a8fd426;border-color:var(--blue);color:var(--blue);opacity:.85}.chord-tree-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;width:100%;margin:12px 0}.chord-tree-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-family:var(--font-cond);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--text-1)}.chord-tree-panel-title{display:flex;align-items:baseline;gap:8px;min-width:0;overflow:hidden}.chord-tree-panel-standard-name{font-weight:500;font-size:12px;letter-spacing:0;text-transform:none;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.chord-tree-panel-header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.chord-tree-panel-minimize,.chord-tree-panel-close,.song-minimize,.song-close,.song-fretboard-toggle{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-size:13px;line-height:1;cursor:pointer}.chord-tree-panel-minimize:hover,.song-minimize:hover,.song-fretboard-toggle:hover{border-color:var(--blue);color:var(--blue)}.chord-tree-panel-close:hover,.song-close:hover{border-color:var(--red);color:var(--red)}.chord-tree-panel-body{padding:10px 14px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}.chord-tree-graph-node{position:absolute;transform:translateY(-50%);display:flex;align-items:center;gap:4px;width:160px;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:3px 5px}.chord-tree-graph-node{border-left:3px solid var(--node-root-color, var(--border));background:color-mix(in srgb,var(--node-root-color, var(--panel-2)) 14%,var(--panel-2))}.chord-tree-graph-node.dragging{opacity:.4;border-color:var(--blue)}.chord-tree-graph-node--cat-secondary-dominant{border-color:var(--purple);background:#9b6bdb1f}.chord-tree-graph-node--cat-secondary-dominant .chord-tree-graph-node-roman{color:var(--purple)}.chord-tree-graph-node--cat-tritone-sub{border-color:var(--red);background:#e74c3c1f}.chord-tree-graph-node--cat-tritone-sub .chord-tree-graph-node-roman{color:var(--red)}.chord-tree-graph-node--cat-borrowed{border-color:var(--teal);background:#2dbfa71f}.chord-tree-graph-node--cat-borrowed .chord-tree-graph-node-roman{color:var(--teal)}.chord-tree-graph-node-handle{display:flex;align-items:center;gap:4px;flex:1;min-width:0;cursor:grab;touch-action:none}.chord-tree-graph-node-handle:active{cursor:grabbing}.chord-tree-graph-node-toggle{width:16px;height:16px;flex:none;background:var(--panel);border:1px solid var(--border);border-radius:3px;color:var(--text-2);font-size:11px;line-height:1;cursor:pointer}.chord-tree-graph-node-roman{flex:none;font-family:var(--font-mono);color:var(--amber);font-size:12px}.chord-tree-graph-node-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--text-1)}.chord-tree-graph-node-add{width:16px;height:16px;flex:none;background:none;border:1px solid var(--border);border-radius:3px;color:var(--text-2);font-size:11px;line-height:1;cursor:pointer}.chord-tree-graph-node-add:hover{border-color:var(--blue);color:var(--blue)}.chord-tree-graph-node--compact{transform:translate(-50%);width:60px;justify-content:center;padding:3px 4px;gap:0}.chord-tree-graph-node--compact .chord-tree-graph-node-handle{justify-content:center;cursor:pointer}.chord-tree-graph-node--compact .chord-tree-graph-node-roman{font-size:12px}.chord-tree-graph-node-add--compact{position:absolute;top:-6px;right:-6px;width:14px;height:14px;border-radius:50%;background:var(--panel);font-size:9px;line-height:1}.chord-tree-graph-node--square-lg{width:190px;border-width:2px;font-weight:700}.chord-tree-graph-node--circle-sm{width:74px;border-radius:50%;justify-content:center;padding:6px 4px}.chord-tree-graph-node--circle-sm .chord-tree-graph-node-name{display:none}.chord-tree-graph-node--octagon{width:120px;clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%)}.chord-tree-edge--very-strong{stroke:var(--amber);stroke-width:2.4;opacity:.75}.chord-tree-edge--strong{stroke:var(--blue);stroke-width:2;opacity:.65}.chord-tree-edge--moderate{stroke:var(--purple);stroke-width:1.5;opacity:.55}.chord-tree-edge--weak{stroke:var(--text-2);stroke-width:1;opacity:.4}.chord-tree-map-arrowhead{fill:var(--text-2)}.chord-tree-map-arrowhead--very-strong{fill:var(--amber)}.chord-tree-map-arrowhead--strong{fill:var(--blue)}.chord-tree-map-arrowhead--moderate{fill:var(--purple)}.chord-tree-map-arrowhead--weak{fill:var(--text-2)}.chord-tree-graph-node--lit{border-color:var(--amber);box-shadow:0 0 10px 2px var(--amber-glow)}.chord-tree-edge--lit{stroke:var(--amber);opacity:.9;filter:drop-shadow(0 0 4px var(--amber))}.chord-tree-graph-node--current{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 45%,transparent),0 0 12px 2px var(--blue);z-index:2}.chord-tree-edge-travel{fill:none;stroke:var(--blue);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px var(--blue));animation:chord-tree-travel-draw .5s ease-out forwards}@keyframes chord-tree-travel-draw{0%{stroke-dashoffset:1;opacity:1}80%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:0;opacity:0}}.chord-tree-graph--rekeyed{animation:chord-tree-rekey-pulse .65s ease-out}@keyframes chord-tree-rekey-pulse{0%{filter:none}30%{filter:drop-shadow(0 0 10px var(--amber))}to{filter:none}}.chord-tree-graph--rekeyed .chord-tree-graph-node{animation:chord-tree-rekey-label-crossfade .5s ease-out}@keyframes chord-tree-rekey-label-crossfade{0%{filter:opacity(.25)}to{filter:opacity(1)}}.chord-tree-graph--rekeyed .chord-tree-graph-node{transition:left .5s ease-out,top .5s ease-out}.chord-tree-graph--map{position:relative}.chord-tree-graph-map-wrap--vertical{position:relative;overflow:hidden}.chord-tree-graph-map-wrap--vertical .chord-tree-graph--map{transform:scale(.38);transform-origin:top left}.chord-tree-graph-node--offmap{border-style:dashed;opacity:.85}.progression-explore-view{width:100%}.progression-explore-toolbar{display:flex;gap:6px;padding-top:4px;padding-right:80px}.chord-tree-graph-map-wrap:has(.chord-tree-modulation-badge) .progression-explore-toolbar{padding-top:30px}.progression-explore-toolbar button{background:var(--panel-2);border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-family:var(--font-mono);font-size:12px;padding:3px 8px;cursor:pointer}.progression-explore-toolbar button[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:#3a8fd41f}.progression-explore-hover{align-self:center;margin-left:6px;min-width:0;font-family:var(--font-mono);font-size:12px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progression-explore-note{font-family:var(--font-mono);font-size:12px;color:var(--text-2);margin:6px 0}.progression-explore-torus{position:relative;width:100%;height:400px}.progression-explore-torus canvas{display:block}.progression-explore-grid{display:block;width:100%;max-width:420px;height:auto;margin:6px auto 0}.progression-explore-grid .explore-node{cursor:pointer}.progression-explore-grid .explore-node circle{fill:var(--panel-2);stroke:var(--border-2);stroke-width:1.5}.progression-explore-grid .explore-node text{fill:var(--text-1);font-family:var(--font-mono);pointer-events:none}.progression-explore-grid .explore-node.is-home circle{stroke:var(--amber);stroke-width:2.5}.progression-explore-grid .explore-node.is-highlight circle{fill:#3a8fd44d;stroke:var(--blue)}.progression-explore-grid .explore-node.is-path circle{fill:var(--amber-glow);stroke:var(--amber);stroke-width:2.5}.progression-explore-grid .is-wrap{color:var(--text-2)}.progression-explore-grid>text{fill:var(--text-2);font-family:var(--font-mono)}.chord-tree-graph-map-wrap{position:relative}.chord-tree-map3d-toggle{position:absolute;top:4px;right:4px;z-index:200;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-family:var(--font-mono);font-size:12px;padding:3px 8px;cursor:pointer}.chord-tree-map3d-toggle[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:#3a8fd41f}.chord-tree-modulation-badge{position:absolute;top:4px;left:4px;z-index:200;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-family:var(--font-mono);font-size:11px;padding:3px 8px}.chord-tree-graph-map-wrap:not(.chord-tree-graph-map-wrap--vertical) .chord-tree-graph--map{margin:0 auto}.chord-tree-graph--map3d{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.chord-tree-graph--map3d:active{cursor:grabbing}.chord-tree-graph--map3d .chord-tree-graph-node{width:124px;transform:translate(-50%,-50%) scale(var(--map3d-scale, 1));cursor:default}.chord-tree-graph--map3d .chord-tree-popover-anchor,.chord-tree-graph--map3d .chord-tree-reveal-menu-anchor{z-index:100}.chord-tree-map3d-ring polyline{fill:none;stroke:var(--text-2);stroke-dasharray:3 5;opacity:.35}.chord-tree-map3d-ring text{fill:var(--text-2);font-family:var(--font-ui);font-size:11px;opacity:.8;dominant-baseline:middle}.chord-tree-edge--dashed{stroke-dasharray:4 4;opacity:.5}.chord-tree-graph--torus{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;margin:0 auto;width:100%;height:720px}.chord-tree-graph--torus.chord-tree-graph--torus-popout{position:fixed;top:0;right:0;bottom:0;left:0;width:auto;height:auto;margin:0}.chord-tree-graph--torus:active{cursor:grabbing}.chord-tree-torus-major-ring{fill:none;stroke:var(--text-2);stroke-dasharray:3 5;opacity:.35}.chord-tree-torus-key-fill{stroke:none;pointer-events:none}.chord-tree-torus-mesh{fill:none;stroke:#f2f2f2;stroke-width:.8px;stroke-opacity:.3;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}.chord-tree-torus-key-ring{fill:none;stroke-width:1px;stroke-opacity:.6;filter:drop-shadow(0 0 2px currentColor);pointer-events:none}.chord-tree-torus-slice .chord-tree-torus-node--lit .chord-tree-torus-node-body{fill:var(--text-2);stroke:var(--text-1);stroke-width:2px}.chord-tree-torus-slice .chord-tree-torus-node-ring{fill:none;stroke:var(--text-1);stroke-width:3px;pointer-events:none}.chord-tree-torus-label--lit{font-size:14px;font-weight:700}.chord-tree-torus-progression-path{stroke:var(--text-1);stroke-width:2.5px;stroke-linecap:round;opacity:1;pointer-events:none}.chord-tree-torus-progression-path--current{stroke-width:4px}.chord-tree-torus-option-link{stroke:var(--text-1);stroke-width:1.5px;stroke-dasharray:4 3;stroke-linecap:round;opacity:.85;pointer-events:none}.chord-tree-torus-slice .chord-tree-torus-option-ring{fill:none;stroke:var(--text-1);stroke-width:1.5px;stroke-dasharray:3 3;pointer-events:none}.chord-tree-torus-node--option .chord-tree-torus-node-body{stroke:var(--text-1);stroke-width:1.5px}.chord-tree-torus-slice .chord-tree-torus-picked-ring{fill:none;stroke:var(--blue);stroke-width:2px;pointer-events:none}.chord-tree-torus-slice circle{fill:var(--panel-2);stroke:var(--border)}.chord-tree-torus-slice--center circle{stroke:var(--blue)}.chord-tree-torus-slice--real-active circle{stroke:var(--blue);stroke-width:2px}.chord-tree-torus-labels text{fill:var(--text-1);stroke:#000000d9;stroke-width:3px;stroke-linejoin:round;paint-order:stroke;font-family:var(--font-mono);font-size:12px;text-anchor:middle;pointer-events:none}.chord-tree-torus-pivot-link{stroke:var(--text-2);opacity:.4;pointer-events:none}.chord-tree-torus-return{position:absolute;top:4px;left:4px;z-index:200;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-family:var(--font-mono);font-size:11px;padding:3px 8px;cursor:pointer}.chord-tree-torus-toolbar{position:absolute;top:4px;right:4px;z-index:200;display:flex;gap:6px}.chord-tree-graph--torus:not(.chord-tree-graph--torus-popout)>.chord-tree-torus-toolbar{top:36px}.chord-tree-torus-popped-strip{display:flex;align-items:center;gap:10px;padding:6px 8px;font-family:var(--font-mono);font-size:12px;color:var(--text-2)}.chord-tree-torus-popped-dock{display:inline-flex;align-items:center;gap:4px;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-family:var(--font-mono);font-size:11px;padding:3px 8px;cursor:pointer}.chord-tree-torus-popped-dock svg{width:12px;height:12px}.chord-tree-torus-svg{display:block;width:100%;height:100%}.chord-tree-torus-toolbar svg{width:12px;height:12px}.chord-tree-torus-toolbar button{background:var(--panel-2);border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-family:var(--font-mono);font-size:11px;padding:3px 8px;cursor:pointer}.chord-tree-torus-cog{position:relative;display:inline-flex}.chord-tree-torus-cog-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:210;display:flex;flex-direction:column;gap:8px;min-width:170px;padding:8px 10px;background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 20px #0006;font-family:var(--font-mono);font-size:11px;color:var(--text-2);cursor:default}.chord-tree-torus-cog-pop label{display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}.chord-tree-torus-cog-colours{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;border:0}.chord-tree-torus-cog-colours legend{padding:0;margin-bottom:2px}.chord-tree-graph--torus-off:not(.chord-tree-graph--torus-popout){height:72px;cursor:default}.chord-tree-popover-anchor{position:absolute;z-index:2}.chord-tree-popover-anchor--below{transform:none;width:100%}.chord-tree-reveal-menu-anchor{position:absolute;z-index:5}.chord-tree-reveal-menu{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px;box-shadow:0 4px 20px #0006;min-width:140px}.chord-tree-reveal-menu-item{background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:4px 10px;color:var(--text-1);font-family:var(--font-mono);font-size:12px;text-align:left;cursor:pointer}.chord-tree-reveal-menu-item:hover{border-color:var(--blue);color:var(--blue)}.chord-tree-reveal-menu-empty{color:var(--text-2);font-size:11px;font-style:italic;padding:4px 6px}.chord-tree-popover{background:var(--panel-2);border:1px solid var(--border-2);border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:8px;width:220px;box-shadow:0 8px 24px #0006}.chord-tree-popover-title{font-family:var(--font-cond);font-weight:700;font-size:13px;color:var(--text-1)}.chord-tree-popover-options{display:flex;flex-wrap:wrap;gap:4px}.chord-tree-popover-chip{background:var(--panel);border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-size:11px;padding:3px 7px;cursor:pointer}.chord-tree-popover-chip.active{border-color:var(--blue);color:var(--blue);background:#3a8fd41f}.chord-tree-popover-actions{display:flex;justify-content:flex-end;gap:6px}.chord-tree-popover-cancel,.chord-tree-popover-confirm{border-radius:4px;font-size:12px;padding:4px 10px;cursor:pointer}.chord-tree-popover-cancel{background:none;border:1px solid var(--border);color:var(--text-2)}.chord-tree-popover-confirm{background:var(--blue);border:1px solid var(--blue);color:#fff}.chord-tree-modulation-popover-options{display:flex;flex-direction:column;gap:6px}.chord-tree-modulation-popover-option{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:6px 10px;color:var(--text-1);font-family:var(--font-mono);font-size:13px;cursor:pointer;text-align:left}.chord-tree-modulation-popover-option:hover{border-color:var(--blue)}.chord-tree-modulation-popover-detail{font-size:11px;color:var(--text-2)}.chord-tree-song-matches{border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:6px}.chord-tree-song-matches-title{font-family:var(--font-cond);font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--text-2);text-transform:uppercase}.chord-tree-song-matches-loading{font-size:12px;color:var(--text-2)}.chord-tree-song-match-pattern{font-family:var(--font-mono);font-size:12px;color:var(--amber)}.chord-tree-song-match-pills{display:flex;flex-wrap:wrap;gap:6px}.chord-tree-song-match-pill{display:flex;align-items:center;gap:5px;padding:3px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:14px;font-family:var(--font-mono);font-size:11px;color:var(--text-2);cursor:pointer}.chord-tree-song-match-pill:hover{border-color:var(--amber);color:var(--text-1)}.chord-tree-song-match-pill.active{border-color:var(--amber);color:var(--amber);background:var(--amber-glow)}.chord-tree-song-match-pill-count{font-family:var(--font-ui);font-size:10px;opacity:.7}.chord-tree-song-match-entry{display:flex;gap:8px;font-size:12px;color:var(--text-1);padding:2px 0 2px 8px}.chord-tree-song-artist,.chord-tree-song-genre{color:var(--text-2)}.chord-tree-song-match-load-btn{background:none;border:none;padding:0;font:inherit;cursor:pointer;text-align:left;font-size:11px;color:var(--text-2);opacity:.8}.chord-tree-song-match-load-btn:hover{color:var(--blue);opacity:1}.chord-tree-song-match-load-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.chord-tree-toolbar{position:relative;border-top:1px solid var(--border);padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.chord-tree-toolbar-popover-anchor{position:absolute;left:0;bottom:100%;margin-bottom:8px;z-index:2}.chord-tree-toolbar-popover-anchor--below{bottom:auto;top:100%;margin-bottom:0;margin-top:8px}.chord-tree-toolbar-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;border-radius:6px;transition:background-color .12s ease,box-shadow .12s ease}.chord-tree-toolbar-chips.drop-active{background:#3a8fd41f;box-shadow:0 0 0 2px var(--blue) inset}.chord-tree-toolbar-chips--strip{flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;padding-top:8px;margin-top:-8px;padding-bottom:6px}.chord-tree-toolbar--minimized{flex-wrap:nowrap}.chord-tree-minimized-nav{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-size:15px;line-height:1;cursor:pointer}.chord-tree-minimized-nav:hover{border-color:var(--blue);color:var(--blue)}.chord-tree-chip-wrap{position:relative}.chord-tree-chip{background:var(--panel-2);border:1px solid var(--border);border-radius:5px;padding:5px 9px;display:flex;gap:6px;font-size:12px;cursor:grab;touch-action:none;flex-shrink:0}.chord-tree-chip{border-left:3px solid var(--chip-root-color, var(--border));background:color-mix(in srgb,var(--chip-root-color, var(--panel-2)) 16%,var(--panel-2))}.chord-tree-chip.active{border-color:var(--blue);border-left-color:var(--chip-root-color, var(--blue));background:color-mix(in srgb,var(--chip-root-color, var(--blue)) 28%,rgba(58,143,212,.15))}.chord-tree-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.chord-tree-chip.has-voicing{position:relative}.chord-tree-chip.has-voicing:after{content:"";position:absolute;top:-3px;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--amber)}.apply-voicing-btn{border-color:var(--amber);color:var(--amber)}.apply-voicing-btn:hover{background:#d9a44126}.chord-tree-drag-preview{cursor:grabbing;box-shadow:0 8px 20px #00000073;border-color:var(--blue)}.chord-tree-chip-roman{color:var(--amber);font-family:var(--font-mono);white-space:nowrap}.chord-tree-chip-roman--pivot{color:var(--amber)}.chord-tree-chip-name{color:var(--text-1);white-space:nowrap}.chord-tree-chip-remove{position:absolute;top:-6px;right:-6px;width:16px;height:16px;line-height:1;background:var(--red);border:none;border-radius:50%;color:#fff;font-size:10px;cursor:pointer;z-index:1}.chord-tree-chip[data-live-status],.chord-tree-graph-node[data-live-status]{animation:chord-tree-live-pulse 1s ease-in-out infinite}.chord-tree-chip[data-live-status=hit],.chord-tree-graph-node[data-live-status=hit]{animation:chord-tree-live-hit .4s ease-out;background:color-mix(in srgb,var(--green) 30%,transparent)}.chord-tree-chip[data-live-status=missed],.chord-tree-graph-node[data-live-status=missed]{animation:chord-tree-live-miss .4s ease-out;background:color-mix(in srgb,var(--amber) 30%,transparent)}@keyframes chord-tree-live-pulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--blue) 60%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 0%,transparent)}}@keyframes chord-tree-live-hit{0%{background:color-mix(in srgb,var(--green) 80%,transparent)}to{background:color-mix(in srgb,var(--green) 30%,transparent)}}@keyframes chord-tree-live-miss{0%{background:color-mix(in srgb,var(--amber) 80%,transparent)}to{background:color-mix(in srgb,var(--amber) 30%,transparent)}}.chord-tree-toolbar-audio-toggle{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:50%;color:var(--text-2);cursor:pointer}.chord-tree-toolbar-audio-toggle:hover{border-color:var(--blue);color:var(--blue)}.chord-tree-toolbar-audio-toggle.active{border-color:var(--blue);background:#3a8fd426;color:var(--blue)}.chord-tree-toolbar-add{background:none;border:1px dashed var(--border-2);border-radius:5px;color:var(--text-2);padding:5px 12px;cursor:pointer}.chord-tree-toolbar-add:hover{border-color:var(--blue);color:var(--blue)}.chord-tree-toolbar-clear{flex:none;background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-size:12px;padding:5px 10px;cursor:pointer}.chord-tree-toolbar-clear:hover{border-color:var(--red);color:var(--red)}.chord-tree-toolbar-playalong{flex:none;background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-size:12px;padding:5px 10px;cursor:pointer}.chord-tree-toolbar-playalong:hover{border-color:var(--blue);color:var(--blue)}.progression-playalong{position:relative;display:inline-flex;align-items:center;gap:4px}.chord-tree-toolbar-playalong-settings{flex:none;background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-2);font-size:12px;padding:5px 8px;cursor:pointer}.progression-playalong-popover{position:absolute;bottom:calc(100% + 6px);right:0;z-index:20;background:var(--panel-2);border:1px solid var(--border-2);border-radius:6px;padding:10px;width:280px;max-height:70vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 16px #00000040}.progression-playalong-popover-tabs{display:flex;gap:4px}.progression-playalong-popover-tabs button{flex:1}.progression-playalong-popover-tabs button.active{border-color:var(--blue);color:var(--blue)}.progression-playalong-settings input[type=number]{width:7ch;min-width:56px}.fret-position.song-active,.string-note-label.song-active{box-shadow:0 0 0 3px var(--song-active, #ffb300),0 0 10px 2px var(--song-active, #ffb300);border-radius:50%;z-index:3}.song-panel{display:flex;flex-direction:column;background:var(--panel);color:var(--text-1);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 20px #0006;font-family:var(--font-ui);font-size:13px;overflow:hidden;outline:none;margin:12px 0}.song-panel:focus-visible{border-color:var(--blue)}.song-panel-header{display:flex;align-items:center;gap:10px;padding:10px 14px;font-family:var(--font-cond);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--text-1)}.song-panel-header.draggable{cursor:grab}.song-panel-title{text-transform:uppercase;font-size:12px;letter-spacing:.08em}.song-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);font-weight:500;font-size:13px;color:var(--text-2)}.song-fretboard-toggle{width:26px}.song-fretboard-toggle[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:#3a8fd41f}.song-panel-header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.song-drag-grip{cursor:grab;color:var(--text-2);letter-spacing:-2px;-webkit-user-select:none;user-select:none}.song-panel-header:not(.draggable) .song-drag-grip{visibility:hidden}.song-panel-body{display:flex;flex-direction:column;gap:12px;padding:12px 14px 14px;border-top:1px solid var(--border)}.song-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.song-compact-row{padding:8px 14px 10px;border-top:1px solid var(--border);gap:8px}.song-field{display:inline-flex;align-items:center;gap:6px}.song-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}.song-readout{font-family:var(--font-mono);font-size:12px;color:var(--text-1)}.song-panel select{background:var(--panel-2);border:2px solid var(--border);border-radius:6px;color:var(--text-1);font-family:var(--font-ui);font-size:13px;padding:4px 8px}.song-panel select:focus{border-color:var(--blue);outline:none}.song-btn{min-width:30px;height:28px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;color:var(--text-1);font-size:13px;line-height:1;cursor:pointer;transition:border-color .15s,color .15s,background .15s}.song-btn:hover{border-color:var(--blue);color:var(--blue)}.song-btn-sm{min-width:22px;height:22px;padding:0 4px;font-size:12px}.song-btn.song-play{min-width:44px;background:#27ae60;border-color:#27ae60;color:#fff}.song-btn.song-play:hover{background:#219a52;border-color:#219a52;color:#fff}.song-btn.song-play.playing{background:transparent;border-color:var(--red);color:var(--red)}.song-btn.song-play.playing:hover{background:#e74c3c26}.song-pill{padding:4px 12px;background:transparent;border:1.5px solid var(--amber);border-radius:20px;color:var(--amber);font-family:var(--font-cond);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap}.song-pill:hover{background:var(--amber-glow)}.song-panel-header .song-pill{padding:2px 10px;font-size:11px}.song-bar-label{min-width:64px}.song-row input[type=range]{flex:1;min-width:120px}.song-loop{display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin-left:6px}.song-loop input{accent-color:var(--amber)}.song-chord{margin-left:auto;font-family:var(--font-cond);font-weight:700;font-size:16px;color:var(--amber);letter-spacing:.02em}.song-key-label{color:var(--text-2);font-family:var(--font-cond);font-size:12px}.song-error{color:var(--red);padding:0 14px 10px}.song-refinger-note{font-size:12px;color:var(--text-2)}.song-send-prompt{color:var(--text-2)}.song-tab-toggle{align-self:flex-start;background:none;border:none;padding:0;cursor:pointer}.song-tab-toggle:hover{color:var(--text-1)}.song-tab-strip{display:block;min-width:100%;box-sizing:border-box;color:var(--text-2);background:var(--panel-2);border:1px solid var(--border);border-radius:6px}.song-tab-line{stroke:currentColor;stroke-opacity:.45;stroke-width:1}.song-tab-barline{stroke:currentColor;stroke-opacity:.8;stroke-width:1.5}.song-tab-fret{font:600 13px var(--font-mono);fill:var(--text-1);paint-order:stroke;stroke:var(--panel-2);stroke-width:3px}.song-tab-hit{fill:transparent;cursor:pointer}.song-tab-event.current .song-tab-hit{fill:var(--amber);fill-opacity:.22}.song-tab-event.current .song-tab-fret{fill:var(--amber)}.song-tab-fret.dead{fill:var(--red);font-weight:700}.song-notation-wrapper{display:flex;flex-direction:column;gap:6px;width:100%;overflow-x:auto}.song-staff-strip{display:block;min-width:100%;box-sizing:border-box;color:var(--text-2);background:var(--panel-2);border:1px solid var(--border);border-radius:6px}.song-staff-line{stroke:currentColor;stroke-opacity:.45;stroke-width:1}.song-staff-barline{stroke:currentColor;stroke-opacity:.8;stroke-width:1.5}.song-staff-ledger{stroke:currentColor;stroke-opacity:.6;stroke-width:1}.song-staff-clef{font-size:40px;fill:var(--text-1);dominant-baseline:middle}.song-staff-accidental{font-size:15px;fill:var(--text-1)}.song-staff-notehead{fill:var(--text-1);stroke:none}.song-staff-notehead[data-duration=whole],.song-staff-notehead[data-duration=half]{fill:none;stroke:var(--text-1);stroke-width:1.3}.song-staff-dot{fill:var(--text-1)}.song-staff-stem,.song-staff-beam{stroke:var(--text-1);stroke-width:1.5}.song-staff-beam{stroke-width:3}.song-staff-flag{stroke:var(--text-1);stroke-width:1.5}.song-staff-tie{stroke:var(--text-1);stroke-width:1.2}.song-staff-rest{fill:var(--text-1);fill-opacity:.85;stroke:var(--text-1);stroke-width:1.2}.song-staff-chuck{font:700 13px var(--font-mono);fill:var(--red)}#fretboard.song-mode .fret-position.marked:not(.selected){background:transparent!important;box-shadow:none!important;border-color:transparent!important}#fretboard.song-mode .fret-position.marked:not(.selected)>:not(.song-dot):not(.listen-dot):not(.listen-ghost){visibility:hidden}#fretboard.song-mode .fret-position.marked:not(.selected):before{visibility:hidden}#fretboard.song-mode .string-note-label.marked:not(.selected):not(.song-active) .sn-face{background:transparent!important;color:transparent;box-shadow:none!important}.song-dot{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;box-sizing:border-box;border-radius:50%;border:2px solid transparent;display:flex;align-items:center;justify-content:center;font:600 10px/1 system-ui,sans-serif;pointer-events:none;z-index:7;visibility:visible}.string-note-label>.song-dot{inset:auto;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%)}.song-dot-active{box-shadow:0 0 10px 2px #ffffff59}.song-dot.out-of-key{border-style:dashed}.song-dot-dead{background-color:transparent;border-color:var(--red);box-shadow:0 0 10px 3px #e74c3c8c;color:var(--red);font-weight:700}.listen-dot,.listen-ghost{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;box-sizing:border-box;border-radius:50%;border:2px solid transparent;pointer-events:none;z-index:8;visibility:visible}.listen-dot{display:flex;align-items:center;justify-content:center;font:700 10px/1 system-ui,sans-serif;box-shadow:0 0 12px 3px #ffffff73;animation:listen-pop .12s ease-out}.listen-ghost{background:transparent;border-style:dotted;opacity:.45}.listen-chord-dot{box-shadow:0 0 8px 2px #ffffff59}.listen-guess{top:-6px;right:-6px;bottom:-6px;left:-6px}.string-note-label>.listen-guess{width:38px;height:38px}.string-note-label>.listen-dot,.string-note-label>.listen-ghost{inset:auto;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%)}.listen-fading{animation:listen-fade .3s ease-in forwards}@keyframes listen-pop{0%{transform:scale(.6);opacity:.4}to{transform:scale(1);opacity:1}}.string-note-label>.listen-dot{animation:none}.string-note-label>.listen-dot.listen-fading{animation:listen-fade .3s ease-in forwards}@keyframes listen-fade{to{opacity:0}}@media (prefers-reduced-motion: reduce){.listen-dot,.listen-fading,.string-note-label>.listen-dot.listen-fading{animation:none}}.listen-toolbar{position:relative;display:inline-flex;align-self:flex-start}.listen-toolbar-btn{position:relative}@keyframes listen-pulse{50%{opacity:.35}}.listen-readout-strip{position:fixed;transform:translate(-50%);overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:8px 10px;z-index:9999;background:var(--panel);color:var(--text-1);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 16px #0000004d;font-family:var(--font-ui);font-size:13px;white-space:nowrap}.listen-settings-overlay{position:fixed;transform:translate(-50%);z-index:9999}.listen-settings-panel{min-width:320px;max-width:420px;max-height:82vh}.listen-settings-panel:focus{outline:none}.listen-settings-panel .settings-modal-body{padding:14px 18px;gap:14px;max-height:calc(82vh - 56px);overflow-y:auto}.listen-toggle{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text-1);font:600 12px var(--font-ui);cursor:pointer}.listen-toggle:disabled,.listen-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.listen-toggle .listen-toggle-dot,.listen-toolbar-btn .listen-toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--text-2)}.listen-toggle.live .listen-toggle-dot,.listen-toolbar-btn.live .listen-toggle-dot{background:var(--red);animation:listen-pulse 1.2s ease-in-out infinite}.listen-toolbar-btn .listen-toggle-dot{position:absolute;top:6px;right:10px;width:7px;height:7px}.listen-field{display:inline-flex;align-items:center;gap:8px;color:var(--text-2)}.listen-field select{background:var(--panel-2);color:var(--text-1);border:1px solid var(--border);border-radius:4px;padding:3px 6px;max-width:260px}.listen-readout{display:flex;align-items:center;gap:14px}.listen-note{font:700 20px/1 var(--font-cond);min-width:3ch}.listen-note.held{opacity:.45}.listen-mode{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}.listen-mode-btn{padding:4px 10px;border:0;background:var(--panel-2);color:var(--text-2);font:600 12px var(--font-ui);cursor:pointer}.listen-mode-btn+.listen-mode-btn{border-left:1px solid var(--border)}.listen-mode-btn.active{background:var(--blue);color:#fff}.listen-chord-name{font:700 20px/1 var(--font-cond);min-width:3ch}.listen-chord-name.held{opacity:.45}.listen-chord-alt{color:var(--text-2);font-size:12px}.listen-toggles{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.listen-toggle-group{display:inline-flex;align-items:center;gap:6px;color:var(--text-2)}.listen-take-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}.listen-take-row input{flex:1 1 160px;min-width:120px;background:var(--panel-2);color:var(--text-1);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font:inherit}.listen-take-row input:disabled{opacity:.6}.listen-take-timer{color:var(--red);font-variant-numeric:tabular-nums;font-weight:600}.train-hint-ring{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;box-sizing:border-box;border-radius:50%;border:3px solid var(--amber, #f5a524);background:#f5a52424;box-shadow:0 0 10px 2px #f5a5248c;pointer-events:none;z-index:9;visibility:visible}.string-note-label>.train-hint-ring{inset:auto;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%)}#fretboard.song-mode .fret-position.marked:not(.selected)>.train-hint-ring{visibility:visible}.train-hint-ring.train-hint-ghost{border-style:dashed;border-width:2px;background:transparent;box-shadow:none;opacity:.6}.train-hint-ring.train-hint-pickable{pointer-events:auto;cursor:pointer}.train-hint-ring.train-hint-pickable:hover{opacity:1;box-shadow:0 0 10px 2px #f5a5248c}.train-panel{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2)}.train-title{font:700 14px var(--font-cond)}.train-taglist{color:var(--text-2);font-weight:400}.train-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}.train-tags{display:flex;flex-wrap:wrap;gap:6px}.train-tag{border:1px solid var(--border);border-radius:12px}.train-panel .listen-field input{background:var(--panel);color:var(--text-1);border:1px solid var(--border);border-radius:4px;padding:4px 8px;font:inherit;min-width:220px}.train-prompt{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:6px;background:var(--panel);border:1px solid var(--border)}.train-prompt-name{font:700 18px var(--font-cond)}.train-check{font-size:12px;padding:6px 8px;border-radius:4px;border:1px solid var(--border)}.train-check.ok{border-color:var(--green, #3c3)}.train-check.bad{border-color:var(--red);color:var(--red)}.train-warn{font-size:12px;padding:6px 8px;border-radius:4px;border:1px solid var(--amber, #c90);color:var(--amber, #c90)}.train-message{padding:0}.train-saved{display:flex;flex-direction:column;gap:6px}.train-saved-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}.train-saved-name{flex:1 1 200px}.train-plan{list-style:none;margin:0;padding:0;max-height:180px;overflow-y:auto;border:1px solid var(--border);border-radius:4px}.train-plan-item.current{background:var(--panel);outline:1px solid var(--blue)}.train-plan-item.recorded{color:var(--text-2)}.train-plan-btn{width:100%;text-align:left;background:none;border:0;color:inherit;font:12px var(--font-ui);padding:3px 8px;cursor:pointer}.train-plan-btn:disabled{cursor:not-allowed;opacity:.6}.listen-cents-text{min-width:5ch;color:var(--text-2);font-variant-numeric:tabular-nums}.listen-level{position:relative;display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden}.listen-level-fill{position:absolute;inset:0 auto 0 0;background:var(--green, #3c3);transition:width 60ms linear}.listen-recent{display:flex;gap:6px;flex-wrap:wrap;min-height:22px}.listen-chip{padding:2px 8px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border);font-size:12px}.listen-hint{color:var(--text-2);font-size:12px}.listen-message{padding:0 14px 10px;color:var(--red);font-size:12px}.tuner-panel{--tuner-accent: var(--text-2);display:flex;flex-direction:column;background:var(--panel);color:var(--text-1);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 20px #0006;font-family:var(--font-ui);font-size:13px;overflow:hidden;margin:12px 0;transition:border-color .22s ease,box-shadow .32s ease}.tuner-panel[data-tune=flat]{--tuner-accent: var(--tuner-flat, var(--amber))}.tuner-panel[data-tune=sharp]{--tuner-accent: var(--tuner-sharp, var(--amber))}.tuner-panel[data-tune=in-tune]{--tuner-accent: var(--tuner-in, var(--green))}.tuner-panel.tuner-in-tune:not(.tuner-held){border-color:var(--tuner-in, var(--green));box-shadow:0 0 0 1px color-mix(in srgb,var(--tuner-in, #22c55e) 35%,transparent),0 0 26px 2px color-mix(in srgb,var(--tuner-in, #22c55e) 32%,transparent),0 4px 20px #0006}.tuner-panel-header{display:flex;align-items:center;gap:10px;padding:10px 14px;font-family:var(--font-cond);font-weight:700;font-size:14px}.tuner-panel-header.draggable{cursor:grab}.tuner-panel-header:not(.draggable) .song-drag-grip{visibility:hidden}.tuner-panel-header .tuner-note{font-size:16px;min-width:3ch}.tuner-panel-header .tuner-cents{min-width:5ch;font-weight:400}.tuner-mini-meter{position:relative;width:90px;height:8px;border-radius:4px;background:var(--panel-2)}.tuner-mini-center{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--text-2)}.tuner-mini-needle{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;border-radius:2px;background:var(--tuner-accent);transition:left 90ms linear}.tuner-body{display:flex;flex-direction:column;gap:12px;padding:0 14px 14px}.tuner-readout{display:flex;align-items:baseline;justify-content:center;gap:16px}.tuner-dial{position:relative;width:min(100%,max(260px,calc(100vh - 210px)));aspect-ratio:1;margin:0 auto;container-type:inline-size}.tuner-dial canvas{display:block;width:100%;height:100%}.tuner-dial .tuner-readout{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:27%;height:27%;flex-direction:column;align-items:center;justify-content:center;gap:0;pointer-events:none}.tuner-dial .tuner-note{font-size:clamp(22px,8.5cqw,72px);min-width:0}.tuner-dial .tuner-readout-side{align-items:center;min-width:0;gap:0}.tuner-dial .tuner-cents{font-size:clamp(12px,4.6cqw,28px)}.tuner-dial .tuner-hz{font-size:clamp(9px,3.4cqw,18px)}.tuner-panel--detached .tuner-dial{width:min(100%,max(120px,calc(100vh - 210px)))}.tuner-dial[data-view=spectrum],.tuner-panel--detached .tuner-dial[data-view=spectrum]{width:100%;max-width:max(260px,calc(100vh - 210px))}.tuner-dial[data-view=waterfall],.tuner-panel--detached .tuner-dial[data-view=waterfall]{width:100%;aspect-ratio:3 / 1;max-height:calc(100vh - 210px)}.tuner-dial[data-readout=strip]{aspect-ratio:2 / 1}.tuner-dial[data-readout=strip] .tuner-readout{inset:6px 10px auto 10px;margin:0;width:auto;height:auto;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px}.tuner-dial[data-readout=strip] .tuner-readout-side{flex-direction:row;align-items:baseline;gap:8px}.tuner-dial[data-readout=strip] .tuner-note{min-width:3.5ch;font-size:clamp(18px,4.5cqw,40px)}.tuner-dial[data-readout=strip] .tuner-cents{min-width:4.5ch;font-size:clamp(12px,3cqw,24px)}.tuner-dial[data-readout=strip] .tuner-hz{font-size:clamp(10px,2.4cqw,18px)}.tuner-dial[data-readout=strip] .tuner-readout{text-shadow:0 0 3px #000,0 0 6px #000}.tuner-panel--detached .tuner-dial[data-readout=strip]{width:min(100%,max(240px,calc((100vh - 210px)*2)))}.tuner-dial[data-view=analyzer]{width:min(100%,max(260px,calc((100vh - 210px)*2)))}.tuner-dial[data-readout=strip-bottom] .tuner-readout{inset:auto 10px 6px 10px;margin:0;width:auto;height:auto;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px}.tuner-dial[data-readout=strip-bottom] .tuner-readout-side{flex-direction:row;align-items:baseline;gap:8px}.tuner-dial[data-readout=strip-bottom] .tuner-note{min-width:3.5ch;font-size:clamp(18px,4.5cqw,40px)}.tuner-dial[data-readout=strip-bottom] .tuner-cents{min-width:4.5ch;font-size:clamp(12px,3cqw,24px)}.tuner-dial[data-readout=strip-bottom] .tuner-hz{font-size:clamp(10px,2.4cqw,18px)}.tuner-dial[data-readout=strip-bottom] .tuner-readout{text-shadow:0 0 3px #000,0 0 6px #000}.tuner-dial[data-readout=corner-bl] .tuner-readout{inset:auto auto 10px 10px;margin:0;width:auto;height:auto;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px}.tuner-dial[data-readout=corner-bl] .tuner-readout-side{align-items:flex-start;min-width:0;gap:0}.tuner-dial[data-readout=corner-bl] .tuner-note{font-size:clamp(18px,7cqw,48px);min-width:0}.tuner-dial[data-readout=corner-bl] .tuner-cents{font-size:clamp(11px,3.4cqw,20px)}.tuner-dial[data-readout=corner-bl] .tuner-hz{font-size:clamp(9px,2.6cqw,14px)}.tuner-dial[data-readout=corner-bl] .tuner-readout{text-shadow:0 0 3px #000,0 0 6px #000}.tuner-note{font:700 40px/1 var(--font-cond);letter-spacing:.02em;color:var(--text-1);transition:color .2s ease,text-shadow .26s ease}.tuner-panel.tuner-in-tune:not(.tuner-held) .tuner-note{color:var(--tuner-in, var(--green));text-shadow:0 0 18px color-mix(in srgb,var(--tuner-in, #22c55e) 75%,transparent)}.tuner-panel.tuner-held .tuner-note{opacity:.45}.tuner-readout-side{display:flex;flex-direction:column;gap:2px;min-width:7ch}.tuner-cents{color:var(--tuner-accent);font:600 18px var(--font-cond);font-variant-numeric:tabular-nums;transition:color .2s ease}.tuner-hz{color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}.tuner-gauge{position:relative;height:30px;margin:0 14px 18px;border-radius:8px;background:var(--panel-2);border:1px solid var(--border)}.tuner-gauge-zone{position:absolute;top:0;bottom:0;left:45%;width:10%;background:linear-gradient(to bottom,color-mix(in srgb,var(--tuner-in, #22c55e) 22%,transparent),color-mix(in srgb,var(--tuner-in, #22c55e) 6%,transparent));border-left:1px solid color-mix(in srgb,var(--tuner-in, #22c55e) 35%,transparent);border-right:1px solid color-mix(in srgb,var(--tuner-in, #22c55e) 35%,transparent);transition:background .26s ease}.tuner-gauge[data-tune=in-tune] .tuner-gauge-zone{background:linear-gradient(to bottom,color-mix(in srgb,var(--tuner-in, #22c55e) 50%,transparent),color-mix(in srgb,var(--tuner-in, #22c55e) 16%,transparent))}.tuner-tick{position:absolute;bottom:0;height:24%;width:1px;margin-left:-.5px;background:var(--text-2);opacity:.55}.tuner-tick-major{height:38%;opacity:.8}.tuner-tick-zero{height:100%;width:2px;margin-left:-1px;background:var(--tuner-in, var(--green));opacity:.6}.tuner-tick-label{position:absolute;top:100%;margin-top:3px;transform:translate(-50%);font-size:10px;color:var(--text-2);font-variant-numeric:tabular-nums}.tuner-gauge-flat,.tuner-gauge-sharp{position:absolute;top:4px;font:700 15px var(--font-cond);color:var(--text-2);opacity:.7}.tuner-gauge-flat{left:8px}.tuner-gauge-sharp{right:8px}.tuner-needle{position:absolute;top:-5px;bottom:-5px;width:4px;margin-left:-2px;border-radius:3px;background:var(--tuner-accent);box-shadow:0 0 8px 1px var(--tuner-accent);transition:left 90ms linear,background .2s ease,box-shadow .2s ease}.tuner-gauge[data-tune=in-tune] .tuner-needle{box-shadow:0 0 14px 3px var(--tuner-in, var(--green))}.tuner-panel.tuner-held .tuner-needle{opacity:.35;box-shadow:none}.tuner-body--split{flex-direction:row;align-items:stretch;justify-content:center;flex:1 1 auto;min-height:0}.tuner-body--split .tuner-dial{margin:0;flex:0 1 auto;min-width:0}.tuner-body--split .tuner-dial[data-view=waterfall]{aspect-ratio:auto;height:100%;max-height:none}.tuner-body--split .tuner-dial[data-view=ripple]{width:100%;aspect-ratio:auto;height:100%;max-height:none}.tuner-body--split .tuner-strings{display:none}.tuner-gauge--vertical{position:relative;width:30px;height:auto;flex:0 0 30px;margin:0;border-radius:8px;background:var(--panel-2);border:1px solid var(--border)}.tuner-gauge--vertical .tuner-gauge-zone{top:45%;left:0;right:0;bottom:auto;height:10%;width:auto;background:linear-gradient(to right,color-mix(in srgb,var(--tuner-in, #22c55e) 22%,transparent),color-mix(in srgb,var(--tuner-in, #22c55e) 6%,transparent));border-left:none;border-right:none;border-top:1px solid color-mix(in srgb,var(--tuner-in, #22c55e) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--tuner-in, #22c55e) 35%,transparent)}.tuner-gauge--vertical[data-tune=in-tune] .tuner-gauge-zone{background:linear-gradient(to right,color-mix(in srgb,var(--tuner-in, #22c55e) 50%,transparent),color-mix(in srgb,var(--tuner-in, #22c55e) 16%,transparent))}.tuner-gauge--vertical .tuner-tick{left:0;bottom:auto;width:24%;height:1px;margin-left:0;margin-top:-.5px}.tuner-gauge--vertical .tuner-tick-major{width:38%}.tuner-gauge--vertical .tuner-tick-zero{width:100%;height:2px;margin-top:-1px}.tuner-gauge--vertical .tuner-tick-label{top:auto;left:100%;margin-top:0;margin-left:3px;transform:translateY(-50%)}.tuner-gauge--vertical .tuner-gauge-flat,.tuner-gauge--vertical .tuner-gauge-sharp{top:auto;left:50%;transform:translate(-50%)}.tuner-gauge--vertical .tuner-gauge-sharp{top:6px}.tuner-gauge--vertical .tuner-gauge-flat{bottom:6px;right:auto}.tuner-gauge--vertical .tuner-needle{top:-5px;bottom:-5px;left:-5px;right:-5px;width:auto;height:4px;margin-left:0;margin-top:-2px;transition:top 90ms linear,background .2s ease,box-shadow .2s ease}.tuner-strings{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px}.tuner-string{display:inline-flex;flex-direction:column;align-items:center;min-width:46px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--text-2);font:600 12px var(--font-ui);transition:border-color .2s ease,color .2s ease,box-shadow .26s ease,background .2s ease}.tuner-string-off{font-size:10px;font-variant-numeric:tabular-nums}.tuner-string.active{color:var(--text-1);border-color:var(--tuner-accent)}.tuner-string.active[data-tune=in-tune]{color:var(--tuner-in, var(--green));border-color:var(--tuner-in, var(--green));background:color-mix(in srgb,var(--tuner-in, #22c55e) 12%,transparent);box-shadow:0 0 12px 1px color-mix(in srgb,var(--tuner-in, #22c55e) 50%,transparent)}.tuner-panel.tuner-held .tuner-string.active{box-shadow:none;opacity:.6}.tuner-message{color:var(--red);font-size:12px}@media (prefers-reduced-motion: reduce){.tuner-panel,.tuner-note,.tuner-needle,.tuner-mini-needle,.tuner-string,.tuner-gauge-zone{transition:none}}.tuner-header-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--text-2);cursor:pointer;flex:none}.tuner-header-btn:hover,.tuner-header-btn[aria-expanded=true]{color:var(--text-1);border-color:var(--border-2)}.tuner-header-btn svg{width:14px;height:14px}.tuner-header-btn[aria-pressed=true]{color:var(--blue);border-color:var(--blue)}.tuner-settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;justify-content:center;align-items:center;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.tuner-settings-panel{min-width:300px;max-width:380px}.tuner-settings-panel:focus{outline:none}.tuner-settings-panel .settings-modal-body{padding:14px 18px;gap:14px}.tuner-settings-swatches,.tuner-settings-choices{display:flex;flex-wrap:wrap;gap:8px}.tuner-settings-swatch{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;border:2px solid transparent;cursor:pointer;color:#fff;font-weight:700;text-shadow:0 0 3px #000}.tuner-settings-swatch:hover{border-color:#7a90a0}.tuner-settings-swatch[aria-checked=true]{border-color:#2c3e50}.tuner-settings-swatch[aria-checked=true]:after{content:"✓"}.tuner-settings-swatch[data-tooltip]:hover:before,.tuner-settings-swatch[data-tooltip]:focus-visible:before{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#2c3e50;color:#fff;font:600 11px var(--font-ui, sans-serif);white-space:nowrap;padding:4px 8px;border-radius:5px;box-shadow:0 2px 8px #00000040;pointer-events:none;z-index:10}.tuner-settings-choice{padding:7px 14px;border:1.5px solid #e0e4e8;border-radius:7px;background:#f7f9fc;color:#333;font-size:.9rem;font-weight:600;cursor:pointer}.tuner-settings-choice:hover{border-color:#3498db}.tuner-settings-choice[aria-checked=true]{border-color:#3498db;background:#eaf4fd;color:#1b6ca8}.tuner-popped-strip{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:12px 0;background:var(--panel);color:var(--text-2);border:1px solid var(--border);border-radius:8px;font-family:var(--font-ui);font-size:13px}.tuner-popped-strip .tuner-popped-note{flex:1}.app-sidebar .tuner-popped-strip{margin:0}.tuner-panel--detached{margin:0;border-radius:0;border:none;box-shadow:none;position:fixed;top:0;right:0;bottom:0;left:0;width:100dvw;height:100dvh;overflow:hidden}.tuner-panel--detached .tuner-body{flex:1 1 auto;min-height:0;overflow:auto}.rhythm-panel--detached{margin:0;border-radius:0;border:none;box-shadow:none;min-height:100vh}.tuner-panel.tuner-panel--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;border-radius:0;display:flex!important;flex-direction:column!important;overflow:hidden}.tuner-panel.tuner-panel--fullscreen .tuner-body{flex:1 1 auto;min-height:0;overflow:auto}.song-key-label{opacity:.8}.song-refinger-note{font-size:12px;opacity:.8}.practice-panel{--practice-accent: var(--text-2);display:flex;flex-direction:column;background:var(--panel);color:var(--text-1);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 20px #0006;font-family:var(--font-ui);font-size:13px;overflow:hidden;margin:12px 0;transition:border-color .22s ease,box-shadow .32s ease}.practice-panel[data-feedback=hit]{--practice-accent: var(--green);border-color:var(--green)}.practice-panel[data-feedback=miss]{--practice-accent: var(--amber)}.practice-panel-header{display:flex;align-items:center;gap:10px;padding:10px 14px;font-family:var(--font-cond);font-weight:700;font-size:14px}.practice-panel-header.draggable{cursor:grab}.practice-panel-header:not(.draggable) .song-drag-grip{visibility:hidden}.practice-mini-prompt{font-size:16px}.practice-body{display:flex;flex-direction:column;gap:10px;padding:0 14px 14px}.practice-setup,.practice-drill,.practice-summary{display:flex;flex-direction:column;gap:10px}.practice-field{display:flex;align-items:center;gap:8px;color:var(--text-2)}.practice-field select,.practice-field input{background:var(--panel-2);color:var(--text-1);border:1px solid var(--border);border-radius:4px;padding:3px 6px}.practice-field input[type=number]{width:4.5ch}.practice-actions{display:flex;gap:8px;flex-wrap:wrap}.practice-actions .listen-mode-btn{border:1px solid var(--border);border-radius:4px}.practice-actions .listen-mode-btn:disabled{opacity:.45;cursor:not-allowed}.collections-list,.collection-editor{display:flex;flex-direction:column;gap:8px}.collection-row{display:flex;gap:6px;align-items:center}.collection-row .collection-open-btn{flex:1;text-align:left}.collection-count{opacity:.6;margin-left:6px}.collection-editor-head{display:flex;gap:6px;align-items:center}.collection-editor-head input,.collection-item-name{background:var(--panel-2);color:var(--text-1);border:1px solid var(--border);border-radius:4px;padding:3px 6px}.collection-editor-head input{flex:1;min-width:0}.collections-list .listen-mode-btn,.collection-editor .listen-mode-btn,.collection-editor .listen-toggle,.collection-row .listen-toggle{border:1px solid var(--border);border-radius:4px}.collections-list button:disabled,.collection-editor button:disabled{opacity:.45;cursor:not-allowed}.collection-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.collection-item{display:flex;gap:4px;align-items:center}.collection-item-name{flex:1;min-width:0}.collection-item[data-status]:not([data-status=ok]) .collection-item-name{opacity:.6}.collection-item-badge{font-size:11px;opacity:.8;white-space:nowrap}.collection-add{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);padding-top:8px}.collection-add .practice-field{flex-wrap:wrap}.collection-bag-card{display:flex;gap:6px;align-items:center}.collection-bag-reason{font-size:11px;opacity:.7}.practice-progress{color:var(--text-2);font-size:12px}.practice-prompt{font-family:var(--font-cond);font-weight:700;font-size:34px;line-height:1.1;color:var(--practice-accent);text-align:center;padding:6px 0}.practice-panel[data-feedback=none] .practice-prompt,.practice-panel[data-feedback=skip] .practice-prompt{color:var(--text-1)}.cycle-diagram{display:flex;flex-direction:column;gap:8px}.cycle-header{font:700 14px var(--font-cond);color:var(--text-1)}.cycle-position{font-weight:400;color:var(--text-2)}.cycle-body{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.cycle-triangle{width:150px;height:140px;flex:none}.cycle-corner{font:700 20px var(--font-cond);fill:var(--text-1)}.cycle-arrow line{stroke:var(--practice-accent);stroke-width:2}.cycle-triangle marker path{fill:var(--practice-accent)}.cycle-arrow-label{font:600 11px var(--font-cond);fill:var(--text-2)}.cycle-row{display:flex;gap:4px;overflow-x:auto;max-width:100%;padding-bottom:4px}.cycle-col{display:flex;flex-direction:column;align-items:center;min-width:40px;padding:4px 2px;border-radius:4px}.cycle-col.current{background:var(--panel-2);outline:1px solid var(--practice-accent)}.cycle-chord{font:700 14px var(--font-cond);line-height:19px;color:var(--text-1);white-space:nowrap}.cycle-chord.current{color:var(--practice-accent)}.cycle-voice{font:500 12px var(--font-cond);color:var(--text-2);line-height:1.3}.cycle-rater{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.cycle-rater-label{color:var(--text-2);font-size:12px}.cycle-col:not(.current) .cycle-chord{color:var(--text-2)}.practice-panel[data-feedback=none] .cycle-chord.current,.practice-panel[data-feedback=skip] .cycle-chord.current{color:var(--text-1)}.cycle-steps{display:flex;flex-direction:column;align-items:center;padding:4px 0;min-width:14px}.cycle-steps:before{content:"";display:block;height:19px}.cycle-step{font:600 12px var(--font-cond);line-height:1.3;color:var(--text-2)}.cycle-step[data-dir=same]{color:var(--text-3, var(--text-2));opacity:.6}.cycle-pos{font:500 10px var(--font-cond);color:var(--text-2)}.practice-cycle-setup{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 12px;align-items:end}.practice-cycle-setup .practice-field{flex-direction:column;align-items:stretch;gap:3px;font-size:12px;min-width:0}.practice-cycle-setup .practice-field select,.practice-cycle-setup .practice-field input[type=number]{width:100%;min-width:0}.practice-cycle-setup .practice-field-wide{grid-column:1 / -1}.practice-cycle-setup .practice-field-wide select{max-width:444px}.practice-cycle-setup .practice-field-check{flex-direction:row;align-items:center;grid-column:1 / -1}.practice-cycle-setup>.tuner-message{grid-column:1 / -1}.practice-feedback{min-height:1.4em;text-align:center;color:var(--practice-accent)}.practice-summary-line{font-family:var(--font-cond);font-weight:700;font-size:15px}.practice-delta,.practice-trouble{color:var(--text-2);font-size:12px}.practice-history{display:flex;flex-direction:column;gap:8px}.practice-history-title{display:flex;align-items:center;gap:12px;margin:6px 0 0;font-family:var(--font-cond);font-size:13px;color:var(--text-2)}.practice-history-table{width:100%;border-collapse:collapse;font-size:12px}.practice-history-table th{text-align:left;color:var(--text-2);font-weight:400;padding:2px 6px}.practice-history-table td{padding:3px 6px;border-top:1px solid var(--border)}.practice-history-sessions{list-style:none;margin:0;padding:0;font-size:12px;color:var(--text-2);display:flex;flex-direction:column;gap:4px}.practice-sparkline{color:var(--blue);flex:none}.playalong-layers{display:flex;gap:12px;flex-wrap:wrap}.playalong-headphones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.playalong-strip{display:flex;gap:6px;flex-wrap:wrap}.playalong-chip{padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--panel-2);font-family:var(--font-cond);font-weight:700;color:var(--text-2);transition:background .12s,border-color .12s,color .12s}.playalong-chip[data-status=hit]{background:#22c55e2e;border-color:var(--green);color:var(--text-1)}.playalong-chip[data-status=missed]{background:#f59e0b2e;border-color:var(--amber);color:var(--text-1)}.playalong-chip[data-status=idle]{opacity:.5}.playalong-chip[data-status=unjudged]{opacity:.4;border-style:dashed}#progressionPlayAlongCoverage[data-ok=false]{color:var(--amber)}.playalong-chip[data-current=true]{box-shadow:0 0 0 2px var(--blue);color:var(--text-1)}.playalong-beats{display:flex;justify-content:center;gap:8px}.playalong-dot{width:10px;height:10px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border)}.playalong-dot.on{background:var(--blue);border-color:var(--blue)}.progression-playalong-running,.progression-playalong-summary{position:absolute;bottom:calc(100% + 6px);right:0;z-index:15;background:var(--panel-2);border:1px solid var(--border-2);border-radius:6px;padding:10px;width:280px;max-height:70vh;overflow-y:auto;box-shadow:0 4px 16px #00000040}.account-menu{position:relative;flex-shrink:0}.account-menu-btn{position:relative;cursor:pointer;white-space:nowrap}.account-menu-dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--amber);border:2px solid var(--panel)}.account-menu-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:2000;width:300px;max-width:calc(100vw - 24px);padding:14px;background:var(--panel);color:var(--text-1);border:1px solid var(--border-2);border-radius:10px;box-shadow:0 12px 32px #00000073;font:13px/1.4 var(--font-ui)}.account-menu-section{display:flex;flex-direction:column;gap:10px}.account-menu-lead,.account-menu-who,.account-menu-status,.account-menu-notice,.account-menu-banner p{margin:0}.account-menu-who{font-weight:600;word-break:break-all}.account-menu-status,.account-menu-notice{color:var(--text-2);font-size:12px}.account-menu-email{display:flex;flex-direction:column;gap:8px}.account-menu-email input{padding:8px 10px;border-radius:6px;border:1px solid var(--border-2);background:var(--bg);color:var(--text-1);font:inherit}.account-menu-action{padding:8px 10px;border-radius:6px;border:1px solid var(--border-2);background:var(--panel-2);color:var(--text-1);font:600 13px var(--font-ui);cursor:pointer}.account-menu-action:hover:not(:disabled){border-color:var(--amber)}.account-menu-action:disabled{opacity:.5;cursor:default}.account-menu-danger{border-color:var(--red);color:var(--red)}.account-menu-link{align-self:flex-start;padding:0;border:0;background:none;color:var(--text-2);font:12px var(--font-ui);text-decoration:underline;cursor:pointer}.account-menu-banner{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--amber);border-radius:8px;background:var(--amber-glow)}.account-profile{padding-top:4px;border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2);padding-bottom:10px;gap:6px}.account-profile-label{margin:4px 0 0;color:var(--text-2);font-size:12px;font-weight:600}.account-profile input,.account-profile textarea{padding:8px 10px;border-radius:6px;border:1px solid var(--border-2);background:var(--bg);color:var(--text-1);font:inherit;resize:vertical}.account-avatar-picker{display:flex;gap:6px}.account-avatar-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:6px;border-radius:6px;border:1px solid var(--border-2);background:var(--panel-2);color:var(--text-2);cursor:pointer}.account-avatar-btn:hover{border-color:var(--amber);color:var(--text-1)}.account-avatar-btn[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:var(--amber-glow)}.account-avatar-btn svg{width:18px;height:18px}.account-color-picker{display:flex;flex-wrap:wrap;gap:6px}.account-color-btn{width:22px;height:22px;padding:0;border-radius:50%;border:2px solid transparent;cursor:pointer}.account-color-btn:hover{border-color:var(--text-2)}.account-color-btn[aria-pressed=true]{border-color:var(--text-1);box-shadow:0 0 0 2px var(--blue)}.account-color-btn--default{background:var(--panel-2);border-color:var(--border-2);background-image:linear-gradient(to top right,transparent calc(50% - 1px),var(--red) calc(50% - 1px),var(--red) calc(50% + 1px),transparent calc(50% + 1px))}.progressions-search-section{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--border)}.progressions-search-header{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-cond);font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--text-2);text-transform:uppercase}.progressions-search-toggle{background:none;border:none;color:var(--text-2);cursor:pointer;font-size:12px}.progressions-search-toggle:hover{color:var(--text-1)}.standards-search-input{background:var(--panel-2);border:2px solid var(--border);border-radius:6px;color:var(--text-1);font-family:var(--font-ui);font-size:13px;padding:6px 10px}.standards-search-input:focus{border-color:var(--blue);outline:none}.standards-results-wrap{display:flex;gap:6px}.standards-results{display:flex;flex-direction:column;gap:10px;max-height:220px;overflow-y:auto;flex:1;min-width:0}.standards-group{display:flex;flex-direction:column;gap:2px}.standards-group-header{position:sticky;top:0;z-index:1;background:var(--panel);color:var(--text-2);font-family:var(--font-cond);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:4px 6px 2px}.standards-result{text-align:left;padding:6px 8px;background:var(--panel-2);border:1px solid transparent;border-radius:6px;color:var(--text-1);font-family:var(--font-ui);font-size:13px;cursor:pointer}.standards-result:hover{border-color:var(--border)}.standards-result.active{border-color:var(--blue);color:var(--blue);background:#3a8fd41f}.standards-az-rail{display:flex;flex-direction:column;justify-content:space-between;width:16px;flex-shrink:0;padding:2px 0;cursor:pointer;touch-action:none}.standards-az-letter{background:none;border:none;color:var(--text-2);font-family:var(--font-mono);font-size:9px;font-weight:600;line-height:1;padding:1px 0;cursor:pointer}.standards-az-letter:hover:not(.disabled){color:var(--blue)}.standards-az-letter.disabled{color:var(--border);cursor:default;pointer-events:none}.standards-detail{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--border)}.standards-detail-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-cond);font-weight:700;font-size:14px}.standards-detail-header select{background:var(--panel-2);border:2px solid var(--border);border-radius:6px;color:var(--text-1);font-family:var(--font-ui);font-size:13px;padding:4px 8px}.standards-detail-header button:not(.progressions-search-toggle){margin-left:auto;padding:4px 12px;background:transparent;border:1.5px solid var(--amber);border-radius:20px;color:var(--amber);font-family:var(--font-cond);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap}.standards-detail-header button:not(.progressions-search-toggle):hover{background:var(--amber-glow)}.standards-genre-filter{display:flex;gap:4px;flex-wrap:wrap}.standards-genre-btn{padding:3px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:14px;color:var(--text-2);font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.02em;cursor:pointer}.standards-genre-btn:hover{border-color:var(--blue);color:var(--text-1)}.standards-genre-btn.active{border-color:var(--blue);color:var(--blue);background:#3a8fd41f}.standards-caption{color:var(--text-2);font-size:11px;font-style:italic}.layer-stack-controls{position:absolute;top:10px;right:190px;z-index:10;display:flex;align-items:center;height:38px}.fretboard-rotate-wrap.fretboard-fullscreen .layer-stack-controls{position:absolute;top:10px;right:190px;z-index:8002}.fretboard-rotate-wrap.fretboard-floating .layer-stack-controls{top:48px}.fretboard-view-toggle{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:6px;overflow:hidden}.fretboard-view-toggle button{background:transparent;color:inherit;border:0;padding:4px 12px;cursor:pointer;font-size:13px}.fretboard-view-toggle button.active{background:#5a8cdc59}.layer-stack-view{width:100%;max-width:720px;margin:0 auto}.layer-stack-view[hidden]{display:none}.layer-stack-svg{width:100%;height:auto;touch-action:none;cursor:grab;display:block}.layer-stack-panel{padding:8px 0;font-size:13px}.layer-ring-overlay{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:1}.layer-stack-add{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.layer-stack-add input[type=number]{width:64px}.layer-stack-hint{margin:6px 0;opacity:.75;min-height:1em}.layer-stack-list{list-style:none;padding:0;margin:0}.layer-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0}.layer-label{flex:1 1 140px}.layer-row .layer-amount{width:56px}.layer-swatch{width:12px;height:12px;border-radius:3px;flex:0 0 auto}.layer-row-unavailable .layer-label,.layer-row-unavailable .layer-swatch{opacity:.55}@media (max-width: 480px){.layer-stack-add{gap:4px}.layer-stack-add select,.layer-stack-add button{font-size:12px}}@media (min-width: 565px){.scale-controls{align-items:flex-start;gap:14px}.root-note-section:has(>:not([style*=none])),.root-string-section:has(>:not([style*=none])),.scale-type-section:has(>:not([style*=none])),.chord-controls>.chord-control-pair:has(>:not([style*=none])),.chord-controls>.spread-voicing-section:has(>:not([style*=none])),.chord-controls>.drop-voicing-section:has(>:not([style*=none])),.chord-controls>.shell-voicing-section:has(>:not([style*=none])),.chord-controls>.diatonic-run-section:has(>:not([style*=none])),.chord-controls>.chord-inversion-nav:has(>:not([style*=none])),.chord-controls>.chord-fingering-nav:has(>:not([style*=none])),.chord-controls>.chord-lock-nav:has(>:not([style*=none])),.chord-controls.arpeggio-mode .arp-trigger-row:has(>:not([style*=none])),.chord-controls.arpeggio-mode .arp-omit-row:has(>:not([style*=none])),.chord-controls.arpeggio-mode .arp212-nav:has(>:not([style*=none])){background:var(--panel-2, #161c28);border:1px solid var(--border, #1e2840);border-radius:8px;padding:7px 12px}.chord-controls>.arp-mode-controls{gap:8px}.root-note-section,.root-string-section,.scale-type-section{row-gap:6px}.chord-controls{background:transparent;border-radius:0;padding:0;margin:0;gap:14px;align-items:flex-start}.scale-controls select{min-width:92px}#scaleFamily,#scaleType,#chordType,#chordVoicing{min-width:128px}#rootString{min-width:72px}.shell-voicing-section:before{content:"Shape";display:block;width:100%;font-family:var(--font-cond, "Barlow Condensed", sans-serif);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2, #6e88a8);margin-bottom:4px}}@media (max-width: 564px){.scales-section .scale-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px}.scales-section .scale-controls>*{grid-column:1 / -1;min-width:0}.scales-section .scale-controls label[for=rootNote],.scales-section .scale-controls label[for=rootString],.scales-section .scale-controls label[for=scaleFamily],.scales-section .scale-controls label[for=scaleType],.scales-section .chord-control-pair>label[for],.scales-section .drop-voicing-section>label{font-size:10px;margin:0;white-space:nowrap}.scales-section .scale-controls select{width:100%;min-width:0;max-width:none;margin:0;font-size:14px;padding-top:6px;padding-bottom:6px}.scales-section .root-note-section{grid-column:1;align-self:start;display:flex;flex-direction:column;align-items:stretch;gap:3px}.scales-section .scale-controls:has(>.root-string-section[style*=none]) .root-note-section{grid-column:1 / -1}.scales-section .root-string-section:not([style*=none]){display:grid!important}.scales-section .root-string-section{grid-column:2;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "select lock" "smooth smooth";align-items:center;gap:3px 6px}.scales-section .root-string-section>label[for=rootString]{grid-area:label}.scales-section .root-string-section>#rootString{grid-area:select}.scales-section .root-string-section>.lock-root-string{grid-area:lock;margin:0}.scales-section .root-string-section>.smooth-voice-leading{grid-area:smooth;display:flex;align-items:center;gap:5px;margin:0;font-size:10px;white-space:normal;line-height:1.2}.scales-section .scale-type-section:not([style*=none]){display:grid!important}.scales-section .scale-type-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px 10px;align-items:center}.scales-section .scale-type-section>label[for=scaleFamily]{grid-column:1;grid-row:1}.scales-section .scale-type-section>#scaleFamily{grid-column:1;grid-row:2}.scales-section .scale-type-section>label[for=scaleType]{grid-column:2;grid-row:1}.scales-section .scale-type-section>#scaleType{grid-column:2;grid-row:2}.scales-section .scale-type-section>#pitchClassSelector{grid-column:1 / -1;grid-row:3;margin:4px 0 0}.scales-section .chord-controls{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:8px 10px}.scales-section .chord-control-pair{flex:1 1 calc(50% - 5px);min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 6px}.scales-section .chord-control-pair>label[for]{grid-column:1 / -1}.scales-section .chord-control-pair>select{grid-column:1}.scales-section .chord-control-pair>.lock-toggle-btn{grid-column:2;margin:0}.scales-section .chord-control-pair>.chord-quality-scale-only,.scales-section .chord-control-pair>.detected-chord-badge-label,.scales-section .chord-control-pair>.detected-chord-badge{grid-column:1 / -1;margin:0;font-size:10px}.scales-section .drop-voicing-section,.scales-section .spread-voicing-section{flex:0 0 auto;align-items:center;gap:6px;margin:0}.scales-section .drop-voicing-section select{width:auto}.scales-section .shell-voicing-section,.scales-section .diatonic-run-section{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:6px;margin:0}.scales-section .shell-voicing-section[style*=none],.scales-section .diatonic-run-section[style*=none]{display:none}.scales-section .chord-controls .shell-button{padding:5px 10px;font-size:12px;margin:0}.scales-section .chord-inversion-nav{order:1;flex:1 1 100%;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0}.scales-section .chord-inversion-nav[style*=none]{display:none}.scales-section .chord-inversion-nav .chord-inversion-index{flex:1 1 auto;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scales-section .apply-voicing-btn,.scales-section .chord-fingering-nav,.scales-section .chord-lock-nav,.scales-section .arp-mode-controls{order:2}}.visuals-panel{display:flex;flex-direction:column;gap:8px;background:var(--panel);color:var(--text-1);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 20px #0006;font-family:var(--font-ui);font-size:13px;padding:10px 12px;margin:12px 0;overflow:hidden}.visuals-panel[hidden]{display:none}.visuals-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.visuals-grip{font-size:14px}.visuals-title{margin:0;font-size:14px;font-weight:600}.visuals-views{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}.visuals-body{overflow:auto;min-width:0}.tonnetz-view{display:flex;flex-direction:column;gap:8px}.tonnetz-canvas{width:100%;height:440px;border-radius:6px;overflow:hidden;touch-action:none}.tonnetz-canvas canvas{display:block;width:100%;height:100%}.tonnetz-readout{margin:0;min-height:1.3em;font-size:12px;color:var(--text-2)}.tonnetz-footer{display:flex;align-items:flex-start;gap:12px}.tonnetz-footer .tonnetz-readout{flex:1}.tonnetz-history{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:12px;color:var(--text-2)}.tonnetz-history-btn{padding:2px 8px;border-radius:4px;border:1px solid var(--border, rgba(255,255,255,.15));background:transparent;color:var(--text-1, inherit);font:inherit;cursor:pointer}.tonnetz-history-btn:disabled{opacity:.4;cursor:default}.tonnetz-history-btn.is-active{color:var(--blue, #3a8fd4);border-color:var(--blue, #3a8fd4)}.tonnetz-footer>.tonnetz-history-btn{flex-shrink:0;font-size:12px;color:var(--text-2)}.tonnetz-footer>.tonnetz-history-btn.is-active{color:var(--blue, #3a8fd4)}.tonnetz-history-btn.is-recording{color:var(--red, #ff6b6b);border-color:var(--red, #ff6b6b)}.tonnetz-error{margin:0;color:var(--text-2)}.rhythm-panel{--bg-panel: var(--panel);--bg-panel-raised: var(--panel-2);--bg-recess: var(--bg);--hairline: var(--border);--hairline-strong: var(--border-2);--text-primary: var(--text-1);--text-muted: var(--text-2);--text-faint: color-mix(in srgb, var(--text-2) 70%, transparent);--accent: var(--amber);--accent-dim: var(--amber-glow);--danger: var(--red);--font-display: var(--font-ui);--font-body: var(--font-ui)}.rhythm-panel .rhythm-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.rhythm-timesig-fields{display:inline-flex;align-items:center;gap:4px}.rhythm-panel .rhythm-play-btn{min-width:34px;height:30px;padding:0 10px;font-size:13px;line-height:1}.rhythm-panel .rhythm-play-btn.playing{background:var(--blue);border-color:var(--blue);color:#fff}.rhythm-panel .rhythm-play-btn.groove-standby{outline:1px dashed currentColor;outline-offset:2px}.rhythm-panel .practice-body .rhythm-bpm-input{width:52px;padding:3px 6px;text-align:center}.rhythm-panel .rhythm-volume-slider{width:90px;accent-color:var(--blue);cursor:pointer}.rhythm-panel .practice-body .rhythm-timesig-fields input{width:44px;padding:3px 2px 3px 6px;text-align:center}.rhythm-panel .preset-bar,.rhythm-panel .layer-editor{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}.rhythm-panel .preset-bar,.rhythm-panel .layer-row{background:var(--panel-2);border:1px solid var(--border);border-radius:6px}.rhythm-panel .preset-bar{padding:8px 10px}.rhythm-panel .preset-bar select{min-width:160px}.rhythm-panel .view-toggle{display:inline-flex;align-self:flex-start;border:1px solid var(--border);border-radius:4px;overflow:hidden}.rhythm-panel .practice-body .view-toggle button{border:0;border-radius:0}.rhythm-panel .practice-body .view-toggle button+button{border-left:1px solid var(--border)}.rhythm-panel .practice-body .view-toggle button:disabled{opacity:1;cursor:default;background:var(--blue);color:#fff}.rhythm-panel .layer-legend{display:flex;gap:6px;flex-wrap:wrap}.rhythm-panel .practice-body .layer-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;font-family:var(--font-mono);font-size:11px;font-weight:500;border-radius:999px;border-color:transparent;opacity:.7}.rhythm-panel .practice-body .layer-chip:hover{opacity:1}.rhythm-panel .practice-body .layer-chip-selected{opacity:1;border-color:var(--border-2)}.rhythm-panel .layer-chip-swatch{width:9px;height:9px;border-radius:50%;flex:0 0 auto}.rhythm-panel .layer-editor{flex-direction:column;align-items:stretch;gap:8px}.rhythm-panel .layer-row{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;padding:10px 12px;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}.rhythm-panel .layer-groups{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.rhythm-panel .practice-body .layer-group input{width:52px}.rhythm-panel .layer-sound-overrides{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.rhythm-panel .layer-sound-overrides-label,.rhythm-panel .layer-sound-override-depth{font-size:12px;color:var(--text-2)}.rhythm-panel .layer-sound-override,.rhythm-panel .layer-pattern-controls{display:flex;gap:4px;align-items:center}.rhythm-panel .layer-error{color:var(--danger);margin:0;font-size:12px}.rhythm-panel .layer-time-signature{margin:0;padding:2px 8px;border-radius:4px;background:var(--amber-glow);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);color:var(--amber);font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}.rhythm-panel .layer-bars-strip{width:60px;height:8px;border-radius:4px;overflow:hidden;background:var(--bg);border:1px solid var(--border);align-self:center}.rhythm-panel .layer-bars-strip-fill{height:100%}.rhythm-panel .practice-body .expression-help-toggle{width:20px;height:20px;padding:0;border-radius:50%;line-height:1;font-size:11px;font-weight:700}.rhythm-panel .expression-help{flex-basis:100%;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:12px}.rhythm-panel .expression-help dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}.rhythm-panel .expression-help dt{color:var(--amber);font-family:var(--font-mono);white-space:nowrap}.rhythm-panel .expression-help dd{margin:0;color:var(--text-2)}.rhythm-panel .leaf-split-menu{position:fixed;z-index:20;display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--panel-2);border:1px solid var(--border-2);border-radius:6px;box-shadow:0 8px 24px #00000080}.rhythm-panel .leaf-split-menu-label{font-size:12px;color:var(--text-2)}.rhythm-panel .leaf-split-menu-custom{display:flex;align-items:center;gap:4px}.rhythm-panel .practice-body .leaf-split-menu-custom input{width:48px}.rhythm-panel .radial-view,.rhythm-panel .tree-view{width:100%;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:6px;padding:12px;box-sizing:border-box}.rhythm-panel .radial-view{min-height:340px;overflow:hidden}.rhythm-panel .step-marker{cursor:ns-resize;touch-action:none}.rhythm-panel .radial-view svg{display:block;width:min(92vw,720px);height:auto;max-width:100%;margin:0 auto}.rhythm-panel .tree-view{min-height:240px;overflow-x:auto}.rhythm-panel .tree-view svg{display:block;max-width:100%;height:auto}.rhythm-panel .practice-body button,.rhythm-panel .practice-body input,.rhythm-panel .practice-body select{font-family:var(--font-ui);border-radius:4px;border:1px solid var(--border);background:var(--panel-2);color:var(--text-1)}.rhythm-panel .practice-body button{padding:4px 10px;font-weight:600;font-size:12px;color:var(--text-2);cursor:pointer;transition:border-color .12s ease,color .12s ease,background .12s ease}.rhythm-panel .practice-body button:hover:not(:disabled){border-color:var(--blue);color:var(--text-1)}.rhythm-panel .practice-body button:disabled{cursor:not-allowed;opacity:.45}.rhythm-panel .practice-body button:focus-visible,.rhythm-panel .practice-body input:focus-visible,.rhythm-panel .practice-body select:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px #3a8fd433}.rhythm-panel .practice-body input,.rhythm-panel .practice-body select{padding:3px 6px;font-size:13px}.rhythm-panel .practice-body input:disabled{opacity:.5}.rhythm-panel .practice-body label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}.rhythm-panel .practice-body input[type=checkbox]{width:14px;height:14px;padding:0;accent-color:var(--amber)}.rhythm-panel .practice-body input[type=color]{width:32px;height:24px;padding:2px;background:var(--bg)}.rhythm-panel .practice-body input[type=range]{accent-color:var(--amber);border:none;background:none;padding:0;width:120px;cursor:pointer}