*{margin:0;padding:0;box-sizing:border-box}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#333;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:#fff;color:#333}#app{min-height:100vh;background-color:#fff}.navbar{background-color:#fff;box-shadow:0 2px 4px #0000001a;position:sticky;top:0;z-index:1000}.navbar-container{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center;height:64px}.navbar-brand a{font-size:1.25rem;font-weight:600;color:#333;text-decoration:none;transition:color .2s}.navbar-brand a:hover{color:#646cff}.navbar-menu{display:flex;list-style:none;margin:0;padding:0;gap:2rem}.navbar-item{margin:0}.navbar-link{color:#333;text-decoration:none;font-weight:500;transition:color .2s;display:block;padding:.5rem 0}.navbar-link:hover{color:#646cff}.navbar-link.active{color:#646cff;font-weight:600}.navbar-toggle{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:.5rem;gap:4px}.navbar-toggle span{width:24px;height:2px;background-color:#333;transition:all .3s;border-radius:2px}.navbar-toggle.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.navbar-toggle.active span:nth-child(2){opacity:0}.navbar-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}@media(max-width:768px){.navbar-toggle{display:flex}.navbar-menu{position:absolute;top:64px;left:0;right:0;background-color:#fff;flex-direction:column;padding:0;box-shadow:0 4px 6px #0000001a;max-height:0;overflow:hidden;transition:max-height .3s ease-out;gap:0;margin:0;opacity:0;visibility:hidden}.navbar-menu.active{max-height:300px;padding:1rem 1.5rem;opacity:1;visibility:visible}.navbar-item{border-bottom:1px solid #eee}.navbar-item:last-child{border-bottom:none}.navbar-link{padding:1rem 0}}.navbar-login-btn,.navbar-logout-btn{background-color:#646cff;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;font-weight:500;cursor:pointer;transition:background-color .2s;font-size:.9rem}.navbar-login-btn:hover{background-color:#535bf2}.navbar-logout-btn{background-color:#dc3545;margin-left:.5rem}.navbar-logout-btn:hover{background-color:#c82333}.navbar-auth{display:flex;align-items:center;gap:.5rem}.navbar-user-email{color:#666;font-size:.9rem;font-weight:500}@media(max-width:768px){.navbar-auth{flex-direction:column;align-items:flex-start;gap:.75rem;width:100%}.navbar-logout-btn{margin-left:0;width:100%}.navbar-login-btn{width:100%}}.leaderboard{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.leaderboard-compact{padding:15px}.leaderboard-header{margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #2196f3}.leaderboard-header h2{margin:0;font-size:1.5rem;color:#333;font-weight:600}.leaderboard-compact .leaderboard-header h2{font-size:1.2rem}.leaderboard-loading,.leaderboard-error,.leaderboard-empty{padding:20px;text-align:center;color:#666}.leaderboard-error{color:#d32f2f}.leaderboard-list{display:flex;flex-direction:column;gap:8px}.leaderboard-entry{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#f9f9f9;border-radius:6px;border:1px solid #e0e0e0;transition:background-color .2s,transform .1s}.leaderboard-entry:hover{background:#f0f0f0;transform:translate(2px)}.leaderboard-compact .leaderboard-entry{padding:8px 10px;gap:10px}.leaderboard-rank{font-weight:700;font-size:1rem;color:#2196f3;min-width:35px;text-align:center}.leaderboard-compact .leaderboard-rank{font-size:.9rem;min-width:30px}.leaderboard-info{flex:1;display:flex;flex-direction:column;gap:4px}.leaderboard-score{font-size:1.1rem;font-weight:600;color:#333}.leaderboard-compact .leaderboard-score{font-size:1rem}.leaderboard-amount{font-size:.85rem;color:#666}.leaderboard-compact .leaderboard-amount{font-size:.8rem}.staff{background-color:#fff;position:relative;overflow:visible;min-height:200px}.music-notation canvas{display:block;background-color:#fff!important;width:100%;height:100%}.music-notation.editable{cursor:crosshair}.music-notation.editable:hover{border-color:#646cff}.app-layout{display:flex;min-height:calc(100vh - 64px)}.leaderboard-sidebar{width:300px;padding:2rem 1.5rem;background:#f5f5f5;border-right:1px solid #e0e0e0;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto}.main-content{flex:1;max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.main-content.with-sidebar{max-width:none;margin:0}.page{animation:fadeIn .3s ease-in}.page h1{font-size:2rem;margin-bottom:1rem}.page h2{font-size:1.25rem;margin-bottom:1rem;color:#333}.page p{color:#666;line-height:1.6;margin-bottom:2rem}.notation-container{display:flex;flex-direction:column;gap:2rem;margin-top:2rem}.notation-section{display:flex;flex-direction:column;gap:1rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}