@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Orbitron:wght@700;900&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg: #090909;--bg2: #0d0d0d;--surface: #111;--surface2: #161616;--panel: #1a1a1a;--border: #1e1e1e;--border2: #2a2a2a;--border3: #333;--text-primary: #d8d8d8;--text-secondary: #777;--text-dim: #383838;--text-accent: #00d4ff;--accent: #00d4ff;--accent-dim: rgba(0,212,255,.08);--accent-glow: rgba(0,212,255,.2);--led: #00e57a;--led-red: #ff4040;--led-orange: #ff7b00;--led-amber: #ffb300;--danger: #ff4040;--step-bg: #141414;--step-hover: #222;--step-active: #00d4ff;--step-vel-ff: #ffffff;--step-vel-med: #5ba8e0;--step-vel-lo: #2e5870;--step-current: rgba(255,255,255,.06);--step-beat: rgba(255,255,255,.04);--header-h: 48px;--ctrl-h: 38px;--seq-h: auto;--font-brand: "Orbitron", monospace;--font-ui: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Share Tech Mono", monospace;--carbon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%230a0a0a'/%3E%3Crect width='4' height='4' fill='%230d0d0d'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%230d0d0d'/%3E%3Cpath d='M0 0L4 4M4 0L0 4M4 4L8 8M8 4L4 8' stroke='%23111' stroke-width='.5'/%3E%3C/svg%3E")}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{background:var(--bg);color:var(--text-primary);font-family:var(--font-ui);font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}.app{display:flex;flex-direction:column;width:100%;height:100vh;overflow:hidden}.body-row{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.center-col{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}main{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}.kit-scroll-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}#kit{width:100%;height:100%;display:block;max-height:100%}.header{width:100%;height:var(--header-h);flex-shrink:0;display:flex;align-items:center;gap:0;padding:0;background:var(--surface);border-bottom:1px solid var(--border);position:relative;z-index:30;overflow:hidden}.header-section{display:flex;align-items:center;height:100%;padding:0 14px;gap:10px}.header-section+.header-section{border-left:1px solid var(--border)}.header-section.grow{flex:1;min-width:0;overflow:hidden}.header-section.right{margin-left:auto}.brand-name{font-family:var(--font-brand);font-size:15px;font-weight:900;letter-spacing:5px;color:var(--text-primary)}.brand-sep{color:var(--text-dim);font-size:10px}.kit-name-btn{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--accent);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:2px;transition:background .15s}.kit-name-btn:hover{background:var(--accent-dim)}.led-row{display:flex;align-items:center;gap:5px}.led-dot{width:5px;height:5px;border-radius:50%;background:var(--led);box-shadow:0 0 6px var(--led);animation:ledPulse 2.4s ease-in-out infinite}@keyframes ledPulse{0%,to{opacity:.25}50%{opacity:1}}.led-dot.recording{background:var(--led-red);box-shadow:0 0 6px var(--led-red);animation:ledPulse .8s ease-in-out infinite}.status-text{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--text-dim);white-space:nowrap;transition:color .15s,text-shadow .15s}.status-text.active{color:var(--accent);text-shadow:0 0 12px var(--accent-glow)}.hit-count{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:1px}.hit-count.pulse{animation:countPulse .35s ease-out}@keyframes countPulse{0%{color:var(--text-primary)}to{color:var(--text-dim)}}.h-btn{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;font-weight:500;height:28px;padding:0 10px;background:none;border:1px solid var(--border2);border-radius:3px;color:var(--text-secondary);cursor:pointer;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}.h-btn:hover{border-color:var(--border3);color:var(--text-primary)}.h-btn:active{background:var(--surface2)}.h-btn.primary{border-color:#00d4ff4d;color:var(--accent)}.h-btn.primary:hover{border-color:var(--accent);background:var(--accent-dim)}.h-btn.danger-btn{border-color:#ff404040;color:var(--danger)}.h-btn.danger-btn:hover{border-color:var(--danger);background:#ff40400f}.h-btn.rec{border-color:#ff7b004d;color:var(--led-orange)}.h-btn.rec:hover{border-color:var(--led-orange);background:#ff7b000f}.h-btn.rec.recording{animation:recBlink 1s ease-in-out infinite}@keyframes recBlink{0%,to{opacity:1}50%{opacity:.4}}.h-btn.spd{border-color:#aa64ff40;color:#a6f}.h-btn.spd:hover{border-color:#a6f;background:#aa64ff0f}.mobile-menu-wrap{position:relative}.mobile-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface2);border:1px solid var(--border2);border-radius:4px;padding:6px;display:flex;flex-direction:column;gap:4px;z-index:50;min-width:180px;box-shadow:0 8px 32px #0009;animation:dropIn .15s ease-out}@keyframes dropIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.mobile-menu .h-btn{justify-content:flex-start;width:100%;height:36px;font-size:10px}.desktop-only{display:flex}.mobile-only{display:none}canvas.vu{border-radius:2px;background:var(--surface2);border:1px solid var(--border)}.ctrl-bar{flex-shrink:0;height:var(--ctrl-h);display:flex;align-items:center;gap:0;background:var(--surface);border-top:1px solid var(--border)}.ctrl-section{display:flex;align-items:center;gap:10px;padding:0 14px;height:100%}.ctrl-section+.ctrl-section{border-left:1px solid var(--border)}.ctrl-section.grow{flex:1}.ctrl-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--text-dim);min-width:28px}.ctrl-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:72px;height:2px;background:var(--border2);border-radius:1px;cursor:pointer;outline:none}.ctrl-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text-secondary);cursor:pointer;transition:background .15s}.ctrl-slider:hover::-webkit-slider-thumb{background:var(--text-primary)}.ctrl-value{font-family:var(--font-mono);font-size:9px;color:var(--accent);min-width:22px}.ctrl-value.bpm{font-family:var(--font-brand);font-size:12px;letter-spacing:1px;color:var(--text-primary);min-width:30px}.ctrl-toggle{display:flex;align-items:center;gap:7px;cursor:pointer}.tog{width:28px;height:14px;background:var(--border2);border-radius:7px;position:relative;transition:background .2s;border:1px solid var(--border);cursor:pointer;flex-shrink:0}.tog.on{background:#00d4ff1f;border-color:#00d4ff4d}.tog-th{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#444;transition:all .2s}.tog.on .tog-th{left:16px;background:var(--accent);box-shadow:0 0 5px var(--accent)}.sequencer-panel{flex-shrink:0}.seq-transport{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:40px;border-bottom:1px solid var(--border);gap:12px}.seq-transport-left{display:flex;align-items:center;gap:12px;flex:1}.seq-transport-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.seq-play-btn{width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--border2);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .15s;flex-shrink:0}.seq-play-btn:hover{border-color:var(--accent);color:var(--accent)}.seq-play-btn.playing{background:#00d4ff1a;border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px #00d4ff26;animation:playPulse 2s ease-in-out infinite}.seq-rec-sync-btn{display:flex;align-items:center;justify-content:center;height:22px;padding:0 8px;background:#ff60200f;border:1px solid rgba(255,96,32,.3);border-radius:3px;color:var(--led-orange);font-family:var(--font-mono);font-size:8px;letter-spacing:1px;cursor:pointer;transition:all .15s;flex-shrink:0}.seq-rec-sync-btn:hover{border-color:var(--led-orange);background:#ff60201f}.seq-space-hint{font-family:var(--font-mono);font-size:7px;letter-spacing:2px;color:var(--text-dim)}@keyframes playPulse{0%,to{box-shadow:0 0 10px #00d4ff26}50%{box-shadow:0 0 20px #00d4ff40}}.seq-label{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;color:var(--text-dim);flex-shrink:0}.seq-bpm-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:70px;height:2px;background:var(--border2);border-radius:1px;cursor:pointer;outline:none}.seq-bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text-secondary);cursor:pointer}.seq-bpm-value{font-family:var(--font-brand);font-size:13px;letter-spacing:1px;color:var(--text-primary);min-width:32px}.seq-val{font-family:var(--font-mono);font-size:9px;color:var(--accent);min-width:24px}.seq-bpm-control,.seq-swing-control,.seq-steps-control{display:flex;align-items:center;gap:7px}.seq-steps-btns{display:flex;gap:3px}.seq-steps-btn{font-family:var(--font-mono);font-size:8px;padding:2px 7px;height:20px;background:var(--surface2);border:1px solid var(--border2);border-radius:2px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.seq-steps-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.seq-preset-btn{font-family:var(--font-mono);font-size:8px;letter-spacing:1px;padding:0 8px;height:22px;background:var(--surface2);border:1px solid var(--border2);border-radius:2px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.seq-preset-btn:hover{border-color:var(--border3);color:var(--text-primary)}.seq-preset-btn.danger{border-color:#ff404033;color:#ff505099}.seq-preset-btn.danger:hover{border-color:var(--danger);color:var(--danger)}.seq-collapse-btn{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;padding:0 8px;height:22px;background:none;border:1px solid var(--border);border-radius:2px;color:var(--text-dim);cursor:pointer;transition:all .15s;margin-left:4px}.seq-collapse-btn:hover{color:var(--text-secondary);border-color:var(--border2)}.seq-grid{padding:4px 0}.seq-row{display:flex;align-items:center;height:26px;padding:0}.seq-row:hover{background:#ffffff03}.seq-header-row{height:20px}.seq-header-row:hover{background:none}.seq-row-label{width:54px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px}.seq-row-name{font-family:var(--font-mono);font-size:8px;letter-spacing:1px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34px}.seq-row-clear{font-size:10px;width:12px;height:12px;background:none;border:none;color:var(--text-dim);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:color .1s;flex-shrink:0}.seq-row-clear:hover{color:var(--danger)}.seq-steps,.seq-steps-header{flex:1;display:flex;gap:2px;padding:0 8px 0 4px;align-items:center}.seq-step-num.beat{color:var(--text-secondary)}.seq-step-num.current{color:var(--accent)}.seq-step:hover:not(.active){background:var(--step-hover);border-color:var(--border2)}.seq-step.active{background:var(--step-color, var(--step-active));border-color:transparent;box-shadow:0 0 4px var(--step-color, var(--step-active))}.seq-step.current{background:var(--step-current)}.seq-step.active.current{opacity:.75}.seq-steps.steps-32 .seq-step{height:14px;border-radius:1px}@keyframes flashPad{0%{filter:brightness(1)}10%{filter:brightness(2.8) drop-shadow(0 0 8px rgba(0,212,255,.7))}to{filter:brightness(1)}}@keyframes flashCym{0%{filter:brightness(1)}10%{filter:brightness(3) drop-shadow(0 0 10px rgba(200,200,160,.7))}to{filter:brightness(1)}}@keyframes flashKick{0%{filter:brightness(1)}10%{filter:brightness(4) drop-shadow(0 0 14px rgba(255,120,0,.8))}to{filter:brightness(1)}}@keyframes flashBell{0%{filter:brightness(1)}10%{filter:brightness(3.5) drop-shadow(0 0 9px rgba(220,180,50,.8))}to{filter:brightness(1)}}@keyframes flashSpd{0%{filter:brightness(1)}10%{filter:brightness(3) drop-shadow(0 0 10px rgba(160,100,255,.8))}to{filter:brightness(1)}}.drum-group{cursor:pointer}.hit-pad{animation:flashPad .44s ease-out forwards}.hit-cymbal{animation:flashCym .52s ease-out forwards}.hit-kick{animation:flashKick .44s ease-out forwards}.hit-bell{animation:flashBell .4s ease-out forwards}.hit-sampling{animation:flashSpd .44s ease-out forwards}@keyframes rimPulse{0%,to{opacity:.22}50%{opacity:.55}}.rim-idle{animation:rimPulse 4s ease-in-out infinite}@keyframes strikL{0%{opacity:0;transform:rotate(-42deg) translateY(-22px)}10%{opacity:1}30%{transform:rotate(-10deg) translateY(6px);opacity:1}60%{transform:rotate(-28deg) translateY(-10px);opacity:.6}to{opacity:0;transform:rotate(-44deg) translateY(-26px)}}@keyframes strikR{0%{opacity:0;transform:rotate(42deg) translateY(-22px)}10%{opacity:1}30%{transform:rotate(10deg) translateY(6px);opacity:1}60%{transform:rotate(28deg) translateY(-10px);opacity:.6}to{opacity:0;transform:rotate(44deg) translateY(-26px)}}.stickL,.stickR{opacity:0}.stickL.play{animation:strikL .28s cubic-bezier(.22,1,.36,1) forwards}.stickR.play{animation:strikR .28s cubic-bezier(.22,1,.36,1) forwards}.flam-badge{position:fixed;top:58px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:9px;letter-spacing:4px;color:var(--accent);pointer-events:none;opacity:0;z-index:50;white-space:nowrap}@keyframes flamShow{0%{opacity:0;transform:translate(-50%) translateY(4px)}20%{opacity:1;transform:translate(-50%) translateY(0)}70%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-4px)}}.flam-badge.show{animation:flamShow .6s ease-out forwards}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#050508e0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:24px;width:620px;max-width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 24px 64px #000c;animation:slideUp .18s ease-out}@keyframes slideUp{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.modal h2{font-family:var(--font-brand);font-size:11px;letter-spacing:4px;color:var(--text-primary);margin-bottom:4px}.modal-sub{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;color:var(--text-dim);margin-bottom:18px}.modal-footer{margin-top:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.modal-hint{font-family:var(--font-mono);font-size:8px;letter-spacing:1px;color:var(--text-dim);flex:1;min-width:100px}.m-btn{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;padding:7px 14px;background:none;border:1px solid var(--border2);border-radius:3px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.m-btn:hover{border-color:var(--border3);color:var(--text-primary)}.m-btn.primary{border-color:#00d4ff4d;color:var(--accent)}.m-btn.primary:hover{border-color:var(--accent);background:var(--accent-dim)}.remap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}.remap-row{background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .15s}.remap-row:hover{border-color:var(--border2)}.remap-row.sel{border-color:var(--accent);background:var(--accent-dim)}.remap-icon{width:24px;height:24px;border-radius:50%;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--text-dim);flex-shrink:0}.remap-name{font-size:12px;font-weight:500;color:var(--text-primary)}.remap-keys{font-family:var(--font-mono);font-size:8px;color:var(--text-dim);margin-top:1px}.remap-keys span{color:var(--accent)}#remapStatus{font-family:var(--font-mono);font-size:8px;color:var(--accent);letter-spacing:1px;min-height:14px}.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}.kit-card{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:14px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden}.kit-card:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent);opacity:0;transition:opacity .18s}.kit-card:hover{border-color:var(--border2)}.kit-card:hover:after{opacity:.4}.kit-card.active{border-color:#00d4ff4d}.kit-card.active:after{opacity:1}.kit-name{font-family:var(--font-brand);font-size:9px;letter-spacing:3px;color:var(--text-primary);margin-bottom:6px}.kit-desc{font-size:11px;color:var(--text-secondary);line-height:1.4;margin-bottom:8px}.kit-tags{display:flex;flex-wrap:wrap;gap:3px}.kit-tag{font-family:var(--font-mono);font-size:7px;padding:2px 5px;border:1px solid var(--border2);border-radius:2px;color:var(--text-dim)}.kit-card.active .kit-tag{color:#00d4ff66;border-color:#00d4ff26}.addon-list{display:flex;flex-direction:column;gap:5px}.addon-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:3px;transition:border-color .15s}.addon-item.on{border-color:#00d4ff33}.addon-icon{font-size:16px;min-width:22px;text-align:center}.addon-name{font-size:12px;font-weight:500;color:var(--text-primary)}.addon-type{font-family:var(--font-mono);font-size:8px;letter-spacing:1px;color:var(--text-dim);margin-top:1px}.empty-msg{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);padding:18px 0;text-align:center}.spd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}.spd-card{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:14px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden}.spd-card:hover{border-color:var(--border2)}.spd-card.active{border-color:#85f6}.spd-card.active:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#63f,#a6f)}.spd-icon{font-size:22px;margin-bottom:8px}.spd-name{font-family:var(--font-brand);font-size:9px;letter-spacing:3px;color:var(--text-primary);margin-bottom:4px}.spd-desc{font-size:11px;color:var(--text-secondary);line-height:1.4;margin-bottom:10px}.spd-zones{display:flex;gap:4px;flex-wrap:wrap}.spd-zone-chip{font-family:var(--font-mono);font-size:7px;letter-spacing:1px;color:#ffffffb3;padding:3px 7px;border-radius:2px}.spd-active-badge{margin-top:8px;font-family:var(--font-mono);font-size:7px;letter-spacing:2px;color:#85f}::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}@media (max-width:1024px){.ctrl-slider{width:58px}.seq-swing-control{display:none}}@media (max-width: 1024px){.hit-count{display:none}}@media (max-width: 900px){.header-section.desktop-only:has(.hit-count){display:none}.status-text{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media (max-width:768px){.header{height:42px}.header-section{padding:0 10px;gap:7px}.brand-name{font-size:13px;letter-spacing:4px}.desktop-only{display:none}.mobile-only{display:flex;align-items:center;gap:6px}.status-text,.hit-count{display:none}.kit-scroll-wrapper{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;align-items:flex-start;justify-content:flex-start}#kit{min-width:640px;width:640px;height:auto;flex-shrink:0}.ctrl-bar{height:auto;flex-wrap:wrap;padding:4px 0}.ctrl-section{padding:3px 10px;height:34px}.seq-transport{padding:0 8px}.seq-swing-control,.seq-steps-control{display:none}.seq-grid{max-height:160px}.seq-row-name{max-width:28px;font-size:7px}.modal{padding:16px}.kit-grid{grid-template-columns:1fr 1fr;gap:6px}.remap-grid{grid-template-columns:1fr}}@media (max-width:480px){.brand-name{font-size:11px;letter-spacing:3px}.kit-name-btn{display:none}#kit{min-width:500px;width:500px}.seq-bpm-control{display:none}.modal-overlay{padding:8px}.modal{padding:14px;max-height:94vh}}@media (max-height:480px) and (orientation:landscape){.header{height:38px}.seq-grid{max-height:120px}}.donate-btn{border-color:#e650504d!important;color:#e05050!important;text-decoration:none;font-size:8px}.donate-btn:hover{border-color:#e05050!important;background:#e650500f!important;color:#ff7070!important}.save-pattern-input{width:100%;padding:9px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:3px;color:var(--text-primary);font-family:var(--font-mono);font-size:12px;letter-spacing:1px;outline:none;transition:border-color .15s;margin-bottom:4px}.save-pattern-input:focus{border-color:var(--accent)}.save-pattern-input::placeholder{color:var(--text-dim)}.seq-saved-wrap{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.seq-saved-item{display:flex;align-items:center;gap:1px}.seq-saved-del{width:16px;height:20px;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:color .1s}.seq-saved-del:hover{color:var(--danger)}.seq-preset-btn.active-groove{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.seq-scroll-wrapper{overflow-x:auto;overflow-y:auto;max-height:220px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}.seq-scroll-wrapper::-webkit-scrollbar{height:4px;width:4px}.seq-scroll-wrapper::-webkit-scrollbar-track{background:transparent}.seq-scroll-wrapper::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}.seq-step{flex:1 1 0;min-width:16px;max-width:none;height:18px;background:var(--step-bg);border:1px solid var(--border);border-radius:2px;cursor:pointer;transition:background .08s,border-color .08s;position:relative}.seq-step-num{flex:1 1 0;min-width:16px;font-family:var(--font-mono);font-size:7px;color:var(--text-dim);text-align:center}.seq-step:nth-child(4n+1){border-color:var(--border2)}.seq-desktop{flex-shrink:0;background:var(--surface);border-top:1px solid var(--border)}.seq-collapse-inline{font-family:var(--font-mono);font-size:8px;letter-spacing:1px;padding:0 8px;height:22px;background:var(--surface2);border:1px solid var(--border2);border-radius:2px;color:var(--text-dim);cursor:pointer;transition:all .15s;flex-shrink:0}.seq-collapse-inline:hover{border-color:var(--accent);color:var(--accent)}.seq-desktop.collapsed .seq-scroll-wrapper{display:none}.seq-mobile{display:none;flex-direction:column;flex-shrink:0}.seq-mobile-bar{height:46px;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--surface);border-top:1px solid var(--border)}.seq-mobile-info{flex:1;display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:0;text-align:left;min-width:0}.seq-mobile-beats{display:flex;gap:4px;align-items:center;margin-left:4px;flex-shrink:0}.seq-beat-dot{width:5px;height:5px;border-radius:50%;background:var(--border2);transition:background .08s;flex-shrink:0}.seq-beat-dot.active{background:var(--accent);box-shadow:0 0 5px var(--accent)}.seq-mobile-groove-name{font-family:var(--font-mono);font-size:8px;letter-spacing:1px;color:var(--accent);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}.seq-mobile-toggle-btn{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border2);border-radius:3px;color:var(--text-secondary);cursor:pointer;flex-shrink:0;transition:all .15s}.seq-mobile-toggle-btn:hover{border-color:var(--accent);color:var(--accent)}.seq-mobile-panel{background:var(--surface);border-top:1px solid var(--border);animation:seqExpand .2s ease-out}@keyframes seqExpand{0%{max-height:0;opacity:0}to{max-height:600px;opacity:1}}.seq-mobile-panel .seq-scroll-wrapper{max-height:220px}.seq-mobile-panel .seq-transport{flex-wrap:wrap;height:auto;min-height:44px;padding:8px 10px;gap:8px}.seq-mobile-panel .seq-transport-left,.seq-mobile-panel .seq-transport-right{flex-wrap:wrap;gap:6px}@media (min-width: 769px){.seq-desktop{display:block}.seq-mobile,.seq-mobile-overlay{display:none!important}}@media (max-width: 768px){.seq-desktop{display:none!important}.seq-mobile{display:flex}.seq-step{min-width:18px;height:20px}.seq-step-num{min-width:18px}}@media (max-width: 768px){.stickL,.stickR{display:none}.rim-idle{animation-duration:8s}}.seq-label-sm{display:inline}@media (max-width: 900px){.seq-label-sm{display:none}}.seq-mobile-open-btn{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;padding:0 14px;height:34px;background:var(--surface2);border:1px solid var(--border2);border-radius:3px;color:var(--text-primary);cursor:pointer;flex-shrink:0;transition:all .15s;white-space:nowrap}.seq-mobile-open-btn:hover,.seq-mobile-open-btn:active{border-color:var(--accent);color:var(--accent)}.seq-mobile-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:stretch}.seq-mobile-overlay-panel{width:100%;height:100vh;height:100dvh;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;animation:mobileSlideUp .25s cubic-bezier(.22,1,.36,1)}@keyframes mobileSlideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.seq-mobile-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.seq-mobile-overlay-title{font-family:var(--font-brand);font-size:11px;letter-spacing:4px;color:var(--text-primary)}.seq-mobile-close-btn{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;padding:8px 14px;height:36px;background:var(--surface2);border:1px solid var(--border2);border-radius:3px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.seq-mobile-close-btn:hover,.seq-mobile-close-btn:active{border-color:var(--danger);color:var(--danger)}.seq-mobile-overlay-content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.seq-mobile-overlay-content .seq-transport{flex-wrap:wrap;height:auto;min-height:44px;padding:10px 12px;gap:8px}.seq-mobile-overlay-content .seq-transport-left,.seq-mobile-overlay-content .seq-transport-right{flex-wrap:wrap;gap:6px}.seq-mobile-overlay-content .seq-scroll-wrapper{max-height:none}.seq-mobile-overlay-content .seq-step{height:24px}.feedback-btn{border-color:#50a0ff40!important;color:#64b4ffcc!important}.feedback-btn:hover{border-color:#64b4ffb3!important;color:#80c0ff!important}.feedback-form{display:flex;flex-direction:column;gap:16px;margin-top:4px}.fb-field{display:flex;flex-direction:column;gap:6px}.fb-label{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;color:var(--text-secondary)}.fb-categories{display:flex;flex-wrap:wrap;gap:6px}.fb-cat-option{display:flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12px;color:var(--text-secondary);cursor:pointer;padding:6px 10px;background:var(--surface);border:1px solid var(--border2);border-radius:3px;transition:all .15s}.fb-cat-option:has(input:checked){border-color:var(--accent);color:var(--text-primary);background:var(--accent-dim)}.fb-cat-option input{display:none}.fb-textarea,.fb-input{width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:3px;color:var(--text-primary);font-family:var(--font-ui);font-size:13px;outline:none;transition:border-color .15s;resize:vertical}.fb-textarea:focus,.fb-input:focus{border-color:var(--accent)}.fb-textarea::placeholder,.fb-input::placeholder{color:var(--text-dim)}.fb-input{resize:none}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999}.loading-inner{display:flex;flex-direction:column;align-items:center;gap:16px;width:280px}.loading-brand{font-family:var(--font-brand);font-size:20px;font-weight:900;letter-spacing:6px;color:var(--text-primary)}.loading-sub{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--text-dim)}.loading-bar-wrap{width:100%;height:3px;background:var(--border);border-radius:2px;overflow:hidden}.loading-bar{height:100%;background:var(--accent);border-radius:2px;transition:width .2s ease-out;box-shadow:0 0 8px var(--accent)}.loading-count{font-family:var(--font-mono);font-size:8px;letter-spacing:1px;color:var(--text-dim)}.ctrl-vel-section{gap:6px}.ctrl-vel-btns{display:flex;gap:2px}.ctrl-vel-btn{font-family:var(--font-mono);font-size:7px;letter-spacing:1px;padding:3px 7px;height:20px;background:var(--surface2);border:1px solid var(--border);border-radius:2px;color:var(--text-dim);cursor:pointer;transition:all .12s}.ctrl-vel-btn:hover{border-color:var(--border2);color:var(--text-secondary)}.ctrl-vel-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.ctrl-vel-btn{flex-direction:column;align-items:center;height:28px;padding:2px 8px;gap:1px}.vel-key-hint{font-size:5px;letter-spacing:.5px;color:var(--text-dim);line-height:1}.ctrl-vel-btn.active .vel-key-hint{color:var(--accent);opacity:.7}