.gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#050505eb;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none}.gate-inner{text-align:center;text-transform:uppercase}.gate-title{font-size:22px;letter-spacing:.3em;color:var(--fg);margin-bottom:10px}.gate-tags{font-size:9px;letter-spacing:.32em;color:var(--dim);margin-bottom:42px}.gate-cta{display:inline-block;font-size:9px;letter-spacing:.28em;color:var(--fg);border:1px solid var(--edge);border-radius:var(--r);background:var(--s1);padding:9px 22px}.gate-cta.booting{color:var(--dim);animation:gate-pulse 1.1s ease-in-out infinite}@keyframes gate-pulse{50%{opacity:.35}}.transport{position:fixed;top:16px;right:20px;display:flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--edge);border-radius:var(--r-panel);background:#0505058c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none}.tbtn{font-size:9px;letter-spacing:.18em;color:var(--dim);padding:4px 7px;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.tbtn{border-radius:var(--r-sm);transition:background .12s ease,color .12s ease,box-shadow .12s ease}.tbtn:hover{color:var(--fg);background:var(--s2)}.tbtn.active{color:var(--fg);background:var(--s3);box-shadow:inset 0 0 0 1px var(--edge-2)}.tbtn.active:hover{background:rgba(var(--ink-rgb),.18)}.tbtn.dim{color:var(--dim)}.tbtn.dim:hover{color:var(--fg)}.t-sep{color:var(--faint);padding:0 2px}.t-bpm{display:inline-flex;align-items:baseline;gap:5px;padding:4px 7px;cursor:ns-resize;touch-action:none}.t-bpm-val{font-size:10px;color:var(--fg);letter-spacing:.1em}.t-bpm-unit{font-size:8px;color:var(--dim);letter-spacing:.2em}.rec-dot{width:5px;height:5px;background:var(--fg);border-radius:50%;animation:rec-pulse .9s ease-in-out infinite}.tbtn.active .rec-dot{background:#000}@keyframes rec-pulse{50%{opacity:.15}}.dock{position:fixed;bottom:20px;left:20px;display:flex;align-items:flex-end;gap:10px;max-width:calc(100vw - 240px)}.seq{min-width:0;overflow-x:auto;padding:10px 12px;border:1px solid var(--edge);border-radius:var(--r-panel);background:#0505058c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none}.seq-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.seq-tag{font-size:8px;letter-spacing:.28em;color:var(--dim);text-transform:uppercase}.seq-modes{display:inline-flex;gap:2px;padding:2px;background:rgba(var(--ink-rgb),.05);border-radius:calc(var(--r-sm) + 2px)}.mode-btn{font-size:8px;letter-spacing:.18em;color:var(--dim);padding:2px 5px;border-radius:var(--r-sm);transition:background .12s ease,color .12s ease}.mode-btn:hover{color:var(--fg);background:rgba(var(--ink-rgb),.06)}.mode-btn.active{color:var(--fg);background:rgba(var(--ink-rgb),.115);box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.13)}.seq-row{display:flex;align-items:center;gap:10px;margin-top:4px}.seq-rowhead{display:flex;align-items:baseline;justify-content:space-between;width:92px;flex:none}.seq-name{font-size:9px;letter-spacing:.18em;color:var(--fg);text-transform:uppercase}.seq-name:hover .seq-len{color:var(--fg)}.seq-len{color:var(--dim);margin-left:3px}.seq-rnd{font-size:8px;letter-spacing:.16em;color:var(--dim)}.seq-rnd:hover{color:var(--fg)}.seq-cells{display:flex}.cell{position:relative;width:13px;height:16px;margin-right:2px;border:1px solid var(--faint);cursor:pointer;touch-action:pan-x;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.cell.beat{margin-left:6px}.cell:hover,.cell.on{border-color:var(--dim)}.cell-fill{background:var(--fg);min-height:2px}.cell.ph{border-color:var(--fg)}.cell.on.ph{background:var(--fg)}.cell.on.ph .cell-fill{background:#050505}.macros{display:flex;flex:none;gap:14px;padding:10px 12px 8px;border:1px solid var(--edge);border-radius:var(--r-panel);background:#0505058c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none}.knob{display:flex;flex-direction:column;align-items:center;cursor:ns-resize;touch-action:none}.knob svg{display:block}.knob-track{fill:none;stroke:var(--faint);stroke-width:1}.knob-value{fill:none;stroke:var(--fg);stroke-width:1.5}.knob-pointer{stroke:var(--fg);stroke-width:1}.knob-label{margin-top:4px;font-size:8px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}.knob-num{margin-top:2px;font-size:8px;letter-spacing:.1em;color:var(--fg)}.xy{position:fixed;bottom:20px;right:20px;width:180px;height:180px;border:1px solid var(--edge);border-radius:var(--r-panel);background:#05050559;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden}.xy-line-v{position:absolute;top:0;bottom:0;width:1px;background:var(--faint);pointer-events:none}.xy-line-h{position:absolute;left:0;right:0;height:1px;background:var(--faint);pointer-events:none}.xy-dot{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--fg);pointer-events:none}.xy-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.24em;color:var(--dim);pointer-events:none}.clip-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px;-webkit-user-select:none;user-select:none}.clip-chip{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.22em;color:var(--dim);border:1px solid var(--edge);border-radius:var(--r);background:#0505058c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:7px 12px;font-variant-numeric:tabular-nums}.clip-chip .clip-dot{width:5px;height:5px;border-radius:50%;background:var(--fg);animation:rec-pulse .9s ease-in-out infinite}.clip-chip .clip-hint{color:var(--faint)}.clip-overlay:hover .clip-hint{color:var(--dim)}button:focus-visible{outline:none;border-radius:var(--r-sm);box-shadow:0 0 0 3px var(--focus)}.tbtn.active:focus-visible{box-shadow:inset 0 0 0 1px var(--edge-2),0 0 0 3px var(--focus)}.dis{opacity:.28;pointer-events:none}.dis :disabled{opacity:1}button:disabled{cursor:default}@media(max-width:900px){.transport{top:auto;bottom:12px;right:12px;left:12px;flex-wrap:wrap;justify-content:flex-end}.xy{bottom:66px;right:12px;width:120px;height:120px}.dock{display:contents}.macros{position:fixed;bottom:66px;left:12px;gap:8px;padding:8px 8px 6px}.seq{position:fixed;bottom:196px;left:12px;right:12px}.seq-rowhead{width:74px}.cell{width:10px;height:14px}}:root{--bg: #050505;--fg: #e8e8e8;--dim: #6a6a6a;--faint: #2a2a2a;--line: #1c1c1c;--accent: #ffffff;--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;--ink-rgb: 232, 232, 232;--s1: rgba(var(--ink-rgb), .045);--s2: rgba(var(--ink-rgb), .075);--s3: rgba(var(--ink-rgb), .14);--edge: rgba(var(--ink-rgb), .13);--edge-2: rgba(var(--ink-rgb), .26);--focus: rgba(var(--ink-rgb), .3);--r: 6px;--r-sm: 4px;--r-panel: 10px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:11px;letter-spacing:.08em;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#root,.app{height:100%}.app{position:relative;overflow:hidden}.stage{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;display:block;z-index:0}.chrome{position:relative;z-index:1;height:100%;pointer-events:none;transition:opacity .35s ease}.chrome>*{pointer-events:auto}.app.exporting .chrome,.app.exporting .brandmark{opacity:0;pointer-events:none}.app .brandmark{transition:opacity .35s ease}.brandmark{position:fixed;top:16px;left:20px;z-index:40;color:var(--fg);opacity:.85;pointer-events:auto}.brandmark svg{height:15px;width:auto;display:block}.brandmark:hover{opacity:.5}.masthead{position:fixed;top:18px;left:88px;display:flex;gap:14px;align-items:baseline;text-transform:uppercase;pointer-events:none;-webkit-user-select:none;user-select:none}.masthead-title{margin:0;font-size:12px;color:var(--fg);letter-spacing:.18em}.masthead-tags{font-size:9px;color:var(--dim);letter-spacing:.22em}button{font-family:inherit;letter-spacing:inherit;background:none;border:none;color:inherit;cursor:pointer;padding:0}::selection{background:#fff;color:#000}