:root{--bg-void:#0a0a0b;--bg-chassis:#111113;--bg-panel:#16161a;--bg-panel-hi:#1c1c22;--bg-inset:#0d0d10;--bg-knob:#1e1e24;--accent-amber:#e8750a;--accent-glow:#ff9a30;--accent-led:#f60;--accent-green:#39ff6a;--accent-red:#ff3636;--accent-blue:#3a8eff;--accent-dim:#3a2a10;--text-primary:#d4c9a8;--text-muted:#5a5550;--text-label:#8a7a5a;--text-bright:#f0e8cc;--border-hard:#2a2a32;--border-glow:#e8750a66;--screw-color:#2a2a30;--font-mono:"Share Tech Mono", "Courier New", monospace;--font-display:"Orbitron", monospace;--font-vt:"VT323", monospace;--panel-radius:3px;--step-size:34px;--step-gap:3px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-void);width:100%;height:100%;color:var(--text-primary);font-family:var(--font-mono);font-size:12px;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:1000;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000014 2px 4px);position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(at 30% 20%,#e8750a0a 0%,#0000 60%),radial-gradient(at 70% 80%,#3a8eff08 0%,#0000 60%);position:fixed;inset:0}#app{z-index:1;flex-direction:column;gap:10px;min-height:100vh;padding:12px 16px 24px;display:flex;position:relative}header{background:var(--bg-chassis);border:1px solid var(--border-hard);border-bottom:2px solid var(--accent-amber);border-radius:var(--panel-radius);justify-content:space-between;align-items:center;padding:10px 18px;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 20px #e8750a1f,inset 0 1px #ffffff08}.brand{font-family:var(--font-display);letter-spacing:4px;color:var(--text-bright);text-shadow:0 0 20px #e8750a80;font-size:22px;font-weight:900}.brand-num{color:var(--accent-amber)}.brand-sub{font-family:var(--font-mono);letter-spacing:3px;color:var(--text-muted);margin-top:2px;font-size:9px}.header-center{font-family:var(--font-vt);color:var(--accent-glow);text-shadow:0 0 16px var(--accent-amber), 0 0 32px #e8750a66;letter-spacing:3px;font-size:36px}.header-right{align-items:center;gap:8px;display:flex}.status-dot{background:var(--text-muted);border:1px solid #333;border-radius:50%;width:10px;height:10px;transition:background .2s,box-shadow .2s}.status-dot.playing{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green), 0 0 16px #39ff6a66;animation:1s ease-in-out infinite alternate pulse-green}@keyframes pulse-green{0%{box-shadow:0 0 6px var(--accent-green)}to{box-shadow:0 0 14px var(--accent-green), 0 0 28px #39ff6a80}}.status-text{font-family:var(--font-display);letter-spacing:2px;color:var(--text-muted);min-width:70px;font-size:10px}.status-dot.playing+.status-text{color:var(--accent-green)}.main-layout{flex:1;grid-template-columns:280px 1fr;gap:10px;display:grid}.panel{background:var(--bg-panel);border:1px solid var(--border-hard);border-radius:var(--panel-radius);padding:12px 14px;box-shadow:inset 0 1px #ffffff08,inset 0 -1px #0000004d,0 4px 24px #0009}.panel-title{font-family:var(--font-mono);letter-spacing:2px;color:var(--accent-amber);border-bottom:1px solid var(--border-hard);margin-bottom:12px;padding-bottom:8px;font-size:10px}.global-panel{flex-direction:column;display:flex}.global-controls{flex-direction:column;gap:14px;display:flex}.transport-row{gap:8px;display:flex}.transport-btn{background:var(--bg-inset);border:1px solid var(--border-hard);color:var(--text-label);font-family:var(--font-display);letter-spacing:2px;cursor:pointer;border-bottom:2px solid #0a0a0a;border-radius:2px;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 6px;font-size:10px;transition:all .12s;display:flex}.transport-btn:hover{border-color:var(--accent-amber);color:var(--text-primary)}.transport-btn.active,.play-btn.active{border-color:var(--accent-amber);color:var(--accent-glow);background:#e8750a26;box-shadow:0 0 12px #e8750a33,inset 0 0 8px #e8750a14}.btn-icon{font-size:12px}.knob-row{justify-content:center;gap:16px;display:flex}.knob-wrap{cursor:ns-resize;flex-direction:column;align-items:center;gap:2px;display:flex}.knob-canvas{filter:drop-shadow(0 2px 4px #00000080);display:block}.knob-canvas:hover{filter:drop-shadow(0 0 6px #e8750a66)}.knob-val{font-family:var(--font-vt);color:var(--accent-glow);text-align:center;min-width:40px;font-size:14px;line-height:1}.knob-label{letter-spacing:1.5px;color:var(--text-muted);text-align:center;font-size:8px}.knob-mini-row{gap:8px;display:flex}.ctrl-label{letter-spacing:2px;color:var(--text-muted);margin-bottom:5px;font-size:9px;display:block}.slider-wrap,.scale-wrap,.presets-wrap,.density-bar{flex-direction:column;gap:5px;display:flex}.h-slider{-webkit-appearance:none;background:var(--bg-inset);cursor:pointer;border:1px solid var(--border-hard);border-radius:2px;outline:none;width:100%;height:4px}.h-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-amber);cursor:pointer;border:2px solid var(--bg-panel);border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #e8750a80}.h-slider::-moz-range-thumb{background:var(--accent-amber);cursor:pointer;border:2px solid var(--bg-panel);border-radius:50%;width:14px;height:14px}.h-slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent-dim), var(--bg-inset));border-radius:2px}.slider-val{font-family:var(--font-vt);color:var(--accent-glow);text-align:right;font-size:14px}.sel{background:var(--bg-inset);border:1px solid var(--border-hard);color:var(--text-primary);font-family:var(--font-mono);cursor:pointer;letter-spacing:1px;border-radius:2px;outline:none;padding:4px 8px;font-size:11px}.sel:focus{border-color:var(--accent-amber)}.scale-wrap{flex-direction:column;gap:5px}.scale-wrap .sel{width:100%}.preset-btn{background:var(--bg-inset);border:1px solid var(--border-hard);width:100%;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:1.5px;cursor:pointer;text-align:left;border-left:3px solid #0000;border-radius:2px;padding:7px 10px;font-size:10px;transition:all .12s;display:block}.preset-btn:hover{border-left-color:var(--accent-amber);color:var(--text-primary);background:var(--bg-panel-hi)}.preset-btn.active{border-left-color:var(--accent-amber);color:var(--accent-glow);background:#e8750a14}.grid-panel{flex-direction:column;display:flex}.step-header{align-items:center;gap:var(--step-gap);margin-bottom:4px;display:flex}.track-ctrl-spacer{flex-shrink:0;width:168px}.action-spacer{flex-shrink:0;width:200px}.step-num{width:var(--step-size);text-align:center;color:var(--text-muted);letter-spacing:0;flex-shrink:0;font-size:9px}.step-num.beat-num{color:var(--text-label)}.density-bar{border-bottom:1px solid var(--border-hard);flex-direction:row;align-items:center;gap:10px;margin-bottom:8px;padding:6px 0}.density-bar .ctrl-label{white-space:nowrap;margin:0}.density-bar .h-slider{flex:1}.grid-container{flex-direction:column;gap:5px;display:flex}.track-row{background:var(--bg-inset);border:1px solid var(--border-hard);border-radius:2px;align-items:center;gap:6px;padding:5px 6px;transition:border-color .2s;display:flex}.track-row:hover{border-color:#2a2a40}.track-ctrl{flex-shrink:0;align-items:center;gap:8px;width:168px;display:flex}.track-name{font-family:var(--font-display);letter-spacing:2px;color:var(--text-label);flex-shrink:0;width:44px;font-size:10px;font-weight:700}.mute-solo-row{gap:3px;display:flex}.mute-btn,.solo-btn{width:22px;height:22px;font-size:9px;font-family:var(--font-display);letter-spacing:0;cursor:pointer;border:1px solid var(--border-hard);border-radius:2px;font-weight:700;transition:all .1s}.mute-btn{background:var(--bg-panel);color:var(--text-muted)}.mute-btn.active{border-color:var(--accent-red);color:var(--accent-red);background:#ff363633;box-shadow:0 0 6px #ff36364d}.solo-btn{background:var(--bg-panel);color:var(--text-muted)}.solo-btn.active{border-color:var(--accent-green);color:var(--accent-green);background:#39ff6a26;box-shadow:0 0 6px #39ff6a4d}.steps-wrap{gap:var(--step-gap);flex-shrink:0;display:flex}.step-cell{width:var(--step-size);height:var(--step-size);background:var(--bg-panel);cursor:pointer;border:1px solid #222228;border-radius:2px;flex-shrink:0;transition:background 60ms,box-shadow 60ms,border-color 60ms;position:relative;overflow:hidden}.step-cell.beat-start{margin-left:4px}.step-cell:before{content:"";pointer-events:none;background:#ffffff05;border-radius:1px;position:absolute;inset:2px}.step-cell:hover{border-color:var(--accent-amber);background:#e8750a14}.step-cell.on{background:var(--accent-led);border-color:var(--accent-glow);box-shadow:0 0 6px var(--accent-amber), 0 0 14px #e8750a66, inset 0 1px 0 #ffffff26}.step-cell.on:before{background:#ffffff1f}.step-cell.probabilistic:after{content:"";background:repeating-linear-gradient(90deg, var(--accent-glow) 0, var(--accent-glow) 2px, transparent 2px, transparent 4px);opacity:.8;height:4px;position:absolute;top:0;left:0;right:0}.step-cell.playhead{border-color:#ffffff80!important;box-shadow:0 0 0 1px #fff3,0 0 12px #ffffff26!important}.step-cell.on.playhead{box-shadow:0 0 8px var(--accent-glow), 0 0 20px #ff963099, 0 0 0 1px #ffffff4d!important}@keyframes led-flash{0%{filter:brightness(2.5)}to{filter:brightness()}}.step-cell.on.playhead{animation:.1s ease-out forwards led-flash}.track-actions{flex:1;align-items:center;gap:4px;margin-left:4px;display:flex}.action-btn{background:var(--bg-panel);border:1px solid var(--border-hard);color:var(--text-muted);font-family:var(--font-mono);cursor:pointer;white-space:nowrap;border-radius:2px;align-items:center;height:26px;padding:4px 8px;font-size:11px;transition:all .1s;display:flex}.action-btn:hover{border-color:var(--accent-amber);color:var(--accent-glow)}.rand-btn{font-size:14px;font-weight:700}.euc-wrap{border:1px solid var(--border-hard);background:var(--bg-panel);border-radius:2px;align-items:center;gap:3px;padding:2px 5px;display:flex}.euc-label{letter-spacing:1px;color:var(--text-muted);margin-right:2px;font-size:8px}.euc-input{background:var(--bg-inset);border:1px solid var(--border-hard);width:30px;color:var(--text-primary);font-family:var(--font-mono);text-align:center;border-radius:1px;outline:none;padding:2px;font-size:11px}.euc-input:focus{border-color:var(--accent-amber)}.euc-btn{background:0 0;border:none;padding:2px 6px;font-size:14px}.step-menu{z-index:500;background:var(--bg-panel-hi);border:1px solid var(--accent-amber);border-radius:3px;min-width:220px;padding:10px 12px;position:absolute;box-shadow:0 8px 32px #000c,0 0 20px #e8750a26}.menu-row{flex-direction:column;gap:5px;margin-bottom:10px;display:flex}.menu-row:last-child{margin-bottom:0}.menu-label{font-family:var(--font-mono);letter-spacing:1.5px;color:var(--accent-glow);font-size:10px}.menu-slider{-webkit-appearance:none;background:var(--bg-inset);cursor:pointer;border-radius:2px;outline:none;width:100%;height:3px}.menu-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-amber);cursor:pointer;border-radius:50%;width:12px;height:12px;box-shadow:0 0 6px #e8750a80}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-void)}::-webkit-scrollbar-thumb{background:var(--border-hard);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (width<=1200px){.main-layout{grid-template-columns:1fr}.grid-panel{overflow-x:auto}.steps-wrap{min-width:max-content}}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}