*,:before,:after{box-sizing:border-box}:root{--bg:#1a1a1c;--ink:#f2f2f5;--rule:#2a2a2e;--sub:#8e8e94;--panel:#232326;--panel-edge:#2e2e32;--tile-bg:#0e0e10;--accent:#ff375f;--accent-soft:#ff375f29;--accent-glow:#ff375f61;--accent-2:#5ac8fa;--accent-2-soft:#5ac8fa29;--accent-2-glow:#5ac8fa6b;--warn:#ffd60a;--rec:var(--accent);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);height:100%;min-height:100%;color:var(--ink);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Geist Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:400;line-height:1.45}.app-root{flex-direction:column;height:100dvh;padding:12px clamp(12px,2vw,24px);display:flex;overflow:hidden}.looper{flex-direction:column;flex:1;gap:12px;width:100%;max-width:1500px;min-height:0;margin:0 auto;display:flex}.rule{background:var(--rule);border:0;width:100%;height:1px}.looper-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:4px 0;display:flex}.looper-header h1{color:var(--ink);letter-spacing:.2em;text-transform:uppercase;align-items:center;gap:.6em;font-family:Geist Mono,monospace;font-size:13px;font-style:normal;font-weight:500;line-height:1;display:inline-flex}.brand-mark{flex-shrink:0;width:24px;height:24px}.looper-header .status{letter-spacing:.22em;text-transform:uppercase;color:var(--sub);align-items:center;gap:8px;font-size:10px;display:inline-flex}.looper-header .status .led{background:var(--rule);border-radius:50%;width:7px;height:7px;transition:background .15s,box-shadow .15s}.looper-header .status.is-on .led{background:var(--accent);box-shadow:0 0 0 1px #ff375f40, 0 0 6px var(--accent-glow)}.looper-header .status.is-on{color:var(--ink)}.tempo-panel{background:var(--panel-edge);border:1px solid var(--panel-edge);border-radius:2px;grid-template-columns:auto auto auto auto auto 1fr;align-items:stretch;gap:1px;display:grid}.tempo-field{background:var(--panel);flex-direction:column;gap:4px;min-width:0;padding:10px 18px 12px;display:flex}.tempo-field.is-actions{background:var(--panel);flex-direction:row;justify-content:flex-end;justify-self:stretch;align-items:center;gap:10px;padding:10px 14px}.tempo-field .label{letter-spacing:.22em;text-transform:uppercase;color:var(--sub);font-size:9px}.tempo-field .value{font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.03em;font-weight:500}.tempo-field.is-bpm .value{padding:2px 0 0;font-size:44px;line-height:1}.bpm-input,.bpm-display{appearance:none;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);width:100px;caret-color:var(--accent);background:0 0;border:0;outline:none;padding:2px 0 0;font-family:Geist Mono,monospace;font-size:44px;font-weight:500;line-height:1}.bpm-display{cursor:ns-resize;-webkit-user-select:none;user-select:none;touch-action:none}.bpm-display:hover{color:var(--accent)}.bpm-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo-panel.is-running .tempo-field.is-bpm .value,.tempo-panel.is-running .bpm-input,.tempo-panel.is-running .bpm-display{color:var(--accent)}.bpm-input.is-clamped,.bpm-display.is-clamped{animation:.9s ease-out bpm-clamp-flash}@keyframes bpm-clamp-flash{0%{color:var(--warn);text-shadow:0 0 12px #ffcb3b99}to{}}.tempo-field .display-select{align-items:baseline;display:inline-flex;position:relative}.tempo-field .display-select select,.tempo-field .display-select .display-cycler{appearance:none;letter-spacing:-.02em;color:var(--ink);cursor:pointer;background:0 0;border:0;outline:none;padding:6px 18px 4px 0;font-family:Geist Mono,monospace;font-size:28px;font-weight:500;line-height:1}.tempo-field .display-select:after{content:"";border-right:1px solid var(--sub);border-bottom:1px solid var(--sub);pointer-events:none;width:6px;height:6px;position:absolute;top:12px;right:0;transform:rotate(45deg)}.tempo-field .display-select select:hover,.tempo-field .display-select select:focus,.tempo-field .display-select .display-cycler:hover,.tempo-field .display-select .display-cycler:focus-visible{color:var(--accent)}.beat-leds{gap:7px;padding:8px 0 0;display:inline-flex}.beat-leds .led{background:#161614;border-radius:50%;width:12px;height:12px;transition:background 60ms linear,box-shadow 60ms linear;box-shadow:inset 0 1px 1px #0009}.beat-leds .led.is-on{background:var(--accent);box-shadow:0 0 0 1px #ff375f73, 0 0 8px var(--accent-glow), inset 0 0 2px #ffffff59}.beat-leds .led.is-downbeat{background:#1f1f1d}.beat-leds .led.is-downbeat.is-on{background:var(--accent)}.transport-btn{appearance:none;border:1px solid var(--rule);cursor:pointer;width:40px;height:40px;color:var(--ink);background:0 0;border-radius:2px;justify-content:center;align-items:center;padding:0;transition:border-color .15s,background .15s,color .15s,box-shadow .15s;display:inline-flex}.transport-btn:hover{border-color:var(--ink)}.transport-btn.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 1px #ff375f40, 0 0 12px var(--accent-glow)}.transport-btn svg{width:14px;height:14px}.transport-btn.is-tap{letter-spacing:.22em;text-transform:uppercase;width:auto;color:var(--sub);padding:0 12px;font-family:Geist Mono,monospace;font-size:10px}.transport-btn.is-tap:hover{color:var(--ink)}.transport-btn.is-tap.is-pressed{color:var(--accent);border-color:var(--accent)}.tempo-field.is-knob{justify-content:center;align-items:center;padding:8px 14px}.knob{-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:3px;display:flex}.knob .label{letter-spacing:.22em;text-transform:uppercase;color:var(--sub);font-size:9px}.knob-handle{cursor:ns-resize;touch-action:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:relative}.knob-handle:hover svg path:last-of-type,.knob-handle:focus svg path:last-of-type,.knob.is-dragging svg path:last-of-type{filter:drop-shadow(0 0 4px var(--accent-glow))}.knob-value{font-variant-numeric:tabular-nums;color:var(--sub);letter-spacing:.05em;min-height:12px;font-family:Geist Mono,monospace;font-size:9px}.knob.is-dragging .knob-value{color:var(--accent)}.notice{border:1px solid var(--accent);background:#ff375f0d;flex-direction:column;gap:6px;padding:12px 14px;display:flex}.notice-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.notice strong{letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-size:9px;font-weight:500}.notice p{color:var(--ink);font-size:12px}.notice .notice-hint{color:#f2f2f5a6;font-size:11px;line-height:1.5}.notice-close{color:var(--accent);cursor:pointer;background:0 0;border:1px solid #ff375f66;border-radius:2px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;padding:0 0 1px;font-family:Geist Mono,monospace;font-size:14px;line-height:1;transition:background .15s,color .15s;display:inline-flex}.notice-close:hover{background:var(--accent);color:var(--bg)}.grid-wrap{flex-direction:column;flex:1;gap:10px;width:100%;min-height:0;display:flex}.grid{flex:1;grid-auto-rows:1fr;gap:6px;width:100%;min-height:0;transition:grid-template-columns .22s;display:grid}.grid.cols-1{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}.tile{background:var(--tile-bg);border:1px solid var(--rule);cursor:pointer;justify-content:center;align-items:center;min-height:0;transition:border-color .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.tile:hover{border-color:var(--panel-edge)}.tile.is-armed{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent), 0 0 18px var(--accent-soft);animation:.55s ease-in-out infinite alternate armed-pulse}@keyframes armed-pulse{0%{box-shadow:inset 0 0 0 1px var(--accent), 0 0 8px var(--accent-soft)}to{box-shadow:inset 0 0 0 1px var(--accent), 0 0 22px var(--accent-glow)}}.tile.is-counting-in{border-color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent-2), 0 0 22px var(--accent-2-soft);animation:.4s ease-in-out infinite alternate count-in-pulse}@keyframes count-in-pulse{0%{box-shadow:inset 0 0 0 1px var(--accent-2), 0 0 10px var(--accent-2-soft)}to{box-shadow:inset 0 0 0 1px var(--accent-2), 0 0 26px var(--accent-2-glow)}}.tile.is-recording{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 18px var(--accent-glow)}.tile.is-loaded{border-color:#2a2a26}.tile.is-muted{border-color:var(--rule)}.tile.is-resyncing{border-color:var(--warn)}.tile.is-resyncing .tile-video{opacity:.35;filter:grayscale(.4)}.tile.is-muted .tile-video,.tile.is-muted .tile-preview{opacity:.18;filter:grayscale(.6)}.tile-video,.tile-preview{object-fit:cover;background:var(--tile-bg);width:100%;height:100%;transition:opacity .2s,filter .2s;display:block}.tile-preview{transform:scaleX(-1)}.tile-video{pointer-events:none}.stream-level-meter{pointer-events:none;--level:0;background:#ffffff0f;height:3px;position:absolute;bottom:10px;left:10px;right:10px;overflow:hidden}.stream-level-meter:after{content:"";height:100%;width:calc(var(--level,0) * 100%);background:var(--accent);transition:width 60ms linear;display:block}.tile-progress{pointer-events:none;--progress:0;background:#ff375f1f;height:2px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.tile-progress:after{content:"";height:100%;width:calc(var(--progress,0) * 100%);background:var(--accent);box-shadow:0 0 8px var(--accent-glow);display:block}.tile-remove{color:#f2f2f5eb;cursor:pointer;opacity:0;z-index:3;background:#0009;border:1px solid #f2f2f54d;border-radius:2px;justify-content:center;align-items:center;width:22px;height:22px;padding:0 0 1px;font-family:Geist Mono,monospace;font-size:16px;font-weight:400;line-height:1;transition:opacity .16s,background .15s,color .15s,border-color .15s;display:flex;position:absolute;top:6px;right:6px}.tile:hover .tile-remove,.tile:focus-within .tile-remove,.tile.is-actions-open .tile-remove{opacity:1}.tile-remove:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}.tile-remove:focus-visible{outline:1px solid var(--accent);outline-offset:2px;opacity:1}@media (hover:none){.tile-remove{opacity:1}}.tile-hud{pointer-events:none;color:#f2f2f5c7;letter-spacing:.14em;text-transform:uppercase;flex-direction:column;justify-content:space-between;padding:8px 10px;font-family:Geist Mono,monospace;font-size:9px;font-weight:400;display:flex;position:absolute;inset:0}.tile-hud .row{justify-content:space-between;align-items:center;gap:6px;display:flex}.tile-hud .status{align-items:center;gap:7px;display:inline-flex}.tile-hud .rec-dot{background:var(--accent);width:7px;height:7px;box-shadow:0 0 6px var(--accent-glow);border-radius:50%;animation:1s ease-in-out infinite rec-pulse}.tile-hud .count-dot{background:var(--accent-2);width:7px;height:7px;box-shadow:0 0 6px var(--accent-2-glow);border-radius:50%;animation:.4s ease-in-out infinite rec-pulse}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.4}}.tile-hud .bars-tag{color:#f2f2f58c}.tile-empty-label{color:#f2f2f56b;letter-spacing:.3em;text-transform:uppercase;pointer-events:none;justify-content:center;align-items:center;font-size:10px;display:flex;position:absolute;inset:0}.tile-actions{opacity:0;pointer-events:none;background:#000000a6;flex-direction:column;justify-content:flex-end;padding:8px 10px;transition:opacity 80ms linear;display:flex;position:absolute;inset:0}.tile:hover .tile-actions,.tile.is-actions-open .tile-actions{opacity:1;pointer-events:auto}.tile.is-actions-open .tile-actions{background:#000000d1}.tile.is-actions-open .stream-level-meter,.tile:hover .stream-level-meter{opacity:.35}.tile.is-actions-open .stream-level-meter{opacity:0}.tile-actions .actions-row{justify-content:space-between;align-items:flex-end;gap:8px;display:flex}.tile-actions .actions-row .right{gap:12px;display:inline-flex}.tile-actions button{letter-spacing:.18em;text-transform:uppercase;color:#f2f2f5d9;cursor:pointer;background:0 0;border:0;margin:0;padding:0;font-family:Geist Mono,monospace;font-size:9px;font-weight:400;transition:color .12s}.tile-actions button:hover{color:var(--accent)}.tile-bars{align-items:center;gap:6px;display:inline-flex}.tile-bars select{appearance:none;letter-spacing:.1em;color:#f2f2f5d9;cursor:pointer;background:0 0;border:0;padding:2px 14px 2px 0;font-family:Geist Mono,monospace;font-size:10px;font-weight:500;position:relative}.tile-bars:after{content:"";pointer-events:none;border-bottom:1px solid #f2f2f58c;border-right:1px solid #f2f2f58c;width:5px;height:5px;margin-left:-10px;display:inline-block;transform:rotate(45deg)}.tile-bars select option{background:var(--panel);color:var(--ink)}.tile-fader{pointer-events:none;opacity:0;z-index:2;justify-content:center;align-items:center;width:22px;height:60%;transition:opacity .18s;display:flex;position:absolute;top:8px;right:6px}.tile:hover .tile-fader,.tile.is-actions-open .tile-fader{opacity:1;pointer-events:auto}.tile-fader input[type=range]{appearance:none;background:#f2f2f559;outline:none;width:80px;height:1px;transform:rotate(-90deg)}.tile-fader input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;width:9px;height:9px;box-shadow:0 0 6px var(--accent-glow);border:0;border-radius:50%}.tile-fader input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:0;border-radius:50%;width:9px;height:9px}.tile.add-tile{border:1px solid var(--rule);cursor:pointer;color:var(--sub);background:0 0;justify-content:center;align-items:center;min-height:0;transition:border-color .18s,color .18s,background .18s;display:flex;position:relative}.tile.add-tile:hover{border-color:var(--accent);color:var(--accent);background:#ff375f0a}.tile.add-tile .plus{letter-spacing:0;font-size:28px;font-weight:500;line-height:1}.tile.add-tile .label{text-align:center;letter-spacing:.3em;text-transform:uppercase;font-size:9px;position:absolute;bottom:8px;left:0;right:0}.tile-device-popover{border:1px solid var(--rule);background:#000000d9;flex-direction:column;margin-bottom:8px;padding:8px 10px;display:flex}.device-menu{flex-direction:column;gap:6px;display:flex}.device-menu.is-disabled select{opacity:.5;cursor:not-allowed}.tile-actions .actions-row button.is-active{color:var(--accent)}.device-menu label{letter-spacing:.24em;text-transform:uppercase;color:#f2f2f5b3;align-items:center;gap:6px;font-size:8px;display:flex}.device-menu label .key{flex-shrink:0;width:20px}.device-menu select{appearance:none;letter-spacing:.04em;color:#f2f2f5d9;cursor:pointer;background:#00000080;border:1px solid #f2f2f533;outline:none;flex:1;min-width:0;padding:3px 16px 3px 5px;font-family:Geist Mono,monospace;font-size:10px;font-weight:400}.device-menu select option{background:var(--panel);color:var(--ink)}.footer{letter-spacing:.24em;text-transform:uppercase;color:var(--sub);flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:6px;font-size:9px;display:flex}.tile-shift{letter-spacing:.18em;text-transform:uppercase;color:#f2f2f5c7;background:#00000059;border:1px solid #f2f2f52e;border-radius:2px;align-self:flex-start;align-items:center;gap:6px;margin-top:6px;padding:3px 6px;font-family:Geist Mono,monospace;font-size:9px;font-weight:400;display:inline-flex}.tile-shift .key{letter-spacing:.2em}.tile-shift-value{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#f2f2f5f2;text-align:center;min-width:28px;font-size:11px}.tile-shift-step{color:#f2f2f5eb;cursor:pointer;background:0 0;border:1px solid #f2f2f552;border-radius:2px;justify-content:center;align-items:center;width:18px;height:18px;padding:0 0 1px;font-family:Geist Mono,monospace;font-size:11px;font-weight:500;transition:border-color .15s,color .15s;display:inline-flex}.tile-shift-step:hover{border-color:var(--accent);color:var(--accent)}.footer-tip{flex:1;min-width:0}.tile-menu{color:#f2f2f5eb;cursor:pointer;opacity:0;z-index:3;background:#0009;border:1px solid #f2f2f54d;border-radius:2px;justify-content:center;align-items:center;width:22px;height:22px;padding:0 0 1px;font-family:Geist Mono,monospace;font-size:13px;line-height:1;transition:opacity .16s,background .15s,color .15s,border-color .15s;display:flex;position:absolute;top:6px;right:32px}.tile:hover .tile-menu,.tile.is-actions-open .tile-menu{opacity:1}.tile-menu:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}.tile-menu.is-open{background:var(--accent);color:var(--bg);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.tile-menu:focus-visible{outline:1px solid var(--accent);outline-offset:2px;opacity:1}@media (hover:none){.tile-menu{opacity:1}}.tile-waiting{text-align:center;pointer-events:none;z-index:2;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:16px;display:flex;position:absolute;inset:0}.tile-waiting-label{letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 14px var(--accent-glow);font-family:Geist Mono,monospace;font-size:clamp(16px,3.2vw,26px);font-weight:500;animation:1.1s ease-in-out infinite alternate waiting-pulse}.tile-waiting-sub{letter-spacing:.28em;text-transform:uppercase;color:#f2f2f5b8;font-size:10px}@keyframes waiting-pulse{0%{opacity:.7}to{opacity:1}}.tile-resync{z-index:2;pointer-events:none;background:#0000008c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tile-resync span{letter-spacing:.28em;text-transform:uppercase;color:var(--warn);border:1px solid #ffcb3b80;border-radius:2px;padding:6px 12px;font-family:Geist Mono,monospace;font-size:11px}.footer kbd{letter-spacing:.1em;color:var(--ink);background:var(--panel);border:1px solid var(--panel-edge);margin:0 2px;padding:1px 5px;font-family:Geist Mono,monospace;font-size:9px}.undo-toast{background:var(--panel);border:1px solid var(--accent);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);z-index:10;align-items:center;gap:14px;padding:8px 14px;font-family:Geist Mono,monospace;font-size:10px;display:inline-flex;position:fixed;bottom:48px;left:50%;transform:translate(-50%)}.undo-toast button{color:var(--accent);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;padding:0;font-family:Geist Mono,monospace;font-size:10px}.undo-toast button:hover{color:var(--ink)}::selection{background:var(--accent);color:var(--bg)}@media (width<=720px){.tempo-panel{grid-template-columns:1fr 1fr;gap:1px}.tempo-field.is-bpm{grid-column:1/-1}.tempo-field.is-actions{grid-column:1/-1;justify-content:space-between}.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}.footer{flex-direction:column;align-items:flex-start;gap:8px}.undo-toast{justify-content:space-between;bottom:24px;left:12px;right:12px;transform:none}}