:root{--bg: #0a0712;--accent: #b14bff;--accent-glow: rgba(177, 75, 255, .6);--text: #e8e0f5;--accent-deep: #7a2fd6;--accent-gradient: linear-gradient(135deg, var(--accent-deep), var(--accent));--bar-surface: rgba(16, 14, 22, .92);--bar-border: rgba(232, 224, 245, .1);--group-divider: rgba(232, 224, 245, .12);--secondary-bg: rgba(255, 255, 255, .07);--secondary-bg-hover: rgba(255, 255, 255, .11);--secondary-bg-active: rgba(177, 75, 255, .18);--secondary-border: rgba(232, 224, 245, .16);--secondary-border-hover: rgba(177, 75, 255, .5);--ghost-bg: rgba(255, 255, 255, .03);--ghost-bg-hover: rgba(177, 75, 255, .12);--ghost-bg-active: rgba(177, 75, 255, .2);--ghost-border: rgba(232, 224, 245, .14);--ghost-border-hover: rgba(177, 75, 255, .5);--text-muted: rgba(232, 224, 245, .6);--text-faint: rgba(232, 224, 245, .4);--focus-ring: #d9a6ff}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;width:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{display:flex;flex-direction:column}.topbar{display:flex;align-items:flex-start;gap:1.5rem;padding:.75rem 1.25rem;background:var(--bar-surface);border-bottom:1px solid var(--bar-border);box-shadow:0 1px #ffffff08 inset,0 6px 18px #00000059;z-index:2}.topbar h1{font-size:1.1rem;font-weight:600;letter-spacing:.04em;line-height:2.1rem;color:var(--accent);text-shadow:0 0 10px var(--accent-glow)}.topbar-rows{display:flex;flex:1;min-width:0;flex-direction:column;gap:.6rem}.controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.group{display:flex;align-items:center;gap:.5rem}.group+.group:before{content:"";align-self:center;width:1px;height:1.4rem;margin:0 .25rem;background:var(--group-divider)}#track-name{margin-left:auto;display:flex;align-items:baseline;gap:.4rem;min-width:0}.transport{display:flex;align-items:center;gap:.85rem}.transport-cluster{display:flex;align-items:center;gap:.4rem}.step-btn{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;padding:.5rem .55rem;line-height:1}.step-icon{display:block;width:20px;height:20px}.file-btn,#export-btn,#play-btn,.toggle{display:inline-flex;align-items:center;gap:.45rem}.btn-icon{display:block;flex:none;width:18px;height:18px}.toggle .btn-icon{width:16px;height:16px}.toggle{gap:.35rem}#seek-slider{-moz-appearance:none;appearance:none;-webkit-appearance:none;flex:1;min-width:120px;height:5px;padding:8px 0;background:transparent;cursor:pointer;touch-action:none}#seek-slider::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--accent-deep),var(--accent))}#seek-slider::-moz-range-track{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--accent-deep),var(--accent))}#seek-slider::-moz-range-progress{height:5px;border-radius:3px;background:var(--accent)}#seek-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6.5px;border-radius:50%;background:#f2ecf8;border:2px solid var(--accent);box-shadow:0 0 8px var(--accent-glow);cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}#seek-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#f2ecf8;border:2px solid var(--accent);box-shadow:0 0 8px var(--accent-glow);cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}#seek-slider:hover:not(:disabled)::-webkit-slider-thumb,#seek-slider:active:not(:disabled)::-webkit-slider-thumb{box-shadow:0 0 12px var(--accent-glow);transform:scale(1.08)}#seek-slider:hover:not(:disabled)::-moz-range-thumb,#seek-slider:active:not(:disabled)::-moz-range-thumb{box-shadow:0 0 12px var(--accent-glow);transform:scale(1.08)}#seek-slider:disabled{opacity:.4;cursor:not-allowed}#seek-slider:disabled::-webkit-slider-thumb{box-shadow:none}#seek-slider:disabled::-moz-range-thumb{box-shadow:none}#seek-slider:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}.time-readout{font-size:.8rem;font-weight:600;color:var(--text-faint);font-variant-numeric:tabular-nums;min-width:9ch;text-align:right;white-space:nowrap}#play-btn{background:var(--accent-gradient);color:#f7f2ff;border:1px solid transparent;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:filter .15s ease,box-shadow .15s ease,transform .05s ease,opacity .15s ease}#play-btn:hover:not(:disabled){filter:brightness(1.12);box-shadow:0 0 0 1px #ffffff14 inset,0 2px 12px #7a2fd680}#play-btn:active:not(:disabled){filter:brightness(.95);transform:translateY(1px);box-shadow:none}#play-btn:disabled{opacity:.4;cursor:not-allowed}#play-btn{min-width:5rem;padding:.5rem 1.4rem;box-shadow:0 0 14px var(--accent-glow)}.file-btn{background:var(--secondary-bg);color:var(--text);border:1px solid var(--secondary-border);border-radius:8px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .05s ease,opacity .15s ease}.file-btn:hover{background:var(--secondary-bg-hover);border-color:var(--secondary-border-hover);color:#f7f2ff}.file-btn:active{background:var(--secondary-bg-active);transform:translateY(1px)}#export-btn,.toggle,.step-btn{background:var(--ghost-bg);color:var(--text);border:1px solid var(--ghost-border);border-radius:8px;padding:.45rem .9rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .05s ease,opacity .15s ease}#export-btn:hover:not(:disabled),.toggle:hover:not(:disabled),.step-btn:hover:not(:disabled){background:var(--ghost-bg-hover);border-color:var(--ghost-border-hover);color:#f7f2ff}#export-btn:active:not(:disabled),.toggle:active:not(:disabled),.step-btn:active:not(:disabled){background:var(--ghost-bg-active);transform:translateY(1px)}#export-btn:disabled,.toggle:disabled,.step-btn:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,.file-btn:focus-visible,.toggle:focus-visible,.step-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.toggle{padding:.4rem .75rem;font-size:.8rem}.hand-mutes{display:flex;align-items:center;gap:.5rem}.hand-toggle{display:inline-flex;align-items:center;gap:.4rem}.hand-spk{display:inline-flex;line-height:0;color:var(--text)}.hand-spk-svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.hand-toggle .spk-slash{display:none}.hand-toggle[aria-pressed=true]{background:#b14bff47;border-color:var(--accent);color:var(--text)}.hand-toggle[aria-pressed=true] .hand-spk{color:var(--accent)}.hand-toggle[aria-pressed=true] .spk-waves{display:none}.hand-toggle[aria-pressed=true] .spk-slash{display:inline}.hand-toggle[aria-pressed=true] .hand-toggle-label{text-decoration:line-through;opacity:.75}.tempo{display:inline-flex;align-items:center;gap:.5rem}.tempo-label{font-size:.8rem;color:var(--text-muted)}#tempo-slider{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:120px;max-width:120px;height:4px;padding:6px 0;background:transparent;cursor:pointer;touch-action:none}#tempo-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent-deep),var(--accent))}#tempo-slider::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent-deep),var(--accent))}#tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:#f2ecf8;border:2px solid var(--accent);box-shadow:0 0 6px var(--accent-glow);cursor:pointer}#tempo-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#f2ecf8;border:2px solid var(--accent);box-shadow:0 0 6px var(--accent-glow);cursor:pointer}#tempo-slider:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}.tempo-readout{background:none;border:none;border-radius:0;padding:0;font-size:.8rem;font-weight:600;color:var(--text);opacity:.85;min-width:3.2ch;text-align:right;cursor:pointer;transition:opacity .15s ease}.tempo-readout:hover:not(:disabled){filter:none;opacity:1}.tempo-readout:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}@media(max-width:900px){.topbar{gap:1rem;padding:.6rem 1rem}.controls{gap:.6rem}}@media(max-width:720px){.topbar{gap:.6rem;padding:.55rem .75rem}.topbar h1,.track-name,.sound-status{display:none}.transport{flex-wrap:wrap}.tempo>.tempo-label{display:none}#tempo-slider{width:88px;max-width:88px;min-width:72px}.time-readout{display:none}button,.file-btn,.toggle,.step-btn{min-height:44px}.step-btn{min-width:44px}#seek-slider,#tempo-slider{padding:10px 0}#seek-slider::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9.5px}#seek-slider::-moz-range-thumb{width:24px;height:24px}#tempo-slider::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}#tempo-slider::-moz-range-thumb{width:24px;height:24px}#sheet{height:34%;overflow-x:auto}}@media(max-width:380px){#sheet{height:30%}}#rotate-hint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);transform:translate(-50%);z-index:5;display:none;max-width:calc(100% - 2rem);padding:.55rem .9rem;border-radius:999px;background:#140c20eb;border:1px solid rgba(177,75,255,.4);box-shadow:0 4px 18px #00000073;color:var(--text);font-size:.8rem;font-weight:600;white-space:nowrap;pointer-events:none;animation:rotate-hint-fade 4s ease forwards}@media(max-width:540px)and (orientation:portrait){#rotate-hint{display:block}}@keyframes rotate-hint-fade{0%,70%{opacity:1}to{opacity:0}}.track-name{font-size:.85rem;color:var(--text-muted)}.sheet-name{max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border:none;padding:.1rem .25rem;margin:0;font:inherit;font-weight:600;color:var(--text);cursor:text;border-radius:6px;border-bottom:1px dashed transparent;transition:background .15s ease,border-color .15s ease}.sheet-name:after{content:" ✎";color:var(--text-faint);font-weight:400}.sheet-name:hover{background:var(--ghost-bg-hover);border-bottom-color:var(--ghost-border-hover)}.sheet-name:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.sheet-name-input{max-width:22ch;background:var(--secondary-bg);border:1px solid var(--secondary-border);border-radius:6px;padding:.1rem .35rem;font:inherit;font-weight:600;color:var(--text)}.sheet-name-input:focus{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--secondary-border-hover)}.sheet-note-count{font-size:.78rem;color:var(--text-faint);white-space:nowrap}.track-status{font-size:.85rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sound-status{font-size:.8rem;color:var(--text-faint);font-style:italic}.sound-status:empty{display:none}#sheet{position:relative;height:42%;overflow-y:auto;background:#f6f2fb;padding:1rem 1.25rem}#sheet-labels{position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;z-index:1}.sheet-label{position:absolute;transform:translate(-50%,-100%);color:#7a2fd6;font:600 9px system-ui,-apple-system,sans-serif;letter-spacing:.01em;line-height:1;white-space:nowrap;text-align:center;text-shadow:0 0 2px #f6f2fb,0 0 2px #f6f2fb,0 0 3px #f6f2fb}#sheet:empty:before{content:"Load a MusicXML file to see the score here.";display:block;color:#7a7088;font-size:.9rem;padding:1rem}#stage{flex:1;display:block;width:100%;min-height:0}