*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background:#0a0a16;overflow:hidden}#container{width:100vw;height:100vh;position:relative}canvas{display:block}#ui{z-index:100;background:linear-gradient(#0a0a16e6 0%,#0000 100%);flex-direction:column;align-items:center;width:100%;padding:30px;display:flex;position:absolute;top:0;left:0}#container h1{text-align:center;background:linear-gradient(90deg,#f0c,#33f,#0cf);-webkit-text-fill-color:transparent;text-shadow:none;letter-spacing:2px;-webkit-background-clip:text;margin-bottom:20px;font-size:3rem;font-weight:300}.tagline{color:#a0a0e0;text-align:center;margin-bottom:30px;font-size:1.2rem}.controls{flex-wrap:wrap;justify-content:center;gap:20px;margin-top:20px;display:flex}.control-btn{color:#fff;border-radius:var(--radius-sm);cursor:pointer;background:#141428b3;border:1px solid #6464ff33;align-items:center;gap:8px;padding:12px 25px;font-size:1rem;transition:all .3s;display:flex;box-shadow:0 4px 15px #0003}.control-btn:hover{box-shadow:none;background:#282850cc;transform:translateY(-2px)}.control-btn.active{box-shadow:none;background:#5050ff4d;border:1px solid #6464ff80}#audioInput{display:none}.file-label{color:#fff;border-radius:var(--radius-sm);cursor:pointer;background:#141428b3;border:1px solid #ff64ff33;align-items:center;gap:8px;padding:12px 25px;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px #0003}.file-label:hover{box-shadow:none;background:#3c143ccc;transform:translateY(-2px)}.visualization-info{border-radius:var(--radius-sm);color:#a0a0e0;background:#141428b3;border:1px solid #6464ff33;padding:12px 25px;font-size:.9rem;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.pulse{animation:3s infinite pulse}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.icon{width:18px;height:18px}.color-palette{gap:10px;margin-top:20px;display:flex}.color-option{cursor:pointer;border:2px solid #0000;border-radius:50%;width:30px;height:30px;transition:all .2s}.color-option.active{border:2px solid #fff;transform:scale(1.1)}.visualization-controls{gap:15px;margin-top:20px;display:flex}.viz-btn{color:#a0a0e0;border-radius:var(--radius-lg);cursor:pointer;background:#141428b3;border:1px solid #6464ff33;padding:8px 15px;font-size:.9rem;transition:all .3s}.viz-btn.active{color:#fff;background:#5050ff4d;border:1px solid #6464ff80}