:root{color-scheme:dark}body{margin:0;background:#0d1117;color:#e6edf3;font-family:system-ui,sans-serif}.dropzone{display:flex;align-items:center;justify-content:center;border:2px dashed #3b4653;border-radius:8px;margin:12px;padding:20px;color:#8b949e;font-size:14px;cursor:default;transition:border-color .15s,background .15s;min-height:60px}.dropzone.dragover{border-color:#4d9dff;background:#4d9dff14;color:#e6edf3}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:8px 12px;background:#161b22;border-bottom:1px solid #2b3340;font-size:13px}.toolbar label{display:flex;align-items:center;gap:4px;white-space:nowrap}.toolbar button{background:#21262d;color:#e6edf3;border:1px solid #3b4653;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:14px}.toolbar button:hover{background:#2d333b}.toolbar input[type=number],.toolbar select{background:#21262d;color:#e6edf3;border:1px solid #3b4653;border-radius:4px;padding:2px 4px;font-size:13px}.toolbar input[type=range]{cursor:pointer}.toolbar-readout{display:flex;gap:12px;margin-left:auto;font-variant-numeric:tabular-nums}.readout-bpm{color:#ffd24d}.readout-time{color:#e6edf3}.readout-measure{color:#8b949e}.warnings{margin:4px 12px;padding:6px 10px;background:#ff4d5a1a;border-left:3px solid #ff4d5a;border-radius:4px;font-size:12px;color:#ff8b97;display:none}.warnings:not(:empty){display:block}.canvas-row{display:flex;gap:16px;padding:12px;align-items:flex-start}.canvas-row canvas{display:block;border-radius:4px;background:#0d1117}