:root{--text-primary-colour:#ebebeb;--text-secondary-colour:#b9b9b9;--text-accent-colour:#343541;--background-primary-colour:#343541;--background-secondary-colour:#000;--background-accent-colour:#e4e4e4;--font-family:"Calibri",sans-serif;--base-spacing:8px}body{background-color:#343541;background-color:var(--background-primary-colour);color:#ebebeb;color:var(--text-primary-colour);font-family:Calibri,sans-serif;margin:0;min-width:380px}#RootApplicationContainer{text-align:center}#AppicationIcon{height:10;width:10}#headerSpacer{height:20px}.Header-container{align-items:center;background-color:var(--background-secondary-colour);color:var(--text-secondary-colour);display:flex;justify-content:space-between;margin:0;min-width:380px;padding:2em}.headerNavigationButton,nav{display:flex;flex-direction:row;gap:10px}.headerNavigationButton{text-wrap:nowrap;background-color:var(--background-secondary-colour);border:1px solid var(--background-primary-colour);border-radius:5px;color:#fff;font-size:1em;justify-content:center;padding:10px 15px;text-decoration:none;transition:background-color .5s,color .5s;white-space:nowrap}.headerNavigationButton:hover{background-color:var(--background-primary-colour);border:1px solid var(--background-secondary-colour)}.headerNavigationButton:active{color:var(--text-secondary-colour)}@media screen and (max-width:600px){.Header-container{flex-direction:column;padding:1em}nav{margin-top:1em}.headerNavigationButton{font-size:.9em;padding:8px 12px}}.signInButton,.signInWithFacebookButton,.signInWithGoogleButton,.signOutButton{text-wrap:nowrap;background-color:#000;border:1px solid var(--background-primary-colour);border-radius:5px;color:var(--text-primary-colour);cursor:pointer;font-size:1em;margin-left:15px;margin-top:15px;padding:10px 15px;text-decoration:none;transition:background-color .3s,color .3s;white-space:nowrap}.signInButton:hover,.signInWithFacebookButton:hover,.signInWithGoogleButton:hover,.signOutButton:hover{background-color:var(--background-primary-colour);border:1px solid var(--background-secondary-colour);box-shadow:0 4px 10px #0003}.signInButton:active,.signInWithFacebookButton:active,.signInWithGoogleButton:active,.signOutButton:active{background-color:var(--background-secondary-colour);border:1px solid var(--background-secondary-colour);box-shadow:0 1px 3px #0003;color:var(--text-secondary-colour)}.Header-container nav a{border:1px solid var(--background-primary-colour);border-radius:5px;color:var(--text-primary-colour);font-size:1em;padding:10px 15px;text-decoration:none;transition:background-color .3s,color .3s}.Header-container nav a:hover{background-color:var(--background-primary-colour);border:1px solid var(--background-secondary-colour)}.popup-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080}.popup-container{animation:slideIn .3s ease-out;background:#fff;border-radius:16px;box-shadow:0 8px 30px #0000001a;max-width:400px;position:relative;width:100%}.close-button{align-items:center;background:none;background-color:#0000000d;border:none;border-radius:50%;color:#666;cursor:pointer;display:flex;font-size:1.8rem;height:40px;justify-content:center;line-height:1;padding:8px;position:absolute;right:16px;top:16px;transition:all .3s ease;width:40px;z-index:1}.close-button:hover{background-color:#0000001a;color:#333}h2{color:#333;font-size:1.8rem;margin:0 0 .5rem}.subtitle{color:#666;margin-bottom:2rem;text-align:center}.social-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-weight:500;justify-content:center;margin:8px 0;padding:12px;transition:transform .1s ease,background-color .2s ease;width:100%}.social-button:hover{transform:translateY(-1px)}.social-button:active{transform:translateY(0)}.google{background:#4285f4;color:#fff}.facebook{background:#3b5998;color:#fff}.social-icon{height:20px;margin-right:8px;width:20px}.divider{align-items:center;display:flex;margin:1.5rem 0}.divider-line{background:#ddd;flex:1 1;height:1px}.divider-text{color:#666;font-size:.9rem;padding:0 1rem}.email-button{background:#f0f0f0;border:none;border-radius:8px;color:#333;cursor:pointer;font-weight:500;padding:12px;width:100%}.email-button:hover{background:#e0e0e0}.terms{color:#666;font-size:.75rem;margin-top:1.5rem;text-align:center}.terms a{color:#4285f4;text-decoration:none}.upgrade-button{background-color:var(--background-primary-colour);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;padding:10px 20px;transition:background-color .2s ease-in-out}.checkout-form-container{margin-top:20px;width:100%}.page-container{background-color:#f9f9f9;border-radius:4px;margin:3em auto 0;max-width:800px;padding:20px;width:85%}.page-container h1{color:#333;margin-bottom:16px}.page-container p{color:#666;line-height:1.6;margin-bottom:16px;text-align:left}a{color:#3194ff}a,a:hover{text-decoration:none}a:hover{color:#007bff;cursor:pointer}.home-container{background-color:#f9f9f9;border-radius:10px;box-shadow:0 2px 4px #0000001a;margin:3em auto 0;max-width:800px;padding:20px}.home-container h1{color:#333;margin-bottom:16px}.home-container p{color:#666;line-height:1.6;margin-bottom:16px;text-align:left}.home-container a{color:#3194ff;text-decoration:none}.home-container a:hover{color:#007bff;cursor:pointer;text-decoration:none}:root{--control-width:160px;--control-bg:#f0f0f0;--border-color:#e3e3e3;--primary-padding:0.5rem;--border-radius:0.5rem;--font-stack:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;--font-size:0.9rem}#currentChord,#currentKey,#lastChordNote,#lastNote,[id$=Selector]{background:#f0f0f0;background:var(--control-bg);border:2px solid #e3e3e3;border:2px solid var(--border-color);border-radius:.5rem;border-radius:var(--border-radius);color:#222;display:block;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-family:var(--font-stack);font-size:.9rem;font-size:var(--font-size);margin:.5rem auto;opacity:0;padding:.5rem;padding:var(--primary-padding);pointer-events:none;text-align:left;transition:opacity .2s ease;width:160px;width:var(--control-width)}#chordSelector,#inversionSelector,#keySelector{margin-bottom:.75rem;width:180px;width:calc(var(--control-width) + 20px)}#piano{display:grid;min-height:7.5rem;padding:1rem 0;place-content:center}#wrapper{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-family:var(--font-stack);font-size:1.75rem;padding:1rem;text-align:center}[id$=Selector]:focus{outline:2px solid #007bff;outline-offset:2px}.control-item,[id$=Selector]{opacity:0;pointer-events:none;transition:opacity .2s ease}.is-visible{opacity:1!important;pointer-events:all!important}@media (max-width:480px){:root{--control-width:90%;--primary-padding:0.75rem}#wrapper{font-size:1.25rem}}#chordPianoWrapper,#keyPianoWrapper{align-self:center;font-size:21px;justify-self:center;min-height:200px}.chordHighlighted.white{background:#ff8787;height:155px;padding-top:75px}.chordHighlighted.black,.chordHighlighted.white{border-bottom-left-radius:5px;border-bottom-right-radius:5px;color:#000}.chordHighlighted.black{background:#ff7070;height:84px}.chordPrimaryHighlighted.white{background:#ffc38a;height:150px;padding-top:80px}.chordPrimaryHighlighted.black,.chordPrimaryHighlighted.white{border-bottom-left-radius:5px;border-bottom-right-radius:5px;color:#000}.chordPrimaryHighlighted.black{background:#ffbe6f;height:84px}.keyHighlighted.white{background:#92ffdb;height:150px;padding-top:80px}.keyHighlighted.black,.keyHighlighted.white{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.keyHighlighted.black{background:#005f3f;color:#e0e0e0;height:84px}.keyPressed.white{background:#ff7878;color:#000}.keyPressed.black{background:#610000}.keyPressed.white.keyHighlighted{background:#82cdff}.keyPressed.black.keyHighlighted{background:#004d6b}.black{background:radial-gradient(circle at center,#333,#000);border:1px solid #a0a0a0b3;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 4px 6px #00000080;color:#e0e0e0;font-size:45%;font-weight:600;height:77px;margin:0 0 0 -18px;overflow:hidden;padding-bottom:0;padding-right:30px;padding-top:40px;position:absolute;width:1px;z-index:2}.black,.white{transform-origin:top center;transition:transform .2s}.white{background:linear-gradient(180deg,#fff,#f0f0f0);border:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;box-shadow:2px 4px 8px #0000004d;color:#000;font-size:70%;height:140px;padding-top:90px;width:40px;z-index:1}.black:hover,.white:hover{transform:scale(1.05)}.Contact-Container{align-items:center}.Contact-Container,form{display:flex;flex-direction:column}form{margin:0}textarea{background-color:#f9f9f9;border:1px solid #ccc;border-radius:5px;border-radius:4px;box-sizing:border-box;height:150px;margin:2em auto 0;max-width:840px;padding:15px;width:95vw}.submitSuggestionButton{background-color:var(--background-secondary-colour);border:1px solid var(--background-secondary-colour);border-radius:5px;color:#fff;cursor:pointer;height:3em;margin-top:20px;padding:10px 20px;text-decoration:none;transition:background-color .5s,color .5s;width:7em}.submitSuggestionButton:hover{background-color:var(--background-primary-colour);border:1px solid var(--background-secondary-colour)}.submitSuggestionButton:active{color:var(--background-secondary-colour)}.popup-overlay{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0000004d;bottom:0;color:#333;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.popup-content{animation:popup .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffe6;border-radius:15px;box-shadow:0 4px 30px #0000001a;max-width:90%;padding:2rem;position:relative;text-align:center;width:400px}.popup-content.success{border:2px solid #4caf50}.popup-content.error{border:2px solid #f44336}.popup-close{background:none;border:none;color:#666;cursor:pointer;font-size:1.5rem;position:absolute;right:10px;top:10px;transition:color .2s}.popup-close:hover{color:#333}@keyframes popup{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.submitSuggestionButton:disabled{background:#ccc;cursor:not-allowed;opacity:.7}.modern-popup-overlay{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modern-popup-content{animation:slideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 8px 30px #0003;color:#333;max-width:500px;padding:2rem;width:90%}.success-message{color:#4caf50;text-align:center}.warning-text{color:#f44;font-weight:500;margin:1rem 0}.confirmation-input{border:2px solid #eee;border-radius:8px;font-size:1rem;margin:1rem 0;padding:12px;width:100%}.popup-buttons{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}.confirm-delete-btn{background:#f44;border:none;border-radius:8px;color:#fff;cursor:pointer;flex:1 1;padding:12px 24px;transition:background .2s ease}.confirm-delete-btn:disabled{background:#f99;cursor:not-allowed}.cancel-delete-btn{background:#f0f0f0;border:none;color:#333;cursor:pointer;transition:background .2s ease}.cancel-delete-btn,.home-link{border-radius:8px;flex:1 1;padding:12px 24px}.home-link{background:#4285f4;color:#fff;text-align:center;text-decoration:none}.home-link:hover{background:#2164cf;color:#fff}.home-link:active{background:#184794;color:#fff}.delete-account-btn{background:#f44;border:none;border-radius:8px;color:#fff;cursor:pointer;margin-top:2rem;min-width:20em;padding:12px 24px;transition:transform .2s ease}.delete-account-btn:hover{background:#bd3232;transform:translateY(-2px)}.delete-account-btn:active{background:#8c2525}.cancel-delete-btn:hover{background-color:#d1d1d1}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.privacy-container{background-color:#f9f9f9;border-radius:4px;margin:3em auto 0;max-width:800px;padding:20px;width:85%}.privacy-container h1{color:#333;margin-bottom:16px}.privacy-container p{color:#666;line-height:1.6;margin-bottom:16px;text-align:left}.privacy-container a{color:#007bff;text-decoration:none}.privacy-container a:hover{color:#0059b9;cursor:pointer;text-decoration:none}
/*# sourceMappingURL=main.9f920e23.css.map*/