.header-container{position:relative;width:100%;height:var(--header-vh, 45.5vh);overflow:hidden;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start}.header-content-scaled{position:absolute;top:0;left:0;width:100%;height:519px;transform:scale(var(--header-scale, 1));transform-origin:top center}.toggle-circle-button{display:flex;justify-content:center;height:calc(28px*max(.6,var(--header-scale, 1)));margin-bottom:clamp(1px,.2vh,4px)}.toggle-circle-button--overlap{margin-top:calc(-28px*max(.6,var(--header-scale, 1)));position:relative;z-index:20}.toggle-circle-button .toggle-button{background:linear-gradient(135deg,var(--button-color) 0%,color-mix(in srgb,var(--button-color) 85%,black) 100%);border:none;color:#fff;padding:2px 6px;text-align:center;text-decoration:none;display:inline-block;font-size:11px;border-radius:6px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);opacity:.75;box-shadow:0 1px 4px #00000026,0 1px 2px #0000001a;position:relative;overflow:hidden;transform:scale(max(.7,var(--header-scale, 1)));transform-origin:top center}.toggle-circle-button .toggle-button:hover{background:linear-gradient(135deg,var(--hover-color) 0%,color-mix(in srgb,var(--hover-color) 85%,black) 100%);box-shadow:0 2px 8px #00000040,0 1px 4px #00000026;transform:translateY(-1px);opacity:1}.header-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.header-image-container{position:absolute;top:0;left:0;width:100%;height:100%}.App{text-align:center;padding-top:0}.App-link{color:#61dafb}.App-logo{height:40vmin;pointer-events:none}html,body{zoom:1;transform:scale(1);touch-action:manipulation}@media(prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}body{margin:0;background:linear-gradient(135deg,var(--background-color) 0%,color-mix(in srgb,var(--background-color) 90%,black) 50%,var(--background-color) 100%);background-attachment:fixed;color:#fff;overflow:hidden;position:relative;transition:background 1.2s cubic-bezier(.4,0,.2,1)}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.05) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(255,255,255,.08) 0%,transparent 50%);pointer-events:none;z-index:-1}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(255,255,255,.02) 2px,rgba(255,255,255,.02) 4px);pointer-events:none;z-index:-1;opacity:.3}@keyframes subtle-float{0%,to{transform:translateY(0) rotate(0);opacity:.8}33%{transform:translateY(-10px) rotate(1deg);opacity:1}66%{transform:translateY(5px) rotate(-.5deg);opacity:.9}}.App-header{background:linear-gradient(135deg,var(--background-color) 0%,color-mix(in srgb,var(--background-color) 85%,black) 40%,color-mix(in srgb,var(--background-color) 95%,white) 82%,var(--background-color) 100%);background-attachment:fixed;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-size:calc(10px + 2vmin);color:#fff;position:relative;overflow:hidden;transition:background 1.2s cubic-bezier(.4,0,.2,1)}.App-header.minimized-layout{justify-content:center}.App-header:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(255,255,255,.03) 0%,transparent 70%),conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(255,255,255,.02) 90deg,transparent 180deg,rgba(255,255,255,.01) 270deg,transparent 360deg);animation:rotate-slow 60s linear infinite;pointer-events:none;z-index:0}@keyframes rotate-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes key-change-glow{0%{filter:brightness(1) saturate(1);box-shadow:inset 0 0 50px #ffffff1a}50%{filter:brightness(1.2) saturate(1.3);box-shadow:inset 0 0 100px #fff3}to{filter:brightness(1) saturate(1);box-shadow:inset 0 0 50px #ffffff1a}}.key-changing{animation:key-change-glow 1.5s ease-in-out}button{padding:4px 6px;margin:0 2px;font-size:14px;cursor:pointer;background:linear-gradient(135deg,var(--button-color) 0%,color-mix(in srgb,var(--button-color) 85%,black) 100%);color:#fff;border:none;border-radius:8px;box-shadow:0 2px 8px #0003,0 1px 3px #0000001a;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}button img{pointer-events:none}.toggle-button[title]:hover:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:3px 8px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:1000;margin-bottom:5px}.toggle-button[title]:hover:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#000c;margin-bottom:0;z-index:1000}.play-buttons button{background:linear-gradient(135deg,var(--button-color) 0%,color-mix(in srgb,var(--button-color) 85%,black) 100%);box-shadow:0 2px 8px #0003,0 1px 3px #0000001a}button:hover{background:linear-gradient(135deg,var(--hover-color) 0%,color-mix(in srgb,var(--hover-color) 85%,black) 100%);box-shadow:0 4px 16px #0000004d,0 2px 8px #0003;transform:translateY(-1px)}button:active{transform:translateY(0);box-shadow:0 1px 4px #0003,0 1px 2px #0000001a}.play-buttons button:hover{background:linear-gradient(135deg,var(--hover-color) 0%,color-mix(in srgb,var(--hover-color) 85%,black) 100%);box-shadow:0 4px 16px #0000004d,0 2px 8px #0003;transform:translateY(-1px)}button.selected,.button.selected{background:linear-gradient(135deg,var(--hover-color) 0%,color-mix(in srgb,var(--hover-color) 85%,black) 100%);color:#fff;box-shadow:0 3px 12px #0000004d,0 2px 6px #0003}.text-highlight{color:var(--hover-color)}.toggle-button.active{background:linear-gradient(135deg,var(--hover-color) 0%,color-mix(in srgb,var(--hover-color) 85%,black) 100%);color:#fff;box-shadow:0 2px 8px #00000040,0 1px 4px #00000026}.button-container{display:flex;justify-content:center;margin-bottom:20px}.circle-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:855px;max-height:855px;z-index:10}.circle-button1,.circle-button2{position:absolute;width:clamp(50px,50px,50px);height:clamp(50px,50px,50px);background-color:#0000!important;background:none!important;border:none;border-radius:50%!important;transform:translate(-50%,-50%);pointer-events:all;padding:0!important;margin:0!important;box-shadow:none!important;overflow:visible!important}.fixed-viewport{width:924px;min-height:100vh;height:auto;overflow-x:auto;overflow-y:auto;margin:0 auto;-webkit-overflow-scrolling:touch}body{overflow-x:hidden}@media(max-width:768px){body{overflow-x:auto}}.circle-button1.selected,.circle-button2.selected{border:20px transparent var(--hover-color);animation:pulse 2s infinite;box-shadow:0 0 15px 10px var(--hover-color)}@keyframes pulse{0%{box-shadow:0 0 20px 5px var(--hover-color)}50%{box-shadow:0 0 40px 20px var(--hover-color)}to{box-shadow:0 0 20px 5px var(--hover-color)}}.circle-button1.selected,.circle-button2.selected{box-shadow:inset var(--hover-color),var(--hover-color),var(--hover-color),var(--hover-color)!important;background-color:#0000!important;background:none!important;transition:all .3s ease;outline:3.25px solid var(--hover-color);outline-offset:1px;transform:translate(-50%,-50%)!important}.circle-button1:hover,.circle-button2:hover{box-shadow:0 0 20px 5px var(--hover-color)!important;background-color:#ffd70040!important;background:#ffd70040!important;transition:all .25s ease;transform:translate(-50%,-50%)!important}.hover-effect-1,.hover-effect-2,.hover-effect-5{box-shadow:0 0 20px 7px var(--hover-color);background-color:#ffd70000;transition:all .25s ease}.hover-effect-3,.hover-effect-4{box-shadow:0 0 20px 6px var(--hover-color);background-color:#ffd70000;transition:all .25s ease}.degree-label{background-color:#0000001a;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--hover-color);font-family:Times New Roman,serif;-webkit-text-stroke:0px var(--hover-color);text-shadow:4px 4px 10px rgba(0,0,0,1);opacity:1;border:none;background-image:radial-gradient(circle,rgba(0,0,0,.25) 30%,rgba(0,0,0,.001) 60%,transparent 100%);background-origin:border-box;background-clip:content-box,border-box}.degree-label.major{font-size:30px;width:46px;height:46px}.degree-label.minor{font-size:20px;width:24px;height:24px}.circle-button1:hover .degree-label,.circle-button2:hover .degree-label{opacity:0;pointer-events:none;transition:opacity .2s ease}.chord-buttons,.chord-labels{display:flex;justify-content:center;flex-wrap:nowrap}.button,.label{width:80px;margin:0 5px;text-align:center;font-weight:700}.label{font-size:20px;height:20px;line-height:20px;width:80px;margin:5px 5px 0;text-align:center}.key-display{font-size:20px;color:#fff;margin:clamp(4px,1vh,8px) 0;text-align:center}.toggle-buttons{display:flex;flex-direction:column;padding-top:14px;margin-top:0;gap:6px}.toggle-buttons .toggle-button{margin-bottom:0;padding:0 3px;font-size:12px;height:26px;display:flex;align-items:center;justify-content:center}.toggle-button-row{display:flex;gap:0px;width:100%}.toggle-button-row .toggle-button{flex:1}.toggle-buttons .toggle-button img{display:block}button:disabled{background-color:7c7c7c;color:#ccc;cursor:not-allowed}.controls-area-container{position:relative;width:100%;height:var(--controls-vh, 17vh);overflow:hidden;margin:clamp(2px,.5vh,5px) auto;padding-bottom:clamp(4px,1.5vh,0px);transition:height .3s ease}.controls-content-scaled{position:absolute;top:0;left:0;width:100%;height:auto;min-height:85px;transform:scale(var(--controls-scale, 1));transform-origin:top center;transition:transform .3s ease}.fretboard-area-container{position:relative;width:100%;height:var(--fretboard-vh, 34vh);overflow:hidden;margin:0 auto;transition:height .3s ease}.fretboard-content-scaled{position:absolute;top:0;left:0;width:100%;height:315px;transform:scale(var(--fretboard-scale, 1));transform-origin:top center;transition:transform .3s ease}.fretboard-container{display:flex;justify-content:center;align-items:flex-start;width:100%;padding:clamp(2px,.5vh,4px) 24px 0}.fretboard{position:relative;padding:0 8px}.fret-label{width:44px;text-align:center;font-size:12px;font-weight:700}.fret-label-after-octave{margin-left:6px}.fret-labels{display:flex;justify-content:center;margin-left:8px}.fretboard-and-buttons-container{justify-content:center;align-items:center;width:100%;max-width:100%}.chord-and-play-buttons{display:flex;flex-direction:column;align-items:center;margin-bottom:0}.chord-buttons,.play-buttons{display:flex;justify-content:center;width:100%}.chord-and-navigation-container{display:flex;justify-content:center;align-items:flex-start;width:100%;margin-bottom:0;gap:9px}.left-controls{display:flex;flex-direction:row;gap:2px;align-items:center;padding-top:12px}.chord-section{flex:0 1 auto;text-align:center}.right-controls{display:flex;flex-direction:row;gap:3px;align-items:center;padding-top:12px}.left-controls .toggle-button,.right-controls .toggle-button{margin-bottom:0;padding:6px 8px;font-size:12px;position:relative}.arrow-button{background:linear-gradient(135deg,var(--button-color) 0%,color-mix(in srgb,var(--button-color) 85%,black) 100%);border:0px solid var(--button-color);border-radius:6px;box-shadow:0 2px 8px #0003,0 1px 3px #0000001a,0 0 10px var(--button-color),0 0 20px var(--button-color);padding:0;width:20px;height:20px;min-width:20px;max-width:20px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.arrow-button:hover:not(:disabled){background:linear-gradient(135deg,var(--hover-color) 0%,color-mix(in srgb,var(--hover-color) 85%,black) 100%);border-color:var(--hover-color);box-shadow:0 4px 16px #0000004d,0 2px 8px #0003,0 0 15px var(--hover-color),0 0 30px var(--hover-color);transform:translateY(-1px) scale(1.02)}.arrow-button:active:not(:disabled){transform:translateY(0) scale(1.01);box-shadow:0 1px 4px #0003,0 1px 2px #0000001a,0 0 10px var(--hover-color),0 0 20px var(--hover-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinning-find-icon,.spinning-select-icon{animation:spin 10s linear infinite}.arrow-button:disabled{background-color:#7c7c7c;border-color:#999;box-shadow:none;opacity:.5}.arrow-button img{filter:brightness(0) invert(1);display:block;margin:0 auto}.chord-buttons button,.play-buttons button{width:80px;margin:0 4px;text-align:center;font-weight:700}.play-buttons{margin-top:10px}.chord-grid{display:flex;grid-template-columns:repeat(20,auto);grid-template-rows:repeat(2,1fr);gap:5px 5px;text-align:center;justify-content:start;width:max-content;margin:0 auto;padding-top:10px;font-size:20px;font-weight:700}.chord-name,.chord-degree{white-space:nowrap;padding:2px 4px}.chord-name{grid-row:1}.chord-degree{grid-row:2}.note-label{position:absolute;top:2px;left:2px;font-size:9px;color:#fff;font-weight:700}.fretboard{display:flex;flex-direction:column;align-items:center;margin-top:0}.string{display:flex;justify-content:center;margin-bottom:5px}.fret{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--background-color);margin-right:2px;border-radius:4px;background-color:var(--background-color);position:relative;cursor:pointer;transition:background-color .3s;color:#fff;box-sizing:border-box}.fret:hover{opacity:.8}.fret.open-note,.fret.octave-separator{margin-right:7px}.fret.open-note:after,.fret.octave-separator:after{content:"";position:absolute;top:0;right:-6px;width:3px;height:100%;background-color:var(--button-color)}.fret:last-child{margin-right:0}.fret.selected{border:2px solid #fff!important;box-shadow:0 0 8px #fffc}.note{color:#fff;font-weight:700;font-size:22px}.note-sharp-flat{font-size:18px}.tab-popup-overlay{position:fixed;inset:0;background-color:#000000d9;display:flex;justify-content:center;align-items:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.tab-popup-container{background-color:#1a1a1a;border:2px solid #444;border-radius:12px;padding:24px;max-width:90vw;max-height:90vh;overflow:auto;box-shadow:0 8px 32px #00000080;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.tab-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #444}.tab-popup-header h2{margin:0;color:#fff;font-size:24px;font-weight:700}.tab-popup-close{background:none;border:none;color:#aaa;font-size:28px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.tab-popup-close:hover{background-color:#444;color:#fff}.tab-popup-chord-names{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:20px;padding:12px;background-color:#ffffff0d;border-radius:8px}.tab-chord-name{padding:6px 14px;background-color:#4a90e24d;border:1px solid rgba(74,144,226,.5);border-radius:6px;color:#fff;font-weight:700;font-size:14px}.tab-popup-content{background-color:#000;border:2px solid #444;border-radius:8px;padding:24px;margin-bottom:20px;overflow-x:auto}.tab-display{font-family:Courier New,Courier,monospace;font-size:16px;line-height:1.8;color:#fff;margin:0;white-space:pre;letter-spacing:.05em}.tab-popup-footer{display:flex;flex-direction:column;align-items:center;gap:12px}.tab-copy-button{background:linear-gradient(135deg,#4a90e2,#357abd);color:#fff;border:none;padding:12px 32px;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #4a90e24d}.tab-copy-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #4a90e266}.tab-copy-button:active{transform:translateY(0)}.tab-instruction{margin:0;color:#aaa;font-size:14px;font-style:italic}.tab-popup-container::-webkit-scrollbar,.tab-popup-content::-webkit-scrollbar{width:10px;height:10px}.tab-popup-container::-webkit-scrollbar-track,.tab-popup-content::-webkit-scrollbar-track{background:#1a1a1a;border-radius:5px}.tab-popup-container::-webkit-scrollbar-thumb,.tab-popup-content::-webkit-scrollbar-thumb{background:#444;border-radius:5px}.tab-popup-container::-webkit-scrollbar-thumb:hover,.tab-popup-content::-webkit-scrollbar-thumb:hover{background:#555}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}