body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app{-webkit-tap-highlight-color:transparent;align-items:center;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);box-sizing:border-box;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;min-height:100vh;overflow-x:hidden;padding:1rem;width:100%}.app-title{-webkit-text-fill-color:#0000;background:linear-gradient(90deg,#a78bfa,#60a5fa,#34d399);-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700;letter-spacing:.1em;margin-bottom:1rem;text-align:center;width:100%}.main-content{gap:1rem;margin:0 auto;max-width:1200px}.controls-and-instruments,.main-content{display:flex;flex-direction:column;width:100%}.controls-and-instruments{align-items:center}.control-panel{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#ffffff14;border:1px solid #ffffff1f;border-radius:.75rem;box-sizing:border-box;margin-bottom:1rem;padding:.75rem 1rem;width:100%}.control-group{align-items:center;display:flex;gap:.75rem}.control-label{color:#ffffffd9;display:block;font-size:.875rem;margin-bottom:.25rem}.control-select{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#ffffff1f;border:1px solid #ffffff26;border-radius:.5rem;color:#fff;cursor:pointer;font-size:.875rem;padding:.5rem .75rem;transition:background .2s,border-color .2s}.control-select:focus{background:#ffffff2e;border-color:#a78bfa99;outline:none}.keyboard{flex-wrap:wrap;gap:.375rem;margin-bottom:1rem;width:100%}.key,.keyboard{display:flex;justify-content:center}.key{align-items:flex-end;background:linear-gradient(180deg,#fff,#e2e8f0);border:none;border-radius:0 0 .625rem .625rem;box-shadow:0 4px 12px #0003,inset 0 -2px 4px #0000000d;color:#1e293b;cursor:pointer;font-size:.7rem;font-weight:600;height:6rem;min-width:2.75rem;padding-bottom:.5rem;transition:transform .1s,box-shadow .1s;user-select:none;-webkit-user-select:none;width:calc(12.5% - .32813rem)}.key:active{box-shadow:0 2px 6px #0003,inset 0 -1px 2px #0000000d;transform:scaleY(.97)}.key-active{background:linear-gradient(180deg,#fef9c3,#fde047);box-shadow:0 4px 16px #fde04766}.drum-pads{grid-gap:.625rem;display:grid;gap:.625rem;grid-template-columns:repeat(2,1fr);margin-bottom:1rem;width:100%}.drum-pad{border:none;border-radius:.75rem;box-shadow:0 4px 12px #0003;color:#fff;cursor:pointer;font-size:.875rem;font-weight:700;height:4.5rem;letter-spacing:.025em;transition:transform .1s,box-shadow .1s;user-select:none;-webkit-user-select:none;width:100%}.drum-pad:active{transform:scale(.96)}.drum-pad-kick{background:linear-gradient(135deg,#f43f5e,#e11d48)}.drum-pad-kick:hover{box-shadow:0 6px 20px #f43f5e66}.drum-pad-snare{background:linear-gradient(135deg,#6366f1,#4f46e5)}.drum-pad-snare:hover{box-shadow:0 6px 20px #6366f166}.drum-pad-hihat{background:linear-gradient(135deg,#14b8a6,#0d9488)}.drum-pad-hihat:hover{box-shadow:0 6px 20px #14b8a666}.drum-pad-cymbal{background:linear-gradient(135deg,#f59e0b,#d97706)}.drum-pad-cymbal:hover{box-shadow:0 6px 20px #f59e0b66}.drum-pad-active{outline:3px solid #fffc;outline-offset:2px}.effect-display-container{display:flex;flex-direction:column;margin-bottom:1rem;min-height:250px;width:100%}.effect-display{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#00000040;border:1px solid #ffffff1a;border-radius:.75rem;box-sizing:border-box;height:250px;min-height:250px;overflow:hidden;position:relative;width:100%}.effect-label{color:#fff6;font-size:.7rem;left:.5rem;letter-spacing:.05em;position:absolute;top:.5rem}.effect{opacity:.7;position:absolute;transform-origin:center;will-change:transform,opacity}.effect-circle{animation:ping 1s cubic-bezier(0,0,.2,1);border-radius:50%}.effect-square{animation:pulse 1s ease infinite;transform:rotate(45deg)}.effect-triangle{animation:bounce 1s ease infinite;height:0;width:0}.instruction{color:#ffffffa6;font-size:.8rem;line-height:1.5;margin-bottom:.5rem;margin-top:.5rem;text-align:center}@keyframes ping{0%{opacity:.7;transform:scale(1)}75%,to{opacity:0;transform:scale(1.5)}}@keyframes pulse{0%,to{opacity:.7}50%{opacity:.3}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}@media (min-width:768px){.app{padding:2rem}.app-title{font-size:2rem;margin-bottom:1.5rem}.main-content{align-items:flex-start;flex-direction:row;gap:2rem;justify-content:space-between}.controls-and-instruments{flex:1 1;min-width:0}.effect-display-container{flex:1 1;min-height:400px;min-width:0;position:sticky;top:1rem}.effect-display{height:350px;min-height:350px}.control-panel{margin-bottom:2rem;padding:1rem 1.25rem}.keyboard{gap:.5rem;margin-bottom:2rem}.key{font-size:.875rem;height:8rem;min-width:3.25rem;padding-bottom:1rem;width:3.25rem}.key:hover{background:linear-gradient(180deg,#f8fafc,#cbd5e1)}.drum-pads{gap:1rem;margin-bottom:2rem}.drum-pad{font-size:1rem;height:6rem}.instruction{font-size:.9rem;margin-top:1rem}.effect-label{font-size:.8rem}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}}
/*# sourceMappingURL=main.51e161e4.css.map*/