@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap";
.remix-mpc{background:#0a0a0a;justify-content:center;align-items:center;min-height:100vh;padding:2rem;font-family:Space Grotesk,monospace;font-size:2rem;display:flex}.remix-mpc__pad-grid{background:linear-gradient(145deg,#1a1a1a,#2d2d2d);border-radius:20px;grid-template-columns:1fr;align-items:center;gap:1.4rem;width:100%;max-width:1400px;padding:2rem;display:grid;box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 10px 40px rgba(0,0,0,.8)}@media (min-width:768px){.remix-mpc__pad-grid{grid-template-columns:repeat(2,1fr);align-items:stretch;gap:1rem}}@media (min-width:1024px){.remix-mpc__pad-grid{grid-template-columns:1fr 1fr 1fr 1fr;gap:1.5rem}}.remix-mpc__pad{aspect-ratio:1;background:linear-gradient(145deg,#3a3a3a,#2a2a2a);border:2px solid rgba(255,255,255,.05);border-radius:12px;flex-direction:column;justify-content:space-between;padding:1rem;transition:all .2s;display:flex;position:relative;box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 1px 2px rgba(255,255,255,.1)}.remix-mpc__pad:hover{transform:scale(.98);box-shadow:0 2px 5px rgba(0,0,0,.5),inset 0 2px 5px rgba(0,0,0,.5)}.remix-mpc__pad--active{background:linear-gradient(145deg,#4a3a4a,#3a2a3a);animation:4s padGlow}.remix-mpc__pad--active .remix-mpc__light{background-color:rgba(0,255,200,.8);animation:1s lightPulse}.remix-mpc__content{flex-direction:column;flex-grow:1;gap:.25rem;font-size:.875rem;display:flex}.remix-mpc__input{text-align:center;color:rgba(255,255,255,.7);text-overflow:ellipsis;white-space:nowrap;background:rgba(0,0,0,.3);border-radius:4px;padding:.25rem;overflow:hidden}.remix-mpc__input--thesis{border-left:2px solid rgba(0,255,200,.6)}.remix-mpc__input--antithesis{border-left:2px solid rgba(255,100,0,.6)}.remix-mpc__crossfader{text-align:center;color:rgba(255,255,255,.3);margin:.25rem 0;font-size:1.2rem}.remix-mpc__output{text-align:center;color:rgba(255,255,255,.9);background:linear-gradient(90deg,rgba(150,0,255,.1) 0%,rgba(0,200,255,.1) 100%);border:1px solid rgba(150,0,255,.3);border-radius:4px;margin-top:auto;padding:.5rem;font-weight:500}.remix-mpc__light{background:rgba(255,255,255,.1);border-radius:50%;width:12px;height:12px;transition:all .3s;position:absolute;bottom:8px;right:8px;box-shadow:0 0 10px}@keyframes padGlow{0%{border-color:rgba(255,255,255,.05)}50%{border-color:rgba(255,0,150,.8)}to{border-color:rgba(255,255,255,.05)}}@keyframes lightPulse{0%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}to{opacity:.5;transform:scale(1)}}