:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{margin:0 auto;text-align:center}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.preparing-print{visibility:hidden!important}.preparing-print .music-sheet-display,.preparing-print .notes-visualization{visibility:visible!important;position:fixed!important;top:0!important;left:0!important;width:800px!important}@media print{html{width:800px!important}.navigation,.playback-controls,.btn,.screen-only{display:none!important}.main-content,.visualizer-content,.notes-visualization,.notes-content{width:800px!important;max-width:800px!important;margin:0 auto!important;padding:0!important;overflow:visible!important}body{background:#fff!important;color:#000!important;margin:0 auto!important;padding:0!important;width:800px!important;visibility:visible!important}.music-sheet-display,.notes-visualization{visibility:visible!important;position:static!important}.note-line{break-inside:avoid!important;page-break-inside:avoid!important;padding:.5cm 0!important;margin:0!important;transform:none!important}.piano-key,.note-bar{color-adjust:exact!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;box-shadow:none!important}.note-bar:hover{transform:none!important}.note-label{color:inherit!important;text-shadow:none!important}.colored-playalong{margin-top:1cm!important}.song-title{page-break-after:avoid!important;margin-bottom:1rem!important}.music-sheet-display{page-break-after:avoid!important}@page{size:A4;margin:1cm}}:root{--primary: #4361ee;--secondary: #3f37c9;--success: #4bb543;--danger: #dc3545;--warning: #ffd60a;--info: #4895ef;--light: #f8f9fa;--dark: #212529;--background: #ffffff;--text: #333333;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--transition-fast: .2s ease;--transition-normal: .3s ease}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--background);color:var(--text)}.btn{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:none;font-weight:500;cursor:pointer;transition:transform var(--transition-normal),background-color var(--transition-normal)}.btn:hover{transform:translateY(-1px)}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--secondary)}.btn-success{background-color:var(--success);color:#fff}.btn-danger{background-color:var(--danger);color:#fff}.card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-lg)}:root{--breakpoint-sm: 480px;--breakpoint-md: 1024px;--breakpoint-lg: 1440px;--breakpoint-xl: 2000px;--container-padding: 1rem;--container-width: calc(100vw - 2 * var(--container-padding));--container-max-width: 1800px}.container{width:var(--container-width);max-width:var(--container-max-width);margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding);box-sizing:border-box}@media (min-width: 480px){:root{--container-padding: .25rem}}@media (min-width: 1024px){:root{--container-padding: 1rem}}@media (min-width: 1440px){:root{--container-padding: 1.5rem}}@media (min-width: 2000px){:root{--container-padding: 2rem}}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;margin-top:64px;width:var(--container-width)}@media (max-width: 768px){.main-content{margin-top:56px}}