*{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:#1f2233;background-color:#f6f7fb;--accent: #646cff;--accent-strong: #535bf2;--accent-soft: #eef0ff;--ink: #1f2233;--muted: #6b7280;--line: #e7e9f2;--radius: 16px;--shadow-sm: 0 1px 2px rgba(31, 34, 51, .06), 0 2px 8px rgba(31, 34, 51, .05);--shadow-md: 0 1px 2px rgba(31, 34, 51, .06), 0 12px 30px -14px rgba(31, 34, 51, .22);--shadow-lg: 0 1px 2px rgba(31, 34, 51, .06), 0 24px 48px -20px rgba(31, 34, 51, .28);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background-color:#eef0f7;background-image:linear-gradient(95deg,#f6f7fb,#f6f7fbeb 38%,#f6f7fb73 70%,#f6f7fb1a),url(/ludwig.png);background-position:center,right -140px bottom;background-size:cover,auto 94vh;background-repeat:no-repeat,no-repeat;background-attachment:fixed,fixed}@media(max-width:820px){body{background-image:linear-gradient(180deg,#f7f8fd,#eef0f7);background-size:cover;background-position:center}}#app{min-height:100vh}.navbar{background-color:#ffffffd1;backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(31,34,51,.07);box-shadow:0 1px #1f223308,0 6px 20px -12px #1f223340;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.3rem;font-weight:750;letter-spacing:-.02em;background:linear-gradient(120deg,#646cff,#9b5cff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;transition:opacity .2s}.navbar-brand a:hover{opacity:.8}.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:linear-gradient(120deg,#646cff,#7b6cff);color:#fff;border:none;padding:.5rem 1.1rem;border-radius:999px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,filter .2s;font-size:.9rem;box-shadow:0 6px 16px -6px #646cff99}.navbar-login-btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 10px 22px -8px #646cffb3}.navbar-logout-btn{background:#fff;color:#dc3545;border:1px solid #f1c2c6;box-shadow:var(--shadow-sm);margin-left:.5rem}.navbar-logout-btn:hover{transform:translateY(-1px);background:#fff5f5;box-shadow:0 8px 18px -8px #dc354566}.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%}}.footer{border-top:1px solid var(--line, #e7e9f2);background:#fff9;backdrop-filter:saturate(160%) blur(8px);-webkit-backdrop-filter:saturate(160%) blur(8px)}.footer-inner{max-width:1080px;margin:0 auto;padding:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.footer-brand{font-weight:750;letter-spacing:-.02em;background:linear-gradient(120deg,#646cff,#9b5cff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}.footer-links a{color:var(--muted, #6b7280);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .2s}.footer-links a:hover{color:var(--accent, #646cff)}.footer-copy{color:#9aa0ad;font-size:.82rem}@media(max-width:600px){.footer-inner{flex-direction:column;text-align:center}}.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}.leaderboard{background:#ffffffd1;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid var(--line, #e7e9f2);border-radius:var(--radius, 16px);padding:22px;box-shadow:var(--shadow-md, 0 12px 30px -14px rgba(31, 34, 51, .22))}.leaderboard-compact{padding:15px}.leaderboard-header{margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#646cff,#9b5cff) 1}.leaderboard-header h2{margin:0;font-size:1.4rem;color:var(--ink, #1f2233);font-weight:700;letter-spacing:-.01em}.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:12px 14px;background:#fbfbfe;border-radius:12px;border:1px solid var(--line, #e7e9f2);transition:transform .12s ease,box-shadow .2s ease}.leaderboard-entry:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm, 0 2px 8px rgba(31, 34, 51, .08))}.leaderboard-entry:nth-child(1){background:linear-gradient(120deg,#fff8e6,#fffdf7);border-color:#f3d27a}.leaderboard-entry:nth-child(2){background:linear-gradient(120deg,#f4f6fb,#fcfdff);border-color:#d4dae6}.leaderboard-entry:nth-child(3){background:linear-gradient(120deg,#fdf1e7,#fffaf6);border-color:#e6c2a0}.leaderboard-compact .leaderboard-entry{padding:8px 10px;gap:10px}.leaderboard-rank{font-weight:750;font-size:1.05rem;color:var(--accent, #646cff);min-width:38px;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}.app-shell{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:2.5rem 1.5rem 4rem}.page{animation:fadeIn .35s ease-out}.page h1{font-size:2.15rem;font-weight:750;letter-spacing:-.025em;color:var(--ink);margin-bottom:1rem}.page h2{font-size:1.25rem;margin-bottom:1rem;color:var(--ink);letter-spacing:-.01em}.page p{color:var(--muted);line-height:1.65;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)}}