*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;overflow-x:auto;min-width:1200px}.wooden-desk{background:radial-gradient(ellipse at top,#8b6f47e6,#6b5637e6),repeating-linear-gradient(90deg,rgba(0,0,0,.15) 0px,transparent 2px,transparent 4px,rgba(0,0,0,.15) 6px),linear-gradient(180deg,#8b6f47,#6b5637);min-height:100vh;padding:40px;position:relative;box-shadow:inset 0 0 200px #0006,inset 0 -40px 100px #0003}.baser30-container{display:flex;justify-content:center;align-items:center}.baser30-unit{background:#333;padding:8px;border-radius:18px;box-shadow:0 8px 16px #0003,0 2px 4px #0000001a;width:900px;position:relative;transition:transform .5s cubic-bezier(.4,0,.2,1)}.baser30-unit:after{content:"";position:absolute;inset:8px;background:repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,.02) 2px,rgba(255,255,255,.02) 4px),linear-gradient(145deg,#d0d0d0,#b0b0b0);border-radius:10px;border:.5px solid rgba(0,0,0,.1);box-shadow:inset 0 1px #ffffff80,inset 0 -1px #0003;z-index:-1}.logo-sticker{position:fixed;top:20px;right:30px;z-index:1000}.logo-sticker img{width:180px;height:180px;filter:drop-shadow(3px 4px 10px rgba(0,0,0,.6))}.panel-section{background:linear-gradient(145deg,silver,#a0a0a0);margin-bottom:10px;border-radius:6px;border:.5px solid rgba(0,0,0,.2);box-shadow:0 2px 4px #0000001a,inset 0 1px #fff6,inset 0 -1px #0000001a;overflow:hidden;position:relative;z-index:1}.panel-section:first-of-type{border-radius:8px}.panel-section:last-of-type{margin-bottom:20px}.panel-header{background:linear-gradient(145deg,#999,#777);padding:12px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;transition:background .3s}.panel-header:hover{background:linear-gradient(145deg,#aaa,#888)}.panel-header span:first-child{font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);letter-spacing:1px}.toggle-icon{font-size:14px;color:#fff;transition:transform .3s}.panel-header.collapsed .toggle-icon{transform:rotate(-90deg)}.panel-content{padding:20px;transition:max-height .3s ease-out,padding .3s ease-out;max-height:1000px;overflow:hidden}.panel-content.collapsed{max-height:0;padding:0 20px}.transport-section{display:flex;gap:10px;flex-wrap:wrap}.transport-btn,.control-btn{background:linear-gradient(180deg,#b0b0b0,#888);color:#222;border:.5px solid rgba(0,0,0,.2);padding:10px 20px;font-size:11px;cursor:pointer;border-radius:4px;box-shadow:0 1px 2px #0000001a,inset 0 1px #fff6,inset 0 -1px #0000001a;transition:all .1s;font-weight:700;letter-spacing:1px;text-shadow:0 1px 0 rgba(255,255,255,.5)}.transport-btn{background:linear-gradient(180deg,#a8b8a8,#7a8a7a)}.transport-btn:hover{background:linear-gradient(180deg,#b8c8b8,#8a9a8a)}#randomize-btn,#drum-randomize-btn{background:linear-gradient(180deg,#a8b0c0,#7a8a9a)}#randomize-btn:hover,#drum-randomize-btn:hover{background:linear-gradient(180deg,#b8c0d0,#8a9aaa)}#auto-btn,#auto-cutoff-btn{background:linear-gradient(180deg,#b8a8c0,#8a7a9a)}#auto-btn:hover,#auto-cutoff-btn:hover{background:linear-gradient(180deg,#c8b8d0,#9a8aaa)}#apply-euclidean{background:linear-gradient(180deg,#c0b0a0,#9a8a7a)}#apply-euclidean:hover{background:linear-gradient(180deg,#d0c0b0,#aa9a8a)}#save-btn{background:linear-gradient(180deg,#a8c0a8,#7a9a7a)}#save-btn:hover{background:linear-gradient(180deg,#b8d0b8,#8aaa8a)}#load-btn{background:linear-gradient(180deg,#a8a8c0,#7a7a9a)}#load-btn:hover{background:linear-gradient(180deg,#b8b8d0,#8a8aaa)}.transport-btn:active,.control-btn:active{transform:translateY(2px);box-shadow:0 1px 2px #0000004d,inset 0 2px 4px #0000004d}.control-btn.active{background:#ff6b35;color:#fff;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #ffffff4d,0 0 10px #ff6b3580}.tempo-control,.scale-control,.octave-control,.swing-control{display:flex;align-items:center;gap:10px}.swing-slider{width:100px;height:20px;-webkit-appearance:none;background:#222;border-radius:10px;outline:none;border:.5px solid rgba(0,0,0,.3);box-shadow:inset 0 2px 4px #0000004d}.swing-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:linear-gradient(145deg,#e0e0e0,#b0b0b0);border:.5px solid #888;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #fff9}.swing-slider::-moz-range-thumb{width:18px;height:18px;background:linear-gradient(145deg,#e0e0e0,#b0b0b0);border:.5px solid #888;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #fff9}label{font-size:11px;font-weight:700;color:#222;letter-spacing:1px}.number-input,.select-input{background:#333;color:#fff;border:2px solid #555;padding:5px 10px;font-size:12px;border-radius:4px;font-family:monospace;box-shadow:inset 0 2px 4px #0000004d}.number-input.small{width:50px}.number-input{width:80px}.synth-section{display:flex;flex-direction:column;align-items:center;gap:15px}.bass-controls{display:flex;gap:15px;align-items:center;flex-wrap:wrap;justify-content:center}.synth-controls{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap}.control-wrapper{text-align:center}.control-wrapper label{display:block;margin-bottom:10px}.control-wrapper .select-input{margin-top:0}.waveform-toggle{display:flex;gap:4px;background:#222;padding:4px;border-radius:6px;border:.5px solid rgba(0,0,0,.3);box-shadow:inset 0 2px 4px #0000004d,0 1px #ffffff1a}.wave-btn{width:36px;height:36px;background:linear-gradient(145deg,#666,#444);border:.5px solid rgba(0,0,0,.2);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;box-shadow:0 1px 2px #0000001a,inset 0 1px #fff3;position:relative;overflow:hidden}.wave-btn:before{content:"";position:absolute;top:0;width:0;height:100%;transition:all .3s ease;pointer-events:none}.wave-btn.reflect-left:before{left:0;width:8px;background:linear-gradient(90deg,rgba(255,107,53,.3) 0%,rgba(255,107,53,.1) 50%,transparent 100%)}.wave-btn.reflect-right:before{right:0;width:8px;background:linear-gradient(-90deg,rgba(255,107,53,.3) 0%,rgba(255,107,53,.1) 50%,transparent 100%)}.wave-btn:hover{background:linear-gradient(145deg,#777,#555)}.wave-btn:active{transform:translateY(1px);box-shadow:0 1px 1px #0003,inset 0 2px 4px #0000004d}.wave-btn.active{background:linear-gradient(145deg,#ff7b45,#ff5b25);box-shadow:0 0 8px #ff6b3580,inset 0 1px 2px #ffffff4d}.wave-btn i{font-size:20px;color:#aaa}.wave-btn.active i{color:#fff}.knob-wrapper{text-align:center}.knob-wrapper label{display:block;margin-bottom:10px}.knob-slot{width:70px;height:70px;background:radial-gradient(circle at 30% 30%,#444,#222 70%);border-radius:50%;border:.5px solid rgba(0,0,0,.4);box-shadow:0 2px 4px #0000004d,inset 0 2px 4px #00000080,inset 0 -1px 1px #ffffff1a;display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto 10px}.knob{width:58px;height:58px;background:radial-gradient(circle at 30% 30%,#666,#333);border-radius:50%;border:.5px solid rgba(0,0,0,.2);box-shadow:0 2px 4px #0003,inset 0 1px 1px #fff3,inset 0 -1px 1px #0000004d;position:relative;cursor:pointer;overflow:hidden}.knob-indicator{position:absolute;width:100%;height:100%;top:0;left:0;transform:rotate(-135deg);pointer-events:none}.knob-indicator:before{content:"";position:absolute;width:10px;height:10px;background:#fff;top:8px;left:50%;transform:translate(-50%);border-radius:50%;box-shadow:0 1px 2px #00000080,0 0 4px #fffc}.value{font-size:11px;color:#222;font-weight:700;font-family:monospace}.master-layout{display:flex;gap:20px;align-items:flex-start}.master-controls{background:linear-gradient(145deg,#c5c5c5,#b5b5b5);padding:20px;border-radius:8px;border:.5px solid rgba(0,0,0,.1);flex:1}.master-params{display:flex;gap:15px;align-items:center;justify-content:flex-start;margin-top:15px;flex-wrap:wrap}.transport-section{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}.mixer-channels{display:flex;gap:8px;justify-content:flex-start;background:linear-gradient(145deg,#b8b8b8,#a8a8a8);padding:15px;border-radius:8px;border:.5px solid rgba(0,0,0,.1);flex-shrink:0}.mixer-channel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;background:linear-gradient(145deg,#b8b8b8,#a8a8a8);border-radius:6px;border:.5px solid rgba(0,0,0,.1);min-width:50px}.mixer-channel label{font-size:11px;font-weight:700;color:#222;text-shadow:0 1px 0 rgba(255,255,255,.6);letter-spacing:1px}.channel-buttons{display:flex;gap:4px;height:24px}.channel-buttons .spacer{width:52px;height:24px}.mute-btn,.solo-btn{width:24px;height:24px;font-size:10px;font-weight:700;border:none;border-radius:3px;cursor:pointer;transition:all .1s;position:relative;overflow:hidden}.mute-btn:before,.solo-btn:before{content:"";position:absolute;top:0;width:0;height:100%;transition:all .3s ease;pointer-events:none}.mute-btn.reflect-left:before{left:0;width:6px;background:linear-gradient(90deg,rgba(255,68,68,.3) 0%,rgba(255,68,68,.1) 50%,transparent 100%)}.mute-btn.reflect-right:before{right:0;width:6px;background:linear-gradient(-90deg,rgba(255,68,68,.3) 0%,rgba(255,68,68,.1) 50%,transparent 100%)}.solo-btn.reflect-left:before{left:0;width:6px;background:linear-gradient(90deg,rgba(255,165,0,.3) 0%,rgba(255,165,0,.1) 50%,transparent 100%)}.solo-btn.reflect-right:before{right:0;width:6px;background:linear-gradient(-90deg,rgba(255,165,0,.3) 0%,rgba(255,165,0,.1) 50%,transparent 100%)}.mute-btn,.solo-btn{background:linear-gradient(145deg,#666,#444);color:#aaa;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #fff3}.mute-btn.active{background:linear-gradient(145deg,#f44,#c22);color:#fff;box-shadow:0 0 8px #ff444480,inset 0 1px 2px #ffffff4d}.solo-btn.active{background:linear-gradient(145deg,orange,#ff8c00);color:#fff;box-shadow:0 0 8px #ffa50080,inset 0 1px 2px #ffffff4d}.fader-track{position:relative;width:25px;height:120px;background:transparent;border-radius:3px}.fader-track:before{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;background:#444;border-radius:1px;transform:translate(-50%);box-shadow:inset 0 1px 2px #00000080}.fader-groove{display:none}.vertical-fader{position:absolute;width:120px;height:25px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;-webkit-appearance:none;background:transparent;outline:none;z-index:10}.vertical-fader::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:16px;background:linear-gradient(145deg,#e0e0e0,#b0b0b0);border:1px solid #888;border-radius:2px;cursor:pointer;box-shadow:0 2px 4px #0006,inset 0 1px 2px #fff9}.vertical-fader::-moz-range-thumb{width:24px;height:16px;background:linear-gradient(145deg,#e0e0e0,#b0b0b0);border:1px solid #888;border-radius:2px;cursor:pointer;box-shadow:0 2px 4px #0006,inset 0 1px 2px #fff9}.fader::-moz-range-thumb{width:30px;height:20px;background:linear-gradient(180deg,#f0f0f0,silver);border-radius:2px;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #fffc;cursor:pointer;border:none}.mixer-channel .value{font-size:10px;font-weight:700;color:#222;text-shadow:0 1px 0 rgba(255,255,255,.6)}#bass-sequencer-panel{background:#2a2a2a;padding:20px}.step-progress{width:100%;height:6px;background:#111;border-radius:3px;margin-bottom:15px;position:relative;border:.5px solid rgba(0,0,0,.3);box-shadow:inset 0 2px 4px #00000080,0 1px #ffffff1a}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#ff6b35,gold,#ff6b35);border-radius:3px;transition:width .1s ease-out;box-shadow:0 0 8px #ff6b3599,0 0 16px #ffd7004d;position:relative}.progress-bar:after{content:"";position:absolute;right:-2px;top:-2px;width:4px;height:calc(100% + 4px);background:gold;border-radius:2px;box-shadow:0 0 6px gold,0 0 12px #ffd70080}.piano-roll{display:grid;grid-template-columns:50px repeat(16,1fr);gap:2px;max-height:350px;overflow-y:auto;margin-bottom:2px;background:#222;padding:5px;border-radius:4px}.piano-key{height:24px;display:flex;align-items:center;justify-content:center;font-size:10px;border:1px solid #444;grid-column:1;background:linear-gradient(90deg,#f8f8f8,#e8e8e8);color:#333;font-weight:700}.piano-key.black{background:linear-gradient(90deg,#2a2a2a,#1a1a1a);color:#ccc}.note-cell{height:24px;border:1px solid #444;cursor:pointer;transition:all .1s;position:relative;background:#f8f8f81a}.note-cell.black-key{background:#2a2a2a4d}.note-cell:hover{background:#444}.note-cell.active{background:linear-gradient(145deg,#ff7b45,#ff5b25);box-shadow:0 0 8px #ff6b3599,inset 0 1px 2px #ffffff4d}.note-cell.playing{background:linear-gradient(145deg,#ffe700,#ffc700)!important;box-shadow:0 0 20px gold,0 0 40px #ffd70066,inset 0 1px 3px #fffc;transform:scale(1.05);z-index:10}.note-cell.portamento:after{content:"~";position:absolute;top:2px;right:2px;font-size:10px;color:#fff}.step-row,.portamento-row,.accent-row{display:flex;gap:2px;margin-bottom:2px}.step-label{width:50px;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:1px;color:#aaa;background:#222;border-radius:4px}.step-cells,.portamento-cells,.accent-cells{display:grid;grid-template-columns:repeat(16,1fr);gap:2px;flex:1;background:#222;padding:5px;border-radius:4px}.step-cell,.portamento-cell,.accent-cell{height:24px;border:1px solid #444;cursor:pointer;transition:all .1s;background:#111;display:flex;align-items:center;justify-content:center;font-size:10px;color:#666;position:relative}.step-cell:before{content:"";position:absolute;width:4px;height:4px;background:#333;border-radius:50%;top:3px;right:3px;transition:all .1s;box-shadow:inset 0 1px 2px #00000080}.step-cell.active:before{background:#ff6b35;box-shadow:0 0 6px #ff6b35cc,inset 0 -1px 1px #0000004d}.step-cell.playing:before{background:gold;box-shadow:0 0 10px gold,0 0 20px #ffd70099,inset 0 -1px 1px #0000004d}.step-cell:hover,.portamento-cell:hover,.accent-cell:hover{background:#444}.step-cell.active,.portamento-cell.active{background:#ff6b35;color:#fff;box-shadow:0 0 4px #ff6b3580}.accent-cell.active{background:#f44;color:#fff;box-shadow:0 0 4px #ff444480}.accent-cell:after{content:"!";font-weight:700;font-size:12px;opacity:0;transition:opacity .1s}.accent-cell.active:after{opacity:1}.step-cell.playing{background:linear-gradient(145deg,#ffe700,#ffc700)!important;box-shadow:0 0 15px gold,0 0 30px #ffd70066,inset 0 1px 3px #fffc;color:#000;transform:scale(1.1);font-weight:700}#drum-sequencer-panel{background:#2a2a2a;padding:20px}.euclidean-table{width:100%;margin-bottom:10px;border-collapse:collapse;background:#999;border-radius:6px;overflow:hidden;box-shadow:inset 0 2px 4px #fff3,inset 0 -2px 4px #0000004d;flex:1;min-height:120px}.euclidean-table th{background:linear-gradient(145deg,#777,#555);color:#fff;font-size:11px;font-weight:700;padding:8px;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.5);letter-spacing:1px}.euclidean-table td{padding:6px;text-align:center;border-top:1px solid #888}.euclidean-table td:first-child{font-size:10px;font-weight:700;color:#222;text-shadow:0 1px 0 rgba(255,255,255,.6)}.euclidean-number{width:50px;padding:4px;border:1px solid #666;border-radius:3px;background:linear-gradient(145deg,#fff,#e0e0e0);text-align:center;font-size:11px;font-weight:700;color:#222;box-shadow:inset 0 1px 2px #0003,0 1px #fffc}.euclidean-number:focus{outline:none;border-color:#444;box-shadow:inset 0 1px 2px #0000004d,0 0 4px #0003}#apply-euclidean{display:block;margin:0 auto}.drum-synth-container{display:flex;gap:15px;align-items:flex-start;flex-wrap:nowrap}.drum-synth-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1;max-width:800px}.pattern-generator-section{flex-shrink:0;background:transparent;padding:0;border:none;height:260px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;min-width:280px}.pattern-generator-section h4{display:none}.drum-synth-section{background:linear-gradient(145deg,#c5c5c5,#b5b5b5);padding:8px;border-radius:6px;border:.5px solid rgba(0,0,0,.1);height:260px;display:flex;flex-direction:column;justify-content:space-between;width:auto}.drum-synth-section h4{font-size:12px;font-weight:700;color:#222;text-shadow:0 1px 0 rgba(255,255,255,.6);margin-bottom:8px;text-align:center;letter-spacing:1px}.synth-params{display:flex;gap:2px;justify-content:center;flex:1;align-items:center}.param-control{display:flex;flex-direction:column;align-items:center;gap:6px;width:35px}.param-control label{font-size:10px;font-weight:700;color:#222;text-shadow:0 1px 0 rgba(255,255,255,.6);letter-spacing:.5px}.param-slider-track{position:relative;width:25px;height:120px;background:transparent;border-radius:3px}.param-slider-track:before{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;background:#444;border-radius:1px;transform:translate(-50%);box-shadow:inset 0 1px 2px #00000080}.param-slider{position:absolute;width:90px;height:25px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;-webkit-appearance:none;background:transparent;outline:none;z-index:10}.param-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:14px;background:linear-gradient(145deg,#e0e0e0,#b0b0b0);border:1px solid #888;border-radius:2px;cursor:pointer;box-shadow:0 2px 4px #0006,inset 0 1px 2px #fff9}.param-slider::-webkit-slider-track{-webkit-appearance:none;width:2px;height:90px;background:#444;border-radius:1px;box-shadow:inset 0 1px 2px #00000080}.param-slider::-moz-range-thumb{width:20px;height:14px;background:linear-gradient(145deg,#e0e0e0,#b0b0b0);border:1px solid #888;border-radius:2px;cursor:pointer;box-shadow:0 2px 4px #0006,inset 0 1px 2px #fff9}.param-slider::-moz-range-track{width:2px;height:90px;background:#444;border-radius:1px;box-shadow:inset 0 1px 2px #00000080}.param-control .param-value{font-size:9px;font-weight:700;color:#222;text-shadow:0 1px 0 rgba(255,255,255,.6)}.drum-pattern{display:grid;grid-template-columns:100px repeat(16,1fr);gap:3px}.drum-label{background:#555;color:#ddd;padding:10px;font-size:11px;text-align:center;border-radius:4px;cursor:pointer;transition:all .1s;font-weight:700;letter-spacing:1px}.drum-label:hover{background:#666}.drum-label.muted{background:#333;color:#666;text-decoration:line-through}.drum-step{background:#222;height:40px;border-radius:4px;cursor:pointer;box-shadow:inset 0 2px 4px #0000004d;transition:all .1s;position:relative}.drum-step:before{content:"";position:absolute;width:6px;height:6px;background:#333;border-radius:50%;top:4px;right:4px;transition:all .1s;box-shadow:inset 0 1px 2px #00000080}.drum-step:hover{background:#444}.drum-step.active{background:linear-gradient(145deg,#ff7b45,#ff5b25);box-shadow:inset 0 1px 3px #fff6,0 0 8px #ff6b3599,0 2px 4px #0003}.drum-step.active:before{background:#ff6b35;box-shadow:0 0 8px #ff6b35cc,inset 0 -1px 1px #0000004d}.drum-step.playing{background:gold;box-shadow:0 0 15px gold,inset 0 1px 2px #ffffff80}.drum-step.playing:before{background:gold;box-shadow:0 0 12px gold,0 0 25px #ffd70099,inset 0 -1px 1px #0000004d}.drum-step[data-step="0"]:not(.active),.drum-step[data-step="4"]:not(.active),.drum-step[data-step="8"]:not(.active),.drum-step[data-step="12"]:not(.active){background:#2a2a2a}.drum-step[data-step="0"]:not(.active):hover,.drum-step[data-step="4"]:not(.active):hover,.drum-step[data-step="8"]:not(.active):hover,.drum-step[data-step="12"]:not(.active):hover{background:#3a3a3a}} ::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#222}::-webkit-scrollbar-thumb{background:#555;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#666}.help-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.help-overlay.hidden{display:none}.help-content{background:linear-gradient(145deg,#d0d0d0,#b0b0b0);border-radius:10px;padding:30px;max-width:600px;width:90%;border:.5px solid rgba(0,0,0,.2);box-shadow:0 8px 32px #0000004d,inset 0 1px #fff6,inset 0 -1px #0000001a}.help-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid rgba(0,0,0,.2);padding-bottom:15px}.help-header h3{margin:0;color:#222;text-shadow:0 1px 0 rgba(255,255,255,.6);font-size:24px;letter-spacing:1px}.close-btn{background:linear-gradient(145deg,#e0e0e0,silver);border:.5px solid rgba(0,0,0,.2);border-radius:50%;width:32px;height:32px;font-size:20px;font-weight:700;cursor:pointer;color:#666;box-shadow:0 2px 4px #0000001a,inset 0 1px #fff6;transition:all .1s}.close-btn:hover{background:linear-gradient(145deg,#f0f0f0,#d0d0d0);color:#444}.close-btn:active{transform:translateY(1px);box-shadow:0 1px 2px #0003,inset 0 2px 4px #0000001a}.help-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:25px}.shortcut-group h4{margin:0 0 12px;color:#444;font-size:14px;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.6);letter-spacing:1px;border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:5px}.shortcut{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px;color:#333}kbd{background:linear-gradient(145deg,#f5f5f5,#e5e5e5);border:.5px solid rgba(0,0,0,.2);border-radius:4px;padding:4px 8px;font-family:monospace;font-size:11px;font-weight:700;color:#444;text-shadow:0 1px 0 rgba(255,255,255,.8);box-shadow:0 1px 2px #0000001a,inset 0 1px #fff9,inset 0 -1px #0000001a;min-width:24px;text-align:center}#help-btn{background:linear-gradient(180deg,#d0c0b0,#b0a090);width:30px;padding:10px 8px;font-size:16px;font-weight:700}#help-btn:hover{background:linear-gradient(180deg,#e0d0c0,#c0b0a0)}@media (max-width: 768px){body{min-width:100%;overflow-x:hidden}.wooden-desk{background:#1a1a1a;padding:0;min-height:100vh}.baser30-unit{width:100vw;border-radius:0;margin:0;min-height:100vh;display:flex;flex-direction:column}.logo-sticker{position:fixed;top:10px;right:10px;z-index:1000}.logo-sticker img{width:60px;height:60px}.panel-content{padding:15px}.synth-controls{gap:15px;justify-content:space-around}.knob-wrapper{margin-bottom:15px}.knob-slot{width:60px;height:60px}.knob{width:50px;height:50px}.master-layout{flex-direction:column;gap:15px}.mixer-channels{gap:6px;flex-wrap:wrap;justify-content:center}.mixer-channel{min-width:60px}.fader-track{width:25px;height:70px}.drum-synth-controls{grid-template-columns:repeat(2,1fr);gap:8px;max-width:none}.drum-synth-section{padding:10px;height:160px;min-width:140px}.pattern-generator-section{width:100%;margin-top:15px;height:160px}.drum-synth-container{flex-direction:column;gap:15px}.bass-controls{flex-direction:column;gap:10px}.help-content{margin:20px;padding:20px;width:calc(100% - 40px)}.help-shortcuts{grid-template-columns:1fr}}.footer{text-align:center;padding:20px;background:transparent;color:#666;font-size:12px}.footer .credit{opacity:.7}.footer .credit a{color:#f8b62d;text-decoration:none}.footer .credit a:hover{text-decoration:underline}