:root{--bg-color:#050505;--panel-color:#111;--border-color:#333;--accent-color:#fff;--highlight-color:#0fc;--step-off:#2a2a2a;--step-on:#fff;--step-active:#0fc;--text-color:#ccc;--font-heading:"Orbitron",sans-serif;--font-body:"Rajdhani",sans-serif}*{box-sizing:border-box;user-select:none;-webkit-tap-highlight-color:transparent}body,html{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-body);margin:0;min-height:100vh;overflow-x:hidden;overflow-y:auto;padding:0;width:100%}#starfield{height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:0}#app-container{display:flex;flex-direction:column;gap:20px;margin:0 auto;max-width:1200px;min-height:100vh;padding:20px;position:relative;width:100%;z-index:10}header{flex-wrap:wrap;gap:20px;justify-content:space-between}.logo-container,header{align-items:center;display:flex}.logo-container{gap:15px}.logo{filter:drop-shadow(0 0 5px rgba(255,255,255,.5));height:40px;width:auto}h1{color:var(--accent-color);font-family:var(--font-heading);font-size:1.2rem;letter-spacing:2px;margin:0;white-space:nowrap}.accent{color:#888;font-weight:400}.top-controls{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.btn{background:rgba(0,0,0,.5);border:1px solid var(--border-color);color:var(--text-color);cursor:pointer;font-family:var(--font-body);font-size:.8rem;font-weight:600;padding:8px 12px;text-transform:uppercase;transition:all .2s;white-space:nowrap}.btn:hover{background:hsla(0,0%,100%,.05);border-color:var(--highlight-color);color:var(--highlight-color)}.machine-interface{backdrop-filter:blur(10px);background:hsla(0,0%,4%,.85);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 0 30px rgba(0,0,0,.5);display:flex;flex:1;flex-direction:column;gap:20px;padding:20px;width:100%}.transport-section{align-items:center;background:#0d0d0d;border:1px solid #222;border-radius:6px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;padding:15px}.display-lcd{background:#000;border:1px solid #333;border-radius:4px;flex-shrink:0;font-family:monospace;min-width:120px;padding:10px 15px}.lcd-row{color:#666;display:flex;font-size:.8rem;gap:10px;justify-content:space-between}.lcd-row span{color:var(--accent-color);font-weight:700}.transport-buttons{display:flex;flex-shrink:0;gap:15px}.transport-btn{align-items:center;background:#151515;border:1px solid #333;border-radius:50%;box-shadow:0 4px 6px rgba(0,0,0,.3);color:#fff;cursor:pointer;display:flex;height:50px;justify-content:center;touch-action:manipulation;transition:all .1s;width:50px}.transport-btn:active{box-shadow:0 1px 2px rgba(0,0,0,.3);transform:translateY(2px)}.transport-btn.active{background:#1a1a1a;border-color:var(--highlight-color);box-shadow:0 0 15px var(--highlight-color)}.transport-btn img{display:block!important;height:24px!important;margin:0 auto;pointer-events:none;width:24px!important}.global-params{align-items:center;display:flex;flex-wrap:wrap;gap:20px}.slider-group{display:flex;flex-direction:column;gap:5px;min-width:100px}.slider-group label{color:#666;font-size:.7rem;letter-spacing:1px;text-transform:uppercase}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:30px;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;box-shadow:0 0 5px hsla(0,0%,100%,.5);cursor:pointer;height:18px;margin-top:-8px;width:18px}input[type=range]::-webkit-slider-runnable-track{background:#333;cursor:pointer;height:2px;width:100%}.sequencer-grid-container{background:#0a0a0a;border-radius:6px;display:flex;flex-direction:column;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 10px 20px}.track-row{align-items:center;display:flex;gap:10px;height:45px;min-width:600px}.track-label{border-left:3px solid transparent;color:#888;cursor:pointer;flex-shrink:0;font-size:.8rem;font-weight:600;padding-left:10px;text-transform:uppercase;transition:all .2s;width:100px}.track-label.selected{border-left-color:var(--highlight-color);color:var(--highlight-color);text-shadow:0 0 10px rgba(0,255,204,.4)}.steps-container{display:grid;flex:1;gap:4px;grid-template-columns:repeat(16,1fr);height:100%}#app-container *{box-sizing:border-box}.step-btn{background:var(--step-off);border:none!important;border-radius:0;box-shadow:inset 0 0 0 1px transparent;cursor:pointer;margin:0;min-width:20px;padding:0;transition:background .05s,box-shadow .05s;z-index:1}.step-btn:nth-child(4n+1){background:#333}.step-btn:hover{background:#444}.step-btn.active{background:var(--step-on);box-shadow:inset 0 0 0 1px transparent,0 0 5px hsla(0,0%,100%,.4)}.step-btn.playing{box-shadow:inset 0 0 0 1px var(--highlight-color);z-index:10}.step-btn.active.playing{background:var(--highlight-color);box-shadow:inset 0 0 0 1px var(--highlight-color),0 0 10px var(--highlight-color)}.sound-design-panel{border-top:1px solid #222;padding-top:20px}.panel-header{color:#444;font-family:var(--font-heading);font-size:.9rem;letter-spacing:1px;margin-bottom:15px;text-transform:uppercase}.controls-row{align-items:center;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}.knob-group{align-items:flex-start;display:flex;flex:1;flex-direction:column;gap:8px;min-width:120px}.dropdown-lcd{background:#111;border:1px solid #333;border-radius:4px;color:#fff;cursor:pointer;font-family:var(--font-body);font-size:.9rem;outline:none;padding:8px 10px;width:100%}footer{color:#444;font-size:.7rem;padding:20px 0;text-align:center}@media (max-width:768px){#app-container{gap:10px;padding:5px}header{align-items:flex-start;flex-direction:column;gap:10px}.top-controls{justify-content:space-between;width:100%}.dropdown-lcd{flex:1}.machine-interface{gap:10px;padding:10px}.transport-section{align-items:stretch;flex-direction:column;gap:20px}.transport-buttons{justify-content:center;padding:10px 0}.global-params{justify-content:space-between;margin-left:0}.sequencer-grid-container{border-right:4px solid #1a1a1a;gap:3px}.track-row{height:35px;width:600px}.controls-row{gap:20px}input[type=range]{height:20px}input[type=range]::-webkit-slider-thumb{height:14px;margin-top:-6px;width:14px}.transport-btn{height:40px;width:40px}.knob-group{min-width:45%}}