:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424}body{margin:0;display:flex;min-width:320px;min-height:100vh;overflow:hidden}#app{flex:1;display:flex;flex-direction:column}.designer{display:grid;grid-template-columns:minmax(250px,350px) 1fr;height:100vh;gap:1px;background:#1a1a1a;overflow:hidden}.left-column{display:flex;flex-direction:column;background:#2a2a2a;border-right:1px solid #1a1a1a;height:100vh;overflow:hidden}.sound-list-panel{flex:0 0 auto;height:40%;border-bottom:1px solid #1a1a1a;display:flex;flex-direction:column;overflow:hidden}.sound-controls-panel{flex:1 1 auto;overflow-y:auto;min-height:0}.action-bar{display:flex;gap:.5rem;padding:1rem;background:#1a1a1a;border-top:1px solid #333}.right-column{background:#2a2a2a;padding:1rem;display:flex;justify-content:center;align-items:center;overflow:hidden}.drum-pad{width:100%;max-width:1200px;aspect-ratio:1;margin:auto;display:flex;flex-direction:column;gap:1rem}.drum-pad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;aspect-ratio:1;padding:1rem}.drum-pad.edit-mode .drum-pad-grid{grid-template-columns:repeat(2,1fr);width:100%;max-width:800px;margin:0 auto}.pad-edit-layout{display:flex;flex-direction:column;gap:1rem;width:100%;height:100%;padding:1rem}.drum-pad-button.edit-mode{cursor:default;padding:1rem;pointer-events:none}.drum-pad-button.edit-mode:hover{transform:none;box-shadow:0 8px 16px #0006,0 2px 4px #0003,inset 0 1px 1px #ffffff0d}.drum-pad-button.edit-mode .pad-edit-layout{width:100%;height:100%;display:flex;flex-direction:column;gap:1rem;pointer-events:all}.drum-pad-button.edit-mode .sound-picker,.drum-pad-button.edit-mode .key-midi-assign{width:100%;padding:.5rem;background:#1a1a1a;border:1px solid #333;color:#fff;border-radius:4px;cursor:pointer;pointer-events:all;z-index:1}.drum-pad-button.edit-mode .sound-picker:hover,.drum-pad-button.edit-mode .key-midi-assign:hover{border-color:#0ff;color:#0ff}.drum-pad-button.edit-mode .key-midi-assign.has-key{color:#0ff;border-color:#0ff}.drum-pad-button.edit-mode .key-midi-assign.listening{background:#002626;border-color:#0ff;color:#0ff}.sound-select{width:100%}.sound-picker{width:100%;background:#1a1a1a;color:#fff;border:1px solid #333;padding:.5rem;border-radius:4px}.key-midi-assign{width:100%;padding:.5rem;background:#1a1a1a;border:1px solid #333;color:#666;border-radius:4px;cursor:pointer;transition:all .2s ease;margin-top:.5rem}.key-midi-assign.disabled{opacity:.5;cursor:not-allowed;background:#1a1a1a;border-color:#333;color:#666;pointer-events:none}.key-midi-assign:not(.disabled):hover{background:#2a2a2a;border-color:#0ff;color:#0ff}.key-midi-assign.has-key{color:#0ff;border-color:#0ff}.key-midi-assign.listening{background:#002626;border-color:#0ff;color:#0ff}.drum-pad-button{aspect-ratio:1;background:linear-gradient(145deg,#1f1f1f,#151515);border-radius:clamp(8px,1.5vw,16px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.5rem,1vw,1rem);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);border:1px solid #333;padding:clamp(1rem,2vw,3rem);font-size:clamp(.9rem,1.5vw,2rem);box-shadow:0 8px 16px #0006,0 2px 4px #0003,inset 0 1px 1px #ffffff0d;position:relative;overflow:hidden}.drum-pad-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,rgba(0,255,255,.1),transparent 70%);opacity:0;transition:opacity .3s ease}.drum-pad-button:hover{transform:translateY(-2px);box-shadow:0 12px 24px #00000080,0 4px 8px #0000004d,inset 0 1px 1px #ffffff12}.drum-pad-button:hover:before{opacity:1}.drum-pad-button.active{background:linear-gradient(145deg,#002626,#001a1a);border-color:#0ff;transform:scale(.95) translateY(4px);box-shadow:0 4px 8px #0000004d,0 1px 2px #0003,inset 0 1px 1px #00ffff1a}.drum-pad-button.active:after{content:"";position:absolute;top:50%;left:50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(0,255,255,.4),transparent 70%);transform:translate(-50%,-50%) scale(0);animation:ripple .5s ease-out}@keyframes ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}.key-label{font-size:clamp(1rem,3vw,2.5em);color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.5);font-weight:500}.sound-label{font-size:clamp(.8rem,1.5vw,1.2em);text-align:center;color:#888;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drum-pad.fullscreen{position:fixed;top:0;left:0;transform:none;width:100vw;height:100vh;z-index:1000;background:#1a1a1a;padding:2rem;border-radius:0;box-shadow:none;max-height:none;margin:0}.drum-pad.fullscreen .drum-pad-grid{max-width:min(100vh,100vw);max-height:min(100vh,100vw);margin:auto}.designer.fullscreen .left-column,.designer.fullscreen .right-column{display:none}.designer.fullscreen{display:block;height:100vh;width:100vw;background:#1a1a1a}.sound-list{flex:1;overflow-y:auto;padding:.5rem}.sound-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#1a1a1a;border-radius:4px;margin-bottom:.5rem;cursor:pointer}.sound-item:hover{background:#333}.sound-item.selected{background:#033}.sound-item button{padding:.25rem;background:transparent;border:none;color:#666;cursor:pointer}.sound-item button:hover{color:#0ff}.sound-controls{flex:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column}.main-panel{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:#242424;overflow:hidden}.mapping-instructions{text-align:center;color:#666;padding:.5rem;font-style:italic}button.clear-mappings{background:#1a1a1a;color:#f44;border:1px solid #333;padding:.5rem 1rem;border-radius:4px;cursor:pointer}button.clear-mappings:hover{background:#2a2a2a;border-color:#f44}button{background:#1a1a1a;color:#ccc;border:1px solid #333;padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:all .2s ease}button:hover{background:#2a2a2a;border-color:#0ff;color:#0ff}.action-bar button{flex:1;min-width:0;white-space:nowrap;padding:.5rem}.action-bar button.export-wav,.action-bar button.export-config{color:#0ff}.action-bar button.import-config{color:#0f0}.sound-grid{display:none}.action-bar{grid-column:1 / -1;background:#2a2a2a;padding:.75rem;display:flex;justify-content:center;gap:1rem;border-top:1px solid #1a1a1a}.controls-grid{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;overflow-y:auto}.control-group{background:#1a1a1a;border-radius:4px;padding:.5rem;margin:0 .5rem}.control-group h3{color:#666;font-size:.9em;margin-bottom:.5rem;font-weight:400;padding:0 .5rem}.control{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:.5rem;padding:.25rem .5rem}.control label{color:#ccc;font-size:clamp(.8rem,1.2vw,.9em);white-space:nowrap}.control input[type=range]{width:100%;height:4px;background:#333;border-radius:2px;-webkit-appearance:none}.control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#0ff;border-radius:50%;cursor:pointer}.control input[type=range]::-moz-range-thumb{width:12px;height:12px;background:#0ff;border:none;border-radius:50%;cursor:pointer}.control select{background:#2a2a2a;color:#fff;border:1px solid #333;padding:.25rem;border-radius:4px;font-size:.9em;width:100%}.control-group{margin-bottom:.5rem;transition:background-color .2s ease}.control-group:hover{background:#222}.no-sound{color:#666;text-align:center;padding:2rem}.name-edit{background:#2a2a2a;border:1px solid #00ffff;color:#fff;padding:.25rem;border-radius:4px;width:100%;max-width:150px;font-size:inherit;font-family:inherit}.sound-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drum-pad-button .pad-edit-layout{pointer-events:all;width:100%;height:100%}.drum-pad-button .sound-picker,.drum-pad-button .key-midi-assign{pointer-events:all;cursor:pointer}.drum-pad-button.edit-mode{cursor:default}.snap-note{background:#1a1a1a;color:#0ff;border:1px solid #333;padding:.25rem .5rem;border-radius:4px;cursor:pointer;font-size:.9em;margin-top:.5rem;width:100%}.snap-note:hover{background:#2a2a2a;border-color:#0ff}.scale-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.scale-modal-content{background:#1a1a1a;padding:2rem;border-radius:8px;min-width:400px;max-width:600px;box-shadow:0 4px 32px #00000080}.scale-controls{margin:1.5rem 0}.preview-notes{margin-top:1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.note-preview{background:#2a2a2a;padding:.5rem;border-radius:4px;text-align:center}.note-name{color:#0ff;display:block;font-size:1.2em}.frequency{color:#666;font-size:.9em}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:1.5rem}.list-header{display:flex;align-items:center;padding:1rem;border-bottom:1px solid #333}.list-header h2{margin:0;flex:1}.sound-actions{display:flex;gap:.5rem}.sound-actions button{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center}.sound-actions .export-config{color:#0ff}.sound-actions .import-config{color:#0f0}.sound-item.dragging{opacity:.5}.drum-pad-button.drag-over,.drum-pad-button.edit-mode.drag-over{border:2px solid #00ffff;background:#00ffff1a}.drum-pad-button.edit-mode{cursor:default;padding:1rem;pointer-events:all;position:relative}.sound-item{cursor:grab}.sound-item:active{cursor:grabbing}.drum-pad-button.edit-mode .sound-picker{width:100%;padding:.5rem;background:#1a1a1a;border:1px solid #333;color:#fff;border-radius:4px;cursor:pointer;pointer-events:all;z-index:2;position:relative}.drum-pad-button.edit-mode .sound-select{position:relative;z-index:2;pointer-events:all}.midi-device-section{margin:20px 0;padding:15px;background:#2a2a2a;border-radius:8px;border:1px solid #333}.midi-device-section label{margin-right:10px;font-weight:700;color:#ccc}.midi-device-section select{padding:8px;border-radius:4px;border:1px solid #333;background:#1a1a1a;color:#fff;min-width:200px}.midi-mapping-section{margin:20px 0;padding:15px;background:#2a2a2a;border-radius:8px;border:1px solid #333}.midi-mapping-section h3{margin-top:0;margin-bottom:15px;color:#ccc}.mapping-item{display:flex;justify-content:space-between;align-items:center;padding:10px;margin:5px 0;background:#1a1a1a;border-radius:4px;border:1px solid #333;color:#ccc}.mapping-item button{padding:5px 10px;background:#f44;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.mapping-item button:hover{background:#c00}.mapping-item.active{background:#033;border-color:#0ff}.mapping-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;color:#0ff;padding:20px;border-radius:8px;border:1px solid #00ffff;z-index:1000;box-shadow:0 0 20px #0ff3}.midi-label{font-size:clamp(.7rem,1.2vw,1em);color:#0ff;text-align:center;margin-top:.25rem}.drum-pad-controls{display:flex;gap:8px;margin-bottom:16px}.drum-pad-controls button{background:#2a2a2a;border:1px solid #3a3a3a;color:#fff;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:16px;transition:all .2s ease}.drum-pad-controls button:hover{background:#3a3a3a;border-color:#4a4a4a}.drum-pad-controls button.midi-connect{background:#2a2a2a;border-color:#3a3a3a}.drum-pad-controls button.midi-connect.connected{background:#2d5a27;border-color:#3a7a33}.drum-pad-controls button.midi-connect:hover{background:#3a3a3a;border-color:#4a4a4a}.drum-pad-controls button.midi-connect.connected:hover{background:#3a7a33;border-color:#4a8a43}.drum-pad-controls button.midi-connect.connecting{background:#2a2a2a;border-color:#666;color:#666;animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}