@import"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap";:root{--led-red: #ff3333;--led-green: #33ff33;--led-yellow: #ffff33;--text-screen: #aaffaa;--bg-screen: #000;--elektron-amber: #ff9f00;--elektron-red: #ff3e00;--obsidian-milled: #1c1c1f}body{background-color:#1a1a1a;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:Courier New,Courier,monospace;overflow-y:auto}@keyframes text-flicker{0%{opacity:1}3%{opacity:.4}6%{opacity:1}7%{opacity:.4}8%{opacity:1}9%{opacity:1}10%{opacity:.1}11%{opacity:1}to{opacity:1}}@keyframes glitch-skew{0%{transform:translate(0)}2%{transform:translate(-2px,1px)}4%{transform:translate(0)}to{transform:translate(0)}}.anim-flicker{animation:text-flicker 4s infinite linear}.anim-glitch{display:inline-block;animation:glitch-skew 3s infinite linear alternate-reverse}.flash-modal{position:fixed;top:0;left:50%;transform:translate(-50%) translateY(-100%);width:1000px;max-width:95vw;background:#121214;border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);border-radius:0 0 12px 12px;z-index:1000;transition:transform .6s cubic-bezier(.16,1,.3,1);box-shadow:0 30px 60px -12px #0000004d,0 18px 36px -18px #0000004d;padding:40px;display:flex;flex-direction:column;gap:20px;max-height:85vh;box-sizing:border-box}.flash-modal.is-open{transform:translate(-50%) translateY(0)}.flash-trigger{position:absolute;bottom:-44px;left:50%;height:44px;padding:0 24px;background:#121214;border:1px solid rgba(255,255,255,.08);border-top:none;border-radius:0 0 8px 8px;color:#66666e;font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.2em;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .3s ease;box-shadow:0 10px 20px #0006;white-space:nowrap;transform:translate(-50%)}.flash-trigger:hover{color:#ff9f00;background:#1c1c1f}.flash-trigger .status-led{width:6px;height:6px;background:#ff3e00;border-radius:50%;box-shadow:0 0 8px #ff3e00;animation:pad-breath 2s infinite}@keyframes pad-breath{0%{opacity:.6}50%{opacity:1;box-shadow:0 0 8px #ff3e00}to{opacity:.6}}.oled-display{background:#050505;border:2px solid #1a1a1c;width:180px;height:60px;border-radius:4px;padding:8px;font-family:JetBrains Mono,monospace;font-size:11px;color:var(--elektron-amber);display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 2px 10px #00000080}.flash-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:20px}.piano-roll-container{display:grid;grid-template-columns:80px 1fr;gap:15px;overflow-x:auto;flex:1;min-height:0}.track-labels{display:grid;grid-template-rows:repeat(12,1fr);gap:4px;height:100%}.track-label{font-family:JetBrains Mono,monospace;font-size:12px;font-weight:700;color:#66666e;display:flex;align-items:center;text-transform:uppercase;padding-right:10px;justify-content:flex-end;border-right:2px solid transparent}.track-label.active{color:#fff;border-right:2px solid var(--elektron-red)}.steps-grid{display:grid;grid-template-rows:repeat(12,1fr);gap:4px;height:100%}.step-row{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}.step{background:#0a0a0b;border:1px solid rgba(255,255,255,.03);border-radius:3px;cursor:pointer;transition:all .1s ease;position:relative}.step:nth-child(4n+1){background:#161618}.step:hover{background:#1c1c1f;border-color:#ffffff1a}.step.active{background:var(--elektron-red);box-shadow:0 0 15px #ffffffa3;border-color:#ff6a3d}.step.active:after{content:"";position:absolute;inset:20%;background:#fff3;filter:blur(4px);border-radius:2px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0a0a0b;border-radius:3px}::-webkit-scrollbar-thumb{background:#333;border-radius:3px;border:1px solid #0a0a0b}::-webkit-scrollbar-thumb:hover{background:#555;border-color:#555}::-webkit-scrollbar-corner{background:#0a0a0b}.pad-zone.mode-mute-active{background-color:#f003;box-shadow:inset 0 0 15px red;border:1px solid #ff0000;opacity:1}.pad-zone.mode-mute-hint{box-shadow:inset 0 0 5px #ff000080;cursor:pointer}.pad-zone.is-muted-dim{opacity:.3}.pad-zone.mode-chro{background-color:var(--chro-bg);box-shadow:0 0 15px var(--chro-glow);opacity:.6}.pad-zone.mode-chro.active-chro{opacity:.4}.rytm-container{position:relative;width:95vw;max-width:1200px;border-radius:8px;overflow:hidden;margin:0 auto}.rytm-bg{width:100%;height:auto;display:block;pointer-events:none}.interactive-zone{position:absolute;cursor:pointer;border-radius:8px;transition:all .1s ease}.interactive-zone:hover{box-shadow:0 0 10px #fff6}.interactive-zone.active{background-color:#fd7f019f;box-shadow:0 0 15px #fd7f019f}.interactive-zone.btn-held{background-color:#ffc80080!important;box-shadow:0 0 15px #ffc80080;border:1px solid rgba(255,200,0,.8)}.pad-zone.active{background-color:#32ff6480;box-shadow:0 0 20px #32ff6480}.screen-overlay{position:absolute;top:16.2%;left:47.5%;width:18.6%;height:22.2%;display:flex;color:#5ec4ff;font-size:.8vw;text-shadow:0 0 5px #5ec4ff;pointer-events:none;background:radial-gradient(circle,#0e1c28cc,#000000e6);opacity:.9;padding:10px;box-sizing:border-box;flex-direction:column;justify-content:space-between;font-family:Share Tech Mono,monospace;overflow:hidden;border-radius:6px}.btn-fnk{width:2.4%;height:4.1%;top:25.2%}.btn-fnk-save{top:25.2%;left:8.8%}.btn-fnk-function{top:38.4%;left:7.9%;width:4%;height:6.7%}.btn-fnk-track{top:54.7%;left:7.9%;width:4%}.btn-fnk-rtrg{top:68.4%;left:7.9%;width:4%}.btn-fnk-yes{top:41.9%;left:49.9%}.btn-fnk-no{top:49%;left:49.9%}.btn-fnk-up{top:42%;left:57.5%}.btn-fnk-down{top:49%;left:57.5%}.btn-fnk-left{top:49%;left:53.7%}.btn-fnk-right{top:49%;left:61.4%}.btn-fnk-direct{top:16.4%;left:15.6%}.btn-fnk-qper{top:16.4%;left:23.5%;width:3.9%}.btn-fnk-play{left:15.6%}.btn-fnk-mute{left:19.9%}.btn-fnk-chro{left:24.2%}.btn-fnk-scn{left:28.5%}.btn-fnk-perf{left:32.7%}.btn-fnk-fix{left:37%}.btn-fnk-metronome{left:41.3%}.btn-fnk-trig{top:41.9%;left:68.5%}.btn-fnk-src{top:41.9%;left:72.4%}.btn-fnk-smpl{top:41.9%;left:76.2%}.btn-fnk-fltr{top:41.9%;left:80.1%}.btn-fnk-amp{top:41.9%;left:83.8%}.btn-fnk-lfo{top:41.9%;left:87.7%}.btn-fnk-fx{top:51.5%;left:87.7%}.btn-fnk-chain{top:56.4%;left:72.9%}.btn-fnk-edit{top:56.4%;left:77.9%}.btn-fnk-cuefill{top:68.4%;left:87.7%}.btn-fnk-page{top:81.4%;left:87%;width:4%}.led-light{width:.8%;height:1.4%;border-radius:50%;pointer-events:none}.led-light.on{background-color:#ffffffa3;box-shadow:0 0 5px #ffffffa3}.led-bank-a{top:57.7%;left:49.1%}.led-bank-b{top:57.7%;left:54%}.led-bank-c{top:57.7%;left:58.9%}.led-bank-d{top:57.7%;left:63.8%}.led-page-a{top:78.7%;left:86.7%}.led-page-b{top:78.7%;left:87.9%}.led-page-c{top:78.7%;left:89.1%}.led-page-d{top:78.7%;left:90.2%}.pad-zone{width:6.1%;height:10.2%}.pad-1{top:62.4%;left:15.6%}.pad-2{top:62.4%;left:22.96%}.pad-3{top:62.4%;left:30.35%}.pad-4{top:62.4%;left:37.7%}.pad-5{top:48.8%;left:15.6%}.pad-6{top:48.8%;left:22.9%}.pad-7{top:48.8%;left:30.35%}.pad-8{top:48.8%;left:37.65%}.pad-9{top:35.15%;left:15.6%}.pad-10{top:35.15%;left:22.85%}.pad-11{top:35.15%;left:30.3%}.pad-12{top:35.15%;left:37.7%}.step-common{top:79%;width:3.9%;height:6.6%}.step-1{left:7.9%}.step-2{left:12.9%}.step-3{left:17.9%}.step-4{left:22.9%}.step-5{left:27.7%}.step-6{left:32.7%}.step-7{left:37.7%}.step-8{left:42.6%}.step-9{left:47.5%}.step-10{left:52.5%}.step-11{left:57.4%}.step-12{left:62.3%}.step-13{left:67.2%}.step-14{left:72.1%}.step-15{left:77.1%}.step-16{left:81.9%}.knob-common{width:2.7%;height:4.6%;border-radius:50%}.knob-A{top:18%;left:68.7%}.knob-B{top:18%;left:75.2%}.knob-C{top:18%;left:81.6%}.knob-D{top:18%;left:88.1%}.knob-E{top:29.5%;left:68.7%}.knob-F{top:29.5%;left:75.2%}.knob-G{top:29.5%;left:81.65%}.knob-H{top:29.5%;left:88.1%}.knob-vol{top:15.7%;left:8.1%;width:2.7%;height:4.6%;border-radius:50%}.knob-quick{top:15.7%;left:30.2%;width:2.7%;height:4.6%;border-radius:50%}.knob-track{top:15.7%;left:41.1%;width:2.7%;height:4.6%;border-radius:50%}.btn-play{top:65.8%;left:74.6%;width:3.9%;height:6.8%}.btn-stop{top:65.8%;left:79.6%;width:3.9%;height:6.8%}.btn-rec{top:65.8%;left:69.7%;width:3.9%;height:6.8%;border-radius:4px}.btn-bank{width:3.9%;height:4%;border-radius:4px}.bank-A{top:62%;left:47.5%}.bank-B{top:62%;left:52.4%}.bank-C{top:62%;left:57.3%}.bank-D{top:62%;left:62.2%}.bank-E{top:68.4%;left:47.5%}.bank-F{top:68.4%;left:52.4%}.bank-G{top:68.4%;left:57.3%}.bank-H{top:68.4%;left:62.2%}.hidden{display:none}.active-step{background-color:#ffffffa3;box-shadow:0 0 10px #ffffffa3}.current-step{box-shadow:0 0 10px #0f06}.selected-step-edit{border:1px solid #ffffffa3}.mode-chro{background-color:var(--chro-bg)!important;box-shadow:0 0 15px var(--chro-bg)}.mode-chro.active-chro{background-color:var(--chro-glow)!important;box-shadow:0 0 25px var(--chro-glow);border:1px solid rgba(255,255,255,.8)}.active-track-selected{background-color:#f33!important;box-shadow:0 0 15px #f33!important;border:1px solid #ffffff}.track-selector-dim{background-color:#ff32321a;border:1px dashed rgba(255,50,50,.3)}.disabled-step{opacity:.1;pointer-events:none}.lcd-ctrls{display:flex;gap:4px}.lcd-ctrls span{cursor:pointer;border:1px solid #444;padding:0 4px;background:#00000080;color:#5ec4ff;border-radius:2px;-webkit-user-select:none;user-select:none}.lcd-ctrls span:hover{background:#5ec4ff;color:#000}