*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#121212;color:#fff;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:100vh;overflow:hidden}#root{display:flex;flex-direction:column;height:100%}button,input[type=file]{cursor:pointer}.container{margin:0 auto;max-width:1200px;padding:0 20px}.visualizer-container{flex:1 1}.controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#00000080;border-radius:10px;margin-bottom:20px;padding:20px;position:relative;z-index:10}.file-input{display:none}.file-label{background:linear-gradient(135deg,#6e8efb,#a777e3);border-radius:50px;display:inline-block;margin-right:10px;padding:10px 20px}.file-label:hover{box-shadow:0 8px 15px #0003;transform:translateY(-2px)}.canvas-container{height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}canvas{display:block;height:100%;width:100%;z-index:2}.track-info{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#00000080;border-radius:10px;font-size:.9rem;margin-top:20px;padding:10px 20px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn .5s ease-in}.play-button,.test-button{border:none;border-radius:50px;font-weight:700;padding:10px 20px;transition:all .3s ease}.play-button.active{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.play-button.disabled{background:#555;color:#999;cursor:not-allowed}.test-button{background:linear-gradient(135deg,#a6c1ee,#fbc2eb);color:#fff;margin-left:10px}.app{background-color:#121212;bottom:0;box-sizing:border-box;flex-direction:column;justify-content:center;left:0;overflow:hidden;padding:20px;right:0;top:0;z-index:1}.app,.controls{align-items:center;display:flex;position:fixed}.controls{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#121212cc;border:1px solid #ffffff1a;border-radius:24px;box-shadow:0 4px 20px #0003;gap:16px;left:50%;padding:16px;top:20px;transform:translateX(-50%);z-index:100}.file-button{display:flex;max-width:none;min-width:0;position:relative;width:100%}.file-label{align-items:center;animation:gradient 10s ease infinite;background:linear-gradient(45deg,#6e8efb,#a777e3,#ff6b6b);background-size:200% auto;border:none;border-radius:16px;box-shadow:0 4px 15px #0003;box-sizing:border-box;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:48px;justify-content:center;margin:0;padding:8px 0;text-align:center;transition:all .3s ease;-webkit-user-select:none;user-select:none}.file-label:hover{background-position:100%;box-shadow:0 6px 20px #0000004d;transform:translateY(-1px)}.file-label:active{transform:translateY(0)}.button-group{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center;margin:0;max-width:504px;position:relative;width:100%;z-index:2}.button-group>*{max-width:120px;min-width:120px}.button-group>*,.control-button,.file-button .file-label{border-radius:16px;font-size:16px;height:48px;margin:0;width:120px}.control-button,.file-button .file-label{align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;outline:none;padding:8px 0;transition:box-shadow .2s,background .2s}.play-button{background:linear-gradient(45deg,#6e8efb,#a777e3,#ff6b6b);background-size:200% auto;color:#fff}.play-button:hover{background-position:100%;box-shadow:0 6px 20px #0000004d;transform:translateY(-1px)}.play-button:active{transform:translateY(0)}.loop-button{background:linear-gradient(45deg,#4caf50,#8bc34a,#4caf50);background-size:200% auto;color:#fff}.loop-button:hover{background-position:100%;box-shadow:0 6px 20px #0000004d;transform:translateY(-1px)}.loop-button:active{transform:translateY(0)}.loop-button.active{background:linear-gradient(45deg,#f44336,#e53935,#f44336)}.loop-button.active:hover{background-position:100%}.color-mode-button{background:linear-gradient(45deg,#0f9,#39ff14,#0fc);background-size:200% auto;color:#fff;transition:all .3s ease}.color-mode-button:hover{background-position:100%;box-shadow:0 6px 20px #0000004d;transform:translateY(-1px)}.color-mode-button:active{transform:translateY(0)}.visualizer-container{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:100vh;overflow:hidden;position:relative;width:100vw}.visualizer-wrapper{bottom:0;height:100vh;left:0;pointer-events:none;position:fixed;right:0;top:0;width:100vw;z-index:1}.visualizer-canvas{display:block;height:100%;left:0;position:absolute;top:0;width:100%}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.file-button{opacity:1;transition:opacity .3s ease}.file-button.disabled{opacity:0;pointer-events:none}@media (max-width:599px){.button-group{grid-gap:8px;display:grid;gap:8px;grid-template-columns:1fr 1fr;max-width:256px}}
/*# sourceMappingURL=main.e0ced8f3.css.map*/