html,body{margin:0;height:100%;background:#1a1a1a;color:#eee;font-family:system-ui,sans-serif}#app{height:100%}#start-gate{width:100%;height:100%;border:none;background:#1a1a1a;color:#eee;font-size:1.25rem}.layout{display:flex;flex-direction:column;gap:1rem;height:100%;box-sizing:border-box;padding:1rem 1.5rem;max-width:1400px;margin:0 auto}.workspace{flex:1;display:flex;gap:1.25rem;min-height:0}.play-column{flex:1.2;display:flex;min-width:0}.panel-column{flex:1;min-width:320px;max-width:420px;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}#banners{display:flex;flex-direction:column;gap:.5rem}.control-bar{display:flex;flex-wrap:wrap;gap:1.5rem;background:#232326;border-radius:.75rem;padding:.75rem 1rem}.control-group{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.control-group label{display:flex;flex-direction:column;gap:.15rem;font-size:.7rem;color:#aaa}button,select,input[type=number]{background:#2a2a2e;color:#eee;border:none;border-radius:.5rem;padding:.4rem .6rem;font-size:.85rem}button.active{background:#e85d3a;color:#1a1a1a}input[type=number]{width:4rem}.display{background:#232326;border-radius:.75rem;padding:1rem 1.25rem}.display-chord{font-size:2.5rem;font-weight:600}.display-row{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:.85rem;color:#aaa;margin-top:.4rem}.display-row .warn{color:#e85d3a}.main-area{flex:1;display:flex;gap:2rem;align-items:center;justify-content:center;min-height:0}.area-pads{display:grid;grid-template-columns:repeat(4,110px);gap:.75rem}.pad{min-height:90px;border-radius:.75rem;border:none;background:#2a2a2e;color:#eee;font-size:1.1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;cursor:pointer}.pad.active{background:#e85d3a;color:#1a1a1a}.pad-key-hint{font-size:.7rem;color:#999;border:1px solid #555;border-radius:.25rem;padding:0 .3rem}.pad.active .pad-key-hint{color:#1a1a1a;border-color:#1a1a1a}.area-modifier{display:flex;align-items:center;justify-content:center}.modifier-pad{width:220px;height:220px;border-radius:50%;background:#232326;border:2px solid #3a3a3e;position:relative;cursor:grab}.modifier-pad-knob{position:absolute;top:50%;left:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:#f2c94c;transition:transform .05s linear}.looper-panel{background:#232326;border-radius:.75rem;padding:.75rem 1rem}.looper-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.85rem;color:#ccc}.looper-tracks{display:flex;flex-direction:column;gap:.4rem}.looper-track{display:flex;align-items:center;gap:.5rem;background:#2a2a2e;border-radius:.5rem;padding:.4rem .6rem}.looper-track.armed{outline:2px solid #e85d3a}.looper-track-label{flex:1;font-size:.85rem}.looper-track button{padding:.35rem .6rem;font-size:.8rem}.looper-track button:disabled{opacity:.4}.patch-editor[hidden]{display:none}.patch-editor{background:#232326;border-radius:.75rem;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.5rem}.patch-header{display:flex;gap:.5rem}.patch-header select{flex:1}.controls-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.patch-field{display:flex;flex-direction:column;gap:.15rem;font-size:.75rem;color:#aaa}.patch-field input[type=text]{background:#2a2a2e;color:#eee;border:none;border-radius:.4rem;padding:.4rem .5rem;font-size:.9rem}.patch-field output{font-variant-numeric:tabular-nums;color:#ccc}.patch-field-name{flex:1}.patch-section{background:#2a2a2e;border-radius:.5rem;padding:.6rem;display:flex;flex-direction:column;gap:.4rem}.patch-section h4{margin:0;font-size:.8rem;color:#ccc;font-weight:600}.patch-sample-status{margin:0;font-size:.8rem;color:#ccc}.shortcut-overlay[hidden]{display:none}.shortcut-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10}.shortcut-card{background:#232326;border-radius:.75rem;padding:1.25rem 1.5rem;min-width:320px}.shortcut-card h3{margin:0 0 .75rem}.shortcut-card table{border-collapse:collapse;width:100%}.shortcut-card td{padding:.3rem .5rem;font-size:.85rem;color:#ccc}.shortcut-card kbd{background:#2a2a2e;border:1px solid #555;border-radius:.3rem;padding:.1rem .4rem;font-family:inherit}.shortcut-card button{margin-top:.75rem}.slot-octave-panel[hidden]{display:none}.slot-octave-panel{background:#232326;border-radius:.75rem;padding:.75rem 1rem;display:flex;flex-wrap:wrap;gap:.75rem}.slot-octave-row{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.75rem;color:#aaa}.step-grid[hidden]{display:none}.step-grid{background:#232326;border-radius:.75rem;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.3rem}.step-row{display:flex;gap:.3rem}.step-cell{width:1.6rem;height:1.6rem;border-radius:.3rem;background:#2a2a2e;border:1px solid #3a3a3e}.step-cell.filled{background:#4a4a52}.step-cell.current{border-color:#e85d3a;border-width:2px}.step-cell.filled.current{background:#e85d3a}.banner{background:#2a2a2e;border-left:4px solid #e85d3a;border-radius:.5rem;padding:.6rem .8rem;font-size:.85rem}.banner-secondary{border-left-color:#f2c94c}