*{box-sizing:border-box}body{font-family:SF Mono,Fira Code,Consolas,monospace;background:#0a0a0a;color:#e0e0e0;margin:0;padding:0;height:100vh;overflow:hidden;line-height:1.6}.site-nav{background:#151515;border-bottom:1px solid #333;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;height:60px}.logo{color:#0f8;font-size:1.5rem;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:10px}.logo-icon{width:32px;height:32px;flex-shrink:0}.nav-links{display:flex;gap:25px}.nav-links a{color:#888;text-decoration:none;font-size:.9rem;transition:color .2s}.nav-links a:hover,.nav-links a.active{color:#0f8}.studio-container{display:flex;flex-direction:column;height:calc(100vh - 60px)}.toolbar-zone{background:#151515;border-bottom:1px solid #333;height:auto;min-height:50px;flex-shrink:0;overflow:hidden}.toolbar-content{max-width:1400px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;gap:12px;flex-wrap:wrap}.toolbar-left,.toolbar-center,.toolbar-right{display:flex;align-items:center;gap:8px}.toolbar-center{flex:1;justify-content:center}.main-zone{flex:1;overflow:hidden;padding:12px 16px;display:flex;flex-direction:row;align-items:stretch;gap:16px}.main-content{display:flex;gap:16px;width:100%;flex:1;min-height:0;overflow-x:hidden}.modules-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:10px;width:40%;flex:0 0 40%;min-height:0}.modules-grid .engine-module{background:#1a1a1a;border:1px solid #333;border-radius:8px;min-width:0;min-height:0;display:flex;flex-direction:column}.sequencer-container{flex:1;min-width:0;display:flex;flex-direction:column;overflow-x:auto}.mixer-footer{background:#151515;border-top:1px solid #333;height:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.mixer-content{max-width:1400px;width:100%;display:flex;justify-content:center;padding:0 20px}.action-btn{background:#252525;color:#aaa;border:1px solid #333;padding:8px 14px;border-radius:4px;font-family:inherit;font-size:.85rem;cursor:pointer;transition:all .2s;white-space:nowrap}.action-btn:hover{background:#333;color:#fff;border-color:#444}.randomize-btn:hover{background:#3a2a00;border-color:#fa0;color:#fc4}.reset-btn:hover{background:#2a2a3a;border-color:#88f;color:#aaf}.save-btn{background:#0f8;color:#000;border:none;font-weight:700}.save-btn:hover{background:#00cc6a}.delete-btn{background:#422;color:#f66;border:1px solid #663333}.delete-btn:hover{background:#522;border-color:#844;color:#f88}.clear-btn{background:#2a1a1a;color:#f66;border:1px solid #442222}.clear-btn:hover{background:#3a2222;border-color:#633;color:#f88}.copy-btn{background:#0f8;color:#000;border:none;padding:8px 20px;border-radius:4px;font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s}.copy-btn:hover{background:#00cc6a;transform:translateY(-1px)}.mute-btn,.solo-btn{width:20px;height:20px;border:1px solid #333;border-radius:3px;background:#252525;color:#666;font-size:9px;font-weight:700;cursor:pointer;transition:all .15s}.mute-btn:hover,.solo-btn:hover{background:#333;color:#888}.mute-btn.active{background:#422;color:#f66;border-color:#633}.solo-btn.active{background:#2a3a2a;color:#0f8;border-color:#363}.sequencer-lane.muted{opacity:.5}.sequencer-lane.soloed{border-left:2px solid #00ff88}.preset-select{background:#252525;color:#aaa;border:1px solid #333;padding:8px 12px;border-radius:4px;font-family:inherit;font-size:.85rem;cursor:pointer;min-width:180px}.preset-select optgroup{background:#1a1a1a;color:#0f8;font-style:normal;font-weight:700;padding:8px 0}.preset-select option{background:#252525;color:#ccc;padding:6px 12px}.preset-select:hover{background:#333;color:#fff}.preset-select:focus{outline:none;border-color:#0f8}.preset-input{background:#252525;color:#e0e0e0;border:1px solid #333;padding:8px 12px;border-radius:4px;font-family:inherit;font-size:.85rem;width:140px}.preset-input:focus{outline:none;border-color:#0f8}.preset-input::placeholder{color:#555}.export-hint{color:#0f8;font-size:.8rem;opacity:0;transition:opacity .3s}.export-hint.show{opacity:1}.modules-grid.expanded{display:block}.modules-grid.expanded .engine-module{display:none!important}.modules-grid.expanded .expanded-module{display:flex}.expanded-params-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;padding:12px;align-content:start;min-height:0}.param-category-card{background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:12px 16px;border-left:2px solid var(--accent-color, #00ff88)}.param-category-header{font-size:10px;font-weight:600;text-transform:uppercase;color:#666;letter-spacing:.5px;margin-bottom:12px}.param-category-knobs{display:flex;flex-wrap:wrap;gap:10px}@media(max-width:900px){.expanded-params-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.param-category-card{padding:10px 12px}.param-category-knobs{gap:8px}}@media(max-width:600px){.expanded-params-grid{grid-template-columns:1fr 1fr;gap:10px}}@keyframes expandIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes expandOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.modal-overlay{position:fixed;inset:0;background:#000c;display:none;justify-content:center;align-items:center;z-index:1000}.modal-overlay.open{display:flex}.modal-content{background:#1e1e1e;border:1px solid #333;border-radius:12px;max-width:600px;max-height:80vh;overflow:auto;box-shadow:0 20px 60px #00000080}@media(max-width:1023px){.main-zone,.main-content{flex-direction:column}.modules-grid{width:100%;flex:0 0 auto;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}.sequencer-container{flex:1;min-height:300px}}@media(max-width:767px){.modules-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,1fr)}.toolbar-content{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}.toolbar-zone{height:auto}.toolbar-left{order:1}.toolbar-right{order:2}.toolbar-center{order:3;width:100%;justify-content:center;margin-top:4px}.main-zone{padding:10px 12px}.mixer-footer{height:80px}.preset-select{min-width:140px;font-size:.8rem}.action-btn{padding:6px 10px;font-size:.8rem}}@media(max-width:479px){.studio-container{height:auto;min-height:calc(100vh - 60px)}.main-zone{padding:8px;overflow-y:auto}.modules-grid{display:flex;flex-direction:column;gap:8px}.modules-grid .engine-module{min-height:auto;padding:12px}.modules-grid .engine-module .knob-grid{display:none!important}.modules-grid .engine-module.mobile-expanded .knob-grid{display:grid!important;animation:expandIn .15s ease-out}.modules-grid .engine-module .module-header{cursor:pointer;position:relative}.modules-grid .engine-module .module-header:after{content:"▼";position:absolute;right:40px;top:50%;transform:translateY(-50%);font-size:10px;color:#666;transition:transform .15s ease}.modules-grid .engine-module.mobile-expanded .module-header:after{transform:translateY(-50%) rotate(180deg);color:var(--accent-color, #00ff88)}.modules-grid .engine-module .expand-btn{display:none}.sequencer-container{min-height:250px}.mixer-footer{height:auto;padding:12px 8px}.toolbar-content{padding:8px 12px}.toolbar-left,.toolbar-right{gap:4px}.preset-select{min-width:120px}.toolbar-left .randomize-btn,.toolbar-left .reset-btn{display:none}.expanded-params-grid{grid-template-columns:1fr 1fr;gap:8px;padding:8px}.param-category-card{padding:10px}.param-category-header{font-size:9px;margin-bottom:8px}}@media(max-width:359px){.nav-links a{padding:8px;min-width:40px}.expanded-params-grid{grid-template-columns:1fr}}.step-sequencer{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.transport-bar{flex-wrap:wrap}.lanes-container{scrollbar-width:thin;scrollbar-color:#444 #1a1a1a;flex:1;overflow-y:auto;overflow-x:hidden}.lanes-container::-webkit-scrollbar{width:6px}.lanes-container::-webkit-scrollbar-track{background:#1a1a1a}.lanes-container::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.sequencer-lane{min-height:36px}.lane-label:hover{background:#252525;color:#e0e0e0}.step-btn:hover{transform:scale(1.05)}.step-btn:active{transform:scale(.95)}@media(max-width:767px){.transport-bar{flex-wrap:wrap;gap:8px;padding:8px 12px}.mode-toggle,.step-count-control{order:-1}.lanes-container{max-height:calc(100vh - 400px)}.lane-label{width:36px;font-size:8px}.step-btn{min-width:16px}.accent-btn{width:24px;height:24px;font-size:10px}}@media(max-width:479px){.transport-bar>div:not(.mode-toggle):not([class*=transport]){display:none}.step-btn{min-width:14px;max-width:24px}.lanes-container{max-height:calc(100vh - 450px)}}