html,body{font-family:Nunito,sans-serif;margin:0;padding:0;width:100%;overflow-x:hidden;background-color:var(--body-bg);color:var(--text-color);line-height:1.6;transition:background-color .3s ease,color .3s ease}input,button,select,textarea{font-family:Nunito,sans-serif}.container{display:flex;max-width:1200px;margin:20px auto 0;background-color:var(--container-bg);box-shadow:0 2px 10px var(--container-shadow);border-radius:8px}.main-content{flex:2;padding:20px;border-right:1px solid var(--border-color)}.sidebar{flex:3;padding:20px}h1,h2,h3{color:var(--heading-color);margin-top:0;margin-bottom:.75em;font-weight:600}h1{font-size:2em;border-bottom:1px solid var(--border-color-lighter);padding-bottom:.3em}h2{font-size:1.6em;border-bottom:1px solid var(--border-color-lighter);padding-bottom:.3em}h3{font-size:1.3em}.project-controls{background-color:var(--interactive-bg);padding:15px;margin-bottom:20px;border-radius:6px;border:1px solid var(--border-color-light)}.project-controls>*{margin-right:5px}@media (max-width: 956px){.container{flex-direction:column;width:100%;margin:0;border-radius:0;box-shadow:none}.main-content,.sidebar{flex:1;border-right:none;padding:15px}.main-content{border-bottom:1px solid var(--border-color)}h1{font-size:1.6em}h2{font-size:1.4em}.project-controls{padding:10px}.project-controls>*{margin-right:3px;margin-bottom:5px}}:root{--body-bg: #FAF8F0;--header-bar-bg: #F5F2E9;--text-color: #333;--text-color-light: #555;--heading-color: #2c3e50;--container-bg: #F0EBE0;--container-shadow: rgba(0, 0, 0, .05);--border-color: #D3CBB8;--border-color-light: #EAE5D8;--border-color-lighter: #F0EBDF;--interactive-bg: #FDFCF7;--interactive-fretboard-bg: var(--interactive-bg);--fretboard-nut-color: #665;--fret-marker-bg: var(--interactive-bg);--fret-marker-border: var(--border-color);--fret-marker-open-border: #C0B298;--fret-marker-line: var(--border-color-light);--fret-marker-hover-bg: var(--border-color-lighter);--fret-marker-selected-bg: #333;--fret-marker-selected-text: #fff;--fret-marker-selected-border: #000;--fret-marker-open-selected-bg: #D3C5AA;--fret-marker-open-selected-text: #333;--fret-marker-mute-selected-text: #d9534f;--tooltip-bg: #333;--tooltip-text: #fff;--button-primary-bg: #007bff;--button-primary-hover-bg: #0056b3;--button-primary-text: white;--button-secondary-bg: #6c757d;--button-secondary-hover-bg: #5a6268;--button-secondary-text-color: #6c757d;--button-secondary-border-color: #6c757d;--button-secondary-hover-text-color: #ffffff;--button-secondary-hover-border-color: #5a6268;--button-danger-bg: #dc3545;--button-warning-bg: #ffc107;--button-warning-hover-bg: #e0a800;--button-warning-text: #212529;--button-disabled-bg: var(--border-color);--button-disabled-text: #7A7060;--list-item-bg: var(--interactive-bg);--list-item-hover-bg: var(--border-color-lighter);--list-item-selected-bg: #E0D6BF;--list-item-selected-border: #007bff;--tab-bg: rgba(245, 242, 233, .7);--tab-border: rgba(211, 203, 184, .3);--tab-text: #555;--tab-hover-bg: var(--border-color-lighter);--tab-hover-text: #333;--tab-active-bg: #007bff;--tab-active-text: white;--progress-label-text: #495057;--progress-bar-bg: var(--border-color-light);--progress-fill-bg: #007bff;--input-bg: var(--interactive-bg);--input-text: #495057;--input-border: var(--border-color);--input-focus-border: #80bdff;--input-focus-shadow: rgba(0, 123, 255, .25);--modal-overlay-bg: rgba(0, 0, 0, .4);--modal-content-bg: rgba(240, 235, 224, .85);--modal-content-border: rgba(211, 203, 184, .25);--modal-close-text: #888;--modal-close-hover-text: #333;--modal-title-text: #007bff;--dragging-bg: #E0D6BF;--placeholder-border: #007bff;--image-filter-for-dark-mode: invert(0);--al-text-color: #333;--al-text-color-light: #555;--al-heading-color: #2c3e50;--al-container-bg: #ffffff;--al-container-shadow: rgba(0, 0, 0, .05);--al-border-color: #ccc;--al-border-color-light: #e9ecef;--al-interactive-bg: #f8f9fa;--al-interactive-fretboard-bg: #f9f9f9;--al-fretboard-nut-color: #666;--al-fret-marker-bg: #fff;--al-fret-marker-border: #ccc;--al-fret-marker-open-border: #aaa;--al-fret-marker-line: #eee;--al-fret-marker-hover-bg: #eee;--al-fret-marker-selected-bg: #333;--al-fret-marker-selected-text: #fff;--al-fret-marker-selected-border: #000;--al-fret-marker-open-selected-bg: #e0e0e0;--al-fret-marker-open-selected-text: #333;--al-fret-marker-mute-selected-text: #d9534f;--al-input-bg: #fff;--al-input-text: #495057;--al-input-border: #ced4da;--al-input-focus-border: #80bdff;--al-input-focus-shadow: rgba(0, 123, 255, .25);--al-list-item-bg: #fff;--al-list-item-hover-bg: #f8f9fa;--al-list-item-selected-bg: #e6f2ff;--al-list-item-selected-border: #007bff;--button-primary-glow-color: rgba(0, 123, 255, .5);--tab-hover-glow-color: rgba(200, 200, 200, .4);--button-secondary-glow-color: rgba(150, 150, 150, .4);--button-danger-glow-color: rgba(220, 53, 69, .5)}[data-theme=dark]{--body-bg: #1a1a1a;--header-bar-bg: #202020;--text-color: #e0e0e0;--text-color-light: #ababab;--heading-color: #f0f0f0;--container-bg: #2c2c2c;--container-shadow: rgba(255, 255, 255, .05);--border-color: #555;--border-color-light: #444;--border-color-lighter: #3a3a3a;--interactive-bg: #333;--interactive-fretboard-bg: #3a3a3a;--fretboard-nut-color: #aaa;--fret-marker-bg: #444;--fret-marker-border: #666;--fret-marker-open-border: #777;--fret-marker-line: #555;--fret-marker-hover-bg: #505050;--fret-marker-selected-bg: #e0e0e0;--fret-marker-selected-text: #1a1a1a;--fret-marker-selected-border: #f0f0f0;--fret-marker-open-selected-bg: #5a5a5a;--fret-marker-open-selected-text: #e0e0e0;--fret-marker-mute-selected-text: #ff7f7f;--tooltip-bg: #e0e0e0;--tooltip-text: #1a1a1a;--button-primary-bg: #007bff;--button-primary-hover-bg: #0056b3;--button-primary-text: white;--button-secondary-bg: #5a6268;--button-secondary-hover-bg: #495057;--button-secondary-text-color: #adb5bd;--button-secondary-border-color: #adb5bd;--button-secondary-hover-text-color: #ffffff;--button-secondary-hover-border-color: #495057;--button-danger-bg: #c82333;--button-warning-bg: #e0a800;--button-warning-hover-bg: #c89400;--button-warning-text: #212529;--button-disabled-bg: #555;--button-disabled-text: #aaa;--list-item-bg: #3a3a3a;--list-item-hover-bg: #4a4a4a;--list-item-selected-bg: #0056b3;--list-item-selected-border: #007bff;--tab-bg: rgba(30, 30, 30, .7);--tab-border: rgba(60, 60, 60, .5);--tab-text: #ccc;--tab-hover-bg: #444;--tab-hover-text: #f0f0f0;--tab-active-bg: #007bff;--tab-active-text: white;--progress-label-text: #bbb;--progress-bar-bg: #555;--progress-fill-bg: #007bff;--input-bg: #333;--input-text: #e0e0e0;--input-border: #666;--input-focus-border: #80bdff;--input-focus-shadow: rgba(0, 123, 255, .35);--modal-overlay-bg: rgba(0, 0, 0, .7);--modal-content-bg: rgba(50, 50, 50, .85);--modal-content-border: rgba(100, 100, 100, .3);--modal-close-text: #aaa;--modal-close-hover-text: #e0e0e0;--modal-title-text: #80bdff;--dragging-bg: #505050;--placeholder-border: #007bff;--image-filter-for-dark-mode: invert(1) hue-rotate(180deg)}.tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 15px;background-color:var(--header-bar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--tab-border);width:100%;box-sizing:border-box;position:sticky;top:0;z-index:1000;box-shadow:0 2px 4px var(--container-shadow);position:relative}.app-title-in-bar{position:relative;left:50%;top:50%;height:80px;width:auto;filter:var(--image-filter-for-dark-mode);transition:filter .3s ease;z-index:1}.tab-content{display:none}.tab-content.active{display:block}@media (max-width: 768px){.tabs{padding:8px 10px}.app-title-in-bar{height:70px;position:static;left:auto;top:auto;transform:none}.top-bar-controls{gap:0px}.top-bar-controls button{font-size:.9em;padding:6px 8px}}.tab-nav{display:flex;gap:8px;align-items:center;margin-left:20px}.tab-link{display:inline-block;padding:8px 18px;border-radius:6px;background:var(--tab-bg);color:var(--tab-text);text-decoration:none;font-weight:600;font-size:1.05em;border:1px solid var(--tab-border);transition:background .2s,color .2s;position:relative;top:2px}.tab-link.active,.tab-link:focus{background:var(--tab-active-bg);color:var(--tab-active-text);border-color:var(--tab-active-bg) var(--tab-active-bg) transparent var(--tab-active-bg);z-index:2}.tab-link:hover:not(.active){background:var(--tab-hover-bg);color:var(--tab-hover-text);box-shadow:0 0 8px 1px var(--tab-hover-glow-color),0 0 15px 3px #c8c8c840}button,input[type=button],input[type=submit],.chord-editor button,.project-controls button,button:hover,input[type=button]:hover,input[type=submit]:hover,.chord-editor button:hover,.project-controls button:hover,button:disabled,input[type=button]:disabled,input[type=submit]:disabled,.chord-editor button:disabled,.project-controls button:disabled .chord-editor button{background-color:var(--button-secondary-bg);color:var(--button-primary-text)}.chord-editor button:hover{background-color:var(--button-secondary-hover-bg)}.delete-chord-btn{background-color:var(--button-danger-bg);color:var(--button-primary-text);padding:2px 6px;font-size:.85em}.delete-chord-btn:hover{background-color:var(--button-danger-hover-bg)}.move-chord-btn{background-color:var(--button-warning-bg);color:var(--button-warning-text);padding:5px 10px;font-size:.85em}.move-chord-btn:hover:not(:disabled){background-color:var(--button-warning-hover-bg)}.top-bar-controls{display:flex;align-items:center;gap:10px}@media (max-width: 768px){.top-bar-controls{gap:0px}}#theme-toggle-btn,#general-help-btn{background-color:transparent;color:var(--heading-color);border:1px solid transparent;border-radius:50%;width:40px;height:40px;font-size:1.5em;font-weight:400;display:flex;text-align:center;justify-content:center;align-items:center;padding:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;margin:0;box-shadow:none}#theme-toggle-btn:hover,#general-help-btn:hover{background-color:var(--tab-hover-bg);color:var(--tab-hover-text);transform:scale(1.05);border-color:var(--border-color)}#general-help-btn{position:static}.chord-action-buttons{display:flex;justify-content:flex-start;align-items:center;gap:15px;flex-wrap:wrap}.chord-action-buttons button{padding:0;width:36px;height:36px;margin:0;background-color:transparent;border:1px solid transparent;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.chord-action-buttons button:hover{background-color:var(--button-hover-bg, #ffffff00);border-color:var(--al-border-color, #00000000);box-shadow:none}.chord-action-buttons button img{display:block;width:100%;height:100%;object-fit:contain}.position-control-btn{background-color:transparent;border:1px solid transparent;border-radius:4px;display:flex;flex-direction:row}[data-theme=light] .chord-action-buttons button img.static-image,[data-theme=dark] .chord-action-buttons button img.animated-image{filter:invert(1)}.chord-action-buttons button:disabled img{opacity:.4}.project-controls{display:flex;align-items:center;gap:8px;margin-bottom:15px;flex-wrap:wrap}.project-controls label{font-weight:500;white-space:nowrap}#new-project-btn,#edit-project-btn,#delete-project-btn,#export-project-btn{padding:0;width:36px;height:36px;margin:0;background-color:transparent;border:1px solid transparent;border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}#new-project-btn:hover,#edit-project-btn:hover,#delete-project-btn:hover,#export-project-btn:hover{background-color:var(--button-hover-bg, #ffffff00);border-color:var(--al-border-color, #00000000);box-shadow:none}#new-project-btn img,#edit-project-btn img,#delete-project-btn img,#export-project-btn img{display:block;width:100%;height:100%;object-fit:contain}[data-theme=light] #new-project-btn img.static-image,[data-theme=light] #edit-project-btn img.static-image,[data-theme=light] #delete-project-btn img.static-image,[data-theme=light] #export-project-btn img.static-image,[data-theme=dark] #new-project-btn img.animated-image,[data-theme=dark] #edit-project-btn img.animated-image,[data-theme=dark] #delete-project-btn img.animated-image,[data-theme=dark] #export-project-btn img.animated-image{filter:invert(1)}.modal-actions .btn-danger{background-color:var(--button-danger-bg);color:var(--button-primary-text);border:1px solid var(--button-danger-bg);display:inline-flex;align-items:center}.modal-actions .btn-danger:hover{background-color:var(--button-danger-hover-bg, #c82333);border-color:var(--button-danger-hover-bg, #c82333);box-shadow:0 0 10px 2px var(--button-danger-glow-color),0 0 20px 5px #dc35454d}.modal-actions .btn-danger img{filter:none!important}.chord-meta-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.chord-name-wrapper input[type=text]{width:100%;box-sizing:border-box;padding:8px;border:1px solid var(--input-border);border-radius:4px;background-color:var(--input-bg);color:var(--input-text)}.position-and-actions-wrapper{display:flex;justify-content:space-between;align-items:center;gap:15px;width:80%}.position-input-wrapper{display:flex;align-items:center;gap:8px;width:100%}.position-input-wrapper label{display:flex;align-items:center;gap:5px;white-space:nowrap}.position-input-wrapper input[type=number]{width:60px;padding:8px;border:1px solid var(--input-border);border-radius:4px;background-color:var(--input-bg);color:var(--input-text);text-align:center}.position-input-wrapper input[type=range]{flex-grow:1;cursor:pointer;width:100%}.position-input-wrapper .slider-value-display{width:auto;text-align:center;font-weight:700;color:var(--heading-color)}footer{padding:20px 15px;text-align:center;background-color:transparent;margin-top:30px;color:var(--text-color-light)}.footer-content{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px}.copyright{font-size:.85em;margin:0}.social-links{display:flex;gap:15px}.social-links a.social-link{display:inline-block;color:var(--text-color-light);text-decoration:none;padding:5px;border-radius:4px;transition:background-color .2s ease,opacity .2s ease;line-height:0}.social-links a.social-link img{width:32px;height:32px;display:block;transition:filter .3s ease}.social-links a.social-link:hover{transform:scale(1.05);transition:transform 1.5s ease}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--modal-overlay-bg);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:1;visibility:visible;transition:opacity .3s ease,visibility .3s ease,background-color .3s ease}.modal-overlay.active{opacity:1;visibility:visible}.modal-content{background-color:var(--modal-content-bg);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--modal-content-border);padding:25px;border-radius:8px;box-shadow:0 5px 15px var(--container-shadow);width:90%;max-width:500px;max-height:80vh;overflow-y:auto;position:relative;transform:translateY(-20px) scale(.95);transition:transform .3s ease,background-color .3s ease,border-color .3s ease;color:var(--text-color);z-index:1001}.modal-overlay.active .modal-content{transform:translateY(0) scale(1)}.modal-close-btn{position:absolute;top:0;right:0;background-color:transparent;border:1px solid transparent;color:var(--modal-close-text);cursor:pointer;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;font-size:1.8rem;line-height:1;transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}.modal-close-btn:hover{color:var(--modal-close-text);transform:scale(1.05);text-shadow:0 0 8px var(--button-danger-glow-color),0 0 12px var(--button-danger-glow-color),0 0 15px rgba(220,53,69,.5);box-shadow:none!important;border-color:transparent!important}.modal-content h2{margin-top:0;color:var(--modal-title-text)}.modal-content ul{padding-left:20px;list-style-type:disc}.modal-content ul ul{list-style-type:circle;margin-top:5px;margin-bottom:5px}.modal-content li{margin-bottom:8px}.modal-content p{margin-bottom:15px}.modal-form-group{margin-bottom:10px}.modal-form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-color-secondary)}.modal-form-group input[type=text],.modal-form-group input[type=number]{width:calc(100% - 22px);padding:10px;border:1px solid var(--border-color-light);border-radius:5px;background-color:var(--input-bg);color:var(--input-text);font-size:.95em;transition:border-color .2s ease,box-shadow .2s ease}.modal-form-group input[type=text]:focus,.modal-form-group input[type=number]:focus{border-color:var(--input-focus-border);box-shadow:0 0 0 .2rem var(--input-focus-shadow);outline:none}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.modal-actions .btn{padding:10px 20px;border-radius:5px;cursor:pointer;font-weight:600;transition:background-color .2s ease,transform .1s ease}.modal-actions .btn-primary{background-color:var(--button-primary-bg);color:var(--button-primary-text);border:1px solid var(--button-primary-bg)}.modal-actions .btn-primary:hover{border-color:var(--button-primary-hover-bg);box-shadow:0 0 10px 2px var(--button-primary-glow-color),0 0 20px 5px #007bff4d;transform:translateY(-1px)}.modal-actions .btn-secondary{background-color:transparent;color:var(--button-secondary-text-color);border:1px solid var(--button-secondary-border-color)}.modal-actions .btn-secondary:hover{background-color:var(--button-secondary-hover-bg);color:var(--button-secondary-hover-text-color);border-color:var(--button-secondary-hover-border-color);box-shadow:0 0 8px 1px var(--button-secondary-glow-color),0 0 15px 3px #b4b4b440;transform:translateY(-1px)}#help-modal-dynamic-content a{color:#5cacee;text-decoration:underline}#help-modal-dynamic-content a:hover{color:#3b82c4;text-decoration:none}.column-selector-container{display:flex;justify-content:space-around;align-items:center;padding:5px 0;border:1px solid var(--border-color-light);border-radius:5px;margin-top:5px}.column-select-box{flex-grow:1;flex-basis:0;min-width:40px;height:40px;display:flex;justify-content:center;align-items:center;border:1px solid var(--border-color-light);background-color:var(--input-bg);color:var(--text-color-secondary);cursor:pointer;text-align:center;font-weight:700;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,border-color .2s ease,color .2s ease;margin:0 3px;border-radius:4px}.column-select-box:first-child{margin-left:0}.column-select-box:last-child{margin-right:0}.column-select-box:hover{background-color:var( --button-secondary-hover-bg );border-color:var(--button-secondary-hover-border);color:var(--button-secondary-text)}.column-select-box.active{background-color:var(--button-primary-bg);border-color:var(--button-primary-bg);color:var(--button-primary-text)}.column-select-box.selected{box-shadow:0 0 0 2px var(--input-focus-border)}.modal-scrollable-content{max-height:300px;overflow-y:auto;border:1px solid var(--al-border-color, #ccc);border-radius:4px;padding:10px;margin-bottom:15px;background-color:var(--al-input-bg, #fff)}.available-chords-modal-list{list-style:none;padding:0;margin:0}.available-chords-modal-list li{display:flex;align-items:center;padding:8px 10px;border-bottom:1px solid var(--al-border-color-light, #eee);cursor:pointer;transition:background-color .15s ease}.available-chords-modal-list li:last-child{border-bottom:none}.available-chords-modal-list li:hover{background-color:var(--al-list-item-hover-bg, #f0f0f0)}.available-chords-modal-list .modal-chord-name{flex-grow:1;font-size:.95em;color:var(--al-text-color, #333)}.available-chords-modal-list .modal-chord-mini-diagram{width:40px;height:48px;margin-left:10px;border:1px solid var(--al-border-color-extralight, #f0f0f0);display:flex;align-items:center;justify-content:center;background-color:#fff}[data-theme=dark] .available-chords-modal-list .modal-chord-mini-diagram svg{filter:none!important}.modal-import-area{border:1px dashed var(--text-color-secondary, #ccc);border-radius:5px;text-align:center;background-color:var( --background-color-offset, #f9f9f9 )}.modal-import-area p{margin-bottom:10px;font-size:.9em;color:var(--text-color-secondary, #555)}#modal-import-trigger-label span[role=img]{margin-right:5px}#modal-import-file-name-span{display:block;margin-top:8px;font-style:italic;min-height:1.2em;color:var(--text-color-primary)}#export-chord-list{list-style:none;padding:0;margin-top:15px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.export-controls{display:flex;flex-direction:row}.export-chord-item{border:1px solid var(--al-border-color-light, #ddd);background-color:var(--al-list-item-bg, #fff);cursor:grab;display:flex;flex-direction:column;align-items:stretch;border-radius:6px;transition:background-color .2s ease,box-shadow .2s ease;color:var(--al-text-color, #333);padding:8px;box-shadow:0 1px 2px #0000000d;position:relative;box-sizing:border-box}.export-chord-item:hover{background-color:var(--al-list-item-hover-bg, #f5f5f5);box-shadow:0 2px 4px var(--al-container-shadow, rgba(0, 0, 0, .1))}.export-item-content-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%}.export-chord-mini-diagram{width:100%;max-width:100%;margin-right:0;display:flex;align-items:center;justify-content:center;border:none;position:relative}.export-chord-mini-diagram svg{width:100%;height:auto;display:block}[data-theme=dark] #export-chord-list .export-chord-mini-diagram svg{filter:none!important}.remove-from-export-btn{background:transparent;border:none;color:var(--text-color-error, #dc3545);font-size:1.3em;font-weight:700;cursor:pointer;padding:2px 6px;position:absolute;bottom:0;right:0;z-index:10;border-radius:4px;line-height:1}.remove-from-export-btn:hover{color:var(--text-color-error, #dc3545);text-shadow:0 0 6px var(--button-danger-glow-color),0 0 10px var(--button-danger-glow-color);box-shadow:none!important;border:none!important}.export-chord-item.dragging{opacity:.5;background-color:var(--dragging-bg, #e0e0e0);box-shadow:0 4px 8px #0003}.export-chord-item.export-item-fading-out{opacity:0;transition:opacity .5s ease-out}.export-chord-item.drag-over-placeholder{background-color:var( --al-list-item-selected-bg, #cfe2ff );outline:2px dashed var(--al-list-item-selected-border, #007bff);outline-offset:-2px}.export-chord-item.drag-over-left-half{border-left:3px dashed var(--primary-accent-color, #007bff)}.export-chord-item.drag-over-right-half{border-right:3px dashed var(--primary-accent-color, #007bff)}#export-chord-list p{text-align:center;color:var(--al-text-color-secondary);padding:20px;grid-column:1 / -1}@media (max-width: 1000px){#export-chord-list{grid-template-columns:repeat(5,1fr)}}@media (max-width: 768px){#export-chord-list{grid-template-columns:repeat(4,1fr);gap:8px}.export-chord-item{min-width:0}}@media (max-width: 480px){#export-chord-list{grid-template-columns:repeat(3,1fr)}.export-chord-item{width:100%;min-width:0}}#export-chord-list li.placeholder-add-export-chord{border:2px dashed var(--al-list-item-selected-border, #007bff);background-color:color-mix(in srgb,var(--al-list-item-selected-border, #007bff) 10%,transparent);display:flex;justify-content:center;align-items:center;cursor:pointer;min-height:100px;transition:background-color .2s ease,border-color .2s ease;box-sizing:border-box}#export-chord-list li.placeholder-add-export-chord:hover{background-color:color-mix(in srgb,var(--al-list-item-selected-border, #007bff) 20%,transparent);box-shadow:none}#export-chord-list li.placeholder-add-export-chord .plus-sign-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}#export-chord-list li.placeholder-add-export-chord .plus-sign-icon{font-size:2.5em;font-weight:700;color:color-mix(in srgb,var(--al-list-item-selected-border, #007bff) 70%,black 30%);line-height:1;transition:color .2s ease}