.sr-app,.sr-app *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;height:100%}#root{background:#0e1424;display:block;position:fixed;inset:0;overflow:hidden}body{overscroll-behavior:none;background:#0e1424;min-width:320px;min-height:100dvh;margin:0;overflow:hidden}button,input,select{font:inherit}.sr-app{--sr-bg:#0e1424;--sr-bg-2:#161d2d;--sr-line:#ffffff1f;--sr-text:#f7f8fb;--sr-muted:#aeb7c7;--sr-orange:#e8892e;--sr-blue:#1e7897;--sr-score-bg:#f7f4ef;background:var(--sr-bg);width:max(100vw,133.333dvh);height:100dvh;min-height:0;color:var(--sr-text);transform-origin:50%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-template-rows:minmax(0,2fr) minmax(0,1fr);display:grid;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.sr-app img,.sr-app svg{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.sr-app button{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:0}.sr-app.has-start-gate .sr-score-shell,.sr-app.has-start-gate .sr-hud{filter:blur(8px)brightness(.18)saturate(.7);pointer-events:none;transform:scale(1.012)}.sr-app.has-start-gate:before{z-index:45;background:var(--sr-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);content:"";pointer-events:none;position:absolute;inset:0}.sr-start-gate{z-index:50;text-align:center;pointer-events:none;position:absolute;inset:0}.sr-start-gate-play{top:var(--start-gate-play-y,66.666%);left:var(--start-gate-play-x,50%);background:var(--sr-orange);color:#fff;pointer-events:auto;border-radius:999px;place-items:center;width:70px;height:70px;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 18px 40px #00000038}.sr-start-gate-play:disabled{opacity:.55}.sr-start-gate p{color:#fff;letter-spacing:0;text-shadow:0 2px 12px #000000b8;gap:8px;width:min(920px,100vw - 36px);margin:0;font-size:clamp(22px,2.7vw,40px);font-weight:850;line-height:1.12;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sr-start-gate p span{white-space:nowrap;display:block}.sr-hud{background:var(--sr-bg);border-top:1px solid #0f172a29;grid-template-rows:minmax(0,1fr);min-height:0;display:grid;overflow:visible}.sr-hud.has-keyboard{grid-template-rows:minmax(0,1fr) minmax(82px,auto)}.sr-topbar{min-width:0;padding:10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));background:#111727;border-bottom:1px solid #ffffff14;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;display:grid}.sr-hud.has-keyboard .sr-topbar{min-height:82px}.sr-left,.sr-right{align-items:center;gap:10px;min-width:0;display:flex}.sr-right{justify-content:flex-end}.sr-center{place-items:center;display:grid}.sr-play-button{background:var(--sr-orange);color:#fff;border-radius:999px;place-items:center;width:70px;height:70px;display:grid;box-shadow:0 18px 40px #00000038}.sr-play-button:disabled{opacity:.45}.sr-icon-button,.sr-tool-button{min-height:38px;color:var(--sr-text);background:#ffffff14;border-radius:8px;align-items:center;gap:7px;padding:0 12px;font-size:13px;font-weight:790;display:inline-flex}.sr-icon-button{justify-content:center;width:42px;padding:0}.sr-piece-switch{z-index:20;display:inline-flex;position:relative}.sr-piece-switch .sr-icon-button{gap:2px;width:52px}.sr-piece-menu{color:#172033;background:#fbfaf7;border:1px solid #0f172a29;border-radius:8px;width:min(300px,100vw - 28px);max-height:min(520px,100vh - 190px);display:grid;position:absolute;bottom:calc(100% + 10px);left:0;overflow:hidden;box-shadow:0 18px 44px #0000003d}.sr-right .sr-piece-menu{left:auto;right:0}.sr-piece-menu-section{min-height:0;display:grid}.sr-piece-menu-section+.sr-piece-menu-section{border-top:1px solid #0f172a21}.sr-piece-menu button{color:#172033;text-align:left;background:0 0;justify-items:start;gap:2px;min-height:54px;padding:10px 12px;display:grid}.sr-piece-menu-section>button+button,.sr-piece-menu-scroll button+button{border-top:1px solid #0f172a1a}.sr-piece-menu button.is-active{background:#e8892e24}.sr-piece-menu strong{font-size:13px;font-weight:850}.sr-piece-menu span{color:#647084;font-size:12px;font-weight:720}.sr-piece-menu-group-toggle{grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%;position:relative}.sr-piece-menu-group-toggle strong,.sr-piece-menu-group-toggle span{grid-column:1}.sr-piece-menu-group-toggle svg{color:#647084;grid-area:1/2/span 2;transition:transform .14s;transform:rotate(0)}.sr-piece-menu-group-toggle.is-open svg{transform:rotate(180deg)}.sr-piece-menu-scroll{overscroll-behavior:contain;min-height:0;max-height:min(320px,100vh - 350px);display:grid;overflow-y:auto}.sr-tool-button.is-active{color:#ffd1a0;background:#e8892e33}.sr-keyboard-toggle{justify-content:center;width:42px;padding:0}.sr-keyboard-panel{min-height:0;padding:8px max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left));background:#0e1424;grid-template-rows:36px 112px;align-content:center;align-items:stretch;gap:2px;display:grid}.sr-keyboard-note-row{pointer-events:none;grid-row:1;min-width:0;height:36px;position:relative}.sr-keyboard-note-label{color:#fff;text-shadow:0 1px 4px #0000009e;white-space:nowrap;font-size:22px;font-weight:760;line-height:1;position:absolute;top:4px;transform:translate(-50%)}.sr-virtual-keyboard{background:#f8fafc;border:1px solid #fff3;border-radius:4px;grid-row:2;width:100%;height:112px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0f172a0a}.sr-white-key-row{grid-template-columns:repeat(var(--white-key-count), minmax(0, 1fr));width:100%;height:100%;display:grid}.sr-piano-key{display:block}.sr-piano-key.is-white{background:#f8fafc;border-right:1px solid #0f172a33;min-width:0}.sr-piano-key.is-white:first-child{border-left:0}.sr-piano-key.is-white.is-active{background:#aab2bd}.sr-virtual-keyboard.is-voice-filtered .sr-piano-key.is-white.is-active{background:#5fc8c3}.sr-piano-key.is-black{width:calc(100% / var(--white-key-count) * .62);z-index:1;background:#111827;border:1px solid #0f172ab8;border-top:0;border-radius:0 0 3px 3px;height:62%;position:absolute;top:0;transform:translate(-50%)}.sr-piano-key.is-black.is-active{background:#737b87}.sr-virtual-keyboard.is-voice-filtered .sr-piano-key.is-black.is-active{background:#258c88}.sr-tempo-segment{grid-template-columns:repeat(var(--segment-count,3), var(--segment-width,64px));background:#f7f8fb2e;border:1px solid #ffffff3d;border-radius:8px;align-items:stretch;height:38px;display:inline-grid;overflow:hidden}.sr-tempo-segment button{width:var(--segment-width,64px);color:#14314b94;background:#f7f8fbb8;border-radius:0;padding:0 10px;font-size:12px;font-weight:820}.sr-tempo-segment button+button{border-left:1px solid #0f172a1a}.sr-tempo-segment button.is-active{color:#14314b;background:#f7f8fb}.sr-hud-blank{background:var(--sr-bg);min-height:0;display:none}.sr-score-shell{background:var(--sr-score-bg);height:100%;min-height:0;position:relative;overflow:hidden}.sr-progress{z-index:7;background:#0f172a14;width:100%;height:5px;position:absolute;top:0;left:0;overflow:hidden;transform:translateZ(0)}.sr-progress span{transform-origin:0;background:#e8892e;width:100%;height:100%;display:block}.sr-score-viewport{background:linear-gradient(90deg, #f7f4efeb, #f7f4ef00 12%, #f7f4ef00 88%, #f7f4efeb), var(--sr-score-bg);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:absolute;inset:5px 0 0;overflow:hidden}.sr-score-viewport.is-dragging{cursor:grabbing}.sr-score-viewport.is-loading{cursor:default}.sr-strip-surface{transform-origin:0 0;will-change:transform;transition:none;position:absolute;top:0;left:0}.sr-score-viewport.is-playing .sr-strip-surface,.sr-score-viewport.is-dragging .sr-strip-surface,.sr-score-viewport.is-coasting .sr-strip-surface,.sr-score-viewport.is-loop-dragging .sr-strip-surface{transition:none}.sr-strip-system{background:0 0;position:absolute;top:0;overflow:hidden}.sr-strip-source{transform-origin:0 0;-webkit-user-select:none;user-select:none;position:absolute;top:0;left:0}.sr-strip-source-image,.sr-strip-source-svg,.sr-strip-source-svg svg{-webkit-user-select:none;user-select:none;max-width:none;display:block}.sr-strip-source-image{pointer-events:none}.sr-strip-source-svg svg{width:100%;height:100%}.sr-prepared-strip-svg,.sr-prepared-strip-svg svg,.sr-strip-image{-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.sr-strip-layer{opacity:0;pointer-events:none;transition:opacity .15s;position:absolute;inset:0}.sr-strip-layer.is-visible{opacity:1}.sr-score-viewport.debug-no-layer-fade .sr-strip-layer{transition:none}.sr-strip-image{object-fit:fill;pointer-events:none}.sr-hybrid-markings{z-index:6;mix-blend-mode:normal}.sr-hybrid-markings,.sr-hybrid-markings svg{-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.sr-hybrid-markings [data-overlay-category=structural],.sr-hybrid-markings [data-overlay-category=context]{opacity:1}.sr-hybrid-markings [data-marking-class=BarLine],.sr-sticky-start-context [data-marking-class=BarLine]{stroke:#000!important}.sr-hybrid-markings [data-marking-class=HairpinSegment],.sr-hybrid-markings [data-marking-class=SlurSegment]{shape-rendering:geometricprecision}.sr-hybrid-markings [data-marking-class=HairpinSegment]{stroke-width:12.5px!important}.sr-hybrid-markings [data-marking-class=SlurSegment]{stroke-width:5.5px!important}.sr-hybrid-markings [data-marking-class=BarLine]:not([data-sticky-context=true]),.sr-sticky-start-context [data-marking-class=BarLine]{opacity:1}.sr-score-viewport.has-sticky-context .sr-hybrid-markings [data-overlay-category=context][data-sticky-context=true],.sr-score-viewport.has-sticky-context .sr-hybrid-markings [data-marking-class=BarLine][data-sticky-context=true]{opacity:0}.sr-score-viewport.debug-no-expressive .sr-hybrid-markings [data-overlay-category=expressive],.sr-score-viewport.debug-no-structural .sr-hybrid-markings [data-overlay-category=structural],.sr-score-viewport.debug-no-context .sr-hybrid-markings [data-overlay-category=context],.sr-score-viewport.debug-no-context .sr-sticky-context-update-markings,.sr-score-viewport.debug-no-dynamics .sr-hybrid-markings :is([data-marking-class=Dynamic],[data-marking-class=Expression]),.sr-score-viewport.debug-no-fingering .sr-hybrid-markings [data-marking-class=Fingering],.sr-score-viewport.debug-no-lines .sr-hybrid-markings :is([data-marking-class=Bracket],[data-marking-class=HairpinSegment],[data-marking-class=SlurSegment],[data-marking-class=TextLineSegment],[data-marking-class=TieSegment]),.sr-score-viewport.debug-no-text .sr-hybrid-markings :is([data-marking-class=StaffText],[data-marking-class=Tempo],[data-marking-class=Text]){display:none}.sr-strip-surface.has-voice-focus:not(.has-focus-rh) .sr-hybrid-markings [data-overlay-category=expressive][data-marking-voice=rh]:not([data-marking-class=Dynamic]):not([data-marking-class=Expression]):not([data-marking-class=HairpinSegment]):not([data-marking-class=StaffText]):not([data-marking-class=Text]):not([data-marking-class=TextLineSegment]):not([data-marking-class=Tempo]),.sr-strip-surface.has-voice-focus:not(.has-focus-lh) .sr-hybrid-markings [data-overlay-category=expressive][data-marking-voice=lh]:not([data-marking-class=Dynamic]):not([data-marking-class=Expression]):not([data-marking-class=HairpinSegment]):not([data-marking-class=StaffText]):not([data-marking-class=Text]):not([data-marking-class=TextLineSegment]):not([data-marking-class=Tempo]),.sr-strip-surface.has-voice-focus:not(.has-focus-s) .sr-hybrid-markings [data-overlay-category=expressive][data-marking-voice=s]:not([data-marking-class=Dynamic]):not([data-marking-class=Expression]):not([data-marking-class=HairpinSegment]):not([data-marking-class=StaffText]):not([data-marking-class=Text]):not([data-marking-class=TextLineSegment]):not([data-marking-class=Tempo]),.sr-strip-surface.has-voice-focus:not(.has-focus-a) .sr-hybrid-markings [data-overlay-category=expressive][data-marking-voice=a]:not([data-marking-class=Dynamic]):not([data-marking-class=Expression]):not([data-marking-class=HairpinSegment]):not([data-marking-class=StaffText]):not([data-marking-class=Text]):not([data-marking-class=TextLineSegment]):not([data-marking-class=Tempo]),.sr-strip-surface.has-voice-focus:not(.has-focus-t) .sr-hybrid-markings [data-overlay-category=expressive][data-marking-voice=t]:not([data-marking-class=Dynamic]):not([data-marking-class=Expression]):not([data-marking-class=HairpinSegment]):not([data-marking-class=StaffText]):not([data-marking-class=Text]):not([data-marking-class=TextLineSegment]):not([data-marking-class=Tempo]),.sr-strip-surface.has-voice-focus:not(.has-focus-b) .sr-hybrid-markings [data-overlay-category=expressive][data-marking-voice=b]:not([data-marking-class=Dynamic]):not([data-marking-class=Expression]):not([data-marking-class=HairpinSegment]):not([data-marking-class=StaffText]):not([data-marking-class=Text]):not([data-marking-class=TextLineSegment]):not([data-marking-class=Tempo]){opacity:.32}.sr-strip-layer.sr-hybrid-markings.mode-dim.is-visible [data-overlay-category=expressive]{opacity:.34}.sr-hybrid-markings.mode-hidden [data-overlay-category=expressive]{opacity:0}.sr-hybrid-markings.mode-tint [data-overlay-category=expressive]{opacity:.82;fill:#c56a13!important;stroke:#c56a13!important}.sr-hybrid-markings.mode-tint [data-overlay-category=expressive][fill=none]{fill:none!important}.sr-sticky-horizon-mask{z-index:5;pointer-events:none;background:linear-gradient(90deg, var(--sr-score-bg) 0, var(--sr-score-bg) calc(100% - var(--sr-horizon-fade-width,48px)), #f7f4ef00 100%);position:absolute}.sr-sticky-context-update-markings{z-index:8;mix-blend-mode:normal;pointer-events:none;transform-origin:0 0;will-change:transform;position:absolute;top:0;left:0}.sr-sticky-context-update-markings,.sr-sticky-context-update-markings svg{-webkit-user-select:none;user-select:none;display:block}.sr-sticky-context-update-markings svg{width:100%;height:100%}.sr-sticky-context-update-markings [data-marking-id]{opacity:0}.sr-sticky-start-context{z-index:7;pointer-events:none;mix-blend-mode:normal;position:absolute;overflow:hidden}.sr-sticky-start-context,.sr-sticky-start-context svg{-webkit-user-select:none;user-select:none;display:block}.sr-sticky-start-context svg{width:var(--sr-sticky-context-full-width,100%);max-width:none;height:100%}.sr-sticky-start-context.has-voice-focus:not(.has-focus-rh) .StickyStaffLine[data-marking-voice=rh],.sr-sticky-start-context.has-voice-focus:not(.has-focus-lh) .StickyStaffLine[data-marking-voice=lh],.sr-sticky-start-context.has-voice-focus:not(.has-focus-s) .StickyStaffLine[data-marking-voice=s],.sr-sticky-start-context.has-voice-focus:not(.has-focus-a) .StickyStaffLine[data-marking-voice=a],.sr-sticky-start-context.has-voice-focus:not(.has-focus-t) .StickyStaffLine[data-marking-voice=t],.sr-sticky-start-context.has-voice-focus:not(.has-focus-b) .StickyStaffLine[data-marking-voice=b]{opacity:.24}.sr-prepared-strip-svg svg>path:first-child[fill=\#ffffff],.sr-strip-source-svg svg>path:first-child[fill=\#ffffff]{display:none}.sr-voice-focus-overlay{z-index:4;pointer-events:none;position:absolute;inset:0}.sr-voice-focus-overlay svg{width:100%;height:100%;display:block}.sr-voice-focus-overlay path{fill:#f7f4efb8;fill-rule:evenodd}.sr-staff-toggle-layer{z-index:8;pointer-events:none;position:absolute;inset:0}.sr-staff-toggle-layer button{width:var(--staff-toggle-size,36px);height:var(--staff-toggle-size,36px);color:var(--sr-orange);cursor:pointer;pointer-events:auto;touch-action:manipulation;transform:translate(-100%, -50%) scale(var(--sr-inverse-camera-scale,1));transform-origin:100%;background:#fffffff0;border:0;border-radius:7px;place-items:center;font-size:13px;font-weight:860;transition:background .13s,color .13s,box-shadow .13s;display:grid;position:absolute;box-shadow:0 8px 18px #0f172a1c}.sr-staff-toggle-layer button:hover{background:#fff7ed;box-shadow:0 10px 22px #0f172a29}.sr-staff-toggle-layer button.is-active{background:var(--sr-orange);color:#fff;box-shadow:0 12px 26px #e8892e47}.sr-loop-range-overlay{z-index:5;pointer-events:none;position:absolute;inset:0}.sr-loop-range-overlay span{mix-blend-mode:normal;transform-origin:50%;background:#30303038;transition:none;display:block;position:absolute}.sr-loop-range-overlay.is-played span{background:#67d3cd47}.sr-loop-range-overlay.is-opening span{animation:.21s cubic-bezier(.2,.8,.22,1) both sr-loop-spawn}@keyframes sr-loop-spawn{0%{opacity:.72;transform:scaleX(.018)}to{opacity:1;transform:scaleX(1)}}.sr-playhead{z-index:6;pointer-events:none;background:#2a2a2a26;width:16px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.sr-score-viewport.is-loading .sr-playhead,.sr-score-viewport.is-loading .sr-playhead-loop-button,.sr-score-viewport.is-loading .sr-staff-toggle-layer,.sr-score-viewport.is-loading .sr-loop-range-overlay,.sr-score-viewport.is-loading .sr-loop-handle-layer{display:none}.sr-playhead-loop-button{z-index:18;width:60px;height:60px;color:var(--sr-orange);opacity:1;background:#fff;border:0;border-radius:999px;place-items:center;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 14px 34px #0f172a2e}.sr-playhead-loop-button.is-exit{color:#fff;background:#525252c7;border:1.5px solid #fffffff5;width:53px;height:53px}.sr-playhead-loop-button.is-exit:before{content:none}.sr-playhead-loop-button.is-exit svg{width:21px;height:21px;position:relative}.sr-app .sr-playhead-loop-button{border:0}.sr-app .sr-playhead-loop-button.is-exit{border:1.5px solid #fffffff5}.sr-loop-handle-layer{z-index:15;pointer-events:none;position:absolute;inset:0}.sr-loop-handle{z-index:9;width:42px;height:91px;color:var(--sr-orange);cursor:ew-resize;box-shadow:none;pointer-events:auto;touch-action:none;will-change:left, top;background:0 0;border:0;border-radius:8px;place-items:center;font-size:16px;transition:opacity .16s;display:grid;position:absolute;transform:translate(-50%,-50%)}.sr-loop-handle:before{content:"";background:#fffffff0;border-radius:8px;position:absolute;inset:10%;box-shadow:0 14px 30px #0f172a2e}.sr-loop-handle svg{z-index:1;position:relative}.sr-score-viewport.is-loop-dragging .sr-loop-range-overlay span,.sr-score-viewport.is-loop-dragging .sr-loop-handle{transition:none}.sr-app .sr-loop-handle{border:0}.sr-loop-handle[aria-disabled=true]{opacity:1}.sr-error{z-index:10;color:#b42318;background:#ffffffeb;border-radius:8px;padding:16px 18px;font-size:15px;font-weight:800;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sr-dev-panel{z-index:40;color:#f8fafc;background:#111827f0;border:1px solid #ffffff29;border-radius:10px;width:min(360px,100vw - 28px);max-height:min(430px,100vh - 28px);padding:14px;position:fixed;bottom:14px;right:14px;overflow:auto;box-shadow:0 22px 58px #00000052}.sr-dev-panel strong{margin-bottom:8px;font-size:14px;font-weight:860;display:block}.sr-dev-panel dl{grid-template-columns:72px minmax(0,1fr);gap:6px 10px;margin:0;display:grid}.sr-dev-panel dt{color:#93a2b8;text-transform:uppercase;font-size:11px;font-weight:820}.sr-dev-panel dd{overflow-wrap:anywhere;color:#fff;min-width:0;margin:0;font-size:12px;font-weight:700}.sr-dev-toggle{color:#ffd1a0;background:#e8892e38;border-radius:7px;min-height:30px;padding:0 10px;font-size:12px;font-weight:820}.sr-dev-segment{background:#ffffff14;border:1px solid #ffffff21;border-radius:7px;display:inline-flex;overflow:hidden}.sr-dev-segment button{color:#cbd5e1;background:0 0;min-height:30px;padding:0 10px;font-size:12px;font-weight:820}.sr-dev-segment button.is-active{color:#0d536d;background:#ffffffeb}.sr-dev-segment button:disabled{cursor:not-allowed;opacity:.45}.sr-dev-panel p{color:#fbbf24;margin:10px 0 0;font-size:12px;line-height:1.35}