:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1,h2,h3,h4,h5,h6{line-height:1.2;margin-top:0}h1{font-size:2.5rem}h2{font-size:1.8rem}h3{font-size:1.5rem}h4{font-size:1.2rem}button{border-radius:4px;border:1px solid #ccc;padding:.5em 1em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:all .2s ease}button:hover{border-color:#646cff;background-color:#f0f0f0}button:focus,button:focus-visible{outline:2px solid #646cff;outline-offset:2px}:root{--gh-background: #f6f8fa;--gh-surface: #ffffff;--gh-surface-secondary: #f6f8fa;--gh-surface-tertiary: #eaeef2;--gh-accent-blue: #0969da;--gh-accent-green: #2da44e;--gh-accent-orange: #bf8700;--gh-accent-purple: #8250df;--gh-text-primary: #24292f;--gh-text-secondary: #57606a;--gh-text-muted: #6e7781;--gh-text-link: #0969da;--gh-border: #d0d7de;--gh-border-muted: #d8dee4;--gh-hover: rgba(9, 105, 218, .1);--gh-shadow-sm: 0 1px 0 rgba(27, 31, 36, .04);--gh-shadow-md: 0 3px 6px rgba(140, 149, 159, .15);--gh-shadow-lg: 0 8px 24px rgba(140, 149, 159, .2);--gh-shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, .25);--gh-glow-blue: 0 0 15px rgba(9, 105, 218, .3);--gh-glow-green: 0 0 15px rgba(45, 164, 78, .3);--gh-gradient-blue: linear-gradient(180deg, #0969da, #0550ae);--gh-gradient-green: linear-gradient(180deg, #2da44e, #26863f);--gh-gradient-button: linear-gradient(180deg, #f6f8fa, #ebeff4);--gh-gradient-button-hover: linear-gradient(180deg, #f3f4f6, #e0e4e9)}[data-theme=dark]{--gh-background: #0d1117;--gh-surface: #161b22;--gh-surface-secondary: #21262d;--gh-surface-tertiary: #30363d;--gh-accent-blue: #58a6ff;--gh-accent-green: #3fb950;--gh-accent-orange: #e3b341;--gh-accent-purple: #a371f7;--gh-text-primary: #c9d1d9;--gh-text-secondary: #8b949e;--gh-text-muted: #6e7681;--gh-text-link: #58a6ff;--gh-border: #30363d;--gh-border-muted: #21262d;--gh-hover: rgba(88, 166, 255, .1);--gh-shadow-sm: 0 1px 0 rgba(1, 4, 9, .1);--gh-shadow-md: 0 3px 6px rgba(0, 0, 0, .3);--gh-shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--gh-shadow-highlight: inset 0 1px 0 rgba(110, 118, 129, .1);--gh-glow-blue: 0 0 15px rgba(88, 166, 255, .4);--gh-glow-green: 0 0 15px rgba(63, 185, 80, .4);--gh-gradient-blue: linear-gradient(180deg, #58a6ff, #388bfd);--gh-gradient-green: linear-gradient(180deg, #3fb950, #2ea043);--gh-gradient-button: linear-gradient(180deg, #30363d, #21262d);--gh-gradient-button-hover: linear-gradient(180deg, #3c444d, #2b3139)}body{background-color:var(--gh-background);color:var(--gh-text-primary);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;line-height:1.5;width:100%;height:100vh;overflow:hidden}html{width:100%;height:100%;overflow:hidden}#root{width:100%;height:100vh;overflow:hidden;padding:0}.app-container{display:flex;flex-direction:column;width:100%;height:100vh;overflow:hidden;background-color:var(--gh-background);margin:0;padding:0}.app-content{display:flex;flex:1;gap:1.5rem;overflow:hidden;height:calc(100% - 80px);width:100%;padding:.5rem;box-sizing:border-box;margin-top:.5rem}.progression-container{flex:2;min-width:0;overflow:hidden;display:flex;flex-direction:column;background-color:var(--gh-surface);border-radius:6px;padding:1rem;box-shadow:var(--gh-shadow-md);border:1px solid var(--gh-border);box-sizing:border-box;height:100%}.search-container{flex:1;min-width:280px;max-width:350px;overflow:hidden;display:flex;flex-direction:column;background-color:var(--gh-surface);border-radius:6px;padding:1rem;box-shadow:var(--gh-shadow-md);border:1px solid var(--gh-border);box-sizing:border-box;height:100%}.app-footer{margin-top:0;padding:.3rem 0;border-top:1px solid var(--gh-border);text-align:center;font-size:.7rem;color:var(--gh-text-muted);height:20px;width:100%;box-sizing:border-box}.chord-search{display:flex;flex-direction:column;height:100%}.chord-search h2{color:var(--gh-accent-blue);margin-top:0;margin-bottom:1rem;font-size:1.5rem;font-weight:600}.search-input{margin-bottom:1rem}.search-input input{width:100%;padding:.7rem;border:1px solid var(--gh-border);border-radius:6px;background-color:var(--gh-surface);color:var(--gh-text-primary);font-size:1rem;transition:all .2s ease;box-sizing:border-box;box-shadow:var(--gh-shadow-sm)}.search-input input:focus{outline:none;border-color:var(--gh-accent-blue);box-shadow:var(--gh-glow-blue)}.search-input input::placeholder{color:var(--gh-text-muted)}.search-results{flex:1;overflow-y:auto;border-radius:6px;padding:.5rem;max-height:calc(100vh - 180px);scrollbar-width:thin;background-color:var(--gh-surface-secondary);border:1px solid var(--gh-border-muted);box-sizing:border-box}.search-results::-webkit-scrollbar{width:8px}.search-results::-webkit-scrollbar-track{background:var(--gh-surface);border-radius:4px}.search-results::-webkit-scrollbar-thumb{background:var(--gh-border);border-radius:4px}.search-results::-webkit-scrollbar-thumb:hover{background:var(--gh-accent-blue)}.search-result{margin-bottom:.8rem;border-radius:6px;overflow:hidden;background-color:var(--gh-surface);box-shadow:var(--gh-shadow-sm);border:1px solid var(--gh-border);transition:transform .2s ease,box-shadow .2s ease}.search-result:hover{transform:translateY(-2px);box-shadow:var(--gh-shadow-md);border-color:var(--gh-border-muted)}.search-result-header{padding:.7rem;background-color:var(--gh-surface);cursor:pointer;border-left:3px solid var(--gh-accent-blue);color:var(--gh-text-secondary);font-weight:500}.search-result.expanded .search-result-header{background-color:var(--gh-accent-blue);color:#fff}.search-result.expanded{transform:none;box-shadow:var(--gh-shadow-md);border-color:var(--gh-accent-blue);transition:none}.search-result.expanded:hover{transform:none;box-shadow:var(--gh-shadow-md);border-color:var(--gh-accent-blue)}.chord-detail{padding:1rem;background-color:var(--gh-surface-secondary);border-radius:0 0 6px 6px;border-top:0;border:1px solid var(--gh-border-muted);border-top:none}.chord-detail h3{color:var(--gh-accent-green);margin-top:0;font-size:1.1rem;font-weight:600}.primary-chord,.inversions{margin-bottom:1.5rem;padding:0 0 .5rem;border-bottom:2px solid var(--gh-border)}.primary-chord h4{color:var(--gh-accent-blue);margin-top:0;margin-bottom:1rem;font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:.05em}.inversions h4{color:var(--gh-accent-purple);margin-top:0;margin-bottom:1rem;font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:.05em}.inversions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.chord-card{border:1px solid var(--gh-border);border-radius:6px;padding:.8rem;background-color:var(--gh-surface);cursor:grab;transition:all .2s ease;box-shadow:var(--gh-shadow-sm);position:relative;overflow:hidden}.chord-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gh-gradient-blue);opacity:0;transition:opacity .3s ease}.chord-card:hover{box-shadow:var(--gh-shadow-md);transform:translateY(-2px);border-color:var(--gh-accent-blue)}.chord-card:hover:before{opacity:1}.chord-name{margin-top:0;margin-bottom:.8rem;font-size:1.1rem;text-align:center;color:var(--gh-accent-blue);font-weight:600}.chord-image,.chord-sound{display:flex;justify-content:center;margin-bottom:.8rem;background-color:var(--gh-surface-secondary);border-radius:6px;padding:.5rem;border:1px solid var(--gh-border-muted)}.chord-image{overflow:hidden}.chord-image img{filter:brightness(1.1) contrast(1.1)}.progression-chord .chord-image,.progression-chord .chord-sound{margin-bottom:.5rem;transform:scale(.9);transform-origin:center top}.progression-chord .chord-card:hover{box-shadow:var(--gh-shadow-sm);transform:none;border-color:var(--gh-border)}.progression-chord .chord-card:hover:before{opacity:0}.contained-image{max-width:100%;height:auto;object-fit:contain}.contained-image img{max-width:100%;height:auto;display:block}.chord-progression{height:100%;display:flex;flex-direction:column}.chord-progression h2{color:var(--gh-accent-green);margin-top:0;margin-bottom:1rem;font-size:1.5rem;font-weight:600}.chord-progression-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.chord-progression-header h2{margin-bottom:0}.play-button{background-color:var(--gh-surface);border:1px solid var(--gh-border);border-radius:6px;color:var(--gh-accent-green);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.play-button:hover{background-color:var(--gh-surface-secondary);transform:translateY(-2px);box-shadow:var(--gh-shadow-sm)}.play-button:active{transform:translateY(0)}.play-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.play-button svg{width:24px;height:24px}.playback-controls{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.play-button,.stop-button,.loop-button{background-color:var(--gh-surface);border:1px solid var(--gh-border);border-radius:6px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.play-button:hover,.stop-button:hover,.loop-button:hover{background-color:var(--gh-surface-secondary);transform:translateY(-2px);box-shadow:var(--gh-shadow-sm)}.play-button:active,.stop-button:active,.loop-button:active{transform:translateY(0)}.play-button:disabled,.stop-button:disabled,.loop-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.play-button svg,.stop-button svg,.loop-button svg{width:24px;height:24px}.play-button{color:var(--gh-accent-green)}.stop-button{color:var(--gh-accent-orange)}.loop-button{color:var(--gh-text-secondary)}.loop-button.active{color:var(--gh-accent-blue);background-color:var(--gh-surface-secondary);border-color:var(--gh-accent-blue)}.tempo-control{display:flex;flex-direction:column;min-width:150px;flex-grow:1;margin-left:.5rem}.tempo-label{font-size:.85rem;color:var(--gh-text-secondary);margin-bottom:.3rem;font-weight:500}.tempo-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--gh-surface-secondary);border-radius:3px;outline:none;border:1px solid var(--gh-border)}.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gh-accent-blue);cursor:pointer;border:1px solid var(--gh-border);box-shadow:var(--gh-shadow-sm);transition:all .2s ease}.tempo-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gh-accent-blue);cursor:pointer;border:1px solid var(--gh-border);box-shadow:var(--gh-shadow-sm);transition:all .2s ease}.tempo-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:var(--gh-shadow-md)}.tempo-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:var(--gh-shadow-md)}.tempo-slider:disabled{opacity:.5;cursor:not-allowed}.tempo-slider:disabled::-webkit-slider-thumb{background:var(--gh-text-muted);cursor:not-allowed;transform:none;box-shadow:none}.tempo-slider:disabled::-moz-range-thumb{background:var(--gh-text-muted);cursor:not-allowed;transform:none;box-shadow:none}.progression-drop-area{flex:1;border:1px dashed var(--gh-accent-blue);border-radius:6px;padding:1rem;min-height:200px;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;scrollbar-width:thin;background-color:var(--gh-surface-secondary);transition:all .2s ease;max-height:calc(100vh - 150px);box-sizing:border-box}.progression-drop-area:hover{border-color:var(--gh-accent-green);box-shadow:inset 0 0 20px #2da44e0d}.progression-drop-area::-webkit-scrollbar{width:8px}.progression-drop-area::-webkit-scrollbar-track{background:var(--gh-surface);border-radius:4px}.progression-drop-area::-webkit-scrollbar-thumb{background:var(--gh-border);border-radius:4px}.progression-drop-area::-webkit-scrollbar-thumb:hover{background:var(--gh-accent-green)}.empty-message{text-align:center;color:var(--gh-text-muted);font-size:1.1rem;margin-top:2rem}.progression-chords{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;align-items:flex-start;padding:.5rem;width:100%;flex:1}.progression-chords.sortable-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;align-items:flex-start;width:100%;padding:.5rem}.progression-chord{position:relative;border:1px solid var(--gh-border);border-radius:6px;padding:.8rem;background-color:var(--gh-surface);transition:all .2s ease;width:100%;box-shadow:var(--gh-shadow-sm);cursor:grab;overflow:hidden}.progression-chord:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gh-gradient-green);opacity:0;transition:opacity .3s ease}.progression-chord:hover{box-shadow:var(--gh-shadow-md);transform:translateY(-2px);border-color:var(--gh-accent-green)}.progression-chord:hover:before{opacity:1}.chord-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;background-color:var(--gh-surface-secondary);border-radius:6px;padding:.5rem;border:1px solid var(--gh-border-muted)}.chord-header .chord-name{margin:0;font-size:1.1rem;color:var(--gh-accent-blue);font-weight:600}.chord-header button{background:var(--gh-gradient-button);border:1px solid var(--gh-border);cursor:pointer;font-size:1rem;padding:.3rem .5rem;border-radius:6px;color:var(--gh-text-secondary);transition:all .2s ease;box-shadow:var(--gh-shadow-sm),var(--gh-shadow-highlight);font-weight:500}.progression-chord .chord-header{margin-bottom:.4rem}.progression-chord .chord-header button{font-size:.9rem;padding:.2rem .4rem}.chord-header button:hover{background:var(--gh-gradient-button-hover);border-color:var(--gh-accent-blue);box-shadow:var(--gh-shadow-md),var(--gh-shadow-highlight)}.chord-header button:active{transform:translateY(1px);box-shadow:var(--gh-shadow-sm)}.chord-header button.remove-chord:hover{background:linear-gradient(180deg,#cf222e,#a40e26);color:#fff;border-color:#a40e26}.progression-drop-end{display:flex;justify-content:center;align-items:center;width:60px;height:60px;border:1px dashed var(--gh-accent-blue);border-radius:6px;color:var(--gh-text-muted);font-size:1.8rem;transition:all .2s ease;background-color:var(--gh-surface);position:relative;overflow:hidden}.progression-drop-end:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,#0969da1a,#0969da00 70%);opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .3s ease}.progression-drop-end:hover{border-color:var(--gh-accent-green);color:var(--gh-accent-green);box-shadow:var(--gh-shadow-sm)}.progression-drop-end:hover:after{opacity:1;transform:scale(1)}.drag-over{border-color:var(--gh-accent-green);background-color:#2da44e1a;box-shadow:var(--gh-glow-green)}@media (max-width: 768px){.app-content{flex-direction:column;gap:1rem;padding:.5rem;height:calc(100% - 80px)}.search-container{border-left:none;max-width:100%;width:100%;margin-top:1rem;height:50%}.progression-container{height:50%}.navbar-container{padding:.5rem 0}.navbar-logo h1{font-size:1.3rem}.settings-menu{width:100%;right:0;left:0;border-radius:0 0 6px 6px;top:59px}.progression-container,.search-container{padding:.8rem;box-shadow:var(--gh-shadow-sm);transition:box-shadow .3s ease}.progression-container:focus-within,.search-container:focus-within{box-shadow:var(--gh-shadow-md)}.progression-chord{min-width:260px;max-width:100%}.chord-search h2,.chord-progression h2{font-size:1.3rem}.search-input input{padding:.5rem}.chord-header button{padding:.5rem .7rem;margin:0 .2rem}.chord-progression-header{flex-direction:column;align-items:flex-start}.playback-controls{width:100%;margin-top:.8rem;justify-content:space-between}.tempo-control{width:100%;margin-left:0;margin-top:.8rem}.tempo-slider{height:10px}.tempo-slider::-webkit-slider-thumb{width:20px;height:20px}.tempo-slider::-moz-range-thumb{width:20px;height:20px}.progression-chords{-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:1.5rem}.progression-chord{scroll-snap-align:start}.progression-drop-area,.search-results{max-height:calc(100% - 60px)}}@media (max-width: 480px){.progression-chord{min-width:220px}.inversions-grid{grid-template-columns:1fr}.app-content{padding:.3rem;height:calc(100% - 70px);margin-top:.3rem}.progression-container,.search-container{padding:.6rem;border-radius:4px}.navbar-container{padding:.3rem 0}.navbar-logo h1{font-size:1.2rem}.settings-button{width:36px;height:36px}.settings-menu{top:50px}.settings-menu-header{padding:.6rem .8rem}.settings-menu-content{padding:.8rem}.progression-container{height:45%}.search-container{height:55%;margin-top:.5rem}.chord-name{font-size:1rem}.chord-header{flex-wrap:wrap}.progression-drop-area,.search-results{max-height:calc(100% - 50px)}.search-results,.progression-drop-area{position:relative;overscroll-behavior:contain}.app-footer{font-size:.6rem;padding:.2rem 0;height:18px}}.navbar{width:100%;background-color:var(--gh-surface);border-bottom:1px solid var(--gh-border);box-shadow:var(--gh-shadow-sm);position:relative;z-index:1000}.navbar-container{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;width:100%}.navbar-logo{padding-left:1rem}.navbar-logo h1{margin:0;font-size:1.5rem;color:var(--gh-accent-blue);font-weight:600}.navbar-actions{display:flex;align-items:center;gap:1rem;padding-right:1rem}.donate-button,.settings-button{width:50px;height:50px;border-radius:50%;background:var(--gh-surface);border:1px solid var(--gh-border);color:var(--gh-accent-green);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:var(--gh-shadow-sm)}.donate-button:hover{transform:translateY(-2px);box-shadow:var(--gh-shadow-md);border-color:var(--gh-accent-green);color:var(--gh-accent-green)}.donate-button:active{transform:translateY(1px);box-shadow:var(--gh-shadow-sm)}.donate-button:focus-visible{outline:2px solid var(--gh-accent-green);outline-offset:2px}.settings-button:hover{transform:translateY(-2px);box-shadow:var(--gh-shadow-md);border-color:var(--gh-accent-green);color:var(--gh-accent-green)}.settings-button:active{transform:translateY(1px);box-shadow:var(--gh-shadow-sm)}.settings-button:focus-visible{outline:2px solid var(--gh-accent-green);outline-offset:2px}.settings-menu{position:absolute;top:60px;right:1.5rem;width:250px;background-color:var(--gh-surface);border-radius:6px;box-shadow:var(--gh-shadow-lg);border:1px solid var(--gh-border);z-index:1001;overflow:hidden;animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.settings-menu-header{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--gh-border)}.settings-menu-header h3{margin:0;font-size:1.1rem;color:var(--gh-text-primary)}.close-settings{background:transparent;border:none;color:var(--gh-text-secondary);cursor:pointer;padding:.3rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.close-settings:hover{background-color:var(--gh-surface-secondary);color:var(--gh-text-primary)}.close-settings:focus-visible{outline:2px solid var(--gh-accent-blue);outline-offset:1px;background-color:var(--gh-surface-secondary)}.settings-menu-content{padding:1rem}.settings-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;padding-bottom:.8rem;border-bottom:1px solid var(--gh-border-muted)}.settings-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.settings-item:focus-visible{outline:2px solid var(--gh-accent-blue);outline-offset:-2px;border-radius:4px;background-color:var(--gh-surface-secondary)}.settings-backdrop{position:fixed;inset:0;background-color:#0000004d;z-index:1000}.theme-toggle{width:50px;height:50px;border-radius:50%;background:var(--gh-surface);border:1px solid var(--gh-border);color:var(--gh-text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:var(--gh-shadow-sm)}.theme-toggle:hover{transform:translateY(-2px);box-shadow:var(--gh-shadow-md);border-color:var(--gh-accent-blue);color:var(--gh-accent-blue)}.theme-toggle:active{transform:translateY(1px);box-shadow:var(--gh-shadow-sm)}body,button,input,div,svg,p,h1,h2,h3,h4,h5,h6{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}[data-theme=dark] .search-results::-webkit-scrollbar-thumb,[data-theme=dark] .progression-drop-area::-webkit-scrollbar-thumb{background:var(--gh-border)}[data-theme=dark] .search-results::-webkit-scrollbar-thumb:hover,[data-theme=dark] .progression-drop-area::-webkit-scrollbar-thumb:hover{background:var(--gh-accent-blue)}[data-theme=dark] .chord-image img{filter:brightness(.85) contrast(1.2) invert(.9)}.instrument-toggle-button{width:50px;height:50px;border-radius:50%;background:var(--gh-surface);border:1px solid var(--gh-border);color:var(--gh-text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:var(--gh-shadow-sm)}.instrument-toggle-button:hover{transform:translateY(-2px);box-shadow:var(--gh-shadow-md);border-color:var(--gh-accent-blue);color:var(--gh-accent-blue)}.instrument-toggle-button:active{transform:translateY(1px);box-shadow:var(--gh-shadow-sm)}