.app-container{flex-direction:column;flex:1;display:flex}.extra-page{max-width:800px;margin:0 auto;padding:2rem}.extra-page .page-content h1{margin-bottom:1rem;font-size:2rem}.extra-page .page-content h2{margin-top:2rem;margin-bottom:1rem;font-size:1.5rem}.extra-page .page-content h3{margin-top:1.5rem;margin-bottom:.75rem;font-size:1.25rem}.extra-page .page-content p{margin-bottom:1rem;line-height:1.6}.extra-page .page-content ul{margin-bottom:1rem;padding-left:2rem}.extra-page .page-content ul li{margin-bottom:.5rem;line-height:1.6}.extra-page .page-content a{color:#4caf50;text-decoration:underline}.extra-page .page-content a:hover{color:#45a049}.extra-page .page-content .version{color:#ffffffb3;margin-top:2rem;font-size:.9rem}.footer{text-align:center;background-color:#222;border-top:1px solid #ffffff1a;flex-shrink:0;margin-top:auto;padding:20px}.footer .footer-links{flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:10px;display:flex}.footer .footer-link{color:#fff;cursor:pointer;background:0 0;border:none;font-size:14px;text-decoration:none;transition:color .2s}.footer .footer-link:hover{color:#4caf50;text-decoration:underline}.footer .footer-copyright{color:#ffffff80;margin:0;font-size:12px}.guess-input{flex-direction:column;gap:10px;width:100%;max-width:fit-content;margin:0 auto;display:flex}.guess-row{flex-wrap:nowrap;justify-content:center;gap:10px;display:flex}.guess-box{aspect-ratio:1;min-width:0;font-size:clamp(10px, 100vw / var(--num-boxes) * .25, 24px);text-align:center;color:#fff;appearance:none;-webkit-tap-highlight-color:transparent;text-overflow:clip;white-space:nowrap;box-sizing:border-box;background-color:#333;border:2px solid #555;border-radius:5px;outline:none;flex:0 80px;padding:2px;font-weight:700;transition:border-color .3s;overflow:hidden;opacity:1!important}.guess-box.enharmonic{font-size:clamp(8px, 100vw / var(--num-boxes) * .18, 20px)}.guess-box:focus{border-color:#777}.guess-box.correct{--final-bg-color:#4caf50;--final-border-color:#4caf50;animation:.5s ease-in-out forwards reveal;opacity:1!important}.guess-box.present{--final-bg-color:#ffc107;--final-border-color:#ffc107;animation:.5s ease-in-out forwards reveal;opacity:1!important}.guess-box.absent{--final-bg-color:#555;--final-border-color:#555;animation:.5s ease-in-out forwards reveal;opacity:1!important}@keyframes reveal{0%{color:#fff;background-color:#333;border-color:#555;transform:rotateX(0)}50%{color:#0000;background-color:#333;border-color:#333;transform:rotateX(90deg)}to{background-color:var(--final-bg-color);color:#fff;border-color:var(--final-border-color);transform:rotateX(0)}}.submit-button{cursor:pointer;color:#fff;background-color:#555;border:none;border-radius:5px;padding:10px 20px;font-size:24px;font-weight:700;transition:background-color .3s}.submit-button:hover:not(:disabled){background-color:#777}.submit-button:disabled{cursor:not-allowed;opacity:.5;background-color:#555}.game{box-sizing:border-box;background-color:#333;border-radius:5px;flex-direction:column;justify-content:flex-start;align-items:center;gap:40px;width:500px;max-width:calc(100vw - 40px);margin:20px auto;padding:40px 10px;display:flex}.play-button{cursor:pointer;color:#fff;background-color:#555;border:none;border-radius:5px;padding:10px 20px;font-size:24px;font-weight:700;transition:background-color .3s}.play-button:hover:not(:disabled){background-color:#777}.play-button:disabled{cursor:not-allowed;opacity:.5;background-color:#555}.play-button{align-items:center;gap:.4em;display:inline-flex}.play-button .play-icon{flex-shrink:0}.result{text-align:center;border-radius:8px;margin:20px auto;padding:20px;animation:.5s ease-out forwards slideUp;position:relative}.result.win{color:#fff;background-color:#4caf50}.result.lose{color:#fff;background-color:#f44336}@keyframes slideUp{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}.hard-mode-link{margin-top:15px;font-size:1.1rem}.hard-mode-link a{color:#fff;font-weight:700;text-decoration:underline;transition:opacity .2s}.hard-mode-link a:hover{opacity:.8}.chord-name{margin:10px 0;font-size:2.5rem}.modal{z-index:2000;color:#fff;box-sizing:border-box;background-color:#00000080;justify-content:center;align-items:center;width:100%;height:100%;padding:40px;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.modal-content{color:#000;text-align:left;background-color:#fff;border-radius:8px;width:100%;max-width:600px;max-height:fit-content;margin:auto;padding:20px;position:relative;box-shadow:0 2px 10px #0003}.modal-content h2{text-align:center;padding-right:40px}.modal-content ul{padding-left:20px}.modal-content .correct{color:#4caf50;font-weight:700}.modal-content .present{color:#ffc107;font-weight:700}.modal-content .absent{color:#555;font-weight:700}.modal-close{cursor:pointer;color:#fff;background-color:#555;border:none;border-radius:5px;padding:10px 20px;font-size:24px;font-weight:700;transition:background-color .3s}.modal-close:hover:not(:disabled){background-color:#777}.modal-close:disabled{cursor:not-allowed;opacity:.5;background-color:#555}.modal-close{padding:6px;display:flex;position:absolute;right:10px}.modal-content h2{margin-top:0}.stats-subtitle{text-align:center;color:#666;margin-bottom:20px;font-size:.9rem}.stats-graph{flex-direction:column;gap:8px;margin:20px 0;display:flex}.stats-bar-row{align-items:center;gap:10px;display:flex}.stats-label{text-align:right;width:20px;font-weight:700}.stats-bar-container{flex:1;height:30px;position:relative}.stats-bar{background-color:#999;border-radius:3px;justify-content:flex-end;align-items:center;min-width:30px;height:100%;padding-right:8px;transition:background-color .3s;display:flex}.stats-bar-user{background-color:#4caf50}.stats-count{color:#fff;font-size:.9rem;font-weight:700}.stats-total{text-align:center;color:#666;margin-top:20px;font-size:.9rem}.navbar{z-index:1000;color:#fff;box-sizing:border-box;background-color:#333;border-radius:5px;justify-content:space-between;align-items:center;width:100%;padding:10px 20px;display:flex;position:sticky;top:0;box-shadow:0 2px 5px #0003}.navbar-buttons{justify-content:flex-end;display:flex}.navbar-title{text-align:center;color:#fff;cursor:pointer;flex:1;justify-content:flex-start;align-items:center;font-size:1.5rem;font-weight:700;text-decoration:none;transition:opacity .2s;display:flex}.navbar-title:hover{opacity:.8}.navbar-icon{filter:invert()brightness(2);width:24px;height:24px;margin-right:10px}.navbar-button{color:#fff;cursor:pointer;background-color:#555;border:none;border-radius:5px;justify-content:center;align-items:center;margin:0 5px;padding:10px 15px;font-size:1rem;transition:background-color .3s;display:flex}.navbar-button:hover{background-color:#777}.navbar-menu{display:inline-block;position:relative}.navbar-dropdown{z-index:1001;background-color:#444;border-radius:5px;width:max-content;margin-top:5px;position:absolute;top:100%;right:0;box-shadow:0 4px 8px #0000004d}.navbar-dropdown-item{color:#fff;align-items:center;gap:8px;padding:12px 16px;text-decoration:none;transition:background-color .2s;display:flex}.navbar-dropdown-item:hover{background-color:#555}.navbar-dropdown-item:first-child{border-radius:5px 5px 0 0}.navbar-dropdown-item:last-child{border-radius:0 0 5px 5px}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html,body{height:100%;margin:0}#root{flex-direction:column;min-height:100vh;display:flex}