body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#1a1a2e;color:#e0e0e0;font-family:Poppins,sans-serif;margin:0;overflow-x:hidden}.App{align-items:flex-start;display:flex;justify-content:center;min-height:100vh;text-align:center;transform:scale(.8);transform-origin:top center}.App.welcome{align-items:center;transform-origin:center center}.start-screen{align-items:center;background-color:initial;border-radius:15px;box-shadow:none;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:40px;position:relative}.start-screen h1{color:#0ff;font-size:3em;margin-bottom:30px;text-shadow:0 0 8px #00ffff80;z-index:1}.start-screen button{background-color:#0ff;border:none;border-radius:8px;box-shadow:0 0 10px #00ffff4d;color:#1a1a2e;cursor:pointer;font-size:1.2em;font-weight:700;margin-top:40px;padding:15px 30px;transition:all .3s ease;z-index:1}.start-screen button:hover{background-color:#00e6e6;box-shadow:0 0 25px #00ffffb3;transform:translateY(-2px)}.start-screen button:active{background-color:#00b3b3;transform:translateY(0)}.pulsing-background{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.pulse-circle{animation:pulse 4s cubic-bezier(.66,0,0,1) infinite;border:2px solid #00ffff80;border-radius:50%;height:100px;left:50%;position:absolute;top:40%;transform:translate(-50%,-50%);width:100px}.pulse-circle:nth-child(2){animation-delay:1s}.pulse-circle:nth-child(3){animation-delay:2s}.pulse-circle:nth-child(4){animation-delay:3s}@keyframes pulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}50%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}.main-app{align-items:center;display:flex;flex-direction:column;gap:20px;padding:20px}.drum-machine h2{color:#0ff;margin-bottom:20px}.app-container{grid-gap:20px;box-sizing:border-box;display:grid;gap:20px;grid-template-columns:1fr 2fr 1fr;padding:20px}.left-column,.middle-column,.right-column{display:flex;flex-direction:column;gap:10px}@media (max-width:768px){.app-container{grid-template-columns:1fr}}.sequencer-grid{display:flex;flex-direction:column;gap:10px}.drum-row{align-items:center;background-color:#3a3a5a;border-radius:8px;display:flex;padding:8px}.drum-label{color:#e0e0e0;font-weight:700;text-align:left;width:120px}.steps{grid-gap:5px;display:grid;flex-grow:1;gap:5px;grid-template-columns:repeat(16,1fr)}.step{background-color:#5a5a7a;border-radius:4px;cursor:pointer;height:25px;transition:background-color .1s ease;width:25px}.step.active{background-color:#f0f;box-shadow:0 0 8px #ff00ffb3}.step:hover{background-color:#7a7a9a}.transport-controls{align-items:center;display:flex;gap:15px;justify-content:center;margin-bottom:20px}.transport-controls button{background-color:#0ff;border:none;border-radius:8px;box-shadow:0 0 10px #00ffff80;color:#1a1a2e;cursor:pointer;font-size:1em;font-weight:700;padding:10px 20px;transition:all .3s ease}.transport-controls button:hover:not(:disabled){background-color:#00e6e6;box-shadow:0 0 15px #00ffffb3;transform:translateY(-2px)}.transport-controls button:disabled{background-color:#5a5a7a;box-shadow:none;cursor:not-allowed}.bpm-control{align-items:center;color:#e0e0e0;gap:10px}.bpm-control input[type=range]{-webkit-appearance:none;background:#5a5a7a;border-radius:5px;height:8px;opacity:.7;outline:none;transition:opacity .2s;width:150px}.bpm-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#f0f;border-radius:50%;box-shadow:0 0 5px #ff00ffb3;cursor:pointer;height:20px;width:20px}.bpm-control input[type=range]::-moz-range-thumb{background:#f0f;border-radius:50%;box-shadow:0 0 5px #ff00ffb3;cursor:pointer;height:20px;width:20px}.step.current{background-color:orange;border:2px solid orange;box-shadow:0 0 8px #ffa500b3}.pattern-controls{background-color:#2a2a4a;border-radius:10px;box-shadow:0 0 20px #0ff3;max-width:800px;padding:1px 15px 15px;width:90%}.pattern-controls h3{color:#0ff;margin-bottom:15px}.predefined-patterns,.saved-patterns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:15px}.pattern-controls button{background-color:#0ff;border:none;border-radius:5px;box-shadow:0 0 8px #0ff6;color:#1a1a2e;cursor:pointer;font-size:.9em;font-weight:700;padding:8px 15px;transition:all .2s ease}.pattern-controls button:hover:not(:disabled){background-color:#00e6e6;box-shadow:0 0 12px #0ff9;transform:translateY(-1px)}.pattern-controls button:disabled{background-color:#5a5a7a;box-shadow:none;cursor:not-allowed;opacity:.7}.saved-pattern-item{align-items:center;display:flex;gap:5px}.saved-pattern-item .delete-button{background-color:red;box-shadow:0 0 5px #ff000080;color:#fff;font-size:.8em;padding:5px 8px}.saved-pattern-item .delete-button:hover{background-color:#c00;box-shadow:0 0 8px #ff0000b3}.drum-mix{background-color:#2a2a4a;border-radius:10px;box-shadow:0 0 20px #0ff3;margin-top:20px;max-width:800px;padding:1px 15px 15px;width:90%}.drum-mix h3{color:#0ff;margin-bottom:15px}.mix-controls{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}.mix-control{align-items:center;display:flex;flex-direction:column;gap:8px}.mix-control label{color:#e0e0e0;font-weight:700}.mix-control input[type=range]{-webkit-appearance:none;background:#5a5a7a;border-radius:5px;height:5px;outline:none;width:100%}.mix-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#f0f;border-radius:50%;cursor:pointer;height:15px;width:15px}.mix-control span{color:silver;font-size:.8em}.filter-controls{background-color:#2a2a4a;border-radius:10px;box-shadow:0 0 20px #0ff3;margin-top:20px;max-width:800px;padding:1px 15px 15px;width:90%}.filter-controls h3{color:#0ff;margin-bottom:15px}.background-loops{background-color:#2a2a4a;border-radius:10px;box-shadow:0 0 20px #0ff3;margin-top:20px;max-width:800px;padding:1px 15px 15px;width:90%}.background-loops h3{color:#0ff;margin-bottom:15px}.loop-control{align-items:center;display:flex;gap:20px;margin-bottom:10px}.loop-control button{background-color:#0ff;border:none;border-radius:8px;box-shadow:0 0 10px #00ffff80;color:#1a1a2e;cursor:pointer;font-size:1em;font-weight:700;padding:10px 20px;transition:all .3s ease}.loop-control button:hover:not(:disabled){background-color:#00e6e6;box-shadow:0 0 15px #00ffffb3;transform:translateY(-2px)}.loop-control button.active{background-color:#f0f;box-shadow:0 0 15px #ff00ffb3}.loop-control .volume-control{align-items:center;color:#e0e0e0;display:flex;flex-grow:1;font-weight:700;gap:10px}.loop-control .volume-control label{text-align:right;width:40px}.loop-control .volume-control input[type=range]{width:100%}.loop-upload-controls{display:flex;flex-direction:column;flex-grow:1;gap:10px}.file-input-wrapper{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.file-upload-btn{background-color:#0ff;border:none;border-radius:6px;box-shadow:0 0 8px #0ff6;color:#1a1a2e;cursor:pointer;font-size:.85em;font-weight:700;padding:6px 12px;transition:all .3s ease;white-space:nowrap}.file-upload-btn:hover{background-color:#00e6e6;box-shadow:0 0 12px #0ff9;transform:translateY(-1px)}.uploaded-file-name{color:#e0e0e0;font-size:.8em;font-weight:400;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clear-file-btn{background-color:#f55;border:none;border-radius:6px;box-shadow:0 0 8px #f556;color:#1a1a2e;cursor:pointer;font-size:.85em;font-weight:700;padding:6px 12px;transition:all .3s ease}.clear-file-btn:hover{background-color:#f44;box-shadow:0 0 12px #f559;transform:translateY(-1px)}.visualizer-card{background-color:#2a2a4a;border-radius:10px;box-shadow:0 0 20px #0ff3;margin-top:20px;max-width:800px;padding:15px;width:90%}.visualizer-card h3{color:#0ff;margin-bottom:15px}.visualizer-card canvas{border-radius:5px;height:200px;width:100%}.sequencer-card{background-color:#2a2a4a;border-radius:10px;box-shadow:0 0 20px #0ff3;margin-top:20px;max-width:800px;padding:1px 15px 15px;width:90%}.sequencer-card h3{color:#0ff;margin-bottom:15px}.export-button{background-color:#0ff;border:none;border-radius:8px;box-shadow:0 0 10px #00ffff80;color:#1a1a2e;cursor:pointer;font-size:1em;font-weight:700;margin-left:10px;padding:10px 20px;transition:all .3s ease}.export-button:hover:not(:disabled){background-color:#00e6e6;box-shadow:0 0 15px #00ffffb3;transform:translateY(-2px)}.export-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.export-modal-overlay{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.export-modal{background:linear-gradient(135deg,#2a2a4a,#1a1a2e);border:1px solid #00ffff4d;border-radius:15px;box-shadow:0 0 30px #0ff6;max-width:400px;padding:30px;width:90%}.export-modal h3{color:#0ff;margin-bottom:20px;margin-top:0;text-align:center;text-shadow:0 0 10px #00ffff80}.export-option{margin-bottom:15px}.export-option label{color:#e0e0e0;display:block;font-weight:700;margin-bottom:8px}.export-option input[type=text],.export-option select{background-color:#1a1a2e;border:1px solid #00ffff4d;border-radius:8px;color:#e0e0e0;font-family:Poppins,sans-serif;padding:10px;transition:all .3s ease;width:100%}.export-option input[type=text]:focus,.export-option select:focus{border-color:#0ff;box-shadow:0 0 10px #00ffff4d;outline:none}.export-option select option{background-color:#1a1a2e;color:#e0e0e0}.export-progress{margin:20px 0}.progress-bar{background-color:#1a1a2e;border:1px solid #0ff3;border-radius:4px;height:8px;overflow:hidden;width:100%}.progress-fill{background:linear-gradient(90deg,#0ff,#00e6e6);box-shadow:0 0 10px #00ffff80;height:100%;transition:width .3s ease}.export-progress p{color:#e0e0e0;font-weight:700;margin-top:10px;text-align:center}.export-error{background-color:#f003;border-left:4px solid #ff6b6b;border-radius:8px;color:#ff6b6b;font-size:.9em;margin:10px 0;padding:10px}.export-modal-buttons{display:flex;gap:10px;margin-top:20px}.export-modal-buttons button{border:none;border-radius:8px;cursor:pointer;flex:1 1;font-family:Poppins,sans-serif;font-weight:700;padding:12px 20px;transition:all .3s ease}.export-modal-buttons button:first-child{background-color:#0ff;box-shadow:0 0 10px #00ffff4d;color:#1a1a2e}.export-modal-buttons button:first-child:hover:not(:disabled){background-color:#00e6e6;box-shadow:0 0 15px #00ffff80;transform:translateY(-2px)}.export-modal-buttons button:last-child{background-color:#3a3a5a;border:1px solid #00ffff4d;color:#e0e0e0}.export-modal-buttons button:last-child:hover:not(:disabled){background-color:#4a4a6a;border-color:#0ff}.export-modal-buttons button:disabled{cursor:not-allowed;opacity:.5;transform:none}.number-input-group{align-items:center;display:flex;gap:8px}.number-input{background-color:#1a1a2e;border:1px solid #00ffff4d;border-radius:8px;color:#e0e0e0;font-family:Poppins,sans-serif;font-size:1em;padding:10px;text-align:center;transition:all .3s ease;width:80px}.number-input:focus{border-color:#0ff;box-shadow:0 0 10px #00ffff4d;outline:none}.increment-btn{align-items:center;background-color:#3a3a5a;border:1px solid #00ffff4d;border-radius:8px;color:#0ff;cursor:pointer;display:flex;font-size:1.2em;font-weight:700;height:36px;justify-content:center;padding:0;transition:all .3s ease;width:36px}.increment-btn:hover:not(:disabled){background-color:#4a4a6a;border-color:#0ff;transform:translateY(-2px)}.increment-btn:active:not(:disabled){transform:translateY(0)}.increment-btn:disabled{cursor:not-allowed;opacity:.5}.duration-unit{color:#0ff;font-size:.9em;font-weight:400;margin-left:4px}.kit-selector{background-color:#2a2a4a;border-radius:10px;box-shadow:0 0 20px #0ff3;max-width:800px;padding:1px 15px 15px;width:90%}.kit-selector h3{color:#0ff;margin-bottom:15px}.custom-dropdown{display:inline-block;position:relative;width:auto}.custom-dropdown-toggle{background-color:#1a1a2e;border:1px solid #00ffff4d;border-radius:8px;color:#e0e0e0;cursor:pointer;font-family:Poppins,sans-serif;font-size:1em;min-width:150px;padding:10px 35px 10px 15px;position:relative;text-align:left;transition:all .3s ease;white-space:nowrap}.custom-dropdown-toggle:hover{border-color:#0ff;box-shadow:0 0 10px #00ffff4d}.custom-dropdown-toggle:after{color:#0ff;content:"▼";font-size:.8em;position:absolute;right:15px;top:50%;transform:translateY(-50%);transition:transform .3s ease}.custom-dropdown.show .custom-dropdown-toggle:after{transform:translateY(-50%) rotate(180deg)}.custom-dropdown-menu{background-color:#1a1a2e;border:1px solid #00ffff4d;border-radius:0 0 8px 8px;border-top:none;box-shadow:0 5px 15px #00000080;display:none;left:0;max-height:200px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:1000}.custom-dropdown.show .custom-dropdown-menu{display:block}.custom-dropdown-item{border-bottom:1px solid #00ffff1a;color:#e0e0e0;cursor:pointer;padding:10px 15px;transition:all .2s ease}.custom-dropdown-item:last-child{border-bottom:none}.custom-dropdown-item.selected,.custom-dropdown-item:hover{background-color:#2a2a4a;color:#0ff}.tooltip-container{bottom:0;display:inline-block;height:0;left:0;overflow:visible;pointer-events:none;position:absolute;width:0}.tooltip{background-color:#1a1a2e;border:1px solid #00ffff4d;border-radius:6px;box-shadow:0 0 10px #0ff3;color:#e0e0e0;font-size:.9em;margin-top:5px;max-width:250px;opacity:0;padding:8px 12px;pointer-events:none;text-align:center;top:100%;transition:opacity .3s ease,visibility .3s ease;visibility:hidden;white-space:normal;z-index:1001}.tooltip,.tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.tooltip:after{border:5px solid;border-color:#0000 #0000 #00ffff4d;bottom:100%;content:""}.tooltip.show{opacity:1;visibility:visible}select{-webkit-appearance:none;appearance:none;background-color:#1a1a2e;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;background-size:16px;border:1px solid #00ffff4d;border-radius:8px;color:#e0e0e0;cursor:pointer;font-family:Poppins,sans-serif;font-size:1em;padding:5px 35px 5px 12px;transition:all .3s ease}select:focus,select:hover{border-color:#0ff;box-shadow:0 0 10px #00ffff4d}select:focus{outline:none}.user-loops-section{background-color:#2a2a4a;border-radius:10px;box-shadow:0 0 20px #0ff3;margin-top:20px;max-width:800px;padding:1px 15px 15px;width:90%}.user-loops-section h3{color:#0ff;margin-bottom:15px}.add-loop-btn{background-color:#0ff;border:none;border-radius:8px;box-shadow:0 0 10px #0ff6;color:#1a1a2e;cursor:pointer;font-size:1em;font-weight:700;margin-top:15px;padding:12px 24px;transition:all .3s ease;width:100%}.add-loop-btn:hover{background-color:#00e6e6;box-shadow:0 0 15px #0ff9;transform:translateY(-2px)}.add-loop-btn:active{background-color:#00b3b3;transform:translateY(0)}.share-toast{animation:toastSlideIn .4s cubic-bezier(.175,.885,.32,1.275);background:linear-gradient(135deg,#2a2a4a,#1a1a2e);border:1px solid #00ffff4d;border-radius:12px;box-shadow:0 8px 32px #0006,0 0 20px #00ffff1a;max-width:450px;min-width:300px;overflow:hidden;position:fixed;right:20px;top:20px;z-index:9999}@keyframes toastSlideIn{0%{opacity:0;transform:translateX(50px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(50px) scale(.95)}}.share-toast--hiding{animation:toastSlideOut .3s ease forwards}.share-toast__content{align-items:flex-start;display:flex;gap:12px;padding:16px 20px}.share-toast__icon{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-size:14px;font-weight:700;height:28px;justify-content:center;width:28px}.share-toast--success .share-toast__icon{background-color:#0f83;border:1px solid #0f86;color:#0f8}.share-toast--error .share-toast__icon{background-color:#f553;border:1px solid #f556;color:#f55}.share-toast__text{display:flex;flex:1 1;flex-direction:column;gap:4px;min-width:0}.share-toast__message{color:#e0e0e0;font-size:.95em;font-weight:500;line-height:1.4}.share-toast__url{background-color:#00ffff1a;border:1px solid #0ff3;border-radius:4px;color:#0ff;font-family:Courier New,monospace;font-size:.8em;padding:4px 8px;word-break:break-all}.share-toast__close{align-items:center;background:none;border:none;border-radius:4px;color:#e0e0e099;cursor:pointer;display:flex;font-size:20px;height:24px;justify-content:center;line-height:1;margin:-4px -8px -4px 0;padding:0;transition:all .2s ease;width:24px}.share-toast__close:hover{background-color:#ffffff1a;color:#e0e0e0}.share-toast__progress{animation:progressShrink 3s linear forwards;background:linear-gradient(90deg,#0ff,#00e6e6);height:3px;transform-origin:left}.share-toast--error .share-toast__progress{background:linear-gradient(90deg,#f55,#f33)}@keyframes progressShrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.frequency-spectrum{background:linear-gradient(135deg,#ff006e0d,#8338ec0d);border:1px solid #ffffff1a;border-radius:12px;color:#fff;margin:20px 0;padding:20px}.spectrum-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.spectrum-header h3{color:#ffffffe6;font-size:.9rem;margin:0}.status{font-family:monospace;font-size:.8rem}.status.active{color:#0f8}.status.idle{color:#ffffff80}.spectrum-bars{align-items:end;display:flex;gap:4px;height:120px;justify-content:space-between;margin-bottom:10px}.freq-bar{background:linear-gradient(0deg,#0ff3,#8338ec99,#ff006ecc,#fff);border-radius:4px;flex:1 1;min-height:5px;transition:height .1s ease}.freq-labels{display:flex;justify-content:space-between}.freq-label{color:#fff9;flex:1 1;font-size:.7rem;text-align:center}@media (max-width:768px){.frequency-spectrum{margin:10px 0;padding:15px}.spectrum-bars{height:80px}}
/*# sourceMappingURL=main.aea441d2.css.map*/