:root{--bg: #000000;--panel: #0b0b0b;--panel-deep: #050505;--line: #191919;--edge: #1e1e1e;--edge-soft: #232323;--edge-mid: #262626;--edge-strong: #2a2a2a;--ink: #ffffff;--ink-soft: #cfcfcf;--ink-dim: #b4b4b4;--muted: #7d7d7d;--faint: #5a5a5a;--fainter: #4c4c4c;--left-hand: #3ddc97;--right-hand: #78bcff;--sans: "DM Sans", Helvetica, Arial, sans-serif;--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--bar: 46px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);overscroll-behavior:none}body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}button{font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}input::placeholder{color:var(--fainter)}.app{position:relative;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}.mono{font-family:var(--mono)}.bar{height:var(--bar);flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line)}.chip{height:28px;padding:0 11px;flex:none;white-space:nowrap;display:flex;align-items:center;gap:8px;border:1px solid var(--edge-strong);border-radius:6px;background:var(--panel);color:var(--ink);font-family:var(--mono);font-size:11px;cursor:pointer}.chip:hover:not(:disabled){border-color:#555}.chip .dot{width:5px;height:5px;border-radius:50%;background:var(--ink)}.chip .caret{color:#6a6a6a;font-size:9px}.picker{position:relative}.picker-menu{position:absolute;top:34px;left:0;width:288px;background:var(--panel);border:1px solid var(--edge-mid);border-radius:9px;padding:5px;z-index:40}.picker-option{display:block;width:100%;text-align:left;padding:9px 10px;border:none;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}.picker-option[aria-selected=true]{background:#1c1c1c}.picker-option:hover{background:#161616}.picker-option .head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.picker-option .name{font-size:12.5px;font-weight:500}.picker-option .tag{font-family:var(--mono);font-size:10px;color:#6a6a6a}.picker-option .note{display:block;margin-top:3px;font-size:11px;color:var(--muted);text-align:left;line-height:1.35}.tabs{display:flex;gap:2px;padding:3px;background:var(--panel);border:1px solid var(--edge);border-radius:7px;flex:none}.tab{height:22px;padding:0 11px;border:none;border-radius:5px;cursor:pointer;white-space:nowrap;font-size:11.5px;font-weight:500;background:transparent;color:var(--muted)}.tab[aria-selected=true]{background:var(--ink);color:#000}.tab:disabled{cursor:default;color:var(--fainter)}.bar-file{flex:1;min-width:0;display:flex;align-items:center;gap:8px}.bar-file .name{font-family:var(--mono);font-size:10.5px;color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ghost{height:22px;padding:0 8px;flex:none;white-space:nowrap;border:1px solid var(--edge-soft);border-radius:5px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}.ghost:hover:not(:disabled){border-color:#555;color:var(--ink)}.action{height:28px;padding:0 12px;flex:none;white-space:nowrap;border:1px solid var(--edge-strong);border-radius:6px;background:var(--panel);color:var(--ink-soft);font-size:11.5px;font-weight:500;cursor:pointer}.action:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}.action.primary{border-color:var(--ink);background:transparent;color:var(--ink)}.action.primary:hover:not(:disabled){background:var(--ink);color:#000}.action:disabled,.ghost:disabled,.chip:disabled{opacity:.4;cursor:default}.instrument,.instrument-track{display:contents}.roll{flex:1;position:relative;overflow:hidden;background:var(--bg)}.roll-octave{position:absolute;top:0;bottom:0;width:1px;background:#141414}.roll-layer{position:absolute;left:0;right:0;top:0;height:0;will-change:transform,opacity}.roll-note{position:absolute;border-radius:2px;border:1px solid transparent}.roll-finger{position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:13px;height:13px;border-radius:50%;background:#000000a6;color:var(--ink);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}.roll-chord{position:absolute;left:0;right:0;height:0;display:flex;align-items:center;z-index:8}.roll-chord .rule{position:absolute;left:0;right:0;top:0;height:1px;background:#ffffff4d}.roll-chord .label{position:relative;margin-left:12px;padding:4px 12px;border:none;border-radius:6px;background:var(--ink);color:#000;font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.02em;transform:translateY(-50%);box-shadow:0 2px 10px #000c;cursor:pointer}.roll-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;pointer-events:none}.roll-empty .headline{font-size:15px;color:var(--ink-soft)}.roll-empty .sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.07em}.roll-error{color:#ff8f8f}.sheet{position:absolute;inset:0;background:var(--bg);overflow:auto;z-index:12;padding:14px}.sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}.sheet-head span{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.1em}.sheet-paper{background:#fff;border-radius:6px;padding:18px 16px 24px;min-height:120px}.sheet-engraving{min-height:78px}.sheet-engraving svg{display:block;margin:0 auto}.sheet-waiting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 24px;text-align:center;font-size:15px;color:var(--ink-soft);pointer-events:none}.keys{height:200px;flex:none;position:relative;background:var(--bg);user-select:none;-webkit-user-select:none}.key{position:absolute;top:0;border-radius:0 0 2px 2px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.key.white{height:100%;background:#fff;border:1px solid #000000;z-index:1}.key.black{height:62%;background:#0a0a0a;border:1px solid var(--edge-mid);z-index:3}.transport{height:62px;flex:none;position:relative;display:flex;align-items:center;gap:18px;padding:0 14px;border-top:1px solid var(--line)}.scrub{position:absolute;top:0;left:0;right:0;height:3px;background:#1c1c1c;cursor:pointer;touch-action:none}.scrub .fill{height:100%;width:0%;background:var(--ink)}.transport-left{display:flex;align-items:center;gap:12px}.icon-button{width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:var(--ink-dim);font-size:12px;cursor:pointer}.icon-button:hover:not(:disabled){background:#141414;color:var(--ink)}.play{width:34px;height:34px;border:none;border-radius:50%;background:var(--ink);color:#000;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}.play:hover:not(:disabled){background:var(--ink-soft)}.play:disabled{background:#2a2a2a;color:var(--faint);cursor:default}.clock{font-family:var(--mono);font-size:11.5px;color:#9a9a9a;min-width:88px}.chord-now{min-width:42px;padding:3px 8px;border-radius:5px;border:1px solid var(--edge-strong);background:var(--panel);font-family:var(--mono);font-size:11.5px;color:var(--ink);text-align:center}.blend{flex:1;display:flex;align-items:center;gap:12px;max-width:420px;margin:0 auto}.blend-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;white-space:nowrap;color:var(--faint)}.blend-label[data-active="1"]{color:var(--left-hand)}.blend-label.right[data-active="1"]{color:var(--right-hand)}.blend-track{position:relative;flex:1;height:20px;display:flex;align-items:center;cursor:pointer;touch-action:none}.blend-track .rail{position:absolute;left:0;right:0;height:6px;border-radius:3px;background:linear-gradient(90deg,#2fbb87,#3a9fb4 52%,#4589d6)}.blend-track .knob{position:absolute;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--ink);border:2px solid #2fbb87;box-shadow:0 1px 5px #0009}.blend-track[data-disabled="1"]{cursor:default;opacity:.4}.speed{display:flex;align-items:center;gap:7px}.step{width:24px;height:24px;border:1px solid var(--edge-strong);border-radius:5px;background:transparent;color:var(--ink-soft);font-size:13px;line-height:1;cursor:pointer}.step:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}.speed .value{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);min-width:32px;text-align:center}.scrim{position:fixed;inset:0;z-index:55;background:#000000b8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;overflow:auto;padding:32px}.modal{width:720px;max-width:100%;margin:auto;background:var(--panel-deep);border:1px solid var(--edge-soft);border-radius:14px;padding:22px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.modal-head .picker-menu{left:auto;right:0}.modal-head .title{font-size:15px;font-weight:700;letter-spacing:-.2px}.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:132px;border:1px dashed #2c2c2c;border-radius:11px;background:#0a0a0a;cursor:pointer}.drop[data-hot="1"]{border-color:var(--ink);background:#0f0f0f}.drop .headline{font-size:13.5px;color:#e2e2e2}.drop .hint{font-family:var(--mono);font-size:10.5px;color:var(--fainter);letter-spacing:.07em}.or{display:flex;align-items:center;gap:10px;margin:14px 0}.or .rule{flex:1;height:1px;background:#1c1c1c}.or span{font-family:var(--mono);font-size:9.5px;color:var(--fainter);letter-spacing:.1em}.url{display:flex;align-items:center;gap:6px;height:32px;padding:0 4px 0 11px;border:1px solid var(--edge-mid);border-radius:7px;background:var(--panel)}.url .tag{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.08em;flex:none}.url input{flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;color:var(--ink);font-family:var(--mono);font-size:11.5px}.url button{height:23px;padding:0 10px;flex:none;white-space:nowrap;border:none;border-radius:5px;background:var(--ink);color:#000;font-size:11px;font-weight:500;cursor:pointer}.url button:hover:not(:disabled){background:var(--ink-soft)}.url button:disabled{background:#2a2a2a;color:var(--faint);cursor:default}.modal-error{margin-top:12px;font-family:var(--mono);font-size:11px;line-height:1.5;color:#ff8f8f}.trim{margin-top:20px;padding-top:18px;border-top:1px solid #171717;-webkit-user-select:none;user-select:none}.trim-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.trim-head-left{display:flex;align-items:center;gap:10px;min-width:0}.trim-head .preview{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:22px;min-width:128px;padding:0 10px;flex:none;border:1px solid var(--edge-mid);border-radius:5px;background:var(--panel);color:var(--ink-dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1;cursor:pointer}.trim-head .preview:hover{border-color:var(--edge-strong);color:var(--ink)}.trim-head .preview .glyph{font-size:8px;color:var(--ink)}.trim-head .caption{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.1em}.trim-head .readout{flex:none;font-family:var(--mono);font-size:9.5px;color:#8a8a8a;letter-spacing:.06em}.wave{position:relative;height:84px;touch-action:none}.wave[data-slidable="1"]{cursor:grab;touch-action:none}.wave[data-slidable="1"]:active{cursor:grabbing}.wave-bars{position:absolute;inset:0;display:flex;align-items:center;gap:1px;pointer-events:none}.wave-bars i{flex:1;background:var(--ink);border-radius:1px;opacity:.22}.wave-bars i[data-in="1"]{opacity:.9}.wave-mask{position:absolute;top:0;bottom:0;background:#000000bd;pointer-events:none}.wave-mask.left{left:0;border-right:2px solid var(--ink)}.wave-mask.right{right:0;border-left:2px solid var(--ink)}.wave-head{position:absolute;top:-5px;bottom:-5px;width:1px;background:var(--ink);opacity:0;pointer-events:none;z-index:6}.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}.modal-foot .quote{font-family:var(--mono);font-size:10.5px;color:var(--faint)}.go{height:32px;padding:0 16px;border:none;border-radius:7px;background:var(--ink);color:#000;font-size:12.5px;font-weight:500;cursor:pointer}.go:hover:not(:disabled){background:var(--ink-soft)}.go:disabled{background:#2a2a2a;color:var(--faint);cursor:default}.working{position:absolute;top:calc(var(--bar) + 12px);right:12px;z-index:20;display:flex;align-items:center;gap:12px;height:38px;padding:0 10px 0 12px;border:1px solid var(--edge-mid);border-radius:9px;background:#0b0b0beb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.meter{display:flex;align-items:flex-end;gap:3px;height:15px}.meter i{width:3px;background:var(--ink);transform-origin:bottom;animation:pf-bar .62s ease-in-out infinite alternate}@keyframes pf-bar{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}.working .stage{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);letter-spacing:.06em;white-space:nowrap}@media(max-width:760px){.trim-head .readout{display:none}}@media(prefers-reduced-motion:reduce){.meter i{animation:none;transform:scaleY(.7)}.roll-layer.decorative{display:none}}@media(max-width:760px){.instrument{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}.instrument-track{flex:none;display:flex;flex-direction:column;width:760px;min-width:100%}.roll{flex:1;min-height:0}.keys{height:clamp(76px,15vh,124px)}.working{position:static;flex:none;margin:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}.bar{height:auto;flex-wrap:wrap;gap:8px;padding:calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}.picker{order:1;flex:1 1 130px;min-width:0}.chip{max-width:100%}.chip .label{min-width:0;overflow:hidden;text-overflow:ellipsis}.tabs{order:2;flex:1 1 auto}.tab{flex:1}.bar-file{order:3;flex-basis:100%}.action{order:4;flex:1 1 0}.picker-menu{width:min(288px,calc(100vw - 24px))}.transport{height:auto;flex-wrap:wrap;gap:10px 14px;padding:18px max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.transport-left{flex:0 1 auto;gap:10px}.clock{min-width:0}.speed{margin-left:auto}.blend{order:3;flex-basis:100%;max-width:none;margin:0}.scrim{align-items:flex-start;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.modal{padding:16px;border-radius:12px}.drop{height:108px;padding:0 12px;text-align:center}.or{margin:12px 0}.trim{margin-top:16px;padding-top:14px}.trim-head{flex-wrap:wrap;gap:4px 12px}.wave{height:72px}.wave-bars{gap:0}.wave-bars i{border-radius:0}.modal-foot{flex-direction:column;align-items:stretch;gap:10px}.modal-foot .quote{text-align:center}.go{width:100%}.sheet{padding:10px}.sheet-head{flex-wrap:wrap;gap:2px 12px}}@media(pointer:coarse){.chip{height:38px;padding:0 14px;font-size:12px}.tab{height:36px;padding:0 14px;font-size:12.5px}.ghost{height:36px;padding:0 12px;font-size:12px}.action{height:40px;font-size:12.5px}.picker-option{padding:12px}.icon-button{width:44px;height:44px;font-size:14px}.play{width:48px;height:48px;font-size:15px}.step{width:40px;height:40px;font-size:16px}.scrub{height:14px;background:transparent}.scrub:before{content:"";position:absolute;left:0;right:0;top:5px;height:4px;background:#1c1c1c}.scrub .fill{position:relative;top:5px;height:4px}.transport-left,.blend,.speed{position:relative}.blend-track{height:34px}.blend-track .knob{width:24px;height:24px;margin-left:-12px}.url{height:46px}.url input{font-size:16px}.url button{height:36px;padding:0 14px;font-size:12px}.go{height:46px;padding:0 20px;font-size:14px}.wave-play{width:44px;height:44px;margin:-22px 0 0 -22px;font-size:13px}.roll-chord .label{padding:8px 14px}}