html,body{color:#eee;background:#111;margin:0;font-family:sans-serif;overflow:hidden}*{box-sizing:border-box}body,#app{min-height:100vh}#menuButton{z-index:1003;color:#fff;cursor:pointer;background:#222;border:none;border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:22px;line-height:1;display:flex;position:fixed;top:14px;left:14px;box-shadow:0 10px 28px #00000059}#uiPanel{z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#181818f5;border-right:1px solid #333;width:360px;max-width:92vw;height:100vh;transition:transform .25s;position:fixed;top:0;left:0;overflow-y:auto;box-shadow:0 18px 60px #00000073}#uiPanel.closed{transform:translate(-100%)}.panelInner{flex-direction:column;min-height:100%;padding:72px 16px 120px;display:flex}.panelBody{flex-direction:column;gap:0;display:flex}.row{margin-bottom:14px}button{color:#fff;background:#2a2a2a;border:1px solid #3b3b3b;border-radius:10px;padding:10px 18px;font-size:16px}input[type=range]{width:100%}.value{color:#7dffb0}.legend{flex-direction:column;gap:8px;display:flex}.menuFooter{color:#8e8e8e;letter-spacing:.16em;text-transform:uppercase;margin-top:auto;padding-top:20px;font-size:12px}.trackToggle{cursor:pointer;background:#222;border-radius:8px;align-items:center;gap:8px;padding:8px;display:flex}.trackToggle input{flex:none;margin:0}.legendColor{border-radius:5px;flex:none;width:18px;height:18px}#statusHud{z-index:1002;align-items:stretch;gap:8px;display:flex;position:fixed;top:12px;right:12px}.statusCard{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0c0c0cb8;border:1px solid #ffffff1f;border-radius:10px;min-width:86px;padding:7px 9px;box-shadow:0 12px 30px #00000052}.statusLabel{color:#9f9f9f;letter-spacing:.12em;margin-bottom:3px;font-size:9px;display:block}.statusValue{letter-spacing:.04em;font-size:16px;font-weight:700;line-height:1.1;display:block}#playhead{z-index:999;pointer-events:none;background:#fff;width:3px;position:fixed;top:0;bottom:0;left:50%;box-shadow:0 0 10px #fff,0 0 24px #fff}#rollViewport{background:#131313;position:absolute;inset:0;overflow:hidden auto}#roll{will-change:transform;width:500000px;height:1800px;position:relative}.gridLine{background:#1e1e1e;width:100%;height:1px;position:absolute;left:0}.beatLine{background:#191919;width:1px;height:100%;position:absolute;top:0}.barLine{background:#353535;width:2px;height:100%;position:absolute;top:0}.note{opacity:.95;border-radius:4px;position:absolute}.strings{background:#6fc}.brass{background:#fc4}.wood{background:#6af}.lead{background:#f6c}.arp{background:#fff}.bass{background:#f66}.drums{background:#8f8}@media (width<=700px){button{padding:8px 12px;font-size:13px}.trackToggle{font-size:12px}#uiPanel{width:270px}#statusHud{gap:6px;top:62px;right:10px}.statusCard{min-width:72px;padding:6px 8px}.statusValue{font-size:14px}}