.staff-container{align-self:center;width:100%;max-height:max-content;position:relative;overflow:visible}.staff-canvas{width:100%;display:block}.staff-scroll-container{-webkit-overflow-scrolling:touch;scrollbar-width:thin;width:100%;position:relative;overflow:auto hidden}.staff-scroll-container::-webkit-scrollbar{height:6px}.staff-scroll-container::-webkit-scrollbar-track{background:0 0}.staff-scroll-container::-webkit-scrollbar-thumb{background:var(--staff-line,#999);opacity:.5;border-radius:3px}.staff-canvas--grand svg{height:auto;display:block}.staff-container svg{width:100%;height:auto;display:block}.staff-container>.staff-canvas:not(.staff-canvas--grand),.staff-container>.staff-canvas:not(.staff-canvas--grand)>svg{height:100%}.staff-container svg .vf-stave path{stroke:var(--staff-line);fill:none;stroke-width:.8px}.staff-container svg .vf-stavebarline path{stroke:var(--staff-line);fill:var(--staff-line);stroke-width:1px}.staff-container svg .vf-staveconnector path{stroke:none;fill:var(--staff-line)}.staff-container svg .vf-ledgerline line{stroke:var(--staff-line);stroke-width:.8px}.staff-container svg .vf-clef path,.staff-container svg .vf-keysignature path,.staff-container svg .vf-timesignature path{stroke:none;fill:var(--staff-line)}.staff-container svg .vf-notehead path{fill:var(--staff-text);stroke:none}.staff-container svg .vf-stem path{fill:none!important;stroke:var(--staff-text)!important;stroke-width:1.5px!important}.staff-container svg .vf-flag path,.staff-container svg .vf-beam path,.staff-container svg .vf-dot path,.staff-container svg .vf-rest path{fill:var(--staff-text);stroke:none}.staff-container svg .vf-stavenote path:not([fill=none]){fill:var(--staff-text)}.staff-container svg .vf-stavenote path[fill=none]{stroke:var(--staff-text);fill:none!important}.staff-container svg .vf-stavetie path,.staff-container svg .vf-curve path{stroke-width:1.2px;fill:var(--staff-text)!important;stroke:var(--staff-text)!important}.staff-container svg .vf-articulation path,.staff-container svg .vf-accidental path{fill:var(--staff-text);stroke:none}.staff-container svg text{fill:var(--staff-text)}.staff-container svg line.staff-hairpin,.staff-container svg path.staff-slur{stroke:var(--staff-text)}.staff-container svg .staff-grace ellipse{fill:var(--staff-text);stroke:none}.staff-container svg .staff-grace line{stroke:var(--staff-text)}.staff-container svg text.staff-dynamic{fill:var(--staff-text);font-style:italic;font-weight:700}.staff-cursor{opacity:.8;pointer-events:none;z-index:10;background:#2196f3;border-radius:1.5px;width:3px;display:none;position:absolute;top:0;bottom:0}.staff-scroll-container--playing{overflow-x:hidden!important}.staff-scroll-container--playing::-webkit-scrollbar{display:none}.staff-canvas--grand{will-change:transform}@keyframes noteShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.note-shake{animation:.4s ease-in-out noteShake}.staff-container svg .staff-note-current path:not([fill=none]),.staff-container svg .staff-note-current text{fill:var(--accent-text)}.staff-container svg .staff-note-current .vf-stem path{stroke:var(--accent-text)!important}.staff-container svg .staff-note-upcoming{opacity:.7}.staff-container svg .staff-note-past{opacity:.4}.staff-container svg .staff-current-band{fill:var(--accent-dim);stroke:none;pointer-events:none}.staff-sticky-clef{z-index:2;pointer-events:none;background:var(--bg-primary);box-shadow:6px 0 8px -6px var(--shadow-color);opacity:0;position:absolute;top:0;left:0}.staff-sticky-clef.visible{opacity:1}.staff-sticky-clef svg{display:block}.piano-wrapper{-webkit-user-select:none;user-select:none;border-radius:8px;width:100%;overflow:hidden}.piano-scroll{-webkit-overflow-scrolling:touch;overflow:auto hidden}.octave-labels{gap:0;margin:0 auto;display:flex}.octave-label{text-align:center;color:var(--text-muted);border-bottom:2px solid var(--accent);padding:4px 0;font-size:.75rem}.piano-keys{margin:0 auto;position:relative}.white-key,.black-key{appearance:none;touch-action:manipulation;margin:0;padding:0;display:block}.white-key:focus-visible,.black-key:focus-visible{outline:3px solid var(--accent-text);outline-offset:-5px}.white-key{background:linear-gradient(to bottom, var(--white-key-top), var(--white-key-bottom));border:1px solid var(--white-key-border);cursor:pointer;z-index:1;border-radius:0 0 4px 4px;transition:background .1s;position:absolute;top:0}.white-key:hover{background:linear-gradient(to bottom, var(--white-key-hover-top), var(--white-key-hover-bottom))}.white-key:active{background:var(--white-key-active)}.black-key{background:linear-gradient(to bottom, var(--black-key-top), var(--black-key-bottom));border:1px solid var(--black-key-border);cursor:pointer;z-index:2;border-radius:0 0 3px 3px;transition:background .1s;position:absolute;top:0}.black-key:hover{background:linear-gradient(to bottom, var(--black-key-hover-top), var(--black-key-hover-bottom))}.black-key:active{background:var(--black-key-active)}.key-selected{background:var(--accent)!important}.key-correct{background:var(--green)!important}.key-incorrect{background:var(--red)!important}