:root{--text-primary-colour: #eBeBeB;--text-secondary-colour: #b9b9b9;--text-accent-colour: rgb(52, 53, 65);--background-primary-colour: rgb(52, 53, 65);--background-secondary-colour: rgb(0, 0, 0);--background-accent-colour: rgb(228, 228, 228);--font-family: "Calibri", sans-serif;--base-spacing: 8px}*,*:before,*:after{box-sizing:border-box}html,body,#root,#RootApplicationContainer{width:100%;max-width:100%}body{font-family:Calibri,sans-serif;background-color:var(--background-primary-colour);color:var(--text-primary-colour);margin:0;-webkit-user-select:none;user-select:none;overflow-x:clip}#RootApplicationContainer{text-align:center;overflow-x:clip}#AppicationIcon{width:10;height:10}#headerSpacer{height:20px}.Header-container{width:100%;max-width:100%;display:flex;justify-content:space-between;align-items:center;margin:0;padding:2em;background-color:var(--background-secondary-colour);color:var(--text-secondary-colour);box-sizing:border-box}nav{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap}.headerNavigationButton{white-space:nowrap;text-wrap:nowrap;display:flex;justify-content:center;gap:10px;flex-direction:row;background-color:var(--background-secondary-colour);color:#fff;text-decoration:none;font-size:1em;padding:10px 15px;border-radius:5px;border:1px solid var(--background-primary-colour);transition:background-color .5s,color .5s}.headerNavigationButton:hover{border:1px solid var(--background-secondary-colour);background-color:var(--background-primary-colour)}.headerNavigationButton:active{color:var(--text-secondary-colour)}@media screen and (max-width: 600px){.Header-container{flex-direction:column;padding:1em;width:100%}nav{width:100%;margin-top:1em;justify-content:center}.headerNavigationButton{padding:8px 12px;font-size:.9em}}.signInWithGoogleButton,.signInWithFacebookButton,.signInButton,.signOutButton{text-wrap:nowrap;white-space:nowrap;border:1px solid var(--background-secondary-colour);background-color:#000;color:var(--text-primary-colour);border:1px solid var(--background-primary-colour);margin-top:15px;margin-left:15px;cursor:pointer;text-decoration:none;font-size:1em;padding:10px 15px;border-radius:5px;transition:background-color .3s,color .3s}.signInWithGoogleButton:hover,.signInWithFacebookButton:hover,.signInButton:hover,.signOutButton:hover{box-shadow:0 4px 10px #0003;border:1px solid var(--background-secondary-colour);background-color:var(--background-primary-colour)}.signInWithGoogleButton:active,.signInWithFacebookButton:active,.signInButton:active,.signOutButton:active{color:var(--text-secondary-colour);background-color:var(--background-secondary-colour);border:1px solid var(--background-secondary-colour);box-shadow:0 1px 3px #0003}.Header-container nav a{color:var(--text-primary-colour);text-decoration:none;font-size:1em;padding:10px 15px;border-radius:5px;border:1px solid var(--background-primary-colour);transition:background-color .3s,color .3s}.Header-container nav a:hover{border:1px solid var(--background-secondary-colour);background-color:var(--background-primary-colour)}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.popup-container{background:#fff;border-radius:16px;box-shadow:0 8px 30px #0000001a;width:100%;max-width:400px;position:relative;animation:slideIn .3s ease-out}.popup-content{padding:2rem}.close-button{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.8rem;cursor:pointer;color:#666;padding:8px;line-height:1;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease;background-color:#0000000d;z-index:1}.close-button:hover{color:#333;background-color:#0000001a}h2{margin:0 0 .5rem;font-size:1.8rem;color:#333}.subtitle{color:#666;margin-bottom:2rem;text-align:center}.social-button{width:100%;padding:12px;margin:8px 0;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:500;transition:transform .1s ease,background-color .2s ease}.social-button:hover{transform:translateY(-1px)}.social-button:active{transform:translateY(0)}.google{background:#4285f4;color:#fff}.facebook{background:#3b5998;color:#fff}.social-icon{margin-right:8px;width:20px;height:20px}.divider{display:flex;align-items:center;margin:1.5rem 0}.divider-line{flex:1;height:1px;background:#ddd}.divider-text{padding:0 1rem;color:#666;font-size:.9rem}.email-button{width:100%;padding:12px;background:#f0f0f0;border:none;border-radius:8px;cursor:pointer;font-weight:500;color:#333}.email-button:hover{background:#e0e0e0}.terms{font-size:.75rem;color:#666;text-align:center;margin-top:1.5rem}.terms a{color:#4285f4;text-decoration:none}.upgrade-button{padding:10px 20px;font-size:16px;color:#fff;background-color:var(--background-primary-colour);border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease-in-out}.checkout-form-container{width:100%;margin-top:20px}.page-container{padding:20px;width:85%;max-width:800px;margin:3em auto 0;background-color:#f9f9f9;border-radius:4px}.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;text-decoration:none}a:hover{color:#007bff;cursor:pointer;text-decoration:none}.home-container{padding:20px;max-width:800px;margin:3em auto 0;background-color:#f9f9f9;border-radius:10px;box-shadow:0 2px 4px #0000001a}.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: .5rem;--border-radius: .5rem;--font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-size: .9rem}[id$=Selector],#lastNote,#currentKey,#lastChordNote,#currentChord{display:block;width:var(--control-width);margin:.5rem auto;padding:var(--primary-padding);text-align:left;font-family:var(--font-stack);font-size:var(--font-size);color:#222;background:var(--control-bg);border:2px solid var(--border-color);border-radius:var(--border-radius);transition:opacity .2s ease;opacity:0;pointer-events:none}#chordSelector,#keySelector,#inversionSelector{width:calc(var(--control-width) + 20px);margin-bottom:.75rem}#piano{display:grid;place-content:center;min-height:7.5rem;padding:1rem 0}#wrapper{text-align:center;font-size:1.75rem;font-family:var(--font-stack);padding:1rem}[id$=Selector]:focus{outline:2px solid #007bff;outline-offset:2px}[id$=Selector],.control-item{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: .75rem}#wrapper{font-size:1.25rem}}#keyPianoWrapper,#chordPianoWrapper{min-height:200px;align-self:center;justify-self:center;font-size:21px}.chordHighlighted.white{color:#000;background:#ff8787;padding-top:75px;height:155px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.chordHighlighted.black{color:#000;background:#ff7070;height:84px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.chordPrimaryHighlighted.white{color:#000;background:#ffc38a;padding-top:80px;height:150px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.chordPrimaryHighlighted.black{color:#000;background:#ffbe6f;height:84px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.keyHighlighted.white{background:#92ffdb;padding-top:80px;height:150px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.keyHighlighted.black{color:#e0e0e0;background:#005f3f;height:84px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.keyPressed.white{background:#ff7878;color:#000}.keyPressed.black{background:#610000}.keyPressed.white.keyHighlighted{background:#82cdff}.keyPressed.black.keyHighlighted{background:#004d6b}.black{font-weight:600;font-size:45%;width:1px;height:77px;background:radial-gradient(circle at center,#333,#000);border:1px solid rgba(160,160,160,.7);color:#e0e0e0;box-shadow:0 4px 6px #00000080;position:absolute;margin:0 0 0 -18px;padding-right:30px;padding-top:40px;padding-bottom:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;transform-origin:top center;z-index:2;transition:transform .2s;overflow:hidden}.white{color:#000;font-size:70%;width:40px;height:140px;background:linear-gradient(to bottom,#fff,#f0f0f0);border:none;box-shadow:2px 4px 8px #0000004d;padding-top:90px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;transform-origin:top center;z-index:1;transition:transform .2s}.white:hover,.black:hover{transform:scale(1.05)}.circle-of-fifths-panel{width:min(100%,36rem);max-width:calc(100vw - 1rem);margin:1.5rem auto;padding:1.25rem;color:var(--text-primary-colour);background:radial-gradient(circle at top,rgba(255,255,255,.08),transparent 42%),linear-gradient(160deg,#272831fa,#16161af5);border:1px solid rgba(235,235,235,.12);border-radius:1.5rem;box-shadow:0 1.2rem 2.8rem #00000047}.circle-of-fifths-header{margin-bottom:1rem}.circle-of-fifths-kicker,.circle-of-fifths-caption{margin:0}.circle-of-fifths-kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary-colour)}.circle-of-fifths-caption{margin-top:.35rem;color:var(--text-secondary-colour)}.circle-of-fifths-wheel{position:relative;width:min(100%,34rem);height:auto;aspect-ratio:1 / 1;margin:0 auto;border-radius:50%;background:radial-gradient(circle,rgba(25,25,30,.96) 0 24%,rgba(228,228,228,.08) 25%,transparent 26%),radial-gradient(circle,transparent 0 46%,rgba(235,235,235,.1) 47%,rgba(235,235,235,.03) 48%,transparent 49%),radial-gradient(circle,transparent 0 70%,rgba(235,235,235,.12) 71%,rgba(235,235,235,.04) 72%,transparent 73%)}.circle-of-fifths-ring{position:absolute;top:50%;left:50%;border:1px dashed rgba(235,235,235,.1);border-radius:50%;transform:translate(-50%,-50%)}.circle-of-fifths-ring--outer{width:78%;height:78%}.circle-of-fifths-ring--inner{width:54%;height:54%}.circle-of-fifths-label{position:absolute;min-width:3rem;padding:.3rem .55rem;transform:translate(-50%,-50%);font:inherit;border:1px solid rgba(235,235,235,.09);border-radius:999px;background:#e4e4e4f5;color:var(--text-accent-colour);box-shadow:0 .6rem 1.4rem #0003;line-height:1.1;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.circle-of-fifths-label--major{font-size:.84rem;font-weight:700}.circle-of-fifths-label--minor{font-size:.72rem}.circle-of-fifths-label.is-selected{background:linear-gradient(180deg,#92ffdbf2,#5bd4aeeb);color:#1b2e25;border-color:#92ffdbf2}.circle-of-fifths-label:hover{border-color:#92ffdb73;transform:translate(-50%,-50%) scale(1.03)}.circle-of-fifths-label:focus-visible{outline:2px solid rgba(146,255,219,.95);outline-offset:2px}.circle-of-fifths-centre{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;width:6.5rem;height:6.5rem;transform:translate(-50%,-50%);border-radius:50%;background:#343541fa;border:1px solid rgba(235,235,235,.12);box-shadow:inset 0 0 0 1px #ffffff08}.circle-of-fifths-centre-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary-colour)}.circle-of-fifths-centre strong{margin-top:.3rem;max-width:5.4rem;font-size:1.15rem;line-height:1.15;text-align:center}.circle-of-fifths-centre-context{margin-top:.3rem;max-width:5.6rem;font-size:.7rem;line-height:1.25;color:var(--text-secondary-colour)}@media (max-width: 620px){.circle-of-fifths-panel{padding:1rem .75rem}.circle-of-fifths-wheel{width:min(100%,28rem);height:auto}.circle-of-fifths-label{min-width:2.5rem;padding:.22rem .4rem}.circle-of-fifths-label--major{font-size:.67rem}.circle-of-fifths-label--minor{font-size:.58rem}.circle-of-fifths-centre{width:4.8rem;height:4.8rem}.circle-of-fifths-centre strong{font-size:1.05rem}.circle-of-fifths-centre-context{max-width:4.3rem;font-size:.58rem}}.key-reference-panel{width:min(100%,36rem);max-width:calc(100vw - 1rem);margin:1.5rem auto;padding:1.25rem;color:var(--text-primary-colour);background:radial-gradient(circle at top left,rgba(255,255,255,.06),transparent 38%),linear-gradient(160deg,#2d2e39fa,#1a1a1ff5);border:1px solid rgba(235,235,235,.1);border-radius:1.5rem;box-shadow:0 1.1rem 2.4rem #00000038}.key-reference-header{margin-bottom:1rem}.key-reference-kicker,.key-reference-caption,.key-reference-harmony-header h3,.key-reference-harmony-header p{margin:0}.key-reference-kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary-colour)}.key-reference-caption{margin-top:.35rem;color:var(--text-secondary-colour)}.key-reference-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.85rem}.key-reference-card,.key-reference-degree{padding:.9rem;border-radius:1rem;background:#e4e4e4f2;color:var(--text-accent-colour);box-shadow:inset 0 0 0 1px #3435410d}.key-reference-card-label,.key-reference-degree-roman,.key-reference-degree-chord{display:block}.key-reference-card-label,.key-reference-degree-chord{font-size:.78rem;color:#343541b8}.key-reference-card-value{display:block;margin-top:.25rem;font-size:1.15rem}.key-reference-harmony{margin-top:1rem}.key-reference-harmony-header p{margin-top:.3rem;color:var(--text-secondary-colour)}.key-reference-harmony-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.25rem,1fr));gap:.75rem;margin-top:.9rem}.key-reference-degree-note{display:block;margin-top:.2rem;font-size:1.05rem}@media (min-width: 1120px){.key-learning-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;align-items:start;width:min(95vw,74rem);margin:1.25rem auto 0}.key-learning-layout .circle-of-fifths-panel,.key-learning-layout .key-reference-panel{width:auto;margin:0}}.arpeggiator-panel{width:min(100%,74rem);max-width:calc(100vw - 1rem);margin:1.5rem auto;padding:1.25rem;color:var(--text-primary-colour);background:radial-gradient(circle at top right,rgba(146,255,219,.08),transparent 34%),linear-gradient(160deg,#2d2e39fa,#16171cf7);border:1px solid rgba(235,235,235,.1);border-radius:1.5rem;box-shadow:0 1rem 2.4rem #0003}.arpeggiator-header,.arpeggiator-caption,.arpeggiator-kicker{margin:0}.arpeggiator-kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary-colour)}.arpeggiator-caption{margin-top:.35rem;color:var(--text-secondary-colour)}.arpeggiator-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.85rem;margin-top:1rem}.arpeggiator-card,.arpeggiator-preview{padding:.9rem 1rem;border-radius:1rem;background:#e4e4e4f2;color:var(--text-accent-colour);box-shadow:inset 0 0 0 1px #3435410d}.arpeggiator-card-label,.arpeggiator-preview-label,.arpeggiator-field span{display:block;font-size:.78rem;color:#343541b8}.arpeggiator-card-value{display:block;margin-top:.25rem;font-size:1.1rem}.arpeggiator-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1rem}.arpeggiator-field{display:block;text-align:left}.arpeggiator-field select,.arpeggiator-field input[type=range]{width:100%;margin-top:.45rem}.arpeggiator-field select{padding:.75rem .9rem;border:1px solid rgba(235,235,235,.16);border-radius:.85rem;color:var(--text-primary-colour);background:#343541f2}.arpeggiator-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.arpeggiator-pattern{margin-top:1rem;padding:1rem;border:1px solid rgba(235,235,235,.1);border-radius:1.1rem;background:#12131859}.arpeggiator-pattern-header h3,.arpeggiator-pattern-header p{margin:0}.arpeggiator-pattern-header p{margin-top:.35rem;color:var(--text-secondary-colour)}.arpeggiator-pattern-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.85rem;margin-top:1rem}.arpeggiator-step{display:block;text-align:left;padding:.9rem;border-radius:1rem;background:#e4e4e414;border:1px solid rgba(235,235,235,.08)}.arpeggiator-step span{display:block;font-size:.78rem;color:var(--text-secondary-colour)}.arpeggiator-step-current{display:block;margin-top:.2rem;color:var(--text-primary-colour)}.arpeggiator-step-inversions{margin-top:.9rem}.arpeggiator-step-subtitle{display:block;font-size:.76rem;color:var(--text-secondary-colour)}.arpeggiator-step-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.4rem,1fr));gap:.45rem;margin-top:.8rem}.arpeggiator-step-buttons--compact{grid-template-columns:repeat(3,minmax(0,1fr))}.arpeggiator-degree-button{padding:.55rem .45rem;border:1px solid rgba(235,235,235,.14);border-radius:.8rem;background:#343541eb;color:var(--text-primary-colour);cursor:pointer;text-align:center}.arpeggiator-degree-button span,.arpeggiator-degree-button strong{display:block}.arpeggiator-degree-button strong{margin-top:.12rem;font-size:.86rem}.arpeggiator-degree-button.is-selected{border-color:#92ffdbf2;background:linear-gradient(180deg,#92ffdbf2,#64dfb7e6);color:#163328}.arpeggiator-degree-button:disabled{cursor:default;opacity:.45}.arpeggiator-actions button{min-width:8.5rem;padding:.8rem 1rem;border:1px solid rgba(146,255,219,.18);border-radius:999px;color:#163328;background:linear-gradient(180deg,#92ffdbfa,#64dfb7f0);font-weight:700;cursor:pointer}.arpeggiator-actions button:disabled{cursor:default;opacity:.45}.arpeggiator-preview{margin-top:1rem;text-align:left}.arpeggiator-preview strong{display:block;margin-top:.25rem;font-size:1.05rem}@media (max-width: 620px){.arpeggiator-panel{padding:1rem}.arpeggiator-actions button{width:100%}}.Contact-Container{display:flex;flex-direction:column;align-items:center}form{margin:0;display:flex;flex-direction:column}textarea{height:150px;padding:15px;box-sizing:border-box;max-width:840px;width:95vw;border:1px solid #ccc;margin:2em auto 0;background-color:#f9f9f9;border-radius:4px}.submitSuggestionButton{height:3em;width:7em;margin-top:20px;padding:10px 20px;border-radius:5px;cursor:pointer;background-color:var(--background-secondary-colour);border:1px solid var(--background-secondary-colour);color:#fff;text-decoration:none;transition:background-color .5s,color .5s}.submitSuggestionButton:hover{border:1px solid var(--background-secondary-colour);background-color:var(--background-primary-colour)}.submitSuggestionButton:active{color:var(--background-secondary-colour)}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000004d;color:#333;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content{position:relative;background:#ffffffe6;padding:2rem;border-radius:15px;box-shadow:0 4px 30px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:90%;width:400px;text-align:center;animation:popup .3s ease-out}.popup-content.success{border:2px solid #4CAF50}.popup-content.error{border:2px solid #f44336}.popup-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;transition:color .2s}.popup-close:hover{color:#333}@keyframes popup{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.submitSuggestionButton:disabled{background:#ccc;cursor:not-allowed;opacity:.7}.modern-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modern-popup-content{background:#fff;color:#333;padding:2rem;border-radius:12px;max-width:500px;width:90%;box-shadow:0 8px 30px #0003;animation:slideIn .3s ease-out}.success-message{text-align:center;color:#4caf50}.warning-text{color:#f44;margin:1rem 0;font-weight:500}.confirmation-input{width:100%;padding:12px;margin:1rem 0;border:2px solid #eee;border-radius:8px;font-size:1rem}.popup-buttons{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}.confirm-delete-btn{background:#f44;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease;flex:1}.confirm-delete-btn:disabled{background:#f99;cursor:not-allowed}.cancel-delete-btn{background:#f0f0f0;color:#333;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease;flex:1}.home-link{background:#4285f4;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;text-align:center;flex:1}.home-link:hover{background:#2164cf;color:#fff}.home-link:active{background:#184794;color:#fff}.delete-account-btn{min-width:20em;background:#f44;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease;margin-top:2rem}.delete-account-btn:hover{transform:translateY(-2px);background:#bd3232}.delete-account-btn:active{background:#8c2525}.cancel-delete-btn:hover{background-color:#d1d1d1}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.privacy-container{padding:20px;width:85%;max-width:800px;margin:3em auto 0;background-color:#f9f9f9;border-radius:4px}.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}