:root{--left:#2f7de1;--right:#f28c28;--bar:#e11d48}*{box-sizing:border-box}html,body{color:#222;background:#fafafa;height:100%;margin:0;font-family:system-ui,sans-serif}body{flex-direction:column;display:flex}#brand{background:#fff;flex-wrap:wrap;align-items:baseline;gap:16px;padding:8px 16px 0;display:flex}#brand h1{letter-spacing:.02em;margin:0;font-size:18px}#brand p{color:#555;margin:0;font-size:13px}#toolbar{background:#fff;border-bottom:1px solid #ddd;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 16px;display:flex}#title{margin-right:8px;font-weight:600}#piece{max-width:260px}#toolbar button{cursor:pointer;padding:6px 14px;font-size:14px}#toolbar label{align-items:center;gap:6px;font-size:13px;display:inline-flex}#toolbar label.file{cursor:pointer}#toolbar .group{border-right:1px solid #ddd;align-items:center;gap:10px;padding-right:12px;display:inline-flex}#toolbar .group input[type=file]{max-width:210px;font-size:12px}#status{color:#666;margin-left:auto;font-size:13px}.legend{font-size:13px}.legend i{vertical-align:-1px;border-radius:2px;width:12px;height:12px;margin:0 2px 0 8px;display:inline-block}.legend i.left{background:var(--left)}.legend i.right{background:var(--right)}#score{cursor:pointer;flex:1;padding:8px 16px;position:relative;overflow:auto}#score g.playing-left,#score g.playing-left *{fill:var(--left)!important;stroke:var(--left)!important}#score g.playing-right,#score g.playing-right *{fill:var(--right)!important;stroke:var(--right)!important}#score .sheet{position:relative}#score .sheet.inactive{visibility:hidden;height:0;position:absolute;top:8px;left:16px;right:16px;overflow:hidden}#score .vf-notehead{cursor:pointer}#note-tip{z-index:2;pointer-events:none;color:#fff;white-space:nowrap;background:#222;border-radius:4px;padding:2px 6px;font-size:12px;font-weight:600;position:absolute}#note-tip.above{transform:translate(-50%,-100%)}#note-tip.below{transform:translate(-50%)}#keyboard{background:#333;padding:6px 16px 10px}#keyboard svg{width:100%;height:auto;display:block}#keyboard .white{fill:#fff;stroke:#333}#keyboard .black{fill:#111;stroke:#000}#keyboard .white.left,#keyboard .black.left{fill:var(--left)}#keyboard .white.right,#keyboard .black.right{fill:var(--right)}#credits{color:#bbb;text-align:center;background:#222;padding:4px 16px;font-size:11px}#credits a{color:#ddd}