@font-face{font-family:Bravura;src:url(/fonts/Bravura.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}:root{color-scheme:dark;font-family:ui-monospace,SF Mono,Cascadia Mono,Menlo,monospace;font-size:13px;color:#d8dde6;background:#0e1116;--accent: #f4c15d;--panel: #141920;--line: rgba(255, 255, 255, .08)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:#1d242e;border:1px solid var(--line);border-radius:4px;padding:3px 8px}button:hover{background:#252e3a}select,input[type=number]{background:#1d242e;border:1px solid var(--line);border-radius:4px;padding:3px 6px}input[type=number]{width:60px}.app{display:flex;flex-direction:column;height:100vh}.transport{display:flex;align-items:center;gap:16px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}.transport label{display:flex;align-items:center;gap:6px;color:#7d8899}.play{min-width:64px;background:var(--accent);border-color:var(--accent);color:#17130a;font-weight:700}.play:hover{background:#ffd27a}.play:disabled{opacity:.6;cursor:default}.error{color:#e28b8b}.position{color:#7d8899;min-width:70px}.fullscreen{margin-left:auto}.download{display:flex;align-items:center;gap:8px;color:#7d8899;font-size:11px}.download-bar{width:120px;height:6px;border-radius:3px;background:#1d242e;overflow:hidden}.download-fill{height:100%;background:var(--accent);transition:width .15s linear}.download-label{min-width:96px;text-align:right}.workspace{display:flex;flex:1;min-height:0}.tracks{width:190px;flex-shrink:0;border-right:1px solid var(--line);background:var(--panel);padding:10px;overflow-y:auto}.tracks-heading{display:flex;justify-content:space-between;align-items:center;color:#7d8899;margin-bottom:8px}.track{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid transparent;border-radius:5px;margin-bottom:6px}.track.selected{border-color:#f4c15d80;background:#f4c15d0d}.track-row{display:flex;align-items:center;gap:4px}.track-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mute.active{background:#7a4a4a}.remove{padding:3px 6px}.remove:disabled{opacity:.3;cursor:default}.track input[type=range]{width:100%;accent-color:var(--accent)}.instrument-button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-width:0;padding:5px 8px;text-align:left}.instrument-button-name,.instrument-button-bank{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.instrument-button-bank{color:#7d8899;font-size:10px}.instrument-popup{position:fixed;z-index:1200;display:flex;flex-direction:column;background:var(--panel);border:1px solid rgba(255,255,255,.14);border-radius:8px;box-shadow:0 18px 48px #0000008c;overflow:hidden}.instrument-popup-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}.instrument-popup-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a8b1bf}.instrument-tabs{display:flex;gap:2px;padding:2px;border-radius:5px;background:#0c0f14}.instrument-tabs button{padding:4px 9px;border:0;border-radius:4px;background:transparent;color:#7d8899}.instrument-tabs button.active{background:#252e3a;color:#d8dde6}.instrument-popup-close{padding:2px 7px;border-color:transparent;background:transparent;color:#7d8899}.instrument-synth{display:flex;flex-direction:column;gap:16px;padding:14px;overflow-y:auto}.instrument-wave-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.instrument-wave-grid button.active{background:var(--accent);border-color:var(--accent);color:#17130a;font-weight:700}.instrument-params{display:flex;flex-direction:column;gap:12px}.instrument-param{display:grid;grid-template-columns:86px 1fr 64px;align-items:center;gap:10px;color:#a8b1bf}.instrument-param input{width:100%;accent-color:var(--accent)}.instrument-param-value{color:#7d8899;font-size:11px;text-align:right}.instrument-soundfont{display:flex;flex:1;flex-direction:column;gap:8px;min-height:0;padding:12px}.instrument-search-row{display:flex;align-items:center;gap:8px}.instrument-search{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:#1d242e}.instrument-count{color:#7d8899;font-size:11px;white-space:nowrap}.instrument-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:5px;background:#11161d}.instrument-empty{padding:20px 9px;color:#7d8899;text-align:center}.instrument-list-inner{position:relative}.instrument-category{position:absolute;left:0;right:0;padding:6px 9px 4px;background:#11161d;border-bottom:1px solid var(--line);color:var(--accent);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.instrument-option{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:4px 9px;overflow:hidden;border:0;border-radius:0;background:transparent;text-align:left}.instrument-option:hover{background:#1d242e}.instrument-option.selected{background:#f4c15d1a;box-shadow:inset 2px 0 0 var(--accent)}.instrument-option-name,.instrument-option-meta{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.instrument-option-meta{color:#7d8899;font-size:10px}.editor{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.roll{flex:1;min-height:0;border:1px solid var(--line);border-radius:5px;overflow:auto;overflow-anchor:none;background:#11161d;-webkit-user-select:none;user-select:none;cursor:default}.roll.panning,.roll.panning .grid,.roll.adjusting .keys,.roll.panning .ruler,.roll.dragging,.roll.dragging .grid,.roll.dragging .note,.roll.dragging .note-edge{cursor:grabbing}.roll.resizing,.roll.resizing .grid,.roll.resizing .note,.roll.resizing .note-edge{cursor:ew-resize}.sheet{display:block}.ruler-row{display:flex;position:sticky;top:0;z-index:5;height:24px;background:#11161d}.corner{flex-shrink:0;position:sticky;left:0;z-index:6;background:#0c0f14;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.body-row{display:flex}.keys{flex-shrink:0;position:sticky;left:0;z-index:4;background:#0c0f14;border-right:1px solid var(--line);cursor:grab}.key{position:relative;background:#dfe5ee1a;color:#6b7789;border-bottom:1px solid rgba(255,255,255,.12)}.keys-preview{position:absolute;top:0;right:0;width:50%;height:100%;cursor:pointer}.key-label{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;line-height:1;white-space:nowrap;pointer-events:none}.key.black{background:#0000001a;color:#414b5a;border-bottom-color:#ffffff38}.key.root{color:var(--accent)}.key.unavailable{background:#00000073;color:#39414d}.key.previewing{background:#f4c15d59}.key.black.previewing{background:#f4c15d4d}.ruler{display:flex;flex-shrink:0;height:24px;border-bottom:1px solid var(--line);background:#11161d;cursor:grab}.ruler .bar{flex-shrink:0;border-right:1px solid var(--line);line-height:24px;color:#6b7789;text-align:left;padding-left:6px;white-space:nowrap;overflow:hidden}.grid{position:relative;flex-shrink:0;cursor:crosshair;background-color:#171b22;background-image:linear-gradient(to right,rgba(255,255,255,.26) 1px,transparent 1px),linear-gradient(to right,rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(to right,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px)}.row{position:absolute;left:0;right:0;pointer-events:none}.row.in-scale{background:#ffffff06}.row.root{background:#f4c15d0f}.row.unavailable{background:#00000052}.note{position:absolute;border-radius:3px;z-index:2;cursor:grab;touch-action:none;box-shadow:inset 0 0 0 1px #00000040}.note:hover{filter:brightness(1.2)}.note:active{cursor:grabbing}.note-edge{position:absolute;top:0;bottom:0;width:min(8px,30%);cursor:ew-resize}.note-edge-start{left:0}.note-edge-end{right:0}.note-hud{position:fixed;z-index:1000;display:flex;align-items:center;gap:3px;padding:5px 9px;border-radius:5px;background:#0c0f14b3;color:#f4c15d;white-space:nowrap;pointer-events:none;box-shadow:0 4px 12px #00000059}.note-hud-glyph{font-family:Bravura,serif;font-size:26px;line-height:1}.note-hud-plus{font-size:12px;color:#7d8899}.note.pulse{background:#f4c15d}.note.triangle{background:#7bd88f}.note.saw{background:#e2725b}.note.fm{background:#b48ce8}.note.noise{background:#6cc6e0}.note.soundfont{background:#9aa7bd}.playhead{position:absolute;top:0;bottom:0;left:0;width:2px;will-change:transform;background:#fffc;z-index:3;pointer-events:none}
