html,body{margin:0;height:100%;background:#1a1a1a;color:#eee;font-family:system-ui,sans-serif;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}#app{height:100%}#start-gate{width:100%;height:100%;border:none;background:#1a1a1a;color:#eee;font-size:1.25rem}.layout{display:grid;grid-template-areas:"banners" "display" "joystick" "pads" "controls" "looper" "patch-editor";grid-template-rows:auto auto 1fr auto auto auto auto;height:100%;gap:.6rem;padding:.75rem;box-sizing:border-box}#banners{grid-area:banners;display:flex;flex-direction:column;gap:.5rem}.area-display{grid-area:display}.area-joystick{grid-area:joystick;display:flex;align-items:center;justify-content:center}.area-pads{grid-area:pads}.area-controls{grid-area:controls}.area-backup-controls{display:flex;gap:.5rem}.area-looper{grid-area:looper}.area-patch-editor{grid-area:patch-editor}@media (min-width: 700px){.layout{grid-template-areas:"banners banners" "display display" "joystick pads" "controls controls" "looper looper" "patch-editor patch-editor";grid-template-columns:1fr 1fr;padding:1.5rem;gap:1.25rem}.area-pads{display:flex;flex-wrap:wrap;align-content:center;justify-content:center}.pad{width:100px;flex-grow:0}}.display{background:#232326;border-radius:.75rem;padding:.75rem 1rem}.display-chord{font-size:2rem;font-weight:600}.display-row{display:flex;gap:1rem;font-size:.85rem;color:#aaa;margin-top:.25rem}.display-row-small{font-size:.75rem}.display-row-small .warn{color:#e85d3a}.area-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.pad{min-height:64px;border-radius:.75rem;border:none;background:#2a2a2e;color:#eee;font-size:1.1rem;touch-action:none}.pad.active{background:#e85d3a;color:#1a1a1a}.joystick{width:150px;height:150px;border-radius:50%;background:#232326;border:2px solid #3a3a3e;position:relative;touch-action:none}.joystick-knob{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#f2c94c;transition:transform .05s linear}@media (min-width: 700px){.joystick{width:220px;height:220px}.joystick-knob{width:72px;height:72px;margin:-36px 0 0 -36px}}.controls-row{display:flex;gap:.75rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap}.slider-label{display:flex;flex-direction:column;font-size:.75rem;color:#aaa}button,select{background:#2a2a2e;color:#eee;border:none;border-radius:.5rem;padding:.5rem .75rem;font-size:.9rem}button.active{background:#e85d3a;color:#1a1a1a}.bpm-readout{font-variant-numeric:tabular-nums;color:#ccc;font-size:.85rem}.looper-panel{background:#232326;border-radius:.75rem;padding:.75rem;margin-top:.25rem}.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;margin-top:.25rem;display:flex;flex-direction:column;gap:.5rem}.patch-header{display:flex;gap:.5rem}.patch-header select{flex:1}.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}.slot-octave-panel[hidden]{display:none}.slot-octave-panel{background:#232326;border-radius:.75rem;padding:.75rem;margin-top:.25rem;display:flex;flex-wrap:wrap;gap:.6rem}.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;margin-top:.25rem;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;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;font-size:.85rem}.banner-secondary{border-left-color:#f2c94c}